/* ============================================================================
   BTECH.LK — CIRCUIT LAB, the student workspace
   ---------------------------------------------------------------------------
   Landing page එකේ භාෂාවම, ඒත් මෙතන දරුවා වැඩ කරනවා — බලනවා නෙවෙයි.
   ඒ නිසා: චලනය අඩුයි, contrast වැඩියි, density වැඩියි, කිසිම දෙයක් කියවීමට
   බාධා කරන්නේ නෑ. Board එකේ රූපකය තියෙනවා, ඒත් නිශ්ශබ්දව.

   Scope: body.bt-app — student/ folder එකේ පිටු 39. Admin එකට බලපාන්නේ නෑ.
   ============================================================================ */

/* The workspace keeps its light/dark switch. Only the tokens change between the
   two — every rule below is written against them, so both themes stay coherent
   and the toggle keeps doing something real. */
html body.bt-app {
    --cl-signal:    var(--accent,  #1273FF);
    --cl-glow:      var(--accent2, #4C9BFF);
    --cl-trace:     color-mix(in srgb, var(--cl-glow) 20%, transparent);
    --cl-halo:      color-mix(in srgb, var(--cl-signal) 40%, transparent);

    /* re-point the workspace's own tokens at the board */
    --bg-app:       var(--cl-void);
    --bg-card:      var(--cl-card);
    --text-primary: var(--cl-silver);
    --text-secondary: var(--cl-mute);
    --border:       var(--cl-copper);
    --accent-soft:  color-mix(in srgb, var(--cl-signal) 14%, transparent);
    --shadow:       none;

    background: var(--cl-void);
    color: var(--cl-silver);
}

/* ── night: the board ──────────────────────────────────────── */
html:not([data-theme="light"]) body.bt-app {
    --cl-void:      #05070D;
    --cl-void-2:    #080B13;
    --cl-card:      #0C1220;
    --cl-card-2:    #0D1322;
    --cl-card-3:    #090D17;
    --cl-well:      #070B13;
    --cl-well-2:    #0A0F1A;
    --cl-copper:    #101927;
    --cl-silver:    #E8EEF9;
    --cl-mute:      #93A3BF;
    --cl-dim:       #62728D;
}

/* ── day: the same board, etched on white ──────────────────── */
html[data-theme="light"] body.bt-app {
    --cl-void:      #F4F7FC;
    --cl-void-2:    #EDF2F9;
    --cl-card:      #FFFFFF;
    --cl-card-2:    #FFFFFF;
    --cl-card-3:    #F8FAFF;
    --cl-well:      #F4F7FC;
    --cl-well-2:    #FFFFFF;
    --cl-copper:    #DDE5F2;
    --cl-silver:    #14223A;
    --cl-mute:      #526580;
    --cl-dim:       #6B7C96;
}

/* the substrate, at a whisper — a workspace should not compete for attention */
html body.bt-app::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cl-glow) 2.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cl-glow) 2.5%, transparent) 1px, transparent 1px);
    background-size: 58px 58px, 58px 58px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}
html body.bt-app > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — the board's edge connector
   ══════════════════════════════════════════════════════════════ */
html body.bt-app .sidebar {
    background: var(--cl-void-2);
    border-right: 1px solid var(--cl-copper);
    box-shadow: none;
    position: fixed;
}
html body.bt-app .sidebar::after {          /* the lit rail down the edge */
    content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent, var(--cl-trace) 18%, var(--cl-trace) 82%, transparent);
}
html body.bt-app .sidebar .logo { padding-block: 4px 8px; }
html body.bt-app .sidebar .logo img { object-fit: contain; object-position: left center; }

