/* ══════════════════════════════════════════
   LEFT PANEL BRAND CONTENT
   Injected by inject.js into .LoginView
   Desktop only — hidden at ≤768px
══════════════════════════════════════════ */

#ummah-left-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ummah-lb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 32px;
    text-align: center;
    /* Push brand up a little from center so the arabesque geometry is visible below */
    margin-top: -60px;
}

/* Star mark + wordmark row */
#ummah-lb-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

#ummah-lb-star {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

/* ── Sovereign Seal (Phase 1d May 16 2026) ──
   Replaces the abstract 8-point rub el hizb star above the wordmark.
   Now the camel-and-rider seal SVG (rub el hizb framing the camel mark).
   Slot is 56×56 desktop, scoped to login screen only via #rl-login-screen
   guard in inject.js. */
#ummah-lb-seal {
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    flex-shrink: 0;
    /* No filter — seal already carries forest+gold internally */
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
    #ummah-lb-seal { width: 46px; height: 46px; }
}

#ummah-lb-wordmark {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
}

#ummah-lb-ummah {
    color: #1a1a2e;
    opacity: 0.85;
}

#ummah-lb-email {
    color: #c8952e;
}

/* Tagline (Phase 1d May 16 2026: ink bumped from 0.55→0.70 for WCAG AA on cream) */
#ummah-lb-tagline {
    font-family: 'Onest', -apple-system, sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    font-weight: 400;
    color: rgba(26, 26, 46, 0.70);
    line-height: 1.55;
    letter-spacing: 0.01em;
    max-width: 240px;
}
#ummah-lb-tagline em {
    font-style: italic;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
}

/* Trust pills (Phase 1d May 16 2026: ink bumped 0.42→0.72 for AA at 10px) */
#ummah-lb-pills {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

#ummah-lb-pills span {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(26, 26, 46, 0.72);
    background: rgba(200, 149, 46, 0.07);
    border: 1px solid rgba(200, 149, 46, 0.14);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Hide left brand on mobile (left panel is hidden anyway) */
@media screen and (max-width: 768px) {
    #ummah-left-brand {
        display: none;
    }
}

/* Sync with tablet breakpoint (35% width) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    #ummah-left-brand {
        width: 35%;
    }
    #ummah-lb-inner {
        padding: 0 20px;
    }
    #ummah-lb-star {
        width: 30px;
        height: 30px;
    }
}

/* ══════════════════════════════════════════ */

/* ── Login Extras Wrapper (inside the form card, above inputs) ── */
#ummah-login-extras {
    margin-bottom: 20px;
}

/* ── SSO Button ── */
#ummahpass-sso {
    display: block;
    margin: 0 0 16px;
}
#ummahpass-sso a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Two-color gold system: bright -> primary */
    background: linear-gradient(135deg, #dfa032 0%, #c8952e 100%);
    color: #ffffff !important;
    padding: 15px 24px;
    border-radius: 11px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.01em;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    /* Hero shadow — stronger than the login button below */
    box-shadow:
        0 2px 16px -3px rgba(200, 149, 46, 0.40),
        0 1px 3px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.14);
    position: relative;
    overflow: hidden;
}
/* Subtle top-left shimmer — always visible (luxury glass effect) */
#ummahpass-sso a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 11px 0 0 0;
}
#ummahpass-sso a:hover {
    background: linear-gradient(135deg, #f0b040 0%, #dfa032 100%);
    box-shadow:
        0 6px 28px -4px rgba(200, 149, 46, 0.50),
        0 2px 6px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none;
}
#ummahpass-sso a:active {
    transform: translateY(0);
    box-shadow: 0 1px 8px rgba(200, 149, 46, 0.25), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Crescent moon icon — left of text, leading the CTA */
#ummahpass-sso a::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    /* Crescent moon: filled circle minus offset circle = CSS mask crescent */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9z' fill='rgba(255,255,255,0.90)'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    order: -1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* ── SSO Divider ── */
#ummahpass-sso-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: rgba(26, 26, 46, 0.35);
    font-size: 10px;
    font-family: 'DM Mono', 'Courier New', monospace;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
#ummahpass-sso-divider::before,
#ummahpass-sso-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,149,46,0.18), transparent);
}

/* ── PWA Install ── */
#pwa-install {
    display: none;
    justify-content: center;
    margin: 0 0 12px;
}
#pwa-install button {
    background: transparent;
    color: #c8952e;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid rgba(200, 149, 46, 0.25);
    font-weight: 500;
    font-size: 11px;
    font-family: 'DM Mono', 'Courier New', monospace;
    cursor: pointer;
    width: 100%;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
}
#pwa-install button:hover {
    border-color: rgba(200, 149, 46, 0.45);
    background: rgba(200, 149, 46, 0.05);
}

/* ── Feature Pills (inside form card, at bottom) ── */
#ummah-features {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(200, 149, 46, 0.10);
    flex-wrap: wrap;
}
#ummah-features span {
    font-size: 10px;
    font-family: 'DM Mono', 'Courier New', monospace;
    /* Phase 1d May 16 2026: ink 0.65→0.78 for AA at 10px on cream */
    color: rgba(26, 26, 46, 0.78);
    background: rgba(200, 149, 46, 0.07);
    border: 1px solid rgba(200, 149, 46, 0.14);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── Keyboard Shortcuts Hint ── */
