/*
 * futuristic.css — light-mode design layer
 * Loaded after styles.css; overrides the Bootstrap Resume theme site-wide.
 * All text/background pairs verified ≥ 4.5:1 contrast ratio (WCAG AA).
 */

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
    /* Backgrounds */
    --bg:           #f8fafc;     /* slate-50 */
    --bg-surface:   #ffffff;

    /* Brand accent — original site orange */
    --accent:       #bd5d38;
    --accent-dark:  #a04e2f;     /* darker for hover states */
    --accent-dim:   rgba(189, 93, 56, 0.09);
    --accent-glow:  rgba(189, 93, 56, 0.22);

    /* Text — all verified against white/near-white bg */
    --text-1:       #1e293b;     /* slate-800  → 16:1 on white  ✓ */
    --text-2:       #475569;     /* slate-600  →  7:1 on white  ✓ */
    --text-3:       #64748b;     /* slate-500  →  5:1 on white  ✓ */

    /* Borders & shadows */
    --border:       rgba(0, 0, 0, 0.09);
    --shadow-sm:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);

    /* Semantic status colours — all dark enough for light bg */
    --green:        #15803d;     /* 5.0:1 on white ✓ */
    --yellow:       #92400e;     /* 6.6:1 on white ✓ */
    --red:          #b91c1c;     /* 5.4:1 on white ✓ */
    --cyan:         #0369a1;     /* 6.0:1 on white ✓ */
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg) !important;
    color: var(--text-1) !important;
    font-family: 'Muli', sans-serif;
}

/* Subtle dot-grid texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(0,0,0,.055) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Soft warm glow orb — barely visible on light bg */
body::after {
    content: '';
    position: fixed;
    top: 5%;
    left: 20%;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(189,93,56,.055) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift 28s ease-in-out infinite alternate;
}

@keyframes orbDrift {
    from { transform: translate(0,   0)   scale(1);    }
    to   { transform: translate(60px, -50px) scale(1.1); }
}

/* Content above dot-grid/orb background pseudo-elements (z-index: 0) */
.container-fluid,
.prep-toolbar,
#backToTop {
    position: relative;
    z-index: 1;
}

/* Nav must be ABOVE content: .container-fluid starts at y=0 and its
   60px padding-top area would otherwise intercept clicks on the fixed nav.
   NOTE: only force position:relative below the 992px breakpoint — at
   desktop widths #sideNav must stay position:fixed (set in styles.css)
   so it renders as a pinned left column, not an in-flow block above the
   hero. z-index alone is enough to fix click-through at desktop widths
   since position:fixed already establishes a stacking context. */
#sideNav {
    z-index: 100;
}
@media (max-width: 991px) {
    #sideNav {
        position: relative;
    }
}

/* Scrollbar */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: rgba(0,0,0,.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--accent); }

/* Text selection */
::selection { background: rgba(189,93,56,.18); color: var(--text-1); }

/* ═══════════════════════════════════════
   SIDE NAV
═══════════════════════════════════════ */
#sideNav {
    background: #ffffff !important;
    border-right: 1px solid rgba(0,0,0,.08);
    box-shadow: 2px 0 16px rgba(0,0,0,.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 991px) {
    #sideNav {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
}

/* Profile image: orange ring */
.img-profile {
    border: 3px solid var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(189,93,56,.12), var(--shadow-md) !important;
    transition: box-shadow .3s ease;
}
.img-profile:hover {
    box-shadow: 0 0 0 5px rgba(189,93,56,.25), 0 6px 20px rgba(0,0,0,.12) !important;
}

/* Mobile nav title */
.d-block.d-lg-none {
    color: var(--text-1) !important;
}

/* Nav links */
#sideNav .navbar-nav .nav-item .nav-link {
    color: var(--text-2) !important;
    font-size: 0.7rem;
    letter-spacing: 0.09rem;
    padding: 0.55rem 1.5rem 0.55rem 1.6rem;
    transition: color .2s, padding-left .2s;
    position: relative;
}

