/*
  Student web portal, on top of lms.css (a verbatim copy of design/prototype/lms.css, the approved design).
  Only what the prototype does not cover lives here: links instead of prototype buttons, the phone drawer, menus,
  forms and sign-in pages, flash and empty states, and brand-aware versions of a few hard-coded prototype colours.
  Brand colours (admin Settings > Branding) are injected after this file as CSS variables (App\Domain\Portal\View\Theme).
*/

:root { --on-primary: #fff; --amber-ink: #b97800; --drawer-w: 288px; }
[data-theme="dark"] { --on-primary: #0b1614; --amber-ink: #f5a524; color-scheme: dark; }

/* ---- brand-aware fixes of hard-coded prototype colours ---- */
.btn-primary { color: var(--on-primary); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.chip.amber, .nb { color: var(--amber-ink); }
.hero, .upgrade { background: var(--navy); }
.heat i.l1 { background: color-mix(in srgb, var(--primary) 26%, var(--surface)); }
.heat i.l2 { background: color-mix(in srgb, var(--primary) 52%, var(--surface)); }
.heat i.l3 { background: color-mix(in srgb, var(--primary) 78%, var(--surface)); }
.heat i.l4 { background: var(--primary-600); }
.ico.rose { background: var(--rose-50); color: var(--rose); }

/* ---- accessibility helpers ---- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 12px; }
[x-cloak] { display: none !important; }
main:focus { outline: none; }
a.card, a.card:hover { color: inherit; }
.link { color: var(--primary); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ---- sidebar (prototype used <button class="nav">, the portal uses links) ---- */
.sidebar .nav-groups { display: flex; flex-direction: column; gap: 4px; }
.sidebar a.nav { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 500; color: inherit; transition: background .15s; }
.sidebar a.nav:hover { background: var(--bg); color: var(--ink); }
.sidebar a.nav[aria-current="page"] { background: var(--primary-50); color: var(--primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); }
.sidebar .logo { justify-content: space-between; }
.sidebar .logo a { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
.brand-img { max-height: 38px; max-width: 180px; width: auto; height: auto; display: block; }
/* Default brand mark (x-portal.brand-mark): a teal hexagon; inverted in dark mode and on dark panels (.on-dark). */
.brand-mark { flex: none; display: block; }
.brand-mark .bm-hex { fill: #0e5e56; }
.brand-mark .bm-head, .brand-mark .bm-c1 { fill: #fff; }
.brand-mark .bm-c2 { fill: #7ed9ae; }
[data-theme="dark"] .brand-mark .bm-hex, .brand-mark.on-dark .bm-hex { fill: #fff; }
[data-theme="dark"] .brand-mark .bm-head, [data-theme="dark"] .brand-mark .bm-c1, .brand-mark.on-dark .bm-head, .brand-mark.on-dark .bm-c1 { fill: #0e5e56; }
[data-theme="dark"] .brand-mark .bm-c2, .brand-mark.on-dark .bm-c2 { fill: #2fa37e; }
.brand-img.dark, [data-theme="dark"] .has-dark .brand-img.light { display: none; }
[data-theme="dark"] .has-dark .brand-img.dark { display: block; }
.sidebar .close { display: none; }
.upgrade a.btn { color: #3a2600; }

/* ---- top bar ---- */
.topbar .menu-btn, .topbar .brand-sm, .topbar .search-btn { display: none; }
.topbar a.chip:hover { filter: brightness(.97); }
.topbar .chip { white-space: nowrap; }
.topbar .avatar { flex: none; border: 0; cursor: pointer; }
.search { position: relative; }
.search button { color: var(--muted); display: grid; place-items: center; }

/* ---- menus (avatar, notifications) ---- */
.menu { position: relative; display: flex; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg); padding: 8px; z-index: 30; display: grid; gap: 2px; }
.menu-panel .item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; text-align: left; }
.menu-panel .item:hover, .menu-panel .item:focus-visible { background: var(--bg); }
.menu-panel .item svg.i { color: var(--muted); }
.menu-panel form { margin: 0; }
.menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 2px; }
.menu-head .b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-panel .see-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; border-radius: 0 0 10px 10px; color: var(--primary); font-weight: 600; }
.notes { width: min(360px, calc(100vw - 24px)); padding: 12px; }
.notes h2 { font-size: 15px; padding: 4px 6px 8px; }
.note { display: flex; gap: 12px; padding: 10px 6px; border-radius: 12px; align-items: flex-start; color: var(--ink); }
.note:hover { background: var(--bg); }
.note .ico { width: 38px; height: 38px; }

/* ---- page content ---- */
.flash { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; margin-bottom: 18px; font-weight: 500; background: var(--primary-50); color: var(--ink); }
.flash.green { background: var(--green-50); } .flash.amber { background: var(--amber-50); } .flash.red { background: var(--red-50); }
.flash svg.i { margin-top: 1px; color: var(--primary); } .flash.green svg.i { color: var(--green); } .flash.amber svg.i { color: var(--amber-ink); } .flash.red svg.i { color: var(--red); }
.empty .ico { margin: 0 auto 14px; width: 52px; height: 52px; border-radius: 16px; }
.empty h3 { color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.empty p { max-width: 440px; margin: 0 auto; }
.empty .actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.empty.sm { padding: 22px 12px; }
.hero .hero-empty { max-width: 520px; }
.hero .chip.on-dark { background: rgba(255,255,255,.18); color: #fff; }
.stat > div { min-width: 0; }
.course .thumb { background: var(--primary-fixed, var(--primary)); }
.course .meta { flex-wrap: wrap; }
.paths-empty { grid-column: 1 / -1; }
.bars i { transition: height .3s; }
.bars .day { flex: 1; display: grid; gap: 8px; justify-items: center; align-content: end; height: 100%; font-size: 12px; color: var(--muted); }
.bars .day.today { color: var(--ink); font-weight: 700; }
.weights .progress i { background: var(--primary); }
.coretopics { padding-left: 18px; display: grid; gap: 8px; }
.scales { flex-wrap: wrap; }
/* Never let one wide element widen the whole page on a phone (the browser would zoom out and hide the bottom bar). */
.content { overflow-x: clip; }
.pathway[hidden] { display: none; }
.coming { max-width: 640px; }

/* ---- forms ---- */
.form { display: grid; gap: 16px; }
.field label, .field .label { color: var(--ink); }
.field .control { position: relative; display: flex; }
.field .control input, .field .control select { width: 100%; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.field select:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 4px var(--primary-50); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field .err { color: var(--red); font-weight: 500; font-size: 13px; }
.field .hint { color: var(--muted); font-weight: 400; font-size: 13px; }
.field .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.field .prefix + input { padding-left: 50px; }
.field .reveal { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.field .reveal:hover { color: var(--ink); background: var(--bg); }
.field .reveal + input, .field input.has-reveal { padding-right: 48px; }
.field input.code { letter-spacing: .45em; text-align: center; font: 700 24px var(--display); height: 58px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); margin-top: 1px; flex: none; }
.choice { border: 0; padding: 0; display: grid; gap: 8px; }
.choice legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.pills label { position: relative; }
.pills input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pills label span { display: inline-block; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; }
.pills input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pills input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.form-error { display: flex; gap: 10px; align-items: flex-start; background: var(--red-50); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 500; }
.form-error svg.i { color: var(--red); margin-top: 1px; }
.form .btn { width: 100%; min-height: 50px; }
.form-foot { text-align: center; font-size: 14px; color: var(--muted); }
.resend { text-align: center; font-size: 14px; color: var(--muted); }
.resend button { color: var(--primary); font-weight: 600; }
.resend button[disabled] { color: var(--muted); cursor: default; font-weight: 500; }

/* ---- sign-in pages ---- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-aside { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; padding: 44px 52px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
/* Photo (public/web/img, desktop only) under a navy gradient that keeps the copy readable over it. */
.auth-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%; z-index: -2; }
.auth-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 52%, transparent) 0%, color-mix(in srgb, var(--navy) 6%, transparent) 20%, color-mix(in srgb, var(--navy) 14%, transparent) 40%, color-mix(in srgb, var(--navy) 84%, transparent) 58%, color-mix(in srgb, var(--navy) 97%, transparent) 74%); }
.auth-copy { margin-top: auto; }
.auth-aside > :not(.auth-photo) { position: relative; }
.auth-aside .logo { padding: 0; color: #fff; }
.auth-aside .logo small { color: rgba(255,255,255,.75); }
.auth-aside h2 { font-size: 34px; max-width: 460px; margin-bottom: 12px; }
.auth-aside p { opacity: .85; max-width: 440px; }
.auth-aside ul { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 26px; }
.auth-aside li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.auth-aside li .ico { background: rgba(255,255,255,.14); color: #fff; width: 38px; height: 38px; }
.auth-aside .foot { font-size: 13px; opacity: .7; }
.auth-main { display: grid; place-items: center; padding: 40px 24px 56px; }
.auth-card { width: 100%; max-width: 440px; display: grid; gap: 22px; }
.auth-card .logo { padding: 0; display: none; }
.auth-card h1 { font-size: 28px; }
.auth-card .lead { color: var(--muted); margin-top: 6px; }
.auth-card .stepper span { font-size: 12px; padding: 6px 12px; }
.auth .theme-toggle { position: absolute; top: 18px; right: 18px; }

/* ---- tablet and phone ---- */
@media (max-width: 1100px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card .logo { display: flex; }
}

@media (max-width: 860px) {
  .topbar { gap: 10px; }
  .topbar .menu-btn, .topbar .search-btn { display: grid; }
  /* The brand may shrink to its mark but never below it, so nothing can paint over the mark. */
  .topbar .brand-sm { display: flex; align-items: center; gap: 8px; font: 700 16px var(--display); color: var(--ink); flex: 0 1 auto; min-width: 30px; overflow: hidden; }
  .topbar .brand-sm .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--primary); display: grid; place-items: center; color: #fff; flex: none; }
  .topbar .brand-sm img.brand-img { border-radius: 8px; }
  .topbar .brand-sm span.name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar > * { flex-shrink: 0; }
  .topbar > .brand-sm, .topbar > .plan-chip { flex-shrink: 1; }
  .topbar .plan-chip { min-width: 0; max-width: 100%; }
  .topbar .plan-chip .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .hide-sm { display: none; }
  .topbar .icon-btn, .topbar .avatar { width: 40px; height: 40px; }
  .sidebar { display: flex; position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; width: var(--drawer-w); max-width: 86vw; height: 100%; transform: translateX(-104%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .shell.nav-open .sidebar { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: var(--sh-lg); }
  .sidebar .close { display: grid; width: 36px; height: 36px; border-radius: 10px; place-items: center; color: var(--muted); }
  .nav-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(8, 20, 18, .45); }
  .bottomnav a { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 6px 0; }
  .bottomnav a[aria-current="page"] { color: var(--primary); font-weight: 700; }
  .menu-panel { position: fixed; top: 64px; right: 12px; }
  .page-head .btn { width: 100%; }
}

@media (max-width: 640px) {
  .topbar .plan-chip .long { display: none; }
}

/* Phones: hamburger + mark, search, plan status as an icon (full text in aria-label and title), bell, avatar. */
@media (max-width: 480px) {
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .topbar .brand-sm { flex-shrink: 0; }
  .topbar .brand-sm span.name { display: none; }
  .topbar .plan-chip { flex-shrink: 0; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 12px; }
  .topbar .plan-chip .label, .topbar .plan-chip .long { display: none; }
  .topbar .plan-chip svg.i { width: 18px; height: 18px; }
}

/* ---- bank logos (<x-portal.bank-logo>): fixed box, object-fit contain, white plate in both themes ---- */
.bank-logo { display: inline-grid; place-items: center; flex: none; overflow: hidden; }
.bank-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bank-logo i { font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .02em; color: var(--primary); background: var(--primary-50); border-radius: 8px; padding: 0 6px; height: 100%; min-width: 100%; display: grid; place-items: center; }
.bank-logo-card { width: 120px; height: 48px; border-radius: 10px; }
.bank-logo-card.has-img { background: #fff; padding: 4px 6px; border: 1px solid var(--line); }
.bank-logo-chip { width: 46px; height: 18px; border-radius: 4px; }
.bank-logo-chip.has-img { background: #fff; padding: 1px 3px; }
.topbar .bank-chip { padding-left: 4px; }
.identity-bank { margin-left: 4px; }

/* ---- legal links (<x-portal.legal-links>): sign-in card and the foot of every signed-in page ---- */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; }
.legal-links a { color: var(--muted); }
.legal-links a:hover { color: var(--primary); }
.auth-legal { display: grid; gap: 8px; justify-items: center; text-align: center; padding-top: 14px; border-top: 1px solid var(--line); }
.credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credits a:hover { color: var(--primary); }
.portal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .portal-foot { justify-content: center; text-align: center; } }

/* ---- Settings > Account: copy of my data, delete my account ---- */
.account-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.account-row h3, .danger-zone h3 { font-size: 15px; }
.account-row p { margin-top: 2px; }
.danger-zone { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1.5px solid color-mix(in srgb, var(--red) 45%, var(--line)); border-radius: var(--r-sm); background: color-mix(in srgb, var(--red-50) 55%, transparent); }
.danger-zone h3 { color: var(--red); }
.danger-zone .flash { margin: 0; }
.danger-list { padding-left: 18px; display: grid; gap: 4px; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 85%, #000); }

/* ---- App-only content panel (Settings security.web_app_only, resources/views/portal/app-only.blade.php) ---- */
.app-only { max-width: 640px; margin: 8px auto 0; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 32px 28px; }
.app-only-ico { width: 56px; height: 56px; border-radius: 16px; }
.app-only-ico svg.i { width: 26px; height: 26px; }
.app-only h2 { font-size: 22px; }
.app-only-lead { font-size: 16px; max-width: 520px; }
.app-only-stores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.app-only-support { display: grid; gap: 6px; justify-items: center; padding: 14px 18px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.app-only-support ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.app-only-web { margin-top: 4px; }
@media (max-width: 640px) { .app-only { padding: 24px 16px; } .app-only-stores .btn { width: 100%; } }

/* ---- Sign-in refused by the one-device rule (resources/views/portal/auth/takeover.blade.php) ---- */
.takeover-steps { display: grid; gap: 10px; padding-left: 18px; color: var(--ink); }
.form-foot button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); font-weight: 600; cursor: pointer; }

/* ---- Top bar bank switcher (<x-portal.topbar>, POST /bank, ViewingBank): a menu on desktop, a sheet on phones ---- */
.bank-switcher .bank-chip { cursor: pointer; border: 0; font: inherit; font-size: 12px; font-weight: 600; }
.bank-switcher .bank-chip .chev { width: 14px; height: 14px; margin-left: 2px; }
.banks-panel { width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 14px; gap: 8px; }
.banks-panel h2 { font-size: 16px; }
.bank-options { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.bank-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1.5px solid transparent; background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.bank-option:hover, .bank-option:focus-visible { background: var(--bg); }
.bank-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.bank-option.on { border-color: var(--primary); background: var(--primary-50); }
.bank-option-name { flex: 1; min-width: 0; display: grid; font-weight: 600; font-size: 14px; }
.bank-option-name small { font-weight: 500; font-size: 12px; color: var(--muted); }
.bank-option .tick { color: var(--primary); width: 18px; height: 18px; flex: none; }
.bank-option .bank-logo-chip { width: 52px; height: 22px; }
.banks-note { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
@media (max-width: 860px) {
  .topbar .bank-switcher { display: flex; }
  .topbar .bank-switcher .bank-chip { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; }
  .topbar .bank-switcher .bank-chip .label, .topbar .bank-switcher .bank-chip .chev { display: none; }
  .topbar .bank-switcher .bank-chip .bank-logo-chip { width: 32px; height: 20px; }
  /* A full-width sheet under the top bar on phones and tablets. The top bar's backdrop-filter makes it the containing
     block of fixed descendants, so the sheet is placed against the bar, not the viewport. */
  .banks-panel { position: fixed; left: 0; right: 0; top: 100%; bottom: auto; width: auto; max-height: calc(100dvh - 150px); border-radius: 0 0 20px 20px; border-width: 0 0 1px; padding: 14px 16px 16px; z-index: 60; }
}
@media (max-width: 480px) {
  .topbar .bank-switcher .bank-chip { width: 36px; height: 36px; }
}