#ummah-shortcuts-hint {
    position: fixed;
    bottom: 26px;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    z-index: 9998;
    font-size: 10px;
    font-family: 'DM Mono', 'Courier New', monospace;
    color: rgba(26, 26, 46, 0.25);
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
}

/* ── Tablet / small desktop (768px) ── */
@media screen and (max-width: 768px) {
    #ummah-login-extras {
        margin-bottom: 14px;
    }
    #ummahpass-sso a {
        font-size: 13px;
        padding: 11px 20px;
    }
    #ummahpass-sso-divider {
        font-size: 9px;
        margin: 0 0 4px;
    }
    #ummah-features {
        margin: 12px 0 0;
        padding-top: 10px;
    }
    /* Hide shortcuts hint on mobile — not useful on touch */
    #ummah-shortcuts-hint {
        display: none;
    }
}

/* ── Small phone (480px) ── */
@media screen and (max-width: 480px) {
    #ummah-login-extras {
        margin-bottom: 12px;
    }
    #ummahpass-sso {
        margin: 0 0 10px;
    }
    #ummahpass-sso a {
        font-size: 13px;
        padding: 12px 14px;
        border-radius: 8px;
        min-height: 44px;
    }
    #ummahpass-sso-divider {
        font-size: 9px;
        gap: 8px;
        margin: 0 0 8px;
    }
    #ummah-features {
        gap: 5px;
        margin: 10px 0 0;
        padding-top: 8px;
    }
    #ummah-features span {
        font-size: 10px;
        padding: 3px 8px;
    }
    #pwa-install button {
        font-size: 10px;
        padding: 10px 12px;
        min-height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Apr 30 — Bismillah on login page (CD #12). Tasteful, opacity-tuned,
   sits above the wordmark. Uses Amiri serif (web-safe Arabic font fallback).
   ═══════════════════════════════════════════════════════════════════════ */
#ummah-lb-bismillah {
    font-family: "Amiri", "Scheherazade New", "Traditional Arabic", "Noto Naskh Arabic", serif;
    font-size: 1.15rem;
    line-height: 1.4;
    color: #c8952e;
    opacity: 0.7;
    text-align: center;
    margin: 0 0 18px 0;
    letter-spacing: 0.02em;
    font-weight: 400;
}
@media (prefers-color-scheme: dark) {
    #ummah-lb-bismillah { color: #d4a854; opacity: 0.6; }
}
@media (max-width: 768px) {
    #ummah-lb-bismillah { font-size: 1rem; margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Apr 30 — Ecosystem rail sidebar (CD/Eco lever #7). Starter version with
   Prayer Times + Giving Total widgets. Renders as floating brass-bordered
   card in the lower-left of the inbox view (post-login). Clickable through
   to MasjidConnect / UmmahCauses respectively.
   ═══════════════════════════════════════════════════════════════════════ */
#ummah-eco-rail {
    position: fixed;
    bottom: 16px;
    left: 16px;
    width: 240px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(200, 145, 46, 0.30);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(44, 36, 23, 0.10), 0 1px 2px rgba(44, 36, 23, 0.04);
    padding: 10px 14px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    color: #2c2417;
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.2s, opacity 0.2s;
}
#ummah-eco-rail .er-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Lora", Georgia, serif;
    font-style: italic;
    font-size: 0.72rem;
    color: #a6751f;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(200, 145, 46, 0.20);
}
#ummah-eco-rail .er-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-radius: 6px;
}
#ummah-eco-rail .er-tile:hover {
    background: rgba(200, 145, 46, 0.06);
}
#ummah-eco-rail .er-tile .er-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}
#ummah-eco-rail .er-tile .er-text {
    flex: 1;
    min-width: 0;
}
#ummah-eco-rail .er-tile .er-label {
    font-size: 0.7rem;
    color: #8a7e6d;
    line-height: 1.2;
}
#ummah-eco-rail .er-tile .er-value {
    font-weight: 600;
    font-size: 0.86rem;
    color: #2c2417;
    line-height: 1.3;
}
#ummah-eco-rail .er-collapse {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 16px;
    color: #a89c89;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}
#ummah-eco-rail .er-collapse:hover { color: #2c2417; }
#ummah-eco-rail.er-collapsed {
    transform: translateX(calc(-100% + 36px));
    opacity: 0.7;
}
#ummah-eco-rail.er-collapsed:hover {
    transform: translateX(0);
    opacity: 1;
}
@media (prefers-color-scheme: dark) {
    #ummah-eco-rail {
        background: rgba(28, 26, 21, 0.96);
        color: #ebe4d2;
        border-color: rgba(200, 145, 46, 0.40);
    }
    #ummah-eco-rail .er-tile .er-value { color: #ebe4d2; }
    #ummah-eco-rail .er-tile:hover { background: rgba(200, 145, 46, 0.10); }
}
@media (max-width: 768px) {
    #ummah-eco-rail { display: none; }  /* Mobile: rely on header CTA, no floating rail */
}

