:root[data-theme="light"]{
    --bg:#F4F6F1; --surface:#FFFFFF; --surface-2:#EEF2E9; --surface-3:#E4EADD;
    --text:#151F13; --text-dim:#5B6B58; --border:#DCE3D5;
    --green:#29A235; --green-ink:#176018; --green-soft:#E3F4E4;
    --amber:#F3A700; --amber-ink:#7A5300; --amber-soft:#FCF0D4;
    --blue:#2563AF; --blue-ink:#1D4E8C; --blue-soft:#E5EEFA;
    --danger:#C4432F; --danger-soft:#FBE7E2;
    --shadow: 0 1px 2px rgba(20,30,15,.06), 0 8px 24px -12px rgba(20,30,15,.18);
    --radius: 12px;
  }
  :root[data-theme="dark"]{
    --bg:#0D130C; --surface:#141C13; --surface-2:#1B251A; --surface-3:#243021;
    --text:#EAF0E4; --text-dim:#93A38D; --border:#283523;
    --green:#3DBA48; --green-ink:#8FE79A; --green-soft:#173420;
    --amber:#F3A700; --amber-ink:#FFD98C; --amber-soft:#3A2D0C;
    --blue:#5B9BE0; --blue-ink:#BFDBFF; --blue-soft:#12233A;
    --danger:#E36B57; --danger-soft:#3A1913;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --radius: 12px;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease;
  }
  h1,h2,h3,.display{font-family:'Sora','Inter',sans-serif;letter-spacing:-0.01em;}
  ::selection{background:var(--amber-soft);}
  button{font-family:inherit;}
  a{color:inherit;}

  #app{display:none;min-height:100vh;grid-template-columns:264px 1fr;}
  #app.active{display:grid;}
  @media (max-width:860px){ #app{grid-template-columns:1fr;} }

  .sidebar{
    background:var(--surface);border-right:1px solid var(--border);
    padding:18px 14px;display:flex;flex-direction:column;gap:2px;
    position:sticky;top:0;height:100vh;overflow-y:auto;
  }
  @media (max-width:860px){
    .sidebar{position:fixed;z-index:40;left:0;top:0;width:264px;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow);}
    .sidebar.open{transform:translateX(0);}
  }
  .sidebar-scrim{display:none;}
  @media (max-width:860px){ .sidebar-scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39;} }

  .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px 8px;border-bottom:1px solid var(--border);margin-bottom:10px;}
  .brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--green),#1F7A28);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Sora',sans-serif;font-size:14px;flex:none;overflow:hidden;}
  .brand-mark.has-logo{background:#fff;border:1px solid var(--border);}
  .brand-mark img{width:100%;height:100%;object-fit:contain;display:block;padding:3px;box-sizing:border-box;}
  .brand-text{line-height:1.15;}
  .brand-text b{display:block;font-family:'Sora',sans-serif;font-size:15px;}
  .brand-text span{font-size:11px;color:var(--text-dim);white-space:nowrap;}

  .nav-group-label{font-size:10.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;padding:14px 12px 6px;}
  .nav-group-toggle{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:9px 12px;margin-top:8px;border:none;background:none;cursor:pointer;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);border-radius:9px;}
  .nav-group-toggle:hover{background:var(--surface-2);color:var(--text);}
  .nav-group-toggle.active{color:var(--green-ink);}
  .nav-group-toggle .chevron{width:13px;height:13px;flex:none;transition:transform .15s ease;}
  .nav-group-toggle .chevron.open{transform:rotate(90deg);}
  .nav-group-items{overflow:hidden;max-height:600px;transition:max-height .18s ease;}
  .nav-group-items.collapsed{max-height:0;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--text-dim);text-decoration:none;font-size:13.5px;font-weight:600;cursor:pointer;border:none;background:none;width:100%;text-align:left;white-space:nowrap;}
  .nav-item svg{width:17px;height:17px;flex:none;}
  .role-perm-icon svg{width:17px;height:17px;flex:none;}
  .nav-item:hover{background:var(--surface-2);color:var(--text);}
  .nav-item.active{background:var(--green-soft);color:var(--green-ink);}

  .sidebar-footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
  .role-chip{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2);color:var(--text-dim);padding:6px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;width:fit-content;}
  .online-users-chip{font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--green-soft);color:var(--green-ink);padding:6px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-bottom:8px;}
  .online-users-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}
  .role-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

  .main{padding:20px 24px 60px;max-width:1220px;width:100%;}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
  .topbar h1{font-size:21px;margin:0;}
  .topbar .sub{color:var(--text-dim);font-size:13px;margin-top:2px;}
  .top-actions{display:flex;align-items:center;gap:10px;}
  .icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);}
  .icon-btn:hover{background:var(--surface-2);}
  .icon-btn svg{width:18px;height:18px;}
  .icon-btn-lg{width:40px;height:40px;}
  .icon-btn-lg svg{width:20px;height:20px;}
  .menu-toggle{display:none;}
  @media (max-width:860px){ .menu-toggle{display:flex;} }

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
  .grid{display:grid;gap:14px;}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));}
  .stat-card{padding:15px 17px;}
  .stat-card .label{font-size:11.5px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
  .stat-card .value{font-family:'Sora',sans-serif;font-size:25px;margin-top:5px;}
  .stat-card.accent-green .value{color:var(--green-ink);}
  .stat-card.accent-amber .value{color:var(--amber-ink);}
  .stat-card.accent-blue .value{color:var(--blue-ink);}
  .stat-card.accent-danger .value{color:var(--danger);}

  .section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px;flex-wrap:wrap;gap:8px;}
  .section-title h2{font-size:15.5px;margin:0;}

  table{width:100%;border-collapse:collapse;font-size:13.2px;}
  th{text-align:left;color:var(--text-dim);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:9px 11px;border-bottom:1px solid var(--border);}
  .uppercase-table td{text-transform:uppercase;}
  td{padding:10px 11px;border-bottom:1px solid var(--border);vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);}
  .table-wrap table{min-width:640px;}

  /* Opt-in per table (not global — most tables are fine as a normal scrolling table on mobile;
     this is for ones where reaching a control past the table, like a Register button, matters
     more than keeping every table exactly as wide as it is on desktop). Below the breakpoint,
     the forced 640px minimum is dropped so the table can actually shrink to the screen's own
     width — real columns are kept exactly as they are on desktop (Code, Title, Credits,
     Semester each still their own column), just narrower, with the browser's normal table
     layout giving most of that width to whichever column actually needs it (Title) and
     wrapping its text onto multiple lines rather than forcing the whole table wider than the
     screen the way a fixed minimum width does.  */
  .table-wrap.compact-on-mobile table{min-width:0;}
  @media (max-width:520px){
    .compact-on-mobile th, .compact-on-mobile td{padding:7px 6px; font-size:12.5px;}
    .compact-on-mobile th{font-size:9.5px;}
  }

  .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;white-space:nowrap;}
  .pill .dot{width:6px;height:6px;border-radius:50%;}
  .pill svg{width:11px;height:11px;}
  .pill.green{background:var(--green-soft);color:var(--green-ink);} .pill.green .dot{background:var(--green);}
  .pill.amber{background:var(--amber-soft);color:var(--amber-ink);} .pill.amber .dot{background:var(--amber);}
  .pill.danger{background:var(--danger-soft);color:var(--danger);} .pill.danger .dot{background:var(--danger);}
  .pill.blue{background:var(--blue-soft);color:var(--blue-ink);} .pill.blue .dot{background:var(--blue);}
  .pill.gray{background:var(--surface-3);color:var(--text-dim);} .pill.gray .dot{background:var(--text-dim);}

  .btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;padding:8px 13px;border-radius:9px;border:1px solid transparent;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;}
  .btn-green{background:var(--green);color:#fff;} .btn-green:hover{background:var(--green-ink);}
  .btn-amber{background:var(--amber);color:#241900;} .btn-amber:hover{filter:brightness(.94);}
  .btn-blue{background:var(--blue);color:#fff;} .btn-blue:hover{filter:brightness(.92);}
  .btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border);} .btn-ghost:hover{background:var(--surface-3);}
  .btn-outline{background:transparent;border-color:var(--border);color:var(--text);} .btn-outline:hover{background:var(--surface-2);}
  .btn-danger{background:var(--danger-soft);color:var(--danger);} .btn-danger:hover{filter:brightness(.95);}
  .btn-sm{padding:6px 10px;font-size:12px;border-radius:7px;}
  .btn[disabled]{opacity:.5;cursor:not-allowed;}
  .btn svg{width:14px;height:14px;}

  input,select,textarea{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13.2px;font-family:inherit;}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:1px;}
  label{font-size:12px;font-weight:700;color:var(--text-dim);display:block;margin-bottom:5px;}
  .field{margin-bottom:13px;}
  .multiselect-box{border:1px solid var(--border);border-radius:9px;background:var(--surface);max-height:170px;overflow-y:auto;padding:4px;}
  .multiselect-option{display:flex;align-items:center;gap:9px;padding:7px 8px;font-size:13.2px;cursor:pointer;border-radius:6px;}
  .multiselect-option:hover{background:var(--surface-2);}
  .multiselect-option input{width:auto;flex:none;}
  .row{display:flex;gap:12px;flex-wrap:wrap;}
  .row > *{flex:1;min-width:150px;}

  .empty{text-align:center;padding:36px 20px;color:var(--text-dim);}
  .empty svg{width:36px;height:36px;margin-bottom:8px;opacity:.6;}

  .toast-wrap{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:200;}
  .toast{background:var(--text);color:var(--bg);padding:11px 15px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:var(--shadow);max-width:320px;animation:slideIn .18s ease;}
  @keyframes slideIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  .modal-backdrop{position:fixed;inset:0;background:rgba(10,15,8,.5);display:none;align-items:center;justify-content:center;z-index:150;padding:20px;}
  .modal-backdrop.open{display:flex;}
  .modal{background:var(--surface);border-radius:16px;border:1px solid var(--border);max-width:520px;width:100%;padding:22px;box-shadow:var(--shadow);max-height:88vh;overflow-y:auto;}
  .modal h3{margin:0 0 4px;font-size:16.5px;}
  .modal .modal-sub{color:var(--text-dim);font-size:12.5px;margin-bottom:14px;}
  .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}

  #screen-loading{height:100vh;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(1100px 500px at 12% -10%, var(--green-soft), transparent 60%),radial-gradient(900px 500px at 110% 10%, var(--amber-soft), transparent 55%),var(--bg);}
  #screen-loading .spin-mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--green),#1F7A28);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:19px;font-family:'Sora',sans-serif;animation:chrmisPulse 1.3s ease-in-out infinite;overflow:hidden;}
  @keyframes chrmisPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(.92);}}

  #screen-login{height:100vh;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;gap:0;
    background:radial-gradient(1100px 500px at 12% -10%, var(--green-soft), transparent 60%),radial-gradient(900px 500px at 110% 10%, var(--amber-soft), transparent 55%),var(--bg);}
  .login-card{width:100%;flex:1 1 auto;min-height:0;background:var(--surface);border:none;border-radius:0;box-shadow:none;overflow:hidden;display:flex;align-items:stretch;}
  .login-hero{flex:1.1 1 0%;} .login-body{flex:1 1 0%;}
  @media (max-width:760px){
    #screen-login{height:auto;min-height:100vh;}
    .login-card{flex-direction:column;flex:none;}
  }
  .login-hero{background:linear-gradient(155deg,var(--green) 0%, #1B7A24 65%, #145c1c 100%);color:#fff;padding:38px 32px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
  .login-hero:after{content:"";position:absolute;right:-60px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(243,167,0,.35),transparent 70%);}
  .login-hero .mark, #loginStudentFormBrand .mark, #loginStaffFormBrand .mark{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:19px;margin-bottom:20px;backdrop-filter:blur(4px);overflow:hidden;flex:none;}
  .login-hero .mark.has-logo, #loginStudentFormBrand .mark.has-logo, #loginStaffFormBrand .mark.has-logo{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);}
  .login-hero .mark img, #loginStudentFormBrand .mark img, #loginStaffFormBrand .mark img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box;}
  .login-hero h1{font-size:26px;line-height:1.2;margin:0 0 10px;}
  .login-hero p{font-size:13.5px;opacity:.88;line-height:1.55;max-width:340px;}
  .login-flow{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap;position:relative;z-index:1;}
  .login-flow span{font-size:11px;background:rgba(255,255,255,.14);padding:6px 10px;border-radius:20px;font-weight:600;}
  /* Illustration swapped in by applyLoginRestrictionUI() for the plain, unrestricted app URL
     is no longer used by either the Staff or Student variant (Staff now uses a centered card
     with no illustration at all; Student uses a real photo instead — see below) — kept only so
     an unrestricted login (no loginRestriction set) still has somewhere to render one, if ever
     used again for that case. */
  .login-illustration{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;}
  .login-illustration:empty{display:none;}
  .login-illustration svg{width:100%;max-width:220px;height:auto;}
  /* Staff portal: a genuinely different layout from the shared split hero/form design below —
     a single, centered white card on a soft gradient page background, matching the requested
     reference design exactly (minus the Applicant/Staff toggle, which doesn't apply here since
     Staff and Student already have their own separate login pages — and with the logo centered
     rather than left-aligned, per explicit request). Scoped to #screen-login.staff-centered-
     variant since it needs to touch the page background too, not just the card itself. */
  #screen-login.staff-centered-variant{justify-content:center;align-items:center;}
  .login-card.staff-centered-variant{
    max-width:420px; width:100%; flex:none; border-radius:20px;
    box-shadow:0 10px 40px rgba(20,60,20,.12); display:block;
  }
  .login-card.staff-centered-variant .login-hero,
  .login-card.staff-centered-variant .login-illustration,
  .login-card.staff-centered-variant .login-flow{display:none;}
  .login-card.staff-centered-variant .login-body{padding:40px 36px;}
  .login-card.staff-centered-variant .login-body h2{text-align:center;font-size:18px;}
  .login-card.staff-centered-variant .login-body .sub{text-align:center;}
  .login-card.staff-centered-variant label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:6px;}
  .login-card.staff-centered-variant .login-body input{background:var(--surface-2);border:1.5px solid var(--border);}
  .login-card.staff-centered-variant .login-body input:focus{outline:none;border-color:var(--green);}
  /* Student portal uses a genuinely different layout, not just a different accent — a photo of
     the actual campus building, tinted in the same institutional green/gold rather than a
     gradient-plus-illustration, plus the branding relocated above the form instead of on the
     photo side. Scoped to .login-card.student-photo-variant (added by
     applyLoginRestrictionUI()), not .login-hero alone, since it also needs to touch .login-body
     and the relocated brand block — only ever applied for the Student login-restricted path. */
  .login-card.student-photo-variant .login-hero{
    background-image: linear-gradient(155deg, rgba(11,60,17,.78) 0%, rgba(8,42,12,.88) 100%), url('bace-building.jpg');
    background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
  }
  .login-card.student-photo-variant .login-hero:after{display:none;}
  .login-card.student-photo-variant .login-hero > div:first-child,
  .login-card.student-photo-variant .login-illustration,
  .login-card.student-photo-variant .login-flow{display:none;}
  .login-card.student-photo-variant .login-body{background:linear-gradient(160deg,var(--green) 0%,#0e4a15 100%);}
  .login-card.student-photo-variant .login-body h2{color:#fff;text-align:center;}
  .login-card.student-photo-variant .login-body .sub{color:rgba(255,255,255,.75);text-align:center;}
  .login-card.student-photo-variant .login-body input{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.35);color:#fff;}
  .login-card.student-photo-variant .login-body input::placeholder{color:rgba(255,255,255,.65);}
  .login-card.student-photo-variant .login-body input:focus{outline:none;border-color:#F3A700;background:rgba(255,255,255,.1);}
  .login-card.student-photo-variant .password-toggle{color:rgba(255,255,255,.75);}
  .login-card.student-photo-variant .password-toggle:hover{background:rgba(255,255,255,.1);color:#fff;}
  .login-card.student-photo-variant #loginSubmitBtn{background:linear-gradient(135deg,#F3B700,#D99B00);color:#2b2200;border:none;}
  .login-card.student-photo-variant #loginSubmitBtn:hover{filter:brightness(1.05);}
  .login-body{padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:center;}
  .login-body > *{width:100%;max-width:380px;}
  .login-body h2{font-size:16px;margin:0 0 4px;}
  .login-body .sub{color:var(--text-dim);font-size:12.5px;margin-bottom:16px;}
  .password-field{position:relative;} .password-field input{padding-right:42px;}
  .password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:none;color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:7px;}
  .password-toggle:hover{background:var(--surface-2);color:var(--text);}
  .password-toggle svg{width:18px;height:18px;}

  .search-bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 4px 4px;}
  .pagination-bar select{padding:4px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12.5px;}
  .search-bar input{flex:2;min-width:190px;} .search-bar select{flex:1;min-width:140px;}
  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--border);}
  .tab-btn{padding:9px 14px;border:none;background:none;font-size:13px;font-weight:700;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
  .tab-btn:hover{color:var(--text);}
  .tab-btn.active{color:var(--green-ink);border-bottom-color:var(--green);}

  .switch{position:relative;width:40px;height:23px;flex:none;}
  .switch input{opacity:0;width:0;height:0;}
  .slider{position:absolute;inset:0;background:var(--surface-3);border-radius:20px;cursor:pointer;transition:.2s;border:1px solid var(--border);}
  .slider:before{content:"";position:absolute;height:15px;width:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
  input:checked + .slider{background:var(--green);} input:checked + .slider:before{transform:translateX(17px);}

  .helper-text{font-size:11.5px;color:var(--text-dim);margin-top:4px;}
  .divider{height:1px;background:var(--border);margin:16px 0;}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media (max-width:700px){.two-col{grid-template-columns:1fr;}}
  .module-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);}
  .module-toggle-row:last-child{border-bottom:none;}
  .module-toggle-row .mt-label{display:flex;align-items:center;gap:10px;font-size:13.2px;font-weight:600;}
  .module-toggle-row .mt-label svg{width:16px;height:16px;color:var(--text-dim);}

  .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12.5px;}
  .bar-row .bar-label{width:150px;flex:none;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bar-track{flex:1;height:9px;background:var(--surface-3);border-radius:6px;overflow:hidden;}
  .bar-fill{height:100%;background:linear-gradient(90deg,var(--green),#67c96f);border-radius:6px;}
  .bar-val{width:34px;flex:none;text-align:right;font-weight:700;}

  .hidden{display:none !important;}
  .copyright-text{font-size:11px;color:var(--text-dim);text-align:center;line-height:1.5;}
  .sidebar-footer .copyright-text{margin-top:2px;padding:0 4px;}
  #screen-login .copyright-text{padding:14px 0;}
  .roster-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border);}
  .roster-row:last-child{border-bottom:none;}
  .seg{display:flex;gap:4px;background:var(--surface-2);padding:3px;border-radius:9px;}
  .seg button{border:none;background:none;padding:5px 10px;border-radius:6px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--text-dim);}
  .seg button.active.present{background:var(--green);color:#fff;}
  .seg button.active.late{background:var(--amber);color:#241900;}
  .seg button.active.absent{background:var(--danger);color:#fff;}
  .kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px;}
  .kv:last-child{border-bottom:none;}
  .kv b{font-weight:700;text-align:right;max-width:60%;}
  .id-card-face{position:relative;width:100%;max-width:420px;overflow:hidden;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);
    -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact;}
  .id-card-face-empty{padding:60px 20px;text-align:center;color:var(--text-dim);font-size:13px;}
  .id-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .id-card-field{position:absolute;white-space:nowrap;cursor:move;user-select:none;-webkit-user-select:none;padding:2px 3px;line-height:1.25;touch-action:none;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact;}
  .id-card-field.editable{outline:1px dashed var(--green);background:rgba(255,255,255,.5);border-radius:3px;}
  .id-card-field-remove{position:absolute;top:-8px;right:-8px;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
  .id-card-field-remove svg{width:9px;height:9px;}
  .id-card-photo{position:absolute;overflow:hidden;cursor:move;touch-action:none;}
  .id-card-photo.editable{outline:1px dashed var(--blue);}
  .id-card-photo img{width:100%;height:100%;object-fit:cover;display:block;touch-action:none;}
  .id-card-photo-handle{position:absolute;width:11px;height:11px;background:var(--green);border:1.5px solid #fff;border-radius:3px;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.35);touch-action:none;}
  .id-card-photo-handle.nw{top:-5px;left:-5px;cursor:nwse-resize;}
  .id-card-photo-handle.ne{top:-5px;right:-5px;cursor:nesw-resize;}
  .id-card-photo-handle.sw{bottom:-5px;left:-5px;cursor:nesw-resize;}
  .id-card-photo-handle.se{bottom:-5px;right:-5px;cursor:nwse-resize;}
  .id-card-record-list{position:absolute;top:100%;left:0;right:0;margin-top:4px;max-height:220px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);z-index:50;}
  .id-card-record-list-item{padding:9px 12px;font-size:13px;cursor:pointer;}
  .id-card-record-list-item:hover{background:var(--surface-2);}
  .id-card-record-list-empty{padding:12px;font-size:12.5px;color:var(--text-dim);}
  .id-card-print-wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
  .id-card-palette{display:flex;flex-wrap:wrap;gap:6px;}
  /* Certificates reuse the .id-card-field/.id-card-photo/.id-card-palette/.id-card-record-list
     styling above as-is (it's generic "positioned draggable item" styling, not specific to
     card-shaped things) — only the outer frame differs, since a certificate is always a fixed
     A4 portrait page rather than whatever size the uploaded template happens to be. */
  .certificate-face{position:relative;width:100%;max-width:520px;aspect-ratio:210/297;overflow:hidden;border-radius:4px;border:1px solid var(--border);background:var(--surface-2);
    -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact;}
  @page certificate-page{ size: A4 portrait; margin: 0; }
  .certificate-print-page{ page: certificate-page; }
  @media print{
    .sidebar,.topbar,.no-print{display:none !important;}
    #app{display:block !important;}
    .main{padding:0;max-width:none;}
    body{background:#fff;}
    .id-card-print-page{page-break-after:always; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact;}
    .id-card-print-page:last-child{page-break-after:auto;}
    .certificate-face{width:210mm;height:297mm;max-width:none;border:none;border-radius:0;}
    .certificate-print-page{page-break-after:always;}
    .certificate-print-page:last-child{page-break-after:auto;}
    body.printing-modal #app{display:none !important;}
    body.printing-modal .modal-backdrop{position:static !important;background:none !important;padding:0 !important;display:block !important;}
    body.printing-modal .modal{box-shadow:none !important;border:none !important;max-width:100% !important;max-height:none !important;overflow:visible !important;margin:0 auto;padding:6px 10px !important;}
    .print-only{display:block !important;}
  }
  @page{ margin: 8mm 12mm; }
  .print-only{display:none;}

/* ---------------------------- Install / offline banners ---------------------------- */
.install-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding:12px 14px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  font-size:13px; color:var(--text); max-width:420px;
}
.online-status-banner{
  display:none; align-items:center; gap:8px; padding:8px 16px; font-size:12.5px; font-weight:600;
  background:var(--amber-soft); color:var(--amber-ink); border-bottom:1px solid var(--border);
}

/* ---------------------------- Transcript letterhead (print + on-screen) ---------------------------- */
/* Font, size, and color are all driven by CSS variables set inline per-render from Settings →
   Grading & Graduation → Transcript Design — so every institution can match its own letterhead
   without touching this file. The values below are only the fallback if those variables are
   somehow missing, matching Bagabaga College's original letterhead. Times New Roman applies only
   to the letterhead itself (header + signatory) — the transcript's own content (title, student
   details, results tables) keeps the app's normal font, but picks up the configured content size. */
.th-doc{max-width:920px;margin:0 auto;background:#fff;color:#15181c;padding:26px 30px;border-radius:10px;border:1px solid var(--border);font-family:var(--th-font,'Times New Roman',Times,serif);}
/* STS Placement Letters: the attachment page (a real text document, like Transcripts) needs
   its own Times New Roman override since it isn't wrapped in .th-header/.th-signatory the way
   Transcripts are. The overlaid fields on the letter image itself (School Name, Date, etc.)
   also need it explicitly — .id-card-field sets no font of its own (shared with ID
   Cards/Certificates, where that's fine), so without this they'd render in the app's own
   sans-serif UI font and visibly clash with the Times New Roman text in the uploaded image
   underneath them. */
.sts-letter-doc, .sts-letter-doc *{font-family:'Times New Roman',Times,serif;}
.sts-letter-overlay{font-family:'Times New Roman',Times,serif;}
/* Forces the on-screen preview to the exact same pixel width as the actual printed page
   (210mm ≈ 794px at 96dpi) — not a percentage, not a max-width, an exact fixed width — so a
   field's font-size never has to be scaled between the two contexts at all. The earlier
   approach (scaling font-size by a calculated ratio between a ~520px screen preview and the
   794px print width) worked for size but introduced a subtle vertical misalignment once a
   field's line-height grew along with it — text that lined up with the surrounding baseline on
   screen would drift from it once printed. Matching the container's actual pixel size instead
   of scaling text within a differently-sized container avoids that class of mismatch entirely:
   what's on screen here just IS what gets printed, at the same size, same position, no
   conversion in between. Allows horizontal scrolling on any screen narrower than that, rather
   than silently shrinking and reintroducing the same mismatch. */
.sts-letter-face{width:794px !important;max-width:794px !important;}
.sts-letter-face-wrap{overflow-x:auto;}
@media print{ .sts-letter-face-wrap{overflow:visible;} }
/* Wraps each student's transcript during a bulk print run so every one starts on its own fresh
   page — the same page-break-after trick already used for double-sided ID cards, just applied
   once per student instead of once per card face. */
.th-doc-bulk-item{margin-bottom:26px;}
@media print{
  .th-doc-bulk-item{page-break-after:always; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact;}
  .th-doc-bulk-item:last-child{page-break-after:auto;}
}
/* A <thead> repeats automatically at the top of every printed page in every major browser — this
   is the standards-based way to repeat the letterhead across a multi-page transcript, rather than
   relying on position:fixed, which prints inconsistently across browsers. */
.th-print-table{width:100%;border-collapse:collapse;border-spacing:0;}
.th-print-table td{padding:0;border:none;}
.th-print-table thead td{padding-bottom:14px;}
@media print{
  .th-print-table thead td{padding-bottom:10px;}
  .th-print-table thead .th-header{padding-top:6px;}
}
.th-header,.th-signatory{font-family:var(--th-font,'Times New Roman',Times,serif);}
.th-header{text-align:center;}
.th-header h1{margin:0;font-family:var(--th-font,'Times New Roman',Times,serif);font-size:24pt;font-weight:700;color:var(--th-primary,#00B050);letter-spacing:.01em;line-height:1.2;text-transform:uppercase;}
.th-ministry{margin:2px 0 0;font-weight:700;color:var(--th-secondary,#FF0000);font-size:14pt;}
.th-contact-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:16px;text-align:left;}
.th-contact-col{font-size:12pt;line-height:1.3;flex:1;color:#15181c;}
.th-contact-col.right{text-align:right;}
.th-contact-col .th-link{color:var(--th-primary,#00B050);font-weight:700;}
.th-crest{width:96px;height:auto;flex:none;object-fit:contain;}
.th-date{font-weight:700;}
.th-title{text-align:center;font-weight:700;font-size:12pt;text-transform:uppercase;letter-spacing:.03em;margin:22px 0 4px;padding-bottom:10px;border-bottom:2px solid #15181c;}
.th-banner{background:transparent;color:#15181c;padding:10px 0 18px;display:flex;justify-content:space-between;gap:20px;margin-bottom:8px;flex-wrap:wrap;}
.th-banner-left{display:flex;gap:14px;}
.th-banner-name{font-size:12pt;font-weight:700;text-transform:uppercase;}
.th-banner-line{font-size:var(--th-content-size,9.7pt);line-height:1.35;color:#3a3f36;margin-top:3px;}
.th-banner-right{text-align:right;font-size:var(--th-content-size,9.7pt);line-height:1.35;color:#3a3f36;}
.th-sem{margin-bottom:18px;}
.th-sem-label{background:#eef2e9;font-weight:700;font-size:var(--th-content-size,9.7pt);padding:8px 12px;border:1px solid #e7ebe1;color:#15181c;}
.th-sem table{width:100%;border-collapse:collapse;font-size:calc(var(--th-content-size,9.7pt) - 1.2pt);table-layout:fixed;}
.th-sem col.col-code{width:12%;}
.th-sem col.col-title{width:52%;}
.th-sem col.col-credit{width:12%;}
.th-sem col.col-grade{width:12%;}
.th-sem col.col-gp{width:12%;}
.th-sem th,.th-sem td{border:1px solid #e7ebe1;padding:3px 10px;color:#15181c;line-height:1.25;}
.th-sem td{word-wrap:break-word;}
.th-sem th{background:#f7f8f5;text-align:left;font-weight:700;}
.th-sem td.num,.th-sem th.num{text-align:right;}
.th-sem td.center,.th-sem th.center{text-align:center;}
.th-sem tr.th-totals td{font-weight:700;background:#fbfbf9;}
.th-signatory{margin-top:60px;font-size:12pt;line-height:1.25;color:#15181c;}
.th-sig-line{border-bottom:1px solid #15181c;width:230px;margin-bottom:8px;}
.th-sig-name{text-transform:uppercase;}
@media print{
  .th-doc{border:none;padding:0;max-width:none;}
}

/* ---------------------------- Statement of Results: mini letterhead + notice ---------------------------- */
.sor-letterhead{
  /* Hidden on screen — the Statement of Results page is meant to show only the student's
     own results there; the school's name/logo/address are meant for the printed copy only,
     so they only actually appear once this prints (or is saved as a PDF via Print). */
  display:none; align-items:center; gap:14px; padding-bottom:14px; margin-bottom:14px; border-bottom:2px solid var(--border);
}
@media print{ .sor-letterhead{display:flex;} }
.sor-letterhead img{width:52px;height:52px;object-fit:contain;flex:none;}
.sor-letterhead-name{font-weight:800;font-size:17px;color:var(--text);}
.sor-letterhead-address{font-size:12px;color:var(--text-dim);margin-top:2px;}
.sor-not-official{text-align:center;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--danger);margin:18px 0 22px;}