/* ============================================================================
   BTECH.LK — BRAND SKIN  (logo-matched dark theme)
   ---------------------------------------------------------------------------
   මෙය pure override layer එකක් — කිසිම class name එකක්, markup එකක්, PHP query
   එකක් හෝ script එකක් වෙනස් කරන්නේ නෑ. හැම පිටුවකම දැනටමත් තියෙන design tokens
   ආපහු BTECH.LK logo එකේ වර්ණවලට හරවනවා විතරයි.

   Palette (logo එකෙන්ම ගත්තු):
       black    #05070B   — logo background
       card     #0C1018
       blue     #1273FF   — logo "B" එකේ electric blue
       glow     #4C9BFF   — circuit lines
       silver   #E7ECF5 → #FFFFFF gradient (logo wordmark)

   Cascade note: හැම page එකකම <style> block එකක් <head> ඇතුළේ තියෙනවා. මේ file
   එක ඒවාට පස්සේ link කරලා තිබුණත්, ඇතැම් පිටුවල </body> එකට කලින් තව theme
   block තියෙනවා. ඒ නිසා tokens `:root:root` (specificity 0,2,0) විදිහටත්,
   component rules `body .x` විදිහටත් ලියලා තියෙනවා — ඕනෑම තැනක ජය ගන්නවා.
   මේ file එක link කරන එක අයින් කළොත් සයිට් එක පරණ look එකට යනවා.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════
   1. BRAND PALETTE
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --bt-black:      #05070B;   /* page background — logo black          */
    --bt-black-2:    #080B12;   /* alternating section band              */
    --bt-black-3:    #03050A;   /* deepest (footer / hero base)          */
    --bt-card:       #0C1018;   /* card surface                          */
    --bt-card-2:     #111826;   /* raised / hover surface                */
    --bt-card-3:     #161F30;   /* input, chip, well                     */

    --bt-line:       rgba(255, 255, 255, .085);
    --bt-line-2:     rgba(255, 255, 255, .14);
    --bt-line-blue:  rgba(18, 115, 255, .32);

    --bt-blue:       #1273FF;   /* logo electric blue                    */
    --bt-blue-2:     #4C9BFF;   /* circuit-line glow                     */
    --bt-blue-3:     #8FBEFF;   /* light tint on dark                    */
    --bt-blue-deep:  #0A4FCC;   /* pressed / deep gradient stop          */
    --bt-blue-ink:   #04101F;   /* ink on a blue fill                    */
    --bt-blue-soft:  rgba(18, 115, 255, .16);
    --bt-blue-soft2: rgba(18, 115, 255, .09);

    --bt-text:       #F2F5FA;   /* logo wordmark white                   */
    --bt-muted:      #9BA9C2;
    --bt-dim:        #6C7B96;

    --bt-ok:         #34D399;
    --bt-warn:       #FBBF24;
    --bt-bad:        #F87171;

    --bt-sh-sm: 0 4px 16px rgba(0, 0, 0, .5);
    --bt-sh-md: 0 18px 48px -20px rgba(0, 0, 0, .85);
    --bt-sh-lg: 0 34px 82px -26px rgba(0, 0, 0, .95);
    --bt-sh-blue: 0 14px 34px -12px rgba(18, 115, 255, .55);

    /* logo wordmark gradient — headings වලට */
    --bt-silver: linear-gradient(180deg, #FFFFFF 0%, #E4EAF5 55%, #B9C6DC 100%);
    --bt-blue-grad: linear-gradient(135deg, var(--bt-blue-2), var(--bt-blue));
}

/* ══════════════════════════════════════════════════════════════════════
   2. TOKEN RE-POINT — පිටුවල දැනටමත් තියෙන හැම token family එකක්ම
      BTECH වර්ණවලට හරවනවා. මෙතැනින් පිටුවල 90%ක් වගේ එකපාරටම හැරෙනවා.
   ══════════════════════════════════════════════════════════════════════ */
