/* ═══════════════════════════════════════════
   SHARED THEME SYSTEM
   4 themes: sepia, silver, midnight, slate
   Used by all themed pages (Quran, Qibla, etc.)
   ═══════════════════════════════════════════ */

/* ─── Sepia (light, warm) ─── */
[data-theme="sepia"] {
    /* Shared component variables (--t-*) */
    --t-bg:           #f4ecd8;
    --t-panel:        #efe6d0;
    --t-card:         #ebe3cf;
    --t-text:         #433422;
    --t-text-secondary: #8c7355;
    --t-text-dim:     rgba(67, 52, 34, 0.4);
    --t-text-dimmer:  rgba(67, 52, 34, 0.28);
    --t-accent:       #8c7355;
    --t-accent-rgb:   140, 115, 85;
    --t-border:       rgba(67, 52, 34, 0.12);
    --t-input-bg:     rgba(0, 0, 0, 0.05);
    --t-hover:        rgba(0, 0, 0, 0.05);
    --t-scroll:       rgba(140, 115, 85, 0.25);
    --t-shadow:       0 12px 48px rgba(0, 0, 0, 0.14);

    /* Quran-page aliases (--q-*) */
    --q-bg:               var(--t-bg);
    --q-card:             var(--t-card);
    --q-sidebar-bg:       var(--t-panel);
    --q-text:             var(--t-text);
    --q-text-secondary:   var(--t-text-secondary);
    --q-accent:           var(--t-accent);
    --q-accent-rgb:       var(--t-accent-rgb);
    --q-border:           #d6ccb1;
    --q-input-bg:         var(--t-input-bg);
    --q-hover:            rgba(0, 0, 0, 0.04);
    --q-scroll-thumb:     rgba(140, 115, 85, 0.3);
    --q-highlight-bg:     rgba(140, 115, 85, 0.08);
    --q-highlight-border: rgba(140, 115, 85, 0.18);
    --q-highlight-shadow: 0 0 40px rgba(140, 115, 85, 0.05);
    --q-player-bg:        var(--t-card);
    --q-progress-bg:      rgba(0, 0, 0, 0.08);

    /* Qibla-page aliases (--qb-*) */
    --qb-bg:          var(--t-bg);
    --qb-panel:       var(--t-panel);
    --qb-card:        var(--t-card);
    --qb-text:        var(--t-text);
    --qb-text-dim:    var(--t-text-dim);
    --qb-text-dimmer: var(--t-text-dimmer);
    --qb-accent:      var(--t-accent);
    --qb-accent-rgb:  var(--t-accent-rgb);
    --qb-border:      var(--t-border);
    --qb-input-bg:    var(--t-input-bg);
    --qb-hover:       var(--t-hover);
    --qb-shadow:      var(--t-shadow);
    --qb-scroll:      var(--t-scroll);
    --qb-panel-glass: rgba(244, 236, 216, 0.94);

    /* Calendar-page aliases (--cal-*) */
    --cal-bg:             var(--t-bg);
    --cal-card:           #efe6d0;
    --cal-card-border:    rgba(67, 52, 34, 0.10);
    --cal-card-shadow:    0 10px 40px -10px rgba(67, 52, 34, 0.08);
    --cal-text:           var(--t-text);
    --cal-text-secondary: var(--t-text-secondary);
    --cal-text-dim:       var(--t-text-dim);
    --cal-accent:         #8c7355;
    --cal-accent-rgb:     140, 115, 85;
    --cal-nav-bg:         #efe6d0;
    --cal-nav-border:     rgba(67, 52, 34, 0.10);
    --cal-hover:          rgba(0, 0, 0, 0.05);
    --cal-toggle-bg:      var(--t-text);
    --cal-day-hover:      rgba(0, 0, 0, 0.04);
    --cal-today:          #8c7355;
    --cal-today-glow:     rgba(140, 115, 85, 0.25);
    --cal-today-ring:     rgba(140, 115, 85, 0.15);
    --cal-today-sub:      #8c7355;
    --cal-holiday-bg:     rgba(234, 88, 12, 0.08);
    --cal-holiday-text:   #c2410c;
    --cal-holiday-hover:  rgba(234, 88, 12, 0.14);
    --cal-tooltip-bg:     #efe6d0;
    --cal-tooltip-border: rgba(67, 52, 34, 0.10);
    --cal-modal-bg:       rgba(67, 52, 34, 0.92);
    --cal-modal-text:     #f4ecd8;
    --cal-modal-dim:      rgba(244, 236, 216, 0.5);
    --cal-modal-hover:    rgba(244, 236, 216, 0.08);
    --cal-modal-selected: rgba(244, 236, 216, 0.14);
    --cal-modal-divider:  rgba(244, 236, 216, 0.08);
    --cal-modal-btn-bg:   rgba(140, 115, 85, 0.3);
    --cal-modal-btn-hover:#8c7355;
}

