/* ============================================================ Skybound — Design System (Operations Console) Source of truth: synced from Claude Design project "Skybound Design System" (styles.css). Matte slate, blueprint cues, IBM Plex Sans/Mono, amber/green/red status. Theme: set data-theme="dark" (default) or "light" on . NOTE: keep the TOKENS + COMPONENTS section in sync with the Claude Design styles.css; the SHELL + THEME TOGGLE section below is the live-app shared chrome (added for the portal). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* ---------- TOKENS ---------- */ :root, [data-theme="dark"]{ --bg:#0B0F17; --panel:#111824; --panel-2:#151D2B; --panel-3:#1B2535; --glass-bg:rgba(16,22,33,.72); /* translucent panel for sticky/fixed chrome */ --line:rgba(255,255,255,.075); --line-strong:rgba(255,255,255,.16); --grid:rgba(120,160,220,.05); --ink:#E9EEF5; --ink-2:#B6C2D2; --muted:#7E8B9C; --accent:#3B82F6; --accent-2:#0EA5E9; --accent-ink:#0A1220; --ok:#34C281; --ok-ink:#06160E; --warn:#E2A53C; --bad:#E76A5E; --shadow:none; --font-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; --fs-display:21px; --fs-h1:17px; --fs-h2:15px; --fs-body:13px; --fs-sm:12px; --fs-label:10px; --r-sm:6px; --r-md:8px; --r-lg:11px; } [data-theme="light"]{ --bg:#E8ECF1; --panel:#FFFFFF; --panel-2:#F4F7FA; --panel-3:#EDF1F6; --glass-bg:rgba(255,255,255,.7); --line:#E1E6EC; --line-strong:#C2CBD6; --grid:rgba(20,50,90,.05); --ink:#0E1622; --ink-2:#33425A; --muted:#5C6878; --accent:#2563EB; --accent-2:#0284C7; --accent-ink:#FFFFFF; --ok:#178A55; --ok-ink:#FFFFFF; --warn:#A9711A; --bad:#C8483C; --shadow:0 1px 2px rgba(20,40,70,.05),0 16px 34px -22px rgba(20,40,70,.22); } /* ---------- BASE ---------- */ *{box-sizing:border-box} .mono{font-family:var(--font-mono)} .tnum{font-variant-numeric:tabular-nums} .blueprint{ background-image: repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px); } /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:600 13px var(--font-sans);cursor:pointer;white-space:nowrap;text-decoration:none} .btn:hover{background:var(--panel-3)} .btn .ico{width:15px;height:15px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .btn-primary{background:var(--ok);border-color:transparent;color:var(--ok-ink)} .btn-primary:hover{filter:brightness(1.06);background:var(--ok)} .btn-danger{background:transparent;border-color:transparent;color:var(--bad)} .btn-danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)} .btn-sm{padding:6px 10px;font-size:11.5px} .btn:disabled{opacity:.45;cursor:not-allowed} /* ---------- BADGES ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:4px;font:600 10px var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line)} .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor} .badge-info{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);border-color:color-mix(in srgb,var(--accent) 26%,transparent)} .badge-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:color-mix(in srgb,var(--ok) 26%,transparent)} .badge-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:color-mix(in srgb,var(--warn) 28%,transparent)} .badge-bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent);border-color:color-mix(in srgb,var(--bad) 26%,transparent)} /* ---------- PANELS / CARDS ---------- */ .panel{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)} .panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--panel-2);font:600 10.5px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)} .panel-h .r{color:var(--muted)} .panel-b{padding:14px 15px} .panel.interactive{cursor:pointer} .panel.interactive:hover{border-color:var(--line-strong)} /* ---------- FORMS ---------- */ .input{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;color:var(--ink);font-family:var(--font-sans);font-size:12.5px;width:100%} .input:focus{outline:none;border-color:var(--accent)} .input::placeholder{color:var(--muted)} .input.mono{font-family:var(--font-mono)} .input.is-error{border-color:var(--bad)} .field-label{display:block;font:600 9.5px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .field-error{font:500 11px var(--font-mono);color:var(--bad);margin-top:6px} .toggle{width:34px;height:19px;border-radius:19px;background:var(--ok);position:relative;flex:none;cursor:pointer;border:0} .toggle::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff} .toggle.off{background:var(--panel-3);border:1px solid var(--line)} .toggle.off::after{right:auto;left:2px;background:var(--muted)} .seg{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2)} .seg button{padding:6px 13px;border:0;border-radius:5px;background:transparent;color:var(--muted);font:600 12px var(--font-sans);cursor:pointer} .seg button.on{background:var(--panel-3);color:var(--ink)} [data-theme="light"] .seg button.on{background:var(--panel);box-shadow:var(--shadow)} .seg button.on.ok{color:var(--ok)} /* ---------- STATUS BARS & CHIPS ---------- */ .bar{height:5px;border-radius:5px;background:var(--panel-3);border:1px solid var(--line);overflow:hidden} .bar i{display:block;height:100%} .bar i.ok{background:var(--ok)} .bar i.warn{background:var(--warn)} .bar i.bad{background:var(--bad)} .bar i.accent{background:var(--accent-2)} .chip{font:600 9.5px var(--font-mono);letter-spacing:.03em;padding:3px 7px;border-radius:4px;border:1px solid var(--line);color:var(--ink-2);background:var(--panel-2)} .chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)} .chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)} /* ---------- BRAND MARK ---------- */ .mark{width:26px;height:26px;flex:none;position:relative;border:1.6px solid var(--ink)} .mark::after{content:"";position:absolute;inset:4px;background:var(--accent)} .mark.ops::after{background:var(--accent)} .mark.admin::after{background:var(--bad)} .mark.airline::after{background:var(--ok)} /* ============================================================ SHELL OVERRIDES — retargets the live portal's existing shared classes (injected by sidebar-nav.js + the per-page top bar) to the Operations Console look. Load this AFTER base.css/dashboard.css so these win the cascade. One place reskins the chrome everywhere. ============================================================ */ body{background:var(--bg);color:var(--ink);font-family:var(--font-sans)} /* sidebar (aside.sidebar.glass#appSidebar) */ .sidebar{width:228px;flex:none;background:var(--glass-bg);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:0;backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)} /* the fixed sidebar is 228px; main offset must match (dashboard.css used 260 → 32px gap) */ .main-wrapper{margin-left:228px} /* logo as a flush 72px header band — bottom border aligns with .top-bar's */ .sidebar-logo{display:flex;align-items:center;gap:11px;height:72px;padding:0 18px;border-bottom:1px solid var(--line);flex-shrink:0} .sidebar-logo-icon{color:var(--accent);font-size:24px} .sidebar-logo-text{font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink)} .sidebar-nav{display:flex;flex-direction:column;flex:1;gap:1px;padding:12px 14px} .nav-section{display:flex;flex-direction:column} .nav-section-label{font:600 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:13px 10px 6px} .nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);color:var(--ink-2);font:500 14px var(--font-sans);text-decoration:none;position:relative;border:0;background:transparent;width:100%;cursor:pointer;text-align:left} .nav-item i{font-size:17px;flex:none} .nav-item:hover{background:var(--panel-2);color:var(--ink)} .nav-item.active{background:var(--panel-2);color:var(--ink);font-weight:600} .nav-item.active::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:2px;background:var(--accent)} .nav-airline-caret{margin-left:auto;font-size:12px;color:var(--muted)} .nav-divider{height:1px;background:var(--line);margin:10px 6px} .nav-spacer{flex:1 1 auto} .nav-logout{margin-top:4px;color:var(--ink-2)} .nav-logout:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)} /* top bar (header.top-bar.glass) */ .top-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 26px;border-bottom:1px solid var(--line);background:var(--glass-bg);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)} .top-bar-title h1{font-size:21px;font-weight:600;color:var(--ink);margin:0} .top-bar-title p{font-size:13px;color:var(--muted);margin:2px 0 0} .top-bar-actions{display:flex;align-items:center;gap:14px} .notif-btn{position:relative;width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer} .notif-btn:hover{color:var(--ink);background:var(--panel-3)} .notif-btn i{font-size:16px} .notif-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:8px;background:var(--bad);color:#fff;font:700 9px var(--font-mono);display:grid;place-items:center;padding:0 4px} .notif-badge:empty{display:none} .pilot-info{display:flex;align-items:center;gap:11px} .pilot-avatar{width:36px;height:36px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font:600 13px var(--font-mono);color:var(--ink)} .pilot-meta{display:flex;flex-direction:column;line-height:1.25} .pilot-name{font-weight:600;font-size:14px;color:var(--ink)} .pilot-role{font:500 11px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} /* ---------- THEME TOGGLE (subtle: sun / moon, no text) ---------- */ .theme-toggle{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2)} .theme-toggle button{width:28px;height:26px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:var(--muted);cursor:pointer} .theme-toggle button .ico{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .theme-toggle button:hover{color:var(--ink-2)} .theme-toggle button.active{background:var(--panel-3);color:var(--ink)} [data-theme="light"] .theme-toggle button.active{background:var(--panel);box-shadow:var(--shadow)} /* ============================================================ LEGACY CLASS ALIASES — map old base.css / page class names onto the design system so any page reskins by just linking this file (loaded after base.css + page CSS, so these win the cascade). ============================================================ */ .form-input{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;color:var(--ink);font-family:var(--font-sans);font-size:12.5px;width:100%} .form-input:focus{outline:none;border-color:var(--accent);background:var(--bg)} .form-input::placeholder{color:var(--muted)} .form-label{display:block;font:600 9.5px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .btn-ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--ink)} .btn-ghost:hover{background:var(--panel-3);color:var(--ink)} .badge-success{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);border:1px solid color-mix(in srgb,var(--ok) 26%,transparent)} .badge-warning{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent)} .badge-danger{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent);border:1px solid color-mix(in srgb,var(--bad) 26%,transparent)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)} .card:hover{transform:none;box-shadow:var(--shadow)} /* ---------- AIRLINE ENVIRONMENT NEUTRALIZER ---------- base.css body.airline-env repaints the airline pages emerald/forest (and its 0,1,1 specificity beats the theme tokens). Under the unified design system, re-assert the standard slate/blue palette so /airline* matches every other page. Loaded after base.css, so these win. */ body.airline-env{ --bg:#0B0F17; --surface:#111824; --surface-2:#151D2B; --surface-solid:#111824; --accent:#3B82F6; --accent-dark:#2563EB; --accent-2:#0EA5E9; --cyan:#0EA5E9; --accent-glow:rgba(59,130,246,.35); --glass-bg:rgba(16,22,33,.72); --panel-bg:rgba(16,22,33,.96); --dropdown-bg:rgba(16,22,33,.88); --accent-wash:rgba(59,130,246,.10); --accent-wash-strong:rgba(59,130,246,.07); --accent-border:rgba(59,130,246,.30); --accent-rgb:59,130,246; --cyan-rgb:14,165,233; } [data-theme="light"] body.airline-env{ --bg:#E8ECF1; --surface:#FFFFFF; --surface-2:#F4F7FA; --surface-solid:#FFFFFF; --accent:#2563EB; --accent-2:#0284C7; --cyan:#0284C7; --glass-bg:rgba(255,255,255,.7); } /* ============================================================ SHARED POPOVERS — reskins the two JS-injected floating popovers (the notification panel + the user-menu dropdown) onto the Operations Console look. design-system.css is linked on ALL 52 pages (desktop + mobile) and loads AFTER base.css / dashboard.css / mobile-base.css, so this one section reskins both popovers everywhere. Theme tokens handle dark + light automatically. VISUAL ONLY — surface / border / radius / shadow / colour / type. Positioning is owned elsewhere and intentionally NOT touched here: • desktop popover anchoring lives in dashboard.css; • the mobile full-width notification sheet lives in mobile-base.css as `.mob-content .notif-panel` (specificity 0,2,0). These rules stay at single-class (0,1,0) specificity and never set position / inset / width / max-* on .notif-panel, so the mobile sheet geometry always wins. Open/close animation + the `hidden`-attr / `.open` toggles are driven by the shared JS and existing rules; not overridden here. ============================================================ */ /* ---------- Shared floating surface (frosted, like the chrome) ---------- */ .notif-panel, .user-dropdown{ /* SOLID surface — popovers float over arbitrary page content, so they must be opaque for legibility (glass is only for the sticky chrome). */ background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow),0 16px 44px -8px rgba(0,0,0,.6); /* strong elevation so it reads as floating */ overflow:hidden; /* clips the header band + rows to the radius */ color:var(--ink); } /* ---------- NOTIFICATION PANEL ---------- */ /* Header: mono uppercase label on a panel-2 band with a hairline rule (matches .panel-h) */ .notif-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;background:var(--panel-2);border-bottom:1px solid var(--line)} .notif-panel-title{font:600 10.5px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)} /* Close: quiet icon button; subtle fill on hover (panel-3 reads against the panel-2 band) */ .notif-panel-close{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:13px;cursor:pointer} .notif-panel-close:hover{color:var(--ink);background:var(--panel-3)} /* Body: flush, divider-separated list (not a gapped stack); scroll/max-height stay from the legacy rule */ .notif-panel-body{padding:0;display:block} /* Empty state */ .notif-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center;color:var(--muted);font-size:12px} .notif-empty i{font-size:28px;color:var(--muted);opacity:.6} /* Item: flush row, hairline divider, 2px severity accent on the left; right pad reserves the dismiss btn */ .notif-item{position:relative;display:block;padding:11px 34px 11px 15px;background:transparent;border:0;border-left:2px solid transparent;border-bottom:1px solid var(--line);border-radius:0} .notif-item:last-child{border-bottom:0} .notif-item:hover{background:var(--panel-2)} /* Severity left-accent — mirrors the .notam-item mapping used on home.css */ .notif-item.info{border-left-color:var(--accent)} .notif-item.approved,.notif-item.success{border-left-color:var(--ok)} .notif-item.warning{border-left-color:var(--warn)} .notif-item.critical,.notif-item.rejected{border-left-color:var(--bad)} .notif-item.support{border-left-color:var(--accent-2)} /* Severity label: muted by default, tinted to match the accent */ .notif-item-severity{font:600 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .notif-item.info .notif-item-severity{color:var(--accent)} .notif-item.approved .notif-item-severity,.notif-item.success .notif-item-severity{color:var(--ok)} .notif-item.warning .notif-item-severity{color:var(--warn)} .notif-item.critical .notif-item-severity,.notif-item.rejected .notif-item-severity{color:var(--bad)} .notif-item.support .notif-item-severity{color:var(--accent-2)} /* Item text: title in --ink, body in --ink-2, time in mono --muted */ .notif-item-title{font:600 13px var(--font-sans);color:var(--ink);margin-bottom:2px} .notif-item-body{font-size:12.5px;line-height:1.4;color:var(--ink-2)} .notif-item-time{margin-top:6px;font:500 10px var(--font-mono);letter-spacing:.03em;color:var(--muted)} /* Unread: slightly raised accent-tinted bg + a glowing accent dot */ .notif-item.is-unread{background:color-mix(in srgb,var(--accent) 8%,transparent)} .notif-item.is-unread:hover{background:color-mix(in srgb,var(--accent) 13%,transparent)} .notif-item.is-unread::before{content:"";position:absolute;top:13px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 70%,transparent)} /* Per-item dismiss: quiet, reveals on row hover, reddens on its own hover */ .notif-item-delete{position:absolute;right:8px;bottom:8px;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,color .12s ease,background .12s ease} .notif-item:hover .notif-item-delete{opacity:1} .notif-item-delete:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)} /* On unread rows the dismiss anchors top-right; shift the unread dot left so it clears the button */ .notif-item.is-unread .notif-item-delete{top:8px;bottom:auto} .notif-item.is-unread::before{right:34px} /* ---------- USER-MENU DROPDOWN ---------- */ /* Container surface inherits the shared rule above; drop the legacy 16px pad so dividers run edge-to-edge */ .user-dropdown{padding:0} /* Info rows: stacked label/value with a hairline divider; the last row's border doubles as the footer divider */ .user-dropdown-row{display:flex;flex-direction:column;gap:2px;padding:11px 15px;border-bottom:1px solid var(--line)} .user-dropdown-row+.user-dropdown-row{margin-top:0} .user-dropdown-label{font:600 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .user-dropdown-value{font-family:var(--font-sans);font-size:12.5px;color:var(--ink);word-break:break-all} /* "Mono" data value (bank account no.) — actually monospace per "mono for data" */ .user-dropdown-mono{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2)} /* Footer holds the action item(s) */ .user-dropdown-footer{padding:11px 15px} /* Action item — ghost button matching .btn; .danger/.logout variant reddens on hover for destructive actions */ .user-dropdown-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);font:600 12.5px var(--font-sans);cursor:pointer} .user-dropdown-btn:hover{background:var(--panel-3)} .user-dropdown-btn.danger,.user-dropdown-btn.logout{color:var(--bad)} .user-dropdown-btn.danger:hover,.user-dropdown-btn.logout:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}