/* Shared Admin/Pano foundation. Components consume roles; faceplates select a palette. */
/* Admin's original warm palette remains the default. */
:root {
    --dynaplex-orange: #FE5000;
    --ui-accent-50: #FFF8F3; --ui-accent-100: #FFEDD5; --ui-accent-200: #FDD8B0;
    --ui-accent-300: #F9B97B; --ui-accent-400: #F08A45; --ui-accent-500: #D96B22;
    --ui-accent-600: #B8531A; --ui-accent-700: #933F14; --ui-accent-800: #6E300F;
    --ui-accent-900: #4A210A; --ui-accent-950: #2D1406;
    --ui-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-ink: #111827; --ui-muted: #6b7280; --ui-accent: var(--ui-accent-600);
    --ui-focus: var(--ui-accent); --ui-input-focus: var(--dynaplex-orange);
    --ui-page: #f4efe9;
    --ui-page-glow: rgba(254, 80, 0, .025); --ui-page-shade: rgba(160, 140, 120, .04);
    --ui-surface: rgba(255, 254, 252, .96); --ui-sidebar-surface: rgba(255, 254, 252, .94);
    --ui-stat-surface: rgba(255, 254, 252, .88); --ui-input-surface: rgba(255, 254, 252, .8);
    --ui-line: rgba(160, 140, 120, .12); --ui-panel-border: rgba(180, 160, 130, .12);
    --ui-stat-border: rgba(180, 160, 130, .1); --ui-input-border: rgba(180, 160, 130, .25);
    --ui-soft: rgba(0, 0, 0, .025); --ui-table-heading: rgba(0, 0, 0, .02); --ui-table-hover: rgba(0, 0, 0, .025);
    --ui-nav-hover: rgba(0, 0, 0, .05); --ui-nav-active: rgba(254, 80, 0, .08);
    --ui-tooltip-surface: rgba(255, 254, 252, .98); --ui-tooltip-ink: #44403c;
    --ui-shadow-rgb: 120, 80, 40;
    --ui-shadow: 0 2px 8px -2px rgba(var(--ui-shadow-rgb), .12);
    --ui-sidebar-shadow: 0 1px 2px 0 rgba(var(--ui-shadow-rgb), .04), 0 2px 8px -2px rgba(var(--ui-shadow-rgb), .06);
    --ui-card-shadow: var(--ui-sidebar-shadow), inset 0 1px 0 0 rgba(255, 255, 255, .7);
    --ui-stat-shadow: 0 1px 2px 0 rgba(var(--ui-shadow-rgb), .03), inset 0 1px 0 0 rgba(255, 255, 255, .5);
    --ui-card-hover-shadow: 0 2px 4px 0 rgba(var(--ui-shadow-rgb), .06), 0 4px 16px -4px rgba(var(--ui-shadow-rgb), .1), inset 0 1px 0 0 rgba(255, 255, 255, .7);
    --ui-scrollbar: rgba(180, 160, 130, .35); --ui-scrollbar-hover: rgba(160, 130, 100, .5);
    /* Semantic ink and filled controls have separate roles to preserve white-text contrast. */
    --ui-positive: #15803d; --ui-positive-soft: #f0fdf4; --ui-positive-solid: #15803d;
    --ui-warning: #b45309; --ui-warning-soft: #fffbeb; --ui-warning-solid: #b45309;
    --ui-danger: #b91c1c; --ui-danger-soft: #fef2f2; --ui-danger-solid: #b91c1c;
    --ui-neutral: #4b5563; --ui-neutral-soft: #f3f4f6; --ui-neutral-solid: #4b5563;
    --ui-data: #3b82f6;
}
@supports (color: color(display-p3 1 0 0)) {
    :root { --dynaplex-orange: color(display-p3 0.996 0.314 0.0); }
}
@media (prefers-color-scheme: dark) {
    :root {
        --ui-ink: #f3f4f6; --ui-muted: #9ca3af; --ui-accent: var(--ui-accent-400);
        --ui-page: #151210;
        --ui-page-glow: rgba(254, 80, 0, .01); --ui-page-shade: rgba(200, 140, 80, .012);
        --ui-surface: rgba(26, 24, 22, .88); --ui-sidebar-surface: rgba(20, 18, 16, .92);
        --ui-stat-surface: rgba(26, 24, 22, .7); --ui-input-surface: rgba(26, 24, 22, .6);
        --ui-line: rgba(255, 255, 255, .06); --ui-panel-border: rgba(255, 255, 255, .06);
        --ui-stat-border: rgba(255, 255, 255, .05); --ui-input-border: rgba(180, 160, 130, .15);
        --ui-soft: rgba(255, 255, 255, .03); --ui-table-heading: rgba(255, 255, 255, .03); --ui-table-hover: rgba(255, 255, 255, .04);
        --ui-nav-hover: rgba(255, 255, 255, .06); --ui-nav-active: rgba(254, 80, 0, .12);
        --ui-tooltip-surface: rgba(30, 28, 26, .98); --ui-tooltip-ink: #d6d3d1;
        --ui-shadow-rgb: 0, 0, 0;
        --ui-shadow: 0 2px 8px -2px rgba(var(--ui-shadow-rgb), .4);
        --ui-sidebar-shadow: 0 4px 16px rgba(var(--ui-shadow-rgb), .3);
        --ui-card-shadow: 0 1px 2px 0 rgba(var(--ui-shadow-rgb), .2), 0 2px 8px -2px rgba(var(--ui-shadow-rgb), .15), inset 0 1px 0 0 rgba(255, 255, 255, .04);
        --ui-stat-shadow: 0 1px 2px 0 rgba(var(--ui-shadow-rgb), .15), inset 0 1px 0 0 rgba(255, 255, 255, .03);
        --ui-card-hover-shadow: 0 2px 4px 0 rgba(var(--ui-shadow-rgb), .25), 0 4px 16px -4px rgba(var(--ui-shadow-rgb), .2), inset 0 1px 0 0 rgba(255, 255, 255, .05);
        --ui-scrollbar: rgba(180, 160, 130, .2); --ui-scrollbar-hover: rgba(180, 160, 130, .35);
        --ui-positive: #4ade80; --ui-positive-soft: #052e16;
        --ui-warning: #fbbf24; --ui-warning-soft: #451a03;
        --ui-danger: #f87171; --ui-danger-soft: #450a0a;
        --ui-neutral: #d1d5db; --ui-neutral-soft: #1f2937;
        --ui-data: #60a5fa;
    }
}