/* ─── Silver (light, cool) ─── */
[data-theme="silver"] {
    --t-bg:           #f8fafc;
    --t-panel:        #f1f5f9;
    --t-card:         #e2e8f0;
    --t-text:         #1e293b;
    --t-text-secondary: #64748b;
    --t-text-dim:     rgba(30, 41, 59, 0.38);
    --t-text-dimmer:  rgba(30, 41, 59, 0.22);
    --t-accent:       #475569;
    --t-accent-rgb:   71, 85, 105;
    --t-border:       rgba(30, 41, 59, 0.10);
    --t-input-bg:     rgba(0, 0, 0, 0.04);
    --t-hover:        rgba(0, 0, 0, 0.04);
    --t-scroll:       rgba(71, 85, 105, 0.2);
    --t-shadow:       0 12px 48px rgba(0, 0, 0, 0.10);

    --q-bg:               var(--t-bg);
    --q-card:             var(--t-panel);
    --q-sidebar-bg:       var(--t-panel);
    --q-text:             var(--t-text);
    --q-text-secondary:   var(--t-text-secondary);
    --q-accent:           var(--t-accent);
    --q-accent-rgb:       var(--t-accent-rgb);
    --q-border:           #e2e8f0;
    --q-input-bg:         var(--t-input-bg);
    --q-hover:            rgba(0, 0, 0, 0.03);
    --q-scroll-thumb:     var(--t-scroll);
    --q-highlight-bg:     rgba(71, 85, 105, 0.08);
    --q-highlight-border: rgba(71, 85, 105, 0.18);
    --q-highlight-shadow: 0 0 40px rgba(71, 85, 105, 0.05);
    --q-player-bg:        var(--t-card);
    --q-progress-bg:      rgba(0, 0, 0, 0.08);

    --qb-bg:          var(--t-bg);
    --qb-panel:       var(--t-panel);
    --qb-card:        var(--t-card);
    --qb-text:        var(--t-text);
    --qb-text-dim:    var(--t-text-dim);
    --qb-text-dimmer: var(--t-text-dimmer);
    --qb-accent:      var(--t-accent);
    --qb-accent-rgb:  var(--t-accent-rgb);
    --qb-border:      var(--t-border);
    --qb-input-bg:    var(--t-input-bg);
    --qb-hover:       var(--t-hover);
    --qb-shadow:      var(--t-shadow);
    --qb-scroll:      var(--t-scroll);
    --qb-panel-glass: rgba(241, 245, 249, 0.95);

    /* Calendar-page aliases (--cal-*) */
    --cal-bg:             var(--t-bg);
    --cal-card:           #fff;
    --cal-card-border:    #f1f5f9;
    --cal-card-shadow:    0 10px 40px -10px rgba(0, 0, 0, 0.05);
    --cal-text:           var(--t-text);
    --cal-text-secondary: var(--t-text-secondary);
    --cal-text-dim:       var(--t-text-dim);
    --cal-accent:         #475569;
    --cal-accent-rgb:     71, 85, 105;
    --cal-nav-bg:         #fff;
    --cal-nav-border:     #f1f5f9;
    --cal-hover:          #f8fafc;
    --cal-toggle-bg:      var(--t-text);
    --cal-day-hover:      #f8fafc;
    --cal-today:          #10b981;
    --cal-today-glow:     rgba(16, 185, 129, 0.3);
    --cal-today-ring:     rgba(16, 185, 129, 0.15);
    --cal-today-sub:      #059669;
    --cal-holiday-bg:     #fff7ed;
    --cal-holiday-text:   #ea580c;
    --cal-holiday-hover:  #ffedd5;
    --cal-tooltip-bg:     #fff;
    --cal-tooltip-border: #f1f5f9;
    --cal-modal-bg:       rgb(8 8 22 / 92%);
    --cal-modal-text:     #fff;
    --cal-modal-dim:      rgba(255, 255, 255, 0.4);
    --cal-modal-hover:    rgba(255, 255, 255, 0.06);
    --cal-modal-selected: rgba(255, 255, 255, 0.12);
    --cal-modal-divider:  rgba(255, 255, 255, 0.07);
    --cal-modal-btn-bg:   #1a503f;
    --cal-modal-btn-hover:#22654f;
}

