/* AutoPal Master — clean control-plane UI (adopts the GPT-reference look the client picked). Navy dark ground + a blue system accent, soft rounded cards, a gradient rail that collapses to icons. LIGHT is the default (:root); DARK is opt-in via [data-skin="dark"] on , toggled in the topbar and persisted. Class + CSS-variable API preserved so every template inherits at once. Icons are inline SVG. */ :root{ /* LIGHT */ --bg:#F4F7FA; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#EEF3F8; --border:#DDE5EE; --border-2:#CBD6E2; --text:#162332; --subtext:#64748B; --faint:#94A3B8; --accent:#3B82F6; --accent-2:#2563EB; --accent-dim:#E8F0FE; --money:#0E9F6E; --money-2:#0C8A5F; --money-dim:#E4F6EF; --good:#159A47; --good-dim:#E7F6ED; --warn:#B7791F; --warn-dim:#FBF1DE; --bad:#DC2F2F; --bad-dim:#FBE9E9; --dark:#64748B; --dark-dim:#EEF2F7; --ring:color-mix(in srgb,var(--accent) 30%,transparent); --shadow:0 8px 25px rgba(31,49,65,.08); --shadow-lg:0 18px 44px rgba(31,49,65,.16); --radius:12px; --r-sm:9px; --r-modal:14px; --r-pill:999px; --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } [data-skin="dark"]{ /* DARK — GPT navy, matched to the FleetControl reference tokens exactly (bg #07111b / panel #0c1a27 / line #203546). Cards separate via the visible #203546 hairline (Linear-style), not surface lightness. */ --bg:#07111B; --surface:#0C1A27; --surface-2:#102232; --surface-3:#16293B; --border:#203546; --border-2:#2C4459; --text:#E8F0F7; --subtext:#7F94A8; --faint:#5B6F82; --accent:#3B82F6; --accent-2:#60A5FA; --accent-dim:color-mix(in srgb,var(--accent) 16%,transparent); --money:#25C982; --money-2:#5FE0BC; --money-dim:color-mix(in srgb,#25C982 15%,transparent); --good:#25C982; --good-dim:color-mix(in srgb,#25C982 15%,transparent); --warn:#F59E0B; --warn-dim:color-mix(in srgb,#F59E0B 16%,transparent); --bad:#EF5350; --bad-dim:color-mix(in srgb,#EF5350 16%,transparent); --dark:#7F94A8; --dark-dim:color-mix(in srgb,#7F94A8 14%,transparent); --ring:color-mix(in srgb,var(--accent) 40%,transparent); --shadow:0 12px 40px rgba(0,0,0,.25); --shadow-lg:0 22px 52px rgba(0,0,0,.5); } *{box-sizing:border-box}html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body.nav-lock{overflow:hidden} a{color:var(--accent-2);text-decoration:none}a:hover{text-decoration:underline} :focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:var(--r-sm)} .mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums} .muted{color:var(--subtext)}.tnum{font-variant-numeric:tabular-nums} /* ---------- shell ---------- */ .app{display:flex;min-height:100vh} .sidebar{width:240px;flex:0 0 240px;background:linear-gradient(180deg,var(--surface),var(--bg));border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60;transition:width .18s ease,flex-basis .18s ease} .brand{display:flex;align-items:center;gap:11px;padding:18px 16px 16px} .brand .mark{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;border-radius:9px} .brand .mark svg{width:17px;height:auto;display:block} .brand .name{font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap} .brand .name small{display:block;font-weight:700;font-size:9.5px;color:var(--faint);letter-spacing:.14em} .brand .wordmark{display:block;width:96px;height:22px;background:var(--text);-webkit-mask:url(/static/autopal-wordmark.svg) left center/contain no-repeat;mask:url(/static/autopal-wordmark.svg) left center/contain no-repeat} .nav{padding:6px 10px 16px;flex:1 1 auto;overflow-y:auto} .nav-section{margin-bottom:2px} .nav .group{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:15px 9px 7px;white-space:nowrap} .nav .group .ordot{width:6px;height:6px;border-radius:50%;background:var(--dark)} .nav .group .ordot.ok{background:var(--good)}.nav .group .ordot.bad{background:var(--bad)}.nav .group .ordot.off{background:var(--dark)} .nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;margin:2px 0;color:var(--subtext);font-weight:600;font-size:13.5px;border-radius:var(--r-sm);position:relative;white-space:nowrap} .nav a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text);text-decoration:none} .nav a.active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text);font-weight:700;box-shadow:inset 3px 0 var(--accent)} .nav a .ico{width:17px;height:17px;flex:0 0 17px;opacity:.85} .nav a.active .ico{opacity:1;color:var(--accent-2)} .nav a .lbl{min-width:0} .nav a .badge{margin-left:auto} .nav-section[data-domain="finance"] a .ico{color:var(--money);opacity:1} .nav-section[data-domain="finance"] a:hover{background:color-mix(in srgb,var(--money) 12%,transparent)} .nav-section[data-domain="finance"] a.active{background:color-mix(in srgb,var(--money) 14%,transparent);box-shadow:inset 3px 0 var(--money)} .sidebar .foot{border-top:1px solid var(--border);padding:13px 15px} .sidebar .foot .who{font-size:12px;color:var(--subtext);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* collapsed icon-rail — auto (narrow) OR manual (.app.rail) */ .app.rail .sidebar{width:70px;flex-basis:70px} .app.rail .brand{justify-content:center;padding:18px 0} .app.rail .brand .name,.app.rail .brand .wordmark,.app.rail .foot .who,.app.rail .foot .rolechip{display:none} .app.rail .nav{padding:6px 8px} .app.rail .nav .group{justify-content:center;font-size:0;padding:13px 0 5px}.app.rail .nav .group .ordot{width:6px;height:6px} .app.rail .nav a{justify-content:center;padding:11px 0} .app.rail .nav a .lbl,.app.rail .nav a .badge{display:none} .app.rail .sidebar .foot{display:flex;justify-content:center} /* ---------- main + topbar ---------- */ .main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;gap:14px;padding:13px 26px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50} .topbar h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em} .topbar .spacer{flex:1 1 auto} .hamburger{display:inline-flex;width:36px;height:36px;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--r-sm);color:var(--subtext);cursor:pointer;align-items:center;justify-content:center} .hamburger:hover{color:var(--text);border-color:var(--faint)}.hamburger svg{width:18px;height:18px} .content{padding:24px 28px 48px;width:100%} /* ---------- page-head (GPT-style: title + description at the top of each page) ---------- */ .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 22px} .phead h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em} .phead p{margin:6px 0 0;color:var(--subtext);font-size:13.5px;max-width:76ch} .phead .acts{display:flex;gap:8px;flex-wrap:wrap} .skin-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-2);background:var(--surface);color:var(--subtext);border-radius:var(--r-sm);cursor:pointer} .skin-toggle:hover{color:var(--text);border-color:var(--faint)}.skin-toggle svg{width:17px;height:17px;display:block} .skin-toggle .i-sun{display:none}.skin-toggle .i-moon{display:block} [data-skin="dark"] .skin-toggle .i-sun{display:block}[data-skin="dark"] .skin-toggle .i-moon{display:none} .health{display:inline-flex;align-items:stretch;height:34px;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;font-size:12px;font-weight:700;background:var(--surface)} .health a{display:inline-flex;align-items:center;gap:6px;padding:0 12px;color:var(--text);text-decoration:none;border-right:1px solid var(--border)} .health a:last-child{border-right:0}.health a:hover{background:var(--surface-2)} .health .d{width:7px;height:7px;border-radius:50%} .health .in-sync .d{background:var(--good)}.health .drift .d{background:var(--bad)}.health .dark .d{background:var(--dark)}.health .pending .d{background:var(--warn)} .scanage{font-size:12px;color:var(--subtext);white-space:nowrap}.scanage.warn{color:var(--warn)} .mtd{font-family:var(--mono);font-size:13px;color:var(--money);font-variant-numeric:tabular-nums;white-space:nowrap} /* ---------- topbar user menu (top-right) ---------- */ .usermenu{position:relative;padding-bottom:10px;margin-bottom:-10px} /* padding = hover bridge to the pop */ .userbtn{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 6px;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;color:var(--text)} .userbtn:hover{border-color:var(--faint)} .userbtn .avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:11px;font-weight:800} .userbtn .uinfo{display:flex;flex-direction:column;line-height:1.15;text-align:left;max-width:160px} .userbtn .uname{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .userbtn .urole{font-size:10.5px;color:var(--subtext);font-weight:600} .userbtn .uchev{width:14px;height:14px;flex:0 0 14px;color:var(--subtext);transition:transform .15s} .usermenu.open .uchev,.usermenu:hover .uchev{transform:rotate(180deg)} .userpop{display:none;position:absolute;top:100%;right:0;min-width:230px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;z-index:80} .usermenu:hover .userpop,.usermenu.open .userpop{display:block} .userpop-hd{padding:11px 14px;border-bottom:1px solid var(--border)} .userpop-hd .uname{font-size:13px;font-weight:700} .userpop-hd .uemail{font-size:11.5px;color:var(--subtext);overflow:hidden;text-overflow:ellipsis} .umi{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:0;background:transparent;color:var(--text);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;text-align:left;text-decoration:none} .umi:hover{background:var(--surface-2);text-decoration:none} .umi svg{width:16px;height:16px;flex:0 0 16px;color:var(--subtext)} .umi-danger,.umi-danger svg{color:var(--bad)} .umi-danger:hover{background:var(--bad-dim)} .userpop form{margin:0;border-top:1px solid var(--border)} /* thin, subtle scrollbars (the default chunky bar looked bad, esp. in the sidebar) */ *{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box} .nav::-webkit-scrollbar,.itemlist::-webkit-scrollbar{width:7px} /* ---------- banners ---------- */ .banner{padding:12px 15px;border-radius:var(--radius);margin:0 0 18px;font-weight:600;font-size:13px;border:1px solid;display:flex;align-items:center;gap:10px} .banner svg{width:17px;height:17px;flex:0 0 17px} .banner.ok{background:var(--good-dim);border-color:color-mix(in srgb,var(--good) 32%,transparent);color:var(--good)} .banner.err{background:var(--bad-dim);border-color:color-mix(in srgb,var(--bad) 32%,transparent);color:var(--bad)} /* ---------- metric tiles (GPT metric card: floated icon + colored sub) ---------- */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:22px} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:17px 18px;position:relative;overflow:hidden;color:var(--text);display:block;box-shadow:var(--shadow)} a.tile:hover{border-color:var(--border-2);text-decoration:none;transform:translateY(-1px);transition:transform .12s ease} .tile .rail{display:none} .tile .ico{position:absolute;top:15px;right:15px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent-2)} .tile .ico svg{width:19px;height:19px} .tile .k{font-size:12px;color:var(--subtext);font-weight:600} .tile .v{font-size:28px;font-weight:800;margin:7px 0 2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1} .tile .sub{font-size:11.5px;font-weight:600;color:var(--subtext)} .tile.good .v{color:var(--good)}.tile.good .ico{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)} .tile.drift .v{color:var(--bad)}.tile.drift .ico{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)} .tile.dark .v{color:var(--dark)}.tile.dark .ico{background:color-mix(in srgb,var(--dark) 14%,transparent);color:var(--dark)} .tile.warn .v{color:var(--warn)}.tile.warn .ico{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} .tile.accent .v{color:var(--accent-2)} .tile.money .v{color:var(--money)}.tile.money .ico{background:color-mix(in srgb,var(--money) 14%,transparent);color:var(--money)} .tile .sub.good{color:var(--good)}.tile .sub.warn{color:var(--warn)}.tile .sub.bad{color:var(--bad)} /* ---------- cards ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:22px;box-shadow:var(--shadow);overflow:hidden} .card>.hd{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border)} .card>.hd h2{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em} .card>.hd .sub{font-size:12px;color:var(--subtext)} .card>.hd .spacer{flex:1 1 auto} .card>.bd{padding:18px}.card>.bd.flush{padding:0} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .grid-2>.card{margin-bottom:0} /* inline "see more" link (e.g. a card header's Breakdown →). Without this its rendered unsized. */ .link{display:inline-flex;align-items:center;gap:5px;color:var(--accent-2);font-size:12.5px;font-weight:700;white-space:nowrap} .link svg{width:15px;height:15px;flex:0 0 15px} a.card:hover .link{text-decoration:underline} /* ---------- tables ---------- */ .tbl-wrap{overflow-x:auto} .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{text-align:left;padding:11px 16px;color:var(--faint);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--border);background:var(--surface-2);position:sticky;top:0} .tbl td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle} .tbl tr:last-child td{border-bottom:none} .tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)} .tbl .domain{font-weight:700}.tbl .muted{color:var(--subtext)} /* ---------- chips + badges ---------- */ .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700;border:1px solid transparent;white-space:nowrap} .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .chip.clean{color:var(--good);background:var(--good-dim)} .chip.drift{color:var(--bad);background:var(--bad-dim)} .chip.dark,.chip.unknown{color:var(--dark);background:var(--dark-dim)} .chip.approved{color:var(--accent-2);background:var(--accent-dim)} .chip.pending{color:var(--warn);background:var(--warn-dim)} .chip.banned{color:var(--bad);background:var(--bad-dim)} .chip.running{color:var(--accent-2);background:var(--accent-dim)} .chip.running::before{animation:pulse 1.3s ease-in-out infinite} .chip.est{color:var(--warn);background:transparent;border-color:color-mix(in srgb,var(--warn) 40%,transparent)} .badge{display:inline-flex;min-width:20px;height:19px;padding:0 6px;align-items:center;justify-content:center;font-size:11px;font-weight:800;border-radius:var(--r-pill);background:var(--surface-3);color:var(--subtext);font-variant-numeric:tabular-nums} /* role pill (Users): dot-less tint pill — Super-admin blue, Admin grey (matches the reference badges) */ .upill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700} .upill.super{color:var(--accent-2);background:var(--accent-dim)} .upill.admin{color:var(--subtext);background:var(--dark-dim)} .badge.hot{background:var(--bad);color:#fff} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} /* ---------- forms + buttons ---------- */ .field{margin-bottom:16px} .field label{display:block;font-weight:700;font-size:12.5px;margin-bottom:6px} .field .hint{font-size:12px;color:var(--subtext);margin:4px 0 0} input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],textarea,select{width:100%;padding:9px 12px;font-size:13.5px;font-family:inherit;background:var(--surface-2);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-sm)} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)} textarea{resize:vertical;min-height:120px;font-family:var(--mono);font-size:12.5px} .btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:9px 15px;font-size:13px;font-weight:700;font-family:inherit;background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-sm)} .btn:hover{background:var(--surface-2);border-color:var(--faint);text-decoration:none} .btn svg{width:15px;height:15px;flex:0 0 15px} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)} .btn-danger{background:transparent;border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)} .btn-danger:hover{background:var(--bad-dim)} .btn-ghost{background:transparent} .btn-sm{padding:6px 11px;font-size:12px}.btn-sm svg{width:13px;height:13px} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .toolbar input,.toolbar select{width:auto} /* ---------- share / progress ---------- */ .share{position:relative;height:8px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden} .share-bar{position:absolute;left:0;top:0;bottom:0;background:var(--money);border-radius:var(--r-pill)} .prog{position:relative;height:7px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden;min-width:110px;margin-top:5px} .prog>i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:var(--r-pill);transition:width .35s ease} .prog.indet>i{width:30%!important;animation:indet 1.1s ease-in-out infinite} .prog-txt{display:block;font-size:10.5px;color:var(--subtext);font-variant-numeric:tabular-nums;margin-top:4px} @keyframes indet{0%{left:-30%}100%{left:100%}} /* ---------- misc ---------- */ .empty{text-align:center;padding:44px 20px;color:var(--subtext)} .empty .big{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px} .notes{margin:0;padding-left:18px}.notes li{margin:3px 0} .kv{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;font-size:13px} .kv dt{color:var(--subtext);font-weight:600}.kv dd{margin:0} pre.payload{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;overflow-x:auto;font-family:var(--mono);font-size:12px;color:var(--subtext);max-height:460px} details.raw summary{cursor:pointer;color:var(--subtext);font-weight:600;font-size:13px} .copy{cursor:pointer} .skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:shimmer 1.2s infinite;border-radius:var(--r-sm)} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}} .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}.scrim[hidden]{display:none} /* ---------- responsive ---------- */ @media(max-width:1080px){ .app:not(.rail) .sidebar{width:70px;flex-basis:70px} .app:not(.rail) .brand{justify-content:center;padding:18px 0} .app:not(.rail) .brand .name,.app:not(.rail) .brand .wordmark,.app:not(.rail) .foot .who,.app:not(.rail) .foot .rolechip{display:none} .app:not(.rail) .nav{padding:6px 8px} .app:not(.rail) .nav .group{justify-content:center;font-size:0;padding:13px 0 5px} .app:not(.rail) .nav a{justify-content:center;padding:11px 0} .app:not(.rail) .nav a .lbl,.app:not(.rail) .nav a .badge{display:none} .app:not(.rail) .sidebar .foot{display:flex;justify-content:center} .grid-2{grid-template-columns:1fr} } @media(max-width:640px){ .topbar{padding:12px 14px}.topbar h1{font-size:17px} .content{padding:16px 14px 40px} .health span,.health .lbl{display:none}.health a{padding:0 9px}.scanage{display:none} .userbtn .uinfo,.userbtn .uchev{display:none} } @media(prefers-reduced-motion:reduce){ .sidebar{transition:none}a.tile:hover{transform:none} .chip.running::before,.skeleton,.prog.indet>i{animation:none} }