/* ═══════════════════════════════════════════════════════════════════════
   May 6 2026 — Switcher theme contrast patch (inject-level override)
   Root cause: engine app.css sets .b-folders .b-content { color: var(--folders-color) }
   which cascades to icon ::before pseudo-elements. --folders-color:#5f6368 looks
   washed out on Android (lower sub-pixel contrast vs desktop). Fix: push all folder
   text/icon color to #202124 (near-black) via !important overrides on both the CSS
   variable and the actual color property. Also raises font-weight to 600 for legibility
   on mobile screens.
   Applied ONLY when Switcher theme is active (body[data-theme="Switcher"]) to avoid
   touching Maktub or other themes.
   ═══════════════════════════════════════════════════════════════════════ */

/* Target both theme-name variants Snappymail may set */
body[data-theme="Switcher"],
.b-folders {
    --folders-color: #202124 !important;
}

/* Force .b-folders .b-content (the engine wrapper that cascades to icons) */
.b-folders .b-content {
    color: #202124 !important;
}

/* Force folder anchor text — higher specificity than engine .b-folders li a.
   Light mode: dark ink on cream bg (#f3f0ea). Dark mode: cream ink on void bg (#0c0c18).
   May 14 — Saad regression: previous unconditional dark text was invisible when OS in dark mode. */
#rl-left .b-folders li a,
#rl-left .b-folders li a.selectable,
.b-folders li a,
.b-folders li a.selectable {
    color: #202124 !important;
    font-weight: 600 !important;
}

/* Force icon pseudo-elements (snappymail icon font uses ::before on elements inside a) */
#rl-left .b-folders li a::before,
#rl-left .b-folders li a *::before,
#rl-left .b-folders li a [class*="icon-"]::before,
.b-folders li a::before,
.b-folders li a *::before,
.b-folders li a [class*="icon-"]::before {
    color: #202124 !important;
    opacity: 1 !important;
}

/* Selected folder — keep accent color (blue), just ensure it stays readable */
#rl-left .b-folders li a.selectable.selected,
.b-folders li a.selectable.selected {
    color: #1565c0 !important;
    font-weight: 700 !important;
}
#rl-left .b-folders li a.selectable.selected::before,
#rl-left .b-folders li a.selectable.selected *::before,
.b-folders li a.selectable.selected::before,
.b-folders li a.selectable.selected *::before {
    color: #1565c0 !important;
    opacity: 1 !important;
}

/* Disabled/non-selectable folders — keep muted but readable (not as faded as #bdc1c6) */
#rl-left .b-folders li a:not(.selectable),
.b-folders li a:not(.selectable) {
    color: #5f6368 !important;
    font-weight: 400 !important;
}

/* ──────────────────────────────────────────────
   DARK MODE COUNTERPART — May 14 Saad regression fix.
   When the engine flips to dark (prefers-color-scheme: dark), the left
   panel bg becomes #0c0c18 — the dark text above would be invisible.
   Map everything to the dark palette's gold accent + warm cream.
────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    #rl-left .b-folders li a,
    #rl-left .b-folders li a.selectable,
    .b-folders li a,
    .b-folders li a.selectable {
        color: #f0ead6 !important; /* warm cream — readable on void bg */
    }

    #rl-left .b-folders li a::before,
    #rl-left .b-folders li a *::before,
    #rl-left .b-folders li a [class*="icon-"]::before,
    .b-folders li a::before,
    .b-folders li a *::before,
    .b-folders li a [class*="icon-"]::before {
        color: #dfa032 !important; /* warm gold accent — matches dark-theme icons */
    }

    #rl-left .b-folders li a.selectable.selected,
    .b-folders li a.selectable.selected {
        color: #dfa032 !important; /* gold for selected */
    }
    #rl-left .b-folders li a.selectable.selected::before,
    #rl-left .b-folders li a.selectable.selected *::before,
    .b-folders li a.selectable.selected::before,
    .b-folders li a.selectable.selected *::before {
        color: #dfa032 !important;
    }

    #rl-left .b-folders li a:not(.selectable),
    .b-folders li a:not(.selectable) {
        color: rgba(240,234,214,0.55) !important; /* dimmed cream for non-selectable */
    }
}

/* Mobile: bump font-size slightly for readability at arm's length */
@media (max-width: 768px) {
    #rl-left .b-folders li a,
    .b-folders li a {
        font-size: 15px !important;
    }
}

/* ══════════════════════════════════════════
   ECOSYSTEM RAIL — DISMISS BUTTON (May 13 2026)
   [×] close in top-right corner of the rail.
   Does not disturb existing visual design —
   positions beside the existing er-collapse «.
══════════════════════════════════════════ */
#ummah-eco-rail .er-dismiss {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #a08050;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
    z-index: 2;
}
#ummah-eco-rail .er-dismiss:hover {
    opacity: 1;
    background: rgba(200,149,46,0.12);
}
/* Collapsed rail — hide dismiss to avoid clutter */
#ummah-eco-rail.er-collapsed .er-dismiss {
    display: none;
}