html body.bt-app .menu-section {
    color: var(--cl-dim); font-size: 9.5px; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase; opacity: 1;
}
html body.bt-app .menu-section::before {
    background: linear-gradient(90deg, var(--cl-copper), transparent);
}
html body.bt-app .sidebar .menu a {
    color: var(--cl-mute); font-size: 13.5px; font-weight: 500;
    border-radius: 10px; margin-block: 3px; position: relative;
    transition: background .22s, color .22s;
}
html body.bt-app .sidebar .menu a::before {  /* trace stub into the active row */
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
    border-radius: 2px; background: var(--cl-glow);
    scale: 1 0; transform-origin: center;
    transition: scale .3s cubic-bezier(.22,.61,.36,1);
}
html body.bt-app .sidebar .menu a:hover { background: color-mix(in srgb, var(--cl-signal) 7%, transparent); color: var(--cl-silver); }
html body.bt-app .sidebar .menu a.active {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--cl-signal) 17%, transparent),
        color-mix(in srgb, var(--cl-signal) 5%, transparent));
    color: var(--cl-silver); font-weight: 650;
}
html body.bt-app .sidebar .menu a.active::before { scale: 1 1; }
html body.bt-app .sidebar .menu a i.bx {
    background: color-mix(in srgb, var(--cl-signal) 10%, transparent);
    color: var(--cl-mute); border-radius: 9px;
    transition: background .22s, color .22s;
}
html body.bt-app .sidebar .menu a:hover i.bx { color: var(--cl-glow); }
html body.bt-app .sidebar .menu a.active i.bx {
    background: var(--cl-signal); color: #fff;
    box-shadow: 0 4px 14px -4px var(--cl-halo);
}
html body.bt-app .menu a .nav-badge {
    background: var(--cl-signal); color: #fff;
    box-shadow: 0 0 10px var(--cl-halo);
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
html body.bt-app .header {
    border-bottom: 1px solid var(--cl-copper);
    padding-bottom: 22px; margin-bottom: 28px;
}
html body.bt-app .header-left h1 {
    font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.04em; font-weight: 800;
    color: var(--cl-silver);
}
/* the silver wash only reads on the dark board — on white it would vanish */
html:not([data-theme="light"]) body.bt-app .header-left h1 {
    background: linear-gradient(174deg, #fff 12%, #D8E3F5 58%, #93A6C6 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html body.bt-app .header-left p { color: var(--cl-mute); font-size: 13.5px; }
html body.bt-app :is(.icon-btn, .menu-toggle, .theme-toggle-btn, .control-btn) {
    background: var(--cl-void-2); border: 1px solid var(--cl-copper);
    color: var(--cl-mute); border-radius: 10px; box-shadow: none;
    transition: border-color .22s, color .22s, background .22s;
}
html body.bt-app :is(.icon-btn, .menu-toggle, .control-btn):hover {
    border-color: color-mix(in srgb, var(--cl-glow) 36%, transparent);
    color: var(--cl-glow);
    background: color-mix(in srgb, var(--cl-signal) 8%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   CARDS — seated components
   ══════════════════════════════════════════════════════════════ */
html body.bt-app :is(.card, .tcard, .state-card, .modal-card, .stat-box, .q-link, .opt) {
    position: relative;
    background: linear-gradient(158deg, var(--cl-card-2), var(--cl-card-3));
    border: 1px solid var(--cl-copper);
    border-radius: 14px; box-shadow: none;
    transition: border-color .3s, translate .3s;
}
html body.bt-app :is(.card, .tcard, .state-card):hover {
    border-color: color-mix(in srgb, var(--cl-glow) 32%, transparent);
}
html body.bt-app :is(.card, .tcard)::before {
    content: ''; position: absolute; inset: 9px auto auto 9px;
    width: 10px; height: 10px; pointer-events: none;
    border-top: 1.5px solid var(--cl-trace); border-left: 1.5px solid var(--cl-trace);
    border-top-left-radius: 4px; transition: border-color .3s; opacity: .8;
}
html body.bt-app :is(.card, .tcard):hover::before { border-color: var(--cl-glow); }

html body.bt-app .card-title {
    color: var(--cl-silver); font-size: 15px; font-weight: 650;
    border-bottom: 1px solid var(--cl-copper); padding-bottom: 14px;
}
html body.bt-app .sub, html body.bt-app .hint { color: var(--cl-mute); font-size: 13px; }

/* the dashboard hero reads as the powered module */
html body.bt-app .hero-card {
    background:
        radial-gradient(ellipse at 88% 18%, color-mix(in srgb, var(--cl-signal) 26%, transparent), transparent 56%),
        linear-gradient(112deg, color-mix(in srgb, var(--cl-signal) 22%, var(--cl-card)), var(--cl-card));
    border: 1px solid color-mix(in srgb, var(--cl-glow) 24%, transparent);
    border-radius: 18px; box-shadow: none;
}
/* The hero is the one saturated module in the workspace, in both themes — it
   carries white text, so the fill has to stay dark enough to hold it. */
html[data-theme="light"] body.bt-app .hero-card {
    background:
        radial-gradient(ellipse at 88% 18%, color-mix(in srgb, var(--cl-glow) 55%, transparent), transparent 58%),
        linear-gradient(112deg, var(--cl-signal), color-mix(in srgb, var(--cl-signal) 72%, #0A1120));
    border-color: color-mix(in srgb, var(--cl-signal) 40%, transparent);
}
html body.bt-app .hero-card :is(h2, p, .sub, span) { color: #fff; }
html body.bt-app .hero-card h2 { letter-spacing: -.035em; }
html body.bt-app .hero-card .btn {
    background: var(--cl-signal); color: #fff; border-radius: 10px; font-weight: 700;
}

/* stat tiles read as instrument channels */
html body.bt-app .stat-box { padding: 22px 18px; }
html body.bt-app .stat-box :is(.v, .k) { display: block; }
html body.bt-app .stat-box .v,
html body.bt-app .stat-num {
    color: var(--cl-glow); font-weight: 800; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 24px var(--cl-halo);
}
html body.bt-app .stat-box .k,
html body.bt-app .stat-lbl {
    color: var(--cl-dim); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; margin-top: 6px;
}

/* chips, pills, badges */
html body.bt-app :is(.pill, .chip, .badge-soft) {
    background: color-mix(in srgb, var(--cl-signal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cl-glow) 20%, transparent);
    color: var(--cl-glow); border-radius: 7px;
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS + FORMS
   ══════════════════════════════════════════════════════════════ */
html body.bt-app :is(.btn, .btn-primary, .btn-submit, .btn-join, .bq-go, .pv-btn) {
    position: relative; overflow: hidden; border-radius: 10px;
    background: linear-gradient(118deg, var(--cl-signal), var(--cl-glow));
    color: #fff; border: 1px solid color-mix(in srgb, var(--cl-glow) 34%, transparent);
    box-shadow: 0 6px 20px -10px var(--cl-halo);
    font-weight: 650;
}
html body.bt-app :is(.btn, .btn-primary, .btn-submit, .btn-join, .bq-go)::after {
    content: ''; position: absolute; inset: 0; translate: -110% 0;
    background: linear-gradient(96deg, transparent, rgba(255,255,255,.32), transparent);
    transition: translate .6s cubic-bezier(.22,.61,.36,1);
}
html body.bt-app :is(.btn, .btn-primary, .btn-submit, .btn-join, .bq-go):hover::after { translate: 110% 0; }
html body.bt-app :is(.btn, .btn-primary, .btn-submit, .btn-join, .bq-go):hover { translate: 0 -2px; }

html body.bt-app :is(.btn-ghost, .btn-line) {
    background: color-mix(in srgb, var(--cl-glow) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cl-glow) 24%, transparent);
    color: #CBD9EE; border-radius: 10px;
}
html body.bt-app :is(.btn-ghost, .btn-line):hover {
    border-color: var(--cl-glow); color: #fff;
    background: color-mix(in srgb, var(--cl-glow) 12%, transparent);
}

html body.bt-app :is(.form-control, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) {
    background: var(--cl-well); border: 1px solid var(--cl-copper);
    border-radius: 10px; color: var(--cl-silver);
    transition: border-color .22s, box-shadow .22s, background .22s;
}
html body.bt-app :is(.form-control, input, select, textarea):focus {
    border-color: var(--cl-glow); background: var(--cl-well-2); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-signal) 15%, transparent);
}
html body.bt-app .form-group label { color: var(--cl-mute); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   TABLES + LISTS + MODALS + EMPTY STATES
   ══════════════════════════════════════════════════════════════ */
html body.bt-app table { border-color: var(--cl-copper); }
html body.bt-app thead th {
    background: var(--cl-void-2); color: var(--cl-dim);
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    border-color: var(--cl-copper);
}
html body.bt-app tbody td { border-color: var(--cl-copper); color: var(--cl-mute); }
html body.bt-app tbody tr:hover { background: color-mix(in srgb, var(--cl-signal) 6%, transparent); }

html body.bt-app .modal-overlay {
    background: color-mix(in srgb, var(--cl-void) 86%, transparent);
    backdrop-filter: blur(8px);
}
html body.bt-app .modal-card {
    background: linear-gradient(158deg, var(--cl-card-2), var(--cl-card-3));
    border: 1px solid color-mix(in srgb, var(--cl-glow) 22%, transparent);
    border-radius: 18px;
}

html body.bt-app :is(.empty, .empty-state, .no-live) {
    border: 1px dashed color-mix(in srgb, var(--cl-glow) 16%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--cl-void-2) 70%, transparent);
    color: var(--cl-mute);
}

/* mobile nav bar */
html body.bt-app .mobile-nav {
    background: color-mix(in srgb, var(--cl-void) 94%, transparent);
    border-top: 1px solid var(--cl-copper);
    backdrop-filter: blur(14px);
}
html body.bt-app .nav-item { color: var(--cl-dim); }

/* Phones: the fixed bar sits on top of the page, so the last cards and buttons
   were hidden under it. Pages reserved a flat 100px, but admin-set labels wrap
   to two lines and the bar grows past that. student/portal-experience.js
   measures the real bar into --bt-mnav-h; 130px covers the pages that do not
   load it. !important beats each page's own inline padding-bottom. */
@media (max-width: 768px) {
    html body.bt-app .main-content {
        padding-bottom: calc(var(--bt-mnav-h, 130px) + 24px + env(safe-area-inset-bottom)) !important;
    }
}

/* Phones: nothing in a student page may be wider than the screen.
   - Header: portal-advanced.css pins .header to nowrap (!important), so a long
     name or page title next to the icon buttons slid under them. Let it wrap,
     let the title side shrink, and break a single over-long word.
   - Media and code blocks never outgrow their box; a long URL in a notice or
     note wraps instead of pushing the page sideways. */
@media (max-width: 768px) {
    html body.bt-app .main-content > .header { flex-wrap: wrap !important; row-gap: 12px; }
    html body.bt-app .main-content > .header > :first-child { min-width: 0; flex: 1 1 auto; }
    html body.bt-app .main-content > .header .header-left { min-width: 0; }
    html body.bt-app .main-content > .header .header-left :is(h1, h2) { overflow-wrap: anywhere; }
    html body.bt-app .main-content { overflow-wrap: break-word; }
    html body.bt-app .main-content :is(img, video, iframe, embed, object, canvas) { max-width: 100%; }
    html body.bt-app .main-content pre { max-width: 100%; overflow-x: auto; }
}
html body.bt-app .nav-item.active { color: var(--cl-glow); }

/* ══════════════════════════════════════════════════════════════
   THINGS THAT MUST STAY AS THEY ARE
   PDF/paper viewers, QR codes and the drawing canvas are white on
   purpose — a document is a document.
   ══════════════════════════════════════════════════════════════ */
html body.bt-app :is(.pv-holder, .qr-wrap, .card-qr-wrapper) {
    background: #fff; border-color: var(--cl-copper);
}

/* ══════════════════════════════════════════════════════════════
   ENTRY MOTION — one quiet pass, driven by the browser
   ══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
    html body.bt-app .main-content :is(.card, .tcard, .state-card, .stat-box, .q-link) {
        animation: cl-app-enter linear both;
        animation-timeline: view();
        animation-range: entry 2% cover 20%;
    }
}
@keyframes cl-app-enter {
    from { opacity: 0; translate: 0 16px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html body.bt-app .main-content :is(.card, .tcard, .state-card, .stat-box, .q-link) {
        animation: none; opacity: 1; translate: 0 0;
    }
    html body.bt-app :is(.btn, .btn-primary, .btn-submit)::after { transition: none; }
    html body.bt-app .sidebar .menu a::before { transition: none; }
}

/* phones: drop the blur, keep the look */
@media (max-width: 820px), (hover: none) {
    html body.bt-app :is(.mobile-nav, .modal-overlay) {
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    html body.bt-app .mobile-nav { background: var(--cl-void-2); }
    html body.bt-app .modal-overlay { background: color-mix(in srgb, var(--cl-void) 94%, transparent); }
}