/* ============================================================================ ISOMETRIC ADMIN DESIGN SYSTEM — Ananto (own backend). Own IP, no framework. A cohesive, premium, token-driven admin: polished light + sane dark. THEME MODEL Light is the :root default. Dark applies two ways, both supported: • automatically via prefers-color-scheme (unless the user forced light) • explicitly when the attribute is set (the topbar theme toggle stamps this and persists it to localStorage). data-theme ALWAYS wins over the OS preference, in both directions. TOKENS ARE THE ONLY SOURCE OF COLOUR / GEOMETRY. Components below reference var(--iso-*) exclusively — never a raw colour. Pages/partials must do the same (inline style="color:var(--iso-muted)" etc). Raw hex lives ONLY in the :root token blocks in section 1. STRICT SPACING SCALE (4px base) — use these for every gap/margin/padding: --iso-sp-1 4 · -2 8 · -3 12 · -4 16 · -5 24 · -6 32 · -7 48 · -8 64 TABLE OF CONTENTS 1. Tokens (light + dark) 2. Reset + base 3. Shell layout (sidebar · topbar · content · main) 4. Sidebar (brand · nav · section labels · active · submenu) 5. Topbar (title/breadcrumb slot · theme toggle · profile) 6. Page header (breadcrumb + title + actions) + legacy .iso-top 7. Hero banner 8. Cards + KPI tiles 9. Panels (head · body · scroll) 10. Filter / toolbar bar 11. Pill tabs 12. Data table 13. Pills / status badges + chips 14. Buttons 15. Form controls (field · label · checkbox) 16. Row-action dropdowns 17. Empty state 18. Pagination + per-page 19. Inline-SVG chart wrapper 20. Flash notes / alerts 21. Login 22. Utilities 23. Responsive · scrollbars · motion · print ============================================================================ */ /* ── 1. TOKENS ───────────────────────────────────────────────────────────── */ :root{ /* brand + accents */ --iso-primary:#6d5efc; --iso-primary-700:#4b3ec4; --iso-teal:#0e9e83; --iso-orange:#e07016; --iso-blue:#2f7fe0; --iso-pink:#e83e73; /* accent gradients (KPI tiles / buttons) — full values so components stay hex-free */ --iso-grad-primary:linear-gradient(145deg,#7d6ffd,#4b3ec4); --iso-grad-teal:linear-gradient(145deg,#2fe0c0,#12977f); --iso-grad-orange:linear-gradient(145deg,#ffb15a,#ef7518); --iso-grad-blue:linear-gradient(145deg,#5cb3ff,#2f7fe0); --iso-grad-pink:linear-gradient(145deg,#ff7da6,#e83e73); --iso-grad-danger:linear-gradient(145deg,#ff7da6,#e0345f); --iso-grad-warn:linear-gradient(145deg,#ffbf6b,#ef7518); --iso-grad-hero:radial-gradient(720px 300px at 88% -60%,rgba(255,255,255,.22),transparent 60%),linear-gradient(120deg,#4b3ec4,#6d5efc 46%,#8b5cf6); /* semantic status: ink + soft fill */ --iso-ok:#0e9e83; --iso-ok-soft:rgba(14,158,131,.13); --iso-warn:#c15f11; --iso-warn-soft:rgba(224,112,22,.13); --iso-bad:#d5325f; --iso-bad-soft:rgba(213,50,95,.12); --iso-info:#4b3ec4; --iso-info-soft:rgba(109,94,252,.12); /* ink + surfaces */ --iso-ink:#171b34; --iso-ink-2:#3a4066; --iso-muted:#6b7291; --iso-line:rgba(23,27,52,.10); --iso-line-strong:rgba(23,27,52,.16); --iso-surface:#ffffff; --iso-surface-2:#f7f8fc; --iso-canvas:#f4f5fb; --iso-zebra:rgba(23,27,52,.022); --iso-row-hover:rgba(109,94,252,.055); /* elevation */ --iso-shadow-sm:0 1px 2px rgba(20,26,58,.06); --iso-shadow:0 1px 2px rgba(20,26,58,.05),0 6px 16px -8px rgba(20,26,58,.14); --iso-shadow-lg:0 14px 30px -12px rgba(75,62,196,.30),0 6px 14px -8px rgba(20,26,58,.14); --iso-focus:0 0 0 3px rgba(109,94,252,.26); /* on-accent ink (white text/overlays over coloured fills — theme-independent) */ --iso-on-accent:#fff; --iso-on-accent-soft:rgba(255,255,255,.24); /* geometry */ --iso-radius-lg:18px; --iso-radius:14px; --iso-radius-sm:10px; --iso-radius-xs:8px; /* spacing scale (4px base) */ --iso-sp-1:.25rem; --iso-sp-2:.5rem; --iso-sp-3:.75rem; --iso-sp-4:1rem; --iso-sp-5:1.5rem; --iso-sp-6:2rem; --iso-sp-7:3rem; --iso-sp-8:4rem; /* frame metrics */ --iso-side-w:256px; --iso-topbar-h:60px; --iso-content-max:1440px; /* sidebar (dark in both themes — a deliberate anchor for the frame) */ --iso-side-bg:linear-gradient(185deg,#211b47 0%,#171233 100%); --iso-side-accent:#9a8bff; --iso-side-ink:#e8e6ff; --iso-side-dim:rgba(210,206,255,.62); --iso-side-label:rgba(168,160,224,.55); --iso-side-hover:rgba(140,128,255,.12); --iso-side-active:linear-gradient(145deg,#7d6ffd,#5646d0); --iso-side-line:rgba(140,128,255,.16); } /* DARK — via OS preference, unless the user explicitly forced light */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --iso-teal:#2fe0c0; --iso-orange:#ffb15a; --iso-blue:#5cb3ff; --iso-pink:#ff7da6; --iso-ok:#2fe0c0; --iso-ok-soft:rgba(47,224,192,.16); --iso-warn:#ffb15a; --iso-warn-soft:rgba(255,177,90,.18); --iso-bad:#ff7da6; --iso-bad-soft:rgba(255,125,166,.18); --iso-info:#a99bff; --iso-info-soft:rgba(140,128,255,.20); --iso-ink:#e9ebfb; --iso-ink-2:#c2c6e6; --iso-muted:#969cbf; --iso-line:rgba(255,255,255,.09); --iso-line-strong:rgba(255,255,255,.15); --iso-surface:#181b2e; --iso-surface-2:#1f2338; --iso-canvas:#101223; --iso-zebra:rgba(255,255,255,.028); --iso-row-hover:rgba(140,128,255,.10); --iso-shadow-sm:0 1px 2px rgba(0,0,0,.45); --iso-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -12px rgba(0,0,0,.55); --iso-shadow-lg:0 18px 38px -14px rgba(0,0,0,.62); --iso-focus:0 0 0 3px rgba(140,128,255,.34); --iso-side-bg:linear-gradient(185deg,#171a2e 0%,#0e1020 100%); --iso-side-ink:#e9ebfb; --iso-side-dim:rgba(200,204,235,.60); --iso-side-label:rgba(150,156,191,.55); --iso-side-hover:rgba(140,128,255,.12); --iso-side-active:linear-gradient(145deg,#7d6ffd,#5646d0); --iso-side-line:rgba(255,255,255,.08); } } /* DARK — forced by the theme toggle (wins over OS) */ :root[data-theme="dark"]{ --iso-teal:#2fe0c0; --iso-orange:#ffb15a; --iso-blue:#5cb3ff; --iso-pink:#ff7da6; --iso-ok:#2fe0c0; --iso-ok-soft:rgba(47,224,192,.16); --iso-warn:#ffb15a; --iso-warn-soft:rgba(255,177,90,.18); --iso-bad:#ff7da6; --iso-bad-soft:rgba(255,125,166,.18); --iso-info:#a99bff; --iso-info-soft:rgba(140,128,255,.20); --iso-ink:#e9ebfb; --iso-ink-2:#c2c6e6; --iso-muted:#969cbf; --iso-line:rgba(255,255,255,.09); --iso-line-strong:rgba(255,255,255,.15); --iso-surface:#181b2e; --iso-surface-2:#1f2338; --iso-canvas:#101223; --iso-zebra:rgba(255,255,255,.028); --iso-row-hover:rgba(140,128,255,.10); --iso-shadow-sm:0 1px 2px rgba(0,0,0,.45); --iso-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -12px rgba(0,0,0,.55); --iso-shadow-lg:0 18px 38px -14px rgba(0,0,0,.62); --iso-focus:0 0 0 3px rgba(140,128,255,.34); --iso-side-bg:linear-gradient(185deg,#171a2e 0%,#0e1020 100%); --iso-side-ink:#e9ebfb; --iso-side-dim:rgba(200,204,235,.60); --iso-side-label:rgba(150,156,191,.55); --iso-side-hover:rgba(140,128,255,.12); --iso-side-active:linear-gradient(145deg,#7d6ffd,#5646d0); --iso-side-line:rgba(255,255,255,.08); } /* ── 2. RESET + BASE ─────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px;line-height:1.5;color:var(--iso-ink);background:var(--iso-canvas); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-feature-settings:"cv02","cv03","cv04","ss01"} a{color:var(--iso-primary-700);text-decoration:none} a:hover{color:var(--iso-primary)} :root[data-theme="dark"] a,:root:not([data-theme="light"]) a{color:inherit} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a{color:var(--iso-info)}} :root[data-theme="dark"] a{color:var(--iso-info)} h1,h2,h3,h4{margin:0;font-weight:750;letter-spacing:-.014em;color:var(--iso-ink)} img{max-width:100%} ::selection{background:rgba(109,94,252,.22)} :focus-visible{outline:none;box-shadow:var(--iso-focus);border-radius:var(--iso-radius-xs)} /* ── 3. SHELL LAYOUT ─────────────────────────────────────────────────────── */ .iso-shell{display:flex;align-items:flex-start;min-height:100vh} .iso-content{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh} .iso-main{flex:1;min-width:0;padding:var(--iso-sp-6)} .iso-container{width:100%;max-width:var(--iso-content-max);margin:0 auto} /* Mobile sidebar scrim (hidden on desktop) */ .iso-scrim{display:none} /* ── 4. SIDEBAR ──────────────────────────────────────────────────────────── */ .iso-side{width:var(--iso-side-w);flex-shrink:0;position:sticky;top:0;height:100vh; display:flex;flex-direction:column;overflow:hidden; background:var(--iso-side-bg);color:var(--iso-side-ink); border-right:1px solid var(--iso-side-line);z-index:40} .iso-brand{flex-shrink:0;display:flex;align-items:center;gap:.5rem; font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--iso-on-accent); padding:var(--iso-sp-5) var(--iso-sp-5) var(--iso-sp-4)} .iso-brand span{color:var(--iso-side-accent);font-weight:700} .iso-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden; padding:var(--iso-sp-2) var(--iso-sp-3) var(--iso-sp-5)} .iso-nav a{display:flex;align-items:center;gap:.62rem;padding:.55rem .7rem; border-radius:var(--iso-radius-sm);margin:1px 0;color:var(--iso-side-dim); font-weight:600;font-size:.9rem;line-height:1.25;transition:background .14s,color .14s} .iso-nav a:hover{background:var(--iso-side-hover);color:var(--iso-on-accent)} .iso-nav a.active{background:var(--iso-side-active);color:var(--iso-on-accent); box-shadow:0 8px 18px -8px rgba(109,94,252,.8)} .iso-nav .sec{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700; color:var(--iso-side-label);padding:var(--iso-sp-4) .7rem var(--iso-sp-2)} .iso-nav .sec:first-child{padding-top:var(--iso-sp-2)} .iso-nav form{margin:0} /* Expandable submenu */ .iso-subnav{border:none;margin:1px 0} .iso-subnav>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.62rem; padding:.55rem .7rem;border-radius:var(--iso-radius-sm);color:var(--iso-side-dim); font-weight:600;font-size:.9rem;transition:background .14s,color .14s} .iso-subnav>summary::-webkit-details-marker{display:none} .iso-subnav>summary:hover{background:var(--iso-side-hover);color:var(--iso-on-accent)} .iso-subnav[open]>summary{color:var(--iso-on-accent)} .iso-subnav .iso-caret{margin-left:auto;font-size:.65rem;opacity:.7;transition:transform .16s} .iso-subnav[open]>summary .iso-caret{transform:rotate(90deg)} .iso-subitems{display:flex;flex-direction:column;gap:1px; margin:.15rem 0 .3rem .95rem;padding-left:.6rem;border-left:1.5px solid var(--iso-side-line)} .iso-subitems a{padding:.42rem .7rem;font-size:.85rem;font-weight:600; border-radius:var(--iso-radius-xs);color:var(--iso-side-dim)} .iso-subitems a:hover{background:var(--iso-side-hover);color:var(--iso-on-accent)} .iso-subitems a.active{background:var(--iso-side-active);color:var(--iso-on-accent)} /* ── 5. TOPBAR ───────────────────────────────────────────────────────────── */ .iso-topbar{position:sticky;top:0;z-index:30;flex-shrink:0; height:var(--iso-topbar-h);display:flex;align-items:center;gap:var(--iso-sp-3); padding:0 var(--iso-sp-6);background:color-mix(in srgb,var(--iso-surface) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--iso-line)} .iso-topbar-title{min-width:0;flex:1;display:flex;align-items:center;gap:.5rem; font-weight:700;font-size:.95rem;color:var(--iso-ink);letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .iso-topbar-title .crumb{color:var(--iso-muted);font-weight:600;font-size:.82rem} .iso-topbar-actions{display:flex;align-items:center;gap:var(--iso-sp-2)} /* icon button (theme toggle / hamburger) */ .iso-iconbtn{width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--iso-line);border-radius:var(--iso-radius-sm);cursor:pointer; background:var(--iso-surface);color:var(--iso-ink);font-size:1.05rem;line-height:1; transition:border-color .14s,color .14s,background .14s} .iso-iconbtn:hover{border-color:var(--iso-primary);color:var(--iso-primary)} .iso-burger{display:none} /* theme toggle glyphs — sun shows in dark, moon shows in light */ .iso-theme-btn .sun{display:none} .iso-theme-btn .moon{display:inline} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .iso-theme-btn .sun{display:inline} :root:not([data-theme="light"]) .iso-theme-btn .moon{display:none} } :root[data-theme="dark"] .iso-theme-btn .sun{display:inline} :root[data-theme="dark"] .iso-theme-btn .moon{display:none} :root[data-theme="light"] .iso-theme-btn .sun{display:none} :root[data-theme="light"] .iso-theme-btn .moon{display:inline} /* profile dropdown (uses
) */ .iso-profile{position:relative} .iso-profile>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem; padding:.3rem .5rem .3rem .35rem;border:1px solid var(--iso-line);border-radius:999px; background:var(--iso-surface);transition:border-color .14s} .iso-profile>summary::-webkit-details-marker{display:none} .iso-profile>summary:hover{border-color:var(--iso-primary)} .iso-avatar{width:2rem;height:2rem;flex-shrink:0;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-weight:800;font-size:.78rem;color:var(--iso-on-accent); background:var(--iso-grad-primary)} .iso-profile .who{max-width:12rem;overflow:hidden;line-height:1.15} .iso-profile .who .nm{font-weight:700;font-size:.82rem;color:var(--iso-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iso-profile .who .rl{font-size:.68rem;color:var(--iso-muted);font-weight:600} .iso-profile-menu{position:absolute;right:0;margin-top:.4rem;min-width:200px;z-index:50; background:var(--iso-surface);border:1px solid var(--iso-line);border-radius:var(--iso-radius); box-shadow:var(--iso-shadow);padding:.4rem;display:flex;flex-direction:column;gap:1px} .iso-profile-menu a,.iso-profile-menu button{display:flex;align-items:center;gap:.55rem;width:100%; text-align:left;padding:.5rem .6rem;border:none;background:transparent;cursor:pointer; border-radius:var(--iso-radius-xs);color:var(--iso-ink);font-size:.85rem;font-weight:600; font-family:inherit} .iso-profile-menu a:hover,.iso-profile-menu button:hover{background:var(--iso-surface-2);color:var(--iso-primary)} .iso-profile-menu .sep{border:0;border-top:1px solid var(--iso-line);margin:.25rem 0} .iso-profile-menu form{margin:0} /* ── 6. PAGE HEADER ──────────────────────────────────────────────────────── */ .iso-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--iso-sp-4); flex-wrap:wrap;margin-bottom:var(--iso-sp-5)} .iso-pagehead h1{font-size:1.6rem;font-weight:800;letter-spacing:-.022em;line-height:1.12} .iso-crumb{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.76rem;font-weight:600; color:var(--iso-muted);margin-bottom:.4rem} .iso-crumb a{color:var(--iso-muted)} .iso-crumb a:hover{color:var(--iso-primary)} .iso-crumb .sep{opacity:.45} .iso-pagehead .actions{display:flex;align-items:center;gap:var(--iso-sp-2);flex-wrap:wrap} /* Legacy simple title bar (kept for pages still using .iso-top) */ .iso-top{display:flex;align-items:center;justify-content:space-between;gap:var(--iso-sp-4); flex-wrap:wrap;margin-bottom:var(--iso-sp-5)} .iso-top h1{font-size:1.6rem;font-weight:800;letter-spacing:-.022em} /* ── 7. HERO ─────────────────────────────────────────────────────────────── */ .iso-hero{position:relative;border-radius:var(--iso-radius-lg);padding:var(--iso-sp-5) var(--iso-sp-6); margin-bottom:var(--iso-sp-5);color:var(--iso-on-accent);overflow:hidden; background:var(--iso-grad-hero);box-shadow:var(--iso-shadow-lg)} .iso-hero h2{font-weight:800;font-size:1.4rem} .iso-hero p{margin:.35rem 0 0;opacity:.85} .iso-cube{position:absolute;border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.05)); transform:rotate(-18deg);box-shadow:inset 0 2px 4px rgba(255,255,255,.35)} .iso-cube.c1{width:84px;height:84px;right:7%;top:-18px} .iso-cube.c2{width:48px;height:48px;right:19%;bottom:-12px;opacity:.7} .iso-cube.c3{width:32px;height:32px;right:3%;bottom:8px;opacity:.5} /* ── 8. CARDS + KPI TILES ────────────────────────────────────────────────── */ .iso-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:var(--iso-sp-4);margin-bottom:var(--iso-sp-5)} .iso-card{background:var(--iso-surface);border:1px solid var(--iso-line); border-radius:var(--iso-radius);box-shadow:var(--iso-shadow-sm); padding:var(--iso-sp-4) var(--iso-sp-5);transition:transform .18s,box-shadow .18s,border-color .18s} .iso-card:hover{transform:translateY(-2px);box-shadow:var(--iso-shadow);border-color:var(--iso-line-strong)} .iso-kpi{display:flex;align-items:center;gap:var(--iso-sp-4)} .iso-ic{width:3rem;height:3rem;flex-shrink:0;border-radius:15px;display:flex; align-items:center;justify-content:center;color:var(--iso-on-accent);font-size:1.3rem;font-weight:800; transform:rotate(-8deg);background:var(--iso-grad-primary); box-shadow:0 6px 14px -5px rgba(109,94,252,.5),inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.16)} .iso-card:hover .iso-ic{transform:rotate(0) scale(1.05)} .iso-ic.teal{background:var(--iso-grad-teal)} .iso-ic.orange{background:var(--iso-grad-orange)} .iso-ic.blue{background:var(--iso-grad-blue)} .iso-ic.pink{background:var(--iso-grad-pink)} .iso-kpi .v{font-size:1.55rem;font-weight:800;letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums} .iso-kpi .l{color:var(--iso-muted);font-size:.8rem;font-weight:600;margin-top:.28rem} .iso-kpi .sub{color:var(--iso-muted);font-size:.72rem;font-weight:600;margin-top:.2rem;opacity:.9} /* ── 9. PANELS ───────────────────────────────────────────────────────────── */ .iso-panel{background:var(--iso-surface);border:1px solid var(--iso-line); border-radius:var(--iso-radius);box-shadow:var(--iso-shadow-sm); overflow:hidden;margin-bottom:var(--iso-sp-5)} /* Bare heading (legacy pages) */ .iso-panel>h3{margin:0;padding:var(--iso-sp-4) var(--iso-sp-5);font-size:.98rem;font-weight:700; border-bottom:1px solid var(--iso-line)} /* Structured header */ .iso-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--iso-sp-3); flex-wrap:wrap;padding:var(--iso-sp-4) var(--iso-sp-5);border-bottom:1px solid var(--iso-line)} .iso-panel-head h3{margin:0;padding:0;border:0;font-size:.98rem;font-weight:700} .iso-panel-head .sub{color:var(--iso-muted);font-size:.78rem;font-weight:600;margin-top:.15rem} .iso-panel-actions{display:flex;align-items:center;gap:var(--iso-sp-2);flex-wrap:wrap} .iso-panel-body{padding:var(--iso-sp-5)} /* Horizontal / vertical scroll container for wide tables & charts */ .iso-scroll{overflow-x:auto;overflow-y:auto} /* ── 10. FILTER / TOOLBAR BAR ────────────────────────────────────────────── */ .iso-filter,.iso-toolbar{display:flex;gap:var(--iso-sp-3);flex-wrap:wrap;align-items:end} .iso-filter{margin-bottom:var(--iso-sp-4)} .iso-filter .field,.iso-toolbar .field{margin-bottom:0} .iso-fg{display:flex;flex-direction:column;min-width:0} .iso-fg.grow{flex:1;min-width:200px} /* ── 11. PILL TABS ───────────────────────────────────────────────────────── */ .iso-tabs{display:flex;gap:var(--iso-sp-2);flex-wrap:wrap;margin-bottom:var(--iso-sp-4)} .iso-tab{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem; border-radius:var(--iso-radius-sm);font-weight:700;font-size:.84rem;color:var(--iso-muted); background:var(--iso-surface);border:1px solid var(--iso-line);cursor:pointer; transition:.14s;text-decoration:none} .iso-tab:hover{color:var(--iso-primary);border-color:var(--iso-primary)} .iso-tab.active{background:var(--iso-grad-primary);color:var(--iso-on-accent);border-color:transparent; box-shadow:var(--iso-shadow-lg)} .iso-tab .count{display:inline-flex;align-items:center;justify-content:center;min-width:1.4em; padding:0 .45em;height:1.4em;border-radius:999px;font-size:.7rem;font-weight:800; background:var(--iso-info-soft);color:var(--iso-info);font-variant-numeric:tabular-nums} .iso-tab.active .count{background:var(--iso-on-accent-soft);color:var(--iso-on-accent)} /* ── 12. DATA TABLE ──────────────────────────────────────────────────────── */ table.iso{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem} table.iso th{text-align:left;text-transform:uppercase;font-size:.68rem;letter-spacing:.055em; color:var(--iso-muted);font-weight:700;padding:.7rem .95rem;white-space:nowrap; background:var(--iso-surface-2);border-bottom:1px solid var(--iso-line-strong)} table.iso td{padding:.72rem .95rem;border-bottom:1px solid var(--iso-line);vertical-align:middle} table.iso tbody tr:last-child td{border-bottom:0} table.iso tbody tr:nth-child(even) td{background:var(--iso-zebra)} table.iso tbody tr:hover td{background:var(--iso-row-hover)} /* Numeric columns: right-align + tabular figures. Add class="num" on th & td. */ table.iso th.num,table.iso td.num{text-align:right;font-variant-numeric:tabular-nums} table.iso th.center,table.iso td.center{text-align:center} table.iso th.right,table.iso td.right{text-align:right} /* Sticky header — wrap the table in a max-height .iso-scroll to activate. */ .iso-scroll table.iso thead th{position:sticky;top:0;z-index:2} /* Secondary line under a cell's primary value */ .iso-sub{color:var(--iso-muted);font-size:.72rem;margin-top:.12rem} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:var(--iso-muted)} /* ── 13. PILLS / STATUS BADGES + CHIPS ───────────────────────────────────── */ .pill{display:inline-flex;align-items:center;gap:.3em;padding:.24em .68em;border-radius:999px; font-size:.72rem;font-weight:700;line-height:1.5;white-space:nowrap} .pill.ok{background:var(--iso-ok-soft);color:var(--iso-ok)} .pill.warn{background:var(--iso-warn-soft);color:var(--iso-warn)} .pill.bad{background:var(--iso-bad-soft);color:var(--iso-bad)} .pill.info{background:var(--iso-info-soft);color:var(--iso-info)} .pill.muted{background:var(--iso-line);color:var(--iso-muted)} .chip{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:999px; font-size:.75rem;font-weight:600;background:var(--iso-surface-2);color:var(--iso-ink); border:1px solid var(--iso-line)} .chip.on{background:var(--iso-info-soft);color:var(--iso-info);border-color:transparent} .chip .x{cursor:pointer;opacity:.6;font-weight:700} .chip .x:hover{opacity:1} /* ── 14. BUTTONS ─────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid transparent; cursor:pointer;border-radius:var(--iso-radius-sm);font-weight:700;font-size:.85rem; padding:.52rem .95rem;color:var(--iso-on-accent);line-height:1.2;text-align:center;text-decoration:none; background:var(--iso-grad-primary);box-shadow:0 6px 14px -6px rgba(109,94,252,.55); transition:filter .14s,transform .06s,box-shadow .14s,border-color .14s} .btn:hover{filter:brightness(1.06);color:var(--iso-on-accent)} .btn:active{transform:translateY(1px)} .btn.teal{background:var(--iso-grad-teal)} .btn.danger{background:var(--iso-grad-danger)} .btn.warn{background:var(--iso-grad-warn)} .btn.ghost{background:var(--iso-surface);color:var(--iso-ink);box-shadow:none; border-color:var(--iso-line)} .btn.ghost:hover{border-color:var(--iso-primary);color:var(--iso-primary);filter:none} .btn.sm{padding:.36rem .7rem;font-size:.78rem;border-radius:var(--iso-radius-xs)} .btn.block{display:flex;width:100%} .btn[disabled],.btn.disabled{opacity:.5;pointer-events:none} /* ── 15. FORM CONTROLS ───────────────────────────────────────────────────── */ .field{width:100%;padding:.55rem .75rem;border-radius:var(--iso-radius-sm); border:1px solid var(--iso-line-strong);background:var(--iso-surface);color:var(--iso-ink); font-size:.9rem;font-family:inherit;line-height:1.4;margin-bottom:var(--iso-sp-4); transition:border-color .14s,box-shadow .14s} .field::placeholder{color:var(--iso-muted);opacity:.75} .field:hover{border-color:var(--iso-primary)} .field:focus{outline:none;border-color:var(--iso-primary);box-shadow:var(--iso-focus)} textarea.field{min-height:5.5rem;resize:vertical} select.field{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:2rem; background-image:linear-gradient(45deg,transparent 50%,var(--iso-muted) 50%), linear-gradient(135deg,var(--iso-muted) 50%,transparent 50%); background-position:calc(100% - 1rem) 55%,calc(100% - .65rem) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .l{display:block;font-size:.72rem;color:var(--iso-muted);font-weight:600; letter-spacing:.01em;margin-bottom:.3rem} .form-check{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600; cursor:pointer} .form-check input[type=checkbox],.form-check input[type=radio]{width:1.05rem;height:1.05rem; accent-color:var(--iso-primary);cursor:pointer} /* ── 16. ROW-ACTION DROPDOWNS ────────────────────────────────────────────── */ .iso-actions{position:relative;display:inline-block} .iso-actions>summary{list-style:none;user-select:none;cursor:pointer} .iso-actions>summary::-webkit-details-marker{display:none} .iso-actions-menu{position:absolute;right:0;z-index:30;margin-top:.35rem;min-width:230px; background:var(--iso-surface);border:1px solid var(--iso-line);border-radius:var(--iso-radius); box-shadow:var(--iso-shadow);padding:.6rem;display:flex;flex-direction:column;gap:.5rem} .iso-actions-menu .field{margin-bottom:.35rem} .iso-actions-menu .btn{width:100%} .iso-actions-menu form{margin:0} .iso-actions-sep{border:0;border-top:1px solid var(--iso-line);margin:.15rem 0} /* ── 17. EMPTY STATE ─────────────────────────────────────────────────────── */ .iso-empty{padding:var(--iso-sp-7) var(--iso-sp-5);text-align:center;color:var(--iso-muted)} .iso-empty .ico{font-size:2.1rem;line-height:1;opacity:.65;margin-bottom:.55rem} .iso-empty .msg{font-size:.92rem;font-weight:700;color:var(--iso-ink)} .iso-empty .hint{font-size:.8rem;margin-top:.3rem} td.iso-empty{display:table-cell} /* ── 18. PAGINATION + PER-PAGE ───────────────────────────────────────────── */ .iso-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--iso-sp-4); flex-wrap:wrap;margin-top:var(--iso-sp-4)} .iso-pager .meta{color:var(--iso-muted);font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums} .iso-pager .right{display:flex;align-items:center;gap:var(--iso-sp-4);flex-wrap:wrap} .iso-pages{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap} .iso-page{min-width:2.1rem;height:2.1rem;padding:0 .5rem;display:inline-flex;align-items:center; justify-content:center;border-radius:var(--iso-radius-xs);border:1px solid var(--iso-line); background:var(--iso-surface);color:var(--iso-ink);font-weight:700;font-size:.82rem; text-decoration:none;transition:.14s;font-variant-numeric:tabular-nums} .iso-page:hover{border-color:var(--iso-primary);color:var(--iso-primary)} .iso-page.active{background:var(--iso-grad-primary);color:var(--iso-on-accent);border-color:transparent; box-shadow:var(--iso-shadow-lg)} .iso-page.gap{border:0;background:transparent;pointer-events:none;color:var(--iso-muted)} .iso-page.disabled{opacity:.4;pointer-events:none} .iso-perpage{display:inline-flex;align-items:center;gap:.4rem;color:var(--iso-muted); font-size:.8rem;font-weight:600} .iso-perpage select{padding:.4rem .6rem;border-radius:var(--iso-radius-xs); border:1px solid var(--iso-line-strong);background:var(--iso-surface);color:var(--iso-ink); font-size:.82rem;font-weight:700;cursor:pointer} /* ── 19. INLINE-SVG CHART WRAPPER ────────────────────────────────────────── */ .iso-chart{width:100%} .iso-chart svg{display:block;width:100%;height:auto} .iso-chart .grid line{stroke:var(--iso-line);stroke-width:1;vector-effect:non-scaling-stroke} .iso-chart .line{fill:none;stroke:var(--iso-primary);stroke-width:2.5;stroke-linejoin:round; stroke-linecap:round;vector-effect:non-scaling-stroke} .iso-chart .dot{fill:var(--iso-primary)} .iso-chart .cap{display:flex;align-items:center;justify-content:space-between;gap:.6rem; margin-top:.5rem;color:var(--iso-muted);font-size:.74rem;font-weight:600; font-variant-numeric:tabular-nums} .iso-chart .cap .hd{color:var(--iso-ink);font-weight:800} /* ── 20. FLASH NOTES / ALERTS ────────────────────────────────────────────── */ .iso-note{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:var(--iso-radius-sm); font-size:.86rem;font-weight:600;margin-bottom:var(--iso-sp-4); border:1px solid var(--iso-line);background:var(--iso-surface);color:var(--iso-ink)} .iso-note.ok{background:var(--iso-ok-soft);color:var(--iso-ok);border-color:transparent} .iso-note.warn{background:var(--iso-warn-soft);color:var(--iso-warn);border-color:transparent} .iso-note.bad{background:var(--iso-bad-soft);color:var(--iso-bad);border-color:transparent} .alert{background:var(--iso-bad-soft);color:var(--iso-bad);padding:.6rem .9rem; border-radius:var(--iso-radius-sm);font-size:.85rem;margin-bottom:var(--iso-sp-4)} /* ── 21. LOGIN ───────────────────────────────────────────────────────────── */ .iso-login{min-height:100vh;display:flex;align-items:center;justify-content:center; padding:var(--iso-sp-4); background:radial-gradient(900px 500px at 50% -20%,rgba(109,94,252,.12),transparent 60%),var(--iso-canvas)} .iso-login .box{width:100%;max-width:392px;background:var(--iso-surface); border:1px solid var(--iso-line);border-radius:var(--iso-radius-lg); box-shadow:var(--iso-shadow-lg);padding:var(--iso-sp-6) var(--iso-sp-5)} .iso-login .iso-brand{color:var(--iso-ink);padding:0 0 .2rem} .iso-login .iso-brand span{color:var(--iso-primary)} .iso-login h1{margin:.3rem 0 .3rem;font-size:1.5rem} .iso-login p{margin:0 0 var(--iso-sp-5);color:var(--iso-muted);font-size:.9rem} /* ── 22. UTILITIES ───────────────────────────────────────────────────────── */ .tnum{font-variant-numeric:tabular-nums} .text-muted{color:var(--iso-muted)} .text-right{text-align:right}.text-center{text-align:center} .nowrap{white-space:nowrap} .stack-sm>*+*{margin-top:var(--iso-sp-2)} .stack>*+*{margin-top:var(--iso-sp-4)} .row{display:flex;gap:var(--iso-sp-2);flex-wrap:wrap;align-items:center} .mt-2{margin-top:var(--iso-sp-2)}.mt-4{margin-top:var(--iso-sp-4)} .mb-2{margin-bottom:var(--iso-sp-2)}.mb-4{margin-bottom:var(--iso-sp-4)} /* ── 23. RESPONSIVE · SCROLLBARS · MOTION · PRINT ────────────────────────── */ /* Slim scrollbars inside the sidebar + scroll panes */ .iso-nav::-webkit-scrollbar,.iso-scroll::-webkit-scrollbar{width:9px;height:9px} .iso-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px} .iso-scroll::-webkit-scrollbar-thumb{background:var(--iso-line-strong);border-radius:99px} .iso-nav::-webkit-scrollbar-track,.iso-scroll::-webkit-scrollbar-track{background:transparent} @media (max-width:1024px){ .iso-main{padding:var(--iso-sp-5)} .iso-topbar{padding:0 var(--iso-sp-5)} } @media (max-width:768px){ .iso-burger{display:inline-flex} .iso-side{position:fixed;left:0;top:0;transform:translateX(-100%); transition:transform .22s ease;box-shadow:var(--iso-shadow-lg)} .iso-shell.nav-open .iso-side{transform:translateX(0)} .iso-shell.nav-open .iso-scrim{display:block;position:fixed;inset:0;z-index:35; background:rgba(10,12,26,.5);backdrop-filter:blur(1px)} .iso-main{padding:var(--iso-sp-4)} .iso-topbar{padding:0 var(--iso-sp-4)} .iso-profile .who{display:none} .iso-pagehead{flex-direction:column;align-items:stretch} .iso-pagehead h1{font-size:1.4rem} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } @media print{ .iso-side,.iso-topbar,.iso-scrim{display:none!important} .iso-main{padding:0} .iso-panel,.iso-card{box-shadow:none;border-color:#ddd} }