/** * Super Admin — Platform Console glass theme * Scoped to body.role-super-admin * Field-officer–style frosted glass + steel/mint platform accents. * * Theme attribute lives on * Backup: _backup_super_dashboard_glass/ (ask before deleting) */ /* ——— Light canvas (officer-depth blooms + cool steel tint) ——— */ body.role-super-admin { --super-steel: #1a5c6e; --super-steel-soft: #e8f4f7; --super-mint: #d8f5e6; --glass-surface: rgba(255, 255, 255, 0.44); --glass-surface-border: rgba(255, 255, 255, 0.58); background: radial-gradient(ellipse 90% 70% at 8% -10%, rgba(184, 224, 200, 0.5), transparent 52%), radial-gradient(ellipse 70% 55% at 100% 0%, rgba(26, 92, 110, 0.12), transparent 48%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(228, 242, 234, 0.7), transparent 55%), linear-gradient(180deg, #eef4f2 0%, #f3f6f3 40%, #e8eff0 100%); background-attachment: fixed; } html[data-theme="dark"] body.role-super-admin { --glass-ink: #f6f7f5; --glass-ink-soft: #d0d6d2; --glass-ink-mute: #9aa59e; --glass-label: #9fe0bc; --glass-rim: rgba(255, 255, 255, 0.12); --glass-rim-strong: rgba(255, 255, 255, 0.2); --glass-warm: #e8b48a; --glass-mint: #8fd9b0; --glass-steel: #7eb8c9; --glass-panel: linear-gradient( 160deg, rgba(52, 58, 60, 0.75) 0%, rgba(26, 30, 31, 0.8) 45%, rgba(16, 18, 19, 0.86) 100% ); color: var(--glass-ink); background: radial-gradient(ellipse 70% 55% at 10% 0%, rgba(126, 184, 201, 0.16), transparent 55%), radial-gradient(ellipse 60% 50% at 95% 8%, rgba(111, 191, 147, 0.14), transparent 50%), radial-gradient(ellipse 50% 40% at 60% 100%, rgba(80, 110, 100, 0.14), transparent 55%), linear-gradient(180deg, #090b0a 0%, #0e1010 45%, #0c0e0d 100%); background-attachment: fixed; } body.role-super-admin .app-shell, body.role-super-admin .app-main, body.role-super-admin .app-main > main, body.role-super-admin #app-header { background: transparent !important; } body.role-super-admin .app-sidebar, body.role-super-admin .sidebar-platform { background: rgba(255, 255, 255, 0.42); border-right: 1px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 4px 0 32px rgba(13, 72, 50, 0.06), 1px 0 0 rgba(255, 255, 255, 0.4) inset; } html[data-theme="dark"] body.role-super-admin .app-sidebar, html[data-theme="dark"] body.role-super-admin .sidebar-platform { background: linear-gradient(180deg, rgba(34, 40, 42, 0.88), rgba(16, 18, 19, 0.92)); border-right: 1px solid var(--glass-rim); box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45); } body.role-super-admin .sidebar-brand-text { display: flex; flex-direction: column; gap: 2px; } body.role-super-admin .sidebar-brand-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--super-steel); line-height: 1.2; } body.role-super-admin .sidebar-brand-kicker:not(.is-platform) { display: none; } body.role-super-admin #sidebar-brand-title { font-size: 18px; font-weight: 800; color: #0d4832; line-height: 1.2; } body.role-super-admin #sidebar-brand-sub { font-size: 12px; font-weight: 500; color: #6b7c70; } html[data-theme="dark"] body.role-super-admin .sidebar-brand-kicker { color: var(--glass-steel, #7eb8c9); } html[data-theme="dark"] body.role-super-admin #sidebar-brand-title { color: var(--glass-ink); } html[data-theme="dark"] body.role-super-admin #sidebar-brand-sub { color: var(--glass-ink-mute); } /* Hide default EcoWatch strong styling conflict */ .sidebar-brand-kicker { display: none; } body.role-super-admin .sidebar-nav .tab.active::before { display: none; } body.role-super-admin .dash-queues { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1100px) { body.role-super-admin .dash-queues { grid-template-columns: 1fr; } } body.role-super-admin .directory-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 980px) { body.role-super-admin .directory-layout { grid-template-columns: 1fr; } } body.role-super-admin .directory-card { border-radius: 22px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(226, 234, 227, 0.95); padding: 16px 18px; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 12px 32px rgba(13, 72, 50, 0.06), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } body.role-super-admin .directory-card h3 { margin: 0 0 12px; font-size: 15px; } body.role-super-admin .directory-table { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body.role-super-admin .directory-register-form { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html[data-theme="dark"] body.role-super-admin .directory-card { background: var(--glass-panel) !important; border: 1px solid var(--glass-rim) !important; } html[data-theme="dark"] body.role-super-admin .dash-kpi-featured { background: linear-gradient(160deg, #0d4832 0%, #1a6b4a 55%, #245c40 100%) !important; border: 1px solid rgba(184, 224, 200, 0.35) !important; color: #fff !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(184, 224, 200, 0.25) inset !important; } html[data-theme="dark"] body.role-super-admin .dash-kpi-featured .dash-kpi-label, html[data-theme="dark"] body.role-super-admin .dash-kpi-featured .dash-kpi-value, html[data-theme="dark"] body.role-super-admin .dash-kpi-featured .dash-kpi-value.tone-info, html[data-theme="dark"] body.role-super-admin .dash-kpi-featured .dash-kpi-value.tone-danger, html[data-theme="dark"] body.role-super-admin .dash-kpi-featured .dash-kpi-value.tone-warning { color: #fff !important; } /* Dark active nav stays mint/steel, not peach */ html[data-theme="dark"] body.role-super-admin .sidebar-nav .tab.active { background: linear-gradient(135deg, rgba(184, 224, 200, 0.95), rgba(126, 184, 201, 0.88)) !important; border-color: rgba(158, 230, 188, 0.45) !important; color: #0a2e20 !important; box-shadow: 0 10px 28px rgba(111, 191, 147, 0.22) !important; } html[data-theme="dark"] body.role-super-admin .sidebar-nav .tab.active::before { display: none; } html[data-theme="dark"] body.role-super-admin .sidebar-brand-text #sidebar-brand-title, html[data-theme="dark"] body.role-super-admin .sidebar-section-label, html[data-theme="dark"] body.role-super-admin .sidebar-foot .platform-owner-note { color: var(--glass-ink-soft); } html[data-theme="dark"] body.role-super-admin .sidebar-brand-text #sidebar-brand-title { color: var(--glass-ink); } body.role-super-admin .sidebar-nav.tabs { gap: 4px; } body.role-super-admin .sidebar-nav .tab { min-height: 38px; height: 38px; padding: 0 14px; border-radius: 12px; font-size: 13px; font-weight: 500; border: 1px solid transparent; color: #5a6b60; } body.role-super-admin .sidebar-nav .tab:hover { background: rgba(13, 72, 50, 0.05); color: #0d4832; } body.role-super-admin .sidebar-nav .tab.active { background: var(--super-mint); color: #0a2e20; border: 1px solid #a8e6c6; font-weight: 600; box-shadow: none; } html[data-theme="dark"] body.role-super-admin .sidebar-nav .tab { color: var(--glass-ink-soft); } html[data-theme="dark"] body.role-super-admin .sidebar-nav .tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--glass-ink); } body.role-super-admin .sidebar-nav .sidebar-section-label { margin: 8px 10px 4px; pointer-events: none; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #8a9a90; } /* Clear break before PLATFORM group */ body.role-super-admin .sidebar-nav #nav-label-platform { margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(13, 72, 50, 0.1); } html[data-theme="dark"] body.role-super-admin .sidebar-nav #nav-label-platform { border-top-color: rgba(255, 255, 255, 0.1); } body.role-super-admin .sidebar-foot .platform-owner-note { font-size: 11px; line-height: 1.45; color: #6b7c70; } /* ——— Overview hierarchy (Figma) ——— */ body.role-super-admin #tab-dashboard { display: flex; flex-direction: column; gap: 22px; } body.role-super-admin #tab-dashboard .dash-header { margin: 0; gap: 6px; } body.role-super-admin #tab-dashboard .dash-title, body.role-super-admin #tab-settings .dash-title, body.role-super-admin #tab-audit .dash-title, body.role-super-admin #tab-users .dash-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #122018; line-height: 1.15; } body.role-super-admin #tab-dashboard .dash-subtitle, body.role-super-admin #tab-settings .dash-subtitle, body.role-super-admin #tab-audit .dash-subtitle { margin: 0; font-size: 14px; color: #6b7c70; } body.role-super-admin #tab-dashboard .dash-kpis, body.role-super-admin #tab-dashboard .dash-platform-strip, body.role-super-admin #tab-dashboard .dash-queues, body.role-super-admin #tab-dashboard .dash-workload, body.role-super-admin #tab-dashboard .dash-alert { margin: 0; } body.role-super-admin .dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1100px) { body.role-super-admin .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.role-super-admin .dash-kpi, body.role-super-admin .dash-card, body.role-super-admin .dash-workload, body.role-super-admin .stat-card, body.role-super-admin .table-wrap, body.role-super-admin .chart-card, body.role-super-admin .inline-form, body.role-super-admin .reports-filters, body.role-super-admin .map-toolbar, body.role-super-admin .map-legend-panel, body.role-super-admin .notif-card, body.role-super-admin .audit-feed-card, body.role-super-admin .routing-rule-card, body.role-super-admin .platform-system-card { border-radius: 22px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(226, 234, 227, 0.95); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 12px 32px rgba(13, 72, 50, 0.06), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } body.role-super-admin .dash-kpi:not(.dash-kpi-featured) { padding: 18px 20px; min-height: 110px; } body.role-super-admin .dash-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } body.role-super-admin .dash-kpi-value { font-size: 32px; font-weight: 800; line-height: 1.1; } body.role-super-admin .dash-kpi-featured { background: linear-gradient(160deg, #0d4832 0%, #166b4a 100%) !important; border: 1px solid transparent !important; color: #fff !important; box-shadow: 0 16px 40px rgba(13, 72, 50, 0.28), 0 1px 0 rgba(255, 255, 255, 0.22) inset !important; } body.role-super-admin .dash-kpi-featured .dash-kpi-label, body.role-super-admin .dash-kpi-featured .dash-kpi-value, body.role-super-admin .dash-kpi-featured .dash-kpi-value.tone-info, body.role-super-admin .dash-kpi-featured .dash-kpi-value.tone-danger, body.role-super-admin .dash-kpi-featured .dash-kpi-value.tone-warning { color: #fff !important; } /* Platform strip — quiet secondary (not a hero CTA) */ .dash-platform-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #e8f4f7; border: 1px solid #b8d4de; min-height: 0; } body.role-super-admin .dash-platform-strip { background: rgba(232, 244, 247, 0.95); } body.role-super-admin .dash-platform-strip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-theme="dark"] body.role-super-admin .dash-platform-strip { background: rgba(21, 32, 40, 0.9); border-color: rgba(126, 184, 201, 0.28); } .dash-platform-kicker { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--super-steel, #1a5c6e); line-height: 1.2; } html[data-theme="dark"] .dash-platform-kicker { color: var(--glass-steel, #7eb8c9); } .dash-platform-summary { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--text, #122018); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme="dark"] .dash-platform-summary { color: var(--glass-ink, #f6f7f5); } /* Compact steel outline — secondary to KPIs (reset global button chrome) */ body.role-super-admin .dash-platform-btn, .dash-platform-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; height: 32px; padding: 0 12px; border: 1px solid rgba(26, 92, 110, 0.45); border-radius: 10px; background: #fff; color: var(--super-steel, #1a5c6e); font-weight: 600; font-size: 11.5px; line-height: 1; cursor: pointer; box-shadow: none; } body.role-super-admin .dash-platform-btn:hover, .dash-platform-btn:hover { background: rgba(26, 92, 110, 0.08); border-color: var(--super-steel, #1a5c6e); } html[data-theme="dark"] body.role-super-admin .dash-platform-btn { background: transparent; border-color: rgba(126, 184, 201, 0.45); color: var(--glass-steel, #7eb8c9); } html[data-theme="dark"] body.role-super-admin .dash-platform-btn:hover { background: rgba(126, 184, 201, 0.12); } body.role-super-admin .dash-queues { gap: 16px; } body.role-super-admin .dash-card-head h3 { font-size: 15px; font-weight: 700; color: #122018; } body.role-super-admin .dash-view-all, body.role-super-admin .linkish.dash-view-all { font-size: 12px; font-weight: 600; color: #0d4832; } body.role-super-admin .dash-workload .dash-table-wrap { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body.role-super-admin .dash-workload th { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7c70; } /* ——— Audit feed ——— */ body.role-super-admin .audit-feed-card { padding: 12px 8px; } body.role-super-admin .audit-list { display: flex; flex-direction: column; gap: 0; padding: 0; background: transparent !important; border: none !important; box-shadow: none !important; } .audit-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; } .audit-row-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .audit-row-copy strong { font-size: 13px; font-weight: 600; color: #122018; } .audit-when { flex-shrink: 0; font-size: 12px; white-space: nowrap; } .audit-badge { flex-shrink: 0; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(13, 72, 50, 0.1); color: #0d4832; } .audit-badge.tone-mint { background: rgba(26, 107, 74, 0.12); color: #1a6b4a; } .audit-badge.tone-steel { background: rgba(26, 92, 110, 0.12); color: #1a5c6e; } .audit-badge.tone-warn { background: rgba(180, 83, 9, 0.12); color: #b45309; } .audit-badge.tone-mute { background: rgba(107, 124, 112, 0.12); color: #6b7c70; } .audit-badge.tone-forest { background: rgba(13, 72, 50, 0.12); color: #0d4832; } body.role-super-admin .audit-footnote { margin: 12px 0 0; font-size: 12px; color: #8a9a90; } /* Audit filters */ body.role-super-admin .audit-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 0 0 10px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.44); border: 1px solid rgba(255, 255, 255, 0.58); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 10px 32px rgba(13, 72, 50, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65) inset; } body.role-super-admin .audit-filters label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: #6b7c70; } body.role-super-admin .audit-filters .filter-search { flex: 1 1 220px; min-width: 180px; } body.role-super-admin .audit-filters input, body.role-super-admin .audit-filters select { width: 100%; margin: 0; min-height: 38px; padding: 8px 12px; border-radius: 12px; border: 1px solid #cfd9d1; background: rgba(255, 255, 255, 0.72); color: #122018; font-size: 13px; font-weight: 500; } body.role-super-admin .audit-filters #audit-filter-clear { width: auto; margin: 0; min-height: 38px; padding: 8px 14px; } body.role-super-admin #audit-filter-summary { margin: 0 0 12px; } html[data-theme="dark"] body.role-super-admin .audit-filters { background: var(--glass-panel) !important; border: 1px solid var(--glass-rim) !important; } html[data-theme="dark"] body.role-super-admin .audit-filters label { color: var(--glass-ink-mute); } html[data-theme="dark"] body.role-super-admin .audit-filters input, html[data-theme="dark"] body.role-super-admin .audit-filters select { background: rgba(255, 255, 255, 0.06); border-color: var(--glass-rim); color: var(--glass-ink); } html[data-theme="dark"] .audit-badge.tone-mint, html[data-theme="dark"] .audit-badge.tone-forest { background: rgba(143, 217, 176, 0.16); color: #b6efd2; } html[data-theme="dark"] .audit-badge.tone-steel { background: rgba(126, 184, 201, 0.18); color: #a8d8e6; } html[data-theme="dark"] .audit-badge.tone-warn { background: rgba(232, 180, 138, 0.2); color: #f0c9a8; } html[data-theme="dark"] .audit-badge.tone-mute { background: rgba(255, 255, 255, 0.08); color: #9aa59e; } /* ——— Platform settings ——— */ body.role-super-admin #tab-settings { display: flex; flex-direction: column; gap: 20px; } body.role-super-admin #tab-audit { display: flex; flex-direction: column; gap: 0; } body.role-super-admin #tab-settings .dash-header { margin: 0; } body.role-super-admin .platform-settings-body { display: flex; flex-direction: column; gap: 22px; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body.role-super-admin .platform-section-intro h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #122018; } body.role-super-admin .platform-section-intro .meta { margin: 0 0 12px; } body.role-super-admin .routing-rules-block { display: flex; flex-direction: column; gap: 12px; } body.role-super-admin .routing-rules-list { display: flex; flex-direction: column; gap: 12px; } body.role-super-admin .routing-rule-card, body.role-super-admin .platform-system-card { padding: 14px 16px; border-radius: 18px; box-shadow: 0 4px 16px rgba(13, 72, 50, 0.04), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } body.role-super-admin .routing-rule-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; } body.role-super-admin .routing-rule-summary > div { flex: 1; min-width: 0; } body.role-super-admin .routing-rule-summary h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: #122018; line-height: 1.25; } body.role-super-admin .routing-rule-meta { margin: 0; font-size: 12px; line-height: 1.4; color: #6b7c70; } /* Compact outline Edit — reset global button width/margin/fill */ body.role-super-admin .btn-outline, body.role-super-admin .routing-edit-btn.btn-outline, body.role-super-admin button.btn-outline { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; height: 30px; padding: 0 12px; border: 1px solid rgba(13, 72, 50, 0.25); border-radius: 10px; background: #fff; color: #0d4832; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; } body.role-super-admin .btn-outline:hover, body.role-super-admin .routing-edit-btn.btn-outline:hover, body.role-super-admin button.btn-outline:hover { background: rgba(13, 72, 50, 0.06); border-color: rgba(13, 72, 50, 0.4); } body.role-super-admin .platform-system-card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #122018; } body.role-super-admin .setting-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; } body.role-super-admin .setting-row-label { font-size: 13px; font-weight: 500; color: #122018; min-width: 200px; } body.role-super-admin .setting-chip-select, body.role-super-admin .setting-chip-input { appearance: none; -webkit-appearance: none; width: auto; margin: 0; border: 1px solid #cfd9d1; border-radius: 10px; padding: 7px 12px; background: #f7faf7; color: #0d4832; font-size: 13px; font-weight: 600; min-width: 120px; height: 34px; box-sizing: border-box; } body.role-super-admin .setting-hint { margin: 4px 0 14px; font-size: 12px; line-height: 1.4; color: #6b7c70; } body.role-super-admin .btn-primary-platform, body.role-super-admin #save-settings, body.role-super-admin button#save-settings { display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 4px 0 0; height: 36px; border: none; border-radius: 10px; padding: 0 16px; background: #0d4832; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; } body.role-super-admin .btn-primary-platform:hover, body.role-super-admin #save-settings:hover, body.role-super-admin button#save-settings:hover { background: #0a3a28; } body.role-super-admin .routing-rule-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } body.role-super-admin .routing-save-btn { width: auto; margin: 0; height: 34px; padding: 0 14px; border: none; border-radius: 10px; background: #0d4832; color: #fff; font-size: 12px; font-weight: 600; } body.role-super-admin .routing-cancel-btn { width: auto; margin: 0; height: 34px; padding: 0 14px; } body.role-super-admin #directory-head { margin-bottom: 8px; } html[data-theme="dark"] body.role-super-admin .dash-title, html[data-theme="dark"] body.role-super-admin #app-header h1, html[data-theme="dark"] body.role-super-admin .header-user, html[data-theme="dark"] body.role-super-admin .dash-card-head h3, html[data-theme="dark"] body.role-super-admin .routing-rule-summary h4, html[data-theme="dark"] body.role-super-admin .platform-system-card h3, html[data-theme="dark"] body.role-super-admin .platform-section-intro h3, html[data-theme="dark"] body.role-super-admin .setting-row-label, html[data-theme="dark"] body.role-super-admin .audit-row-copy strong { color: var(--glass-ink) !important; } html[data-theme="dark"] body.role-super-admin .dash-subtitle, html[data-theme="dark"] body.role-super-admin .meta, html[data-theme="dark"] body.role-super-admin .hint, html[data-theme="dark"] body.role-super-admin .audit-footnote { color: var(--glass-ink-mute) !important; } html[data-theme="dark"] body.role-super-admin .btn-outline, html[data-theme="dark"] body.role-super-admin button.btn-outline { background: transparent; border-color: rgba(143, 217, 176, 0.35); color: var(--glass-mint, #8fd9b0); } html[data-theme="dark"] body.role-super-admin .setting-chip-select, html[data-theme="dark"] body.role-super-admin .setting-chip-input { background: rgba(255, 255, 255, 0.06); border-color: var(--glass-rim); color: var(--glass-mint, #8fd9b0); } html[data-theme="dark"] body.role-super-admin .audit-feed-card, html[data-theme="dark"] body.role-super-admin .routing-rule-card, html[data-theme="dark"] body.role-super-admin .platform-system-card { background: var(--glass-panel) !important; border: 1px solid var(--glass-rim) !important; } /* ——— Super Admin Incidents (desk format, mirrors agency) ——— */ body.role-super-admin #tab-reports { display: flex; flex-direction: column; gap: 0; } body.role-super-admin .agency-incidents-head { margin: 0 0 4px; } body.role-super-admin .agency-incidents-head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #122018; } body.role-super-admin .agency-incidents-sub { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: #6b7c70; } body.role-super-admin .agency-desk-chips { margin: 14px 0 16px; gap: 8px; } body.role-super-admin .agency-desk-chips .officer-chip { background: #fff; border: 1px solid #e2eae3; color: #6b7c70; font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 999px; width: auto; margin: 0; min-height: 34px; } body.role-super-admin .agency-desk-chips .officer-chip.active { background: #0d4832; border-color: #0d4832; color: #fff; } body.role-super-admin .agency-incidents-card { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(226, 234, 227, 0.95); border-radius: 20px; box-shadow: 0 10px 28px rgba(13, 72, 50, 0.07), 0 1px 0 rgba(255, 255, 255, 0.7) inset; overflow: hidden; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } body.role-super-admin .agency-incidents-table thead th { background: #e4f2ea; color: #0d4832; } body.role-super-admin .agency-desk-btn, body.role-super-admin .agency-desk-btn.status-advance-btn { width: auto; margin: 0; padding: 8px 14px; border: none; border-radius: 12px; background: #0d4832; color: #fff; font-size: 12px; font-weight: 600; min-height: 31px; } body.role-super-admin .agency-desk-btn:hover { background: #0a3a28; } body.role-super-admin .agency-token-link { width: auto; margin: 0; padding: 0; background: none; border: none; color: #0d4832; box-shadow: none; } html[data-theme="dark"] body.role-super-admin .agency-incidents-head h2 { color: var(--glass-ink) !important; } html[data-theme="dark"] body.role-super-admin .agency-incidents-sub { color: var(--glass-ink-mute) !important; } html[data-theme="dark"] body.role-super-admin .agency-incidents-card { background: var(--glass-panel) !important; border: 1px solid var(--glass-rim) !important; } html[data-theme="dark"] body.role-super-admin .agency-incidents-table thead th { background: rgba(143, 217, 176, 0.12); color: var(--glass-mint, #8fd9b0); } html[data-theme="dark"] body.role-super-admin .agency-desk-chips .officer-chip { background: rgba(255, 255, 255, 0.04); border-color: var(--glass-rim); color: var(--glass-ink-mute); } html[data-theme="dark"] body.role-super-admin .agency-desk-chips .officer-chip.active { background: linear-gradient(135deg, rgba(184, 224, 200, 0.95), rgba(126, 184, 201, 0.88)); border-color: rgba(158, 230, 188, 0.45); color: #0a2e20; } /* ——— Super Admin Case Decision drawer ——— */ body.role-super-admin .case-drawer-root.case-drawer-agency .case-drawer, body.role-super-admin .case-drawer-root.case-drawer-agency #case-drawer { max-width: min(1100px, 96vw); border-radius: 24px; background: rgba(243, 246, 243, 0.96); border: 1px solid rgba(226, 234, 227, 0.95); box-shadow: 0 24px 64px rgba(13, 72, 50, 0.18); } body.role-super-admin .case-drawer-root.case-drawer-agency .case-drawer-kicker { color: #0d4832; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.role-super-admin .case-drawer-root.case-drawer-agency .case-drawer-token { font-size: 22px; font-weight: 800; color: #122018; } body.role-super-admin .case-drawer-root.case-drawer-agency .case-drawer-body { padding-top: 8px; } body.role-super-admin .case-drawer-root.case-drawer-agency .wb-grid { gap: 16px; } body.role-super-admin .case-drawer-root.case-drawer-agency .wb-col-side { display: flex; flex-direction: column; gap: 14px; } body.role-super-admin .case-drawer-root.case-drawer-agency .wb-card { border-radius: 18px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(226, 234, 227, 0.95); box-shadow: 0 8px 24px rgba(13, 72, 50, 0.06); } body.role-super-admin .case-drawer-root.case-drawer-agency .wb-card-title { color: #0d4832; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } body.role-super-admin .case-drawer-root.case-drawer-agency .agency-assign-name { font-size: 15px; font-weight: 700; color: #122018; } body.role-super-admin .case-drawer-root.case-drawer-agency #case-drawer-pills .chip-unassigned { background: rgba(180, 83, 9, 0.12); color: #b45309; } body.role-super-admin .case-drawer-root.case-drawer-agency .agency-desk-primary, body.role-super-admin .case-drawer-root.case-drawer-agency .agency-desk-primary.status-advance-btn { width: 100%; margin: 0; min-height: 44px; border-radius: 12px; background: #0d4832; color: #fff; border: none; } body.role-super-admin .case-drawer-root.case-drawer-agency .agency-desk-select, body.role-super-admin .case-drawer-root.case-drawer-agency .agency-desk-select.assign-select { width: 100%; margin: 0; min-height: 44px; border-radius: 12px; border: 1px solid #e2eae3; background: #f3f6f3; } html[data-theme="dark"] body.role-super-admin .case-drawer-root.case-drawer-agency .case-drawer, html[data-theme="dark"] body.role-super-admin .case-drawer-root.case-drawer-agency #case-drawer { background: linear-gradient(160deg, rgba(34, 40, 42, 0.96), rgba(16, 18, 19, 0.98)); border-color: var(--glass-rim); } html[data-theme="dark"] body.role-super-admin .case-drawer-root.case-drawer-agency .wb-card { background: var(--glass-panel) !important; border: 1px solid var(--glass-rim) !important; } html[data-theme="dark"] body.role-super-admin .case-drawer-root.case-drawer-agency .case-drawer-token, html[data-theme="dark"] body.role-super-admin .case-drawer-root.case-drawer-agency .agency-assign-name { color: var(--glass-ink) !important; } html[data-theme="dark"] body.role-super-admin .case-drawer-root.case-drawer-agency .wb-card-title, html[data-theme="dark"] body.role-super-admin .case-drawer-root.case-drawer-agency .case-drawer-kicker { color: var(--glass-mint, #8fd9b0) !important; } /* ============================================================ Full-dashboard glass pass (Field Officer recipe, steel/mint) ============================================================ */ body.role-super-admin .sidebar-brand { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.35); } html[data-theme="dark"] body.role-super-admin .sidebar-brand { border-bottom-color: var(--glass-rim); } body.role-super-admin .sidebar-foot { border-top: 1px solid rgba(255, 255, 255, 0.35); } html[data-theme="dark"] body.role-super-admin .sidebar-foot { border-top-color: var(--glass-rim); } body.role-super-admin .sidebar-nav .tab { background: transparent; border: 1px solid transparent; border-radius: 14px; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } body.role-super-admin .sidebar-nav .tab:hover { background: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.5); color: #0d4832; } body.role-super-admin .sidebar-nav .tab.active { background: rgba(216, 245, 230, 0.85); border: 1px solid #a8e6c6; color: #0a2e20; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset; } html[data-theme="dark"] body.role-super-admin .sidebar-nav .tab:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--glass-rim); color: var(--glass-ink); } /* Header toolbar glass chips */ body.role-super-admin #app-header button.secondary, body.role-super-admin #app-header .toolbar-btn { width: auto; margin: 0; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #0d4832; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; } body.role-super-admin #app-header button.secondary:hover, body.role-super-admin #app-header .toolbar-btn:hover { background: rgba(255, 255, 255, 0.72); } html[data-theme="dark"] body.role-super-admin #app-header button.secondary, html[data-theme="dark"] body.role-super-admin #app-header .toolbar-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-rim-strong); color: var(--glass-ink); } html[data-theme="dark"] body.role-super-admin #app-header button.secondary:hover, html[data-theme="dark"] body.role-super-admin #app-header .toolbar-btn:hover { background: rgba(255, 255, 255, 0.1); } /* Shared frosted surfaces — entire console */ body.role-super-admin .dash-kpi, body.role-super-admin .dash-card, body.role-super-admin .dash-workload, body.role-super-admin .stat-card, body.role-super-admin .table-wrap, body.role-super-admin .chart-card, body.role-super-admin .inline-form, body.role-super-admin .reports-filters, body.role-super-admin .map-toolbar, body.role-super-admin .map-legend, body.role-super-admin #map-legend, body.role-super-admin .map-legend-panel, body.role-super-admin .notif-card, body.role-super-admin .notification-item, body.role-super-admin .audit-feed-card, body.role-super-admin .routing-rule-card, body.role-super-admin .platform-system-card, body.role-super-admin .directory-card, body.role-super-admin .agency-incidents-card, body.role-super-admin .dash-alert:not(.hidden), body.role-super-admin .announcement-card, body.role-super-admin .perf-card { background: rgba(255, 255, 255, 0.44) !important; border: 1px solid rgba(255, 255, 255, 0.58) !important; backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 10px 32px rgba(13, 72, 50, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65) inset !important; } html[data-theme="dark"] body.role-super-admin .dash-kpi:not(.dash-kpi-featured), html[data-theme="dark"] body.role-super-admin .dash-card, html[data-theme="dark"] body.role-super-admin .dash-workload, html[data-theme="dark"] body.role-super-admin .stat-card, html[data-theme="dark"] body.role-super-admin .table-wrap, html[data-theme="dark"] body.role-super-admin .chart-card, html[data-theme="dark"] body.role-super-admin .inline-form, html[data-theme="dark"] body.role-super-admin .reports-filters, html[data-theme="dark"] body.role-super-admin .map-toolbar, html[data-theme="dark"] body.role-super-admin .map-legend, html[data-theme="dark"] body.role-super-admin #map-legend, html[data-theme="dark"] body.role-super-admin .map-legend-panel, html[data-theme="dark"] body.role-super-admin .notif-card, html[data-theme="dark"] body.role-super-admin .notification-item, html[data-theme="dark"] body.role-super-admin .audit-feed-card, html[data-theme="dark"] body.role-super-admin .routing-rule-card, html[data-theme="dark"] body.role-super-admin .platform-system-card, html[data-theme="dark"] body.role-super-admin .directory-card, html[data-theme="dark"] body.role-super-admin .agency-incidents-card, html[data-theme="dark"] body.role-super-admin .dash-alert:not(.hidden), html[data-theme="dark"] body.role-super-admin #tab-notifications li, html[data-theme="dark"] body.role-super-admin .notification-row, html[data-theme="dark"] body.role-super-admin .announcement-card, html[data-theme="dark"] body.role-super-admin .perf-card { background: var(--glass-panel) !important; border: 1px solid var(--glass-rim) !important; color: var(--glass-ink); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 -1px 0 rgba(0, 0, 0, 0.35) inset !important; } /* KPI lift — officer motion language */ body.role-super-admin .dash-kpi { border-radius: 22px; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.role-super-admin .dash-kpi:not(.dash-kpi-featured):hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(13, 72, 50, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7) inset !important; } html[data-theme="dark"] body.role-super-admin .dash-kpi:not(.dash-kpi-featured):hover { border-color: var(--glass-rim-strong) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.16) inset !important; } /* Featured KPI stays forest (not peach) */ body.role-super-admin .dash-kpi-featured { background: linear-gradient(160deg, #0d4832 0%, #166b4a 100%) !important; border: 1px solid transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="dark"] body.role-super-admin .dash-kpi-featured { background: linear-gradient(160deg, #0d4832 0%, #1a6b4a 55%, #245c40 100%) !important; border: 1px solid rgba(184, 224, 200, 0.35) !important; color: #fff !important; } /* Platform strip — frosted steel glass */ body.role-super-admin .dash-platform-strip { background: rgba(232, 244, 247, 0.55) !important; border: 1px solid rgba(184, 212, 224, 0.75) !important; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 8px 24px rgba(26, 92, 110, 0.08), 0 1px 0 rgba(255, 255, 255, 0.55) inset; } html[data-theme="dark"] body.role-super-admin .dash-platform-strip { background: rgba(21, 32, 40, 0.72) !important; border-color: rgba(126, 184, 201, 0.28) !important; } /* Map / analytics / alerts */ body.role-super-admin #map { border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 36px rgba(13, 72, 50, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset; overflow: hidden; } html[data-theme="dark"] body.role-super-admin #map { border: 1px solid var(--glass-rim); } body.role-super-admin .map-toolbar, body.role-super-admin .map-legend-panel { border-radius: 18px; } html[data-theme="dark"] body.role-super-admin .map-toolbar .toolbar-btn, html[data-theme="dark"] body.role-super-admin .map-toolbar button.secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-rim-strong); color: var(--glass-ink); } body.role-super-admin #tab-notifications li, body.role-super-admin .notification-row { border-radius: 16px; background: rgba(255, 255, 255, 0.44); border: 1px solid rgba(255, 255, 255, 0.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-theme="dark"] body.role-super-admin .table-wrap th { color: var(--glass-ink-mute); } html[data-theme="dark"] body.role-super-admin .table-wrap td { color: var(--glass-ink-soft); } html[data-theme="dark"] body.role-super-admin .dash-list li, html[data-theme="dark"] body.role-super-admin .agency-status, html[data-theme="dark"] body.role-super-admin .agency-community { color: var(--glass-ink-soft); } html[data-theme="dark"] body.role-super-admin .agency-token-link { color: var(--glass-mint, #8fd9b0) !important; background: none !important; border: none !important; } html[data-theme="dark"] body.role-super-admin .leaflet-popup-content-wrapper { background: rgba(28, 34, 32, 0.94); border: 1px solid var(--glass-rim); color: var(--glass-ink); backdrop-filter: blur(16px); } /* Desk chips glass on Super Incidents */ body.role-super-admin .agency-desk-chips .officer-chip { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.role-super-admin .agency-desk-chips .officer-chip.active { background: #0d4832; border-color: #0d4832; color: #fff; backdrop-filter: none; } /* Chart cards */ body.role-super-admin .chart-card, body.role-super-admin .analytics-card { border-radius: 22px; } /* Announcements / performance form controls */ body.role-super-admin .inline-form input, body.role-super-admin .inline-form select, body.role-super-admin .inline-form textarea { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(207, 217, 209, 0.9); backdrop-filter: blur(8px); } html[data-theme="dark"] body.role-super-admin .inline-form input, html[data-theme="dark"] body.role-super-admin .inline-form select, html[data-theme="dark"] body.role-super-admin .inline-form textarea { background: rgba(255, 255, 255, 0.06); border-color: var(--glass-rim); color: var(--glass-ink); }