/* AssetTrak's gray/indigo palette, selected once on the document root. */
:root[data-ui-palette="assettrak"] {
    --ui-accent-50: #eef2ff; --ui-accent-100: #e0e7ff; --ui-accent-200: #c7d2fe;
    --ui-accent-300: #a5b4fc; --ui-accent-400: #818cf8; --ui-accent-500: #6366f1;
    --ui-accent-600: #4f46e5; --ui-accent-700: #4338ca; --ui-accent-800: #3730a3;
    --ui-accent-900: #312e81; --ui-accent-950: #1e1b4b;
    --ui-focus: var(--ui-accent-500); --ui-input-focus: var(--ui-focus);
    --ui-page: #f9fafb;
    --ui-page-glow: rgba(99, 102, 241, .025); --ui-page-shade: rgba(107, 114, 128, .04);
    --ui-surface: rgba(255, 255, 255, .96); --ui-sidebar-surface: rgba(255, 255, 255, .94);
    --ui-stat-surface: rgba(255, 255, 255, .88); --ui-input-surface: rgba(255, 255, 255, .8);
    --ui-line: #e5e7eb; --ui-panel-border: #e5e7eb; --ui-stat-border: #e5e7eb; --ui-input-border: #d1d5db;
    --ui-soft: #f3f4f6; --ui-table-heading: #f9fafb; --ui-table-hover: #f3f4f6;
    --ui-nav-hover: #f3f4f6; --ui-nav-active: #f9fafb;
    --ui-tooltip-surface: rgba(255, 255, 255, .98); --ui-tooltip-ink: #374151;
    --ui-shadow-rgb: 17, 24, 39;
    --ui-scrollbar: rgba(107, 114, 128, .35); --ui-scrollbar-hover: rgba(107, 114, 128, .5);
}
@media (prefers-color-scheme: dark) {
    :root[data-ui-palette="assettrak"] {
        --ui-focus: var(--ui-accent-400);
        --ui-page: #030712;
        --ui-page-glow: rgba(129, 140, 248, .01); --ui-page-shade: rgba(156, 163, 175, .012);
        --ui-surface: rgba(17, 24, 39, .88); --ui-sidebar-surface: rgba(17, 24, 39, .92);
        --ui-stat-surface: rgba(17, 24, 39, .7); --ui-input-surface: rgba(31, 41, 55, .8);
        --ui-line: #374151; --ui-panel-border: #374151; --ui-stat-border: #374151; --ui-input-border: #4b5563;
        --ui-soft: #1f2937; --ui-table-heading: #1f2937; --ui-table-hover: #1f2937;
        --ui-nav-hover: #1f2937; --ui-nav-active: #1f2937;
        --ui-tooltip-surface: rgba(31, 41, 55, .98); --ui-tooltip-ink: #d1d5db;
        --ui-shadow-rgb: 0, 0, 0;
        --ui-scrollbar: rgba(156, 163, 175, .2); --ui-scrollbar-hover: rgba(156, 163, 175, .35);
    }
}