/* Orange left-edge indicator */
#sideNav .navbar-nav .nav-item .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 16px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
    transition: width .2s ease;
}

#sideNav .navbar-nav .nav-item .nav-link:hover,
#sideNav .navbar-nav .nav-item .nav-link.active {
    color: var(--accent) !important;
    padding-left: 2rem;
}

#sideNav .navbar-nav .nav-item .nav-link:hover::before,
#sideNav .navbar-nav .nav-item .nav-link.active::before {
    width: 3px;
}

/* ═══════════════════════════════════════
   SECTIONS
═══════════════════════════════════════ */
.resume-section {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
}

/* Scroll-reveal — gated by .js-loaded so non-JS users see content */
.js-loaded .resume-section-content,
.js-loaded .topic-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.js-loaded .resume-section-content.revealed,
.js-loaded .topic-section.revealed {
    opacity: 1;
    transform: none;
}

hr.m-0 { border-color: rgba(0,0,0,.08) !important; }

/* ═══════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-1) !important;
    font-family: 'Saira Extra Condensed', sans-serif;
}

/* Name heading glow — subtle on light bg */
h1 .text-primary,
h2 .text-primary {
    color: var(--accent) !important;
    animation: accentPulse 6s ease-in-out infinite;
}

@keyframes accentPulse {
    0%, 100% { text-shadow: 0 2px 8px rgba(189,93,56,.2); }
    50%       { text-shadow: 0 3px 16px rgba(189,93,56,.4), 0 1px 4px rgba(189,93,56,.15); }
}

.subheading {
    color: var(--accent) !important;
    letter-spacing: .12rem;
}

p, li   { color: var(--text-2) !important; }

a             { color: var(--accent); transition: color .15s; }
a:hover       { color: var(--accent-dark); text-decoration: none; }

.text-primary        { color: var(--accent) !important; }
span.text-primary    { color: var(--accent) !important; }
.text-muted          { color: var(--text-3) !important; }

/* In-section content links */
.resume-section-content a:not(.btn):not(.social-icon):not(.nav-link) {
    color: var(--accent);
}
.resume-section-content a:not(.btn):not(.social-icon):not(.nav-link):hover {
    color: var(--accent-dark);
}

.lead { color: var(--text-2) !important; }

/* ═══════════════════════════════════════
   EXPERIENCE / EDUCATION ENTRIES
═══════════════════════════════════════ */
.d-flex.flex-column.flex-md-row {
    border-left: 2px solid rgba(0,0,0,.07);
    padding-left: 1.25rem;
    transition: border-left-color .25s;
}
.d-flex.flex-column.flex-md-row:hover {
    border-left-color: var(--accent);
}

/* ═══════════════════════════════════════
   SOCIAL ICONS
═══════════════════════════════════════ */
.social-icon {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: var(--text-2) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s !important;
}
.social-icon:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(189,93,56,.35) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════
   SKILLS / DEV ICONS
═══════════════════════════════════════ */
.dev-icons .list-inline-item i {
    color: var(--text-3);
    transition: color .2s;
}
.dev-icons .list-inline-item i:hover {
    color: var(--accent);
}

.fa-ul .fa-li .fa-check       { color: var(--accent) !important; }
.fa-ul .fa-li .fa-angle-right { color: var(--accent) !important; }

/* ═══════════════════════════════════════
   BUTTONS & BADGES
═══════════════════════════════════════ */
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(189,93,56,.25);
    transition: all .2s ease;
}
.btn-primary:hover {
    background: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    box-shadow: 0 4px 16px rgba(189,93,56,.4);
    transform: translateY(-1px);
}

.badge-primary,
.badge.badge-pill.badge-primary {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(189,93,56,.2) !important;
}

/* Glass-style secondary button (Standalone link on project card) */
.btn[style*="var(--glass)"] {
    background: #f1f5f9 !important;
    border-color: rgba(0,0,0,.12) !important;
    color: var(--text-2) !important;
}

