/* Atlas Navigator — Premium Automotive Theme
Inspirerat av: Audi Virtual Cockpit, Tesla UI, Premium Navigation
Design: Cyan & Mint accents, Deep blacks, Soft glows, Luxury feels
-------------------------------------------------------------------- */

:root {
/* Bakgrund */
--bg-image: url("/assets/themes/atlas-navigator/atlas-navigator-bg.jpg");
--bg-color: #0a0e1a;

/* Färger - Deep Premium Blacks med Cyan/Mint accents */
--bg-dark-primary:   #0d1117;
--bg-dark-secondary: #12181f;
--bg-dark-tertiary:  #1a1f2e;
--text-primary:      #e8f1f5;
--text-secondary:    #a0c4d9;
--accent-primary:    #00d4ff;
--theme-accent-primary: #00d4ff;
--accent-hover:      #00ffa3;
--bubble-neutral-bg: var(--bg-dark-tertiary);
--bubble-neutral-border: rgba(255,255,255,0.08);
--border-color:      rgba(0, 212, 255, 0.10);

/* === MAILMALLAR & INKORG – ATLAS NAVIGATOR (cyan/mint) === */
--group-bg:          rgba(0, 212, 255, 0.08);
--group-hover:       rgba(0, 212, 255, 0.18);
--group-text:        #00f2ea;
--group-border:      rgba(0, 212, 255, 0.18);
--group-shadow:      rgba(0, 212, 255, 0.2);
--group-shadow-hover:rgba(0, 212, 255, 0.28);
--item-bg:           rgba(0, 212, 255, 0.1);
--item-hover:        rgba(0, 212, 255, 0.25);
--item-border:       rgba(0, 212, 255, 0.35);
--accent:            #00f2ea;

/* Mailmall-grupper — cyan/mint/teal-nyanser för Atlas Navigator */
--tmpl-am:       #8ed6e8;
--tmpl-bil:      #5ac8e8;
--tmpl-mc:       #00d4ff;
--tmpl-slap:     #7fa8b8;
--tmpl-lastbil:  #4fc8c0;
--tmpl-engelska: #5fd9a8;
--tmpl-ovriga:   #708898;
--tmpl-privata:  #98e0c8;

/* Glassmorfism - Ultra Premium med Glow */
--bg-frosty-sidebar:      rgba(13, 17, 23, 0.92);
--bg-frosty-header:       rgba(13, 17, 23, 0.92);
--bg-frosty-content:      rgba(6, 20, 26, 0.68);
--bg-frosty-bubble-atlas: rgba(8, 24, 32, 0.88);
--bg-frosty-input-area:   rgba(18, 24, 31, 0.75);
--bg-frosty-input-field:  rgba(26, 31, 46, 0.8);
--ticket-history-bg:      rgba(13, 17, 23, 0.92);
--blur-amount: 25px;

/* Glow-token för user-bubblan (Session 3 — glow-harmonisering) */
--bubble-glow-user: 0 4px 20px color-mix(in srgb, var(--accent-primary) 28%, transparent);
--bg-frosty-bubble-user: linear-gradient(135deg, #00d4ff 0%, #00ffa3 100%);
--notif-panel-bg: rgba(13, 17, 23, 0.97);
--live-server-url-color: #00d4ff;
}

/* Bakgrundsfärg alltid fast — bild enbart i Hem och Om */
body {
background: var(--bg-color);
color: var(--text-primary);
}

body:has(#view-chat[style*="flex"] #home-widgets-area[style*="flex"]),
body:has(#view-about[style*="flex"]) {
background: var(--bg-image) center/cover no-repeat fixed;
background-color: var(--bg-color);
}

/* === PREMIUM SIDEBAR STYLING === */
.sidebar {
backdrop-filter: blur(var(--blur-amount)) saturate(150%);
-webkit-backdrop-filter: blur(var(--blur-amount)) saturate(150%);
box-shadow: 2px 0 12px rgba(0, 212, 255, 0.04);
}

/* Tar bort vänster-bordern på listpanelen — den dubblar med sidomenyns
   border-right (style.css) och skapade visuell tjock cyan-rand vid boundaryn.
   Behåller övriga tre sidor så panelens form bevaras. */
.template-list-container {
border-left: 0 !important;
}

.sidebar-logo {
filter: drop-shadow(0 4px 14px rgba(0, 212, 255, 0.20));
transition: filter 0.18s ease;
}

.sidebar-logo:hover {
filter: drop-shadow(0 6px 20px rgba(0, 212, 255, 0.30));
}

/* Menystil hanteras av style.css — inga temaoverrides */

/* === PREMIUM HEADER === */
.chat-header {
backdrop-filter: blur(var(--blur-amount)) saturate(140%);
-webkit-backdrop-filter: blur(var(--blur-amount)) saturate(140%);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(0, 212, 255, 0.2);
}

/* Vyrubrik: lugn, integrerad titel (ingen yttre glöd) — neonkänslan flyttas
   till ikon-brickan i stället så rubriken hör ihop med den frostade ytan. */
.chat-header h2 .header-title-icon {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 2px 10px rgba(0, 212, 255, 0.30),
0 0 18px rgba(0, 255, 163, 0.16);
}
.chat-header h2:hover .header-title-icon {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.26),
0 4px 16px rgba(0, 212, 255, 0.42),
0 0 26px rgba(0, 255, 163, 0.22);
}

/* === PREMIUM MESSAGES === */
.message .bubble {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.message.user .bubble {
background: var(--bg-frosty-bubble-user);
border: 1px solid rgba(0, 255, 163, 0.3);
box-shadow: var(--bubble-glow-user);
}

.message.user .bubble:hover {
box-shadow:
0 4px 20px rgba(0, 212, 255, 0.4),
0 0 30px rgba(0, 255, 163, 0.15);
}

/* === PREMIUM INPUT AREA === */
.chat-input-area {
backdrop-filter: blur(var(--blur-amount)) saturate(140%);
-webkit-backdrop-filter: blur(var(--blur-amount)) saturate(140%);
box-shadow:
0 -4px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(0, 212, 255, 0.15);
}

#chat-form {
background: var(--bg-frosty-input-field);
border: 1px solid rgba(0, 212, 255, 0.2);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.3),
0 0 20px rgba(0, 212, 255, 0.05);
}