/* Paper texture and component geometry are the same for every palette. */
.paper-bg {
    background-color: var(--ui-page);
    background-image:
        radial-gradient(ellipse at 70% 15%, var(--ui-page-glow) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 85%, var(--ui-page-shade) 0%, transparent 50%);
}
@media (prefers-color-scheme: dark) {
    .paper-bg {
        background-image:
            radial-gradient(ellipse at 70% 15%, var(--ui-page-glow) 0%, transparent 80%),
            radial-gradient(ellipse at 20% 85%, var(--ui-page-shade) 0%, transparent 80%);
    }
}

/* Paper grain noise overlay */
.paper-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: 0.07;
}
@media (prefers-color-scheme: dark) {
    .paper-noise {
        opacity: 0.04;
        mix-blend-mode: soft-light;
    }
}

/* Shared surfaces and controls */
.sidebar-nav {
    position: relative;
    z-index: 10;
    background: var(--ui-sidebar-surface);
    box-shadow: var(--ui-sidebar-shadow);
    border: 1px solid var(--ui-panel-border);
}
.canvas-card {
    background: var(--ui-surface);
    border-radius: 0.875rem;
    box-shadow: var(--ui-card-shadow);
    border: 1px solid var(--ui-panel-border);
}
.canvas-card thead { background: var(--ui-table-heading); }
.canvas-card tbody { background: transparent; }
.canvas-card tbody tr { transition: background-color 0.15s; }
.canvas-card tbody tr:hover { background: var(--ui-table-hover); }
.canvas-card .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-line); }
.canvas-stat {
    background: var(--ui-stat-surface);
    border-radius: 0.75rem;
    box-shadow: var(--ui-stat-shadow);
    border: 1px solid var(--ui-stat-border);
}
.canvas-card-interactive { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.canvas-card-interactive:hover { box-shadow: var(--ui-card-hover-shadow); transform: translateY(-1px); }
.form-input {
    box-sizing: border-box;
    border: 1px solid var(--ui-input-border);
    border-radius: 12px;
    color: var(--ui-ink);
    font: 400 14px/1.5 var(--ui-font);
    min-height: 40px;
    max-width: 100%;
    padding: 8px 12px;
    background: var(--ui-input-surface);
}
.form-input:focus { border-color: var(--ui-input-focus); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ui-scrollbar); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ui-scrollbar-hover); }

/* ── Custom select — chevron + appearance reset ── */
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
@media (prefers-color-scheme: dark) {
    select.form-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}


