/* ============================================================================
   YOUTH THEME — platform-wide reskin + mobile polish.
   Loaded AFTER design-system.css and ui-kit.css on every page. Because the whole app is built on the CSS
   variables below, changing them here recolours dashboards, sidebars, cards, tables and exam screens at once.
   Delete the <link> to this file to go back to the original look.
   ============================================================================ */
:root {
  --ink:#2B1470; --ink-soft:#4527A8;
  --sheet:#F6F3FF; --paper:#FFFFFF; --rule:#E6DFF8;
  --graphite:#2A2540; --graphite-soft:#6B6585;
  --seal-green:#0A8F52; --seal-green-bg:#E3F7EC;
  --alert-red:#E11D48; --alert-red-bg:#FFE8EE;
  --stamp-gold:#D97706; --stamp-gold-bg:#FFF3DF;
  --y-violet:#6D28D9; --y-pink:#F43F8E; --y-lime:#C8F43A; --y-sky:#38BDF8;
  --font-display:'Sora','Archivo','Segoe UI',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,sans-serif;
  --radius:16px; --radius-sm:12px;
  --y-shadow:0 6px 22px rgba(43,20,112,.08); --y-shadow-lg:0 14px 34px rgba(43,20,112,.16);
}
body.dark-mode { --sheet:#120C26; --paper:#1C1438; --rule:#33295A; --graphite:#EDE9FB; --graphite-soft:#A9A0CC; --ink:#CDB8FF; --ink-soft:#B79CFF; }
body { font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--sheet) radial-gradient(40rem 22rem at 100% 0, rgba(244,63,142,.07), transparent 60%) no-repeat fixed; }
body.dark-mode { background-color:var(--sheet); background-image:none; }
h1,h2,h3,h4,h5,h6,.display-font { font-family:var(--font-display); letter-spacing:-.02em; }
h1 { font-weight:800; }