/* ─── Midnight (dark, teal) ─── */
[data-theme="midnight"] {
    --t-bg:           #051612;
    --t-panel:        #04120f;
    --t-card:         #0a231e;
    --t-text:         #e2e8f0;
    --t-text-secondary: #64d2b1;
    --t-text-dim:     rgba(226, 232, 240, 0.40);
    --t-text-dimmer:  rgba(226, 232, 240, 0.22);
    --t-accent:       #10b981;
    --t-accent-rgb:   16, 185, 129;
    --t-border:       rgba(255, 255, 255, 0.08);
    --t-input-bg:     rgba(255, 255, 255, 0.05);
    --t-hover:        rgba(255, 255, 255, 0.05);
    --t-scroll:       rgba(16, 185, 129, 0.2);
    --t-shadow:       0 12px 48px rgba(0, 0, 0, 0.55);

    --q-bg:               var(--t-bg);
    --q-card:             var(--t-card);
    --q-sidebar-bg:       var(--t-panel);
    --q-text:             var(--t-text);
    --q-text-secondary:   var(--t-text-secondary);
    --q-accent:           var(--t-accent);
    --q-accent-rgb:       var(--t-accent-rgb);
    --q-border:           #133c33;
    --q-input-bg:         var(--t-input-bg);
    --q-hover:            var(--t-hover);
    --q-scroll-thumb:     var(--t-scroll);
    --q-highlight-bg:     rgba(16, 185, 129, 0.08);
    --q-highlight-border: rgba(16, 185, 129, 0.18);
    --q-highlight-shadow: 0 0 40px rgba(16, 185, 129, 0.05);
    --q-player-bg:        var(--t-card);
    --q-progress-bg:      rgba(255, 255, 255, 0.08);

    --qb-bg:          var(--t-bg);
    --qb-panel:       var(--t-panel);
    --qb-card:        var(--t-card);
    --qb-text:        var(--t-text);
    --qb-text-dim:    var(--t-text-dim);
    --qb-text-dimmer: var(--t-text-dimmer);
    --qb-accent:      var(--t-accent);
    --qb-accent-rgb:  var(--t-accent-rgb);
    --qb-border:      var(--t-border);
    --qb-input-bg:    var(--t-input-bg);
    --qb-hover:       var(--t-hover);
    --qb-shadow:      var(--t-shadow);
    --qb-scroll:      var(--t-scroll);
    --qb-panel-glass: rgba(4, 18, 15, 0.94);

    /* Calendar-page aliases (--cal-*) */
    --cal-bg:             var(--t-bg);
    --cal-card:           var(--t-card);
    --cal-card-border:    var(--t-border);
    --cal-card-shadow:    0 10px 40px -10px rgba(0, 0, 0, 0.3);
    --cal-text:           var(--t-text);
    --cal-text-secondary: var(--t-text-secondary);
    --cal-text-dim:       var(--t-text-dim);
    --cal-accent:         #10b981;
    --cal-accent-rgb:     16, 185, 129;
    --cal-nav-bg:         var(--t-card);
    --cal-nav-border:     var(--t-border);
    --cal-hover:          var(--t-hover);
    --cal-toggle-bg:      #10b981;
    --cal-day-hover:      var(--t-hover);
    --cal-today:          #10b981;
    --cal-today-glow:     rgba(16, 185, 129, 0.35);
    --cal-today-ring:     rgba(16, 185, 129, 0.15);
    --cal-today-sub:      #64d2b1;
    --cal-holiday-bg:     rgba(234, 88, 12, 0.12);
    --cal-holiday-text:   #fb923c;
    --cal-holiday-hover:  rgba(234, 88, 12, 0.2);
    --cal-tooltip-bg:     var(--t-card);
    --cal-tooltip-border: var(--t-border);
    --cal-modal-bg:       rgba(4, 18, 15, 0.94);
    --cal-modal-text:     var(--t-text);
    --cal-modal-dim:      var(--t-text-dim);
    --cal-modal-hover:    var(--t-hover);
    --cal-modal-selected: rgba(16, 185, 129, 0.15);
    --cal-modal-divider:  var(--t-border);
    --cal-modal-btn-bg:   rgba(16, 185, 129, 0.25);
    --cal-modal-btn-hover:#10b981;
}

