:root { --bg: #0b0f14; --bg-elev: #10151c; --card: #131a23; --card-border: #232d3a; --text: #e8edf3; --text-dim: #8fa0b3; --text-faint: #5c6b7d; --accent: #35c7ee; --accent-soft: rgba(53, 199, 238, 0.12); --green: #34d399; --yellow: #fbbf24; --red: #f87171; --green-soft: rgba(52, 211, 153, 0.14); --yellow-soft: rgba(251, 191, 36, 0.14); --red-soft: rgba(248, 113, 113, 0.14); --radius: 14px; font-size: 15px; } * { box-sizing: border-box; } /* The `hidden` attribute's default UA-stylesheet behavior (display: none) is silently overridden by ANY author rule that sets `display` on the same element - e.g. .auth-loading/.login-screen both set `display: flex` for centering, which otherwise wins over `[hidden]` regardless of the attribute being present. This single rule keeps `hidden` authoritative everywhere on the page, so JS only ever has to toggle the attribute. */ [hidden] { display: none !important; } /* Locks page scroll while an auth-state screen (loading/login) is the only thing on screen - toggled on by auth.js, removed the moment the dashboard becomes active so its own scrolling is never affected. */ body.auth-state { overflow: hidden; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Inter, Arial, sans-serif; /* Tooltips are position:absolute and centered on their icon by default; visibility:hidden still occupies layout space, so a tooltip anchored near a narrow card's edge (e.g. the compact baseline metric cards) can extend past the viewport while hidden and create a pointless horizontal scrollbar. Nothing on this page relies on horizontal page scroll. Set on both html and body since overflow-propagation-to-viewport isn't consistently honored across environments. */ overflow-x: hidden; } body { background-image: radial-gradient(circle at 15% 0%, rgba(53, 199, 238, 0.06), transparent 40%), radial-gradient(circle at 85% 10%, rgba(52, 211, 153, 0.05), transparent 35%); min-height: 100vh; } .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; background: linear-gradient(180deg, var(--bg-elev), var(--bg)); border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #1a7fa0); display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: 0.5px; color: #04141a; font-size: 15px; } .brand-name { font-size: 19px; font-weight: 700; letter-spacing: 0.3px; } .brand-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 1px; } .meta-strip { display: flex; flex-wrap: wrap; gap: 26px; } .meta-item { display: flex; flex-direction: column; gap: 3px; min-width: 74px; } .meta-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); } .meta-value { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .badge-neutral { background: #1c2531; color: var(--text-dim); } .badge-green { background: var(--green-soft); color: var(--green); } .badge-yellow { background: var(--yellow-soft); color: var(--yellow); } .badge-red { background: var(--red-soft); color: var(--red); } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .layout { max-width: 1400px; margin: 0 auto; padding: 24px 28px 60px; display: flex; flex-direction: column; gap: 20px; } .row { display: grid; gap: 20px; min-width: 0; } .row-health { grid-template-columns: 300px 1fr; } .row-charts { grid-template-columns: 1.3fr 1fr; } .row-split { grid-template-columns: 1fr 1fr; } .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px 22px; width: 100%; min-width: 0; } .card.full { grid-column: 1 / -1; } .card-title { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 14px; } /* Health gauge */ .health-card { display: flex; flex-direction: column; align-items: center; } .gauge-wrap { position: relative; width: 200px; height: 200px; } .gauge { width: 200px; height: 200px; transform: rotate(-90deg); } .gauge-track { fill: none; stroke: #1b232e; stroke-width: 14; } .gauge-value { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 540.35; stroke-dashoffset: 540.35; transition: stroke-dashoffset 0.6s ease, stroke 0.6s ease; } .gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gauge-number { font-size: 46px; font-weight: 800; line-height: 1; } .gauge-label { font-size: 13px; color: var(--text-dim); margin-top: 6px; font-weight: 600; } /* KPI grid */ .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .kpi { display: flex; flex-direction: column; gap: 8px; justify-content: center; } .kpi-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; } .kpi-value { font-size: 26px; font-weight: 700; } .kpi-unit { font-size: 14px; font-weight: 500; color: var(--text-dim); margin-left: 5px; } .kpi-sub { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* Charts */ .chart-card { min-width: 0; } .chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .chart-header .card-title { margin-bottom: 0; } .chart-canvas-wrap { height: 260px; position: relative; min-width: 0; } .chart-canvas-wrap canvas { max-width: 100%; } .range-picker { display: flex; gap: 6px; flex-wrap: wrap; } .range-picker button { background: #1a2330; border: 1px solid var(--card-border); color: var(--text-dim); font-size: 12px; padding: 5px 10px; border-radius: 7px; cursor: pointer; font-weight: 600; } .range-picker button:hover { color: var(--text); } .range-picker button.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(53,199,238,0.3); } /* Analysis table */ .table-wrap { overflow-x: auto; width: 100%; } .analysis-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .analysis-table th, .analysis-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--card-border); white-space: nowrap; } .analysis-table th { color: var(--text-faint); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; } .analysis-table td { color: var(--text); font-variant-numeric: tabular-nums; } .analysis-table td:first-child { color: var(--text-dim); } /* Anomaly / risk */ .sub-note { font-size: 11.5px; color: var(--text-faint); margin-top: -10px; margin-bottom: 14px; } .stat-list { display: flex; flex-direction: column; gap: 12px; } .stat-row { display: flex; align-items: center; justify-content: space-between; } .stat-key { color: var(--text-dim); font-size: 13.5px; } .stat-val { font-weight: 700; font-size: 14.5px; } .deviation-list { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); } .deviation-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; font-size: 13px; } .deviation-label { color: var(--text-dim); } .deviation-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .risk-headline { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; } .risk-level { font-size: 32px; font-weight: 800; letter-spacing: 0.5px; } .risk-score { font-size: 15px; color: var(--text-dim); font-weight: 600; } .factor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; } .factor { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--card-border); } .factor span { color: var(--text-dim); } .factor b { font-weight: 700; } /* Insight */ .insight-card { background: linear-gradient(135deg, var(--card), #121c26); border-color: rgba(53,199,238,0.22); } .insight-text { font-size: 16.5px; line-height: 1.55; color: var(--text); margin: 0 0 18px; max-width: 900px; } .recommendation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; background: var(--accent-soft); border: 1px solid rgba(53,199,238,0.25); border-radius: 10px; padding: 12px 16px; } .recommendation-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); font-weight: 700; } .recommendation-text { font-size: 14.5px; font-weight: 600; } /* Condition indicators */ .condition-list { display: flex; flex-direction: column; gap: 2px; } .condition-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--card-border); } .condition-row:last-child { border-bottom: none; } .condition-name { font-size: 13.5px; color: var(--text-dim); } /* Events */ .event-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } .event-row { display: flex; gap: 14px; padding: 9px 2px; border-bottom: 1px solid var(--card-border); font-size: 13px; } .event-row:last-child { border-bottom: none; } .event-time { color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 68px; } .event-text { color: var(--text); } /* Machine baseline */ .baseline-states { display: flex; flex-direction: column; gap: 18px; } .baseline-state { display: flex; flex-direction: column; gap: 10px; } .baseline-state-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .baseline-period { font-size: 12.5px; color: var(--text-dim); } .baseline-samples { font-size: 12.5px; color: var(--text-faint); margin-left: auto; } .baseline-maturity { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .baseline-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .baseline-metric { display: flex; flex-direction: column; gap: 4px; background: var(--bg-elev); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; min-width: 0; } .baseline-metric-label { display: block; min-width: 0; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; } .baseline-metric-mean { display: block; font-size: 14px; font-weight: 600; color: var(--text); } .baseline-metric-sigma { display: block; font-size: 12px; font-weight: 500; color: var(--text-dim); margin-top: 2px; } .baseline-metric-na { color: var(--text-faint); font-weight: 500; } .baseline-empty { font-size: 13.5px; color: var(--text-faint); } @media (max-width: 640px) { .baseline-metrics { grid-template-columns: 1fr; } } /* Runtime + vibration exposure */ .runtime-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 10px; } .runtime-stat { display: flex; flex-direction: column; gap: 6px; } .runtime-stat-label { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; } .runtime-stat-value { font-size: 17px; font-weight: 700; color: var(--text); } .runtime-note { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; } .runtime-divider { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--card-border); } .exposure-bars { display: flex; flex-direction: column; gap: 2px; } .exposure-row { display: grid; grid-template-columns: 9px 90px 1fr auto; align-items: center; gap: 10px; padding: 8px 2px; font-size: 13px; border-bottom: 1px solid var(--card-border); } .exposure-row:last-child { border-bottom: none; } .exposure-dot { width: 9px; height: 9px; border-radius: 50%; } .exposure-label { color: var(--text-dim); } .exposure-duration { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; } .exposure-percent { font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; } .exposure-sub { grid-column: 2 / -1; font-size: 11px; color: var(--text-faint); } .runtime-empty { font-size: 13.5px; color: var(--text-faint); } @media (max-width: 640px) { .runtime-summary { grid-template-columns: repeat(2, 1fr); } .exposure-row { grid-template-columns: 9px 1fr auto; } .exposure-percent { grid-column: 3; } } /* X/Y/Z vibration imbalance */ .imbalance-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-bottom: 18px; } .imbalance-stat { display: flex; flex-direction: column; gap: 6px; } .imbalance-stat-label { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; } .imbalance-stat-value { font-size: 22px; font-weight: 700; color: var(--text); } .axis-bars { display: flex; flex-direction: column; gap: 10px; } .axis-bar-row { display: grid; grid-template-columns: 18px 1fr 100px; align-items: center; gap: 12px; } .axis-bar-label { font-size: 13px; font-weight: 700; color: var(--text-dim); } .axis-bar-track { height: 12px; border-radius: 6px; background: var(--bg-elev); overflow: hidden; } .axis-bar-fill { height: 100%; border-radius: 6px; background: #3a4557; transition: width 0.4s ease; } .axis-bar-fill.dominant { background: var(--accent); } .axis-bar-value { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } @media (max-width: 640px) { .imbalance-headline { gap: 16px; } .axis-bar-row { grid-template-columns: 18px 1fr 76px; gap: 8px; } } /* Crest factor analysis */ .crest-group { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-border); } .crest-group:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .crest-group-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin-bottom: 12px; } .crest-group-stats { display: flex; gap: 24px; margin-top: 12px; font-size: 13px; color: var(--text-dim); } .crest-group-stats b { color: var(--text); font-weight: 700; margin-left: 4px; } .crest-interpretation { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--card-border); font-size: 13px; color: var(--text-dim); line-height: 1.55; } /* Help tooltips */ .help-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-faint); background: rgba(143, 160, 179, 0.14); cursor: help; vertical-align: middle; outline: none; user-select: none; } .help-icon:hover, .help-icon:focus-visible, .help-icon.tooltip-open { color: var(--accent); background: var(--accent-soft); } .help-icon:focus-visible { box-shadow: 0 0 0 2px rgba(53, 199, 238, 0.35); } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); width: max-content; min-width: 200px; max-width: 320px; background: #1a2330; border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: normal; color: var(--text); white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 50; } .help-icon:hover .tooltip, .help-icon:focus .tooltip, .help-icon:focus-visible .tooltip, .help-icon.tooltip-open .tooltip { opacity: 1; visibility: visible; pointer-events: auto; } /* Default: tooltip opens above and centered on the icon. These modifiers flip it below and/or shift its horizontal anchor when there isn't enough room, computed on hover/focus in app.js. */ .tooltip.tooltip-below { bottom: auto; top: 100%; transform: translateX(-50%) translateY(8px); } .tooltip.tooltip-align-left { left: 0; transform: translateY(-8px); } .tooltip.tooltip-align-left.tooltip-below { transform: translateY(8px); } .tooltip.tooltip-align-right { left: auto; right: 0; transform: translateY(-8px); } .tooltip.tooltip-align-right.tooltip-below { transform: translateY(8px); } .tooltip-title { font-size: 12.5px; font-weight: 700; color: var(--text); } .tooltip-para { color: var(--text-dim); } .tooltip-note { color: var(--text-faint); font-style: italic; font-size: 11.5px; padding-top: 6px; border-top: 1px solid var(--card-border); } @media (max-width: 980px) { .row-health { grid-template-columns: 1fr; } .row-charts { grid-template-columns: 1fr; } .row-split { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .meta-strip { gap: 16px; } } @media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } .layout { padding: 18px 14px 40px; } .topbar { padding: 14px 16px; } } /* ========================================================================== Phase 5B — authentication screens (loading / login) and topbar additions ========================================================================== */ .topbar-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .user-chip { display: flex; align-items: center; gap: 12px; padding-left: 20px; border-left: 1px solid var(--card-border); } .user-chip .meta-value { color: var(--text-dim); font-weight: 500; font-size: 13px; } .logout-button { background: #1a2330; border: 1px solid var(--card-border); color: var(--text-dim); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; } .logout-button:hover { color: var(--text); border-color: rgba(255,255,255,0.2); } .logout-button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(53, 199, 238, 0.35); } .logout-button:disabled { opacity: 0.6; cursor: default; } /* Loading state shown only until the initial GET /api/auth/me resolves. */ .auth-loading { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .auth-loading .brand-mark { width: 48px; height: 48px; font-size: 17px; } .auth-loading-text { color: var(--text-dim); font-size: 13.5px; } /* Login screen */ .login-screen { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 32px 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .login-brand { justify-content: center; margin-bottom: 28px; } .login-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 22px; text-align: center; } .login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .login-field label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; } .login-field input { background: var(--bg-elev); border: 1px solid var(--card-border); border-radius: 9px; padding: 11px 13px; font-size: 14.5px; color: var(--text); font-family: inherit; } .login-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53, 199, 238, 0.2); } .login-error { background: var(--red-soft); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 9px; padding: 10px 13px; font-size: 13px; margin-bottom: 16px; } .login-submit { width: 100%; background: linear-gradient(135deg, var(--accent), #1a7fa0); color: #04141a; border: none; border-radius: 9px; padding: 12px 16px; font-size: 14.5px; font-weight: 700; cursor: pointer; } .login-submit:hover { filter: brightness(1.05); } .login-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(53, 199, 238, 0.35); } .login-submit:disabled { opacity: 0.7; cursor: default; } @media (max-width: 480px) { .login-card { padding: 26px 20px; } .user-chip { padding-left: 0; border-left: none; } } /* ========================================================================== Phase 7 — Admin Portal shell (admin.html/admin.js) ========================================================================== */ .admin-denied-text { color: var(--text-dim); font-size: 14px; line-height: 1.5; text-align: center; margin: 0 0 22px; } .admin-layout { max-width: 1100px; margin: 0 auto; padding: 24px 28px 60px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; } .admin-nav { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 10px; } .admin-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; border: none; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--text-dim); text-align: left; cursor: pointer; font-family: inherit; } .admin-nav-item.active { background: var(--accent-soft); color: var(--accent); } .admin-nav-item:not(:disabled):hover { color: var(--text); } .admin-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(53, 199, 238, 0.35); } .admin-nav-item:disabled { cursor: default; opacity: 0.6; } .admin-nav-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); background: var(--bg-elev); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .admin-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .admin-tenant-picker { display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .admin-tenant-label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; } .admin-tenant-select { background: var(--bg-elev); border: 1px solid var(--card-border); border-radius: 9px; padding: 10px 12px; font-size: 14.5px; color: var(--text); font-family: inherit; } .admin-tenant-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53, 199, 238, 0.2); } .admin-hint { color: var(--text-faint); font-size: 13px; margin: 14px 0 0; } .admin-overview-name { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 14px; } .admin-overview-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--card-border); font-size: 13.5px; color: var(--text-dim); } .admin-overview-row:last-of-type { border-bottom: none; } .admin-overview-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--card-border); } .admin-overview-section-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); margin-bottom: 8px; } .admin-coming-soon { color: var(--text-faint); font-size: 13.5px; } .admin-dashboard-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none; } .admin-dashboard-link:hover { text-decoration: underline; } .admin-dashboard-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(53, 199, 238, 0.35); border-radius: 4px; } @media (max-width: 720px) { .admin-layout { grid-template-columns: 1fr; padding: 18px 16px 40px; } .admin-nav { flex-direction: row; overflow-x: auto; } .admin-nav-item { flex: 1 1 auto; justify-content: center; white-space: nowrap; } } /* ========================================================================== Phase 8 — Tenants & Users management (admin.html/admin.js) ========================================================================== */ .admin-view-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .admin-view-title { font-size: 19px; font-weight: 700; color: var(--text); margin: 0; } .admin-view-subtitle { font-size: 13px; color: var(--text-dim); margin: 4px 0 0; } .admin-primary-button { background: linear-gradient(135deg, var(--accent), #1a7fa0); color: #04141a; border: none; border-radius: 9px; padding: 10px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; } .admin-primary-button:hover { filter: brightness(1.05); } .admin-primary-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(53, 199, 238, 0.35); } .admin-primary-button:disabled { opacity: 0.5; cursor: default; filter: none; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--card-border); font-size: 13.5px; } .admin-table th { color: var(--text-faint); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; } .admin-table td { color: var(--text); } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table-actions { display: flex; gap: 14px; justify-content: flex-end; white-space: nowrap; } .admin-link-button { background: none; border: none; padding: 0; color: var(--accent); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .admin-link-button:hover { text-decoration: underline; } .admin-link-button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(53, 199, 238, 0.35); border-radius: 4px; } .admin-link-button:disabled { color: var(--text-faint); cursor: default; text-decoration: none; } .modal-overlay { position: fixed; inset: 0; background: rgba(4, 8, 12, 0.6); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 20; } .modal-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); } .modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 18px; } .modal-actions { display: flex; gap: 10px; margin-top: 4px; } .modal-actions .login-submit { width: auto; flex: 1; } .modal-secondary-button { flex: 1; background: var(--bg-elev); border: 1px solid var(--card-border); color: var(--text-dim); border-radius: 9px; padding: 12px 16px; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit; } .modal-secondary-button:hover { color: var(--text); } .modal-secondary-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(53, 199, 238, 0.2); } @media (max-width: 480px) { .modal-card { padding: 22px 18px 18px; } } /* ========================================================================== Phase 9 — Devices & one-time API key display (admin.html/admin.js) ========================================================================== */ .api-key-field { margin-top: 4px; } .api-key-value-row { display: flex; gap: 8px; } .api-key-value-row input { flex: 1; min-width: 0; background: var(--bg-elev); border: 1px solid var(--card-border); border-radius: 9px; padding: 11px 13px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); } .api-key-value-row .modal-secondary-button { flex: 0 0 auto; width: auto; white-space: nowrap; } .api-key-copied { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--green); } .api-key-warning { color: var(--yellow); font-weight: 600; margin-top: 16px; }