/* ═══════════════════════════════════════
   INTERVIEW PREP PAGE — LIGHT OVERRIDES
═══════════════════════════════════════ */

/* Concept / pattern boxes — keep light tint from embedded styles */
.concept-box {
    background: #fdf6f2 !important;
    border-left-color: var(--accent) !important;
    box-shadow: var(--shadow-sm) !important;
}
.concept-box h5    { color: var(--accent) !important; }
.concept-box p,
.concept-box li,
.concept-box ol li { color: var(--text-2) !important; }
.concept-box code  {
    background: rgba(0,0,0,.05);
    border-radius: 3px;
    padding: 0 3px;
    color: var(--accent-dark);
}

/* When-to-use box */
.when-box {
    background: #fffbeb !important;
    border-color: rgba(146,64,14,.2) !important;
}
.when-box strong { color: var(--yellow) !important; }

/* Code blocks — always dark for readability (standard practice) */
.code-block {
    background: #1a1e2e !important;
    color: #e2e8f0 !important;
    border-left-color: rgba(189,93,56,.5) !important;
    box-shadow: var(--shadow-sm) !important;
}
.code-copy {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #94a3b8 !important;
}
.code-copy:hover  { background: rgba(255,255,255,.15) !important; color: #e2e8f0 !important; }
.code-copy.copied { color: #4ade80 !important; border-color: #4ade80 !important; }

/* Sticky toolbar */
.prep-toolbar {
    background: rgba(248,250,252,.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

#searchInput {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.15) !important;
    color: var(--text-1) !important;
}
#searchInput::placeholder { color: var(--text-3); }
#searchInput:focus {
    background: #ffffff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(189,93,56,.15) !important;
    color: var(--text-1) !important;
}

/* Difficulty filter buttons */
.fbtn {
    border-width: 1px !important;
    letter-spacing: .04rem;
    background: transparent;
}
.fbtn-all  { border-color: var(--text-3) !important; color: var(--text-3)  !important; }
.fbtn-easy { border-color: var(--green)  !important; color: var(--green)   !important; }
.fbtn-med  { border-color: var(--yellow) !important; color: var(--yellow)  !important; }
.fbtn-hard { border-color: var(--red)    !important; color: var(--red)     !important; }
.fbtn-all.fbtn-active  { background: var(--text-3)  !important; color: #fff !important; }
.fbtn-easy.fbtn-active { background: var(--green)   !important; color: #fff !important; }
.fbtn-med.fbtn-active  { background: var(--yellow)  !important; color: #fff !important; }
.fbtn-hard.fbtn-active { background: var(--red)     !important; color: #fff !important; }

/* Progress bar */
.progress-track { background: rgba(0,0,0,.08) !important; }
.progress-fill  { background: var(--accent) !important; }
.progress-label { color: var(--text-3) !important; }

/* Hero section */
.hero-stat-num   { color: var(--accent) !important; }
.hero-stat-label { color: var(--text-3) !important; }
.hero-how {
    background: #f1f5f9 !important;
    border: 1px solid rgba(0,0,0,.08) !important;
}
.hero-how h6 { color: var(--text-3) !important; }
.hero-how li { color: var(--text-2) !important; }
.reset-btn       { color: var(--text-3) !important; }
.reset-btn:hover { color: var(--red) !important; }

/* Toggle concepts button */
.toggle-concepts-btn {
    background: #f1f5f9 !important;
    border-color: rgba(0,0,0,.1) !important;
    color: var(--text-2) !important;
}
.toggle-concepts-btn:hover {
    background: #e2e8f0 !important;
    color: var(--text-1) !important;
}

/* Problem list */
.problems-heading {
    color: var(--text-3) !important;
    border-bottom-color: rgba(0,0,0,.08) !important;
}
.problem-item         { border-bottom-color: rgba(0,0,0,.06) !important; }
.problem-item:hover   { background: rgba(189,93,56,.04) !important; }
.problem-item a       { color: var(--text-1) !important; }
.problem-item a:hover { color: var(--accent) !important; }
.problem-item.solved  { opacity: .5; }
.problem-item.solved a { text-decoration: line-through; }
.technique-tag        { color: var(--text-3) !important; }

/* Difficulty badges — dark text on tinted bg → verified ≥ 5:1 each */
.diff-E { background: rgba(21,128,61,.10)  !important; color: var(--green)  !important; }
.diff-M { background: rgba(146,64,14,.10)  !important; color: var(--yellow) !important; }
.diff-H { background: rgba(185,28,28,.10)  !important; color: var(--red)    !important; }

/* Complexity pills */
.cpill-time  { background: rgba(3,105,161,.09)  !important; color: var(--cyan)  !important; border-color: rgba(3,105,161,.2)  !important; }
.cpill-space { background: rgba(21,128,61,.09)   !important; color: var(--green) !important; border-color: rgba(21,128,61,.2)  !important; }

/* Sidebar nav — back link & divider */
.nav-back         { color: var(--text-3) !important; opacity: 1 !important; }
.nav-back:hover   { color: var(--text-2) !important; }
.nav-divider      { border-color: rgba(0,0,0,.09) !important; }

/* Per-topic progress badges in sidebar */
.nav-prog      { background: rgba(0,0,0,.06) !important;          color: var(--text-3) !important; }
.nav-prog.done { background: rgba(21,128,61,.12) !important;      color: var(--green)  !important; }

/* Back-to-top button */
#backToTop {
    background: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 16px rgba(189,93,56,.4) !important;
}
#backToTop:hover {
    background: var(--accent-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(189,93,56,.5) !important;
}

/* No-results message */
#noResults { color: var(--text-3) !important; }

/* Halal Scanner live badge */
.hs-badge {
    background: rgba(21,128,61,.1) !important;
    color: var(--green) !important;
    border-color: rgba(21,128,61,.2) !important;
}
.hs-badge .dot { background: var(--green) !important; }

/* Keyboard shortcut hint */
kbd {
    background: #f1f5f9 !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: var(--text-2) !important;
}

/* fa-check list items */
.fa-ul.mb-0 .fa-li { color: var(--accent); }

/* ═══════════════════════════════════════
   TOP NAVBAR
   Applied only to body.topnav (index.html + halal-scanner.html).
   interview-prep.html keeps its vertical sidebar for 13 topic links.
═══════════════════════════════════════ */

.topnav #sideNav {
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    min-height: 60px !important;
    text-align: left !important;
    padding: 0 1.5rem !important;
}

@media (min-width: 992px) {
    .topnav #sideNav {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        text-align: left !important;
    }
    .topnav #sideNav .navbar-brand {
        display: flex !important;
        align-items: center !important;
        margin: 0 1rem 0 0 !important;
        padding: 0 !important;
    }
    .topnav #sideNav .navbar-collapse {
        flex-direction: row !important;
        flex-grow: 1 !important;
        width: auto !important;
        margin-bottom: 0 !important;
        align-items: center !important;
    }
    .topnav #sideNav .navbar-collapse .navbar-nav {
        flex-direction: row !important;
        width: auto !important;
        margin-left: auto !important;
    }
    .topnav #sideNav .navbar-collapse .navbar-nav .nav-item {
        display: inline-flex !important;
    }
    /* Remove 17rem sidebar offset from main content */
    .topnav .container-fluid {
        margin-left: 0 !important;
        padding-top: 60px !important;
    }
}