#chat-form:focus-within {
border-color: rgba(0, 255, 163, 0.4);
box-shadow:
0 0 26px rgba(0, 212, 255, 0.22),
inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

#send-button {
background: linear-gradient(135deg, #00d4ff 0%, #00ffa3 100%);
box-shadow:
0 4px 16px rgba(0, 212, 255, 0.4),
0 0 30px rgba(0, 255, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#send-button:hover {
background: linear-gradient(135deg, #00ffa3 0%, #00d4ff 100%);
box-shadow:
0 6px 24px rgba(0, 212, 255, 0.6),
0 0 50px rgba(0, 255, 163, 0.4);
}

/* === PREMIUM CONTAINERS === */
.template-editor-container,
.about-container,
.template-list-container {
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.15);
}

/* === PREMIUM GUIDE STEPS === */
.guide-step {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.08) 0%,
rgba(0, 255, 163, 0.05) 100%);
border-left: 3px solid #00d4ff;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(0, 212, 255, 0.1);
}

.guide-step:hover {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.12) 0%,
rgba(0, 255, 163, 0.08) 100%);
box-shadow:
0 6px 24px rgba(0, 212, 255, 0.3),
0 0 40px rgba(0, 255, 163, 0.1);
}

.step-number {
background: linear-gradient(135deg, #00d4ff, #00ffa3);
box-shadow:
0 4px 12px rgba(0, 212, 255, 0.4),
0 0 30px rgba(0, 255, 163, 0.3);
}

/* === PREMIUM SHORTCUTS === */
.shortcut-item {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.05) 0%,
rgba(0, 255, 163, 0.03) 100%);
border-left: 2px solid transparent;
transition: all 0.3s ease;
}

.shortcut-item:hover {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.1) 0%,
rgba(0, 255, 163, 0.06) 100%);
border-left: 2px solid #00d4ff;
box-shadow:
0 4px 16px rgba(0, 212, 255, 0.2),
0 0 30px rgba(0, 255, 163, 0.1);
transform: translateX(4px);
}

.shortcut-item kbd {
background: linear-gradient(180deg, #1a1f2e 0%, #12181f 100%);
border: 1px solid rgba(0, 212, 255, 0.3);
box-shadow:
0 3px 0 rgba(0, 0, 0, 0.5),
0 0 15px rgba(0, 212, 255, 0.2),
inset 0 1px 0 rgba(0, 212, 255, 0.2);
color: #00d4ff;
}

/* === SCROLLBAR === */
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.14) !important;
box-shadow: none !important;
}

.status-lamp-dot.green {
background-color: #00ffa3;
box-shadow: 0 0 10px rgba(0, 255, 163, 0.5);
}