/* ---------- Links ---------- */
/* only plain links (no class) are recoloured, so component links keep their own colours */
a:not([class]) { color:var(--y-violet); text-underline-offset:3px; transition:color .15s ease; }
a:not([class]):hover { color:var(--y-pink); }
body.dark-mode a:not([class]) { color:#C4B0FF; }

/* ---------- Buttons ---------- */
.btn { border-radius:999px; font-weight:700; font-size:.92rem; padding:.55rem 1.15rem; letter-spacing:.005em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-sm { padding:.35rem .85rem; font-size:.82rem; }
.btn-lg { padding:.8rem 1.6rem; font-size:1rem; }
.btn-primary { background:linear-gradient(135deg,var(--y-violet),#8B3CF0); border:0; color:#fff; box-shadow:0 6px 16px rgba(109,40,217,.32); }
.btn-primary:hover,.btn-primary:focus { background:linear-gradient(135deg,#5B1FC4,var(--y-violet)); color:#fff; box-shadow:0 10px 22px rgba(109,40,217,.4); }
.btn-outline-primary { color:var(--y-violet); border:2px solid var(--y-violet); background:transparent; }
.btn-outline-primary:hover,.btn-outline-primary:focus { background:var(--y-violet); border-color:var(--y-violet); color:#fff; }
.btn-success { background:linear-gradient(135deg,#0A8F52,#12B76A); border:0; box-shadow:0 6px 16px rgba(10,143,82,.28); }
.btn-danger { background:linear-gradient(135deg,#E11D48,#F43F5E); border:0; box-shadow:0 6px 16px rgba(225,29,72,.28); }
.btn-warning { background:linear-gradient(135deg,#F59E0B,#FBBF24); border:0; color:#2A1B00; }
.btn-secondary { background:#5B5378; border:0; }
.btn-outline-secondary { border:2px solid var(--rule); color:var(--graphite); }
.btn-outline-secondary:hover { background:var(--sheet); border-color:var(--y-violet); color:var(--y-violet); }
.btn-outline-danger,.btn-outline-success { border-width:2px; }
.btn-link { text-decoration:none; font-weight:700; color:var(--y-violet); box-shadow:none; }
.btn-link:hover { color:var(--y-pink); text-decoration:underline; }
.btn:disabled,.btn.disabled { opacity:.55; transform:none; box-shadow:none; }
.btn-group > .btn { border-radius:0; } .btn-group > .btn:first-child { border-radius:999px 0 0 999px; } .btn-group > .btn:last-child { border-radius:0 999px 999px 0; }
.btn-close { border-radius:50%; }

/* ---------- Cards, surfaces ---------- */
.card { border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--y-shadow); }
.card-header,.card-footer { background:transparent; border-color:var(--rule); }
.card.stat-card { border-top:0; position:relative; overflow:hidden; }
.card.stat-card::before { content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--y-violet),var(--y-pink),var(--y-lime)); }
.card.stat-card .stat-value { font-family:var(--font-display); font-weight:800; }
a.card,.card-hover { transition:transform .18s ease, box-shadow .18s ease; }
a.card:hover,.card-hover:hover { transform:translateY(-4px); box-shadow:var(--y-shadow-lg); }
.alert { border:0; border-radius:var(--radius-sm); border-left:5px solid currentColor; }
.badge { border-radius:999px; font-weight:700; padding:.4em .75em; }
.list-group-item { border-color:var(--rule); }

/* ---------- Forms ---------- */
.form-control,.form-select { border:2px solid var(--rule); border-radius:var(--radius-sm); padding:.6rem .85rem; background-color:var(--paper); color:var(--graphite); }
.form-control:focus,.form-select:focus { border-color:var(--y-violet); box-shadow:0 0 0 4px rgba(109,40,217,.16); }
.form-label { font-weight:700; font-size:.86rem; color:var(--graphite); }
.form-check-input:checked { background-color:var(--y-violet); border-color:var(--y-violet); }
.input-group > .form-control:not(:first-child),.input-group > .btn:not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.cbt-option:focus-within { outline:3px solid rgba(244,63,142,.55); outline-offset:2px; }

/* ---------- Navigation: sidebar, topbar, tabs, pagination ---------- */
.app-sidebar { background:linear-gradient(180deg,#1E0F52 0%,#3A1D8F 60%,#5B21B6 100%); }
.app-sidebar a { border-radius:12px; color:rgba(255,255,255,.82); }
.app-sidebar a:hover { background:rgba(255,255,255,.14); color:#fff; transform:translateX(3px); transition:all .15s; }
.app-sidebar a.active { background:rgba(255,255,255,.18); color:#fff; box-shadow:inset 4px 0 0 var(--y-lime); }
.app-sidebar a,.app-sidebar a:hover { text-decoration:none; }
.app-topbar { background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:30; }
body.dark-mode .app-topbar { background:rgba(28,20,56,.86); }
.cbt-sidebar-toggle { background:linear-gradient(135deg,var(--y-violet),var(--y-pink)); box-shadow:0 6px 18px rgba(109,40,217,.45); }
.nav-tabs { border-color:var(--rule); } .nav-tabs .nav-link { border-radius:12px 12px 0 0; font-weight:700; color:var(--graphite-soft); }
.nav-tabs .nav-link.active { color:var(--y-violet); border-color:var(--rule) var(--rule) var(--paper); }
.nav-pills .nav-link { border-radius:999px; font-weight:700; } .nav-pills .nav-link.active { background:linear-gradient(135deg,var(--y-violet),#8B3CF0); }
.page-link { border-radius:999px !important; margin:0 2px; border:0; color:var(--y-violet); font-weight:700; }
.page-item.active .page-link { background:var(--y-violet); }
.dropdown-menu { border:1px solid var(--rule); border-radius:var(--radius-sm); box-shadow:var(--y-shadow-lg); padding:.4rem; }
.dropdown-item { border-radius:10px; font-weight:600; }
.dropdown-item:hover { background:var(--sheet); color:var(--y-violet); }
.modal-content { border:0; border-radius:20px; box-shadow:var(--y-shadow-lg); }
.cbt-dialog { border-radius:20px; border-top:5px solid var(--y-violet); }

/* ---------- Tables ---------- */
.table thead th { font-family:var(--font-body); font-size:.72rem; letter-spacing:.07em; color:var(--y-violet); border-bottom:2px solid var(--rule); }
.table > :not(caption) > * > * { padding:.8rem .75rem; border-bottom-color:var(--rule); }
.table-hover > tbody > tr:hover > * { background:rgba(109,40,217,.05); }
.table-responsive,.cbt-table-wrap { border-radius:var(--radius); }

/* ---------- Toasts ---------- */
.cbt-toast { border-radius:14px; box-shadow:var(--y-shadow-lg); }
.cbt-toast .cbt-toast-icon { border-radius:50%; }

/* ---------- Auth pages (login / register / reset) ---------- */
.cbt-auth-visual { background:radial-gradient(40rem 25rem at 90% 0, rgba(244,63,142,.5), transparent 60%), linear-gradient(150deg,#150A3C 0%,#3B1590 55%,#6D28D9 100%) !important; }
.cbt-glass-card { border-radius:24px !important; box-shadow:var(--y-shadow-lg) !important; }
.cbt-btn-primary-block { border-radius:999px !important; background:linear-gradient(135deg,var(--y-violet),#8B3CF0) !important; font-weight:800; box-shadow:0 8px 20px rgba(109,40,217,.35); }
.cbt-btn-primary-block:hover { transform:translateY(-2px); }

/* ---------- Exam screens: friendlier option bubbles + navigator ---------- */
.cbt-option { border-radius:14px; border:2px solid var(--rule); padding:.85rem 1rem; }
.cbt-option:hover { border-color:var(--y-violet); background:rgba(109,40,217,.04); }
.cbt-option input[type="radio"]::before { background:var(--y-violet); }
.cbt-option:has(input:checked) { border-color:var(--y-violet); background:rgba(109,40,217,.09); box-shadow:0 0 0 3px rgba(109,40,217,.12); }
.exam-clock { border:2px solid var(--y-violet); color:var(--y-violet); font-family:var(--font-display); }
.cbt-navgrid button { border-width:2px; transition:transform .12s; } .cbt-navgrid button:hover { transform:scale(1.1); }
.cbt-navgrid button.current { outline:3px solid var(--y-pink); }

/* ---------- Page-load polish ---------- */
@keyframes y-rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
main { animation:y-rise .35s ease both; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important} }

/* ============================================================================
   MOBILE
   ============================================================================ */
img,video,svg { max-width:100%; } img { height:auto; }
pre,code { overflow-wrap:anywhere; }
@media (max-width:991.98px) {
  .container,.container-fluid { padding-left:1rem; padding-right:1rem; }
  main,.app-main,.app-content { min-width:0; }
}
@media (max-width:767.98px) {
  html { font-size:15.5px; }
  h1,.h1 { font-size:1.65rem; } h2,.h2 { font-size:1.4rem; } h3,.h3 { font-size:1.2rem; }
  /* iOS zooms into inputs under 16px — stop that */
  .form-control,.form-select,input,select,textarea { font-size:16px !important; }
  /* comfortable thumb targets */
  .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
  .btn-sm { min-height:38px; }
  .page-link { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
  .nav-link,.dropdown-item { min-height:42px; display:flex; align-items:center; }
  /* toolbars/headers stack instead of overflowing */
  .d-flex.justify-content-between { flex-wrap:wrap; gap:.6rem; }
  .btn-toolbar,.card-header.d-flex { flex-wrap:wrap; gap:.5rem; }
  .btn-group { flex-wrap:wrap; }
  .modal-dialog { margin:.6rem; max-width:calc(100vw - 1.2rem); }
  .modal-content { border-radius:18px; }
  .card { border-radius:14px; } .card-body { padding:1rem; }
  .row > [class*="col-"] { min-width:0; }
  .nav-tabs,.nav-pills { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-tabs::-webkit-scrollbar,.nav-pills::-webkit-scrollbar { display:none; }
  .nav-tabs .nav-link,.nav-pills .nav-link { white-space:nowrap; }
  .table-responsive { -webkit-overflow-scrolling:touch; }
  .cbt-toast-stack { left:.75rem; right:.75rem; top:.75rem; width:auto; }
  .cbt-navgrid { grid-template-columns:repeat(6,1fr); }
  .exam-clock { font-size:1.1rem; padding:.3rem .8rem; }
  .cbt-option { padding:.8rem; }
  /* keep content clear of the notch / home bar */
  body { padding-bottom:env(safe-area-inset-bottom); }
  .app-topbar { padding-top:max(.5rem, env(safe-area-inset-top)); }
}
@media (max-width:420px) {
  .btn-lg { width:100%; }
  .cbt-glass-card { padding:1.5rem 1.1rem !important; }
}
@media print { body { background:#fff !important; } .btn { box-shadow:none !important; } }

/* ---- Grid blow-out guard: an implicit/`1fr` grid track can't shrink below its content's min-width, so a row of
   scrolling chips or a wide table pushed the whole page wider than the phone. minmax(0,1fr) lets tracks shrink. ---- */
.dash,.dash-grid { grid-template-columns:minmax(0,1fr); }
@media (min-width:992px){ .dash-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.dash > *,.dash-grid > * { min-width:0; }
[class*="-grid"] > *,.row > * { min-width:0; }

/* ---- Form controls never exceed their container (long <option> text used to widen selects past the screen) ---- */
select,input,textarea,.form-select,.form-control,.cbt-field-input { max-width:100%; min-width:0; }
.form-select { text-overflow:ellipsis; }
.cbt-ref,.cbt-serial { overflow-wrap:anywhere; word-break:break-word; }
pre { white-space:pre-wrap; max-width:100%; }
.d-flex > .form-select.w-auto,.d-flex > .form-control.w-auto { min-width:0; }
@media (max-width:767.98px){ .form-select.w-auto,.form-control.w-auto,.form-select-sm,.form-control-sm { width:100% !important; } .d-flex.gap-2 > .form-select, .d-flex.gap-2 > .form-control { flex:1 1 100%; } }

/* ---- Page shell: the content column is a flex child of body > .d-flex; without min-width:0 any wide table/toolbar
   made the whole page wider than the phone. This one rule fixes the shared layout for every dashboard page. ---- */
.d-flex > .flex-grow-1,.app-shell > *,.flex-grow-1 { min-width:0; }
.app-topbar h5,.app-topbar .cbt-page-title { min-width:0; overflow-wrap:anywhere; }
@media (max-width:767.98px){
  .app-topbar { flex-wrap:wrap; gap:.4rem; row-gap:.4rem; }
  .app-topbar.d-flex { align-items:center; }
  .p-4 { padding:1rem !important; } .px-4:not(.app-topbar) { padding-left:1rem !important; padding-right:1rem !important; }
  .app-topbar.px-4,.app-topbar { padding-left:3.75rem !important; padding-right:1rem !important; }
  .app-topbar .btn { flex:none; }
}

/* links inside cards/lists that carry only a size class */
a.small:not(.text-muted):not(.btn),.card a:not(.btn):not([class*="text-"]):not(.dash-chip):not(.y-tile) { color:var(--y-violet); font-weight:600; }
a.small:not(.text-muted):not(.btn):hover,.card a:not(.btn):not([class*="text-"]):hover { color:var(--y-pink); }


/* ---- Mobile tables: keep natural column widths and scroll sideways inside the table box. (Previously cells were allowed
   to shrink to nothing, so words broke one letter per line.) ---- */
.table td,.table th { overflow-wrap:normal; word-break:normal; }
.table th { white-space:nowrap; }
.table .btn,.table .badge,.table td > a.btn { white-space:nowrap; }
@media (max-width:767.98px){
  table.table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); }
  table.table > thead,table.table > tbody,table.table > tfoot { display:table; width:100%; min-width:680px; }
  .table td .small,.table td small { white-space:normal; }
}

/* ---- Bare textareas (no .form-control class) were stuck at the browser default width; inline-edit inputs inside table
   cells collapsed to ~60px. Both now get sensible sizes. ---- */
textarea { width:100%; border:2px solid var(--rule); border-radius:var(--radius-sm); padding:.6rem .85rem; font-family:inherit; background:var(--paper); color:var(--graphite); }
textarea:focus { border-color:var(--y-violet); outline:0; box-shadow:0 0 0 4px rgba(109,40,217,.16); }
.table td input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.table td select { min-width:8rem; }
.table td input[type=number] { min-width:5.5rem; }
input[type=checkbox],input[type=radio] { accent-color:var(--y-violet); }
label:has(> input[type=checkbox]),label:has(> input[type=radio]) { display:inline-flex; align-items:center; gap:.45rem; }