/* ─── Slate (dark, blue) ─── */
[data-theme="slate"] {
    --t-bg:           #0f172a;
    --t-panel:        #0b1120;
    --t-card:         #1e293b;
    --t-text:         #f1f5f9;
    --t-text-secondary: #94a3b8;
    --t-text-dim:     rgba(241, 245, 249, 0.38);
    --t-text-dimmer:  rgba(241, 245, 249, 0.20);
    --t-accent:       #38bdf8;
    --t-accent-rgb:   56, 189, 248;
    --t-border:       rgba(255, 255, 255, 0.08);
    --t-input-bg:     rgba(255, 255, 255, 0.05);
    --t-hover:        rgba(255, 255, 255, 0.05);
    --t-scroll:       rgba(56, 189, 248, 0.2);
    --t-shadow:       0 12px 48px rgba(0, 0, 0, 0.55);

    --q-bg:               var(--t-bg);
    --q-card:             var(--t-card);
    --q-sidebar-bg:       var(--t-panel);
    --q-text:             var(--t-text);
    --q-text-secondary:   var(--t-text-secondary);
    --q-accent:           var(--t-accent);
    --q-accent-rgb:       var(--t-accent-rgb);
    --q-border:           #334155;
    --q-input-bg:         var(--t-input-bg);
    --q-hover:            var(--t-hover);
    --q-scroll-thumb:     var(--t-scroll);
    --q-highlight-bg:     rgba(56, 189, 248, 0.08);
    --q-highlight-border: rgba(56, 189, 248, 0.18);
    --q-highlight-shadow: 0 0 40px rgba(56, 189, 248, 0.05);
    --q-player-bg:        var(--t-card);
    --q-progress-bg:      rgba(255, 255, 255, 0.08);

    --qb-bg:          var(--t-bg);
    --qb-panel:       var(--t-panel);
    --qb-card:        var(--t-card);
    --qb-text:        var(--t-text);
    --qb-text-dim:    var(--t-text-dim);
    --qb-text-dimmer: var(--t-text-dimmer);
    --qb-accent:      var(--t-accent);
    --qb-accent-rgb:  var(--t-accent-rgb);
    --qb-border:      var(--t-border);
    --qb-input-bg:    var(--t-input-bg);
    --qb-hover:       var(--t-hover);
    --qb-shadow:      var(--t-shadow);
    --qb-scroll:      var(--t-scroll);
    --qb-panel-glass: rgba(11, 17, 32, 0.94);

    /* Calendar-page aliases (--cal-*) */
    --cal-bg:             var(--t-bg);
    --cal-card:           var(--t-card);
    --cal-card-border:    var(--t-border);
    --cal-card-shadow:    0 10px 40px -10px rgba(0, 0, 0, 0.3);
    --cal-text:           var(--t-text);
    --cal-text-secondary: var(--t-text-secondary);
    --cal-text-dim:       var(--t-text-dim);
    --cal-accent:         #38bdf8;
    --cal-accent-rgb:     56, 189, 248;
    --cal-nav-bg:         var(--t-card);
    --cal-nav-border:     var(--t-border);
    --cal-hover:          var(--t-hover);
    --cal-toggle-bg:      #38bdf8;
    --cal-day-hover:      var(--t-hover);
    --cal-today:          #38bdf8;
    --cal-today-glow:     rgba(56, 189, 248, 0.35);
    --cal-today-ring:     rgba(56, 189, 248, 0.15);
    --cal-today-sub:      #7dd3fc;
    --cal-holiday-bg:     rgba(234, 88, 12, 0.12);
    --cal-holiday-text:   #fb923c;
    --cal-holiday-hover:  rgba(234, 88, 12, 0.2);
    --cal-tooltip-bg:     var(--t-card);
    --cal-tooltip-border: var(--t-border);
    --cal-modal-bg:       rgba(11, 17, 32, 0.94);
    --cal-modal-text:     var(--t-text);
    --cal-modal-dim:      var(--t-text-dim);
    --cal-modal-hover:    var(--t-hover);
    --cal-modal-selected: rgba(56, 189, 248, 0.15);
    --cal-modal-divider:  var(--t-border);
    --cal-modal-btn-bg:   rgba(56, 189, 248, 0.2);
    --cal-modal-btn-hover:#38bdf8;
}


/* ═══════════════════════════════════════════
   SHARED HEADER THEME OVERRIDES
   Applied to the shared site-header component
   on any themed page (not the homepage)
   ═══════════════════════════════════════════ */

