@charset "UTF-8";
/* Consistent native controls and high-contrast attendance summaries. */
@media screen {
  :root { --control-height:52px; --status-blue:#0964ce; --status-green:#08714e; --status-red:#bb2545; }
  :is(#app,#modal) .field { min-width:0; gap:9px; }
  :is(#app,#modal) .field > span { font-size:16px; font-weight:700; line-height:1.4; }
  :is(#app,#modal) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=file]),
  :is(#app,#modal) select:not([multiple]) {
    display:block; box-sizing:border-box; width:100%; min-width:0;
    height:var(--control-height); min-height:var(--control-height); max-height:none;
    padding:11px 15px; border:2px solid #bccbdc; border-radius:10px;
    background-color:#fff; color:var(--role-ink,#263f5f);
    font-family:inherit; font-size:18px; font-weight:600; line-height:1.4;
    box-shadow:0 2px 4px #1b355506;
  }
  :is(#app,#modal) select:not([multiple]) {
    appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,#4c647e 50%),linear-gradient(135deg,#4c647e 50%,transparent 50%);
    background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
    background-size:6px 6px; background-repeat:no-repeat;
  }
  :is(#app,#modal) select[multiple],:is(#app,#modal) textarea { font-size:18px; padding:12px 15px; border-width:2px; }
  :is(#app,#modal) :is(input,select,textarea):focus { border-color:var(--role-main,#344579); outline-offset:2px; }
  :is(#app,#modal) :is(input,select,textarea):disabled { background-color:#e9eef4; color:#607086; cursor:default; opacity:1; }
  body :is(#app,#modal) input[type=file] { display:block; box-sizing:border-box; width:100%; min-width:0; max-width:100%; height:auto; min-height:var(--control-height); padding:6px; border:2px solid #bccbdc; border-radius:10px; font-weight:600; font-family:inherit; font-size:16px; line-height:24px; overflow:hidden; }
  body :is(#app,#modal) input[type=file]::file-selector-button { box-sizing:border-box; height:36px; margin:0 10px 0 0; padding:6px 12px; border:0; vertical-align:middle; font:inherit; line-height:24px; border-radius:6px; }
  body :is(#app,#modal) input[type=file]::-webkit-file-upload-button { box-sizing:border-box; height:36px; margin:0 10px 0 0; padding:6px 12px; border:0; vertical-align:middle; font:inherit; line-height:24px; border-radius:6px; }
  .roll-list-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:16px; }
  .roll-map-tools .field { min-width:180px; max-width:260px; }
  .roll-map-tools .btn,.roll-view-controls .btn { min-height:44px; font-size:16px; }
  .roll-bulk-actions .btn { min-height:50px; font-size:17px; padding:12px 18px; }
  .roll-selected-count { font-size:16px; font-weight:700; }

  body .roll-metrics { gap:10px; }
  body .roll-metric { min-height:110px; padding:16px; grid-template-columns:32px 1fr; gap:7px 10px; border:2px solid #8d9fb5; border-radius:14px; box-shadow:0 5px 12px #263a5010; }
  body .roll-metric-symbol { width:32px; height:32px; font-size:21px; border-width:2px; background:#ffffff1f; }
  body .roll-metric > span:not(.roll-metric-symbol) { font-size:15px; font-weight:750; line-height:1.45; }
  body .roll-metric > strong { font-size:36px; font-weight:800; letter-spacing:-.02em; }
  body :is(.roll-metric,.status-total).metric-face_only { background:linear-gradient(130deg,#0959b9,#1671d9); border-color:#0959b9; color:#fff; }
  body :is(.roll-metric,.status-total).metric-present { background:linear-gradient(130deg,#076445,#16825b); border-color:#076445; color:#fff; }
  body :is(.roll-metric,.status-total).metric-manual_not_entered { background:linear-gradient(130deg,#a51e3d,#c33350); border-color:#a51e3d; color:#fff; }
  body :is(.roll-metric,.status-total).metric-grade_off { background:#171e29; border-color:#171e29; color:#fff; }
  body :is(.roll-metric,.status-total).metric-leave { background:#dce2e9; border-color:#a5b2c2; color:#334359; }
  body :is(.roll-metric,.status-total).metric-pending { background:#fff; border-color:#899bb0; color:#293f59; }
  .status-total { display:inline-flex; align-items:center; justify-content:space-between; gap:13px; padding:10px 13px; border:2px solid transparent; border-radius:10px; font-size:16px; font-weight:700; line-height:1.35; }
  .status-total strong { font-size:25px; font-variant-numeric:tabular-nums; font-weight:800; }
  .roll-toolbar .chips { display:flex; flex-wrap:wrap; gap:9px; }
  .roll-stat-note { padding-block:12px; font-size:14px; font-weight:600; color:#455d73; }
  body .roll-save-state { padding:9px 13px; border:2px solid #a4b8c9; border-radius:9px; background:#eff5f9; color:#314f64; font-size:17px; font-weight:750; }
  body .roll-save-state svg { width:21px; height:21px; }
  body .roll-save-state.save-unsaved { color:#713b00; background:#ffdc91; border-color:#b77513; }
  body .roll-save-state:is(.save-draft,.save-submitted) { color:#fff; background:#08714e; border-color:#075c41; }
  .roll-save-label,.roll-no-history { font-size:14px; color:#53677d; }

  body .badge { padding:6px 10px; border:1px solid transparent; font-size:15px; line-height:1.45; font-weight:750; border-radius:7px; }
  body .badge.green { background:#08714e; color:#fff; }
  body .badge.blue { background:#0964ce; color:#fff; }
  body .badge.red { background:#bb2545; color:#fff; }
  body .badge.amber { background:#ffe0a2; border-color:#b97c21; color:#754400; }
  body .badge.wine { background:#3e4b6e; color:#fff; }
  body .badge.white { background:#fff; border-color:#859ab2; color:#30465f; }
  body .badge.gray { background:#dce2e9; border-color:#a5b2c2; color:#334359; }
  body .badge.black { background:#171e29; color:#fff; }
  :is(#app,#modal) .note {
    --notice-edge:#1f64a6; --notice-bg:#e9f3ff; --notice-ink:#204d78;
    display:flex; align-items:flex-start; gap:13px; padding:17px 19px;
    background:var(--notice-bg); color:var(--notice-ink);
    border:1px solid color-mix(in srgb,var(--notice-edge) 40%,white); border-left:6px solid var(--notice-edge);
    border-radius:11px; box-shadow:0 3px 10px #1d3c5610; font-size:17px; font-weight:600; line-height:1.65;
  }
  :is(#app,#modal) .note.warning { --notice-edge:#b56d05; --notice-bg:#fff1cc; --notice-ink:#754300; }
  :is(#app,#modal) .note.error { --notice-edge:#bb2545; --notice-bg:#ffebf0; --notice-ink:#931c35; }
  :is(#app,#modal) .note.success { --notice-edge:#08714e; --notice-bg:#dcf5e7; --notice-ink:#075737; }
  :is(#app,#modal) .note > svg { width:27px; height:27px; flex:0 0 27px; margin-top:1px; stroke-width:2; }
  :is(#app,#modal) .note > div { min-width:0; overflow-wrap:anywhere; }
  #app .global-demo-note .note { padding:11px 15px; font-size:14px; border-left-width:5px; }
  #app .global-demo-note .note > svg { width:21px; height:21px; flex-basis:21px; }
  body .context-help > summary { font-size:15px; font-weight:650; }
  body .context-help-body { font-size:16px; line-height:1.65; border-width:2px; }
  #toast:not(:empty) { border:2px solid #70879c; border-left:6px solid #08714e; background:#fff; color:#213c51; box-shadow:0 12px 40px #0c294047; font-size:18px; font-weight:700; padding:18px 24px; }
  #toast.error { border-left-color:#bb2545; color:#931c35; }

  body .live-summary > div { border:2px solid #a6b7c9; border-radius:11px; padding:13px 16px; background:#fff; color:#253e59; }
  body .live-summary > .metric-status-face_only { background:#0964ce; border-color:#4e9eff; color:#fff; }
  body .live-summary > .metric-status-present { background:#08714e; border-color:#35ba89; color:#fff; }
  body .live-summary > .metric-status-grade_off { background:#171e29; border-color:#768293; color:#fff; }
  body .live-summary > .metric-status-leave { background:#dce2e9; border-color:#a5b2c2; color:#334359; }
  body[data-role] .live-command-board .live-summary > div span,body .live-summary > div span { color:inherit; font-size:15px; font-weight:700; line-height:1.4; }
  body .live-summary > div strong { color:inherit; font-size:34px; font-weight:800; }
  .live-command-board .live-summary { gap:10px; padding:8px 20px 15px; }
  .summary-light { width:12px; height:12px; flex-basis:12px; border-width:2px; }
  .roll-exam-title h2 .muted { font-size:15px; color:var(--role-ink,#314f64); font-weight:650; }
}
@media screen and (max-width:1100px) { body .roll-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media screen and (max-width:620px) {
  :root { --control-height:48px; }
  :is(#app,#modal) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=file]),:is(#app,#modal) select:not([multiple]) { font-size:17px; }
  :is(#app,#modal) .field > span { font-size:15px; }
  .roll-list-filters { grid-template-columns:1fr 1fr; gap:12px; }
  .roll-list-filters .field:first-child { grid-column:1/-1; }
  body .roll-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  body .roll-metric { min-height:94px; padding:11px 10px; gap:4px 8px; grid-template-columns:25px 1fr; border-radius:10px; }
  body .roll-metric-symbol { width:25px; height:25px; font-size:17px; }
  body .roll-metric > span:not(.roll-metric-symbol) { font-size:14px; }
  body .roll-metric > strong { font-size:30px; }
  .roll-map-tools { flex-wrap:wrap; align-items:end; gap:10px; }
  .roll-map-tools .field { flex:1 1 155px; min-width:140px; max-width:none; }
  .roll-map-tools .field > span { display:block; }
  .roll-map-tools .btn { font-size:14px; flex:1 1 140px; max-width:none; }
  .roll-view-controls .btn { font-size:14px; padding-inline:9px; }
  .roll-bulk-actions { grid-template-columns:1fr 1fr; gap:8px; }
  .roll-bulk-actions .roll-select-all { grid-column:1/-1; }
  .roll-bulk-actions .btn { font-size:16px; padding:10px 8px; min-height:48px; }
  .roll-toolbar .chips { display:grid; grid-template-columns:1fr 1fr; }
  .status-total { font-size:14px; gap:8px; padding:8px 10px; }
  .status-total strong { font-size:25px; }
  :is(#app,#modal) .note { padding:13px; font-size:16px; gap:10px; }
  body .badge { font-size:14px; }
  body .live-summary > div { padding:11px; }
  body .live-summary > div span,body[data-role] .live-command-board .live-summary > div span { font-size:14px; }
  body .live-summary > div strong { font-size:29px; }
  .roll-exam-title { flex-wrap:wrap; }
}
@media screen {
  .qr-entry { min-height:100dvh; padding:32px 20px 48px; background:radial-gradient(ellipse at top right,#b6ded2,transparent 65%),linear-gradient(135deg,#e5f0ed,#f6f8fc); }
  .qr-entry-brand { max-width:520px; margin:0 auto 24px; padding:22px; border-radius:18px; background:#183d39; }
  .qr-entry-card { max-width:520px; margin:auto; padding:32px; border:1px solid #bed0ca; border-top:5px solid #14876f; border-radius:20px; background:white; box-shadow:0 18px 50px #173e391c; }
  .qr-entry-card h1 { font-size:34px; margin:12px 0 24px; }
  .qr-entry-room { display:flex; flex-direction:column; gap:6px; padding:20px; background:#e8f5ef; border-radius:12px; margin-bottom:24px; color:#175442; }
  .qr-entry-room strong { font-size:36px; }
  .qr-entry-room span { font-size:16px; }
  #qr-login-form { display:grid; gap:18px; }
  #qr-login-form .btn { font-size:19px; min-height:52px; }
  .qr-normal-login { display:block; text-align:center; margin-top:22px; }
  .qr-print-controls { display:flex; align-items:end; flex-wrap:wrap; gap:18px; }
  .qr-print-controls .field { flex:1; min-width:180px; max-width:350px; }
  .qr-print-controls .btn { min-height:52px; }
  .qr-print-controls > span { align-self:center; }
  .qr-room-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
  .qr-room-card { display:flex; flex-direction:column; padding:22px; gap:14px; }
  .qr-room-card h2 { font-size:26px; margin-bottom:6px; }
  .qr-room-card img { width:100%; height:auto; max-width:210px; align-self:center; }
  .qr-day-card .field { max-width:640px; }
}
@media screen and (max-width:620px) {
  .qr-entry { padding:18px 14px 32px; }
  .qr-entry-brand { padding:16px; margin-bottom:16px; }
  .qr-entry-card { padding:24px 20px; }
  .qr-entry-card h1 { font-size:29px; }
  .qr-room-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .qr-room-card { padding:12px; gap:10px; }
  .qr-room-card h2 { font-size:23px; }
  .qr-room-card .btn { font-size:14px; padding:10px 8px; }
}
@media screen {
  .qr-entry-brand .brand,.qr-entry-brand .brand strong { color:#fff; }
  .qr-entry-brand .brand small { color:#d7e9e3; }
  .import-workflow { display:flex; align-items:center; flex-wrap:wrap; gap:15px; padding:8px 0 24px; color:var(--role-ink,#314568); font-weight:700; }
  .import-workflow span { display:flex; gap:9px; align-items:center; }
  .import-workflow svg { width:22px; height:22px; }
  .import-workflow i { font-style:normal; color:#7a8aa0; }
  .import-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
  .import-metric { display:grid; grid-template-columns:40px 1fr; gap:4px 12px; padding:19px; background:#eff3f9; color:#304662; border:1px solid #afc0d4; border-radius:12px; font-size:16px; font-weight:700; }
  .import-metric-icon { grid-row:span 2; width:40px; height:40px; border-radius:10px; background:#ffffff30; display:grid; place-items:center; }
  .import-metric-icon svg { width:27px; height:27px; }
  .import-metric strong { grid-column:2; font-size:34px; font-variant-numeric:tabular-nums; }
  .import-metric.green { background:linear-gradient(135deg,#0b6548,#18825d); color:white; border-color:#0b6548; }
  .import-metric.blue { background:linear-gradient(135deg,#1559ac,#1878c7); color:white; border-color:#1559ac; }
  .import-metric.red { background:linear-gradient(135deg,#a82240,#bf3b53); color:white; border-color:#a82240; }
  .import-source-context { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; padding:18px 0 24px; }
  .import-source-context > div { display:flex; flex-direction:column; gap:7px; min-width:0; }
  .import-source-context span { font-size:14px; color:#697b94; font-weight:700; }
  .import-source-context strong { font-size:17px; overflow-wrap:anywhere; }
  .import-row-controls { display:grid; grid-template-columns:2fr 1fr; gap:16px; border-top:1px solid #d7e0ed; }
  .import-errors { border:2px solid #da9b62; background:#fff8ec; border-radius:12px; padding:16px; margin-top:20px; }
  .import-errors > summary { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:750; color:#824807; cursor:pointer; }
  .import-errors > summary svg { width:25px; height:25px; }
  .import-errors > a { margin:16px 0 10px; }
  .import-review-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; background:#edf3fa; }
  .import-review-footer p { font-size:15px; color:#50617a; }
  .import-review .card-head h2 { overflow-wrap:anywhere; }
}
@media screen and (max-width:620px) {
  .import-workflow { font-size:13px; gap:7px; }
  .import-workflow svg { width:17px; height:17px; }
  .import-workflow span { gap:4px; }
  .import-metrics { grid-template-columns:1fr 1fr; gap:9px; }
  .import-metric { grid-template-columns:25px 1fr; padding:13px 10px; gap:4px 8px; font-size:13px; }
  .import-metric-icon { width:25px; height:29px; }
  .import-metric-icon svg { width:22px; height:22px; }
  .import-metric strong { font-size:28px; }
  .import-source-context { grid-template-columns:1fr; gap:15px; }
  .import-source-context > div { flex-direction:row; justify-content:space-between; gap:16px; }
  .import-source-context span { flex-shrink:0; }
  .import-source-context strong { font-size:15px; text-align:right; }
  .import-row-controls { grid-template-columns:1fr; }
  .import-review-footer .actions { width:100%; }
}
@media screen {
  .qr-entry-brand .brand-title { color:#fff; }
  .qr-entry-brand .brand-subtitle { color:#d7e9e3; }
}
@media screen {
  #modal .exam-pick-help { margin:0 0 5px; font-size:14px; color:#667b93; }
  #modal .exam-pick { padding:17px; gap:16px; align-items:center; }
  #modal .exam-pick input { width:24px; height:24px; flex:0 0 24px; margin:0; }
  #modal .exam-pick-content { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; width:100%; align-items:center; }
  #modal .exam-pick-subject { display:flex; flex-direction:column; gap:7px; min-width:0; }
  #modal .exam-pick-subject strong { font-size:18px; color:#213b60; }
  #modal .exam-pick-subject > span { font-size:15px; line-height:1.6; color:#516783; }
  #modal .exam-pick-schedule { display:flex; flex-direction:column; align-items:flex-end; gap:7px; padding-left:20px; border-left:1px solid #cbd6e4; font-size:15px; font-variant-numeric:tabular-nums; }
  #modal .exam-pick-schedule > span { display:flex; align-items:center; gap:7px; color:#516783; }
  #modal .exam-pick-schedule svg { width:17px; height:17px; }
  #modal .exam-pick-schedule strong { color:#304e77; font-size:16px; }
  #modal .exam-pick:has(input:checked) { background:#e5effe; box-shadow:inset 4px 0 #345d93; }
}
@media screen and (max-width:620px) {
  #modal .exam-pick { padding:15px 12px; gap:12px; align-items:flex-start; }
  #modal .exam-pick input { margin-top:3px; }
  #modal .exam-pick-content { grid-template-columns:1fr; gap:12px; }
  #modal .exam-pick-schedule { flex-direction:row; justify-content:space-between; align-items:center; padding:10px 0 0; border-left:0; border-top:1px solid #d4dfed; gap:9px; font-size:14px; }
  #modal .exam-pick-schedule strong { font-size:14px; }
}
/* The live statistics use state accents on white, independent of role themes. */
@media screen {
  body[data-role] #app .live-command-board { background:#fff; color:#243c5c; border:1px solid #c7d3e3; box-shadow:0 5px 18px #263a5010; }
  body[data-role] #app .live-command-board::after { display:none; }
  body[data-role] #app .live-command-board .live-session-label { border-bottom:1px solid #dce4ee; padding:18px 22px; }
  body[data-role] #app .live-command-board .live-session-label strong { color:#263d5c; }
  body[data-role] #app .live-command-board :is(.live-board-eyebrow,.live-paper-list,.live-paper-list p,.live-summary-context) { color:#5a6f88; }
  body[data-role] #app .live-command-board .live-date-tag { background:#f4f7fb; color:#314e71; border:1px solid #c1cede; }
  body[data-role] #app .live-command-board .live-summary { padding:18px 22px 14px; gap:13px; }
  body[data-role] :is(#app,#modal) .live-summary > div { --stat-accent:#536a84; background:#fff; color:#30465f; border:1px solid #c8d4e1; border-top:5px solid var(--stat-accent); border-radius:10px; padding:16px; gap:10px; }
  body[data-role] :is(#app,#modal) .live-summary > .metric-status-face_only { --stat-accent:#0076e9; }
  body[data-role] :is(#app,#modal) .live-summary > .metric-status-present { --stat-accent:#00946b; }
  body[data-role] :is(#app,#modal) .live-summary > .metric-status-grade_off { --stat-accent:#171d27; }
  body[data-role] :is(#app,#modal) .live-summary > .metric-status-leave { --stat-accent:#8a98aa; }
  body[data-role] :is(#app,#modal) .live-summary > div > span { color:#3c526d; font-size:15px; font-weight:700; }
  body[data-role] :is(#app,#modal) .live-summary > div > strong { color:var(--stat-accent); font-size:38px; font-weight:800; }
  body[data-role] :is(#app,#modal) .live-summary .summary-light { width:17px; height:17px; flex:0 0 17px; }
  body[data-role] #app .live-command-board .live-summary-context { font-size:14px; padding:4px 22px 18px; }
  body[data-role] #app .live-command-board .live-summary-context strong { color:#304b6b; font-weight:800; }
}
@media screen and (max-width:620px) {
  body[data-role] #app .live-command-board .live-summary { grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px; gap:10px; }
  body[data-role] #app .live-command-board .live-summary > div:last-child { grid-column:1/-1; }
  body[data-role] :is(#app,#modal) .live-summary > div { padding:13px; }
  body[data-role] :is(#app,#modal) .live-summary > div > span { font-size:14px; }
  body[data-role] :is(#app,#modal) .live-summary > div > strong { font-size:32px; }
}
@media screen {
  body[data-role] #app .live-campus-toolbar { justify-content:flex-start; align-items:center; gap:18px; }
  body[data-role] #app .campus-alert-summary { margin-left:0; color:#596e88; font-size:15px; }
  body[data-role] #app .campus-alert-summary.has-alerts { color:#a82240; font-weight:750; }
  .live-paper-names { max-width:350px; font-size:14px; line-height:1.6; color:#526882; }
}
@media screen and (max-width:620px) {
  body[data-role] #app .live-campus-toolbar { gap:9px; }
  body[data-role] #app .campus-alert-summary { font-size:14px; }
}