/* tema-override: avviker medvetet från global regel */
.tag-chatt {
background: rgba(0, 255, 157, 0.10) !important;
color: #00c98a !important;
border: 1px solid rgba(0, 255, 157, 0.24);
}

/* tema-override: avviker medvetet från global regel */
.tag-form {
background: rgba(0, 212, 255, 0.10) !important;
color: #6ad8f0 !important;
border: 1px solid rgba(0, 212, 255, 0.24);
}

/* Placeholder surfaces */
#view-inbox.templates-view .template-editor-container,
#view-my-tickets.templates-view .template-editor-container,
#view-templates.templates-view .template-editor-container {
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
border-radius: var(--border-radius-lg) !important;
overflow: hidden !important;
}

#view-inbox .hero-placeholder .hero-subtitle,
#view-my-tickets .hero-placeholder .hero-subtitle,
#view-archive .hero-placeholder .hero-subtitle,
#view-templates .hero-placeholder .hero-subtitle {
color: color-mix(in srgb, var(--text-primary) 82%, var(--accent-primary) 18%) !important;
opacity: 0.88 !important;
}

#view-inbox .hero-placeholder .hero-bg-icon,
#view-my-tickets .hero-placeholder .hero-bg-icon,
#view-archive .hero-placeholder .hero-bg-icon,
#view-templates .hero-placeholder .hero-bg-icon {
opacity: 0.10 !important;
}

#view-inbox .hero-placeholder .hero-fg-icon,
#view-my-tickets .hero-placeholder .hero-fg-icon,
#view-archive .hero-placeholder .hero-fg-icon,
#view-templates .hero-placeholder .hero-fg-icon {
opacity: 1 !important;
}

#view-inbox .hero-placeholder .help-trigger,
#view-my-tickets .hero-placeholder .help-trigger,
#view-archive .hero-placeholder .help-trigger,
#view-templates .hero-placeholder .help-trigger {
background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important;
border-color: color-mix(in srgb, var(--accent-primary) 34%, transparent) !important;
color: color-mix(in srgb, var(--text-primary) 76%, var(--accent-primary) 24%) !important;
}

#view-inbox .filter-input::placeholder,
#view-archive .filter-input::placeholder,
#view-templates #template-search-input::placeholder,
#view-templates #template-title-input::placeholder,
#view-templates #template-subgroup-input::placeholder,
#view-templates .ql-editor.ql-blank::before {
color: color-mix(in srgb, var(--text-primary) 72%, var(--accent-primary) 28%) !important;
opacity: 0.84 !important;
}

/* Dropdown-listor — matchar navigator-temat */
.filter-select option,
#quick-template-select option,
#composer-template-select option,
#cust-mail-template-select option {
background-color: #12181f !important;
color: #e8f1f5 !important;
}

.filter-select option:checked,
#quick-template-select option:checked,
#composer-template-select option:checked,
#cust-mail-template-select option:checked {
background-color: #00d4ff !important;
color: #0a0e1a !important;
}

/* ==================================================
ATLAS TEAM / TAGS PATCH (NAVIGATOR)
================================================== */

.team-ticket-card.taken {
border-left-color: #00d4ff;
background: rgba(0, 212, 255, 0.05);
}
.team-ticket-card.mine {
border-left-color: #00ffa3;
background: linear-gradient(90deg, rgba(0, 255, 163, 0.15) 0%, transparent 100%);
}

/* tema-override: avviker medvetet från global regel */
.ticket-tag.tag-chatt {
background: rgba(0, 255, 163, 0.1);
color: #00ffa3;
border-color: rgba(0, 255, 163, 0.4);
}
/* tema-override: avviker medvetet från global regel */
.ticket-tag.tag-form {
background: rgba(0, 212, 255, 0.10);
color: #6ad8f0;
border-color: rgba(0, 212, 255, 0.24);
}
.ticket-tag.owner {
background: linear-gradient(135deg, #00d4ff, #00ffa3);
color: #081016;
border: none;
}

/* MINI CHAT */
#view-my-tickets .message.agent .bubble {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 163, 0.1));
border: 1px solid rgba(0, 255, 163, 0.3);
}

#view-my-tickets .mini-chat-input input {
background: var(--bg-frosty-input-field);
color: var(--text-primary);
border: 1px solid rgba(0, 212, 255, 0.3);
}

#view-my-tickets .mini-chat-input button {
background: linear-gradient(135deg, #00d4ff 0%, #00ffa3 100%);
color: #081016;
box-shadow: 0 4px 18px rgba(0, 212, 255, 0.45);
}

/* =================================================================
DETALJVY — teal-navy, matchar bakgrundsbildens mörka ton.
Selektorer hämtade från style-admin.css (P-READER-HISTORY-SOLID-BG).
================================================================= */

#inbox-detail-body,
#my-chat-scroll-area,
#archive-detail .detail-body,
#atlas-reader-modal #reader-chat-scroll,
#customer-reader-modal #cust-reader-chat-scroll {
background: var(--ticket-history-bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow:
inset 0 1px 0 rgba(0, 212, 255, 0.06) !important;
}

#inbox-detail .inbox-chat-history,
#archive-detail .inbox-chat-history {
background: transparent !important;
}

/* Sidebar motion normalization */
@media screen and (min-width: 769px) {
.sidebar,
.sidebar:hover {
transform: none !important;
}

.sidebar-logo {
transition: transform 0.18s ease, filter 0.18s ease !important;
}

.sidebar:hover .sidebar-logo,
.sidebar-logo:hover {
transform: none !important;
filter: none !important;
}
}
/* ==========================================================================
   Nordic Dawn-paritet: global search, Quill och notes/historik-modaler.
   ========================================================================== */
#atlas-global-search-overlay {
background: rgba(0, 0, 0, 0.55) !important;
}
#atlas-global-search-modal {
background: var(--bg-dark-primary) !important;
backdrop-filter: blur(var(--blur-amount)) !important;
-webkit-backdrop-filter: blur(var(--blur-amount)) !important;
border: 1px solid var(--border-color) !important;
}
#atlas-global-search-modal > div:first-child {
border-bottom-color: var(--border-color) !important;
}
#atlas-global-search-modal > div:first-child > svg {
stroke: var(--text-secondary) !important;
}
#atlas-global-search-input {
color: var(--text-primary) !important;
background: transparent !important;
}
#atlas-global-search-input::placeholder {
color: var(--text-secondary) !important;
}
#atlas-global-search-modal kbd {
background: var(--bg-dark-secondary) !important;
border-color: var(--border-color) !important;
color: var(--text-secondary) !important;
}
.gs-empty {
color: var(--text-secondary) !important;
}

/* Gör toolbar + stroke/fill i temats text-primär nyans. */
#view-templates .ql-toolbar.ql-snow,
#atlas-mail-composer .ql-toolbar.ql-snow,
.cust-mail-compose-box .ql-toolbar.ql-snow {
background: var(--bg-dark-secondary) !important;
border-color: var(--border-color) !important;
}
#view-templates .ql-toolbar.ql-snow .ql-stroke,
#atlas-mail-composer .ql-toolbar.ql-snow .ql-stroke,
.cust-mail-compose-box .ql-toolbar.ql-snow .ql-stroke,
.composer-quill-wrap .ql-toolbar.ql-snow .ql-stroke {
stroke: var(--text-secondary) !important;
}
#view-templates .ql-toolbar.ql-snow .ql-fill,
#atlas-mail-composer .ql-toolbar.ql-snow .ql-fill,
.cust-mail-compose-box .ql-toolbar.ql-snow .ql-fill,
.composer-quill-wrap .ql-toolbar.ql-snow .ql-fill {
fill: var(--text-secondary) !important;
}
#view-templates .ql-toolbar.ql-snow .ql-picker-label,
#atlas-mail-composer .ql-toolbar.ql-snow .ql-picker-label,
.cust-mail-compose-box .ql-toolbar.ql-snow .ql-picker-label,
.composer-quill-wrap .ql-toolbar.ql-snow .ql-picker-label {
color: var(--text-secondary) !important;
}
#view-templates .ql-container,
#atlas-mail-composer .ql-container,
.cust-mail-compose-box .ql-container {
background: var(--bg-frosty-input-field, var(--bg-dark-tertiary)) !important;
border-color: var(--border-color) !important;
}
#view-templates .ql-editor,
#atlas-mail-composer .ql-editor,
.cust-mail-compose-box .ql-editor {
color: var(--text-primary) !important;
}

#atlas-notes-modal .glass-modal-box,
#atlas-ticket-history-modal .glass-modal-box {
background: var(--bg-dark-primary) !important;
backdrop-filter: blur(var(--blur-amount)) !important;
-webkit-backdrop-filter: blur(var(--blur-amount)) !important;
color: var(--text-primary) !important;
}

/* ==========================================================================
   ROUND 6 — Ikonknappar transparenta (ingen bakgrundslåda)
   Applicerat: 2026-06-07. Se Nordic Dawn Round 6 för referens.
   ========================================================================== */

.btn-glass-icon,
.footer-icon-btn,
.notes-trigger-btn,
.history-trigger-btn,
.card-menu-btn,
.action-btn,
.report-action-btn,
.drift-logo-icon-btn {
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
box-shadow: none !important;
filter: none !important;
}

.btn-glass-icon:hover,
.footer-icon-btn:hover,
.notes-trigger-btn:hover,
.history-trigger-btn:hover,
.card-menu-btn:hover,
.action-btn:hover,
.report-action-btn:hover,
.drift-logo-icon-btn:hover {
background: rgba(255,255,255,0.08) !important;
border: none !important;
color: var(--theme-accent-primary) !important;
}

.priority-trigger-btn,
.priority-trigger-btn:hover {
background: transparent !important;
border: none !important;
filter: none !important;
}

.footer-icon-btn svg,
.btn-glass-icon svg,
.drift-logo-icon-btn svg,
.notes-trigger-btn svg,
.history-trigger-btn svg {
stroke: currentColor !important;
fill: none;
}

.chat-header .header-button,
.list-panel-header .header-button,
.detail-header-top .header-button,
.pane-header .header-button,
#archive-wide-header .header-button,
.header-actions .header-button {
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
box-shadow: none !important;
}

.chat-header .header-button:hover,
.list-panel-header .header-button:hover,
.detail-header-top .header-button:hover,
.pane-header .header-button:hover,
.header-actions .header-button:hover {
background: rgba(255,255,255,0.08) !important;
border: none !important;
color: var(--theme-accent-primary) !important;
}

.chat-header .header-button svg,
.list-panel-header .header-button svg,
.detail-header-top .header-button svg,
.pane-header .header-button svg {
stroke: var(--text-primary) !important;
fill: none !important;
}

.footer-icon-btn.attachment-btn,
.footer-icon-btn[title*="Bifoga"],
.footer-icon-btn[title*="Attach"],
.rephrase-btn,
.ai-assist-btn {
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
}

#atlas-help-overlay .glass-modal-footer a,
#atlas-help-overlay .glass-modal-footer button {
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
}

@media screen and (max-width: 768px) {
.header-actions .header-button,
.chat-header .header-button {
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
}
}


/* ── OM-VY: bakgrundsbild + glasskort ────────────────────────────────── */
#view-about {
box-shadow: inset 0 0 0 2000px rgba(8, 12, 22, 0.82) !important;
}
#view-about .about-cell,
#view-about .glass-effect {
background: rgba(12, 18, 36, 0.88) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-color: rgba(120, 160, 210, 0.14) !important;
}
#view-about .about-shortcut-row,
#view-about .guide-step,
#view-about .setting-item,
#view-about .info-item {
background: rgba(16, 22, 42, 0.80) !important;
border-color: rgba(120, 160, 210, 0.10) !important;
}
#view-about .about-shortcut-label,
#view-about .about-platform-note,
#view-about .info-item,
#view-about .info-item span { color: var(--text-secondary) !important; }
#view-about .step-content strong,
#view-about .about-cell-title { color: var(--accent-primary) !important; }
#view-about .about-stat-card--priority { background: rgba(255,59,48,0.09) !important; border-color: rgba(255,59,48,0.32) !important; }
#view-about .about-stat-card--priority strong { color: #ff5f52 !important; }

/* ==========================================================================
   ATLAS NAVIGATOR — Admin contrast audit (2026-06-30, dark thread)
   Scope: dark-theme admin surfaces and the three admin marker types.
   ========================================================================== */
#view-admin {
--admin-dark-audit-surface: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--theme-accent-primary) 6%);
--admin-dark-audit-surface-strong: color-mix(in srgb, var(--bg-dark-tertiary) 84%, var(--theme-accent-primary) 8%);
--admin-dark-audit-border: color-mix(in srgb, var(--border-color) 70%, var(--theme-accent-primary) 24%);
--admin-dark-audit-muted: color-mix(in srgb, var(--text-secondary) 84%, var(--text-primary) 16%);
}

#view-admin .glass-panel,
#view-admin .admin-detail-card,
#view-admin .admin-list-card,
#view-admin .admin-mini-card,
#view-admin .office-card,
#view-admin .service-card,
#view-admin .campaign-summary-card,
#view-admin .catalog-list-card,
#view-admin .catalog-help-card,
#view-admin .catalog-guide-card,
#view-admin .catalog-feature-card,
#view-admin .admin-config-row,
#view-admin .kb-guide-hero,
#view-admin .kb-guide-card,
#view-admin .kb-guide-summary,
#view-admin .kb-guide-flow > div,
#view-admin .qq-topbar,
#view-admin .qq-test-panel,
#view-admin .qq-row,
#view-admin .ki-panel,
#view-admin .ki-guide-panel,
#view-admin .ki-guide-box,
#view-admin .ki-guide-column,
#view-admin .ki-guide-grid > div,
#view-admin .ki-guide-example,
#view-admin .ki-step {
background: var(--admin-dark-audit-surface) !important;
border-color: var(--admin-dark-audit-border) !important;
color: var(--text-primary) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

#view-admin .qq-row:nth-child(even),
#view-admin .ki-guide-example,
#view-admin .ki-guide-column,
#view-admin .ki-guide-grid > div {
background: var(--admin-dark-audit-surface-strong) !important;
}

#view-admin .qq-add-input,
#view-admin .qq-test-panel textarea,
#view-admin .qq-test-result,
#view-admin .qq-empty,
#view-admin .qq-count-btn,
#view-admin .qq-test-row-btn,
#view-admin .qq-row-action,
#view-admin .ki-category-select,
#view-admin .ki-raw-text,
#view-admin .admin-config-field,
#view-admin input,
#view-admin textarea,
#view-admin select {
background: var(--admin-dark-audit-surface-strong) !important;
border-color: var(--admin-dark-audit-border) !important;
color: var(--text-primary) !important;
}

#view-admin .qq-title-block p,
#view-admin .qq-count-badge,
#view-admin .qq-loading,
#view-admin .ki-guide-example span,
#view-admin .ki-step:not(.ki-step--active),
#view-admin .ki-panel-header span,
#view-admin .admin-config-row p {
color: var(--admin-dark-audit-muted) !important;
opacity: 1 !important;
}

#view-admin .chat-affects-badge {
background: rgba(52, 199, 89, 0.18) !important;
border-color: rgba(52, 199, 89, 0.52) !important;
color: #7ee787 !important;
}

#view-admin .expert-setting-badge {
background: rgba(255, 107, 107, 0.16) !important;
border-color: rgba(255, 107, 107, 0.50) !important;
color: #ff8f8f !important;
}

#view-admin .header-tab .chat-affects-badge {
background: transparent !important;
border-color: transparent !important;
color: #7ee787 !important;
}

#view-admin .tenant-required-row {
background: rgba(245, 158, 11, 0.10) !important;
border-left-color: rgba(245, 158, 11, 0.88) !important;
box-shadow: inset 1px 0 0 rgba(245, 158, 11, 0.24) !important;
}

/* Web login theme identity */
.ln-card {
background: linear-gradient(160deg, var(--bg-dark-primary) 0%, var(--bg-dark-secondary) 58%, var(--bg-dark-primary) 100%) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
border-top: 3px solid var(--accent-primary) !important;
box-shadow:
0 28px 78px rgba(0,0,0,0.52),
0 0 0 1px color-mix(in srgb, var(--accent-primary) 8%, transparent),
inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.ln-card-glow {
display: block !important;
animation: none !important;
background: radial-gradient(circle, color-mix(in srgb, var(--accent-primary) 12%, transparent) 0%, transparent 68%) !important;
}

.ln-ring-pulse {
display: block !important;
animation: lnRingPulse 2.8s ease-in-out infinite !important;
border-color: color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
box-shadow:
0 0 24px color-mix(in srgb, var(--accent-primary) 10%, transparent),
inset 0 0 18px color-mix(in srgb, var(--accent-primary) 6%, transparent) !important;
}

.ln-ring-pulse.ln-delay {
border-color: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}

.ln-ring-spin {
display: block !important;
animation: lnSpin 1.8s linear infinite !important;
border-top-color: var(--accent-primary) !important;
border-right-color: color-mix(in srgb, var(--accent-primary) 26%, transparent) !important;
filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent-primary) 28%, transparent)) !important;
}

.ln-logo-circle.has-tenant-logo {
border-color: color-mix(in srgb, var(--accent-primary) 34%, transparent) !important;
box-shadow:
0 18px 38px rgba(0,0,0,0.36),
0 0 0 1px color-mix(in srgb, var(--accent-primary) 14%, transparent),
0 0 24px color-mix(in srgb, var(--accent-primary) 13%, transparent) !important;
}