/* Dark themes */
[data-theme="midnight"] #site-header,
[data-theme="slate"]    #site-header {
    background: rgba(5, 8, 18, 0.72) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
[data-theme="midnight"] .header-logo,
[data-theme="slate"]    .header-logo {
    color: rgba(255, 255, 255, 0.75) !important;
}
[data-theme="midnight"] .header-brand:hover .header-logo,
[data-theme="slate"]    .header-brand:hover .header-logo {
    color: #fff !important;
}

/* Light themes */
[data-theme="sepia"] #site-header {
    background: rgba(244, 236, 216, 0.88) !important;
    border-bottom: 1px solid rgba(67, 52, 34, 0.10) !important;
}
[data-theme="silver"] #site-header {
    background: rgba(241, 245, 249, 0.88) !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.08) !important;
}
[data-theme="sepia"]  .header-logo,
[data-theme="silver"] .header-logo {
    color: #1e293b !important;
}
[data-theme="sepia"]  .header-brand:hover .header-logo,
[data-theme="silver"] .header-brand:hover .header-logo {
    color: #0f172a !important;
}

/* All themed pages: glassmorphism on header */
[data-theme] #site-header {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}


/* ═══════════════════════════════════════════
   SHARED SIDEBAR RAIL THEME OVERRIDES
   ═══════════════════════════════════════════ */

/* Sidebar background */
[data-theme] #sidebar {
    background: var(--t-panel) !important;
    border-left: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow);
    scrollbar-color: var(--t-scroll) transparent;
    transition: background 0.35s, border-color 0.35s;
}
[data-theme] #sidebar::-webkit-scrollbar-thumb {
    background: var(--t-scroll);
}

/* Sidebar overlay */
[data-theme] #sidebar-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
}

/* Nav links */
[data-theme] #sidebar-nav a {
    color: var(--t-text);
    opacity: 0.7;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
}
[data-theme] #sidebar-nav a:hover {
    background: var(--t-hover);
    color: var(--t-text);
    opacity: 1;
}
[data-theme] #sidebar-nav a svg { opacity: 0.5; }
[data-theme] #sidebar-nav a:hover svg { opacity: 0.9; }

/* Collapsed rail: icon visibility */
[data-theme].sidebar-mini:not(.sidebar-open) #sidebar-nav a svg {
    color: var(--t-text);
}
[data-theme].sidebar-mini:not(.sidebar-open) #sidebar-nav a:hover {
    background: var(--t-hover);
}
[data-theme].sidebar-mini:not(.sidebar-open) #sidebar-nav a:hover svg {
    color: var(--t-text);
}

/* Divider */
[data-theme] #sidebar-divider {
    background: var(--t-border);
}

/* Settings section */
[data-theme] #sidebar-settings {
    border-top-color: var(--t-border);
}
[data-theme] .sidebar-settings-title {
    color: var(--t-text-dimmer);
    font-family: 'Inter', sans-serif;
}
[data-theme] .setting-label-main { color: var(--t-text); }
[data-theme] .setting-label-desc { color: var(--t-text-dim); }

/* Toggle switch */
[data-theme] .toggle-track {
    background: var(--t-input-bg);
    border-color: var(--t-border);
}
[data-theme] .toggle-knob {
    background: var(--t-text);
    opacity: 0.5;
}
[data-theme] .toggle-switch input:checked ~ .toggle-track {
    background: rgba(var(--t-accent-rgb), 0.2);
    border-color: rgba(var(--t-accent-rgb), 0.4);
}
[data-theme] .toggle-switch input:checked ~ .toggle-knob {
    background: var(--t-accent);
    opacity: 1;
}

/* Minutes input */
[data-theme] .setting-minutes-row {
    background: var(--t-input-bg);
    border-color: var(--t-border);
}
[data-theme] .setting-minutes-row label {
    color: var(--t-text-dim);
}
[data-theme] .minutes-input {
    background: var(--t-input-bg);
    border-color: var(--t-border);
    color: var(--t-text);
}
[data-theme] .minutes-input:focus {
    border-color: var(--t-accent);
}
[data-theme] .minutes-unit {
    color: var(--t-text-dimmer);
}

/* Fullscreen button */
[data-theme] #fullscreen-btn {
    background: var(--t-input-bg);
    border-color: var(--t-border);
    color: var(--t-text);
    opacity: 0.6;
}
[data-theme] #fullscreen-btn:hover {
    background: var(--t-hover);
    border-color: rgba(var(--t-accent-rgb), 0.3);
    color: var(--t-accent);
    opacity: 1;
}