:root:root {
    /* ── family A: public course/article pages ─────────────────────── */
    --bg:            var(--bt-black);
    --surface:       rgba(15, 21, 33, .72);
    --surface-deep:  var(--bt-card-2);
    --card:          var(--bt-card);
    --border:        var(--bt-line);
    --accent:        var(--bt-blue);
    --accent2:       var(--bt-blue-2);
    --accent3:       var(--bt-blue-3);
    --accent-light:  var(--bt-blue-soft);
    --accent-deep:   var(--bt-blue-deep);
    --gold:          var(--bt-warn);
    --success:       var(--bt-ok);
    --danger:        var(--bt-bad);
    --text:          var(--bt-text);
    --muted:         var(--bt-muted);
    --light:         var(--bt-dim);
    --shadow-sm:     var(--bt-sh-sm);
    --shadow-md:     var(--bt-sh-md);
    --shadow-lg:     var(--bt-sh-lg);
    --blur:          saturate(150%) blur(20px);

    /* ── family B: iOS-style panels (seminar, mcq, student) ────────── */
    --bg-app:        var(--bt-black);
    --bg-card:       var(--bt-card);
    --text-primary:  var(--bt-text);
    --text-secondary: var(--bt-muted);
    --accent-soft:   var(--bt-blue-soft);
    --success-soft:  rgba(52, 211, 153, .16);
    --danger-soft:   rgba(248, 113, 113, .16);
    --warning:       var(--bt-warn);
    --warn:          var(--bt-warn);
    --shadow:        var(--bt-sh-sm);

    /* ── family C: layout_2 "Simple English" skin ──────────────────── */
    --se-ink:        var(--bt-black);
    --se-ink-2:      var(--bt-black-2);
    --se-card:       var(--bt-card);
    --se-card-2:     var(--bt-card-2);
    --se-line:       var(--bt-line);
    --se-navy:       var(--bt-blue);
    --se-sky:        var(--bt-blue-2);
    --se-sky-soft:   var(--bt-blue-3);
    --se-yellow:     var(--bt-blue-2);
    --se-yellow-2:   var(--bt-blue-3);
    --se-yellow-ink: #04101F;
    --se-green:      var(--bt-ok);
    --se-red:        var(--bt-blue);

    /* ── family D: layout_3 "Modern Academy" ───────────────────────── */
    --primary:       var(--bt-blue);
    --primary-dark:  var(--bt-blue-deep);
    --ink:           var(--bt-text);
    --bg-soft:       var(--bt-black-2);
    --hero:          var(--bt-black-2);

    /* ── family F: layout_2 sub-pages (contact/events/gallery/…) ───── */
    --bg-main:       var(--bt-black);
    --bg-section:    var(--bt-black-2);
    --bg-panel:      var(--bt-card);
    --card-hover-bg: var(--bt-card-2);
    --input-bg:      var(--bt-card-3);
    --text-dark:     var(--bt-text);
    --text-main:     var(--bt-text);
    --text-muted:    var(--bt-muted);
    --brand:         var(--bt-blue);
    --primary-hover: var(--bt-blue-deep);
    --accent-hover:  var(--bt-blue-deep);

    /* ── family E: already-dark auth pages ─────────────────────────── */
    --panel:         var(--bt-card);
    --tx:            var(--bt-text);
    --tx2:           var(--bt-muted);
    --bd:            var(--bt-line);
    --in:            var(--bt-card-3);
    --blue:          var(--bt-blue);
    --red:           var(--bt-bad);
}

/* student portal එකේ dark toggle එක තවම වැඩ කරන්න ඕන නිසා —
   default = BTECH black, "dark" = OLED pure black. දෙකම logo එකට ගැලපෙනවා. */
:root:root[data-theme="dark"] {
    --bg-app:        #000000;
    --bg-card:       #0A0D14;
    --surface-deep:  #0E1420;
    --border:        rgba(255, 255, 255, .11);
}

/* ══════════════════════════════════════════════════════════════════════
   3. BASE
   ══════════════════════════════════════════════════════════════════════ */
html,
body {
    background: var(--bt-black);
}

body {
    color: var(--bt-text);
    color-scheme: dark;
}

::selection {
    background: rgba(18, 115, 255, .38);
    color: #fff;
}