/* Brand name */
.topnav #sideNav .navbar-brand {
    font-family: 'Saira Extra Condensed', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    letter-spacing: 0.04rem;
    white-space: nowrap;
}
.topnav #sideNav .navbar-brand .brand-accent { color: var(--accent); }

/* Always show name, always hide profile pic */
.topnav #sideNav .d-none.d-lg-block { display: none !important; }
.topnav #sideNav .d-block.d-lg-none { display: block !important; color: var(--text-1) !important; }

/* Horizontal link padding */
.topnav #sideNav .navbar-nav .nav-item .nav-link {
    padding: 0.45rem 0.7rem !important;
}

/* Bottom-underline accent instead of left-bar */
.topnav #sideNav .navbar-nav .nav-item .nav-link::before { display: none !important; }
.topnav #sideNav .navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0.7rem;
    right: 0.7rem;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
    border-radius: 1px;
}
.topnav #sideNav .navbar-nav .nav-item .nav-link:hover::after,
.topnav #sideNav .navbar-nav .nav-item .nav-link.active::after {
    transform: scaleX(1);
}

/* No sideways indent on horizontal hover */
.topnav #sideNav .navbar-nav .nav-item .nav-link:hover,
.topnav #sideNav .navbar-nav .nav-item .nav-link.active {
    padding-left: 0.7rem !important;
}

/* Anchor scroll offset — sections don't hide under fixed navbar */
.topnav section[id] { scroll-margin-top: 68px; }

/* Dark hamburger icon for light navbar */
.topnav .navbar-toggler       { border-color: rgba(0,0,0,.15) !important; }
.topnav .navbar-toggler-icon  {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2830%2C41%2C59%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Mobile collapsed nav */
@media (max-width: 991px) {
    .topnav .container-fluid { padding-top: 60px !important; }
    .topnav #sideNav .navbar-collapse {
        background: #ffffff;
        border-top: 1px solid rgba(0,0,0,.08);
        padding: 0.5rem 0;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
    }
    .topnav #sideNav .navbar-nav .nav-item .nav-link {
        padding: 0.5rem 1.25rem !important;
    }
    .topnav #sideNav .navbar-nav .nav-item .nav-link::after { display: none !important; }
}

/* Journey card container (About section) */
.journey-card { display: inline-block; max-width: 460px; width: 100%; }

/* ═══════════════════════════════════════
   RESPONSIVE TWEAKS
═══════════════════════════════════════ */
@media (max-width: 991px) {
    body::after { display: none; }
}

/* ═══════════════════════════════════════
   DARK THEME TOKENS  (html[data-theme="dark"])
   All text/background pairs verified ≥ 4.5:1 (WCAG AA):
   --text-1 #e6edf3 on #0d1117 → ~16:1  ✓
   --text-2 #9ca3af on #0d1117 →  ~7:1  ✓
   --text-3 #8b929e on #0d1117 →  ~5:1  ✓
   --accent #e88a5c on #0d1117 →  ~8:1  ✓  (on surface #161b22 → ~7:1 ✓)
═══════════════════════════════════════ */
[data-theme="dark"] {
    --bg:           #0d1117;
    --bg-surface:   #161b22;
    --accent:       #e88a5c;
    --accent-dark:  #d4723e;
    --accent-dim:   rgba(232, 138, 92, 0.15);
    --accent-glow:  rgba(232, 138, 92, 0.30);
    --text-1:       #e6edf3;
    --text-2:       #9ca3af;
    --text-3:       #8b929e;
    --border:       rgba(255, 255, 255, 0.09);
    --shadow-sm:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md:    0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
    --green:        #4ade80;
    --yellow:       #fbbf24;
    --red:          #f87171;
    --cyan:         #38bdf8;
}

/* Background pseudo-elements: adapt to dark */
[data-theme="dark"] body::before {
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
}
[data-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(232,138,92,.07) 0%, transparent 65%);
}

/* Nav */
[data-theme="dark"] #sideNav {
    background: #161b22 !important;
    border-right-color: rgba(255,255,255,.07) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .topnav #sideNav .navbar-collapse {
    background: #161b22 !important;
    border-top-color: rgba(255,255,255,.08) !important;
}
@media (max-width: 991px) {
    [data-theme="dark"] #sideNav {
        border-bottom-color: rgba(255,255,255,.07) !important;
    }
}

/* Section/hr dividers */
[data-theme="dark"] .resume-section {
    border-bottom-color: rgba(255,255,255,.06) !important;
}
[data-theme="dark"] hr.m-0 { border-color: rgba(255,255,255,.07) !important; }

/* Experience/education left-border */
[data-theme="dark"] .d-flex.flex-column.flex-md-row {
    border-left-color: rgba(255,255,255,.08) !important;
}

/* Social icons */
[data-theme="dark"] .social-icon {
    background: #1c2128 !important;
    border-color: rgba(255,255,255,.1) !important;
}

/* Text selection */
[data-theme="dark"] ::selection { background: rgba(232,138,92,.22); color: var(--text-1); }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

/* Dark hamburger → light strokes */
[data-theme="dark"] .topnav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230%2C237%2C243%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
[data-theme="dark"] .topnav .navbar-toggler { border-color: rgba(255,255,255,.15) !important; }

/* ── Interview Prep dark overrides ── */
[data-theme="dark"] .concept-box {
    background: #1c2128 !important;
}
[data-theme="dark"] .concept-box code {
    background: rgba(255,255,255,.08) !important;
    color: var(--accent) !important;
}
[data-theme="dark"] .when-box {
    background: rgba(251,191,36,.07) !important;
    border-color: rgba(251,191,36,.2) !important;
}
[data-theme="dark"] .prep-toolbar {
    background: rgba(22,27,34,.97) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] #searchInput {
    background: #1c2128 !important;
    border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] #searchInput:focus {
    background: #1c2128 !important;
    border-color: var(--accent) !important;
}
[data-theme="dark"] .toggle-concepts-btn {
    background: #1c2128 !important;
    border-color: rgba(255,255,255,.1) !important;
}
[data-theme="dark"] .toggle-concepts-btn:hover { background: #242b35 !important; }
[data-theme="dark"] .hero-how {
    background: #1c2128 !important;
    border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .problem-item { border-bottom-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .problem-item:hover { background: rgba(232,138,92,.06) !important; }
[data-theme="dark"] .nav-divider { border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .nav-prog {
    background: rgba(255,255,255,.08) !important;
    color: var(--text-3) !important;
}
[data-theme="dark"] .nav-prog.done {
    background: rgba(74,222,128,.15) !important;
    color: var(--green) !important;
}
[data-theme="dark"] .diff-E { background: rgba(74,222,128,.12) !important; }
[data-theme="dark"] .diff-M { background: rgba(251,191,36,.12) !important; }
[data-theme="dark"] .diff-H { background: rgba(248,113,113,.12) !important; }
[data-theme="dark"] .cpill-time {
    background: rgba(56,189,248,.1) !important;
    border-color: rgba(56,189,248,.2) !important;
}
[data-theme="dark"] .cpill-space {
    background: rgba(74,222,128,.1) !important;
    border-color: rgba(74,222,128,.2) !important;
}
[data-theme="dark"] kbd { background: #1c2128 !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .progress-track { background: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .problems-heading { border-bottom-color: rgba(255,255,255,.08) !important; }

/* ── Halal Scanner dark overrides ── */
[data-theme="dark"] .hs-header {
    background: #161b22 !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}

/* ═══════════════════════════════════════
   THEME TOGGLE BUTTON
═══════════════════════════════════════ */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.45rem;
    font-size: 1rem;
    color: var(--text-2);
    transition: color .15s, transform .15s;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 6px;
}
.theme-toggle:hover {
    color: var(--accent);
    transform: rotate(12deg);
}
/* Appears inline in the topnav */
.topnav .theme-toggle { margin-left: 0.5rem; }
/* Appears in sidebar nav of interview-prep */
.sidebar-toggle-wrap {
    padding: 0.6rem 1.5rem 0.8rem 1.6rem;
    border-top: 1px solid rgba(0,0,0,.07);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
[data-theme="dark"] .sidebar-toggle-wrap { border-top-color: rgba(255,255,255,.08); }

/* Pin the account + theme sections to the bottom of the fixed left sidebar
   (interview-prep). #sideNav .navbar-collapse defaults to a row flex
   container (styles.css) because the vendor template only expected a
   single <ul> child; with extra children added it was rendering beside the
   pattern list instead of below it, partly overflowing past the sidebar's
   right edge. Switch it to a column so the list and these sections stack,
   let the (long, 18-item) pattern list scroll independently if it
   overflows, and push .sidebar-account-wrap (the first of the two bottom
   sections) to the bottom via margin-top: auto — .sidebar-toggle-wrap then
   just stacks directly under it. Scoped to >=992px only — below that the
   collapse is a plain in-flow mobile dropdown, not a fixed-height column,
   so "bottom of sidebar" doesn't apply and both sections stay right after
   the list. .topnav pages override this with !important rules of their
   own, so this doesn't affect them. */
@media (min-width: 992px) {
    #sideNav .navbar-collapse {
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;   /* override styles.css's margin-bottom:auto, which would eat the growth this rule needs */
    }
    #sideNav .navbar-collapse .navbar-nav {
        flex: 0 1 auto;
        overflow-y: auto;
    }
    .sidebar-account-wrap {
        margin-top: auto;
        flex-shrink: 0;
    }
    .sidebar-toggle-wrap {
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════
   ACCOUNT (sign in / sign out) — sidebar
═══════════════════════════════════════ */
.sidebar-account-wrap {
    padding: 0.8rem 1.5rem 0.4rem 1.6rem;
    border-top: 1px solid rgba(0,0,0,.07);
}
[data-theme="dark"] .sidebar-account-wrap { border-top-color: rgba(255,255,255,.08); }

.account-signin-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.account-signin-btn:hover { border-color: var(--accent); color: var(--accent); }

.account-signed-in {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.account-avatar {
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.account-email {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-signout-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color .15s;
}
.account-signout-btn:hover { color: var(--accent); }

/* ═══════════════════════════════════════
   SIGN IN / SIGN UP MODAL
═══════════════════════════════════════ */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.auth-modal {
    position: relative;
    width: 100%;
    max-width: 22rem;
    background: var(--bg-surface);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 1.75rem 1.5rem 1.5rem;
}
.auth-modal h3 {
    font-family: 'Saira Extra Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--text-1);
    margin-bottom: 0.2rem;
}
.auth-modal-sub {
    font-size: 0.82rem;
    color: var(--text-3);
    margin-bottom: 1.1rem;
}
.auth-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-3);
    cursor: pointer;
}
.auth-modal-close:hover { color: var(--accent); }

.auth-not-configured {
    font-size: 0.85rem;
    color: var(--text-2);
    background: var(--accent-dim);
    border: 1px solid var(--accent-glow);
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    line-height: 1.5;
}

.auth-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.auth-tab {
    background: none;
    border: none;
    padding: 0.4rem 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--text-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.auth-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 0.25rem;
}
.auth-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    color: var(--text-1);
    background: var(--bg);
    margin-bottom: 0.85rem;
}
.auth-input:focus { outline: none; border-color: var(--accent); }

.auth-error {
    font-size: 0.78rem;
    color: var(--red);
    background: rgba(185,28,28,.08);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.85rem;
}

.auth-submit-btn {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.55rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.auth-submit-btn:hover { background: var(--accent-dark); }
.auth-submit-btn:disabled { opacity: 0.6; cursor: default; }

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-3);
    font-size: 0.72rem;
    margin: 1rem 0;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}
.auth-divider span { padding: 0 0.6rem; }

.auth-google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-1);
    cursor: pointer;
    transition: box-shadow .15s;
}
.auth-google-btn:hover { box-shadow: var(--shadow-sm); }
.sidebar-toggle-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09rem;
    text-transform: uppercase;
    color: var(--text-3);
}