/* Social links */
[data-theme] #sidebar-social {
    border-top-color: var(--t-border);
}
[data-theme] #sidebar-social a {
    background: var(--t-input-bg);
    border-color: var(--t-border);
    color: var(--t-text);
    opacity: 0.4;
}
[data-theme] #sidebar-social a:hover {
    background: var(--t-hover);
    border-color: var(--t-border);
    color: var(--t-text);
    opacity: 0.8;
}

/* Rail toggle (hamburger inside mini sidebar) */
[data-theme].sidebar-mini #rail-toggle {
    border-bottom: 1px solid var(--t-border) !important;
    transition: background 0.2s, border-color 0.35s;
}
[data-theme].sidebar-mini #rail-toggle:hover {
    background: var(--t-hover) !important;
}
[data-theme].sidebar-mini #rail-toggle .bar {
    background: var(--t-text) !important;
    opacity: 0.7;
}
[data-theme].sidebar-mini #rail-toggle:hover .bar {
    opacity: 1;
}

/* Menu toggle (hamburger on mobile) */
[data-theme] #menu-toggle {
    background: var(--t-panel);
    border: 1px solid var(--t-border);
}
[data-theme] #menu-toggle .bar {
    background: var(--t-text) !important;
}
[data-theme] #menu-toggle:hover {
    background: var(--t-hover);
}

/* Close button */
[data-theme] #sidebar-close-btn {
    background: var(--t-input-bg);
    color: var(--t-text);
    opacity: 0.5;
}
[data-theme] #sidebar-close-btn:hover {
    background: var(--t-hover);
    color: var(--t-text);
    opacity: 1;
}

/* Collapsed mini sidebar background */
[data-theme].sidebar-mini:not(.sidebar-open) #sidebar {
    background: var(--t-panel) !important;
}

/* Hide hamburger when sidebar is fully open (it overlaps the close button) */
[data-theme].sidebar-open #menu-toggle {
    display: none !important;
}

/* Hide header + theme switcher topbar when sidebar is open (global) */
[data-theme].sidebar-open #site-header,
[data-theme].sidebar-open .qibla-topbar-right,
[data-theme].sidebar-open .cal-topbar-right,
[data-theme].sidebar-open .home-topbar-right,
[data-theme].sidebar-open .q-topnav {
    transform: translateY(-100%);
    pointer-events: none;
}


/* ═══════════════════════════════════════════
   MOBILE: Show hamburger toggle on themed pages
   The icon rail is hidden on mobile, so we need
   the floating menu-toggle button to be visible
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    [data-theme].sidebar-mini #menu-toggle {
        display: flex;
        position: fixed;
        top: 10px;
        right: 16px;
        z-index: 200;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow:0 1px 6px rgb(0 0 0 / 6%);
        transition: background 0.2s, border-color 0.2s;
    }
    [data-theme].sidebar-mini #menu-toggle .bar {
        width: 20px;
        height: 2px;
        border-radius: 2px;
    }

    [data-theme].sidebar-mini .home-topbar-right,
    [data-theme].sidebar-mini .info-topbar-right,
    [data-theme].sidebar-mini .prayer-topbar-right,
    [data-theme].sidebar-mini .qibla-topbar-right,
    [data-theme].sidebar-mini .ram-topbar-right,
    [data-theme].sidebar-mini .gr-topbar-right,
    [data-theme].sidebar-mini .cal-topbar-right {
        right: 68px;
    }
}


/* ═══════════════════════════════════════════
   THEME SWITCHER COMPONENT
   Shared pill-style dark/light toggle with
   sub-button color swatches
   ═══════════════════════════════════════════ */

/* Compact theme toggle */
.q-theme-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
}

.q-theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--t-input-bg);
    color: var(--t-text-dim);
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}

.q-theme-toggle svg {
    width: 17px;
    height: 17px;
}

.q-theme-toggle:hover {
    background: var(--t-hover);
    color: var(--t-accent);
}

.q-theme-toggle:focus-visible {
    outline: 2px solid var(--t-accent);
    outline-offset: 2px;
}

.q-theme-toggle-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
}

.q-theme-toggle-sun {
    opacity: 0;
    transform: scale(0.72) rotate(-20deg);
}

.q-theme-toggle.is-dark .q-theme-toggle-moon {
    opacity: 0;
    transform: scale(0.72) rotate(20deg);
}

.q-theme-toggle.is-dark .q-theme-toggle-sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}