/* scrollbar — circuit blue */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bt-black-2); }
::-webkit-scrollbar-thumb { background: #1E2B42; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--bt-blue); }

/* ══════════════════════════════════════════════════════════════════════
   4. AMBIENT BACKGROUNDS — light mesh/orbs → deep blue circuit glow
   ══════════════════════════════════════════════════════════════════════ */
body .mesh { background: var(--bt-black); }

body .mesh::before,
body .mesh::after {
    background:
        radial-gradient(40% 40% at 20% 25%, rgba(18, 115, 255, .30), transparent 62%),
        radial-gradient(35% 35% at 80% 20%, rgba(76, 155, 255, .20), transparent 62%),
        radial-gradient(45% 45% at 70% 80%, rgba(18, 115, 255, .18), transparent 62%),
        radial-gradient(35% 35% at 25% 85%, rgba(10, 79, 204, .22), transparent 62%);
    filter: blur(30px);
}

body .grain { opacity: .05; }

body .orb { filter: blur(140px); opacity: .30; }
body .orb-a { background: radial-gradient(circle, #1273FF, #05070B); }
body .orb-b { background: radial-gradient(circle, #0A4FCC, #05070B); }
body .orb-c { background: radial-gradient(circle, #123E7A, #05070B); }

body .ambient { filter: none; }

/* ══════════════════════════════════════════════════════════════════════
   5. NAVBAR / HEADER — frosted white → frosted black w/ blue hairline
   ══════════════════════════════════════════════════════════════════════ */
body .navbar,
body header.navbar {
    background: rgba(5, 7, 11, .72);
    border-bottom: 1px solid var(--bt-line);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
}

body .navbar.scrolled {
    background: rgba(5, 7, 11, .94);
    border-bottom-color: var(--bt-line-blue);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .95);
}

body .nav-links a { color: var(--bt-muted); }
body .nav-links a:hover,
body .nav-links a.active { color: var(--bt-text); }
body .nav-links a:hover { background: var(--bt-blue-soft2); }
body .logo-wrap { color: var(--bt-text); }
body .hamburger { color: var(--bt-text); }

@media (max-width: 900px) {
    body .nav-links {
        background: rgba(5, 7, 11, .98);
        border-bottom: 1px solid var(--bt-line);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   6. SURFACES — glass / cards / panels
   ══════════════════════════════════════════════════════════════════════ */
body .glass,
body .card,
body .panel,
body .course,
body .faq-item,
body .comm-item,
body .lb-item,
body .result-card {
    background: linear-gradient(158deg, var(--bt-card-2), var(--bt-card));
    border: 1px solid var(--bt-line);
    box-shadow: var(--bt-sh-md);
    color: var(--bt-text);
}

body .glass::before { display: none; }

body .glass::after {
    background: linear-gradient(158deg,
        rgba(255, 255, 255, .10),
        rgba(255, 255, 255, 0) 42%,
        rgba(18, 115, 255, .22) 100%);
}

body .glass:hover,
body .card:hover,
body .course:hover {
    border-color: var(--bt-line-blue);
}

body .alt-bg,
body .section.soft {
    background: var(--bt-black-2);
    border-top: 1px solid var(--bt-line);
    border-bottom: 1px solid var(--bt-line);
}

/* ══════════════════════════════════════════════════════════════════════
   7. TYPE — headings pick up the logo's white→silver wordmark gradient
   ══════════════════════════════════════════════════════════════════════ */
body .section-h,
body .sec-h,
body .hero-title {
    background: var(--bt-silver);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bt-text);
}

body .eyebrow { color: var(--bt-blue-2); }
body .sec-sub,
body .hero-desc,
body .muted { color: var(--bt-muted); }

body h1, body h2, body h3, body h4, body h5 { color: var(--bt-text); }

/* ══════════════════════════════════════════════════════════════════════
   8. BUTTONS — solid electric blue with a circuit glow
   ══════════════════════════════════════════════════════════════════════ */
body .btn-nav,
body .btn-dark,
body .btn-accent,
body .btn-primary,
body .hero-btn-primary,
body .nav-links a.btn-dark {
    background: linear-gradient(135deg, var(--bt-blue-2), var(--bt-blue));
    color: #fff;
    border: none;
    box-shadow: var(--bt-sh-blue);
}

body .btn-nav:hover,
body .btn-dark:hover,
body .btn-accent:hover,
body .btn-primary:hover,
body .hero-btn-primary:hover,
body .nav-links a.btn-dark:hover {
    background: linear-gradient(135deg, #6FB0FF, var(--bt-blue-2));
    color: #fff;
    box-shadow: 0 20px 44px -14px rgba(18, 115, 255, .75);
}

body .btn-ghost,
body .btn-outline {
    background: rgba(18, 115, 255, .07);
    border: 1.5px solid var(--bt-line-blue);
    color: var(--bt-blue-3);
}

body .btn-ghost:hover,
body .btn-outline:hover {
    background: var(--bt-blue);
    border-color: var(--bt-blue);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   9. FORMS
   ══════════════════════════════════════════════════════════════════════ */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body select,
body textarea,
body .f-input {
    background: var(--bt-card-3);
    border: 1px solid var(--bt-line);
    color: var(--bt-text);
}

body input::placeholder,
body textarea::placeholder,
body .f-input::placeholder { color: var(--bt-dim); }

body input:focus,
body select:focus,
body textarea:focus,
body .f-input:focus {
    background: var(--bt-card-2);
    border-color: var(--bt-blue);
    box-shadow: 0 0 0 4px rgba(18, 115, 255, .18);
    outline: none;
}

body select option { background: var(--bt-card); color: var(--bt-text); }

/* ══════════════════════════════════════════════════════════════════════
   10. TABLES (student portal / reports)
   ══════════════════════════════════════════════════════════════════════ */
body table { color: var(--bt-text); }
body thead th { background: var(--bt-card-2); color: var(--bt-muted); border-color: var(--bt-line); }
body tbody td { border-color: var(--bt-line); }
body tbody tr:hover { background: rgba(18, 115, 255, .06); }

/* ══════════════════════════════════════════════════════════════════════
   11. FOOTER + misc chrome
   ══════════════════════════════════════════════════════════════════════ */
body footer {
    background: var(--bt-black-3);
    border-top: 1px solid var(--bt-line);
    color: var(--bt-muted);
}

body .footer-col h4 { color: var(--bt-text); }
body .footer-col a { color: var(--bt-muted); }
body .footer-col a:hover { color: var(--bt-blue-2); }
body .footer-bottom { border-top: 1px solid var(--bt-line); color: var(--bt-dim); }

body .social-btn { background: var(--bt-blue-soft); color: var(--bt-blue-2); }
body .social-btn:hover { background: var(--bt-blue); color: #fff; }

body #scrollProgress {
    background: linear-gradient(90deg, var(--bt-blue), var(--bt-blue-2));
    box-shadow: 0 0 14px rgba(18, 115, 255, .7);
}

/* modals / overlays */
body .inst-modal,
body .comm-modal,
body .modal-backdrop { background: rgba(2, 4, 8, .82); }

body .inst-modal-box,
body .comm-modal-box,
body .modal-box {
    background: var(--bt-card);
    border: 1px solid var(--bt-line);
    box-shadow: var(--bt-sh-lg);
}

/* ============================================================================
   SweetAlert2 popups
   ----------------------------------------------------------------------------
   SweetAlert renders a hard-coded WHITE popup, but its title is an <h2> and the
   rebrand above paints every body heading with --bt-text (light). The result
   was a near-white title on a white card at 1.09:1 — the registration success
   dialog was effectively blank. Give the popup the same dark surface the rest
   of the site uses so background and text come from one palette.
   ============================================================================ */
.swal2-popup {
    background: var(--bt-card, #0C1018) !important;
    color: var(--bt-text, #F2F5FA) !important;
    border: 1px solid var(--bt-line, rgba(255,255,255,.085));
    border-radius: 16px;
}
.swal2-popup .swal2-title { color: var(--bt-text, #F2F5FA) !important; }
.swal2-popup .swal2-html-container,
.swal2-popup .swal2-content { color: var(--bt-muted, #9BA9C2) !important; }
.swal2-popup .swal2-close { color: var(--bt-muted, #9BA9C2); }
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    background: var(--bt-card-3, #131A26);
    color: var(--bt-text, #F2F5FA);
    border: 1px solid var(--bt-line, rgba(255,255,255,.085));
}

/* ============================================================================
   PUBLIC NAV BETWEEN 993px AND 1200px
   ----------------------------------------------------------------------------
   The mobile hamburger only appears at 992px. Just above that the desktop nav
   still has seven links plus the Login/Dashboard button, which needs ~959px but
   only gets ~700 — so the row overflowed by ~200px and body{overflow-x:hidden}
   quietly clipped the Login button off the right edge. Tightening the spacing
   in that band lets the whole row fit instead of disappearing.
   ============================================================================ */
@media (min-width: 993px) and (max-width: 1200px) {
    body .navbar { padding-left: 22px !important; padding-right: 22px !important; }
    body .nav-wrapper { min-width: 0; flex: 1 1 auto; gap: 14px !important; justify-content: flex-end; }
    body .nav-menu { min-width: 0; flex-wrap: nowrap; gap: 2px !important; }
    body .nav-menu a { padding-left: 9px !important; padding-right: 9px !important; font-size: 13px !important; white-space: nowrap; }
    body .nav-wrapper > div:last-child { flex: 0 0 auto; }
}