:root{
  --moe-red:#e1251b;
  --moe-white:#FFFFFF;
  --moe-gold:#c89211;
  --moe-black:#222222;

  --bh-red:#CE1126;
  --bh-red-dark:#9c0c1d;
  --bh-white:#ffffff;
  --bg: var(--moe-white);
  --card:#0f1621;
  --muted:#94a3b8;
  --text: var(--moe-black);
  /* Border tuned for white UI (red theme) */
  --border:rgba(225,37,27,.16);
  --shadow: none;
  --radius:16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  background: var(--moe-white);
  color:var(--text);
}
body{
  margin:0;
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  background: var(--moe-white);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.topbar{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: var(--moe-red);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{
  width:auto;
  height:46px;
  display:block;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  padding:4px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.brand__mark{
  width:42px;height:42px;border-radius:14px;
  background: linear-gradient(145deg, var(--bh-red), var(--bh-red-dark));
  box-shadow: 0 10px 24px rgba(206,17,38,.25);
  position:relative;
}
.brand__mark:after{
  content:""; position:absolute; inset:8px;
  border-radius:10px; border:1px solid rgba(255,255,255,.28);
}
.brand__title{font-weight:900;letter-spacing:0;font-size:16px;color:#fff}
.brand__sub{font-size:12px;color:rgba(255,255,255,.88);margin-top:2px}

.meta{display:flex;align-items:center;gap:10px}
.meta__chip{
  font-size:12px;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  padding:8px 10px;
  border-radius:999px;
}
.meta__link{
  font-size:12px;
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.12);
}
.meta__link:hover{background: rgba(255,255,255,.18);}

.footer{border-top:1px solid var(--border);margin-top:28px}
.footer__inner{padding:16px 0;color:var(--muted);font-size:12px}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding:18px;
  margin-top:18px;
}
.card--thin{padding:14px}
.card__header{margin-bottom:12px}
.card__title{margin:0 0 6px 0;font-size:20px;color:var(--moe-black)}
.card__hint{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

.form{display:block}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
@media (max-width:820px){
  .grid,.grid2{grid-template-columns:1fr}
  .adminnav{flex-wrap:wrap}
}

.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:16px;color:var(--muted)}
.field__control{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(225,37,27,.22);
  background:#fff;
  color:var(--moe-black);
  outline:none;
  padding:0 12px;
}
.field__control:focus{
  border-color: rgba(225,37,27,.55);
  box-shadow: 0 0 0 4px rgba(225,37,27,.10);
}
.field__help{font-size:12px;color:var(--muted);line-height:1.5}

.row{display:flex;gap:12px;align-items:center}
.row--between{justify-content:space-between}

.actions{display:flex;gap:10px;align-items:center;margin-top:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 14px;border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:var(--moe-black);
  cursor:pointer;
  font-weight:800;
}
.btn:hover{background:rgba(0,0,0,.02)}
.btn--primary{
  border-color: var(--moe-red);
  background: var(--moe-red);
  color: var(--moe-white);
}
.btn--primary:hover{background: rgba(225,37,27,.92);}

.btn--ghost{
  background:#fff;
  border-color: rgba(225,37,27,.25);
  color: var(--moe-red);
}
.btn--danger{
  border-color: rgba(225,37,27,.55);
  background: rgba(225,37,27,.06);
  color: var(--moe-red);
}
.btn--sm{height:34px;border-radius:12px;padding:0 10px;font-size:12px}

.notice{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
.alert{
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  font-size:13px;
}
.alert--danger{
  border:1px solid rgba(206,17,38,.45);
  background: rgba(206,17,38,.10);
}

.table{--grid:70px 1fr 160px;margin-top:14px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.table__head,.table__row{display:grid;grid-template-columns:var(--grid);gap:10px;align-items:center;padding:10px 12px}
.table__head{
  background:rgba(225,37,27,.05);
  color:var(--moe-black);
  font-size:12px;
  font-weight:700;
}
.table__row{border-top:1px solid rgba(225,37,27,.10);font-size:13px}
.table__row:hover{background:rgba(225,37,27,.03)}
.table__head > div, .table__row > div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.right{text-align:left}


/* ---------- Custom File Picker (Arabic labels) ---------- */
.filepick{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  border:1px solid rgba(225,37,27,.22);
  border-radius:14px;
  padding:0 12px;
  background:#fff;
}
.filepick__input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.filepick__btn{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(225,37,27,.28);
  background: rgba(225,37,27,.06);
  color: var(--moe-red);
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.filepick__btn:hover{background: rgba(225,37,27,.10);}
.filepick__name{
  flex:1;
  min-width:0;
  color: var(--muted);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.adminbar{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: var(--moe-red);
}
.adminbar__inner{padding:12px 0;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.adminnav{display:flex;gap:8px;align-items:center}
.adminnav__link{
  font-size:12px;
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  white-space:nowrap;
}
.adminnav__link:hover{background: rgba(255,255,255,.18);}
.adminnav__link--danger{
  border-color: rgba(255,255,255,.32);
  background: rgba(0,0,0,.08);
}

.stats{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;margin-top:10px}
.stat{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:14px;padding:12px}
.stat__label{font-size:12px;color:var(--muted)}
.stat__value{font-weight:900;font-size:18px;margin-top:6px}

.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kv__item{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px;border:1px solid rgba(225,37,27,.16);background:#fff;border-radius:14px;padding:10px 12px}
.kv__item span{color:var(--muted);font-size:12px;font-weight:800}
.kv__item b{font-size:13px;font-weight:900;color:var(--moe-black);text-align:right}
.mono{font-family:var(--mono)}
.link{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.value{font-weight:900}
.muted{color:var(--muted);font-size:12px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.split{grid-template-columns:1fr}}



/* ---------- Schedule Builder Table ---------- */
.schedule-wrap{overflow:auto;border:2px solid var(--moe-red);border-radius:14px;background:#fff}
.schedule-table{width:100%;border-collapse:separate;border-spacing:0;min-width:920px}
.schedule-th, .schedule-td{border-left:1px solid rgba(34,34,34,.10);border-top:1px solid rgba(34,34,34,.10);padding:10px;vertical-align:middle}
.schedule-table tr:first-child .schedule-th{border-top:none}
.schedule-table tr .schedule-th:first-child,
.schedule-table tr .schedule-td:first-child{border-right:none}
.schedule-table tr .schedule-th:last-child,
.schedule-table tr .schedule-td:last-child{border-left:none}

.schedule-th{
  background: var(--moe-gold);
  color: var(--moe-black);
  font-weight:900;
  text-align:center;
}
.schedule-th__top{font-size:13px}
.schedule-th__time{font-size:12px;opacity:.85;margin-top:4px}

.schedule-th--day{min-width:120px}
.schedule-td--day{
  background: rgba(225,37,27,.04);
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}

.schedule-select{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(225,37,27,.35);
  background:#fff;
  padding:0 10px;
  outline:none;
}
.schedule-select:focus{
  border-color: rgba(225,37,27,.70);
  box-shadow: 0 0 0 4px rgba(225,37,27,.12);
}

select.field__control{appearance:none;-webkit-appearance:none}

.app{color:var(--moe-black)}


/* Sortable classes list */
.sortable{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sortable__item{
  display:flex;align-items:center;gap:10px;
  border:1px solid rgba(225,37,27,.18);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
}
.sortable__handle{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.02);
  cursor:grab;
  user-select:none;
}
.sortable__name{font-weight:800;flex:1;min-width:0}
.sortable__item.is-dragging{opacity:.65}
.sortable__item.is-over{outline:2px dashed rgba(225,37,27,.35); outline-offset:3px}


/* Force Tajawal everywhere */
html, body{font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial !important;}
button, input, select, textarea{font-family:inherit !important;}


/* ---------- Admin Sidebar (RTL right) ---------- */
.admin-shell{
  display:flex;
  align-items:stretch;
  gap:0;
}
.sidebar{
  width:270px;
  flex:0 0 270px;
  border-left:1px solid rgba(0,0,0,.10);
  background:#fff;
  position:sticky;
  top:64px;
  height: calc(100vh - 64px);
  overflow:auto;
  padding:14px 12px;
}
.admin-main{
  flex:1 1 auto;
  min-width:0;
  padding:20px 0 0;
}
.sidebar__nav{display:flex;flex-direction:column;gap:8px}

/* Sections are used only for grouping; keep them clean (no boxes) */
.sidebar__section{border:0;background:transparent;padding:0}

/* Icon + text */
.sidebar__ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;color:var(--moe-red)}
.sidebar__ico svg{width:20px;height:20px;fill:currentColor}
.sidebar__txt{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__chev{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:rgba(0,0,0,.55);transition:transform .15s ease;margin-inline-start:auto}
.sidebar__chev svg{width:18px;height:18px;fill:currentColor}

/* Links */
.sidebar__link,
.sidebar__groupBtn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:0;
  background:transparent;
  color:var(--moe-black);
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
}
.sidebar__link:hover,
.sidebar__groupBtn:hover{background:rgba(225,37,27,.06)}
.sidebar__link.is-active{background:var(--moe-red);color:#fff}
.sidebar__link.is-active .sidebar__ico{color:#fff}

/* Groups / dropdown */
.sidebar__groupBtn{justify-content:flex-start}
.sidebar__groupItems{display:none;padding-inline-start:10px;margin-top:6px}
.sidebar__group.is-open .sidebar__groupItems{display:block}
.sidebar__group.is-open .sidebar__chev{transform:rotate(180deg)}

/* Sub links */
.sidebar__link--sub{font-weight:800;font-size:13px;opacity:.98;padding-inline-start:38px}
.sidebar__link--danger{color:var(--moe-red)}
.sidebar__link--danger:hover{background:rgba(225,37,27,.06)}

.adminbar__right{display:flex;align-items:center;gap:10px}
.admin-user{color:#fff;text-align:left}
.admin-user__name{font-weight:900}
.admin-user__meta{font-size:12px;opacity:.9}

.sidebar-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  border-radius:0;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible{
  background:transparent;
  box-shadow:none;
  outline:none;
}
.sidebar-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.sidebar-toggle__bars span{
  display:block;
  width:22px;
  height:2.5px;
  border-radius:999px;
  background:#fff;
}

/* Responsive: sidebar becomes drawer */
@media (max-width: 980px){
  .sidebar{
    position:fixed;
    top:64px;
    right:0;
    height: calc(100vh - 64px);
    transform: translateX(110%);
    transition: transform .2s ease;
    z-index:50;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
  }
  .sidebar.is-open{transform: translateX(0)}
  .sidebar-toggle{display:inline-flex}
  .admin-shell{display:block}
  .admin-main{padding-top:20px}
}



.card{box-shadow:none !important;}


/* ---------- Dropdown search inside select (Schedule page) ---------- */
.ds-wrap{position:relative}
.ds-button{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(225,37,27,.22);
  background:#fff;
  color:var(--moe-black);
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  font-weight:800;
}
.ds-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-button__icon{opacity:.65}

.ds-panel{
  position:absolute;
  top:48px;
  right:0;
  left:0;
  z-index:60;
  background:#fff;
  border:1px solid rgba(225,37,27,.18);
  border-radius:16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  padding:10px;
}
.ds-search{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(225,37,27,.18);
  padding:0 10px;
  width:100%;
  outline:none;
  background:#fff;
  font-weight:700;
}
.ds-list{margin-top:10px;max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.ds-item{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.ds-item:hover{background:rgba(0,0,0,.02)}
.ds-item.is-selected{border-color:rgba(225,37,27,.35);background:rgba(225,37,27,.05)}
.ds-empty{color:var(--muted);padding:10px;font-size:13px}


/* Student check-in warning box */
.alert--soft-red{border:1px solid rgba(225,37,27,.75);
  background: rgba(225,37,27,.08);
  color: rgba(225,37,27,.92);
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  line-height:1.8;
  margin-top:14px;
  margin-bottom:14px;
}

/* Student check-in time note (yellow) */
.alert--soft-yellow{
  border:1px solid rgba(245,158,11,.85);
  background: rgba(245,158,11,.12);
  color: rgba(180,83,9,.95);
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  line-height:1.8;
  margin-top:10px;
  margin-bottom:10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.alert--soft-yellow .alert__icon{
  font-size:18px;
  line-height:1.2;
  margin-top:1px;
}
.alert--soft-yellow .alert__content{min-width:0;}


/* Student check-in spacing */
.checkin-actions{margin-bottom:10px;}
.alert--soft-red{margin-top:10px !important;}


/* Reports: ensure names are fully visible */
.reports-table .name-cell{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.8;
}


/* ---------- Reports: classic table layout ---------- */
.report-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
}
.report-table th,
.report-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  border-left:1px solid rgba(0,0,0,.06);
  vertical-align:top;
  text-align:right;
  line-height:1.8;
  white-space:normal;
}
.report-table th{
  background:rgba(200,146,17,.14);
  color:var(--moe-black);
  font-weight:500;
}
.report-table tr:last-child td{border-bottom:0}
.report-table th:last-child,
.report-table td:last-child{border-left:0}
.report-table .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.reports-no-truncate *{white-space:normal !important;overflow:visible !important;text-overflow:unset !important;word-break:break-word;}

/* ---------- Student Result Modal (POST /checkin) ---------- */
.result-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.result-modal{
  width: min(560px, 100%);
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  padding: 18px;
  position: relative;
  animation: resultModalIn .16s ease-out;
}

@keyframes resultModalIn{
  from{ transform: translateY(10px) scale(.98); opacity: .0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

.result-modal__close{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}
.result-modal__close:hover{ background: rgba(0,0,0,.05); }

.result-modal__icon{
  width: 82px;
  height: 82px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 8px;
  font-size: 46px;
  user-select: none;
}

.result-modal__icon--success{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.35);
  animation: thumbsBounce .85s ease-in-out 0s 6;
}

@keyframes thumbsBounce{
  0%{ transform: scale(1) rotate(0deg); }
  25%{ transform: scale(1.12) rotate(-6deg); }
  50%{ transform: scale(.98) rotate(4deg); }
  75%{ transform: scale(1.08) rotate(-3deg); }
  100%{ transform: scale(1) rotate(0deg); }
}

.result-modal__icon--danger{
  background: rgba(225,37,27,.10);
  border: 1px solid rgba(225,37,27,.35);
}

.result-modal__title{
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  color: var(--moe-black);
  margin-bottom: 10px;
}

.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}

.badge--danger{
  border: 1px solid rgba(225,37,27,.55);
  background: rgba(225,37,27,.10);
  color: rgba(225,37,27,.95);
}

.badge--success{
  border: 1px solid rgba(34,197,94,.55);
  background: rgba(34,197,94,.12);
  color: rgba(21,128,61,.98);
}

.result-modal__details{ margin-top: 12px; }

@media (max-width: 520px){
  .result-modal{ padding: 14px; }
  .kv{ grid-template-columns: 1fr; }
  .result-modal__close{ left: 8px; top: 8px; }
}

/* -----------------------------
   Admin Users table (borders + icons)
------------------------------*/
.data-table-wrap{overflow:auto}
.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(225,37,27,.22);
  border-radius:16px;
  background:#fff;
}
.data-table thead th{
  background: rgba(225,37,27,.06);
  color: var(--moe-black);
  font-weight: 900;
  font-size: 13px;
}
.data-table th,.data-table td{
  padding: 12px 10px;
  border-bottom:1px solid rgba(225,37,27,.14);
  border-inline-start:1px solid rgba(225,37,27,.12);
  vertical-align: middle;
  white-space: nowrap;
}
.data-table th:first-child,.data-table td:first-child{border-inline-start:none}
.data-table tbody tr:hover{background: rgba(225,37,27,.035)}
.data-table tbody tr:last-child td{border-bottom:none}

.btn-group{display:flex;align-items:center;gap:8px}
.btn--icon{width:34px;min-width:34px;padding:0}
.btn--icon svg{width:18px;height:18px;fill:currentColor}
.btn--icon i{font-size:18px;line-height:1;color:currentColor}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(225,37,27,.18);
  background: rgba(225,37,27,.05);
  font-size: 12px;
  font-weight: 900;
  color: var(--moe-black);
}
.pill--muted{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.55);
}

.lock-muted{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.55);
}
.lock-muted svg{width:18px;height:18px;fill:currentColor}


/* -----------------------------
   Bulk actions (Admin Users)
------------------------------*/
.bulkbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(225,37,27,.18);
  background: rgba(225,37,27,.04);
  border-radius:16px;
  margin-bottom:10px;
}
.bulkbar__sel{display:flex;align-items:center;gap:10px;font-weight:900}
.bulkbar__right{display:flex;align-items:center;gap:10px}
.bulkbar__count{font-weight:900;color:var(--moe-black)}
.chk{width:18px;height:18px;accent-color: var(--moe-red);cursor:pointer}
.chk:disabled{cursor:not-allowed;opacity:.5}


/* -----------------------------
   Sidebar overrides (accordion style + bullets)
   Added in patch_17
------------------------------*/
.snav{display:flex;flex-direction:column;gap:10px}
.snav, .snav *{box-sizing:border-box}
.snav svg{width:18px;height:18px;display:block}

.snav__link, .snav__toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(225,37,27,.12);
  background:#fff;
  color:var(--moe-black);
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
}
.snav__toggle{justify-content:space-between}
.snav__toggle .snav__text{flex:1;min-width:0;text-align:right}
.snav__link .snav__text{flex:1;min-width:0}

.snav__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:rgba(225,37,27,.06);
  flex:0 0 34px;
}
.snav__icon svg{fill:var(--moe-red)}
.snav__icon i{font-size:18px;line-height:1;color:var(--moe-red)}

.snav__chev{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;opacity:.7;transition:transform .18s ease}
.snav__chev svg{fill:rgba(0,0,0,.55)}

.snav__link:hover, .snav__toggle:hover{background:rgba(225,37,27,.04)}
.snav__link.is-active{
  background:var(--moe-red);
  border-color:rgba(225,37,27,.55);
  color:#fff;
}
.snav__link.is-active .snav__icon{background:rgba(255,255,255,.16)}
.snav__link.is-active .snav__icon svg{fill:#fff}
.snav__link.is-active .snav__icon i{color:#fff}

.snav__link--danger{
  border-color:rgba(225,37,27,.35);
}
.snav__link--danger .snav__icon{background:rgba(225,37,27,.12)}

.snav__group{
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  padding:0;
  transition: background .18s ease, border-color .18s ease, padding .18s ease;
}
.snav__group.is-open{
  border-color: rgba(225,37,27,.14);
  background:#fff;
  padding:4px;
}
.snav__group.is-open > .snav__toggle{
  border-color: transparent;
  background:rgba(225,37,27,.04);
}
.snav__group.is-open .snav__chev{transform:rotate(180deg)}
.snav__items{
  padding:0 4px;
  display:grid;
  gap:8px;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease, padding .18s ease;
}
.snav__group.is-open .snav__items{padding:8px 4px 4px}
.snav__items .snav__link{
  border-radius:14px;
  border:0;
  background:transparent;
  padding:10px 12px;
  gap:8px;
}
.snav__items .snav__link .snav__icon{display:none}
.snav__items .snav__link::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(225,37,27,.38);
  flex:0 0 7px;
}
.snav__items .snav__link.is-active::before{background:rgba(255,255,255,.75)}

/* Fix: submenu active item should remain readable (red text on light bg) */
.snav__items .snav__link.is-active{
  background: rgba(225,37,27,.06) !important;
  color: var(--moe-red) !important;
}
.snav__items .snav__link.is-active::before{
  background: var(--moe-red) !important;
}



/* Responsive: sidebar becomes drawer */
@media (max-width: 980px){
  .sidebar{
    position:fixed;
    top:64px;
    right:0;
    height: calc(100vh - 64px);
    transform: translateX(110%);
    transition: transform .2s ease;
    z-index:50;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
  }
  .sidebar.is-open{transform: translateX(0)}
  .sidebar-toggle{display:inline-flex}
  .admin-shell{display:block}
  .admin-main{padding-top:20px}
}



.card{box-shadow:none !important;}

/* -----------------------------
   Dialogs (modal popups)
------------------------------*/
dialog.dlg{
  width: min(560px, 94vw);
  max-width: 94vw;
  padding: 0;
  border: 1px solid rgba(225,37,27,.22);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  overflow: hidden;
}
dialog.dlg::backdrop{background: rgba(0,0,0,.35)}
.dlg__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  background: rgba(225,37,27,.04);
  border-bottom: 1px solid rgba(225,37,27,.14);
}
.dlg__title{font-weight: 900; font-size: 14px}
.dlg__x{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(225,37,27,.18);
  background: #fff;
  color: var(--moe-red);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  line-height: 1;
}
.dlg__x:hover{background: rgba(225,37,27,.06)}
.dlg__body{padding: 14px}


/* ---------- Dropdown search inside select (Schedule page) ---------- */
.ds-wrap{position:relative}
.ds-button{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(225,37,27,.22);
  background:#fff;
  color:var(--moe-black);
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  font-weight:800;
}
.ds-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-button__icon{opacity:.65}

.ds-panel{
  position:absolute;
  top:48px;
  right:0;
  left:0;
  z-index:60;
  background:#fff;
  border:1px solid rgba(225,37,27,.18);
  border-radius:16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  padding:10px;
}
.ds-search{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(225,37,27,.18);
  padding:0 10px;
  width:100%;
  outline:none;
  background:#fff;
  font-weight:700;
}
.ds-list{margin-top:10px;max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.ds-item{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.ds-item:hover{background:rgba(0,0,0,.02)}
.ds-item.is-selected{border-color:rgba(225,37,27,.35);background:rgba(225,37,27,.05)}
.ds-empty{color:var(--muted);padding:10px;font-size:13px}


/* Student check-in warning box */
.alert--soft-red{border:1px solid rgba(225,37,27,.75);
  background: rgba(225,37,27,.08);
  color: rgba(225,37,27,.92);
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  line-height:1.8;
  margin-top:14px;
  margin-bottom:14px;
}


/* Student check-in spacing */
.checkin-actions{margin-bottom:10px;}
.alert--soft-red{margin-top:10px !important;}


/* Reports: ensure names are fully visible */
.reports-table .name-cell{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.8;
}

/* Hide scrollbar in sidebar (keep scroll functionality) */
#admin_sidebar, .admin-sidebar, .admin-sidebar__inner{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#admin_sidebar::-webkit-scrollbar, .admin-sidebar::-webkit-scrollbar, .admin-sidebar__inner::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* Internal dropdown items: no borders, no icons, show bullet dot */
.snav__items .snav__link{
  border: 0 !important;
  box-shadow: none !important;
}
.snav__items .snav__link .snav__icon{ display:none !important; }



/* ==============================
   Patch 28 — Dashboard polish
============================== */
/* Keep submenu active item readable */
.snav__items .snav__link.is-active{
  background: rgba(225,37,27,.06) !important;
  color: var(--moe-red) !important;
}
.snav__items .snav__link.is-active::before{
  background: var(--moe-red) !important;
}

/* Add comfortable breathing room between sidebar and page content */
.admin-shell{
  gap: 18px;
  align-items: flex-start;
}
.sidebar{
  margin: 16px 12px 16px 0;
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(17,24,39,.05);
  border-left-color: rgba(225,37,27,.08);
  height: calc(100vh - 96px);
  top: 80px;
}
.admin-main{
  padding: 20px 10px 0 0;
}
@media (max-width: 980px){
  .admin-shell{ gap: 0; }
  .sidebar{ margin: 0; border-radius: 0; box-shadow: none; height: calc(100vh - 64px); top: 64px; }
  .admin-main{ padding: 20px 0 0; }
}

/* Dashboard layout */
.dash{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash .card{
  margin-top: 0;
  border-radius: 24px;
  border-color: rgba(225,37,27,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));
}
.dash__hero{
  display: grid;
  grid-template-columns: minmax(320px,.92fr) minmax(360px,1.08fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 860px){
  .dash__hero{ grid-template-columns: 1fr; }
}
.dash-card{
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
.dash-card::after{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at center, rgba(225,37,27,.06), transparent 68%);
  pointer-events: none;
}
.dash-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 16px;
}
.dash-card__title{ margin:0; font-size: 18px; font-weight: 900; color: var(--moe-black); }
.dash-card__hint{ margin:6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.dash-card__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(225,37,27,.16);
  background: rgba(225,37,27,.05);
  color: var(--moe-red);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.dash-card__body{ display:flex; flex-direction:column; gap: 14px; }

.dash-user{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.dash-user__name{ font-weight: 950; font-size: 16px; color: var(--moe-black); line-height:1.2; }
.dash-user__meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 8px; }
.dash-user__chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  border:1px solid rgba(225,37,27,.16);
  background: rgba(225,37,27,.05);
  color: rgba(225,37,27,.92);
  font-size: 12px;
  font-weight: 900;
}
.dash-user__actions{ display:flex; gap: 10px; align-items:center; }
.dash-user__logout{
  height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 14px;
}

.dash-note{
  border: 1px dashed rgba(225,37,27,.24);
  background: rgba(225,37,27,.03);
  border-radius: 18px;
  padding: 12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.dash-note__time{ font-weight: 950; letter-spacing: .5px; font-size: 24px; }

.dash-update{ display:flex; flex-direction:column; gap: 14px; }
.dash-update__status{
  min-height: 86px;
  border: 1px solid rgba(225,37,27,.12);
  background: rgba(225,37,27,.03);
  border-radius: 18px;
  padding: 14px;
  line-height: 1.8;
  color: var(--muted);
  font-size: 13px;
}
.dash-update__actions{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.dash-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid transparent;
}
.dash-badge--warn{
  background: rgba(225,37,27,.08);
  border-color: rgba(225,37,27,.18);
  color: var(--moe-red);
}
.dash-badge--ok{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.22);
  color: rgba(21,128,61,.98);
}

.dash__kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){
  .dash__kpis{ grid-template-columns: 1fr; }
}
.kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-height: 118px;
}
.kpi__label{ font-size: 14px; color: var(--muted); font-weight: 700; }
.kpi__value{ font-size: 38px; font-weight: 950; color: var(--moe-gold); line-height: 1; }
.kpi__icon{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(200, 146, 17,.16);
  background: rgba(200, 146, 17,.05);
  color: var(--moe-gold);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  flex: 0 0 52px;
}

.dash-card--chart{ padding-top: 20px; }
.dash-compare{ margin-top: 4px; }
.dash-compare .grid{
  grid-template-columns: minmax(240px, 380px);
  gap: 14px;
}
.dash-compare--single .grid{
  grid-template-columns: minmax(240px, 380px);
}
@media (max-width: 760px){
  .dash-compare .grid,
  .dash-compare--single .grid{ grid-template-columns: 1fr; }
}
.dash-compare__meta{
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px dashed rgba(225,37,27,.14);
  padding-top: 10px;
}
.dash-chart{
  margin-top: 14px;
  border: 1px solid rgba(225,37,27,.12);
  background: linear-gradient(180deg, rgba(225,37,27,.02), rgba(255,255,255,.96));
  border-radius: 20px;
  padding: 14px;
}
.dash-chart__viewport{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.dash-chart__stage{
  position: relative;
  width: 100%;
  min-width: 0;
  height: 340px;
  min-height: 220px;
  max-height: 380px;
}
.dash-chart__stage canvas{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none;
}
@media (max-width: 900px){
  .dash-chart__stage{
    height: 300px;
    max-height: 330px;
  }
}
@media (max-width: 640px){
  .dash-chart{
    padding: 12px;
  }
  .dash-chart__stage{
    height: 260px;
    min-height: 230px;
    max-height: 290px;
  }
}
@media (max-width: 420px){
  .dash-chart__stage{
    height: 240px;
    min-height: 220px;
    max-height: 260px;
  }
}
.dash-legend{ display:flex; gap: 10px; align-items:center; justify-content:flex-start; margin-top: 12px; flex-wrap: wrap; }
.dash-legend__item{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--legend-color, rgba(0,0,0,.08));
  background: var(--legend-bg, rgba(225,37,27,.06));
  color: var(--legend-color, rgba(0,0,0,.78));
}
.dash-legend__item:before{ content:""; width:10px; height:10px; border-radius: 3px; display:inline-block; background: var(--legend-color, rgba(0,0,0,.78)); }


/* Patch 32 */
.badges-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
.badges-row .pill{flex:0 0 auto}

.classlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:260px;overflow:auto;padding:10px;border:1px solid rgba(225,37,27,.12);border-radius:16px;background:rgba(225,37,27,.03)}
.classitem{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(225,37,27,.14);border-radius:12px;background:#fff;font-weight:800;line-height:1.4}
.classitem input{width:18px;height:18px;accent-color:var(--moe-red);flex:0 0 auto}
.classitem span{display:inline-block;white-space:nowrap}
.teacher-class-badges{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-inline-start:10px}
.dlg--teacher .dlg__body{padding-top:14px}
.dlg--teacher .dlg__header{background:rgba(225,37,27,.05);border-bottom:1px solid rgba(225,37,27,.12)}

@media (max-width: 900px){
  .classlist{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 640px){
  .classlist{grid-template-columns:1fr;}
}

/* Patch 33 — restore left page breathing room for admin cards on all pages */
.admin-main{
  /* top right bottom left */
  padding:20px 10px 0 18px;
}
@media (max-width: 980px){
  .admin-main{
    padding:20px 12px 0 12px;
  }
}


/* Patch 35 — auto schedule page */
.auto-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.auto-summary-card{border:1px solid rgba(225,37,27,.12);background:rgba(225,37,27,.03);border-radius:18px;padding:16px}.auto-summary-card__label{font-size:13px;color:var(--muted);font-weight:800}.auto-summary-card__value{font-size:34px;font-weight:950;color:var(--moe-gold);line-height:1;margin-top:10px}.table--prefs .table__row,.table--prefs .table__head,.table--auto-loads .table__row,.table--auto-loads .table__head{align-items:center}.table__checkbox-cell{display:flex;align-items:center;justify-content:center}.table__checkbox-cell input{width:18px;height:18px;accent-color:var(--moe-red)}
@media (max-width:980px){.auto-summary-grid{grid-template-columns:1fr}.table--prefs,.table--auto-loads{overflow:auto}}

/* Patch 34 — shared admin actions + popups for students/teachers like users page */
.entity-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.btn--green{
  border-color:#16a34a;
  background:#16a34a;
  color:#fff;
}
.btn--green:hover{background:#15803d;}
.btn--soft{
  border-color:rgba(225,37,27,.20);
  background:rgba(225,37,27,.04);
  color:var(--moe-red);
}
.dlg--entity-popup{
  width:min(680px,94vw);
}
.dlg--entity-popup .dlg__header,
.dlg--users-popup .dlg__header{
  background:rgba(225,37,27,.045);
  border-bottom:1px solid rgba(225,37,27,.16);
}
.dlg--entity-popup .dlg__body,
.dlg--users-popup .dlg__body{padding:16px;}
.users-popup-hint{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid rgba(225,37,27,.14);
  background:rgba(225,37,27,.04);
  border-radius:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
.file-picker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid rgba(225,37,27,.22);
  border-radius:14px;
  background:#fff;
}
.file-picker__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(225,37,27,.20);
  background:rgba(225,37,27,.05);
  color:var(--moe-red);
  font-weight:900;
  cursor:pointer;
}
.file-picker__name{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.sr-only-file{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.teacher-sort-row{cursor:default;}
.teacher-sort-cell{display:flex;align-items:center;gap:10px;}
.teacher-sort-row.sortable__item{background:#fff;}
.teacher-sort-row td{background:transparent;}
.data-table tbody tr.sortable__item{
  display:table-row;
  border:none;
  background:transparent;
  padding:0;
}
.data-table tbody tr.sortable__item.is-dragging{opacity:.65;}
.data-table tbody tr.sortable__item.is-over{outline:2px dashed rgba(225,37,27,.35); outline-offset:-3px;}


e:34px;font-weight:950;color:var(--moe-gold);line-height:1;margin-top:10px}.table--prefs .table__row,.table--prefs .table__head,.table--auto-loads .table__row,.table--auto-loads .table__head{align-items:center}.table__checkbox-cell{display:flex;align-items:center;justify-content:center}.table__checkbox-cell input{width:18px;height:18px;accent-color:var(--moe-red)}
@media (max-width:980px){.auto-summary-grid{grid-template-columns:1fr}.table--prefs,.table--auto-loads{overflow:auto}}

/* Patch 34 — shared admin actions + popups for students/teachers like users page */
.entity-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.btn--green{
  border-color:#16a34a;
  background:#16a34a;
  color:#fff;
}
.btn--green:hover{background:#15803d;}
.btn--soft{
  border-color:rgba(225,37,27,.20);
  background:rgba(225,37,27,.04);
  color:var(--moe-red);
}
.dlg--entity-popup{
  width:min(680px,94vw);
}
.dlg--entity-popup .dlg__header,
.dlg--users-popup .dlg__header{
  background:rgba(225,37,27,.045);
  border-bottom:1px solid rgba(225,37,27,.16);
}
.dlg--entity-popup .dlg__body,
.dlg--users-popup .dlg__body{padding:16px;}
.users-popup-hint{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid rgba(225,37,27,.14);
  background:rgba(225,37,27,.04);
  border-radius:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
.file-picker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid rgba(225,37,27,.22);
  border-radius:14px;
  background:#fff;
}
.file-picker__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(225,37,27,.20);
  background:rgba(225,37,27,.05);
  color:var(--moe-red);
  font-weight:900;
  cursor:pointer;
}
.file-picker__name{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.sr-only-file{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.teacher-sort-row{cursor:default;}
.teacher-sort-cell{display:flex;align-items:center;gap:10px;}
.teacher-sort-row.sortable__item{background:#fff;}
.teacher-sort-row td{background:transparent;}
.data-table tbody tr.sortable__item{
  display:table-row;
  border:none;
  background:transparent;
  padding:0;
}
.data-table tbody tr.sortable__item.is-dragging{opacity:.65;}
.data-table tbody tr.sortable__item.is-over{outline:2px dashed rgba(225,37,27,.35); outline-offset:-3px;}


/* Reports: manual attendance confirmation dialog */
.confirm-present-dialog{
  width:min(470px, 94vw);
}
.confirm-present-dialog__body{
  padding:22px 20px 20px;
  text-align:center;
}
.confirm-present-dialog__icon{
  width:62px;
  height:62px;
  margin:0 auto 14px;
  border-radius:14px;
  border:1px solid rgba(24,162,104,.20);
  background:rgba(24,162,104,.10);
  color:#177a53;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  font-weight:900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.confirm-present-dialog__headline{
  font-size:18px;
  font-weight:350;
  color:var(--moe-black);
  margin-bottom:10px;
}
.confirm-present-dialog__message{
  border:1px solid rgba(225,37,27,.24);
  background:rgba(225,37,27,.05);
  color:rgba(34,34,34,.84);
  border-radius:10px;
  padding:14px 16px;
  line-height:1.9;
  font-size:12px;
}
.confirm-present-dialog__student{
  margin-top:12px;
  color:var(--moe-red);
  font-weight:900;
  font-size:18px;
}
.confirm-present-dialog__actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}
.confirm-present-dialog__actions .btn{
  min-width:132px;
}
@media (max-width: 640px){
  .confirm-present-dialog__headline{font-size:22px;}
  .confirm-present-dialog__actions{flex-direction:column;}
  .confirm-present-dialog__actions .btn{width:100%;}
}


.footer__inner--split{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}

.btn--soft-blue{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.24);
  color:#2563eb;
}
.btn--soft-blue:hover{background: rgba(59,130,246,.16);}
.btn--soft-green{
  background: rgba(24,162,104,.10);
  border-color: rgba(24,162,104,.24);
  color:#177a53;
}
.btn--soft-green:hover{background: rgba(24,162,104,.16);}

.dash-card__logout-chip{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
}
.dash-user__meta{align-items:center;}
.dash-user__pw-btn{border-radius:999px;padding-inline:14px;}
.change-pw-dlg{width:min(480px,94vw);}
.change-pw-dlg__body{text-align:center;padding:22px 20px 20px;}
.change-pw-dlg__icon{
  width:72px;height:72px;margin:0 auto 14px;border-radius:22px;
  border:1px solid rgba(59,130,246,.18);background:rgba(59,130,246,.08);
  display:flex;align-items:center;justify-content:center;font-size:34px;
}
.change-pw-dlg__headline{font-size:22px;font-weight:900;color:var(--moe-black);margin-bottom:14px;}
.change-pw-dlg__form{display:grid;gap:12px;text-align:right;}
.change-pw-dlg__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.change-pw-dlg__actions .btn{min-width:140px;}

.leaders-card{margin-top:14px;}
.leaders-card__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.leaders-card__item{
  border:1px solid rgba(225,37,27,.14);
  background:rgba(225,37,27,.03);
  border-radius:18px;
  padding:14px 16px;
  text-align:center;
}
.leaders-card__label{font-size:13px;color:var(--muted);font-weight:800;margin-bottom:8px;}
.leaders-card__name{font-size:20px;font-weight:900;color:var(--moe-black);}

.reports-absent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.report-check{width:18px;height:18px;accent-color:var(--moe-red);cursor:pointer;}
.report-inline-label{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:34px;padding:0 10px;border-radius:12px;border:1px solid rgba(225,37,27,.15);background:rgba(225,37,27,.03);font-weight:300;}
.confirm-present-dialog__student-list{display:grid;gap:8px;margin-top:14px;max-height:180px;overflow:auto;padding-inline:2px;}
.confirm-present-dialog__student-item{border:1px solid rgba(225,37,27,.16);background:rgba(225,37,27,.04);color:var(--moe-red);font-weight:600;border-radius:14px;padding:10px 12px;}

@media (max-width: 820px){
  .leaders-card__row{grid-template-columns:1fr;}
  .footer__inner--split{justify-content:center;text-align:center;}
}


/* ==============================
   Patch 29 — Mobile sidebar fix
============================== */
:root{
  --adminbar-h: 78px;
}

.adminbar{
  z-index: 120;
}

/* keep drawer below header and avoid overlapping the red bar */
.sidebar{
  top: calc(var(--adminbar-h) + 16px);
  height: calc(100vh - var(--adminbar-h) - 32px);
}

@media (max-width: 980px){
  .adminbar{
    z-index: 140;
  }

  .sidebar{
    top: var(--adminbar-h) !important;
    height: calc(100vh - var(--adminbar-h)) !important;
    width: min(320px, 88vw);
    max-width: 88vw;
    border-radius: 0 0 0 22px;
    border-top: 1px solid rgba(225,37,27,.10);
    z-index: 110;
  }

  .sidebar-toggle{
    position: relative;
    z-index: 150;
    touch-action: manipulation;
  }

  .sidebar-toggle__bars{
    pointer-events: none;
  }
}

/* Patch 36 — dialogs/toasts/teachers compact tools */
.btn__icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}
.btn__icon svg,
.btn--icon-circle svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.btn--soft-green{
  background: rgba(24,162,104,.12);
  border-color: rgba(24,162,104,.30);
  color:#177a53;
}
.btn--soft-green:hover{background: rgba(24,162,104,.18);}
.btn--soft-red{
  background: rgba(225,37,27,.08);
  border-color: rgba(225,37,27,.24);
  color:var(--moe-red);
}
.btn--soft-red:hover{background: rgba(225,37,27,.14);}
.btn--soft-amber{
  background: rgba(217,119,6,.10);
  border-color: rgba(217,119,6,.26);
  color:#a16207;
}
.btn--soft-amber:hover{background: rgba(217,119,6,.16);}
.btn--icon-circle{
  width:42px;
  min-width:42px;
  padding:0;
  border-radius:14px;
  border-color: rgba(225,37,27,.18);
  color: var(--moe-red);
  background: rgba(225,37,27,.04);
}
.btn--icon-circle:hover{background: rgba(225,37,27,.10);}
.sr-only-text{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* dialogs */
dialog.dlg{
  width:min(760px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  padding:0;
  overflow:hidden;
  display:none;
  flex-direction:column;
  margin:auto;
}
dialog.dlg[open]{display:flex;}
.dlg--compact{width:min(440px, calc(100vw - 24px));}
.dlg--entity-popup{width:min(860px, calc(100vw - 24px));}
.dlg--users-popup{width:min(920px, calc(100vw - 24px));}
.dlg__header{flex:0 0 auto;}
.dlg__body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}
.dlg__body form{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.dlg__body form > .actions:last-child,
.dlg__body > .actions:last-child{
  position:sticky;
  bottom:-16px;
  z-index:5;
  padding:12px 0 4px;
  margin-top:16px;
  background:linear-gradient(to top, #fff 82%, rgba(255,255,255,.96) 100%);
  border-top:1px solid rgba(225,37,27,.12);
}
.dlg__body form > .actions:last-child .btn,
.dlg__body > .actions:last-child .btn{min-width:112px;}

.classlist{
  max-height:min(42vh, 330px);
  overflow:auto;
}
.classitem{
  font-weight:600;
  font-size:14px;
  min-height:54px;
}
.classitem span{
  white-space:normal;
  line-height:1.55;
}

/* teachers page tools */
.entity-actions--teachers{
  justify-content:flex-end;
}
.teachers-tools-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.teachers-tools-summary__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(225,37,27,.05);
  border:1px solid rgba(225,37,27,.14);
  color:var(--muted);
  font-size:12px;
}
.bulkbar--teachers{
  align-items:center;
  gap:12px;
}
.bulkbar__left--wide{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 420px;
  min-width:280px;
}
.bulkbar__search-field{
  flex:1 1 320px;
  margin:0;
}
.bulkbar__search-field .field__control{height:42px;}
.bulkbar__right--teachers{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.data-table--teachers .pill{font-size:12px;}
.teacher-sort-row td{vertical-align:top;}
.actions--table-footer{
  justify-content:flex-start;
}
.checkline{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(225,37,27,.14);
  background:rgba(225,37,27,.04);
  font-weight:700;
}
.checkline input{
  width:18px;
  height:18px;
  accent-color:var(--moe-red);
}
.choice-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(225,37,27,.14);
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
.choice-card + .choice-card{margin-top:10px;}
.choice-card input{
  width:18px;
  height:18px;
  accent-color:var(--moe-red);
}
#teacher_filter_subject_field.is-disabled{
  opacity:.55;
}

/* flash toasts */
.flash-toast-stack{
  position:fixed;
  top:16px;
  left:16px;
  z-index:160;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(420px, calc(100vw - 24px));
  pointer-events:none;
}
.flash-toast{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 20px 44px rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.08);
  pointer-events:auto;
  transform:translateY(-8px);
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
}
.flash-toast.is-visible{
  transform:translateY(0);
  opacity:1;
}
.flash-toast--success{
  border-color:rgba(24,162,104,.24);
}
.flash-toast--error{
  border-color:rgba(225,37,27,.24);
}
.flash-toast--info{
  border-color:rgba(59,130,246,.24);
}
.flash-toast__icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:14px;
}
.flash-toast--success .flash-toast__icon{background:rgba(24,162,104,.12); color:#177a53;}
.flash-toast--error .flash-toast__icon{background:rgba(225,37,27,.08); color:var(--moe-red);}
.flash-toast--info .flash-toast__icon{background:rgba(59,130,246,.10); color:#2563eb;}
.flash-toast__body{
  min-width:0;
  flex:1 1 auto;
  color:var(--moe-black);
  font-size:13px;
  line-height:1.75;
}
.flash-toast__body b{font-weight:800;}
.flash-toast__close{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
  color:var(--muted);
}
.flash-toast__close:hover{background:rgba(0,0,0,.03);}

/* schedule builder period times popup */
.schedule-stage-times-dialog{
  width:min(920px, calc(100vw - 20px));
  max-width:calc(100vw - 20px);
}
.schedule-stage-times-table .table__head,
.schedule-stage-times-table .table__row{
  min-width:680px;
}

@media (max-width: 980px){
  .dlg--users-popup,
  .dlg--entity-popup,
  .schedule-stage-times-dialog{
    width:min(96vw, calc(100vw - 16px));
    max-width:calc(100vw - 16px);
  }
}
@media (max-width: 640px){
  .field__control{
    height:54px;
    min-height:54px;
    padding-inline:14px;
    font-size:16px;
    border-radius:16px;
  }
  select.field__control{
    background-position:left 14px center;
  }
}

@media (max-width: 640px){
  .flash-toast-stack{
    left:12px;
    right:12px;
    width:auto;
  }
  .entity-actions--teachers{
    justify-content:stretch;
  }
  .entity-actions--teachers .btn{
    width:100%;
  }
  .bulkbar__left--wide,
  .bulkbar__right--teachers{
    width:100%;
  }
  .bulkbar__search-field{
    flex-basis:100%;
  }
  .dlg__body form > .actions:last-child,
  .dlg__body > .actions:last-child{
    bottom:-14px;
  }
  .dlg__body form > .actions:last-child .btn,
  .dlg__body > .actions:last-child .btn{
    width:100%;
  }
}

.ds-button:disabled{opacity:.55;cursor:not-allowed;}

/* Patch 2026-03-20 — soften card headings and heavy fonts by ~10% */
.card__title{
  font-size:18px !important;
  font-weight:800 !important;
}
.dash-card__title{
  font-size:16px !important;
  font-weight:800 !important;
}
.auto-summary-card__value,
.leaders-card__name,
.bulkbar__count,
.bulkbar__sel{
  font-weight:800 !important;
}


.service-brandmark{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:18px;background:rgba(225,37,27,.08);color:var(--moe-red);flex:0 0 54px}.service-brandmark svg{width:28px;height:28px;display:block}