/* Sobel School ERP - plain admin styling on top of Bootstrap 4 */
:root {
  --brand: #1d2b3f;
  --brand-dark: #142030;
  --accent: #c9a227;
  --bg: #f3f4f6;
  --line: #dee2e6;
  --muted: #6c757d;
  --sidebar-w: 255px;
}
body { background: var(--bg); font-size: 14px; color: #212529; font-family: var(--font, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* ---------- layout ---------- */
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); display: flex; flex-direction: column;
  background: var(--sb-bg, #0b1f4d); color: var(--sb-text, #c9d3e6); overflow: hidden; z-index: 1030;
  transition: transform .2s;
}
/* logo on a white band */
.app-sidebar .brand { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; color: #1d2733; text-decoration: none; border-bottom: 1px solid #dfe3e8; min-height: 66px; }
.app-sidebar .brand img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.app-sidebar .brand span { font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--brand, #1d2733); }
.app-sidebar .brand small { display: block; font-weight: 400; font-size: 11px; color: #6b7480; }
.app-sidebar .brand:only-child img, .app-sidebar .brand img:only-child { width: 100%; height: 46px; }
/* find a page */
.sb-search { flex: none; padding: 12px 14px 8px; }
.sb-search input { width: 100%; height: 36px; padding: 6px 12px; font-size: 14px; color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 3px; outline: 0; }
.sb-search input::placeholder { color: rgba(255,255,255,.55); }
.sb-search input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
/* scrolling part, classic always-visible scrollbar */
.sb-scroll { flex: 1 1 auto; overflow-y: scroll; overflow-x: hidden; padding: 4px 0 12px; }
@supports (-moz-appearance: none) { .sb-scroll { scrollbar-color: #c1c1c1 #f1f1f1; } }   /* Firefox */
.sb-scroll::-webkit-scrollbar { width: 15px; background: #f1f1f1; }
.sb-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
.sb-scroll::-webkit-scrollbar-thumb { background: #c1c1c1; border: 3px solid #f1f1f1; border-radius: 0; min-height: 30px; }
.sb-scroll::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.sb-scroll::-webkit-scrollbar-thumb:active { background: #787878; }
.sb-scroll::-webkit-scrollbar-button:single-button { display: block; height: 15px; background-color: #f1f1f1; background-repeat: no-repeat; background-position: center; background-size: 7px 7px; }
.sb-scroll::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 2 L9 8 L1 8 Z' fill='%23505050'/></svg>"); }
.sb-scroll::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1 2 L9 2 L5 8 Z' fill='%23505050'/></svg>"); }
.sb-scroll::-webkit-scrollbar-button:single-button:hover { background-color: #d2d2d2; }
/* section headings */
.sb-title { padding: 18px 18px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-text, #c9d3e6); opacity: .75; }
/* links */
.sb-link { display: flex; align-items: center; gap: 14px; padding: 11px 16px 11px 15px; color: var(--sb-text, #c9d3e6);
  text-decoration: none !important; font-size: 15px; border-left: 4px solid transparent; cursor: pointer; }
.sb-link i { width: 18px; text-align: center; flex: none; font-size: 15px; }
.sb-link span, .sb-sub span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-link .chev { width: auto; font-size: 11px; opacity: .8; transition: transform .2s; }
.sb-head:not(.collapsed) .chev { transform: rotate(180deg); }
.sb-link:hover, .sb-sub:hover { background: rgba(255,255,255,.06); }
.sb-link.active { background: rgba(255,255,255,.12); border-left-color: var(--sb-active, #d32f2f); font-weight: 500; }
.sb-kids { background: rgba(0,0,0,.18); }
.sb-sub { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 52px; font-size: 14px; color: var(--sb-text, #c9d3e6); text-decoration: none !important; border-left: 4px solid transparent; }
.sb-sub.active { border-left-color: var(--sb-active, #d32f2f); background: rgba(255,255,255,.1); font-weight: 500; }
.sb-badge { background: #c62828; color: #fff; font-size: 11px; font-weight: 700; min-width: 21px; height: 21px; line-height: 21px; text-align: center; border-radius: 11px; padding: 0 6px; flex: none; }
.sb-none { display: none; padding: 14px 18px; font-size: 13px; opacity: .7; }
.sb-searching .sb-none.show { display: block; }
.sb-searching .sb-kids { display: block !important; height: auto !important; }
.sb-searching .chev { display: none; }
.sb-hide { display: none !important; }
/* log out, always at the bottom */
.sb-logout { flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.12);
  color: var(--sb-text, #c9d3e6); font-size: 15px; text-decoration: none !important; background: rgba(0,0,0,.12); }
.sb-logout i { width: 18px; text-align: center; }
.sb-logout:hover { color: #fff; background: rgba(0,0,0,.25); }
.sb-backdrop { display: none; }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-top {
  height: 56px; background: var(--top-bg, #fff); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 1020;
}
.app-top .school-name { font-weight: 600; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-top .term-form select { font-size: 13px; height: 32px; padding: 2px 26px 2px 8px; min-width: 200px; }
.app-top .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.app-content { padding: 20px; flex: 1; }
.app-foot { padding: 10px 20px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); background: #fff; }
.menu-toggle { display: inline-block; border: 0; background: none; font-size: 20px; color: var(--brand); padding: 4px 6px; border-radius: 4px; }
.menu-toggle:hover { background: rgba(0,0,0,.06); }

@media (max-width: 991px) {
  .app-sidebar { transform: translateX(-100%); }
  body.menu-open .app-sidebar { transform: none; box-shadow: 0 0 30px rgba(0,0,0,.3); }
  body.menu-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1025; }
  .app-main { margin-left: 0; }
  .menu-toggle { display: inline-block; }
  .app-content { padding: 14px; }
  .app-top .hide-sm { display: none !important; }
}

/* ---------- page bits ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.page-head h1 { font-size: 20px; margin: 0; font-weight: 600; color: #1f2937; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.card { border: 1px solid var(--line); border-radius: 4px; box-shadow: none; margin-bottom: 18px; }
.card-header { background: #fafbfc; font-weight: 600; padding: 10px 14px; font-size: 14px; }
.card-body { padding: 14px; }
.table { margin-bottom: 0; background: #fff; }
.table th { font-size: 12.5px; text-transform: none; color: #495057; background: #f8f9fa; white-space: nowrap; }
.table td, .table th { padding: .45rem .6rem; vertical-align: middle; }
.table-sm td, .table-sm th { padding: .3rem .45rem; }
.table-responsive { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.table-responsive > .table { border: 0; }
.form-control, .custom-select { font-size: 14px; }
label { font-weight: 500; font-size: 13px; margin-bottom: .25rem; }
.btn { font-size: 13.5px; }
.btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-brand:hover { background: var(--brand-dark); color: #fff; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; height: 100%; }
.stat .lbl { color: var(--muted); font-size: 12.5px; }
.stat .val { font-size: 22px; font-weight: 600; color: #1f2937; margin-top: 2px; }
.stat .note { font-size: 12px; color: var(--muted); }
.filters { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; margin-bottom: 14px; }
.filters .form-group { margin-bottom: 0; }
.muted { color: var(--muted); }
.score-input { width: 72px; text-align: right; padding: 2px 6px; height: 30px; }
.score-input.invalid { border-color: #dc3545; background: #fff5f5; }
.sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.thumb { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e9ecef; }
.photo-lg { width: 120px; height: 140px; object-fit: cover; border: 1px solid var(--line); background: #f1f3f5; }
.nav-tabs .nav-link { font-size: 13.5px; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.check-grid label { font-weight: 400; }
.att-btns .btn { min-width: 34px; padding: 2px 8px; }
@media print {
  .app-sidebar, .app-top, .app-foot, .no-print, .filters { display: none !important; }
  .app-main { margin: 0; }
  .app-content { padding: 0; }
  body { background: #fff; }
}

/* ---------- login ---------- */
.auth-wrap { background: var(--login-bg, #eef1f5); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-box { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px; padding-bottom:50px;}
.auth-box .logo { width: 70px; height: 70px; object-fit: contain; display: block; margin: 0 auto 10px; }
.auth-box h1 { font-size: 19px; text-align: center; margin-bottom: 2px; }
.auth-box .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 13px; }

/* ---------- portal (parents) ---------- */
.portal-top { background: var(--brand); color: #fff; padding: 10px 0; }
.portal-top a { color: #fff; }
.portal-nav { background: #fff; border-bottom: 1px solid var(--line); }
.portal-nav .nav-link { color: #333; padding: 12px 14px; font-size: 14px; }
.portal-nav .nav-link.active { color: var(--brand); border-bottom: 3px solid var(--accent); font-weight: 600; }
.child-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px; display: flex; gap: 14px; align-items: center; }

/* ---------- light / dark mode switch ---------- */
.mode-toggle { font-size: 17px; line-height: 1; }
.mode-float { position: fixed; top: 12px; right: 14px; z-index: 1050; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 50%; width: 38px; height: 38px; }
.pw-reveal { cursor: pointer; font-family: SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.pw-reveal:hover { color: var(--brand); }

/* ---------- dark mode ---------- */
[data-theme="dark"] {
  --bg: #12161c; --line: #2c333d; --muted: #9aa5b1; --card: #1b2028; --card-head: #20262f; --text: #dde3ea; --input: #151a21;
  --top-bg: #1b2028; --login-bg: #12161c; color-scheme: dark;
}
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] a { color: #8ab4f8; }
[data-theme="dark"] a:hover { color: #aecbfa; }
[data-theme="dark"] .app-top, [data-theme="dark"] .app-foot { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .app-top .school-name, [data-theme="dark"] .page-head h1, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text); }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
[data-theme="dark"] .card, [data-theme="dark"] .stat, [data-theme="dark"] .filters, [data-theme="dark"] .auth-box, [data-theme="dark"] .child-card,
[data-theme="dark"] .list-group-item, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .modal-content, [data-theme="dark"] .table-responsive,
[data-theme="dark"] .bg-white, [data-theme="dark"] .portal-nav { background: var(--card) !important; border-color: var(--line) !important; color: var(--text); }
[data-theme="dark"] .card-header, [data-theme="dark"] .card-footer, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background: var(--card-head); border-color: var(--line); color: var(--text); }
[data-theme="dark"] .stat .val { color: var(--text); }
[data-theme="dark"] .table { background: var(--card); color: var(--text); }
[data-theme="dark"] .table th { background: var(--card-head); color: #c3ccd6; }
[data-theme="dark"] .table td, [data-theme="dark"] .table th, [data-theme="dark"] .table thead th { border-color: var(--line); }
[data-theme="dark"] .table-hover tbody tr:hover { background: rgba(255,255,255,.04); color: var(--text); }
[data-theme="dark"] .table-light, [data-theme="dark"] .table-light > th, [data-theme="dark"] .table-light > td, [data-theme="dark"] tr.table-light th { background: #232a34 !important; color: var(--text); }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.03); }
[data-theme="dark"] .form-control, [data-theme="dark"] .custom-select, [data-theme="dark"] .input-group-text {
  background-color: var(--input); border-color: #39424e; color: var(--text); }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .custom-select:focus { background-color: var(--input); color: var(--text); border-color: #5b8def; }
[data-theme="dark"] .form-control::placeholder { color: #6f7a87; }
[data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #1e242c; }
[data-theme="dark"] .custom-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23aab4bf' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); }
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: #2a313b; color: #fff; }
[data-theme="dark"] .dropdown-divider, [data-theme="dark"] hr { border-color: var(--line); }
[data-theme="dark"] .nav-tabs { border-color: var(--line); }
[data-theme="dark"] .nav-tabs .nav-link { color: #aab4bf; }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--card); color: var(--text); border-color: var(--line) var(--line) var(--card); }
[data-theme="dark"] .portal-nav .nav-link { color: #c3ccd6; }
[data-theme="dark"] .portal-nav .nav-link.active { color: #fff; }
[data-theme="dark"] .btn-outline-secondary { color: #c3ccd6; border-color: #4a5461; }
[data-theme="dark"] .btn-outline-secondary:hover { background: #2a313b; color: #fff; }
[data-theme="dark"] .btn-light { background: #2a313b; border-color: #39424e; color: var(--text); }
[data-theme="dark"] .alert-info { background: #13314a; border-color: #1d4a6e; color: #b9dcf7; }
[data-theme="dark"] .alert-success { background: #12341f; border-color: #1d5230; color: #b6e4c4; }
[data-theme="dark"] .alert-warning { background: #3a2f0f; border-color: #5c4a14; color: #f3df9b; }
[data-theme="dark"] .alert-danger { background: #3d1518; border-color: #642126; color: #f4c0c4; }
[data-theme="dark"] .alert-light { background: var(--card-head); color: var(--text); border-color: var(--line); }
[data-theme="dark"] .close { color: #fff; text-shadow: none; }
[data-theme="dark"] .badge-light { background: #2a313b; color: var(--text); }
[data-theme="dark"] .progress { background: #2a313b; }
[data-theme="dark"] .page-link { background: var(--card); border-color: var(--line); color: #8ab4f8; }
[data-theme="dark"] .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="dark"] .list-group-item-action:hover { background: #232a34; }
[data-theme="dark"] .list-group-item.active { background: var(--brand); border-color: var(--brand) !important; }
[data-theme="dark"] code { color: #f39fc1; }
[data-theme="dark"] .text-muted, [data-theme="dark"] .muted, [data-theme="dark"] small.muted { color: var(--muted) !important; }
[data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom { border-color: var(--line) !important; }
[data-theme="dark"] .bg-light { background: var(--card-head) !important; }
[data-theme="dark"] img.photo-lg { background: #222; }
[data-theme="dark"] #thread { background: #161a20 !important; }
[data-theme="dark"] #thread .bg-white { background: #232a34 !important; }
[data-theme="dark"] .app-top .avatar { box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
[data-theme="dark"] .mode-float { background: var(--card); color: #f6c94e; }
[data-theme="dark"] .mode-toggle { color: #f6c94e !important; }
@media print { [data-theme="dark"] body, [data-theme="dark"] .card, [data-theme="dark"] .table, [data-theme="dark"] .table th { background: #fff !important; color: #000 !important; } }
details.pw-reset > summary { list-style: none; display: inline-block; }
details.pw-reset > summary::-webkit-details-marker { display: none; }
[data-theme="dark"] table.stmt tr.grp th { background: #232a34 !important; color: #c3ccd6; border-color: var(--line) !important; }
[data-theme="dark"] table.stmt tr.tot th { border-color: #9aa5b1 !important; }
[data-theme="dark"] table.stmt tr.sub td { border-color: #4a5461 !important; }
[data-theme="dark"] .fr-nav .list-group-item.active { color: #fff; }
[data-theme="dark"] a.btn { color: inherit; }
[data-theme="dark"] .btn-brand, [data-theme="dark"] a.btn-brand, [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-danger { color: #fff !important; }
[data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] a.btn-outline-secondary { color: #c3ccd6; }
[data-theme="dark"] .list-group-item.active, [data-theme="dark"] .list-group-item-action.active { background: var(--brand) !important; color: #fff !important; }
[data-theme="dark"] .btn-link { color: #8ab4f8; }

/* ---------- top loading bar ---------- */
#topLoader { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; pointer-events: none; opacity: 0;
  background: var(--sb-active, #4fc3f7); box-shadow: 0 0 8px var(--sb-active, #4fc3f7); transition: width .25s ease, opacity .3s; }
#topLoader.run { opacity: 1; }
#topLoader.done { width: 100% !important; opacity: 0; transition: width .2s ease, opacity .4s .2s; }

/* ---------- collapsed (mini) sidebar on wide screens ---------- */
@media (min-width: 992px) {
  .app-sidebar, .app-main { transition: width .2s, margin-left .2s; }
  body.sb-mini { --sidebar-w: 64px; }
  body.sb-mini .app-sidebar .brand { padding: 12px 10px; justify-content: center; }
  body.sb-mini .app-sidebar .brand img { width: 40px; height: 40px; }
  body.sb-mini .app-sidebar .brand span, body.sb-mini .sb-search, body.sb-mini .sb-title, body.sb-mini .sb-link span, body.sb-mini .sb-link .chev,
  body.sb-mini .sb-kids, body.sb-mini .sb-logout span { display: none !important; }
  body.sb-mini .sb-link, body.sb-mini .sb-logout { justify-content: center; padding-left: 0; padding-right: 4px; position: relative; }
  body.sb-mini .sb-link .sb-badge { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; line-height: 16px; font-size: 9px; padding: 0 4px; }
  body.sb-mini .sb-sec + .sb-sec { border-top: 1px solid rgba(255,255,255,.08); }
  /* hovering the rail opens it over the page */
  body.sb-mini .app-sidebar:hover { width: 270px; box-shadow: 4px 0 18px rgba(0,0,0,.35); }
  body.sb-mini .app-sidebar:hover .brand { justify-content: flex-start; padding: 12px 14px; }
  body.sb-mini .app-sidebar:hover .brand span, body.sb-mini .app-sidebar:hover .sb-link span, body.sb-mini .app-sidebar:hover .sb-logout span { display: inline !important; }
  body.sb-mini .app-sidebar:hover .sb-search, body.sb-mini .app-sidebar:hover .sb-title { display: block !important; }
  body.sb-mini .app-sidebar:hover .sb-link .chev { display: inline-block !important; }
  body.sb-mini .app-sidebar:hover .sb-kids.show { display: block !important; }
  body.sb-mini .app-sidebar:hover .sb-link, body.sb-mini .app-sidebar:hover .sb-logout { justify-content: flex-start; padding: 11px 16px 11px 15px; }
  body.sb-mini .app-sidebar:hover .sb-link .sb-badge { position: static; }
}

/* ---------- the sidebar keeps the school colours in light and dark mode ---------- */
.app-sidebar a.sb-link, .app-sidebar a.sb-sub, .app-sidebar a.sb-logout,
[data-theme="dark"] .app-sidebar a.sb-link, [data-theme="dark"] .app-sidebar a.sb-sub, [data-theme="dark"] .app-sidebar a.sb-logout { color: var(--sb-text, #c9d3e6); }
.app-sidebar a.sb-link:hover, .app-sidebar a.sb-sub:hover, .app-sidebar a.sb-link.active, .app-sidebar a.sb-sub.active, .app-sidebar a.sb-head:not(.collapsed),
[data-theme="dark"] .app-sidebar a.sb-link:hover, [data-theme="dark"] .app-sidebar a.sb-sub:hover, [data-theme="dark"] .app-sidebar a.sb-link.active, [data-theme="dark"] .app-sidebar a.sb-sub.active { color: #fff; }
[data-theme="dark"] .app-sidebar .brand { background: #fff; }
[data-theme="dark"] .app-sidebar .brand span { color: var(--brand, #1d2733); }
[data-theme="dark"] .app-sidebar { background: var(--sb-bg, #0b1f4d); color: var(--sb-text, #c9d3e6); }
[data-theme="dark"] .menu-toggle { color: var(--text); }
[data-theme="dark"] .menu-toggle:hover { background: rgba(255,255,255,.08); }

/* ---------- job (role) picker ---------- */
.role-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.role-pick.compact { grid-template-columns: 1fr; }
.role-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius, 4px); padding: 7px 10px; margin: 0; cursor: pointer; background: var(--card, #fff); font-weight: normal; }
.role-opt input { margin-top: 4px; flex: none; }
.role-opt i { width: 18px; text-align: center; margin-top: 3px; color: var(--muted); flex: none; }
.role-opt b { display: block; font-size: 13.5px; }
.role-opt small { display: block; color: var(--muted); line-height: 1.3; }
.role-opt:hover { border-color: var(--brand); }
.role-opt:has(input:checked) { border-color: var(--brand); background: rgba(29,43,63,.05); }
.role-opt:has(input:checked) i { color: var(--brand); }
.role-pick.compact small { display: none; }
.role-pick.compact .role-opt:has(input:checked) small { display: block; }
[data-theme="dark"] .role-opt { background: var(--card); }
[data-theme="dark"] .role-opt:has(input:checked) { background: rgba(255,255,255,.05); }

/* ---------- text boxes: no shadow, ever ---------- */
.form-control, .form-control:focus, .form-control:active, .form-control:hover,
.custom-select, .custom-select:focus, .custom-select:active,
.custom-file-input:focus ~ .custom-file-label, .input-group .form-control:focus,
input, input:focus, select, select:focus, textarea, textarea:focus,
.form-control.is-invalid:focus, .form-control.is-valid:focus, .custom-select.is-invalid:focus,
[data-theme="dark"] .form-control, [data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select, [data-theme="dark"] .custom-select:focus { box-shadow: none !important; outline: 0; }
.form-control:focus, .custom-select:focus { border-color: var(--brand); }

/* ---------- Bootstrap messages and dialogs from ui.js ---------- */
#uiAlerts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 1080; width: min(520px, calc(100% - 32px)); }
#uiAlerts .alert { margin-bottom: 8px; }
.ui-dialog { background: transparent; }
.ui-dialog .modal-content { border-radius: 4px; }
td.empty-cell { padding: 10px !important; }
td.empty-cell .alert { text-align: left; }

/* ---------- role badge in the top bar ---------- */
.role-chip { display: inline-block; font-size: 11px; line-height: 1.2; color: var(--muted); }
.who { display: flex; flex-direction: column; line-height: 1.15; }
.portal-top .role-chip { color: rgba(255,255,255,.8); }
.help-guide h5 { margin-top: 1.4rem; }
.help-guide ol li, .help-guide ul li { margin-bottom: .35rem; }

/* ---------- phone bottom tab bar (portal and staff) ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: #fff; border-top: 1px solid #d6d9dd;
  padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav > a, .bottom-nav > button, .bottom-nav .dropup > button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 56px; color: #6b7480; font-size: 11px; text-decoration: none; background: none; border: 0; padding: 0; min-width: 0; }
.bottom-nav .dropup { flex: 1 1 0; display: flex; }
.bottom-nav .dropup > button { width: 100%; }
.bottom-nav i { font-size: 18px; margin-bottom: 3px; }
.bottom-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
.bottom-nav .on { color: var(--brand); font-weight: 600; }
.bottom-nav .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d9363e; vertical-align: top; }
.bottom-nav .dropdown-menu { margin-bottom: 6px !important; min-width: 190px; }
.bottom-nav .dropdown-item { padding: .6rem 1rem; }
[data-theme="dark"] .bottom-nav { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .bottom-nav > a, [data-theme="dark"] .bottom-nav button { color: #9aa5b1; }
[data-theme="dark"] .bottom-nav .on { color: #fff; }
@media (max-width: 767px) { body:has(.bottom-nav) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) and (max-width: 991px) { body:has(.bottom-nav.d-lg-none) { padding-bottom: 60px; } }
@media (max-width: 991px) { .app-main .app-foot { padding-bottom: 8px; } }
@media print { .bottom-nav { display: none !important; } }

/* ---------- alerts: plain, square, dark text ---------- */
.alert { border-radius: 2px; border: 1px solid; padding: 9px 14px; font-size: 14px; color: #2b2f33; box-shadow: none !important; }
.alert-info { background: #eef4f9; border-color: #c5d6e6; }
.alert-primary { background: #eef2f7; border-color: #c8d3e0; }
.alert-success { background: #eef6ee; border-color: #c2dcc2; }
.alert-warning { background: #fbf7e4; border-color: #e3d699; }
.alert-danger { background: #f9ecec; border-color: #e0bcbc; color: #7a1f1f; }
.alert-secondary, .alert-light { background: #f4f4f4; border-color: #d9d9d9; }
.alert .alert-link, .alert a { color: inherit; font-weight: normal; text-decoration: underline; }
.alert-dismissible { padding-right: 38px; }
.alert-dismissible .close { padding: 7px 12px; font-size: 20px; font-weight: normal; }
.alert.small { font-size: 13px; }
#uiAlerts .alert { background-clip: padding-box; }
[data-theme="dark"] .alert { color: #dfe4e9; }
[data-theme="dark"] .alert-info, [data-theme="dark"] .alert-primary { background: #1b2a37; border-color: #2c4255; }
[data-theme="dark"] .alert-success { background: #1a2e21; border-color: #2b4a34; }
[data-theme="dark"] .alert-warning { background: #33301a; border-color: #534c25; }
[data-theme="dark"] .alert-danger { background: #3a1d1f; border-color: #5a2d30; color: #f1caca; }
[data-theme="dark"] .alert-secondary, [data-theme="dark"] .alert-light { background: var(--card-head); border-color: var(--line); }
/* phones: the menu stops above the bottom tab bar so Log out stays visible */
@media (max-width: 991px) { body:has(.bottom-nav) .app-sidebar { bottom: calc(56px + env(safe-area-inset-bottom)); } }

/* ---------- buttons: no shadow, ever (normal, hover, focus, pressed) ---------- */
.btn, .btn:hover, .btn:focus, .btn.focus, .btn:active, .btn.active,
.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus,
.show > .btn.dropdown-toggle, .show > .btn.dropdown-toggle:focus, .btn-link:focus, .close:focus,
.custom-control-input:focus ~ .custom-control-label::before, .page-link:focus,
[data-theme="dark"] .btn, [data-theme="dark"] .btn:focus, [data-theme="dark"] .btn:active { box-shadow: none !important; }
.btn:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

/* ---------- printed reports (browser Print): plain official look, black hairline grid ---------- */
@media print {
  body, .app-content, .card, .card-body, .card-header, .table, .table th, .table td, .stat { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .card { border: 0 !important; }
  .card-header { border: 1px solid #000 !important; font-weight: 700; text-transform: uppercase; font-size: 11px; }
  .table { border-collapse: collapse !important; font-size: 11px; }
  .table th, .table td { border: 1px solid #000 !important; padding: 3px 6px !important; }
  .table thead th { text-transform: uppercase; font-size: 10px; font-weight: 700; }
  .table-striped tbody tr:nth-of-type(odd), .table-hover tbody tr:hover { background: #fff !important; }
  .badge { border: 1px solid #000; color: #000 !important; background: #fff !important; }
  .text-danger, .text-success { color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .alert { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
  h1, .page-head h1 { font-size: 16px; text-transform: uppercase; text-align: center; }
  .stat { border: 1px solid #000 !important; }
}

/* ---------- timetable ---------- */
.tt-grid th, .tt-grid td { vertical-align: middle; font-size: 13px; }
.tt-grid td { min-width: 92px; height: 54px; }
.tt-grid .tt-brk { background: #f3f4f6; min-width: 28px; width: 28px; font-size: 11px; color: #6b7480; }
[data-theme="dark"] .tt-grid .tt-brk { background: var(--card-head); }