/* ============================================================================= GateControl — "Aurora" Theme (Redesign) Working name: aurora · Dark "Midnight" + Light "Papier" via [data-theme] ----------------------------------------------------------------------------- IMPLEMENTATION NOTE This stylesheet is structured to drop into production as public/css/aurora.css (theme name is a placeholder — rename consistently). It mirrors pro.css's strategy: define a fresh design-token palette, then alias the LEGACY variable names (--text-1, --bg-card, --accent, --border, --radius, --font-ui, …) onto the new palette so existing njk markup that references those variables renders in this theme with little to no change. Component selectors use the EXACT production class names (.btn/.btn-primary, .card, .modal-overlay/.modal, .nav-item, .form-group, .toggle, .tabs/.tab, .tag, .topbar-*) so existing partials lift directly. Selectors marked "NEW (aurora)" are theme-specific additions (data-viz, toasts, app-shell grid) that production must add CSS for. Companion files: · 2026-06-21-admin-redesign-mockup.html (clickable reference) · 2026-06-21-admin-redesign-implementation-guide.md ========================================================================== */ /* ---------------------------------------------------------------------------- 0 · FONTS Mockup loads these via Google Fonts in the HTML . PRODUCTION: self-host (see implementation guide §Fonts). --------------------------------------------------------------------------- */ :root{ --r:18px; --r-sm:12px; /* aurora component radii (large/medium) */ --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; --sidebar-w:250px; --topbar-h:62px; --nav-h:62px; /* ---- LEGACY ALIASES (map old default/pro var names → aurora tokens) ---- These let existing markup (var(--text-1), var(--bg-card), var(--accent)…) render correctly in aurora. CSS vars resolve lazily, so referencing the per-theme tokens from :root is fine — they pick up the active [data-theme]. */ --bg-base: var(--bg); --bg-body: var(--bg); --bg-panel: var(--surface); --bg-card: var(--surface-2); --bg-sidebar: var(--surface); --bg-topbar: var(--surface); --bg-hover: var(--surface-3); --bg-input: var(--surface); --bg-active: var(--surface-2); --bg-overlay: rgba(4,7,11,.62); --border: var(--line); --border-hi: var(--line-2); --border-light: var(--line); --border-input: var(--line-2); --border-focus: var(--teal); --text-1: var(--text); --text-primary: var(--text); --text-2: var(--muted); --text-secondary: var(--muted); --text-3: var(--faint); --text-muted: var(--faint); --text-inverse: var(--btn-text); --accent: var(--teal); --accent-hover: var(--teal-dim); --accent-lt: var(--teal-soft); --accent-light: var(--teal-soft); --accent-md: var(--teal-soft); --accent-lighter: var(--teal-soft); --accent-border: var(--teal-dim); --green-lt: var(--green-bg); --green-light: var(--green-bg); --green-border: var(--green-bd); --red-lt: var(--red-bg); --red-light: var(--red-bg); --red-border: var(--red-bd); --amber-lt: var(--amber-bg); --amber-light: var(--amber-bg); --amber-bd: var(--amber-bd); --blue-lt: var(--blue-bg); --blue-light: var(--blue-bg); --blue-border: var(--blue-bd); --purple-lt: var(--purple-bg); --font-ui: var(--font-body); --font-sans: var(--font-body); /* --font-display & --font-mono already defined above */ --radius: 12px; --radius-sm:8px; --radius-xs:6px; --radius-md: 10px; --radius-lg:14px; --radius-xl:18px; --radius-full:9999px; --shadow-md: 0 10px 24px -14px rgba(0,0,0,.6); /* --- additional pro.css var aliases (close leaks) --- */ --accent-text: var(--teal-dim); --green-text: var(--green); --red-text: var(--red); --amber-text: var(--amber); --blue-text: var(--blue); --purple-text: var(--purple); --text-link: var(--teal); --bg-code: var(--surface-3); --bg-badge: var(--surface-3); --bg-card-hover: var(--surface-3); --cyan: var(--teal); --cyan-light: var(--teal-soft); /* close remaining pro.css leaks */ --bg-input-focus: var(--surface); /* pro.css uses #fff; aurora uses surface */ --purple-light: var(--purple-bg); /* pro.css: #F5F3FF — used by .tag-purple/.badge-purple */ --amber-border: var(--amber-bd); /* pro.css: #FDE68A — used by .btn-amber */ --purple-bd: var(--purple-border); /* ponytail: fills aurora vocab gap; not yet consumed by midea.css */ } /* ---------------------------------------------------------------------------- 1 · THEME TOKENS — two modes (palette 1:1 from the portal landing mockup) --------------------------------------------------------------------------- */ [data-theme="dark"]{ --bg:#0a0e14; --bg-2:#0c1219; --surface:#111a24; --surface-2:#16212e; --surface-3:#1b2836; --chip:rgba(255,255,255,.03); --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --text:#e9eff6; --muted:#90a1b3; --faint:#5f6f7e; --teal:#34dcc6; --teal-dim:#1f9c8e; --teal-soft:rgba(52,220,198,.12); --coral:#ff9d6c; --coral-dim:#cf6f45; --coral-bg:rgba(255,157,108,.10); --coral-bd:rgba(255,157,108,.30); --amber:#f5c451; --amber-bg:rgba(245,196,81,.10); --amber-bd:rgba(245,196,81,.30); --green:#4ade80; --green-bg:rgba(74,222,128,.10); --green-bd:rgba(74,222,128,.25); --red:#ff6b6b; --red-bg:rgba(255,107,107,.10); --red-bd:rgba(255,107,107,.28); --blue:#7aa2ff; --blue-bg:rgba(122,162,255,.10); --blue-bd:rgba(122,162,255,.30); --purple:#b89cff; --purple-bg:rgba(184,156,255,.10); --purple-border:rgba(184,156,255,.28); --btn-text:#04201d; --glow1:rgba(52,220,198,.10); --glow2:rgba(255,157,108,.08); --grain:.035; --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -22px rgba(0,0,0,.9); --modal-shadow:0 40px 120px -30px rgba(0,0,0,.85); } [data-theme="light"]{ --bg:#f3efe6; --bg-2:#ece6d9; --surface:#fffdf8; --surface-2:#f8f3ea; --surface-3:#f0e9db; --chip:rgba(60,45,25,.04); --line:rgba(60,45,25,.10); --line-2:rgba(60,45,25,.17); --text:#2c2720; --muted:#6e6456; --faint:#766b59; --teal:#0e9b8a; --teal-dim:#0b7d70; --teal-soft:rgba(14,155,138,.12); --coral:#d9602f; --coral-dim:#b14d24; --coral-bg:rgba(217,96,47,.10); --coral-bd:rgba(217,96,47,.30); --amber:#b5811f; --amber-bg:rgba(181,129,31,.10); --amber-bd:rgba(181,129,31,.30); --green:#15924f; --green-bg:rgba(21,146,79,.10); --green-bd:rgba(21,146,79,.28); --red:#d23b3b; --red-bg:rgba(210,59,59,.08); --red-bd:rgba(210,59,59,.28); --blue:#3858c4; --blue-bg:rgba(56,88,196,.08); --blue-bd:rgba(56,88,196,.28); --purple:#7a4fd0; --purple-bg:rgba(122,79,208,.08); --purple-border:rgba(122,79,208,.25); --btn-text:#ffffff; --glow1:rgba(14,155,138,.10); --glow2:rgba(217,96,47,.09); --grain:.02; --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 34px -24px rgba(80,60,30,.5); --modal-shadow:0 40px 110px -28px rgba(80,60,30,.5); } /* ---------------------------------------------------------------------------- 2 · BASE --------------------------------------------------------------------------- */ *{box-sizing:border-box} html,body{margin:0; height:100%} body{ font-family:var(--font-body); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh; transition:background-color .35s ease, color .35s ease; background-image: radial-gradient(1100px 600px at 88% -10%, var(--glow1), transparent 60%), radial-gradient(900px 520px at -5% 4%, var(--glow2), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg-2)); background-attachment:fixed; } body::before{ /* film grain — NEW (aurora) */ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection{background:var(--teal); color:var(--btn-text)} a{color:inherit} /* ---------------------------------------------------------------------------- 3 · APP SHELL — NEW (aurora) grid; topbar/sidebar use production class names --------------------------------------------------------------------------- */ .app{position:relative; z-index:1; min-height:100vh; display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--topbar-h) 1fr; grid-template-areas:"brand topbar" "side main";} /* brand corner */ .app-brand{grid-area:brand; display:flex; align-items:center; gap:11px; padding:0 18px; font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:17px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);} .app-brand .mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center; flex:0 0 auto; background:linear-gradient(145deg,var(--teal),var(--teal-dim)); color:var(--btn-text); box-shadow:0 6px 18px -8px var(--teal-dim)} .app-brand .mark svg{width:17px;height:17px} .app-brand .nm small{color:var(--faint); font-weight:500} /* topbar (production: .topbar, .topbar-* ) */ .topbar{grid-area:topbar; display:flex; align-items:center; gap:14px; padding:0 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--surface),transparent); backdrop-filter:blur(6px)} .sidebar-toggle{display:none; width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--chip);color:var(--muted); place-items:center;cursor:pointer} .sidebar-toggle svg{width:22px;height:22px} .page-crumb{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em} .page-crumb small{color:var(--faint); font-weight:500; font-family:var(--font-body); margin-left:8px; font-size:12.5px} .topbar-spacer{flex:1} .topbar-status{display:flex; align-items:center; gap:9px; padding:6px 12px; border:1px solid var(--line); background:var(--chip); border-radius:999px; font-size:12.5px; color:var(--muted)} .pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(74,222,128,.55);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} .icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--chip);color:var(--muted); display:grid;place-items:center;cursor:pointer;transition:.18s; flex:0 0 auto} .icon-btn:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-1px)} .icon-btn svg{width:18px;height:18px} [data-theme="dark"] .ic-sun{display:block} [data-theme="dark"] .ic-moon{display:none} [data-theme="light"] .ic-sun{display:none} [data-theme="light"] .ic-moon{display:block} .topbar-lang{display:flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:9px; padding:3px} .lang-btn{border:0;background:transparent;color:var(--muted);font-family:var(--font-mono);font-weight:700;font-size:11px; padding:4px 8px;border-radius:6px;cursor:pointer;transition:.15s; text-transform:uppercase} .lang-btn.active{background:var(--surface); color:var(--text)} .topbar-profile{position:relative} .topbar-avatar{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);cursor:pointer;display:grid;place-items:center; font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--btn-text); background:linear-gradient(145deg,var(--coral),var(--coral-dim));transition:.18s} .topbar-avatar:hover{transform:translateY(-1px)} .topbar-dropdown{position:absolute; right:0; top:46px; min-width:190px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); box-shadow:var(--modal-shadow); padding:7px; display:none; z-index:60} .topbar-dropdown.open{display:block; animation:pop .16s ease} @keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .topbar-dropdown-header{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px} .topbar-dropdown-header b{display:block; font-size:13.5px} .topbar-dropdown-header span{font-size:12px;color:var(--faint)} .topbar-dropdown-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; text-decoration:none; color:var(--text); cursor:pointer; width:100%; border:0; background:transparent; font-family:var(--font-body); text-align:left} .topbar-dropdown-item:hover{background:var(--surface-3)} .topbar-dropdown-item svg{width:16px;height:16px;color:var(--muted)} .topbar-dropdown-divider{height:1px; background:var(--line); margin:6px 4px} .topbar-dropdown-logout{color:var(--red)} .topbar-dropdown-logout svg{color:var(--red)} /* sidebar (production: .sidebar, .nav-item, .nav-section-label, .nav-badge) */ .sidebar{grid-area:side; border-right:1px solid var(--line); padding:16px 12px 24px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; background:linear-gradient(180deg,var(--surface),transparent 40%); position:static} .nav-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:700; padding:14px 12px 6px} .nav-section-label:first-child{padding-top:2px} .nav-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; cursor:pointer; color:var(--muted); font-size:13.5px; font-weight:500; border:1px solid transparent; transition:.15s; position:relative; text-decoration:none} .nav-item:hover{background:var(--chip); color:var(--text)} .nav-item svg{width:18px;height:18px; flex:0 0 auto} .nav-item.active{background:var(--surface-2); color:var(--text); border-color:var(--line); font-weight:600} .nav-item.active::before{content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--teal),var(--teal-dim))} .nav-badge{margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--surface-3); color:var(--muted)} .nav-badge.green{background:var(--green-bg); color:var(--green); border:1px solid var(--green-bd)} .nav-badge.coral{color:var(--coral); background:rgba(255,157,108,.10); border:1px solid var(--coral-dim)} /* main */ .main{grid-area:main; overflow-y:auto; padding:26px 30px 60px} .page{display:none} .page.active{display:block; animation:rise .5s cubic-bezier(.2,.7,.2,1)} @keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}} /* ---------------------------------------------------------------------------- 4 · PAGE HEADER (production: .page-header/.page-eyebrow/.page-title/.page-sub) --------------------------------------------------------------------------- */ .page-header{display:flex; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap} .page-eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); font-weight:700; margin-bottom:6px} .page-title{font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; font-size:clamp(22px,3vw,30px); margin:0; line-height:1.05} .page-sub{margin:7px 0 0; color:var(--muted); font-size:14px; max-width:60ch} .page-header .page-actions{margin-left:auto; display:flex; gap:10px; align-items:center} /* ---------------------------------------------------------------------------- 5 · BUTTONS (production: .btn + .btn-primary/.btn-ghost/.btn-secondary/.btn-danger/.btn-sm) --------------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;cursor:pointer; font-family:var(--font-body);font-weight:600;font-size:13.5px;border:1px solid var(--line); background:var(--chip); color:var(--text); transition:transform .15s ease, filter .15s, background .15s; text-decoration:none} .btn:hover{transform:translateY(-1px)} .btn svg{width:16px;height:16px} .btn-primary{color:var(--btn-text); border:0; background:linear-gradient(145deg,var(--teal),var(--teal-dim)); box-shadow:0 10px 24px -12px var(--teal-dim)} .btn-primary:hover{filter:brightness(1.06)} .btn-secondary{background:var(--surface-3)} .btn-ghost{background:transparent} .btn-danger{color:var(--red); border-color:var(--red-bd); background:var(--red-bg)} .btn-danger.solid{color:#fff; background:linear-gradient(145deg,var(--red),#b8302f); border:0} .btn-sm{padding:6px 11px; font-size:12.5px; border-radius:9px} .btn-block{width:100%; justify-content:center} /* ---------------------------------------------------------------------------- 6 · CARDS (production: .card/.card-head/.card-title/.card-body) + grid --------------------------------------------------------------------------- */ .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px} .card{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow); position:relative; overflow:hidden} .card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)} .card-title{margin:0 0 2px; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; font-size:15px; display:flex; align-items:center; gap:9px} .card-title .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--surface-3);color:var(--teal); flex:0 0 auto} .card-title .ic svg{width:15px;height:15px} .card-title .card-sub{color:var(--faint); font-size:12px; margin-left:auto; font-weight:500; font-family:var(--font-body)} /* span helpers */ .span3{grid-column:span 3} .span4{grid-column:span 4} .span5{grid-column:span 5} .span6{grid-column:span 6} .span7{grid-column:span 7} .span8{grid-column:span 8} .span9{grid-column:span 9} .span12{grid-column:span 12} /* ---------------------------------------------------------------------------- 7 · TABLES (production styles directly; .data-table = aurora wrapper) --------------------------------------------------------------------------- */ .data-table{width:100%; border-collapse:collapse; font-size:13.5px} .data-table th{text-align:left; font-weight:600; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:12px 14px; vertical-align:middle; border-bottom:1px solid var(--line)} .data-table td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle} .data-table tr:last-child td{border-bottom:0} .data-table tbody tr:hover td{background:var(--chip)} .data-table .mono{font-family:var(--font-mono); font-size:12.5px; color:var(--muted)} .data-table .cell-name{font-weight:600} /* RDP modal segmented selectors (protocol + SSH auth-mode) — styled like the .toggle-group segmented control; JS toggles .active on the chosen option. */ .rdp-proto-seg, .rdp-auth-seg{display:inline-flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px; flex-wrap:wrap} .rdp-proto-opt, .rdp-auth-opt{border:0; background:transparent; color:var(--muted); font-family:var(--font-body); font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:7px; cursor:pointer; transition:.15s} .rdp-proto-opt:hover, .rdp-auth-opt:hover{color:var(--text)} .rdp-proto-opt.active, .rdp-auth-opt.active{background:var(--surface); color:var(--text); box-shadow:0 2px 8px -4px rgba(0,0,0,.35)} /* Batch-select checkbox column (shown only in batch mode) */ .data-table .batch-checkbox{width:16px; height:16px; accent-color:var(--teal); cursor:pointer; vertical-align:middle} .data-table.batch-mode tbody tr[data-route-id]{cursor:pointer} .row-actions{display:flex; gap:6px; justify-content:flex-end} .icon-action{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--chip);color:var(--muted); display:grid;place-items:center;cursor:pointer;transition:.15s} .icon-action:hover{color:var(--text);border-color:var(--line-2)} .icon-action.danger:hover{color:var(--red);border-color:var(--red-bd)} .icon-action svg{width:15px;height:15px} /* ---------------------------------------------------------------------------- 8 · FORMS (production: .form-group/.form-label/.form-input/.form-select/.form-hint) --------------------------------------------------------------------------- */ .form-group{margin-bottom:15px} .form-group:last-child{margin-bottom:0} .form-label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px} .form-label .req{color:var(--coral)} .form-hint{display:block; font-size:11.5px; color:var(--faint); margin-top:6px} .form-input,.form-select,.form-textarea{width:100%; padding:10px 12px; border:1px solid var(--line-2); background:var(--surface); border-radius:10px; color:var(--text); font-family:var(--font-body); font-size:13.5px; outline:0; transition:.15s} .form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px var(--glow1)} .form-input.mono,.form-textarea.mono{font-family:var(--font-mono); font-size:12.5px} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px} .form-check{display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:13px} .form-check:hover{border-color:var(--line-2)} .copy-field{display:flex; gap:8px; align-items:center} .copy-field .form-input{flex:1} /* native input focus — pro.css hardcodes rgba(37,99,235,.1) blue; override with aurora teal */ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=time]:focus, input[type=date]:focus, select:focus { border-color:var(--teal); box-shadow:0 0 0 3px var(--glow1) } /* .btn-warning — amber warning variant (used e.g. in peer-edit modal) */ .btn-warning{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bd)} .btn-warning:hover{background:var(--amber); color:#fff; border-color:var(--amber)} /* .alert-warning — amber inline alert (used in rdp.njk feature-locked notice) */ .alert-warning{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bd); border-left:3px solid var(--amber)} /* ---------------------------------------------------------------------------- 9 · MODALS (production: .modal-overlay/.modal/.modal-head/.modal-title/ .modal-close/.modal-body/.modal-foot, .modal-wide/.modal-sm) Production toggles inline display:none → display:flex via openModal(). --------------------------------------------------------------------------- */ .modal-overlay{position:fixed; inset:0; background:var(--bg-overlay); backdrop-filter:blur(4px); z-index:100; display:none; align-items:flex-start; justify-content:center; padding:48px 18px; overflow-y:auto} [data-theme="light"] .modal-overlay{background:rgba(60,45,25,.32)} .modal-overlay.open{display:flex; animation:fade .18s ease} /* mockup uses .open; prod uses inline display:flex */ @keyframes fade{from{opacity:0}to{opacity:1}} .modal{width:100%; max-width:520px; background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--modal-shadow); overflow:hidden; animation:lift .22s cubic-bezier(.2,.7,.2,1)} @keyframes lift{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}} .modal.modal-sm{max-width:400px} .modal.modal-wide{max-width:720px} .modal-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line)} .modal-title{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em} .modal-title small{display:block; color:var(--faint); font-size:12px; font-weight:500; font-family:var(--font-body)} .modal-head .mi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface-3);color:var(--teal); flex:0 0 auto} .modal-head .mi svg{width:17px;height:17px} .modal-head .mi.danger{color:var(--red); background:var(--red-bg)} .modal-close{margin-left:auto; width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--chip);color:var(--muted); display:grid;place-items:center;cursor:pointer;transition:.15s; flex:0 0 auto; font-size:18px; line-height:1} .modal-close:hover{color:var(--text);border-color:var(--line-2)} .modal-close svg{width:16px;height:16px} .modal-body{padding:20px; max-height:62vh; overflow-y:auto} .modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:16px 20px; border-top:1px solid var(--line); background:var(--chip)} /* ---------------------------------------------------------------------------- 10 · TABS / TOGGLES / SEGMENTED (production: .tabs/.tab/.active, .toggle/.on, route-edit: .edit-route-panel[data-panel] + .tab[data-edit-tab]) --------------------------------------------------------------------------- */ .tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap} .tab{padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; border-top:0; border-left:0; border-right:0; font-family:var(--font-body)} .tab:hover{color:var(--text)} .tab.active{color:var(--text); border-bottom-color:var(--teal)} /* compact tab bar inside modals (route-edit) */ .tabs.edit-route-tabs{border-bottom:0; gap:3px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px} .tabs.edit-route-tabs .tab{padding:7px 12px; font-size:12.5px; border-radius:7px; border:0; margin:0} .tabs.edit-route-tabs .tab.active{background:var(--surface); color:var(--text); border:0} /* The shared route-edit JS toggles panels via inline style.display (showing the active one with display:'' → falls back to the stylesheet). So the base must NOT be display:none, or no panel ever shows. Inactive panels carry inline display:none from the template; the fade runs each time one is revealed. */ .edit-route-panel{animation:fade .2s ease} .toggle{width:42px;height:24px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);position:relative;cursor:pointer;transition:.2s; flex:0 0 auto} .toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.2s} .toggle.on{background:linear-gradient(145deg,var(--teal),var(--teal-dim));border-color:transparent} /* transform:none resets pro.css's .toggle.on::after translateX(18px) — without it the knob is shifted left:20px AND +18px, landing outside the switch. */ .toggle.on::after{left:20px;transform:none;background:#fff} /* segmented button group (production: .toggle-group/.toggle-btn/.on) */ .toggle-group{display:inline-flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px} .toggle-btn{border:0; background:transparent; color:var(--muted); font-family:var(--font-body); font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:7px; cursor:pointer; transition:.15s} .toggle-btn.on,.toggle-btn.active{background:var(--surface);color:var(--text); box-shadow:0 2px 8px -4px rgba(0,0,0,.35)} /* ---------------------------------------------------------------------------- 11 · TAGS / BADGES / STATUS DOTS (production: .tag/.tag-*, .status-dot/.online…) --------------------------------------------------------------------------- */ .tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line); font-family:var(--font-body); white-space:nowrap} .tag-green{color:var(--green); background:var(--green-bg); border-color:var(--green-bd)} .tag-grey{color:var(--faint); background:var(--chip)} .tag-amber{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-bd)} .tag-red{color:var(--red); background:var(--red-bg); border-color:var(--red-bd)} .tag-blue{color:var(--blue); background:var(--blue-bg); border-color:rgba(122,162,255,.3)} .tag-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} /* ---------------------------------------------------------------------------- 12 · SEARCH / TOOLBAR — NEW (aurora) --------------------------------------------------------------------------- */ .toolbar{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap} .search-box{flex:1; min-width:200px; display:flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--line); background:var(--surface); border-radius:11px; color:var(--muted)} .search-box svg{width:16px;height:16px; flex:0 0 auto} .search-box input{border:0; background:transparent; outline:0; color:var(--text); font-family:var(--font-body); font-size:13.5px; width:100%} /* ---------------------------------------------------------------------------- 13 · DASHBOARD / DATA-VIZ — NEW (aurora): kpi, donut, chart, toplist, resbar --------------------------------------------------------------------------- */ .kpi{display:flex; flex-direction:column; gap:10px} .kpi .top{display:flex; align-items:center; gap:10px} .kpi .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center; flex:0 0 auto} .kpi .ic svg{width:18px;height:18px} .kpi .lab{font-size:12px; color:var(--muted)} .kpi .val{font-family:var(--font-mono); font-weight:700; font-size:28px; line-height:1; letter-spacing:-.02em} .kpi .delta{font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:4px} .kpi .delta.up{color:var(--green)} .kpi .delta.down{color:var(--coral)} /* Dashboard KPI row: all (5–6) cards in one row down to ~1200px, then they progressively wrap/stack as the viewport narrows. auto-fit fills the row for either 5 or 6 cards (the Availability KPI is conditionally hidden) with no empty trailing slot. ~140px min lets six fit in the content area at 1200px. */ .aurora-kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:18px} .aurora-kpi-grid .card.kpi{padding:15px; gap:9px} .aurora-kpi-grid .kpi .ic{width:30px;height:30px;border-radius:9px} .aurora-kpi-grid .kpi .ic svg{width:16px;height:16px} .aurora-kpi-grid .kpi .lab{font-size:11px} .aurora-kpi-grid .kpi .val{font-size:23px} .kv{display:flex; flex-direction:column; gap:12px; margin-top:14px} .kv .row{display:flex; align-items:center; justify-content:space-between; gap:14px} .kv .k{color:var(--muted); font-size:13px} .kv .v{font-family:var(--font-mono); font-size:13px} .unit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px} .unit{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; transition:.16s; cursor:pointer; position:relative} .unit:hover{transform:translateY(-2px); border-color:var(--line-2)} .unit .uh{display:flex; align-items:center; gap:11px; margin-bottom:13px} .unit .uav{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff; flex:0 0 auto} .unit .uav svg{width:19px;height:19px} .unit .un{font-weight:600; font-size:14px} .unit .ud{font-size:11.5px; color:var(--faint); font-family:var(--font-mono)} .unit .urow{display:flex; justify-content:space-between; font-size:12.5px; padding:5px 0; color:var(--muted)} .unit .urow b{font-family:var(--font-mono); color:var(--text); font-weight:600} .resbar{height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin-top:4px} .resbar i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--teal-dim),var(--teal))} .resbar i.hot{background:linear-gradient(90deg,var(--coral-dim),var(--coral))} .pi-wrap{display:flex; gap:22px; margin-top:16px; align-items:center; flex-wrap:wrap} .donut-host{position:relative; width:120px;height:120px;flex:0 0 auto} .donut{width:120px;height:120px;display:block} .donut .track{stroke:var(--surface-3)} .donut .val{stroke:var(--teal); transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)} .donut-center{position:absolute; inset:0; display:grid; place-items:center; text-align:center} .donut-center .big{font-family:var(--font-mono); font-weight:700; font-size:23px; line-height:1} .donut-center .cap{font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-top:3px} .pi-stats{flex:1; min-width:160px; display:flex; flex-direction:column; gap:11px} .pi-stats .s{display:flex; align-items:baseline; gap:10px} .pi-stats .s .n{font-family:var(--font-mono); font-weight:700; font-size:19px} .pi-stats .s .n.blk{color:var(--coral)} .pi-stats .s .t{color:var(--muted); font-size:13px} /* resource donut gauges — NEW (aurora): CPU + RAM radial donuts on dashboard */ .res-gauge-wrap{display:flex; gap:18px; align-items:center; margin-top:8px; flex-wrap:wrap} .res-gauge-info{display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0} .res-gauge-info .ri{font-family:var(--font-mono); font-size:11px; color:var(--muted); word-break:break-word} .toplist{margin-top:16px; border-top:1px solid var(--line); padding-top:13px} .toplist .h{font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:9px} .toplist ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px} .toplist li{display:flex; align-items:center; gap:10px; font-size:13px} .toplist li .d{font-family:var(--font-mono); color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .toplist li .bar{height:6px; border-radius:3px; background:linear-gradient(90deg,var(--coral-dim),var(--coral))} .toplist li .cnt{font-family:var(--font-mono); font-size:12px; color:var(--faint); width:40px; text-align:right} .chart{margin-top:18px; display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:6px} .chart .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; height:100%} .chart .col .bar{width:100%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--teal),var(--teal-dim)); transition:height .5s cubic-bezier(.2,.7,.2,1)} .chart .col .bar.up{background:linear-gradient(180deg,var(--coral),var(--coral-dim))} .chart .col .lab{font-size:10.5px; color:var(--faint); text-align:center; font-family:var(--font-mono)} .chart-legend{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;color:var(--faint)} .chart-legend i{width:9px;height:9px;border-radius:3px;display:inline-block} .chart-foot{display:flex; gap:20px; margin-top:14px; border-top:1px solid var(--line); padding-top:13px; flex-wrap:wrap} .chart-foot .t{font-size:12px; color:var(--muted)} .chart-foot .t b{font-family:var(--font-mono); color:var(--text); font-weight:700} /* log rows — NEW (aurora) */ .log-row{display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:10px; font-size:13px; border:1px solid transparent} .log-row:hover{background:var(--chip); border-color:var(--line)} .log-row .sev{width:8px;height:8px;border-radius:50%; flex:0 0 auto} .log-row .sev.ok{background:var(--green)} .log-row .sev.warn{background:var(--amber)} .log-row .sev.err{background:var(--red)} .log-row .sev.info{background:var(--blue)} .log-row .ts{font-family:var(--font-mono); font-size:11.5px; color:var(--faint); width:148px; flex:0 0 auto} .log-row .msg{flex:1} .log-row .msg b{font-weight:600} .log-row .src{font-family:var(--font-mono); font-size:11px; color:var(--muted); padding:2px 8px; border:1px solid var(--line); border-radius:999px} /* severity/status filter: .tab inside .toggle-group for JS compat — override tab underline */ .toggle-group .tab{border-bottom:0;margin-bottom:0;padding:7px 12px;border-radius:7px;font-size:12.5px} .toggle-group .tab.active{background:var(--surface);color:var(--text);border-bottom-color:transparent;box-shadow:0 2px 8px -4px rgba(0,0,0,.35)} /* settings sections — NEW (aurora) */ .set-sec{padding:18px 0; border-bottom:1px solid var(--line)} .set-sec:last-child{border-bottom:0} .set-sec .sh{display:flex; align-items:center; gap:10px; margin-bottom:4px} .set-sec .sh b{font-family:var(--font-display); font-weight:700; font-size:14.5px} .set-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0} .set-row .l{font-size:13.5px} .set-row .l small{display:block; color:var(--faint); font-size:12px; margin-top:2px} /* qr placeholder — NEW (aurora) */ .qr-box{width:200px;height:200px;border-radius:var(--r-sm);margin:6px auto;background: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%) 0 0/22px 22px, var(--surface); border:1px solid var(--line-2); opacity:.92} /* token list — NEW (aurora) */ .tok-item{display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:9px} .tok-item .ti{flex:1} .tok-item .ti b{font-size:13px} .tok-item .ti .mono{font-family:var(--font-mono); font-size:11.5px; color:var(--faint)} .feature-lock{display:inline-flex; gap:7px; align-items:center; font-size:12px; color:var(--amber); background:var(--amber-bg); border:1px solid var(--amber-bd); padding:6px 11px; border-radius:999px} .empty-state{padding:30px; text-align:center; color:var(--faint); font-size:13px; border:1px dashed var(--line-2); border-radius:var(--r-sm)} /* ---------------------------------------------------------------------------- 14 · TOASTS — NEW (aurora). Production has .flash/.flash-success/.flash-error; a toast queue would be a new addition (see implementation guide §JS). --------------------------------------------------------------------------- */ .toasts{position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end} .toast{display:flex; align-items:center; gap:11px; padding:12px 15px; min-width:240px; max-width:340px; background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--modal-shadow); font-size:13px; animation:slidein .25s cubic-bezier(.2,.7,.2,1)} @keyframes slidein{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}} .toast.out{animation:slideout .25s ease forwards} @keyframes slideout{to{opacity:0; transform:translateX(20px)}} .toast .tk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; flex:0 0 auto; color:var(--green); background:var(--green-bg)} .toast.err .tk{color:var(--red); background:var(--red-bg)} .toast .tk svg{width:15px;height:15px} .toast b{display:block; font-weight:600} .toast span{color:var(--muted); font-size:12px} /* ---------------------------------------------------------------------------- 15 · FOOTER (mockup-only marker) + RESPONSIVE + REDUCED MOTION --------------------------------------------------------------------------- */ .mock-foot{margin-top:30px; display:flex; align-items:center; gap:14px; color:var(--faint); font-size:12px; flex-wrap:wrap} .mock-foot .mock-badge{font-family:var(--font-mono); font-size:11px; color:#1b1a18; background:var(--amber); padding:3px 8px; border-radius:6px; font-weight:700; letter-spacing:.04em} .sidebar-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:none} @media (max-width:980px){ .app{grid-template-columns:1fr; grid-template-areas:"topbar" "main"} .app-brand{display:none} .sidebar-toggle{display:grid} .sidebar{position:fixed; left:0; top:0; bottom:0; width:260px; z-index:50; transform:translateX(-105%); transition:.25s; background:var(--surface)} .sidebar.open{transform:none} .sidebar-overlay.visible{display:block} .grid > [class*="span"]{grid-column:span 12 !important} .main{padding:20px 16px 50px} .topbar-lang{display:none} } @media (prefers-reduced-motion: reduce){ *,*::before{transition:none !important; animation:none !important} .page.active{opacity:1; transform:none} } /* ---------------------------------------------------------------------------- A-global fixes — Theme-wide color leak overrides (Task 3) aurora.css loads after pro.css; every rule here wins by cascade position. --------------------------------------------------------------------------- */ /* btn-primary:hover — add teal glow (pro.css only has filter:brightness) */ .btn-primary:hover{box-shadow:0 3px 12px -6px var(--teal-dim)} /* btn-danger — teal shadow leaks through pro.css; replace with red shadow */ .btn-danger{box-shadow:0 1px 3px var(--red-bd)} .btn-danger:hover{background:var(--red);border-color:var(--red)} /* FAB — replace pro.css green/blue rgba literals with teal token */ .fab{box-shadow:0 4px 16px var(--teal-dim)} .fab:hover{box-shadow:0 6px 20px var(--teal-dim)} .fab-option-icon{box-shadow:0 2px 8px var(--teal-dim)} /* Gateway-pool mode badges — replace hardcoded indigo/green with Aurora tokens */ .pool-mode-failover{background:var(--blue-bg);color:var(--blue)} .pool-mode-load_balancing{background:var(--green-bg);color:var(--green)} /* gw-toast-pulse — replace blue rgba with teal glow */ @keyframes gw-toast-pulse{ 0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 0 var(--teal-soft)} 50% {box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 5px transparent} } /* ---------------------------------------------------------------------------- B · GATEWAY-specific fixes (Task 4 — theme-branched-JS pilot) Aurora fleet cards use .gw.unit; detail sub-cards still use .gw wrapper. --------------------------------------------------------------------------- */ /* Strang-A: legacy .gw .kv vertical-stack bleeds into Aurora detail sub-cards. Force horizontal (label left / value right) to match .kv .row pattern. */ .gw-fleet .gw .kv{flex-direction:row;gap:0;margin-top:0} /* .gw-relnotes — bare in detailHead() gets Aurora link styling */ .gw-relnotes{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;opacity:.8} .gw-relnotes:hover{opacity:1;color:var(--text)} /* Issue 11: Gateway detail — exactly 3 columns (1/3 each), max 3 side by side; collapse on narrow */ .gw-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} @media(max-width:1100px){.gw-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.gw-detail-grid{grid-template-columns:1fr}} .gw-detail-grid .gw.full{grid-column:1/-1} /* Fix 3: "Discovered devices" + "Scan targets" at 1/2 width each in their own row */ .gw-half-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;grid-column:1/-1} @media(max-width:640px){.gw-half-row{grid-template-columns:1fr}} /* ---------------------------------------------------------------------------- C · PEERS page — Aurora mockup fidelity (Task P2-3) --------------------------------------------------------------------------- */ /* Empty-state for the gateway unit-grid */ .aurora-gw-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px} /* tag-dot helper used in Aurora status tags on gateway/peer rows. Issue 9: text LEFT of dot — suppress ::before, put dot via ::after */ /* pro.css's standalone .tag-dot is a 5px dot; when combined as `tag tag-dot` on one element (card status badges) it would force width/height:5px and collapse the label. Reset so the text shows; aurora renders the dot via ::after. */ .tag.tag-dot{width:auto;height:auto} .tag.tag-dot::before{content:none} .tag.tag-dot::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:5px} /* ---------------------------------------------------------------------------- D · Wizard modal shells (Task P2-4b) — used by the RDP wizard (rdp.njk). --------------------------------------------------------------------------- */ /* Wizard modal size/scroll modifiers */ .modal.modal-xl{max-width:880px} .modal.modal-wizard{overflow-y:auto; max-height:88vh} /* Nested .modal-body must not create a second scroll container inside .modal-wizard */ .modal.modal-wizard .modal-body{max-height:none; overflow-y:visible} /* Wizard head: two-row layout */ .modal-head.wiz-head{flex-direction:column; align-items:stretch; padding-bottom:14px} /* Wizard foot: prev/back on left, next/save on right */ .modal-foot.wiz-foot{justify-content:space-between; align-items:center; background:var(--surface)} /* ── Users page (Task P2-5) ─────────────────────────────────────────────────── */ /* Unassigned-tokens banner: replaces the inline-style block on #unassigned-banner */ .banner-amber{ padding:12px 16px; margin-bottom:16px; background:var(--amber-lt); border:1px solid var(--amber-bd); border-radius:var(--radius-sm); font-size:13px; color:var(--text-1); } /* Aurora mobile user card */ .aurora-user-card{ padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); } /* Token wizard step animation (moved from inline