.ui-shell { position: relative; z-index: 2; min-height: 100dvh; padding: 8px 8px 8px 80px; box-sizing: border-box; }
.ui-main { min-width: 0; padding: 24px; color: var(--ui-ink); font-family: var(--ui-font); }
.ui-icon { display: block; flex: none; width: 20px; height: 20px; }
.ui-sidebar { position: fixed; inset: 8px auto 8px 8px; width: 64px; box-sizing: border-box; border-radius: 16px; display: flex; align-items: center; flex-direction: column; padding: 16px 0; }
.ui-sidebar nav { display: grid; gap: 4px; }
.ui-brand { margin-bottom: 16px; color: var(--ui-accent-500) !important; }
.ui-brand .ui-icon { width: 28px; height: 28px; }
.ui-nav-footer { margin-top: auto; padding-top: 24px; }
.ui-nav-footer form { margin: 0; }
.nav-item { position: relative; display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 12px; transition: color .15s ease, background-color .15s ease; cursor: pointer; border: none; background: none; padding: 0; color: var(--ui-muted); text-decoration: none; font: inherit; }
.nav-item:hover { background: var(--ui-nav-hover); }
.nav-item.is-active, .ui-mobile-link.is-active { background: var(--ui-nav-active); color: var(--ui-accent); }
.nav-item .nav-tooltip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%) scale(.96); padding: 5px 10px; font: 500 12px/1.5 var(--ui-font); white-space: nowrap; border-radius: 6px; background: var(--ui-tooltip-surface); color: var(--ui-tooltip-ink); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); opacity: 0; visibility: hidden; pointer-events: auto; transition: opacity .12s ease, transform .12s ease; z-index: 50; }
.nav-tooltip::before { content: ""; position: absolute; right: 100%; top: -4px; bottom: -4px; width: 10px; }
.nav-item:not([data-label-dismissed]):is(:hover,:focus-visible) .nav-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.nav-item:focus-visible, .ui-icon-button:focus-visible, .ui-mobile-link:focus-visible, .ui-button:focus-visible, .info-trigger:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ui-logout:hover { color: #b91c1c; background: rgba(239,68,68,.07); }
@media (prefers-color-scheme: dark) { .ui-logout:hover { color: #fca5a5; } }
.ui-mobile-header, .ui-fallback-navigation { display: none; }
.ui-mobile-brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ui-ink); font: 600 14px/1.5 var(--ui-font); }
.ui-mobile-brand>.ui-icon { width: 24px; height: 24px; color: var(--ui-accent-500); }
.ui-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--ui-muted); padding: 0; cursor: pointer; }
.ui-icon-button:hover { background: var(--ui-nav-hover); }
.ui-icon-button[hidden] { display: none; }
.ui-navigation-dialog { box-sizing: border-box; position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; width: min(288px, 88vw); max-width: none; padding: 16px; border: 1px solid var(--ui-line); border-radius: 0; background: var(--ui-tooltip-surface); color: var(--ui-ink); font-family: var(--ui-font); box-shadow: -8px 0 32px #0002; overflow-y: auto; }
.ui-navigation-dialog[open] { display: flex; flex-direction: column; }
.ui-navigation-dialog::backdrop { background: rgba(0,0,0,.5); }
.ui-dialog-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 0 0 20px; }
.ui-mobile-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; min-height: 44px; box-sizing: border-box; width: 100%; background: none; border: 0; border-radius: 12px; color: var(--ui-muted); text-decoration: none; font: 400 14px/1.5 var(--ui-font); cursor: pointer; }
.ui-mobile-link:hover { background: var(--ui-nav-hover); }
.ui-navigation-dialog nav { display: grid; gap: 4px; }
.ui-navigation-dialog .ui-nav-footer { border-top: 1px solid var(--ui-line); padding-top: 12px; }
.ui-button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--ui-input-border); border-radius: 12px; color: var(--ui-ink); background: var(--ui-surface); font: 500 14px/1.5 var(--ui-font); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.ui-button:hover { background: var(--ui-soft); }
.ui-button--primary { background: var(--ui-accent-600); border-color: var(--ui-accent-600); color: #fff; box-shadow: 0 1px 2px #0001; }
.ui-button--primary:hover { background: var(--ui-accent-700); border-color: var(--ui-accent-700); }
.ui-button:disabled { cursor: default; opacity: .45; }
.form-input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
/* Definition component: native button, explicit description, pointer/keyboard/touch. */
.info { display: inline-flex; vertical-align: middle; position: relative; margin-left: 3px; }
.info-trigger { display: inline-flex; justify-content: center; align-items: center; padding: 3px; border: 0; border-radius: 50%; background: none; color: var(--ui-muted); cursor: help; width: 22px; height: 22px; }
.info-trigger .ui-icon { width: 15px; height: 15px; }
.info-trigger:hover { color: var(--ui-accent); background: var(--ui-nav-hover); }
.info-tooltip { display: block; visibility: hidden; opacity: 0; position: absolute; width: 272px; max-width: calc(100vw - 32px); box-sizing: border-box; bottom: calc(100% + 8px); right: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--ui-line); background: var(--ui-tooltip-surface); color: var(--ui-tooltip-ink); box-shadow: var(--ui-shadow); font: 400 12px/1.6 var(--ui-font); text-align: left; letter-spacing: normal; white-space: normal; z-index: 80; }
.info[data-open]>.info-tooltip, .info:not([data-ready]):is(:hover,:focus-within)>.info-tooltip { visibility: visible; opacity: 1; }
@media (max-width: 1023px) {
    .ui-shell { padding: 0 8px 8px; }
    .ui-sidebar { display: none; }
    .ui-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 12px; }
    .ui-main { padding: 16px; }
    .ui-fallback-navigation { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 8px 16px; }
    .ui-fallback-navigation .ui-mobile-link { width: auto; font-size: 12px; gap: 6px; }
    .ui-fallback-navigation form { margin: 0; }
}
@media (max-width: 520px) { .ui-main { padding: 16px 8px; } }
@media (max-height: 700px) and (min-width: 1024px) { .ui-sidebar { padding: 8px 0; } .ui-brand { margin-bottom: 4px; } .ui-sidebar nav { gap: 0; } .ui-sidebar .nav-item { height: 36px; } .ui-nav-footer { padding-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .nav-item, .nav-tooltip, .ui-button { transition: none !important; } }

/* Very short windows use the same accessible drawer as narrow windows. */
@media (max-height: 480px) and (min-width: 1024px) { .ui-shell { padding-left: 8px; } .ui-sidebar { display: none; } .ui-mobile-header { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px; } .ui-fallback-navigation { display: flex; flex-wrap: wrap; } .ui-fallback-navigation .ui-mobile-link { width: auto; } }

.ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }