/* ══════════════════════════════════════════════════════════
   mg-dark.css — Mäklargruvan shared dark mode
   Aktiveras via body[data-theme="dark"].
   Länkas EFTER mg-tokens.css / mg-brand.css i alla sidor.
   ══════════════════════════════════════════════════════════ */

/* ── 1. Variable overrides ── */
body[data-theme="dark"] {
  --mg-surface: var(--mg-dark-surface);
  --mg-surface-soft: var(--mg-dark-surface-2);
  --mg-surface-stat: var(--mg-dark-surface-3);
  --mg-panel: rgba(21,34,51,.90);
  --mg-info-soft: var(--mg-dark-bg);
  --mg-ink: var(--mg-dark-ink);
  --mg-ink-2: var(--mg-dark-cool);
  --mg-ink-soft: var(--mg-dark-ink-soft);
  --mg-ink-soft-alt: var(--mg-dark-ink-soft);
  --mg-ink-faint: var(--mg-dark-ink-faint);
  --mg-line: var(--mg-dark-line);
  --mg-line-alt: var(--mg-dark-line);
  --mg-line-warm: var(--mg-dark-line-warm);
  --mg-shadow: var(--mg-dark-shadow);
  --mg-shadow-soft: var(--mg-dark-shadow-soft);
  --mg-gold-light: var(--mg-dark-gold-light);
  --mg-gold-dark: var(--mg-dark-gold-dark);
  --mg-gold-2: var(--mg-dark-gold-2);
  --mg-gold-soft: var(--mg-dark-gold-soft);
  --mg-gold-shine: var(--mg-dark-gold-shine);

  --p: var(--mg-dark-ink);
  --a: var(--mg-dark-cool);
  --l: var(--mg-dark-bg);
  --g: var(--mg-dark-gold);
  --g-light: var(--mg-dark-gold-light);
  --g-dark: var(--mg-dark-gold-dark);
  --g2: var(--mg-dark-gold-2);
  --g-shine: var(--mg-dark-gold-shine);
  --gold: var(--mg-dark-gold);
  --gold-2: var(--mg-dark-gold-2);
  --gold-soft: var(--mg-dark-gold-soft);
  --gold-shine: var(--mg-dark-gold-shine);

  --ink: var(--mg-dark-ink);
  --ink-2: var(--mg-dark-cool);
  --muted: var(--mg-dark-ink-soft);
  --soft: var(--mg-dark-ink-faint);
  --text: var(--mg-dark-ink);
  --text-soft: var(--mg-dark-ink-soft);
  --text-muted: var(--mg-dark-ink-faint);

  --cream: var(--mg-dark-bg);
  --paper: var(--mg-dark-bg);
  --surface: var(--mg-dark-surface);
  --panel: rgba(21,34,51,.90);
  --card-bg: var(--mg-dark-surface);
  --card-soft: var(--mg-dark-surface-2);
  --card-stat: var(--mg-dark-surface-3);

  --line: var(--mg-dark-line);
  --line-warm: var(--mg-dark-line-warm);
  --shadow: var(--mg-dark-shadow);
  --shadow-soft: var(--mg-dark-shadow-soft);

  --mg-accent-active: var(--mg-dark-gold);
  --mg-active-fill: linear-gradient(135deg, rgba(201,154,95,.16), rgba(201,154,95,.06));
  --mg-active-ring: rgba(201,154,95,.16);
  color-scheme: dark!important;
}

/* ── 2. Page & header ── */
body[data-theme="dark"] {
  background: linear-gradient(180deg, var(--mg-dark-bg), #0c1420)!important;
  color: var(--text)!important;
}
    body[data-theme="dark"] {
      background:
        radial-gradient(circle at 12% 10%, rgba(201, 154, 95, .13), transparent 34rem),
        radial-gradient(circle at 88% 2%, rgba(255, 255, 255, .05), transparent 28rem),
        linear-gradient(180deg, var(--mg-dark-bg) 0%, #0c1420 100%);
    }
body[data-theme="dark"] header {
  background: rgba(16, 25, 37, .92) !important;
  backdrop-filter: blur(12px)!important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── 3. Nav pills (shared .h-btn pattern) ── */
body[data-theme="dark"] .h-btn {
  background: rgba(21,34,51,.60)!important;
  border-color: rgba(255,255,255,.08)!important;
  color: var(--text)!important;
}
body[data-theme="dark"] .h-btn:hover {
  background: rgba(21,34,51,.80)!important;
  border-color: rgba(201,154,95,.35)!important;
}
body[data-theme="dark"] .h-btn.active {
  background: rgba(21,34,51,.90)!important;
  border-color: rgba(255,255,255,.10)!important;
}
body[data-theme="dark"] .h-name,
body[data-theme="dark"] .h-sub,
body[data-theme="dark"] .h-subtitle {
  color: var(--text-soft)!important;
  border-color: rgba(255,255,255,.10)!important;
}

/* ── 4. Wordmark ── */
body[data-theme="dark"] .mg-wordmark {
  color: var(--text)!important;
}
body[data-theme="dark"] .mg-wordmark em {
  background: var(--g-shine)!important;
  -webkit-background-clip: text!important;
  background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
  color: var(--g)!important;
}

/* ── 5. Brand hexagon ── */
body[data-theme="dark"] .mg-hex polygon:first-child,
body[data-theme="dark"] .mg-hex polygon:nth-child(2) {
  stroke: var(--text)!important;
}

/* ── 6. Pilot badge ── */
body[data-theme="dark"] .badge-pilot {
  box-shadow: 0 10px 20px rgba(0,0,0,.30)!important;
}

/* ── 7. Inputs, textareas, selects ── */
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
  background: rgba(21,34,51,.80) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.12) !important;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: var(--mg-dark-ink-faint)!important;
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus {
  border-color: rgba(201,154,95,.45) !important;
  box-shadow: 0 0 0 3px rgba(201,154,95,.12)!important;
  outline: none!important;
}

/* ── 8. Panels, cards, sections ── */
body[data-theme="dark"] .panel,
body[data-theme="dark"] .left-scroll,
body[data-theme="dark"] .preview-panel,
body[data-theme="dark"] .preview-body {
  background: var(--mg-dark-surface)!important;
}

body[data-theme="dark"] .acc,
body[data-theme="dark"] .acc-head {
  background: rgba(21,34,51,.60)!important;
  border-color: rgba(255,255,255,.08)!important;
}
body[data-theme="dark"] .acc-head:hover {
  background: rgba(21,34,51,.80)!important;
}

/* ── 9. Buttons ── */
/* Navy-fyllda knappar i dark: navy-PANEL (ej guldfylld) — matchar pilots .btn-p.
   Guldram behålls som accent (samma som .btn-p i dark). */
body[data-theme="dark"] .btn-navy,
body[data-theme="dark"] button[style*="background:var(--p)"],
body[data-theme="dark"] button[style*="background:var(--mg-navy)"],
body[data-theme="dark"] button[style*="background:#0d263f"] {
  background: rgba(21,34,51,.85) !important;
  color: var(--text) !important;
  border-color: rgba(201,154,95,.40) !important;
}

/* Hjälp-cirklar (?): navy-struktur i dark (matchar ljus-beslut).
   Ram = cream (var(--text)), fylls navy-panel vid hover. */
body[data-theme="dark"] .ph-help,
body[data-theme="dark"] .acc-help {
  background: rgba(255,255,255,.04)!important;
  border-color: rgba(243,239,232,.45)!important;
  color: var(--text)!important;
}
body[data-theme="dark"] .ph-help:hover,
body[data-theme="dark"] .acc-help:hover {
  background: rgba(21,34,51,.90)!important;
  border-color: rgba(243,239,232,.70)!important;
  color: var(--text)!important;
}

/* ── 10. Scrollbars ── */
body[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15)!important;
}
body[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent!important;
}
body[data-theme="dark"] {
  scrollbar-color: rgba(255,255,255,.15) transparent!important;
}

/* ── 11. Modals / overlays ── */
body[data-theme="dark"] .modal-overlay,
body[data-theme="dark"] .overlay {
  background: rgba(0,0,0,.60)!important;
}
body[data-theme="dark"] .modal,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .coming-modal {
  background: var(--mg-dark-surface)!important;
  border-color: rgba(255,255,255,.10)!important;
  color: var(--text)!important;
}

/* ── 12. Toast ── */
body[data-theme="dark"] .toast {
  background: var(--g) !important;
  color: var(--mg-navy) !important;
}

/* ── 13. Settings drawer ── */
body[data-theme="dark"] .settings-panel,
body[data-theme="dark"] .mg-settings-panel {
  background: var(--mg-dark-surface)!important;
  border-color: rgba(255,255,255,.10)!important;
}

/* ── 14. Labels & eyebrows ── */
body[data-theme="dark"] .eyebrow,
body[data-theme="dark"] .section-label,
body[data-theme="dark"] label {
  color: var(--text-soft)!important;
}

/* ── 15. Preview areas (keep neutral bg for content readability) ── */
body[data-theme="dark"] .mag-hero,
body[data-theme="dark"] .mag-thumbs img,
body[data-theme="dark"] .mag-card {
  border-color: rgba(255,255,255,.08)!important;
}

/* ── 16. Misc shared elements ── */
body[data-theme="dark"] hr {
  border-color: rgba(255,255,255,.08)!important;
}

body[data-theme="dark"] .badge {
  border-color: var(--g)!important;
  color: var(--g)!important;
}

body[data-theme="dark"] code,
body[data-theme="dark"] pre {
  background: rgba(21,34,51,.80)!important;
  color: var(--mg-dark-gold-light)!important;
}

/* Mobile menu */
body[data-theme="dark"] .h-menu-panel {
  background: var(--mg-dark-surface)!important;
}
body[data-theme="dark"] .h-menu-overlay {
  background: rgba(0,0,0,.60)!important;
}
body[data-theme="dark"] .h-menu-list a:hover,
body[data-theme="dark"] .h-menu-list a.active {
  background: rgba(201,154,95,.10)!important;
}

/* ── 17. App grid layout elements ── */
body[data-theme="dark"] .app {
  background: var(--mg-dark-bg)!important;
}

body[data-theme="dark"] .app-titlebar {
  background: rgba(16,25,37,.95) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── 18. Sociala medier specifics ── */
body[data-theme="dark"] .cw-step-dot.current,
body[data-theme="dark"] .cw-step-dot.done {
  background: linear-gradient(135deg, var(--mg-dark-gold-light), var(--mg-dark-gold-dark)) !important;
}
body[data-theme="dark"] .cw-step-line.done {
  background: var(--g)!important;
}

/* ── 19. Note/info panels ── */
body[data-theme="dark"] .ifs-header,
body[data-theme="dark"] .aichat-header {
  background: rgba(201,154,95,.85)!important;
  color: var(--mg-navy)!important;
}

/* ── 20. Dropdown menus ── */
body[data-theme="dark"] .dropdown,
body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .context-menu {
  background: var(--mg-dark-surface-2)!important;
  border-color: rgba(255,255,255,.10)!important;
}

/* ── 21. Theme toggle button ── */
.theme-toggle{
  background:rgba(255,255,255,.95);border:1px solid rgba(13,38,63,.11);
  border-radius:50%;width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;transition:all .18s;padding:0;
}
.theme-toggle:hover{transform:translateY(-1px);border-color:rgba(184,117,57,.40)}
.theme-toggle svg{width:18px;height:18px;color:var(--mg-navy);transition:color .18s}
.theme-toggle .sun-icon{display:none}
.theme-toggle .moon-icon{display:block}

body[data-theme="dark"] .theme-toggle{
  background:rgba(21,34,51,.60)!important;border-color:rgba(255,255,255,.10)!important;
}
body[data-theme="dark"] .theme-toggle:hover{border-color:rgba(201,154,95,.40)}
body[data-theme="dark"] .theme-toggle svg{color:var(--mg-dark-ink)}
body[data-theme="dark"] .theme-toggle .sun-icon{display:block}
body[data-theme="dark"] .theme-toggle .moon-icon{display:none}

/* 22. Feedback panel */
body[data-theme="dark"] #feedbackPanel {
  background: #fff;
  color: var(--mg-ink);
  border: 0;
}

body[data-theme="dark"] #feedbackPanel select,
body[data-theme="dark"] #feedbackPanel textarea {
  background: #fff;
  color: var(--mg-ink);
  border-color: var(--mg-line);
}

body[data-theme="dark"] .fb-label {
  color: var(--mg-ink-soft-alt);
}

/* Index dark-mode overrides moved from mg-brand */
    body[data-theme="dark"] {
      --ink: #f3efe8;
      --ink-2: #ddd4c7;
      --muted: #b7ad9f;
      --soft: #8f8578;
      --cream: #101925;
      --paper: #152233;
      --panel: rgba(21, 34, 51, .90);
      --line: rgba(255, 255, 255, .13);
      --line-warm: rgba(201, 154, 95, .30);
      --shadow: 0 22px 60px rgba(0, 0, 0, .34);
      --shadow-soft: 0 12px 34px rgba(0, 0, 0, .22);
    }

    body[data-theme="dark"] {
      background:
        radial-gradient(circle at 12% 10%, rgba(201, 154, 95, .13), transparent 34rem),
        radial-gradient(circle at 88% 2%, rgba(255, 255, 255, .05), transparent 28rem),
        linear-gradient(180deg, #101925 0%, #0c1420 100%);
    }

    body[data-theme="dark"] .topbar,
    body[data-theme="dark"] .mobile-menu,
    body[data-theme="dark"] .settings-header {
      background: rgba(16, 25, 37, .90);
    }

    body[data-theme="dark"] .nav-link.active,
    body[data-theme="dark"] .nav-link:hover,
    body[data-theme="dark"] .utility-link,
    body[data-theme="dark"] .utility-link:hover,
    body[data-theme="dark"] .menu-button,
    body[data-theme="dark"] .menu-button:hover,
    body[data-theme="dark"] .icon-button,
    body[data-theme="dark"] .icon-button:hover,
    body[data-theme="dark"] .tool-card,
    body[data-theme="dark"] .property-row,
    body[data-theme="dark"] .property-main,
    body[data-theme="dark"] .object-menu summary,
    body[data-theme="dark"] .object-menu-links,
    body[data-theme="dark"] .delete-modal,
    body[data-theme="dark"] .activity-card,
    body[data-theme="dark"] .coming-grid,
    body[data-theme="dark"] .support-item,
    body[data-theme="dark"] .logo-card,
    body[data-theme="dark"] .field input,
    body[data-theme="dark"] .field textarea,
    body[data-theme="dark"] .search-field,
    body[data-theme="dark"] .filter-btn,
    body[data-theme="dark"] .sort-field,
    body[data-theme="dark"] .sort-options,
    body[data-theme="dark"] .sort-options button,
    body[data-theme="dark"] .secondary-button,
    body[data-theme="dark"] .small-button,
    body[data-theme="dark"] .color-field,
    body[data-theme="dark"] .settings-close,
    body[data-theme="dark"] .workflow-note,
    body[data-theme="dark"] .side-tool-link,
    body[data-theme="dark"] .app-menu,
    body[data-theme="dark"] .settings-page .settings-section {
      background: rgba(21, 34, 51, .86);
      color: var(--ink);
    }

    body[data-theme="dark"] .menu-version,
    body[data-theme="dark"] .app-menu-head,
    body[data-theme="dark"] .app-menu-close,
    body[data-theme="dark"] .settings-page .settings-header {
      background: rgba(21, 34, 51, .92);
      border-color: var(--line);
    }

    body[data-theme="dark"] .tool-card {
      background: linear-gradient(180deg, rgba(21, 34, 51, .96), rgba(17, 28, 42, .92));
    }

    body[data-theme="dark"] .settings-note,
    body[data-theme="dark"] .soon {
      background: rgba(201, 154, 95, .12);
    }

    body[data-theme="dark"] .theme-option {
      background: rgba(255, 255, 255, .05);
    }

    body[data-theme="dark"] .theme-option.active {
      background: rgba(201, 154, 95, .16);
      border-color: rgba(201, 154, 95, .60);
    }

    body[data-theme="dark"] .logo-preview {
      background: rgba(255, 255, 255, .04);
    }

/* Type-card dark-mode overrides */
body[data-theme="dark"] .type-card { background: rgba(255,255,255,.05); }
body[data-theme="dark"] .type-card.active {
  border-color: rgba(201,154,95,.5);
  background: linear-gradient(135deg, rgba(201,154,95,.16), rgba(201,154,95,.06));
  box-shadow: inset 3px 0 0 var(--mg-dark-gold), 0 0 0 2px rgba(201,154,95,.10);
}
body[data-theme="dark"] .type-card.active::after { background: var(--mg-dark-gold); }

/* App menu dark-mode refinements */
body[data-theme="dark"] .app-menu-caption,
body[data-theme="dark"] .app-menu-link-text span {
  color: var(--muted);
}

body[data-theme="dark"] .app-menu-link.active,
body[data-theme="dark"] .app-menu-link:hover {
  background: rgba(255, 255, 255, .05);
  border-color: var(--line-warm);
}

body[data-theme="dark"] .app-menu-icon {
  background: rgba(255, 255, 255, .05);
  border-color: var(--line);
  color: var(--gold);
}

body[data-theme="dark"] .app-menu-status,
body[data-theme="dark"] .app-menu-link.active::before,
body[data-theme="dark"] .menu-theme-options .theme-option.active {
  background: var(--mg-dark-gold);
  color: var(--mg-dark-bg);
}

/* Index property list readability in dark mode. */
body[data-theme="dark"] .property-list {
  background: #101925;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .30);
  scrollbar-color: rgba(201, 154, 95, .45) transparent;
}

body[data-theme="dark"] .property-list::-webkit-scrollbar-thumb {
  background: rgba(201, 154, 95, .38);
  border-color: #101925;
}

body[data-theme="dark"] .property-list::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 154, 95, .55);
}

body[data-theme="dark"] .property-table-head {
  background: #101925;
  border-bottom-color: rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10), 0 10px 18px rgba(0, 0, 0, .18);
  color: rgba(243, 239, 232, .72);
}

body[data-theme="dark"] .property-table-head::before {
  background: #101925;
}

body[data-theme="dark"] .property-row {
  background: #152233;
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .property-row + .property-row {
  border-top-color: rgba(255, 255, 255, .10);
}

body[data-theme="dark"] .property-main {
  background: transparent;
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .property-row h2,
body[data-theme="dark"] .property-row.open h2 {
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .property-meta,
body[data-theme="dark"] .property-type,
body[data-theme="dark"] .property-status,
body[data-theme="dark"] .property-city-row {
  color: var(--mg-dark-ink-soft);
}

body[data-theme="dark"] .property-row.open,
body[data-theme="dark"] .property-row.menu-active {
  background: #1c2d43;
}

body[data-theme="dark"] .property-row.open {
  box-shadow: inset 3px 0 0 var(--mg-dark-gold);
}

body[data-theme="dark"] .history-badge {
  background: rgba(201, 154, 95, .16);
  color: var(--mg-dark-gold-light);
}

body[data-theme="dark"] .object-menu summary {
  background: #0d263f;
  border-color: rgba(201, 154, 95, .55);
  color: #fff;
}

body[data-theme="dark"] .object-menu-links {
  background: #152233;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .36);
}

body[data-theme="dark"] .object-menu-links a {
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .object-menu-links a svg {
  color: var(--mg-dark-gold);
}

body[data-theme="dark"] .object-menu-links a + a {
  border-top-color: rgba(255, 255, 255, .10);
}

body[data-theme="dark"] .object-menu-links a:hover {
  background: rgba(255, 255, 255, .08);
}

body[data-theme="dark"] .module-item {
  border-bottom-color: rgba(255, 255, 255, .10);
}

body[data-theme="dark"] .module-title-link,
body[data-theme="dark"] .module-item-title,
body[data-theme="dark"] .module-menu a,
body[data-theme="dark"] .module-menu button {
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .module-item small {
  color: var(--mg-dark-ink-soft);
}

/* Index toolbar and tool cards in dark mode. */
body[data-theme="dark"] .import-object-button {
  background: #152233;
  border-color: rgba(201, 154, 95, .42);
  color: var(--mg-dark-ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

body[data-theme="dark"] .import-object-button svg {
  color: var(--mg-dark-gold-light);
}

body[data-theme="dark"] .import-object-button:hover {
  background: #1c2d43;
  border-color: rgba(201, 154, 95, .64);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

body[data-theme="dark"] .side-tool-link {
  background: #152233;
  border-color: rgba(255, 255, 255, .14);
  color: var(--mg-dark-ink);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

body[data-theme="dark"] .side-tool-link::before {
  background: linear-gradient(90deg, rgba(201, 154, 95, .92), rgba(201, 154, 95, .10) 76%);
  opacity: 1;
}

body[data-theme="dark"] .side-tool-link:hover {
  background: #1c2d43;
  border-color: rgba(201, 154, 95, .42);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

body[data-theme="dark"] .side-tool-icon {
  background: rgba(201, 154, 95, .12);
  border-color: rgba(201, 154, 95, .38);
  color: var(--mg-dark-gold-light);
  box-shadow: none;
}

body[data-theme="dark"] .side-tool-icon svg,
body[data-theme="dark"] .side-tool-link > svg {
  color: var(--mg-dark-gold-light);
}

body[data-theme="dark"] .side-tool-link strong {
  color: var(--mg-dark-ink);
}

body[data-theme="dark"] .side-tool-link span span {
  color: var(--mg-dark-ink-soft);
}


/* Shared header and right menu readability in dark mode. */
body[data-theme="dark"] .topbar,
body[data-theme="dark"] #mg-header.topbar {
  background: #101925 !important;
  border-bottom-color: rgba(255, 255, 255, .14) !important;
}

body[data-theme="dark"] .brand-mark,
body[data-theme="dark"] .brand-text {
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .nav-link,
body[data-theme="dark"] .utility-link,
body[data-theme="dark"] .menu-button,
body[data-theme="dark"] .icon-button {
  background: #152233 !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: var(--mg-dark-ink) !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .nav-link:hover,
body[data-theme="dark"] .utility-link:hover,
body[data-theme="dark"] .menu-button:hover,
body[data-theme="dark"] .icon-button:hover,
body[data-theme="dark"] .nav-link.active {
  background: #1c2d43 !important;
  border-color: rgba(201, 154, 95, .55) !important;
  color: #fff !important;
}

body[data-theme="dark"] .nav-link.active::after {
  background: var(--mg-dark-gold) !important;
}

/* Tillägg-zon i mörkt läge — koppar-ram/bakgrund mörkanpassad, text/lås i ink. */
body[data-theme="dark"] .nav-link.addon {
  background: rgba(201, 154, 95, .14) !important;
  border-color: rgba(201, 154, 95, .34) !important;
}

body[data-theme="dark"] .nav-link.addon:hover {
  background: rgba(201, 154, 95, .22) !important;
  border-color: rgba(201, 154, 95, .52) !important;
}

body[data-theme="dark"] .addon-group {
  border-color: rgba(201, 154, 95, .34);
  background: linear-gradient(0deg, rgba(201, 154, 95, .14), transparent);
}

body[data-theme="dark"].menu-open::before {
  background: rgba(5, 10, 16, .62) !important;
  backdrop-filter: blur(4px) !important;
}

body[data-theme="dark"] .app-menu {
  background: #152233 !important;
  border-left-color: rgba(255, 255, 255, .16) !important;
  color: var(--mg-dark-ink) !important;
  box-shadow: -28px 0 80px rgba(0, 0, 0, .5) !important;
}

body[data-theme="dark"] .app-menu-head,
body[data-theme="dark"] .app-menu-bottom,
body[data-theme="dark"] .app-menu-close {
  background: #152233 !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

body[data-theme="dark"] .app-menu-title,
body[data-theme="dark"] .app-menu-heading,
body[data-theme="dark"] .app-menu-link-text strong,
body[data-theme="dark"] .app-menu-close {
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .app-menu-caption,
body[data-theme="dark"] .app-menu-link-text span,
body[data-theme="dark"] .menu-version {
  color: var(--mg-dark-ink-soft) !important;
}

body[data-theme="dark"] .app-menu-link {
  color: var(--mg-dark-ink) !important;
  border-color: transparent !important;
}

body[data-theme="dark"] .app-menu-link.active,
body[data-theme="dark"] .app-menu-link:hover {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(201, 154, 95, .34) !important;
}

body[data-theme="dark"] .app-menu-icon {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: var(--mg-dark-gold) !important;
}

body[data-theme="dark"] .app-menu .theme-option {
  background: #1c2d43 !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .app-menu .theme-option strong {
  color: var(--mg-dark-ink) !important;
}

body[data-theme="dark"] .app-menu .theme-option span span {
  color: var(--mg-dark-ink-soft) !important;
}

body[data-theme="dark"] .app-menu .theme-option.active {
  background: #0d263f !important;
  border-color: rgba(201, 154, 95, .72) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(201, 154, 95, .16) !important;
}

body[data-theme="dark"] .app-menu .theme-option.active strong,
body[data-theme="dark"] .app-menu .theme-option.active span,
body[data-theme="dark"] .app-menu .theme-option.active span span {
  color: #fff !important;
}