:root {
  --bg: #f5f7fb;
  --ink: #263241;
  --muted: #768293;
  --line: #dbe2ea;
  --card: #ffffff;
  --blue: #3aa6df;
  --navy: #34455b;
  --green: #35a66f;
  --gold: #d9a83f;
  --red: #d95b69;
}

/* Bel sekolah: perangkat lokal tetap mandiri, server hanya menjadi lapisan sinkronisasi. */
.bell-admin-page{display:none;gap:18px}.bell-admin-page.active{display:grid}.bell-page-title{align-items:flex-start}.bell-page-title h2{margin:3px 0 5px}.bell-page-title p{max-width:780px}.bell-summary-chip{background:#eaf7ef;color:#187a43;border:1px solid #bde5cd;border-radius:5px;padding:9px 12px;font-weight:700;white-space:nowrap}.bell-admin-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.bell-admin-section{border:1px solid #dce4ed;background:#fff;border-radius:6px;padding:18px}.bell-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}.bell-section-title h3{margin:0 0 4px;font-size:18px}.bell-section-title p{margin:0;color:#68778a}.bell-inline-form,.bell-event-form,.bell-remote-fields{display:grid;gap:12px;align-items:end}.bell-inline-form{grid-template-columns:1fr 1.4fr auto;margin-bottom:14px}.bell-event-form{grid-template-columns:120px 120px 1.2fr 1.2fr auto auto auto;margin-bottom:15px}.bell-remote-fields{grid-template-columns:1fr}.bell-inline-form label,.bell-event-form label,.bell-remote-fields label{display:grid;gap:6px;font-size:13px;font-weight:700}.bell-inline-form input,.bell-event-form input,.bell-event-form select,.bell-remote-fields input,.bell-remote-fields select{height:40px;border:1px solid #cdd7e3;border-radius:5px;padding:0 10px;background:white;font:inherit}.bell-active-check{display:flex!important;align-items:center;gap:7px;height:40px;white-space:nowrap}.bell-active-check input{height:auto}.bell-key-result{background:#fff8df;border:1px solid #ebce72;border-radius:5px;padding:12px;margin-bottom:14px;line-height:1.5}.bell-key-result code{display:block;margin-top:6px;padding:8px;background:#fff;border:1px solid #eadca7;overflow-wrap:anywhere}.bell-remote-buttons{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;margin:14px 0}.bell-volume-row{display:grid;grid-template-columns:auto 1fr 44px auto;align-items:center;gap:10px;padding-top:12px;border-top:1px solid #e2e8ef}.bell-volume-row input{accent-color:#075ca8}.bell-volume-row strong{font-variant-numeric:tabular-nums}.bell-command-section,.bell-schedule-section{min-width:0}.bell-status-online{color:#148249;font-weight:700}.bell-status-offline{color:#a46808;font-weight:700}.bell-admin-page .danger-button{background:#fff;color:#c22929;border:1px solid #dc4c4c}.bell-admin-page .is-hidden{display:none!important}@media(max-width:1180px){.bell-admin-grid{grid-template-columns:1fr}.bell-event-form{grid-template-columns:repeat(2,minmax(150px,1fr))}.bell-inline-form{grid-template-columns:1fr 1fr}.bell-inline-form button{grid-column:1/-1}.bell-remote-buttons{grid-template-columns:1fr}}
#bellRemoteSound{min-height:44px;cursor:pointer;max-width:100%}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

button,
a,
input,
select {
  font: inherit;
}

.is-hidden {
  display: none !important;
}

.login-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: min(430px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.login-card h1 {
  margin-bottom: 24px;
}

.login-card button {
  width: 100%;
  margin-top: 18px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  min-height: 100vh;
  padding: 24px;
}

.portal-shell {
  display: grid;
  align-content: center;
  min-height: 100vh;
  gap: 28px;
  padding: 32px;
}

.portal-hero {
  max-width: 840px;
}

.portal-school-logo {
  width: 88px;
  height: 88px;
  display: block;
  margin-bottom: 14px;
  object-fit: contain;
}

.portal-hero h1 {
  max-width: 780px;
}

.portal-hero p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  gap: 18px;
}

.portal-card,
.link-button {
  text-decoration: none;
}

.portal-card {
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}

.portal-card p {
  color: var(--muted);
  line-height: 1.5;
}

.portal-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #eaf8f1;
  color: var(--green);
  font-weight: 800;
}

.portal-card:nth-child(2) .portal-icon {
  background: #edf7ff;
  color: var(--blue);
}

.attendance-shell {
  min-height: 100vh;
  padding: 24px;
}

.attendance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
}

.scan-panel,
.side-panel {
  min-width: 0;
}

.scan-panel {
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

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

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 14px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.15;
}

h2 {
  margin-bottom: 14px;
  font-size: 18px;
}

.panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-heading-row h2 {
  margin-bottom: 0;
}

.compact-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: #e7edf5;
  color: var(--ink);
  font-weight: 700;
}

.device-status {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--navy);
  font-weight: 700;
}

.camera-stage {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101923;
}

video,
canvas {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

canvas {
  display: none;
}

.face-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(32vw, 310px);
  aspect-ratio: 3 / 4;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.camera-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: #ffffff;
  text-align: center;
}

.camera-empty strong {
  font-size: 28px;
}

.camera-empty span {
  color: rgba(255, 255, 255, 0.74);
}

.action-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.admin-actions {
  grid-template-columns: repeat(4, 1fr);
}

.presensi-actions {
  grid-template-columns: repeat(4, 1fr);
}

.simple-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.big-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 78px;
  font-size: 20px;
}

.big-action span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: white;
  font-size: 16px;
}

button.primary.big-action span {
  background: rgba(255, 255, 255, 0.26);
}

button:not(.primary):not(.dark).big-action span {
  background: rgba(38, 50, 65, 0.12);
  color: var(--ink);
}

.step-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.step-item {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.step-item.is-done {
  border-color: #bce6d0;
  background: #eaf8f1;
  color: var(--green);
}

button {
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  background: #e7edf5;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

button.primary {
  background: var(--blue);
  color: white;
}

button.dark {
  background: var(--navy);
  color: white;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.status-line {
  min-height: 48px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-block {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}

.small-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.import-box {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.import-box input {
  padding: 10px 12px;
}

.import-box button {
  width: 100%;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf7ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.pill.danger {
  background: #fff0f2;
  color: var(--red);
}

.pill.ok {
  background: #eaf8f1;
  color: var(--green);
}

.result-box,
.attendance-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.result-box p,
.attendance-row p,
.muted-block p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-weight: 800;
}

.avatar.small {
  width: 42px;
  height: 42px;
  background: var(--navy);
}

.attendance-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 900px) {
  .app-shell,
  .attendance-layout {
    grid-template-columns: 1fr;
  }

  .portal-grid {
    grid-template-columns: 1fr;
  }

  .camera-stage,
  video,
  canvas {
    min-height: 420px;
  }
}

@media (max-width: 560px) {
  .app-shell {
    padding: 16px;
  }

  .topbar,
  .action-row,
  .simple-actions,
  .step-strip {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .action-row {
    display: grid;
  }

  h1 {
    font-size: 28px;
  }
}

/* Pusat kontrol admin - Pilihan C */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.control-login {
  box-shadow: 0 18px 50px rgba(16, 43, 78, 0.12);
}

.login-brand {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  object-fit: contain;
}

.control-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
  background: #f4f7fa;
}

.control-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 18px 12px;
  background: #082f57;
  color: #fff;
}

.control-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.control-brand > img {
  width: 44px;
  height: 52px;
  object-fit: contain;
}

.login-school-logo { width: 82px; height: 82px; display: block; margin: 0 auto 14px; object-fit: contain; }
.topbar-school-logo { width: 52px; height: 52px; object-fit: contain; }

.control-brand strong,
.control-brand small {
  display: block;
}

.control-brand strong {
  font-size: 17px;
}

.control-brand small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}

.control-nav {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

.control-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.control-nav a:hover,
.control-nav a.active {
  background: #1769c2;
  color: #fff;
}

.control-nav-group {
  overflow: hidden;
  border-radius: 6px;
}

.control-nav-group > summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.control-nav-group > summary::-webkit-details-marker { display: none; }
.control-nav-group > summary:hover,
.control-nav-group.active-group > summary { background: rgba(23, 105, 194, 0.72); color: #fff; }
.control-nav-group > summary:focus-visible { outline: 2px solid #8fc6ff; outline-offset: -2px; }
.control-nav-group > summary i {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
.control-nav-group[open] > summary i { transform: rotate(225deg) translate(-1px, -1px); }

.control-nav-submenu {
  display: grid;
  gap: 2px;
  padding: 4px 0 7px 34px;
}

.control-nav .control-nav-submenu a {
  position: relative;
  min-height: 34px;
  padding: 0 28px 0 12px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
}

.control-nav .control-nav-submenu a::after {
  position: absolute;
  right: 11px;
  content: ">";
  color: rgba(255, 255, 255, 0.52);
  font-size: 15px;
}

.control-nav .control-nav-submenu a:hover,
.control-nav .control-nav-submenu a.active { background: rgba(23, 105, 194, 0.92); color: #fff; }

.control-nav svg,
.control-topbar svg,
.kpi svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-nav #i-grid,
.control-nav use[href="#i-grid"] {
  fill: currentColor;
  stroke: none;
}

.sidebar-state {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 2px 8px;
  margin-top: auto;
  padding: 16px 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar-state > span {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
  background: #25b76f;
}

.sidebar-state strong {
  font-size: 12px;
}

.sidebar-state small {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
}

.control-main {
  min-width: 0;
}

.control-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px 24px;
  border-bottom: 1px solid #dce3ea;
  background: rgba(255, 255, 255, 0.97);
}

.control-topbar h1 {
  font-size: 23px;
}

.control-top-actions,
.operator-chip,
.server-online {
  display: flex;
  align-items: center;
}

.control-top-actions {
  gap: 10px;
}

.server-online {
  gap: 8px;
  color: #197a4b;
  font-size: 13px;
  font-weight: 700;
}

.server-online i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #24a864;
}

.icon-button,
.quiet-button {
  min-height: 38px;
  padding: 0 12px;
  background: #fff;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  padding: 0;
  border: 1px solid #dce3ea;
}

.operator-chip {
  gap: 9px;
  padding: 0 10px;
}

.operator-chip > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8f1fb;
  color: #165ca6;
  font-weight: 800;
}

.operator-chip strong,
.operator-chip small {
  display: block;
}

.operator-chip strong {
  font-size: 13px;
}

.operator-chip small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.control-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

.admin-page {
  display: none;
}

.admin-page.active {
  display: block;
}

.operations-grid {
  display: block;
}

.operations-grid .admin-page.active,
.device-card.admin-page.active,
.audit-page.admin-page.active {
  width: 100%;
}

.audit-page {
  max-width: none;
}

.filterbar {
  display: grid;
  grid-template-columns: 190px 150px 170px minmax(220px, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.filterbar button,
.control-search {
  min-height: 42px;
  border: 1px solid #dce3ea;
  border-radius: 6px;
  background: #fff;
}

.filterbar button {
  padding: 0 13px;
  text-align: left;
}

.control-search {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 14px;
  color: #8b96a4;
  font-weight: 400;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 12px;
}

.kpi {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid #dce3ea;
  border-radius: 7px;
  background: #fff;
}

.kpi-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  border-radius: 7px;
  background: #edf4fb;
  color: #1769c2;
  font-size: 19px;
  font-style: normal;
}

.kpi small,
.kpi strong,
.kpi em {
  display: block;
}

.kpi small {
  color: #667383;
  font-size: 12px;
}

.kpi strong {
  margin: 2px 0;
  color: #13253b;
  font-size: 27px;
}

.kpi em {
  color: #8994a2;
  font-size: 10px;
  font-style: normal;
}

.kpi.green .kpi-icon { background: #e8f7ef; color: #159454; }
.kpi.amber .kpi-icon { background: #fff5df; color: #d78800; }
.kpi.sky .kpi-icon { background: #eaf6ff; color: #2083c7; }
.kpi.red .kpi-icon { background: #ffeded; color: #d84444; }

.attendance-dashboard-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #dce3ea;
  border-radius: 7px;
  background: #fff;
}

.attendance-dashboard-toolbar > div {
  flex: 1;
}

.attendance-dashboard-toolbar strong,
.attendance-dashboard-toolbar span {
  display: block;
}

.attendance-dashboard-toolbar strong { color: #142a43; font-size: 15px; }
.attendance-dashboard-toolbar span { margin-top: 3px; color: #7d8998; font-size: 11px; }
.attendance-dashboard-toolbar label { margin: 0; color: #637184; font-size: 11px; font-weight: 700; }
.attendance-dashboard-toolbar input { min-width: 160px; margin-top: 4px; padding: 8px 10px; }

.attendance-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  margin-top: 14px;
}

.attendance-class-list {
  display: grid;
  gap: 9px;
}

.attendance-class-item {
  overflow: hidden;
  border: 1px solid #dbe3eb;
  border-radius: 6px;
  background: #fff;
}

.attendance-class-item.expanded { border-color: #8bb9e8; }
.attendance-class-summary { display: flex; align-items: center; gap: 8px; padding: 9px; }

.attendance-class-toggle {
  display: grid;
  grid-template-columns: 38px minmax(125px, 1fr) 55px 55px 46px 24px;
  align-items: center;
  flex: 1;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #24364b;
  text-align: left;
}

.class-initial {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: #eaf3fd;
  color: #1769c2;
  font-size: 12px;
  font-weight: 800;
}

.class-name strong, .class-name small, .class-count strong, .class-count small { display: block; }
.class-name strong { color: #142a43; font-size: 13px; }
.class-name small { margin-top: 2px; color: #8792a0; font-size: 10px; }
.class-count { text-align: center; }
.class-count strong { font-size: 14px; }
.class-count small { color: #8994a2; font-size: 9px; }
.class-count.present strong { color: #159454; }
.class-count.missing strong { color: #d78800; }
.class-percentage { color: #1769c2; font-size: 12px; font-weight: 800; text-align: right; }
.class-chevron { color: #657487; font-size: 19px; text-align: center; }

.excel-class-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #168d50;
  border-radius: 5px;
  background: #ecf8f1;
  color: #137b47;
  font-size: 10px;
  font-weight: 800;
}

.attendance-progress { height: 4px; background: #edf1f5; }
.attendance-progress span { display: block; height: 100%; background: #20a261; }
.attendance-class-detail { padding: 4px 12px 12px; border-top: 1px solid #edf1f5; background: #fbfcfd; }
.attendance-detail-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.attendance-detail-table th, .attendance-detail-table td { padding: 9px 8px; border-bottom: 1px solid #e4eaf0; text-align: left; }
.attendance-detail-table th { color: #708094; font-size: 9px; text-transform: uppercase; }
.attendance-detail-table td strong, .attendance-detail-table td small { display: block; }
.attendance-detail-table td small { margin-top: 2px; color: #8a96a5; }
.attendance-status-present { color: #158c51; font-weight: 800; }

.attendance-recent-list { display: grid; gap: 3px; }
.attendance-recent-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #e8edf2; }
.attendance-recent-item > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eaf3fd; color: #1769c2; font-size: 12px; font-weight: 800; }
.attendance-recent-item strong, .attendance-recent-item small { display: block; }
.attendance-recent-item strong { overflow: hidden; color: #24364b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attendance-recent-item small { margin-top: 2px; color: #8a96a5; font-size: 9px; }
.attendance-recent-item time { color: #1769c2; font-size: 11px; font-weight: 800; }
.dashboard-empty { margin: 0; padding: 18px 8px; color: #84909e; font-size: 12px; text-align: center; }
.dashboard-empty.error { color: #c83d3d; }

.dashboard-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}
.dashboard-toolbar > div { flex: 1; }
.dashboard-toolbar strong, .dashboard-toolbar span { display: block; }
.dashboard-toolbar strong { color: #12263f; font-size: 17px; }
.dashboard-toolbar span { margin-top: 3px; color: #778596; font-size: 11px; }
.dashboard-toolbar label { margin: 0; color: #667587; font-size: 10px; font-weight: 800; }
.dashboard-toolbar input { min-width: 150px; margin-top: 4px; padding: 8px 10px; }

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}
.dashboard-kpi {
  display: flex;
  align-items: center;
  min-height: 104px;
  gap: 14px;
  padding: 15px;
  border: 1px solid #dce3ea;
  border-radius: 7px;
  background: #fff;
}
.dashboard-kpi > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 7px;
  background: #eaf3ff;
  color: #1769c2;
}
.dashboard-kpi > span svg { width: 23px; height: 23px; }
.dashboard-kpi small, .dashboard-kpi strong, .dashboard-kpi em { display: block; }
.dashboard-kpi small { color: #657487; font-size: 11px; }
.dashboard-kpi strong { margin: 2px 0; color: #10243c; font-size: 28px; }
.dashboard-kpi em { color: #8a96a4; font-size: 9px; font-style: normal; }
.dashboard-kpi.green > span { background: #e8f7ef; color: #168f52; }
.dashboard-kpi.amber > span { background: #fff4df; color: #d98a00; }
.dashboard-kpi.teal > span { background: #e5f7f4; color: #078d7d; }

.dashboard-primary-grid, .dashboard-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
  gap: 14px;
  margin-top: 14px;
}
.dashboard-secondary-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); }
.dashboard-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dce3ea;
  border-radius: 7px;
  background: #fff;
}
.dashboard-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dashboard-panel-title h2, .dashboard-panel-title p { margin: 0; }
.dashboard-panel-title h2 { color: #15283f; font-size: 14px; }
.dashboard-panel-title p { margin-top: 3px; color: #84909e; font-size: 9px; }
.dashboard-panel-title a { color: #1769c2; font-size: 10px; font-weight: 800; text-decoration: none; }
.dashboard-panel-title label { display: flex; align-items: center; gap: 7px; margin: 0; color: #677689; font-size: 10px; }
.dashboard-panel-title select { min-width: 120px; padding: 7px 9px; }

.dashboard-stacked-bar { display: flex; overflow: hidden; height: 13px; border-radius: 4px; background: #edf1f5; }
.dashboard-stacked-bar span { display: block; height: 100%; transition: width .2s ease; }
.dashboard-stacked-bar .present { background: #24a260; }
.dashboard-stacked-bar .excused { background: #2f73d9; }
.dashboard-stacked-bar .missing { background: #e7a51a; }
.dashboard-attendance-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.dashboard-attendance-values > span { display: grid; grid-template-columns: 9px 1fr; align-items: center; column-gap: 7px; }
.dashboard-attendance-values i { width: 8px; height: 8px; border-radius: 50%; background: #24a260; grid-row: span 2; }
.dashboard-attendance-values .excused i { background: #2f73d9; }
.dashboard-attendance-values .missing i { background: #e7a51a; }
.dashboard-attendance-values small { color: #6f7d8d; font-size: 10px; }
.dashboard-attendance-values strong { color: #15283f; font-size: 22px; }

.dashboard-system-list { display: grid; gap: 6px; }
.dashboard-system-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 6px 9px;
  border: 1px solid #e2e7ed;
  border-radius: 5px;
}
.dashboard-system-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: #e8f7ef; color: #168f52; font-size: 12px; font-weight: 900; }
.dashboard-system-icon.warn { background: #fff4df; color: #c77a00; }
.dashboard-system-row strong, .dashboard-system-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-system-row strong { color: #24364b; font-size: 10px; }
.dashboard-system-row small { margin-top: 2px; color: #8793a1; font-size: 8px; }
.dashboard-system-row > i { width: 8px; height: 8px; border-radius: 50%; background: #24a260; }
.dashboard-system-row > i.warn { background: #e7a51a; }

.dashboard-table-wrap { overflow: auto; }
.dashboard-activity-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.dashboard-activity-table th, .dashboard-activity-table td { padding: 9px 8px; border-bottom: 1px solid #e8edf2; text-align: left; }
.dashboard-activity-table th { color: #738194; font-size: 8px; text-transform: uppercase; }
.dashboard-activity-table td { color: #425267; }
.dashboard-activity-table td strong, .dashboard-activity-table td small { display: block; }
.dashboard-activity-table td strong { color: #1d3149; }
.dashboard-activity-table td small { margin-top: 2px; color: #8a96a4; font-size: 8px; }

.dashboard-alert-list { display: grid; gap: 7px; }
.dashboard-alert-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 9px; min-height: 49px; padding: 7px 9px; border: 1px solid #e2e7ed; border-radius: 6px; color: inherit; text-decoration: none; }
.dashboard-alert-row > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #fff0f0; color: #d83b3b; font-size: 14px; font-weight: 900; }
.dashboard-alert-row.warning > span { background: #fff4df; color: #cf8000; }
.dashboard-alert-row.info > span { background: #eaf3ff; color: #1769c2; }
.dashboard-alert-row strong, .dashboard-alert-row small { display: block; }
.dashboard-alert-row strong { color: #24364b; font-size: 10px; }
.dashboard-alert-row small { margin-top: 2px; color: #8793a1; font-size: 8px; }
.dashboard-alert-row > b { color: #1769c2; font-size: 20px; text-align: right; }
.dashboard-all-clear { padding: 25px 10px; color: #168f52; text-align: center; }
.dashboard-all-clear strong, .dashboard-all-clear span { display: block; }
.dashboard-all-clear span { margin-top: 4px; color: #7e8b99; font-size: 9px; }

.dashboard-schedule-panel, .dashboard-class-panel { margin-top: 14px; }
.dashboard-today-schedule { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 0; overflow-x: auto; }
.dashboard-lesson { min-width: 120px; min-height: 82px; padding: 9px 12px; border-left: 3px solid #cbd4de; }
.dashboard-lesson.current { border-left-color: #24a260; }
.dashboard-lesson small, .dashboard-lesson strong, .dashboard-lesson span { display: block; }
.dashboard-lesson small { color: #697789; font-size: 8px; }
.dashboard-lesson strong { margin-top: 8px; overflow: hidden; color: #1c3048; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-lesson span { margin-top: 4px; overflow: hidden; color: #8793a1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-class-strip { display: grid; grid-template-columns: repeat(6, minmax(115px, 1fr)); gap: 8px; overflow-x: auto; }
.dashboard-class-chip { min-width: 115px; padding: 10px; border: 1px solid #e0e6ec; border-radius: 5px; color: inherit; text-decoration: none; }
.dashboard-class-chip span, .dashboard-class-chip strong, .dashboard-class-chip small, .dashboard-class-chip i { display: block; }
.dashboard-class-chip span { color: #26394f; font-size: 10px; font-weight: 800; }
.dashboard-class-chip strong { margin-top: 7px; color: #168f52; font-size: 18px; }
.dashboard-class-chip small { margin-top: 1px; color: #8592a0; font-size: 8px; }
.dashboard-class-chip i { overflow: hidden; height: 4px; margin-top: 8px; border-radius: 2px; background: #edf1f5; }
.dashboard-class-chip i b { display: block; height: 100%; background: #24a260; }

@media (max-width: 1100px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .dashboard-primary-grid, .dashboard-secondary-grid { grid-template-columns: 1fr; }
  .dashboard-today-schedule, .dashboard-class-strip { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

@media (max-width: 700px) {
  .dashboard-toolbar { align-items: stretch; flex-wrap: wrap; }
  .dashboard-toolbar > div { flex-basis: 100%; }
  .dashboard-toolbar label { flex: 1; }
  .dashboard-toolbar input { width: 100%; min-width: 0; }
  .dashboard-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dashboard-kpi { min-height: 88px; padding: 10px; }
  .dashboard-kpi > span { width: 38px; height: 38px; flex-basis: 38px; }
  .dashboard-kpi strong { font-size: 22px; }
  .dashboard-panel { padding: 12px; }
  .dashboard-attendance-values { gap: 6px; }
  .dashboard-attendance-values strong { font-size: 18px; }
  .dashboard-panel-title { align-items: flex-start; flex-wrap: wrap; }
  .dashboard-today-schedule, .dashboard-class-strip { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  margin-top: 14px;
}

.control-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #dce3ea;
  border-radius: 7px;
  background: #fff;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.card-title h2 {
  margin: 0;
  color: #142a43;
  font-size: 16px;
}

.card-title p {
  margin-top: 4px;
  color: #8a95a3;
  font-size: 11px;
}

.card-title a {
  color: #1769c2;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.legend {
  color: #677586;
  font-size: 11px;
}

.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background: #21a25f;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 18px;
  height: 240px;
  padding: 18px 14px 0;
  border-bottom: 1px solid #ccd6e0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #edf1f5 48px);
}

.bar-chart > div {
  display: grid;
  grid-template-rows: 20px 1fr 25px;
  align-items: end;
  height: 100%;
  text-align: center;
}

.bar-chart strong {
  color: #425064;
  font-size: 10px;
}

.bar-chart span {
  width: min(38px, 60%);
  height: var(--value);
  margin: 0 auto;
  background: #21a25f;
}

.bar-chart small {
  padding-top: 7px;
  color: #687587;
  font-size: 10px;
}

.attention-card {
  padding-bottom: 6px;
}

.attention-card .card-title b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #d84444;
  color: #fff;
  font-size: 11px;
}

.attention-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  border-top: 1px solid #e4e9ee;
}

.attention-item > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
}

.attention-item.danger > span { background: #d84444; }
.attention-item.warning > span { background: #e99112; }
.attention-item strong,
.attention-item small {
  display: block;
}
.attention-item strong { font-size: 12px; }
.attention-item small { margin-top: 3px; color: #8390a0; font-size: 10px; }
.attention-item time { color: #718092; font-size: 10px; }

.device-card {
  margin-top: 14px;
}

.table-scroll {
  overflow-x: auto;
}

.device-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.device-table th,
.device-table td {
  padding: 10px 9px;
  border-top: 1px solid #e2e8ee;
  text-align: left;
  white-space: nowrap;
}

.device-table th {
  background: #f7f9fb;
  color: #647184;
  font-weight: 700;
}

.status::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  content: "";
}

.status.ok { color: #188d51; }
.status.ok::before { background: #21a25f; }
.status.bad { color: #cc3d3d; }
.status.bad::before { background: #d84444; }

.section-heading {
  margin: 30px 0 14px;
}

.section-heading h2 {
  margin: 0;
  color: #142a43;
  font-size: 22px;
}

.ops-panel {
  scroll-margin-top: 94px;
}

.student-data-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.student-data-heading h2 { margin: 0; color: #142a43; font-size: 22px; }
.student-data-heading p { margin: 4px 0 0; color: #7c8897; font-size: 12px; }
.student-data-heading > div:last-child { display: flex; align-items: center; gap: 8px; }

.student-import-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #2f6fed;
  border-radius: 6px;
  background: #fff;
  color: #1d5bd1;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.student-data-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.student-data-kpis > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid #dce3ea;
  border-radius: 7px;
}

.student-data-kpis p, .student-data-kpis small, .student-data-kpis strong { display: block; margin: 0; }
.student-data-kpis .kpi-icon svg { width: 20px; height: 20px; fill: currentColor; }
.student-data-kpis small { color: #6f7c8c; font-size: 11px; }
.student-data-kpis strong { margin-top: 3px; color: #24364b; font-size: 22px; }
.student-data-kpis > div:nth-child(2) strong { color: #159454; }

.student-class-section {
  padding: 14px 0 17px;
  border-top: 1px solid #e2e8ee;
  border-bottom: 1px solid #e2e8ee;
}

.student-class-section .card-title { margin-bottom: 10px; }
.student-class-section h3 { margin: 0; color: #142a43; font-size: 15px; }

.student-class-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
}

.student-class-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid #dbe3eb;
  border-radius: 6px;
  background: #fafbfc;
  color: #24364b;
  text-align: left;
  cursor: pointer;
}

.student-class-card:hover { border-color: #aebdca; background: #fff; }
.student-class-card.active { border-color: #79b79a; border-left: 3px solid #159454; background: #f4faf7; }
.student-class-card strong { font-size: 12px; }
.student-class-card span { color: #6f7c8c; font-size: 10px; white-space: nowrap; }

.schedule-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.schedule-import-panel {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.schedule-import-card {
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid #bfd8f3;
  border-radius: 8px;
  background: #f6fbff;
}

.schedule-import-card.soft {
  border-color: #dfe7ef;
  background: #fff;
}

.schedule-import-card strong,
.schedule-import-card span {
  display: block;
}

.schedule-import-card strong {
  color: #142a43;
  font-size: 13px;
}

.schedule-import-card span {
  margin-top: 7px;
  color: #6b7888;
  font-size: 11px;
  line-height: 1.45;
}

.schedule-toolbar {
  grid-template-columns: minmax(220px, 1fr) 220px;
}

.schedule-day-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.schedule-day-card {
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.schedule-day-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f5;
  background: #f8fbff;
}

.schedule-day-heading h3 {
  margin: 0;
  color: #142a43;
  font-size: 14px;
}

.schedule-day-heading span {
  color: #1769c2;
  font-size: 10px;
  font-weight: 800;
}

.schedule-lesson-row {
  display: grid;
  grid-template-columns: 34px 120px minmax(180px, 1fr) 60px;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid #edf1f5;
}

.schedule-lesson-row:last-child {
  border-bottom: none;
}

.schedule-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eaf3ff;
  color: #1769c2;
  font-size: 11px;
  font-weight: 900;
}

.schedule-time {
  color: #24364b;
  font-size: 12px;
  font-weight: 800;
}

.schedule-subject strong,
.schedule-subject small {
  display: block;
}

.schedule-subject strong {
  color: #142a43;
  font-size: 13px;
}

.schedule-subject small {
  margin-top: 3px;
  color: #778596;
  font-size: 11px;
}

.schedule-row-action {
  min-height: 30px;
  border: 1px solid #b8d6f5;
  border-radius: 5px;
  background: #fff;
  color: #1f67b3;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.schedule-lesson-row.schedule-adjustment-row {
  grid-template-columns: 34px 120px minmax(180px, 1fr) minmax(120px, auto);
}

.schedule-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.schedule-row-actions .schedule-row-action {
  flex: 1 1 auto;
  padding: 0 8px;
}

.student-data-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 220px;
  gap: 10px;
  padding: 14px 0 10px;
}

.student-data-toolbar label { margin: 0; color: #607084; font-size: 10px; font-weight: 700; }
.student-data-toolbar label span { display: block; margin-bottom: 4px; }
.student-data-toolbar input, .student-data-toolbar select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #d3dce6; border-radius: 6px; background: #fff; }
.student-data-toolbar.schedule-toolbar { grid-template-columns: minmax(220px, 1fr) 220px; }

.attendance-report-controls {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(135px, 0.7fr) auto auto auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #f7f9fc;
}

.attendance-report-controls label { margin: 0; color: #607084; font-size: 10px; font-weight: 700; }
.attendance-report-controls label span { display: block; margin-bottom: 5px; }
.attendance-report-controls input,
.attendance-report-controls select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #cfd9e5; border-radius: 6px; background: #fff; }
.attendance-report-controls button { min-height: 38px; }
.attendance-report-controls.teacher-report-controls { grid-template-columns: repeat(5, minmax(125px, 1fr)); }
.attendance-report-status { margin: 10px 0 0; color: #1c5fc7; font-size: 11px; font-weight: 700; }
.attendance-report-note { margin: 5px 0 16px; color: #748296; font-size: 11px; }
.teacher-report-summary { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 10px; margin: 0 0 14px; }
.teacher-report-summary span { padding: 10px 12px; border: 1px solid #dbe3ec; border-radius: 7px; background: #f8fafc; color: #6b788a; font-size: 10px; }
.teacher-report-summary strong { display: block; margin-bottom: 2px; color: #26384e; font-size: 18px; }
.teacher-report-summary .present strong { color: #23895d; }
.teacher-report-summary .permission strong { color: #276fe3; }
.teacher-report-summary .sick strong { color: #b98216; }
.teacher-report-summary .absent strong { color: #c84454; }
.teacher-report-table .account-status { min-width: 58px; text-align: center; }

.official-report-preview {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid #cfd7df;
  background: #eef1f4;
}

.official-report-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #cfd7df;
}

.official-report-block-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.official-report-block-heading h3 { margin: 2px 0 4px; font-size: 15px; }

.official-report-block-heading p { margin: 0; font-size: 12px; color: #5b6672; }

.official-report-block-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media print {
  .official-report-block { border-top: 0; }
  .official-report-block-heading,
  .official-report-block-actions { display: none !important; }
  .official-report-preview { border: 0; background: #fff; overflow: visible; }
}

.official-report-sheet {
  min-width: 960px;
  padding: 22px 26px 18px;
  background: #fff;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
}

.official-report-letterhead {
  padding-bottom: 8px;
  border-bottom: 2px solid #111;
  text-align: center;
}

.official-report-letterhead strong { display: block; font-size: 15px; line-height: 1.3; }
.official-report-letterhead h3 { margin: 4px 0 1px; font-size: 17px; }

.official-document-letterhead {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 12px;
  min-height: 116px;
  padding: 4px 8px 8px;
  border-bottom: 5px double #111;
  color: #111;
  text-align: center;
  font-family: Arial, sans-serif;
}

.official-document-letterhead img { width: 82px; height: 88px; margin: auto; object-fit: contain; }
.official-document-letterhead span,
.official-document-letterhead strong,
.official-document-letterhead small { display: block; letter-spacing: 0; line-height: 1.2; }
.official-document-letterhead span { font-size: 14px; }
.official-document-letterhead strong { font-size: 16px; }
.official-document-letterhead strong:nth-of-type(2),
.official-document-letterhead strong:nth-of-type(3) { font-size: 19px; }
.official-document-letterhead small { font-size: 9px; font-weight: 400; }
.official-report-title { padding: 8px 0 3px; text-align: center; }
.official-report-title h3 { margin: 0; font-size: 17px; }
.official-report-title strong { display: block; margin-top: 2px; font-size: 14px; }

.official-report-meta {
  display: grid;
  gap: 3px;
  margin: 11px 2px 10px;
  font-size: 11px;
}

.official-report-meta span { display: grid; grid-template-columns: 105px 10px 1fr; }
.official-report-meta b { font-weight: 700; }
.official-report-meta em { font-style: normal; }

.official-report-summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 12px;
  border: 1px solid #222;
}

.official-report-summary span {
  min-width: 0;
  padding: 7px 10px;
  border-right: 1px solid #777;
  text-align: center;
}

.official-report-summary span:last-child { border-right: 0; }
.official-report-summary small, .official-report-summary strong { display: block; }
.official-report-summary small { font-family: Arial, sans-serif; font-size: 10px; }
.official-report-summary strong { margin-top: 2px; font-family: Arial, sans-serif; font-size: 17px; }
.official-report-summary .present strong { color: #078a45; }
.official-report-summary .permission strong { color: #1759ba; }
.official-report-summary .sick strong, .official-report-summary .late strong { color: #a66a00; }
.official-report-summary .absent strong { color: #c41f2b; }

.official-report-matrix-wrap { overflow-x: auto; }
.official-report-matrix { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 9px; }
.official-report-matrix th, .official-report-matrix td { min-width: 27px; height: 25px; padding: 3px 4px; border: 1px solid #333; text-align: center; }
.official-report-matrix th { background: #f4f5f6; font-family: Arial, sans-serif; font-weight: 800; }
.official-report-matrix th:nth-child(2), .official-report-matrix td:nth-child(2) { min-width: 78px; }
.official-report-matrix th:nth-child(3), .official-report-matrix td:nth-child(3) { min-width: 60px; }
.official-report-matrix th:nth-child(4), .official-report-matrix td:nth-child(4) { min-width: 145px; }
.official-report-matrix .official-student-name { text-align: left; white-space: nowrap; }
.official-report-matrix .official-activity-name { min-width: 140px; text-align: left; white-space: normal; }
.official-report-matrix .report-code { font-family: Arial, sans-serif; font-weight: 800; }
.official-report-matrix .report-attendance-times { display: grid; gap: 1px; margin-top: 2px; color: #475569; font-size: 7px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.official-report-matrix .report-attendance-times span { display: block; }
.official-report-matrix .code-I { background: #edf4ff; color: #1759ba; }
.official-report-matrix .code-S { background: #fff5d9; color: #8a5a00; }
.official-report-matrix .code-D { background: #f2edff; color: #6542a8; }
.official-report-matrix .code-A { background: #ffebed; color: #b61927; }
.official-report-matrix .code-T { background: #fff1d7; color: #9a6200; }

.official-report-footer {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 30px;
  margin-top: 14px;
  font-size: 10px;
}

.official-report-legend { align-self: start; padding: 8px 10px; border: 1px solid #555; }
.official-report-legend b { margin-left: 8px; }
.official-report-legend b:first-child { margin-left: 0; }
.official-report-signature { display: grid; gap: 3px; }
.official-report-signature i { display: block; height: 38px; }
.official-report-source { display: block; margin-top: 16px; font-size: 9px; }
.mentoring-daily-print-pages,
.mentoring-print-host { display: none; }

.assessment-student-preview .student-question-options input {
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}

@page mentoring-f4 { size: 330mm 210mm; margin: 5mm; }

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body.printing-official-report * { visibility: hidden !important; }
  body.printing-official-report .official-report-sheet.print-target,
  body.printing-official-report .official-report-sheet.print-target * { visibility: visible !important; }
  body.printing-official-report .official-report-sheet.print-target {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    padding: 0;
  }
  body.printing-official-report .official-report-matrix { min-width: 0; font-size: 7px; }
  body.printing-official-report .official-report-matrix th,
  body.printing-official-report .official-report-matrix td { min-width: 0; height: 20px; padding: 2px; }
  body.printing-official-report .official-report-preview,
  body.printing-official-report .official-report-matrix-wrap { overflow: visible; border: 0; }
  body.printing-mentoring-f4 > :not(.mentoring-print-host) { display: none !important; }
  body.printing-mentoring-f4 .mentoring-print-host { display: block !important; }
  body.printing-mentoring-f4 .mentoring-daily-print-sheet {
    page: mentoring-f4;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #111;
    background: #fff;
    font-family: Georgia, "Times New Roman", serif;
    break-after: page;
  }
  body.printing-mentoring-f4 .mentoring-daily-print-sheet:last-child { break-after: auto; }
  body.printing-mentoring-f4 .official-document-letterhead {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    min-height: 62px;
    padding: 0 6px 3px;
    border-bottom-width: 3px;
  }
  body.printing-mentoring-f4 .official-document-letterhead img { width: 48px; height: 52px; }
  body.printing-mentoring-f4 .official-document-letterhead span { font-size: 9px; }
  body.printing-mentoring-f4 .official-document-letterhead strong { font-size: 10px; }
  body.printing-mentoring-f4 .official-document-letterhead strong:nth-of-type(2),
  body.printing-mentoring-f4 .official-document-letterhead strong:nth-of-type(3) { font-size: 12px; }
  body.printing-mentoring-f4 .official-document-letterhead small { font-size: 6px; }
  body.printing-mentoring-f4 .official-report-title { padding: 3px 0 1px; }
  body.printing-mentoring-f4 .official-report-title h3 { font-size: 11px; }
  body.printing-mentoring-f4 .official-report-title strong { margin-top: 0; font-size: 9px; }
  body.printing-mentoring-f4 .mentoring-daily-meta {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 3px 0;
    font-size: 7px;
  }
  body.printing-mentoring-f4 .mentoring-daily-meta span { grid-template-columns: 48px 6px 1fr; }
  body.printing-mentoring-f4 .mentoring-daily-summary { margin-bottom: 3px; }
  body.printing-mentoring-f4 .mentoring-daily-summary span { padding: 1px 5px; }
  body.printing-mentoring-f4 .mentoring-daily-summary small { font-size: 6px; }
  body.printing-mentoring-f4 .mentoring-daily-summary strong { margin-top: 0; font-size: 9px; }
  body.printing-mentoring-f4 .mentoring-daily-matrix { width: 100%; min-width: 0; font-size: 6.5px; }
  body.printing-mentoring-f4 .mentoring-daily-matrix th,
  body.printing-mentoring-f4 .mentoring-daily-matrix td { min-width: 0; height: 12px; padding: 1px 2px; }
  body.printing-mentoring-f4 .mentoring-daily-matrix th:nth-child(2),
  body.printing-mentoring-f4 .mentoring-daily-matrix td:nth-child(2) { width: 72px; }
  body.printing-mentoring-f4 .mentoring-daily-matrix th:nth-child(3),
  body.printing-mentoring-f4 .mentoring-daily-matrix td:nth-child(3) { width: 55px; }
  body.printing-mentoring-f4 .mentoring-daily-matrix th:nth-child(4),
  body.printing-mentoring-f4 .mentoring-daily-matrix td:nth-child(4) { width: 170px; }
  body.printing-mentoring-f4 .mentoring-daily-matrix .official-activity-name { width: 155px; min-width: 0; }
  body.printing-mentoring-f4 .mentoring-daily-footer { grid-template-columns: 1fr 180px; margin-top: 3px; font-size: 6.5px; }
  body.printing-mentoring-f4 .mentoring-daily-footer .official-report-legend { padding: 3px 5px; }
  body.printing-mentoring-f4 .mentoring-daily-footer .official-report-signature { gap: 1px; }
  body.printing-mentoring-f4 .mentoring-daily-footer .official-report-signature i { height: 12px; }
  body.printing-mentoring-f4 .official-report-source { margin-top: 2px; font-size: 6px; }
}

.student-data-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.student-data-table th, .student-data-table td { padding: 10px; border-bottom: 1px solid #e7ecf1; color: #344357; font-size: 11px; text-align: left; vertical-align: middle; }
.student-data-table th { background: #f8fafc; color: #667487; font-size: 10px; }
.student-data-table .student-cell { min-width: 210px; }
.student-data-actions { display: flex; gap: 6px; }
.student-data-actions button { min-height: 30px; padding: 0 9px; border: 1px solid #b8d6f5; border-radius: 5px; background: #fff; color: #1f67b3; font-size: 10px; font-weight: 800; cursor: pointer; }
.student-data-actions button.danger { border-color: #efb7bd; color: #bd2637; }

.face-panel,
.settings-panel {
  grid-column: 1 / -1;
}

.admin-camera,
.admin-camera video,
.admin-camera canvas {
  min-height: 420px;
}

.face-result {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #e0e6ec;
  border-radius: 7px;
}

.password-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 12px;
  margin-bottom: 12px;
}

.settings-panel h3 {
  margin: 4px 0 10px;
  font-size: 15px;
}

.school-map {
  width: 100%;
  height: 320px;
  margin: 10px 0 12px;
  border: 1px solid #d9e1ea;
  border-radius: 6px;
  background: #eef2f5;
  overflow: hidden;
}

.activity-location-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 18px 0; }
.activity-location-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: start; border: 1px solid #dce3ec; padding: 16px; background: #fff; border-radius: 8px; }
.location-attendance-card { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; }
.activity-location-card.inactive { opacity: .68; background: #f7f8fa; }
.activity-location-card h3 { margin: 3px 0 6px; color: #173a68; }
.activity-location-card p, .activity-location-card small { margin: 0; color: #69788c; }
.activity-location-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #087f5b; background: #e8f7f1; border-radius: 8px; }
.activity-location-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; }
.attendance-point-intro { display: grid; gap: 4px; margin-top: 16px; padding: 14px 16px; border-left: 4px solid #1769c2; background: #edf5fd; }
.attendance-point-intro strong { color: #173a68; }
.attendance-point-intro span { color: #62758a; font-size: 12px; }
.activity-location-info { min-width: 0; display: grid; gap: 3px; }
.activity-location-info strong { color: #173a68; }
.activity-location-info span, .activity-location-info small { overflow-wrap: anywhere; color: #69788c; }
.activity-location-count { display: grid; gap: 2px; text-align: right; }
.activity-location-count strong { color: #087f5b; font-size: 12px; }
.activity-location-count span { color: #7c8998; font-size: 10px; }
.activity-location-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid #edf0f4; padding-top: 12px; }
.location-attendance-card .activity-location-actions { justify-content: flex-end; }
.location-activity-toolbar { align-items: end; }
.location-active-toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.location-active-toggle input { width: 18px; height: 18px; }
.activity-qr-dialog { border: 0; padding: 0; border-radius: 8px; width: min(92vw, 500px); }
.activity-qr-dialog::backdrop { background: rgba(13, 29, 51, .68); }
.activity-qr-content { position: relative; padding: 28px; text-align: center; background: #fff; }
.activity-qr-content .icon-button { position: absolute; top: 14px; right: 14px; }
.activity-qr-content h3 { margin: 4px 0 14px; color: #123b70; font-size: 25px; }
.activity-qr-content img { display: block; width: min(100%, 360px); aspect-ratio: 1; object-fit: contain; margin: 0 auto 12px; border: 1px solid #d9e0e9; }
.activity-qr-content > strong { color: #087f5b; }
.activity-qr-content > p:last-child { color: #68768a; line-height: 1.5; }

@media (max-width: 680px) {
  .activity-location-card { grid-template-columns: 44px 1fr; }
  .activity-location-card > .status { grid-column: 2; justify-self: start; }
}

.map-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.map-actions span {
  color: #768293;
  font-size: 12px;
}

.map-actions .compact-button {
  margin: 0;
}

.location-quality {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #dce3ea;
  border-radius: 6px;
  background: #f8fafc;
}

.location-quality strong {
  color: #142a43;
  font-size: 12px;
}

.location-quality span {
  color: #768293;
  font-size: 12px;
}

.location-quality span.ok {
  color: #188d51;
}

.location-quality span.warn {
  color: #c27c00;
}

.location-quality span.danger {
  color: #cc3d3d;
}

.settings-panel > .compact-button {
  margin-top: 12px;
}

@media (max-width: 1180px) {
  .control-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .attendance-dashboard-layout { grid-template-columns: 1fr; }
  .filterbar { grid-template-columns: repeat(3, 1fr); }
  .student-data-kpis { grid-template-columns: repeat(2, 1fr); }
  .student-class-summary { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .control-search { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .control-shell { display: block; }
  .control-sidebar { position: static; height: auto; }
  .control-nav { grid-template-columns: repeat(2, 1fr); }
  .control-nav-group { align-self: start; }
  .sidebar-state { display: none; }
  .control-topbar { position: static; align-items: flex-start; }
  .control-top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .operations-grid { grid-template-columns: 1fr; }
  .face-panel, .settings-panel { grid-column: auto; }
}

.bell-delay-panel { margin:16px 0; padding:14px; border:1px solid #d7e1ec; background:#f8fbfe; border-radius:6px; }
.bell-delay-panel > div:first-child strong { color:#153b68; }
.bell-delay-panel > div:first-child p { margin:4px 0 12px; color:#64748b; }
.bell-delay-fields { display:grid; grid-template-columns:1.3fr repeat(2,minmax(140px,.7fr)); gap:10px; }
.bell-delay-fields label { display:grid; gap:6px; font-size:13px; font-weight:700; }
.bell-delay-fields input,.bell-delay-fields select { height:40px; border:1px solid #cdd7e3; border-radius:5px; padding:0 10px; background:#fff; font:inherit; }
@media (max-width:760px) { .bell-delay-fields { grid-template-columns:1fr; } }
.bell-admin-page button.is-busy { cursor:wait; opacity:.72; }
.bell-admin-page button.is-busy::after { content:""; display:inline-block; width:12px; height:12px; margin-left:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:bell-button-spin .7s linear infinite; }
.bell-morning-target { display:flex; align-items:end; justify-content:flex-end; gap:10px; margin:10px 0; }
.bell-morning-target label { display:grid; gap:5px; min-width:220px; font-size:12px; font-weight:700; }
.bell-morning-target select { height:38px; padding:0 10px; border:1px solid #cdd7e3; border-radius:5px; background:#fff; }
@keyframes bell-button-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .bell-morning-target { align-items:stretch; flex-direction:column; } }
.bell-base-preview-row { background:#f7f9fc; color:#53657a; }
.bell-base-preview-row td { border-bottom-style:dashed; }
.bell-base-badge { display:inline-block; padding:4px 7px; border:1px solid #b8c6d6; border-radius:4px; background:#fff; color:#42566f; font-size:11px; font-weight:800; }

@media (max-width: 560px) {
  .control-content { padding: 14px; }
  .control-nav { grid-template-columns: 1fr; }
  .control-topbar { flex-direction: column; }
  .control-top-actions { justify-content: flex-start; }
  .filterbar, .kpi-grid, .password-grid, .location-grid { grid-template-columns: 1fr; }
  .map-actions, .location-quality { align-items: stretch; flex-direction: column; }
  .school-map { height: 260px; }
  .filterbar .control-search { grid-column: auto; }
  .bar-chart { gap: 5px; }
  .admin-actions { grid-template-columns: 1fr; }
  .face-filterbar { grid-template-columns: 1fr; }
  .face-table th:nth-child(2),
  .face-table td:nth-child(2) { display: none; }
  .student-data-heading { align-items: stretch; flex-direction: column; }
  .student-data-heading > div:last-child { flex-wrap: wrap; }
  .student-data-kpis, .student-class-summary, .student-data-toolbar, .attendance-report-controls, .teacher-report-summary { grid-template-columns: 1fr; }
  .attendance-dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .attendance-dashboard-toolbar input { width: 100%; }
  .attendance-class-summary { align-items: stretch; flex-direction: column; }
  .attendance-class-toggle { grid-template-columns: 38px minmax(100px, 1fr) 42px 42px 24px; }
  .attendance-class-toggle .class-percentage { display: none; }
  .excel-class-button { width: 100%; }
}

.face-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.face-filterbar label {
  display: grid;
  gap: 6px;
  color: #596779;
  font-size: 12px;
  font-weight: 700;
}

.face-filterbar input,
.face-filterbar select {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #cfd8e2;
  border-radius: 6px;
  background: #fff;
  color: #263241;
}

.face-roster {
  display: grid;
  gap: 22px;
}

.face-class-group {
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.face-class-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #dbe2ea;
  background: #f7f9fc;
}

.face-class-heading h3 {
  margin: 0;
  color: #17365d;
  font-size: 16px;
}

.face-class-heading > div {
  min-width: 0;
}

.face-class-heading .face-class-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.class-password-reset {
  border-color: #d89b32;
  color: #8a5700;
  background: #fffaf0;
}

.face-class-heading span {
  display: block;
  margin-top: 3px;
  color: #768293;
  font-size: 12px;
}

.class-password-download {
  flex: 0 0 auto;
  border: 1px solid #b8d6f5;
  border-radius: 6px;
  background: #fff;
  color: #1d5bd1;
  font-weight: 700;
  cursor: pointer;
}

.face-table-scroll { overflow-x: auto; }

.face-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.face-table th,
.face-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #edf1f5;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

.face-table th {
  color: #627184;
  background: #fbfcfd;
  font-size: 11px;
}

.face-table tr:last-child td { border-bottom: 0; }

.student-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.student-cell strong,
.student-cell small { display: block; }
.student-cell small { margin-top: 3px; color: #7a8796; font-size: 11px; }

.student-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e8eff7;
  color: #234c7b;
  font-size: 13px;
  font-weight: 700;
}

.face-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.face-status.ready { border-color: #a8dfbd; background: #effaf3; color: #187543; }
.face-status.missing { border-color: #d9e0e7; background: #f7f8fa; color: #6e7b8a; }

.account-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #d9e0e7;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}

.account-status.ready { border-color: #a8dfbd; background: #effaf3; color: #187543; }
.account-status.missing { border-color: #d9e0e7; background: #f7f8fa; color: #6e7b8a; }

.face-row-actions { display: flex; gap: 8px; white-space: nowrap; }
.face-row-actions button { border: 1px solid #2f6fed; border-radius: 6px; background: #fff; color: #1d5bd1; font-weight: 700; cursor: pointer; }
.face-row-actions .row-password { border-color: #d9bd65; color: #86630c; }
.face-row-actions .row-camera { border-color: #bfcce0; color: #34455b; }
.face-row-actions .row-edit { border-color: #b8d6f5; color: #1f67b3; }
.face-row-actions .row-delete { border-color: #efb7bd; color: #bd2637; }

.teacher-import-status { margin: -4px 0 12px; color: #68788b; font-size: 11px; font-weight: 700; }
.teacher-import-status[data-tone="ok"] { color: #187543; }
.teacher-import-status[data-tone="danger"] { color: #bd2637; }
.teacher-assignment-list { display: grid; gap: 5px; }
.teacher-assignment-list span { display: block; line-height: 1.3; }
.teacher-assignment-list div { display: grid; gap: 2px; }
.teacher-assignment-list div + div { padding-top: 6px; border-top: 1px solid #edf1f5; }
.teacher-assignment-list small, .student-cell small { display: block; color: #758397; font-size: 10px; line-height: 1.35; }
.muted-value { color: #8793a3; }
.teacher-assignment-list.code span { width: fit-content; min-width: 34px; padding: 3px 7px; border: 1px solid #b8d2f2; border-radius: 5px; background: #eef5fd; color: #1d5da9; font-size: 10px; font-weight: 800; text-align: center; }

.student-edit-dialog.teacher-profile-dialog { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); }
.teacher-profile-dialog form { gap: 16px; }
.teacher-form-section { display: grid; gap: 12px; padding: 14px; border: 1px solid #dde5ee; border-radius: 7px; background: #fbfcfe; }
.teacher-section-title { display: flex; align-items: center; gap: 10px; }
.teacher-section-title > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #e9f2ff; color: #1d5fc1; font-size: 11px; font-weight: 800; }
.teacher-section-title > div { flex: 1; }
.teacher-section-title h4 { margin: 0; color: #183a64; font-size: 14px; }
.teacher-section-title p { margin-top: 2px; font-size: 10px; }
.teacher-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.teacher-form-grid select, .teacher-repeat-row select { min-height: 40px; padding: 0 10px; border: 1px solid #cdd7e2; border-radius: 6px; background: #fff; }
.teacher-repeat-list { display: grid; gap: 8px; }
.teacher-duty-scope-control { display: block; }
.teacher-duty-scope-control input, .teacher-duty-scope-control select { width: 100%; }
.teacher-repeat-row { display: grid; grid-template-columns: 0.7fr 1.35fr 1fr 0.65fr 0.85fr 34px; gap: 8px; align-items: end; padding: 10px; border: 1px solid #e1e7ee; border-radius: 6px; background: #fff; }
.teacher-repeat-row.duty-row { grid-template-columns: 1.4fr 1.2fr 0.85fr 0.7fr 0.5fr 34px; }
.teacher-active-field { display: flex !important; min-height: 40px; align-items: center; grid-template-columns: 18px 1fr !important; }
.teacher-active-field input { min-height: 0 !important; }
.remove-teacher-row { margin-bottom: 2px; color: #a52636; }
.teacher-account-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.teacher-account-summary div { display: grid; gap: 4px; padding: 11px; border: 1px solid #dce5ef; border-radius: 6px; background: #fff; }
.teacher-account-summary small { color: #738196; font-size: 10px; }
.teacher-account-summary strong { color: #243b59; font-size: 12px; }

@media (max-width: 760px) {
  .kaldik-import-controls { grid-template-columns: 1fr; }
  .teacher-form-grid, .teacher-account-summary { grid-template-columns: 1fr; }
  .teacher-repeat-row, .teacher-repeat-row.duty-row { grid-template-columns: 1fr 1fr; }
  .teacher-repeat-row .remove-teacher-row { justify-self: end; }
}

.mentoring-report-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #d8e1eb;
}
.mentoring-report-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.mentoring-report-summary div {
  padding: 10px 12px;
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  background: #f8fafc;
}
.mentoring-report-summary strong { display: block; margin-top: 3px; color: #123d68; font-size: 20px; }
.mentoring-report-summary div[data-status="hadir"] { border-top: 3px solid #1f9d61; }
.mentoring-report-summary div[data-status="izin"] { border-top: 3px solid #2f6fed; }
.mentoring-report-summary div[data-status="sakit"] { border-top: 3px solid #d99a16; }
.mentoring-report-summary div[data-status="alpa"] { border-top: 3px solid #d3464f; }
.mentoring-report-summary div[data-status="terlambat"] { border-top: 3px solid #e07b16; }

.mentoring-report-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #d9e2ec;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 57, 87, 0.05);
}
.mentoring-report-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #344357;
  font-size: 11px;
}
.mentoring-report-table th,
.mentoring-report-table td {
  padding: 10px 9px;
  border-right: 1px solid #e4eaf1;
  border-bottom: 1px solid #e4eaf1;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.mentoring-report-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f2f6fa;
  color: #4c5d72;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.mentoring-report-table tbody tr:nth-child(even) td { background: #f9fbfd; }
.mentoring-report-table tbody tr:hover td { background: #eef6ff; }
.mentoring-report-table th:last-child,
.mentoring-report-table td:last-child { border-right: 0; }
.mentoring-report-table tbody tr:last-child td { border-bottom: 0; }
.mentoring-report-table th:nth-child(1) { width: 4%; }
.mentoring-report-table th:nth-child(2) { width: 9%; }
.mentoring-report-table th:nth-child(3) { width: 9%; }
.mentoring-report-table th:nth-child(4) { width: 13%; }
.mentoring-report-table th:nth-child(5) { width: 15%; }
.mentoring-report-table th:nth-child(6) { width: 15%; }
.mentoring-report-table th:nth-child(7) { width: 14%; }
.mentoring-report-table th:nth-child(8) { width: 7%; }
.mentoring-report-table th:nth-child(9) { width: 7%; }
.mentoring-report-table th:nth-child(10) { width: 7%; }
.mentoring-row-number { color: #77869a; font-weight: 700; text-align: center !important; }
.mentoring-mode-badge {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid #c9daf0;
  border-radius: 4px;
  background: #eef5fd;
  color: #1f5d9f;
  font-size: 9px;
  font-weight: 800;
}
.mentoring-group-name,
.mentoring-teacher-name,
.mentoring-student-name { color: #203750; font-weight: 700; }
.mentoring-activity strong,
.mentoring-activity small { display: block; }
.mentoring-activity small { margin-top: 3px; color: #78869a; font-size: 9px; line-height: 1.35; }
.mentoring-student-id,
.mentoring-class-name { color: #53657a; font-weight: 700; }
.mentoring-status {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid #d3dbe5;
  border-radius: 4px;
  background: #f4f6f8;
  color: #526176;
  font-size: 9px;
  font-weight: 800;
}
.mentoring-status-hadir { border-color: #a8dfc2; background: #eaf8f0; color: #117946; }
.mentoring-status-izin { border-color: #b8cff7; background: #edf4ff; color: #245fbf; }
.mentoring-status-sakit { border-color: #edd09a; background: #fff7e6; color: #9a6500; }
.mentoring-status-alpa { border-color: #efb5ba; background: #fff0f1; color: #b62936; }
.mentoring-status-terlambat { border-color: #f0c58f; background: #fff5e8; color: #a45708; }
.mentoring-empty-cell { padding: 30px !important; color: #78869a; text-align: center !important; }
@media (max-width: 760px) { .mentoring-report-summary { grid-template-columns: repeat(2, 1fr); } }

.student-edit-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(23, 54, 93, 0.22);
}

.student-edit-dialog::backdrop { background: rgba(23, 42, 67, 0.45); }

.student-edit-dialog form { display: grid; gap: 14px; padding: 20px; }
.student-edit-dialog label { display: grid; gap: 6px; color: #4c5b6e; font-size: 12px; font-weight: 700; }
.student-edit-dialog input { min-height: 40px; padding: 0 11px; border: 1px solid #cdd7e2; border-radius: 6px; }
.student-edit-dialog p { margin: 0; color: #718092; font-size: 12px; line-height: 1.45; }
.student-edit-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.student-edit-title h3 { margin: 0; color: #17365d; font-size: 18px; }
.student-edit-title p { margin-top: 4px; }
.student-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.student-edit-actions button { min-height: 38px; padding: 0 13px; border: 1px solid #ccd6e2; border-radius: 6px; background: #fff; color: #405066; font-weight: 700; cursor: pointer; }
.student-edit-actions .primary { border-color: #2f6fed; background: #2f6fed; color: #fff; }
.student-edit-actions .danger-button { border-color: #c92d3f; background: #c92d3f; color: #fff; }
.delete-student-warning { padding: 14px; border: 1px solid #efc2c8; border-radius: 6px; background: #fff6f7; }
.delete-student-warning strong { display: block; margin-bottom: 5px; color: #9f1f30; font-size: 15px; }
.student-delete-dialog h3 { color: #9f1f30; }

.face-empty-state {
  padding: 28px;
  border: 1px dashed #cfd8e2;
  border-radius: 8px;
  color: #768293;
  text-align: center;
}

.face-workspace {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  background: #f9fbfd;
}

.face-workspace-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.face-workspace-heading strong,
.face-workspace-heading span { display: block; }
.face-workspace-heading span { margin-top: 4px; color: #768293; font-size: 12px; }

.icon-button {
  width: 32px;
  height: 32px;
  border: 1px solid #cfd8e2;
  border-radius: 6px;
  background: #fff;
  color: #526174;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 900px) {
  .schedule-import-panel,
  .student-data-toolbar.schedule-toolbar {
    grid-template-columns: 1fr;
  }

  .schedule-lesson-row {
    grid-template-columns: 32px 1fr auto;
  }

  .schedule-time {
    grid-column: 2 / 3;
  }

  .schedule-subject {
    grid-column: 2 / 4;
  }

  .schedule-row-action {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .schedule-adjustment-row .schedule-row-actions {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
}
.focus-session-cards {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.focus-session-card {
  border: 1px solid #dce5ef;
  border-radius: 8px;
  background: #fff;
  padding: 18px;
}

.focus-session-heading,
.focus-session-summary,
.focus-student-list,
.focus-student {
  display: flex;
  align-items: center;
}

.focus-session-heading {
  justify-content: space-between;
  gap: 16px;
}

.focus-session-heading h3,
.focus-session-heading p {
  margin: 3px 0 0;
}

.focus-session-heading small,
.focus-session-heading p {
  color: #718096;
}

.focus-session-summary {
  gap: 10px;
  margin: 16px 0;
}

.focus-session-summary span {
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid #e3e9f0;
  border-radius: 7px;
  color: #667085;
  font-size: 12px;
}

.focus-session-summary strong {
  display: block;
  color: #17365d;
  font-size: 20px;
}

.focus-student-list {
  align-items: stretch;
  flex-direction: column;
  gap: 6px;
}

.focus-student {
  min-height: 42px;
  padding: 8px 11px;
  border-left: 4px solid #9aa4b2;
  background: #f7f9fb;
}

.focus-student span { flex: 1; font-weight: 700; }
.focus-student small { width: 160px; color: #667085; }
.focus-student b { width: 30px; text-align: center; color: #667085; }
.focus-student.active { border-left-color: #23a36d; background: #f1fbf6; }
.focus-student.permission,
.focus-student.unstable { border-left-color: #e5ad36; background: #fff9ec; }
.focus-student.violation,
.focus-student.exited,
.focus-student.offline { border-left-color: #dc5c6b; background: #fff4f5; }

@media (max-width: 700px) {
  .focus-session-heading { align-items: flex-start; flex-direction: column; }
  .focus-session-summary { align-items: stretch; flex-direction: column; }
  .focus-session-summary span { min-width: 0; }
  .focus-student { align-items: flex-start; flex-wrap: wrap; }
  .focus-student small { width: calc(100% - 30px); }
}

.kiosk-operator-panel {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #dce5ef;
}

.device-accordion {
  margin-top: 18px;
  border: 1px solid #d7e0ea;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
}

.device-accordion-item { border-bottom: 1px solid #dfe6ee; }
.device-accordion-item:last-child { border-bottom: 0; }
.device-accordion-item > summary {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) auto 20px;
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  color: #172b45;
  background: #fff;
}
.device-accordion-item > summary::-webkit-details-marker { display: none; }
.device-accordion-item > summary:focus { outline: none; }
.device-accordion-item > summary:focus-visible { box-shadow: inset 3px 0 #1769c2; }
.device-accordion-item > summary:hover { background: #f7f9fc; }
.device-accordion-item[open] > summary { background: #f9fbfd; }
.device-accordion-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #dbe5f0;
  border-radius: 6px;
  color: #0d579f;
  background: #f2f7fc;
}
.device-accordion-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.device-accordion-title { display: grid; gap: 3px; min-width: 0; }
.device-accordion-title strong { font-size: 15px; }
.device-accordion-title small { color: #738197; font-size: 12px; font-weight: 500; }
.device-accordion-summary { color: #155a9a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.device-accordion-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid #34465c;
  border-bottom: 2px solid #34465c;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.device-accordion-item[open] .device-accordion-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.device-accordion-body { padding: 18px; border-top: 1px solid #e3e9f0; background: #fff; }
.device-accordion-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.device-accordion-actions-top { margin: 0 0 14px; }
.device-channel-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.attendance-device-status { display: grid; gap: 0; }
.attendance-device-status-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 4px;
  border-bottom: 1px solid #e6ebf1;
}
.attendance-device-status-row:last-child { border-bottom: 0; }
.attendance-device-status-row div { display: grid; gap: 3px; }
.attendance-device-status-row small { color: #738197; }
.attendance-device-status-row b { font-size: 12px; }
.attendance-device-status-dot { width: 9px; height: 9px; border-radius: 50%; }
.attendance-device-status-row.ready .attendance-device-status-dot { background: #24a36a; }
.attendance-device-status-row.ready b { color: #168354; }
.attendance-device-status-row.warning .attendance-device-status-dot { background: #dfa62d; }
.attendance-device-status-row.warning b { color: #9b6a00; }

@media (max-width: 700px) {
  .device-accordion-item > summary { grid-template-columns: 40px minmax(0, 1fr) 18px; padding: 10px 12px; }
  .device-accordion-summary { grid-column: 2; white-space: normal; }
  .device-accordion-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .device-channel-grid { grid-template-columns: 1fr; }
  .device-accordion-body { padding: 14px; }
}

.kiosk-operator-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, .8fr) minmax(230px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 16px 0 8px;
}

.kiosk-operator-form label { display: grid; gap: 7px; }

.face-review-dialog { width: min(860px, calc(100vw - 32px)); }
.face-review-dialog label { display: grid; gap: 7px; color: #42566f; font-size: 12px; font-weight: 700; }
.face-review-dialog textarea { width: 100%; padding: 10px; border: 1px solid #bdcad8; border-radius: 6px; resize: vertical; font: inherit; }
.face-review-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.face-review-photos figure { margin: 0; border: 1px solid #d7e0ea; border-radius: 6px; overflow: hidden; background: #f7f9fc; }
.face-review-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.face-review-photos figcaption { padding: 7px; text-align: center; color: #42566f; font-size: 12px; }
.face-upload-dialog .admin-dialog-body { width: min(760px, calc(100vw - 32px)); }
.face-upload-guide { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: start; margin: 16px 0; padding: 14px; border: 1px solid #d7e0ea; border-radius: 6px; background: #f7f9fc; }
.face-upload-guide > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0d5cb6; color: #fff; font-weight: 800; }
.face-upload-guide p { margin: 0; }
.face-upload-guide strong, .face-upload-guide small { display: block; }
.face-upload-guide small { margin-top: 3px; color: #68788c; }
.face-upload-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 130px; margin: 14px 0; }
.face-upload-preview > p { grid-column: 1 / -1; align-self: center; margin: 0; padding: 32px; border: 1px dashed #b8c6d6; color: #68788c; text-align: center; }
.face-upload-preview figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d7e0ea; border-radius: 6px; background: #fff; }
.face-upload-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #eef2f6; }
.face-upload-preview figcaption { padding: 8px; }
.face-upload-preview figcaption strong, .face-upload-preview figcaption span, .face-upload-preview figcaption small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-upload-preview figcaption span { margin-top: 2px; color: #68788c; font-size: 11px; }
.face-upload-preview figcaption small { margin-top: 5px; color: #0b7a48; font-weight: 700; }
.dialog-inline-status[data-tone="danger"] { color: #b4232f; }
.dialog-inline-status[data-tone="ok"] { color: #087443; }
@media (max-width: 720px) { .face-upload-guide { grid-template-columns: auto 1fr; } .face-upload-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.face-photo-delete { display: block; width: 100%; margin-top: 7px; padding: 7px; border: 1px solid #efb7bd; border-radius: 4px; background: #fff; color: #bd2637; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) { .face-review-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kiosk-operator-form label > span { color: #42566f; font-size: 12px; font-weight: 700; }
.kiosk-operator-form input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #bdcad8; border-radius: 6px; }
.password-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.password-input input { min-width: 0; border-radius: 6px 0 0 6px !important; }
.password-toggle { min-width: 64px; padding: 0 10px; border: 1px solid #bdcad8; border-left: 0; border-radius: 0 6px 6px 0; color: #164e82; background: #eef4fa; cursor: pointer; font-size: 12px; font-weight: 700; }
.credential-password { margin-top: 8px; }
.credential-password input { height: 48px; padding: 0 12px; font-size: 18px; font-weight: 700; letter-spacing: 0; }

@media (max-width: 900px) {
  .kiosk-operator-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .kiosk-operator-form { grid-template-columns: 1fr; }
}

.schedule-master-page { padding: 22px; }
.kaldik-import-panel { margin: 16px 0; border: 1px solid #cfdbe8; border-radius: 7px; background: #f8fbff; }
.kaldik-import-panel summary { min-height: 66px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.kaldik-import-panel summary::-webkit-details-marker { display: none; }
.kaldik-import-panel summary span { display: grid; gap: 4px; }
.kaldik-import-panel summary small { color: #69798c; font-weight: 400; }
.kaldik-import-panel summary i::before { content: "+"; color: #0b5ec6; font-style: normal; font-size: 22px; }
.kaldik-import-panel[open] summary i::before { content: "-"; }
.kaldik-import-body { padding: 0 16px 16px; border-top: 1px solid #dbe5ef; }
.kaldik-import-controls { display: grid; grid-template-columns: minmax(250px, 1fr) 190px auto; gap: 12px; align-items: end; padding-top: 16px; }
.kaldik-import-controls label { display: grid; gap: 7px; color: #42566f; font-size: 12px; font-weight: 700; }
.kaldik-import-controls input,.kaldik-import-controls select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #bdcad8; border-radius: 6px; background: #fff; }
.kaldik-duplicate { color: #7f8b99; background: #f5f6f8; }
.schedule-master-form,
.academic-calendar-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 20px 0;
  padding: 18px 0;
  border-top: 1px solid #dce5ef;
  border-bottom: 1px solid #dce5ef;
}
.academic-calendar-editor-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 34px; color: #17385e; }
.academic-calendar-form.is-editing { padding: 14px; border: 2px solid #2d76cf; border-radius: 7px; background: #f5f9ff; }
.calendar-row-editing { background: #eaf3ff; box-shadow: inset 4px 0 #1768c4; }
.academic-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 8px; }
.academic-calendar-toolbar .eyebrow { margin: 0 0 3px; }
.academic-calendar-toolbar h3 { margin: 0; color: #172b43; font-size: 20px; text-transform: capitalize; }
.academic-calendar-navigation { display: flex; align-items: center; gap: 7px; }
.academic-calendar-navigation .compact-icon-button { font-size: 25px; line-height: 1; }
.academic-calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 18px; margin-top: 12px; }
.academic-calendar-board { min-width: 0; overflow-x: auto; border: 1px solid #cbd8e6; border-radius: 7px; background: #fff; }
.academic-calendar-weekdays { min-width: 735px; display: grid; grid-template-columns: repeat(7, minmax(105px, 1fr)); border-bottom: 1px solid #cbd8e6; background: #f2f6fa; }
.academic-calendar-weekdays span { padding: 10px 8px; color: #52657b; font-size: 11px; font-weight: 800; text-align: center; text-transform: uppercase; }
.academic-calendar-grid { min-width: 735px; display: grid; grid-template-columns: repeat(7, minmax(105px, 1fr)); background: #dbe4ed; gap: 1px; }
.academic-calendar-day { min-width: 0; min-height: 108px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 9px; border: 0; background: #fff; color: #1d3047; text-align: left; cursor: pointer; overflow: hidden; }
.academic-calendar-day:hover { background: #f3f8fd; }
.academic-calendar-day:focus-visible { position: relative; z-index: 2; outline: 3px solid #2876cf; outline-offset: -3px; }
.academic-calendar-day.is-outside { background: #f7f8fa; color: #98a4b1; }
.academic-calendar-day.is-selected { box-shadow: inset 0 0 0 3px #1768c4; background: #f4f9ff; }
.academic-calendar-day-number { width: 29px; height: 29px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-size: 12px; font-weight: 800; }
.academic-calendar-day.is-today .academic-calendar-day-number { background: #103f73; color: #fff; }
.academic-calendar-events { min-width: 0; display: grid; gap: 4px; }
.academic-calendar-event { display: block; min-width: 0; padding: 5px 6px; border-left: 3px solid #2f74c7; border-radius: 3px; background: #e9f2fd; color: #174f8d; font-size: 10px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.academic-calendar-event.holiday { border-color: #dc3545; background: #fff0f1; color: #a51e2b; }
.academic-calendar-event.special { border-color: #d88a00; background: #fff5dc; color: #8b5700; }
.academic-calendar-event.exam { border-color: #16875c; background: #e8f7f0; color: #0b6744; }
.academic-calendar-event.is-inactive { filter: grayscale(1); opacity: .55; }
.academic-calendar-more { padding-left: 6px; color: #596d83; font-size: 10px; font-weight: 700; }
.academic-calendar-selected-panel { min-height: 260px; border: 1px solid #cbd8e6; border-radius: 7px; background: #fff; overflow: hidden; }
.academic-calendar-selected-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-bottom: 1px solid #dbe4ed; background: #f7fafc; }
.academic-calendar-selected-heading small { color: #66798e; font-size: 9px; font-weight: 800; }
.academic-calendar-selected-heading h4 { margin: 4px 0 0; color: #182f4a; font-size: 14px; text-transform: capitalize; }
.academic-calendar-selected-entries { display: grid; }
.academic-calendar-selected-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px solid #e2e9f0; border-left: 4px solid #2f74c7; }
.academic-calendar-selected-entry.holiday { border-left-color: #dc3545; }
.academic-calendar-selected-entry.special { border-left-color: #d88a00; }
.academic-calendar-selected-entry.exam { border-left-color: #16875c; }
.academic-calendar-selected-entry.is-inactive { background: #f4f5f6; opacity: .7; }
.academic-calendar-selected-entry > div:first-child { min-width: 0; display: grid; gap: 3px; }
.academic-calendar-selected-entry span { color: #5f7185; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.academic-calendar-selected-entry strong { color: #213850; font-size: 12px; overflow-wrap: anywhere; }
.academic-calendar-selected-entry small { color: #718196; font-size: 10px; }
.academic-calendar-selected-entry > div:last-child { display: flex; gap: 4px; }
.academic-calendar-empty { display: grid; gap: 5px; padding: 25px 15px; text-align: center; }
.academic-calendar-empty strong { color: #314b68; font-size: 13px; }
.academic-calendar-empty span { color: #748398; font-size: 11px; }
.academic-calendar-loading { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; background: #fff; color: #66798e; }
.academic-calendar-loading.is-error { color: #b42332; }
.schedule-master-form label,
.academic-calendar-form label,
.schedule-master-toolbar label { display: grid; gap: 7px; color: #42566f; font-size: 12px; font-weight: 700; }
.schedule-master-form label.wide,
.academic-calendar-form label.wide { grid-column: span 2; }
.schedule-master-form input,
.schedule-master-form select,
.academic-calendar-form input,
.academic-calendar-form select,
.schedule-master-toolbar select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #bdcad8; border-radius: 6px; background: #fff; }
.schedule-active-check { display: flex !important; align-items: center; align-self: center; gap: 8px !important; padding-top: 18px; }
.schedule-active-check input { width: 18px; height: 18px; }
.schedule-project-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
.schedule-project-classbar { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 12px; align-items: start; margin-bottom: 10px; }
.schedule-project-classpick > span { display: block; font-size: 12px; color: #5a6472; margin-bottom: 4px; }
.schedule-project-checklist { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 160px; overflow-y: auto; border: 1px solid #d6dce5; border-radius: 8px; padding: 6px 8px; background: #fff; }
.schedule-project-check { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.schedule-project-classlistbox > span { display: block; font-size: 12px; color: #5a6472; margin-bottom: 4px; }
.schedule-project-classlist { display: flex; flex-wrap: wrap; gap: 6px; }
.schedule-project-class { border: 1px solid #d6dce5; background: #f7f9fc; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; text-align: left; }
.schedule-project-class small { display: block; color: #5a6472; }
.schedule-project-class.aktif { border-color: #2563eb; background: #e8f0fe; font-weight: 600; }
.schedule-project-tablewrap { overflow-x: auto; }


.schedule-project-cell select { min-width: 120px; font-size: 11px; }
.schedule-project-table td select, .schedule-project-table td input { width: 100%; min-width: 130px; }
.schedule-project-table .schedule-project-jam input { min-width: 110px; font-size: 12px; }
.schedule-project-table .schedule-project-jam small { display: block; color: #b45309; font-size: 11px; }
.schedule-project-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.schedule-project-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.schedule-project-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #d6dce5; border-radius: 8px; padding: 8px 10px; background: #f7f9fc; flex-wrap: wrap; }
.schedule-project-card small { display: block; color: #5a6472; }
.schedule-project-table { overflow-x: auto; margin-top: 8px; }
.schedule-project-table table { border-collapse: collapse; font-size: 12px; width: 100%; }
.schedule-project-table th, .schedule-project-table td { border: 1px solid #d6dce5; padding: 4px 6px; text-align: left; vertical-align: top; }
.schedule-project-table th small { display: block; color: #6b7280; font-weight: 400; }
.schedule-project-table .belum { color: #b45309; font-weight: 600; }
.schedule-project-unmatched { margin: 6px 0 0 18px; }
.schedule-project-unmatched li { margin-bottom: 4px; }
.schedule-teacher-picker { display: flex; flex-direction: column; gap: 6px; }
.schedule-teacher-picker select { min-height: 84px; }
.schedule-teacher-picker .compact-button { align-self: flex-start; }
.schedule-classes-field[hidden],
.schedule-end-date-field[hidden],
.schedule-days-field[hidden],
.schedule-from-activity-field[hidden],
.schedule-all-day-toggle[hidden],
.schedule-presence-note[hidden] { display: none !important; }
.schedule-classes-field select,
.schedule-days-field select { min-height: 120px; }
.schedule-classes-field small,
.schedule-days-field small,
.schedule-from-activity-field small { color: #6b7e91; font-weight: 600; }
.schedule-all-day-toggle { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 700; }
.schedule-all-day-toggle input { width: 18px; height: 18px; }
.schedule-presence-note { color: #8a5a00; background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 6px; padding: 8px 10px; }
#scheduleFromActivity { justify-self: start; }
.schedule-master-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 14px 0; }
.schedule-master-toolbar label { width: min(260px, 100%); }
.bell-primary-schedule { order: -20; border-color: #9fc1e5; box-shadow: 0 6px 18px rgba(15, 78, 138, .08); }
.bell-primary-schedule > summary { background: #f5f9fe; }
.bell-local-workspace { padding-top: 4px; }
.bell-local-toolbar { margin-top: 4px; padding-bottom: 13px; border-bottom: 1px solid #dce5ef; }
.bell-local-toolbar .bell-remote-buttons { grid-template-columns: repeat(4, auto); }
.bell-primary-status { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 10px 0; padding: 9px 11px; border: 1px solid #d5e2ef; border-radius: 6px; background: #f8fbfe; }
.bell-primary-status > span { flex: 1; color: #3d536b; font-size: 13px; }
.bell-advanced-inline { margin-top: 14px; border: 1px solid #dce5ef; border-radius: 6px; background: #fff; }
.bell-advanced-inline > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; cursor: pointer; }
.bell-advanced-inline > summary small { display: block; margin-top: 3px; color: #6e7e90; font-weight: 400; }
.bell-editor-dialog { width: min(680px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 7px; box-shadow: 0 24px 70px rgba(9, 35, 63, .28); }
.bell-editor-dialog::backdrop { background: rgba(8, 25, 44, .5); }
.bell-editor-dialog .bell-event-form { display: block; margin: 0; padding: 20px; }
.bell-dialog-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.bell-dialog-title h3 { margin: 0 0 4px; }
.bell-dialog-title p { margin: 0; color: #6e7e90; }
.bell-editor-dialog .bell-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bell-editor-dialog .bell-event-grid label:nth-child(3), .bell-editor-dialog .bell-repeat-weekdays { grid-column: 1 / -1; }
.bell-editor-dialog .bell-remote-buttons { display: flex; justify-content: flex-end; }
.bell-custom-table { min-width: 1120px; }
.bell-custom-table input[type="time"] { width: 112px; }
.bell-custom-table input[data-custom-label] { min-width: 230px; }
.bell-custom-table .bell-mapping-ready { color: #15803d; font-weight: 700; }
.bell-custom-table .bell-mapping-missing { color: #b45309; }
.bell-custom-table input { min-height: 38px; border: 1px solid #bdcad8; border-radius: 5px; padding: 7px 9px; background: #fff; }
.bell-custom-table td:nth-child(5) small { display: block; color: #718097; font-size: 10px; }
.bell-custom-actions { display: grid; grid-template-columns: 34px 34px repeat(4, auto); align-items: center; gap: 5px; min-width: 440px; }
.bell-event-grid { display: grid; grid-template-columns: 120px 120px minmax(220px, 1fr) auto minmax(260px, 1fr); align-items: end; gap: 12px; }
.bell-operator-note { display:flex; align-items:center; gap:12px; margin:12px 0; padding:12px 14px; border:1px solid #cfe0f2; border-radius:6px; background:#f5f9fd; color:#52657b; }
.bell-operator-note strong { color:#123b68; white-space:nowrap; }
.bell-repeat-weekdays { grid-column: 1 / -1; justify-self: start; padding: 8px 0; }
.bell-repeat-weekdays input { height: auto; }
.compact-icon-button { width: 34px; height: 34px; border: 1px solid #bdcad8; border-radius: 5px; background: #fff; color: #075ca8; cursor: pointer; }
.compact-icon-button:disabled { color: #9eabb9; background: #f1f4f7; cursor: default; }
@media (max-width: 1180px) { .bell-event-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } }
.bell-morning-sequence { margin: 16px 0; padding: 16px; border: 1px solid #cbd8e6; border-radius: 6px; background: #f8fbff; }
.bell-morning-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.bell-morning-heading h4, .bell-morning-heading p { margin: 0; }
.bell-morning-heading p { margin-top: 4px; color: #63758b; font-size: 12px; }
.bell-morning-table { min-width: 820px; }
.bell-morning-table input { width: 100%; min-height: 38px; border: 1px solid #bdcad8; border-radius: 5px; padding: 7px 9px; background: #fff; }
.bell-morning-table input[type="time"] { width: 112px; }
.bell-morning-table input[type="number"] { width: 80px; }
.bell-duration-input { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.bell-duration-input input { width: 72px; }
.bell-duration-input span { color: #61748b; font-size: 12px; }
.schedule-master-filters { display: flex; align-items: end; gap: 12px; flex: 1; }

.bell-tool-section { margin: 22px 0; padding: 20px 0; border-top: 1px solid #d7e1ec; border-bottom: 1px solid #d7e1ec; }
.bell-tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.bell-tool-heading h3, .bell-tool-heading p { margin: 0; }
.bell-tool-heading h3 { color: #172b43; font-size: 17px; }
.bell-tool-heading p { margin-top: 4px; color: #68798d; font-size: 12px; }
.bell-tool-form { display: grid; grid-template-columns: repeat(6, minmax(105px, 1fr)); gap: 12px; align-items: end; }
.bell-tool-form label { display: grid; gap: 7px; color: #42566f; font-size: 12px; font-weight: 700; }
.bell-tool-form label.wide { grid-column: span 2; }
.bell-tool-form input, .bell-tool-form select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #bdcad8; border-radius: 6px; background: #fff; }
.bell-tool-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.emergency-bell-section { margin-top: 28px; border-bottom: 0; }
.duration-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.duration-presets button { min-height: 36px; padding: 0 12px; border: 1px solid #aebdcd; border-radius: 5px; background: #fff; color: #26415f; font-weight: 700; }
.duration-presets button.active, .duration-presets button:hover { border-color: #1769c2; background: #eaf3fd; color: #0d5dae; }
.emergency-bell-preview { margin: 12px 0 18px; }
.emergency-activity-rules { margin: 0 0 22px; padding: 14px 0; border-top: 1px solid #dce5ef; }
.emergency-activity-rules h4 { margin: 0 0 10px; color: #172b43; font-size: 14px; }
.schedule-manual-heading h4, .schedule-manual-heading p { margin: 0; }
.schedule-manual-heading p { margin-top: 3px; color: #68798d; font-size: 12px; }
.emergency-activity-rules select, .emergency-activity-rules input { min-height: 38px; border: 1px solid #bdcad8; border-radius: 5px; background: #fff; padding: 0 8px; }
.emergency-manual-table tr.is-editing { background: #f1f7ff; }
.emergency-manual-table select:disabled, .emergency-manual-table input:disabled { color: #41546a; background: #f7f9fb; opacity: 1; }
.emergency-manual-table tr.is-editing select, .emergency-manual-table tr.is-editing input { border-color: #1872d9; background: #fff; }
.inline-time-range { display: flex; align-items: center; gap: 6px; min-width: 230px; }
.inline-time-range input { min-width: 95px; }
.emergency-bell-list { border-top: 1px solid #dce5ef; }
.emergency-bell-list > p { color: #6b7c8f; }
.emergency-bell-item { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 14px; min-height: 62px; padding: 10px 4px; border-bottom: 1px solid #e2e9f1; }
.emergency-bell-item div:first-child { display: grid; gap: 3px; }
.emergency-bell-item span { color: #68798d; font-size: 11px; }

@media (max-width: 1050px) {
  .schedule-master-form,
  .academic-calendar-form,
  .bell-tool-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .academic-calendar-layout { grid-template-columns: 1fr; }
  .academic-calendar-selected-panel { min-height: 0; }
}

@media (max-width: 650px) {
  .schedule-master-form,
  .academic-calendar-form,
  .bell-tool-form { grid-template-columns: 1fr; }
  .schedule-master-form label.wide,
  .academic-calendar-form label.wide,
  .bell-tool-form label.wide { grid-column: auto; }
  .schedule-master-toolbar { align-items: stretch; flex-direction: column; }
  .academic-calendar-toolbar { align-items: stretch; flex-direction: column; }
  .academic-calendar-navigation { display: grid; grid-template-columns: 38px 1fr 38px 1fr; }
  .academic-calendar-navigation .compact-button { width: 100%; }
  .academic-calendar-day { min-height: 92px; padding: 7px; }
  .academic-calendar-selected-entry { grid-template-columns: 1fr; }
  .academic-calendar-selected-entry > div:last-child { justify-content: flex-start; }
  .schedule-master-filters { align-items: stretch; flex-direction: column; }
  .bell-local-toolbar .bell-remote-buttons { grid-template-columns: 1fr 1fr; }
  .bell-primary-status { align-items: stretch; flex-direction: column; }
  .bell-editor-dialog .bell-event-grid { grid-template-columns: 1fr; }
  .bell-editor-dialog .bell-event-grid label:nth-child(3), .bell-editor-dialog .bell-repeat-weekdays { grid-column: auto; }
  .bell-tool-heading { flex-direction: column; }
  .bell-tool-actions { justify-content: stretch; }
  .bell-tool-actions button { flex: 1; }
  .emergency-bell-item { grid-template-columns: 1fr auto; }
  .emergency-bell-item > div:last-child { grid-column: 1 / -1; }
}

.school-profile-page {
  padding: 0;
  overflow: hidden;
}

.school-profile-heading,
.school-profile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
}

.school-profile-heading {
  border-bottom: 1px solid #dce5ef;
}

.school-profile-heading h2,
.school-profile-heading p,
.school-profile-section h3,
.school-profile-section p,
.school-profile-actions p {
  margin: 0;
}

.school-profile-heading > div > p:last-child,
.school-profile-section > div > p,
.school-profile-actions p {
  margin-top: 5px;
  color: #6c7b8d;
}

.school-profile-state {
  padding: 6px 10px;
  border-radius: 5px;
  color: #17633e;
  background: #eaf8f0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.school-profile-section {
  display: grid;
  grid-template-columns: minmax(190px, .35fr) minmax(0, 1fr);
  gap: 28px;
  padding: 24px;
  border-bottom: 1px solid #e3e9f0;
}

.school-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.school-profile-grid label {
  display: grid;
  align-content: start;
  gap: 7px;
  color: #42566f;
  font-size: 12px;
  font-weight: 700;
}

.school-profile-grid label.wide { grid-column: span 2; }
.school-profile-grid input,
.school-profile-grid select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  border: 1px solid #bdcad8;
  border-radius: 6px;
  background: #fff;
  color: #26384d;
}

.school-profile-actions { justify-content: flex-end; }
.school-profile-actions p { margin-right: auto; }

.letterhead-editor { margin-top: 18px; }
.letterhead-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.letterhead-logo-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.letterhead-logo-controls article { display: grid; grid-template-columns: 70px minmax(140px, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #d3dde8; border-radius: 6px; background: #f8fafc; }
.letterhead-logo-controls img { width: 64px; height: 64px; object-fit: contain; }
.letterhead-logo-controls strong,
.letterhead-logo-controls small { display: block; }
.letterhead-logo-controls small { margin-top: 3px; color: #6c7b8d; }
.letterhead-preview-panel { display: grid; grid-template-columns: minmax(190px, .35fr) minmax(0, 1fr); gap: 28px; padding: 24px; border-bottom: 1px solid #e3e9f0; }
.letterhead-preview-panel > * { min-width: 0; }
.letterhead-preview-panel h3,
.letterhead-preview-panel p { margin: 0; }
.letterhead-preview-panel p { margin-top: 5px; color: #6c7b8d; }
.official-letterhead-preview { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; padding: 14px; border: 1px solid #d3dde8; background: #eef2f6; }
.official-letterhead-preview .official-document-letterhead { min-width: 0; background: #fff; }
.official-document-letterhead.is-preview { grid-template-columns: 66px minmax(0, 1fr) 66px; gap: 8px; min-height: 100px; }
.official-document-letterhead.is-preview img { width: 58px; height: 68px; }
.official-document-letterhead.is-preview span { font-size: 11px; }
.official-document-letterhead.is-preview strong { font-size: 13px; }
.official-document-letterhead.is-preview strong:nth-of-type(2),
.official-document-letterhead.is-preview strong:nth-of-type(3) { font-size: 15px; }
.official-document-letterhead.is-preview small { font-size: 7px; }

@media (max-width: 1200px) {
  .letterhead-logo-controls,
  .letterhead-preview-panel { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .school-profile-section { grid-template-columns: 1fr; }
  .school-profile-grid { grid-template-columns: 1fr 1fr; }
  .letterhead-logo-controls { grid-template-columns: 1fr; }
  .letterhead-preview-panel { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .school-profile-heading,
  .school-profile-actions { align-items: flex-start; flex-direction: column; }
  .school-profile-grid { grid-template-columns: 1fr; }
  .school-profile-grid label.wide { grid-column: auto; }
  .letterhead-logo-controls article { grid-template-columns: 58px 1fr; }
  .letterhead-logo-controls article .quiet-button { width: 100%; }
}

.schedule-v2-workspace {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid #cdd9e7;
  border-left: 4px solid #1263b8;
  border-radius: 7px;
  background: #fff;
}

.schedule-setup-dashboard {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #d6e0eb;
  border-radius: 7px;
  background: #fff;
}

.schedule-setup-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.schedule-setup-heading h2,
.schedule-setup-heading p { margin: 0; }
.schedule-setup-heading h2 { color: #15283f; font-size: 20px; }
.schedule-setup-heading > div > p:last-child { margin-top: 4px; color: #6e7d8f; font-size: 11px; }

.schedule-setup-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
  margin: 2px 0 20px;
}

.schedule-setup-flow a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #6c7887;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
}

.schedule-setup-flow a::before {
  position: absolute;
  z-index: 0;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  content: "";
  background: #cbd5e1;
}

.schedule-setup-flow a:first-child::before { display: none; }
.schedule-setup-flow a.done::before,
.schedule-setup-flow a.current::before { background: #239553; }

.schedule-setup-flow b {
  position: relative;
  z-index: 1;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #b9c5d2;
  border-radius: 50%;
  background: #fff;
  color: #536276;
  font-size: 12px;
}

.schedule-setup-flow a.done b { border-color: #239553; color: #fff; background: #239553; }
.schedule-setup-flow a.current { color: #0d5fb8; }
.schedule-setup-flow a.current b { border-color: #0d5fb8; color: #fff; background: #0d5fb8; }

.schedule-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.schedule-readiness-card {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  min-height: 92px;
  overflow: hidden;
  border: 1px solid #d9e2ec;
  border-radius: 6px;
  background: #fff;
}

.schedule-readiness-card > span { background: #5f738c; }
.schedule-readiness-card > div { display: grid; align-content: center; gap: 3px; padding: 12px; }
.schedule-readiness-card small { color: #637387; font-size: 10px; font-weight: 700; }
.schedule-readiness-card strong { color: #172a42; font-size: 18px; }
.schedule-readiness-card em { overflow: hidden; color: #7c8998; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.schedule-readiness-card.green > span { background: #209250; }
.schedule-readiness-card.green strong { color: #14713c; }
.schedule-readiness-card.blue > span { background: #1769c2; }
.schedule-readiness-card.blue strong { color: #125aa6; }
.schedule-readiness-card.amber > span { background: #db8a00; }
.schedule-readiness-card.amber strong { color: #a85e00; }
.schedule-readiness-card.red > span { background: #d4382c; }
.schedule-readiness-card.red strong { color: #b42318; }

.schedule-readiness-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr);
  gap: 12px;
}

.schedule-readiness-table > div {
  display: grid;
  grid-template-columns: 28px minmax(135px, 1fr) 105px 90px 64px;
  align-items: center;
  min-height: 40px;
  border-top: 1px solid #e4eaf1;
  color: #33475e;
  font-size: 10px;
}

.schedule-readiness-table > div:first-child { border-top: 0; }
.schedule-ready-icon { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 900; }
.schedule-ready-icon.ok { color: #fff; background: #239553; }
.schedule-ready-icon.warn { color: #fff; background: #e28a00; }
.schedule-readiness-table em { font-style: normal; font-weight: 800; }
.schedule-readiness-table em.ok { color: #197a43; }
.schedule-readiness-table em.warn { color: #b86800; }
.schedule-readiness-table small { color: #77869a; }
.schedule-readiness-table a { justify-self: end; padding: 5px 8px; border: 1px solid #4c8fd3; border-radius: 4px; color: #0d5fb8; text-decoration: none; font-weight: 800; }

.schedule-next-actions { display: grid; gap: 11px; }
.schedule-next-actions > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; }
.schedule-next-actions b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: #1769c2; font-size: 10px; }
.schedule-next-actions p,
.schedule-next-actions strong,
.schedule-next-actions small { display: block; margin: 0; }
.schedule-next-actions strong { color: #263a51; font-size: 10px; }
.schedule-next-actions small { margin-top: 2px; color: #7b8999; font-size: 9px; line-height: 1.4; }
.schedule-next-button { display: block; margin-top: 14px; padding: 10px 12px; border-radius: 5px; text-align: center; text-decoration: none; font-size: 11px; font-weight: 800; }

@media (max-width: 1100px) {
  .schedule-readiness-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .schedule-readiness-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .schedule-setup-heading { align-items: flex-start; flex-direction: column; }
  .schedule-setup-flow { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .schedule-setup-flow a::before { display: none; }
  .schedule-readiness-table > div { grid-template-columns: 28px minmax(100px, 1fr) 92px 58px; gap: 4px; }
  .schedule-readiness-table small { display: none; }
}

@media (max-width: 520px) {
  .schedule-setup-dashboard { padding: 12px; }
  .schedule-readiness-grid { grid-template-columns: 1fr; }
  .schedule-readiness-card { min-height: 76px; }
  .schedule-readiness-table > div { grid-template-columns: 25px minmax(90px, 1fr) 76px 54px; }
}

.schedule-v2-topbar,
.schedule-v2-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.schedule-v2-topbar h3,
.schedule-v2-topbar p { margin: 0; }
.schedule-v2-topbar p { margin-top: 4px; color: #62748a; }
.schedule-v2-topbar label { display: grid; gap: 5px; min-width: 260px; color: #42566f; font-size: 12px; font-weight: 700; }
.schedule-v2-topbar select { height: 40px; border: 1px solid #bdcad8; border-radius: 5px; background: #fff; padding: 0 10px; }
.schedule-v2-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 16px; }
.schedule-v2-validation { margin: 14px 0; padding: 11px 13px; border-radius: 5px; background: #eef5fc; color: #24496f; }
.schedule-v2-filterbar { margin-bottom: 12px; }
.schedule-v2-table td small { display: block; margin-top: 3px; color: #77869a; }
.schedule-v2-unmapped { color: #b42318; font-weight: 700; }

.advisor-principles {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  margin: 14px 0;
  padding: 14px 16px;
  border-left: 4px solid #1769c2;
  background: #eef5fc;
  color: #42566f;
}

.advisor-principles strong { color: #173a61; }
.advisor-page td small { display: block; margin-top: 4px; color: #77869a; }
.advisor-period-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.advisor-members-label small { display: block; margin: 3px 0 7px; color: #77869a; font-weight: 400; }
.advisor-members-label select { min-height: 260px; padding: 8px; }
.advisor-members-label option { padding: 7px 8px; }
.advisor-dialog { width: min(680px, calc(100vw - 28px)); }
.advisor-header-actions { display: flex; align-items: end; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.advisor-import-year { width: 112px; margin: 0; }
.advisor-import-year span { display: block; margin-bottom: 4px; color: #64748b; font-size: 12px; }
.advisor-import-year input { min-height: 36px; padding: 7px 9px; }
.advisor-import-dialog { width: min(860px, calc(100vw - 28px)); }
.advisor-import-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.advisor-import-summary div { border: 1px solid #dbe4ef; padding: 12px; background: #f8fafc; border-radius: 6px; }
.advisor-import-summary small { display: block; color: #64748b; }
.advisor-import-summary strong { display: block; margin-top: 2px; color: #123d68; font-size: 24px; }
.advisor-import-messages { margin: 10px 0; color: #8a5a00; }
.advisor-import-messages ul { margin: 6px 0 0; padding-left: 20px; }
.advisor-import-ok { color: #157347; }
.advisor-import-preview { max-height: 360px; }

@media (max-width: 760px) {
  .schedule-v2-topbar { align-items: stretch; flex-direction: column; }
  .schedule-v2-topbar label { min-width: 0; width: 100%; }
  .advisor-principles { grid-template-columns: 1fr; }
  .advisor-period-grid { grid-template-columns: 1fr; }
  .advisor-header-actions { justify-content: flex-start; }
  .advisor-import-summary { grid-template-columns: 1fr; }
}

.journal-preview-heading { margin-top: 22px; }
.journal-monitor-table td small { display: block; margin-top: 4px; color: #718196; }
.journal-material-cell { min-width: 240px; }
#journalMonitorSummary span { min-height: 70px; padding: 11px 13px; border: 1px solid #dbe4ee; border-top: 3px solid #1769c2; border-radius: 5px; background: #fff; }
#journalMonitorSummary span small, #journalMonitorSummary span strong { display: block; }
#journalMonitorSummary span small { color: #6b7c90; font-size: 10px; }
#journalMonitorSummary span strong { margin-top: 5px; color: #123d68; font-size: 18px; }
.journal-official-preview { display: grid; gap: 18px; margin-top: 12px; overflow-x: auto; border: 1px solid #cfd7df; background: #eef1f4; padding: 18px; }
.official-journal-sheet { width: 794px; min-height: 1123px; margin: 0 auto; padding: 42px 44px 34px; background: #fff; color: #111; font-family: Arial, sans-serif; box-shadow: 0 2px 12px rgba(20,42,67,.12); }
.journal-letterhead { display: grid; grid-template-columns: 82px 1fr 82px; align-items: center; min-height: 100px; padding-bottom: 8px; border-bottom: 4px double #111; text-align: center; }
.journal-letterhead::after { content: ""; }
.journal-letterhead img { width: 72px; height: 72px; object-fit: contain; }
.journal-letterhead strong { display: block; color: #111; font-size: 16px; line-height: 1.3; }
.journal-letterhead strong:last-child { font-size: 19px; }
.journal-document-title { display: grid; gap: 4px; margin: 12px 0 28px; text-align: center; }
.journal-document-title strong { font-size: 17px; }
.journal-document-title span { font-size: 14px; font-weight: 700; }
.journal-document-meta { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; }
.journal-table-wrap { overflow: hidden; }
.official-journal-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 8px; }
.official-journal-table th, .official-journal-table td { height: 25px; border: 1px solid #222; padding: 3px; vertical-align: top; overflow-wrap: anywhere; }
.official-journal-table th { height: 42px; background: #fff; color: #111; text-align: center; vertical-align: middle; font-size: 8px; }
.official-journal-table th:nth-child(1) { width: 68px; }
.official-journal-table th:nth-child(2) { width: 34px; }
.official-journal-table th:nth-child(3) { width: 28px; }
.official-journal-table th:nth-child(4) { width: 65px; }
.official-journal-table th:nth-child(5) { width: 145px; }
.official-journal-table th:nth-child(6), .official-journal-table th:nth-child(7) { width: 37px; }
.official-journal-table th:nth-child(8) { width: 80px; }
.official-journal-table th:nth-child(9) { width: 95px; }
.official-journal-table td:nth-child(2), .official-journal-table td:nth-child(3), .official-journal-table td:nth-child(6), .official-journal-table td:nth-child(7) { text-align: center; }
.official-journal-table td small { display: block; margin-top: 3px; font-size: 6px; }
.journal-headmaster { width: 250px; display: grid; gap: 3px; margin: 50px 0 0 auto; font-size: 11px; }
.journal-headmaster i { height: 55px; }
.official-journal-sheet .official-report-source { margin-top: 28px; }

@media print {
  body.printing-learning-journal * { visibility: hidden !important; }
  body.printing-learning-journal .journal-official-preview,
  body.printing-learning-journal .journal-official-preview * { visibility: visible !important; }
  body.printing-learning-journal .journal-official-preview { position: absolute; inset: 0; display: block; overflow: visible; border: 0; padding: 0; background: #fff; }
  body.printing-learning-journal .official-journal-sheet { page: journal; width: 100%; min-height: 0; margin: 0; padding: 0; box-shadow: none; break-after: page; }
  body.printing-learning-journal .official-journal-sheet:last-child { break-after: auto; }
}

@page journal { size: A4 portrait; margin: 10mm; }

.control-card.bell-admin-page.active { display: grid; }
.mosque-attendance-panel { gap: 14px; }
.mosque-flow { display:none; align-items:center; gap:10px; padding:14px 16px; border:1px solid #d9e2ee; border-radius:8px; background:#f8fbff; }
.mosque-flow span { display:flex; align-items:center; gap:8px; color:#183b68; font-weight:700; white-space:nowrap; }
.mosque-flow b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:#0d5fbd; }
.mosque-flow i { flex:1; height:1px; background:#a8bfdc; }
.mosque-heading-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.mosque-toolbar { display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(150px, .55fr) auto auto; }
.mosque-toolbar label,.mosque-toolbar select { min-width:0; width:100%; }
.mosque-session-list { display:grid; border:1px solid #d9e2ee; border-radius:8px; overflow:hidden; }
.mosque-session-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, auto) auto; align-items:center; gap:16px; padding:14px 16px; border-bottom:1px solid #e4eaf1; }
.mosque-session-row:last-child { border-bottom:0; }
.mosque-session-row.inactive { opacity:.68; }
.mosque-session-row > div:first-child { display:grid; gap:3px; }
.mosque-session-row small,.mosque-session-row span { color:#68768a; }
.mosque-session-row > div:last-child { display:flex; gap:8px; justify-content:flex-end; }
.mosque-session-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.mosque-session-badges span,.mosque-session-badges b { display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border:1px solid #d9e5f2; border-radius:999px; background:#f8fbff; color:#38536f; font-size:12px; font-weight:700; }
.mosque-session-badges b.ok { border-color:#bde6ce; background:#edf9f1; color:#087f5b; }
.mosque-session-badges b.bad { border-color:#f3c5c5; background:#fff1f1; color:#b42318; }
.mosque-summary { display:grid; grid-template-columns:repeat(4,minmax(110px,1fr)); border:1px solid #d9e2ee; border-radius:8px; overflow:hidden; }
.mosque-summary span { display:grid; gap:4px; padding:12px 14px; border-right:1px solid #e4eaf1; }
.mosque-summary span:last-child { border-right:0; }
.mosque-summary small { color:#68768a; }
.mosque-summary strong { color:#123b6d; font-size:22px; }
.mosque-class-divider td { padding:9px 12px !important; color:#123b6d; background:#edf5ff; border-top:2px solid #bdd4ef; font-weight:800; }
.mosque-session-editor { margin:16px 0; padding:20px; border:1px solid #cfdbea; border-radius:8px; background:#f8fbff; box-shadow:0 8px 24px rgba(15,38,69,.08); }
.mosque-session-editor form { display:grid; width:100%; max-height:none; overflow:visible; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:16px; padding:0; background:transparent; box-shadow:none; }
.mosque-session-editor label { display:grid; gap:6px; color:#4c5b6e; font-size:12px; font-weight:700; }
.mosque-editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; grid-column:1 / -1; }
.mosque-session-editor .wide,.mosque-time-group,.mosque-repeat-note,.mosque-form-status,.mosque-session-editor .student-edit-actions { grid-column:1 / -1; }
.mosque-session-editor label span { font-size:13px; }
.mosque-session-editor input,.mosque-session-editor select { min-height:46px; font-size:15px; padding:10px 12px; }
.mosque-repeat-note { margin:0; padding:12px 14px; border:1px solid #cfe0f5; border-radius:8px; background:#f4f9ff; color:#315371; font-weight:700; }
.mosque-time-group { display:grid; grid-template-columns:repeat(3,minmax(170px,1fr)); gap:14px; margin:0; padding:16px; border:1px solid #d9e2ee; border-radius:8px; }
.mosque-time-group legend { padding:0 7px; color:#183b68; font-size:14px; font-weight:800; }
.mosque-time-group label { display:grid; gap:6px; }
@media (max-width:900px) {
  .mosque-flow { align-items:flex-start; flex-direction:column; }
  .mosque-flow i { display:none; }
  .mosque-toolbar,.mosque-session-row,.mosque-summary { grid-template-columns:1fr 1fr; }
  .mosque-session-row > div:first-child { grid-column:1 / -1; }
  .mosque-session-badges { justify-content:flex-start; }
  .mosque-time-group { grid-template-columns:1fr; }
}
@media (max-width:1200px) and (min-width:901px) {
  .mosque-flow { display:none; grid-template-columns:1fr 1fr; }
  .mosque-flow i { display:none; }
  .mosque-summary { grid-template-columns:repeat(4,minmax(110px,1fr)); }
}
@media (max-width:600px) {
  .mosque-toolbar,.mosque-summary,.mosque-session-editor form { grid-template-columns:1fr; }
  .mosque-summary span { border-right:0; border-bottom:1px solid #e4eaf1; }
}

.gradebook-settings { display:grid; grid-template-columns:1fr 1fr 180px auto; gap:12px; align-items:end; padding:15px; border:1px solid #dbe4ee; border-radius:7px; background:#f8fbff; }
.gradebook-settings label,.gradebook-filterbar label { display:grid; gap:6px; color:#52677e; font-size:12px; font-weight:700; }
.gradebook-settings input,.gradebook-settings select { min-height:40px; border:1px solid #cbd8e5; border-radius:5px; background:#fff; padding:8px 10px; }
.gradebook-summary { display:grid; grid-template-columns:repeat(3,1fr); margin-top:14px; border:1px solid #dbe4ee; border-radius:7px; overflow:hidden; }
.gradebook-summary span { display:grid; gap:3px; padding:12px 15px; border-right:1px solid #dbe4ee; }.gradebook-summary span:last-child{border-right:0}.gradebook-summary small{color:#66788b}.gradebook-summary strong{color:#123f70;font-size:22px}
.gradebook-filterbar { grid-template-columns:minmax(180px,260px) minmax(180px,260px); margin-top:14px; }
.gradebook-admin-table td { vertical-align:middle; }
@media(max-width:800px){.gradebook-settings{grid-template-columns:1fr 1fr}.gradebook-filterbar{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gradebook-settings,.gradebook-filterbar,.gradebook-summary{grid-template-columns:1fr}.gradebook-summary span{border-right:0;border-bottom:1px solid #dbe4ee}}

/* Shared compact columns for Master Jam and Bel Sekolah. */
.admin-simple-columns { display:grid; gap:10px; margin-top:18px; }
.admin-simple-column { border:1px solid #d7e1ec; border-radius:7px; background:#fff; overflow:hidden; }
.admin-simple-column > summary { min-height:72px; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; list-style:none; user-select:none; }
.admin-simple-column > summary::-webkit-details-marker { display:none; }
.admin-simple-column > summary::after { content:"›"; width:28px; color:#0b5da9; font-size:28px; line-height:1; text-align:center; transform:rotate(90deg); transition:transform .18s ease; }
.admin-simple-column[open] > summary::after { transform:rotate(-90deg); }
.admin-simple-column > summary:hover { background:#f7faff; }
.admin-simple-column > summary > span:first-child { display:grid; flex:1; gap:4px; min-width:0; }
.admin-simple-column > summary strong { color:#172b43; font-size:16px; }
.admin-simple-column > summary small { color:#68798d; font-size:12px; font-weight:400; }
.admin-column-summary { min-width:max-content; border:1px solid #cbd9e8; border-radius:5px; padding:7px 10px; background:#f3f8fd; color:#145b9d; font-size:12px; font-weight:700; }
.admin-column-body { padding:18px; border-top:1px solid #e0e7ef; background:#fbfcfe; }
.admin-column-body .bell-tool-form,.admin-column-body .schedule-master-form,.admin-column-body .bell-event-form,.admin-column-body .bell-inline-form { margin-top:0; }
.admin-column-body > .attendance-report-status:last-child { margin-bottom:0; }
#masterJamColumns .bell-tool-section,#bellSchoolColumns .bell-admin-section { margin:0; border:0; padding:0; background:transparent; }
.bell-exam-form { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; align-items:end; }
.bell-exam-form label { display:grid; gap:6px; color:#52677e; font-size:12px; font-weight:700; }
.bell-exam-form input { width:100%; min-height:40px; border:1px solid #cbd8e5; border-radius:5px; background:#fff; padding:8px 10px; }
.bell-exam-form .primary { min-height:40px; }
.bell-exam-list { display:grid; gap:8px; margin-top:12px; }
.bell-exam-list > p { margin:0; color:#68798d; }
.bell-exam-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid #d7e1ec; border-radius:6px; background:#fff; }
.bell-exam-item div { display:grid; gap:4px; min-width:0; }
.bell-exam-item span { color:#68798d; font-size:12px; }
@media(max-width:760px){.admin-simple-column > summary{align-items:flex-start;flex-wrap:wrap}.admin-column-summary{order:2}.admin-simple-column > summary::after{margin-left:auto}.admin-column-body{padding:14px}}
@media(max-width:1000px){.bell-exam-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bell-exam-form{grid-template-columns:1fr}.bell-exam-item{align-items:flex-start;flex-direction:column}}

/* Portal Dokumen & Layanan */
.portal-catalog-page { padding: 0; overflow: hidden; }
.announcement-admin-page { padding: 22px; }
.announcement-admin-layout { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr); gap: 18px; align-items: start; }
.announcement-compose-form, .announcement-history-panel { border: 1px solid #dce4ee; background: #fff; padding: 18px; border-radius: 7px; }
.announcement-compose-form { display: grid; gap: 14px; }
.announcement-compose-form label { display: grid; gap: 6px; color: #536276; font-size: 12px; font-weight: 700; }
.announcement-compose-form textarea { resize: vertical; min-height: 116px; }
.announcement-target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.announcement-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.announcement-admin-list { display: grid; gap: 10px; }
.announcement-admin-item { border: 1px solid #e2e8f0; border-left: 4px solid #1768c4; padding: 14px; border-radius: 6px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.announcement-admin-item.is-draft { border-left-color: #d99a12; }
.announcement-admin-item h4 { margin: 0 0 5px; color: #17365d; font-size: 15px; }
.announcement-admin-item p { margin: 0; white-space: pre-line; color: #4f5e70; line-height: 1.45; }
.announcement-admin-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: #728095; font-size: 11px; }
.announcement-attachment-field small { display: block; margin-top: 5px; color: #718096; }
.announcement-attachment-preview { display: flex; align-items: center; gap: 12px; border: 1px solid #dbe5ef; padding: 10px; background: #f8fbff; }
.announcement-attachment-preview img { width: 92px; height: 64px; object-fit: cover; border-radius: 4px; }
.announcement-attachment-preview span { display: grid; gap: 3px; min-width: 0; }
.announcement-attachment-preview strong { overflow-wrap: anywhere; }
.announcement-file-icon { width: 52px; height: 52px; display: grid !important; place-items: center; background: #e8f1fb; color: #0d4f91; font-size: 11px; font-weight: 800; }
.announcement-attachment-link { display: inline-flex; margin-top: 10px; color: #075fb5; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
@media (max-width: 980px) { .announcement-admin-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .announcement-target-grid { grid-template-columns: 1fr; } .announcement-admin-item { grid-template-columns: 1fr; } }
.portal-catalog-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 24px 26px 20px; border-bottom: 1px solid #dce4ee; }
.portal-catalog-head h2 { margin: 2px 0 5px; }
.portal-catalog-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 26px 0; }
.portal-summary-item { border: 1px solid #dce4ee; padding: 14px 16px; background: #f8fafc; border-radius: 6px; }
.portal-summary-item strong { display: block; color: #07396d; font-size: 24px; }
.portal-summary-item span { color: #66758a; font-size: 12px; }
.portal-catalog-filters { display: grid; grid-template-columns: minmax(240px, 1fr) 180px 180px; gap: 12px; padding: 18px 26px; }
.portal-catalog-filters label, .portal-form-grid label { display: grid; gap: 6px; color: #536276; font-size: 12px; font-weight: 700; }
.portal-catalog-table td:first-child strong { display: block; color: #122b49; }
.portal-catalog-table td:first-child small { display: block; max-width: 460px; color: #718096; margin-top: 4px; }
.portal-catalog-table { width:100%; min-width:960px; table-layout:fixed; border-collapse:collapse; }
.portal-catalog-table th,.portal-catalog-table td { padding:12px 10px; border-bottom:1px solid #e1e7ef; vertical-align:middle; text-align:left; }
.portal-catalog-table th:nth-child(1){width:30%}.portal-catalog-table th:nth-child(2){width:14%}.portal-catalog-table th:nth-child(3){width:13%}.portal-catalog-table th:nth-child(4){width:10%}.portal-catalog-table th:nth-child(5){width:13%}.portal-catalog-table th:nth-child(6){width:20%}
.portal-status-chip { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.portal-status-chip.published { color: #08783d; background: #e4f7ec; }
.portal-status-chip.draft { color: #8b5b00; background: #fff1d3; }
.portal-row-actions { display: flex; gap: 6px; white-space: nowrap; }
.portal-row-actions button, .portal-row-actions a { border: 1px solid #c9d5e3; background: #fff; color: #0a4c8e; padding: 7px 9px; border-radius: 5px; text-decoration: none; cursor: pointer; }
.portal-catalog-dialog { width: min(680px, calc(100vw - 30px)); border: 0; border-radius: 8px; padding: 0; box-shadow: 0 20px 60px #071c3540; }
.portal-catalog-dialog::backdrop { background: #071c3570; }
.portal-catalog-dialog form { padding: 24px; }
.portal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-form-grid .wide { grid-column: 1 / -1; }
.portal-form-grid textarea { resize: vertical; }
.dialog-title, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dialog-title { margin-bottom: 18px; }
.dialog-title h3 { margin: 3px 0 0; }
.dialog-actions { margin-top: 20px; }
.portal-catalog-page > .form-status { padding: 0 26px 20px; }
@media (max-width: 820px) {
  .portal-catalog-head { align-items:flex-start; flex-direction:column; }
  .portal-catalog-summary, .portal-catalog-filters { grid-template-columns: 1fr; }
  .portal-form-grid { grid-template-columns: 1fr; }
  .portal-form-grid .wide { grid-column: auto; }
}
.exam-operation-form{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:18px 0;padding:16px;border:1px solid #d8e3ee;background:#f8fafc;border-radius:6px}.exam-operation-form label{display:grid;gap:6px;color:#52677e;font-size:12px;font-weight:700}.exam-operation-form label.wide{grid-column:span 2}.exam-operation-form input,.exam-operation-form select{min-height:40px;width:100%;border:1px solid #cbd8e5;border-radius:5px;background:#fff;padding:8px 10px}.exam-operation-form button{align-self:end;min-height:40px}.exam-operation-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d8e3ee;border-radius:6px;overflow:hidden;margin:14px 0}.exam-operation-summary span{display:grid;gap:4px;padding:14px;border-right:1px solid #d8e3ee}.exam-operation-summary span:last-child{border-right:0}.exam-operation-summary small{color:#6b7c90}.exam-operation-summary strong{color:#123d68;font-size:22px}.exam-operation-list{display:grid;gap:10px}.exam-operation-card{border:1px solid #d8e3ee;border-radius:6px;background:#fff;padding:14px}.exam-operation-card header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.exam-operation-card header div{display:grid;gap:3px}.exam-operation-card header small,.exam-operation-meta small,.exam-operation-counts small{color:#718196}.exam-session-badge{display:grid;place-items:center;min-width:58px;min-height:42px;border-radius:5px;background:#e7f0fb;color:#135a9f;font-weight:800}.exam-status{padding:6px 9px;border-radius:999px;background:#edf1f5;color:#536478;font-size:11px}.exam-status.running{background:#e6f6ee;color:#087f5b}.exam-status.finished{background:#e7f0fb;color:#135a9f}.exam-operation-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;padding:12px 0;border-block:1px solid #e4ebf2}.exam-operation-meta span{display:grid;gap:3px}.exam-operation-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.exam-operation-counts span{display:grid;gap:2px;padding:9px;background:#f7f9fb;border-radius:5px}.exam-operation-counts span.warning{background:#fff4e5;color:#a35b00}.exam-operation-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}@media(max-width:850px){.exam-operation-form{grid-template-columns:1fr 1fr}.exam-operation-form label.wide{grid-column:1/-1}}@media(max-width:560px){.exam-operation-form{grid-template-columns:1fr}.exam-operation-form label.wide{grid-column:auto}.exam-operation-summary{grid-template-columns:1fr 1fr}.exam-operation-summary span:nth-child(2){border-right:0}.exam-operation-card header{grid-template-columns:auto 1fr}.exam-status{grid-column:1/-1;width:max-content}.exam-operation-meta{grid-template-columns:1fr}.exam-operation-actions{display:grid;grid-template-columns:1fr}.exam-operation-actions button{width:100%}}
.exam-import-panel{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;align-items:center;gap:10px;margin:16px 0;padding:14px;border:1px solid #bfd4ea;border-radius:6px;background:#f2f7fc}.exam-import-panel div{display:grid;gap:4px}.exam-import-panel small{color:#63778c}.exam-import-panel label{margin:0;cursor:pointer;text-align:center}@media(max-width:760px){.exam-import-panel{grid-template-columns:1fr}.exam-import-panel .compact-button{width:100%}}

.tka-bank-page{display:none;gap:16px}.tka-bank-page.active{display:grid}.tka-safety-note{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid #bed8cd;border-left:4px solid #16845f;background:#f3faf7;color:#275b49}.tka-safety-note span{color:#5e716a}.tka-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d7e1eb;border-radius:6px;overflow:hidden}.tka-summary span{display:grid;gap:3px;padding:13px 16px;border-right:1px solid #d7e1eb;background:#fff}.tka-summary span:last-child{border-right:0}.tka-summary small{color:#687b90}.tka-summary strong{font-size:1.35rem;color:#123f70}.tka-workflow{display:grid;border:1px solid #d7e1eb;border-radius:6px;overflow:hidden}.tka-workflow>details{border-bottom:1px solid #d7e1eb;background:#fff}.tka-workflow>details:last-child{border-bottom:0}.tka-workflow>details>summary{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;cursor:pointer;list-style:none}.tka-workflow>details>summary::-webkit-details-marker{display:none}.tka-workflow>details>summary>span{display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:11px}.tka-workflow>details>summary b{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e5f0fc;color:#0c5daf}.tka-workflow>details>summary small{color:#718094}.tka-workflow>details>summary i{width:9px;height:9px;border-right:2px solid #567;border-bottom:2px solid #567;transform:rotate(45deg)}.tka-workflow>details[open]>summary i{transform:rotate(225deg)}.tka-step-body{padding:16px 18px 20px;border-top:1px solid #e4eaf0;background:#f8fafc}.tka-form-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.tka-form-grid label{display:grid;gap:6px;color:#52677e;font-size:12px;font-weight:700}.tka-form-grid label.wide,.tka-package-selection.wide{grid-column:span 2}.tka-form-grid input,.tka-form-grid select,.tka-form-grid textarea,.tka-review-toolbar input,.tka-review-toolbar select{width:100%;min-height:40px;border:1px solid #c7d5e3;border-radius:5px;background:#fff;padding:8px 10px;color:#172b42}.tka-form-grid textarea{resize:vertical}.tka-form-grid button{align-self:end;min-height:40px}.tka-source-list,.tka-question-list{display:grid;gap:9px;margin-top:13px}.tka-source-row,.tka-question-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 14px;border:1px solid #d9e2eb;border-radius:6px;background:#fff}.tka-source-row>span,.tka-question-row>span{display:grid;gap:3px}.tka-source-row small,.tka-question-row small{color:#718094}.tka-row-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.tka-license,.tka-status{display:inline-flex;width:max-content;padding:4px 7px;border-radius:4px;background:#eef2f6;color:#566579;font-size:11px;font-weight:750}.tka-license.reusable,.tka-status.approved{background:#e3f5ec;color:#08774f}.tka-status.rejected{background:#fde9e9;color:#a52b2b}.tka-status.review{background:#fff0d6;color:#8b5900}.tka-review-toolbar{display:grid;grid-template-columns:180px minmax(220px,1fr);gap:10px}.tka-review-toolbar label{display:grid;gap:5px;color:#52677e;font-size:12px;font-weight:700}.tka-question-row{grid-template-columns:auto minmax(0,1fr) auto}.tka-question-row>input{width:20px;height:20px}.tka-question-row blockquote{margin:5px 0 0;padding:7px 9px;border-left:3px solid #8fb4da;background:#f5f8fb;color:#394d63}.tka-package-selection{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #c7d5e3;background:#fff;border-radius:5px}.category-only{display:none}.tka-form-grid.is-category .category-only{display:grid}.tka-form-grid.is-category #tkaQuestionKey{background:#eef2f6}.tka-form-grid.is-category label:has(#tkaQuestionKey){opacity:.55}.tka-question-row .danger-button{min-height:34px;padding:6px 9px}.tka-source-row a{text-decoration:none}.tka-empty{padding:18px;text-align:center;color:#718094;background:#fff;border:1px dashed #c7d5e3;border-radius:6px}
@media(max-width:900px){.tka-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tka-summary{grid-template-columns:1fr 1fr}.tka-summary span:nth-child(2){border-right:0}.tka-question-row{grid-template-columns:auto minmax(0,1fr)}.tka-question-row .tka-row-actions{grid-column:2}}
@media(max-width:560px){.tka-safety-note{align-items:flex-start;flex-direction:column}.tka-form-grid,.tka-review-toolbar{grid-template-columns:1fr}.tka-form-grid label.wide,.tka-package-selection.wide{grid-column:auto}.tka-summary span{padding:10px}.tka-source-row{grid-template-columns:1fr}.tka-question-row{grid-template-columns:auto minmax(0,1fr)}.tka-row-actions{width:100%}.tka-row-actions button,.tka-row-actions a{flex:1;text-align:center}}
.exam-room-subjects{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.exam-room-subjects span{padding:5px 8px;border:1px solid #c8d9ea;border-radius:4px;background:#f4f8fc;color:#214f7b;font-size:12px;font-weight:700}.exam-participant-dialog{width:min(760px,calc(100vw - 28px))}.exam-participant-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.exam-participant-tools label{display:grid;gap:6px;color:#52677e;font-size:12px;font-weight:700}.exam-participant-tools input,.exam-participant-tools select{min-height:42px;width:100%;padding:8px 10px;border:1px solid #cbd8e5;border-radius:5px;background:#fff}.exam-participant-list{max-height:min(52vh,520px);overflow:auto;border:1px solid #d8e3ee;border-radius:6px}.exam-participant-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid #e4ebf2;cursor:pointer}.exam-participant-row:last-child{border-bottom:0}.exam-participant-row:hover{background:#f5f9fd}.exam-participant-row input{width:18px;height:18px}.exam-participant-row span{display:grid;gap:2px}.exam-participant-row small{color:#718196}.exam-participant-row b{color:#315b82;font-size:12px}@media(max-width:620px){.exam-participant-tools{grid-template-columns:1fr}.exam-participant-row{grid-template-columns:auto 1fr}.exam-participant-row b{grid-column:2}}
.exam-preparation-stage{margin:16px 0;padding:16px;border:1px solid #d8e3ee;border-radius:6px;background:#fff}.exam-schedule-board{display:grid;gap:12px}.exam-schedule-date-strip{display:flex;align-items:flex-start;gap:8px;overflow-x:auto;padding:2px 0 8px}.exam-schedule-date-strip button{display:grid;grid-template-columns:auto auto;align-items:center;gap:1px 5px;min-width:72px;padding:8px 10px;border:1px solid #cfdae6;border-radius:5px;background:#fff;color:#24425f;cursor:pointer}.exam-schedule-date-strip button small{grid-column:1/-1;color:#708195;font-size:10px;text-transform:uppercase}.exam-schedule-date-strip button strong{font-size:20px}.exam-schedule-date-strip button span{font-size:11px}.exam-schedule-date-strip button.active{border-color:#1262b3;background:#eaf3ff;color:#084d91}.exam-schedule-list{display:grid;gap:8px}.exam-schedule-list article{display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:14px;padding:12px;border:1px solid #dbe5ef;border-radius:5px;background:#f9fbfd}.exam-schedule-list article>div{display:grid;gap:4px}.exam-schedule-list article>div small{color:#708195}.exam-schedule-list article>b{padding:5px 8px;border-radius:4px;background:#e8f5ee;color:#08794d;font-size:12px}.exam-schedule-time{display:grid;grid-template-columns:auto auto;gap:1px 5px;border-right:1px solid #dbe5ef}.exam-schedule-time small{grid-column:1/-1;color:#59718a;font-size:10px}.exam-schedule-time strong{color:#0b5ca8}.exam-schedule-time i{font-style:normal;color:#61758a}.exam-selection-summary{padding:6px 9px;border-radius:4px;background:#eef4fa;color:#315b82;font-size:12px;font-weight:700}.exam-proctor-board{display:grid;gap:9px}.exam-proctor-card{padding:13px;border:1px solid #d8e3ee;border-radius:6px}.exam-proctor-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.exam-proctor-card header span{display:grid;gap:3px}.exam-proctor-card header small{color:#708195}.exam-proctor-card header>b{color:#315b82;font-size:12px}.exam-proctor-card>div{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px}.exam-proctor-card label{display:grid;gap:5px;color:#52677e;font-size:11px;font-weight:700}.exam-proctor-card select{min-height:40px;width:100%;border:1px solid #cbd8e5;border-radius:5px;background:#fff;padding:7px 9px}.exam-empty-stage{padding:18px;border:1px dashed #cbd8e5;border-radius:5px;text-align:center;color:#63788d}.exam-empty-stage p{margin:5px 0 0}.exam-proctor-stage .exam-section-heading{align-items:center}@media(max-width:1000px){}@media(max-width:680px){.exam-schedule-list article{grid-template-columns:72px 1fr}.exam-schedule-list article>b{grid-column:2;width:max-content}.exam-proctor-card header{align-items:flex-start;flex-direction:column}.exam-proctor-card>div{grid-template-columns:1fr}}
.exam-schedule-date-item{display:grid;flex:0 0 auto;overflow:hidden;border:1px solid #cfdae6;border-radius:5px;background:#fff}.exam-schedule-date-item.active{border-color:#1262b3;background:#eaf3ff;box-shadow:0 0 0 1px #1262b3}.exam-schedule-date-item>button[data-exam-schedule-date]{border:0;border-radius:0;background:transparent;align-self:stretch;height:100%}.exam-schedule-date-item.active>button[data-exam-schedule-date]{color:#084d91}.exam-schedule-date-item em{grid-column:1/-1;color:#6d8093;font-size:10px;font-style:normal}.exam-schedule-date-remove{display:block;min-width:0;width:100%;min-height:32px;padding:6px 10px;border:0;border-top:1px solid #efb8b8;border-radius:0;background:#fff3f3;color:#b42318;font-size:11px;font-weight:800;cursor:pointer}.exam-schedule-date-remove:hover{background:#ffe5e5}@media(max-width:560px){.exam-schedule-date-item{min-width:150px}}

.exam-administration-center{padding:0;overflow:hidden}.exam-administration-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid #d9e2ec}.exam-administration-heading h2{margin:2px 0 4px;font-size:24px;color:#172b40}.exam-administration-heading p{margin:0;color:#66798d}.exam-administration-heading-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.exam-workflow-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) minmax(260px,2fr) auto;align-items:end;gap:16px;padding:16px 22px;border-bottom:1px solid #d9e2ec;background:#fff}.exam-workflow-toolbar label,.exam-workflow-editor label{display:grid;gap:6px;color:#52677e;font-size:12px;font-weight:700}.exam-workflow-toolbar select,.exam-workflow-editor input,.exam-workflow-editor select{width:100%;min-height:42px;padding:8px 10px;border:1px solid #c7d4e0;border-radius:5px;background:#fff}.exam-workflow-toolbar div{display:grid;gap:4px}.exam-workflow-toolbar strong{color:#17324d}.exam-workflow-toolbar small{color:#6d7f91}.exam-workflow-editor{border-bottom:1px solid #d9e2ec;background:#f8fafc}.exam-workflow-editor summary{padding:12px 22px;color:#174a78;font-weight:700;cursor:pointer}.exam-workflow-editor form{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;padding:4px 22px 16px}.exam-workflow-editor .wide{grid-column:span 2}.exam-workflow-form-actions{display:flex;align-items:end;gap:8px;grid-column:span 2}.exam-workflow-editor .form-status{padding:0 22px 14px}.exam-administration-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:0;margin:0;padding:18px 22px;list-style:none;border-bottom:1px solid #d9e2ec;background:#f8fafc}.exam-administration-steps li{position:relative;display:grid;justify-items:center;gap:6px;color:#7c8b9b;font-size:11px;font-weight:700;text-align:center}.exam-administration-steps li:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 20px);right:calc(-50% + 20px);top:15px;height:2px;background:#ced8e2}.exam-administration-steps b{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border:2px solid #bdc9d5;border-radius:50%;background:#fff;color:#65778b}.exam-administration-steps li.completed{color:#087f5b}.exam-administration-steps li.completed b{border-color:#159365;background:#159365;color:#fff}.exam-administration-steps li.completed:not(:last-child)::after{background:#55b78f}.exam-administration-steps li.current{color:#0c579e}.exam-administration-steps li.current b{border-color:#1268bd;background:#e8f3ff;color:#0c579e}.exam-administration-steps li.attention{color:#b42318}.exam-administration-steps li.attention b{border-color:#dc3b31;background:#fff1f0;color:#b42318}.exam-administration-readiness{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #d9e2ec}.exam-administration-readiness span{display:grid;gap:3px;padding:15px 20px;border-right:1px solid #e1e8ef}.exam-administration-readiness span:last-child{border-right:0}.exam-administration-readiness small{color:#6e8092;font-weight:600}.exam-administration-readiness strong{font-size:24px;color:#183a5a}.exam-administration-readiness .green strong{color:#087f5b}.exam-administration-readiness .red strong{color:#c92a2a}.exam-administration-tabs{display:flex;gap:2px;padding:12px 22px 0;border-bottom:1px solid #d9e2ec;background:#fff}.exam-administration-tabs button{min-height:42px;padding:0 18px;border:0;border-bottom:3px solid transparent;background:transparent;color:#5d6f82;font-weight:700;cursor:pointer}.exam-administration-tabs button.active{border-color:#1268bd;color:#0c579e}.exam-administration-panel{display:none;padding:20px 22px}.exam-administration-panel.active{display:block}.exam-administration-datebar{display:grid;grid-template-columns:minmax(210px,280px) 1fr;align-items:end;gap:16px;margin-bottom:18px}.exam-administration-datebar label{display:grid;gap:6px;color:#52677e;font-size:12px;font-weight:700}.exam-administration-datebar input{min-height:42px;width:100%;padding:8px 10px;border:1px solid #c7d4e0;border-radius:5px;background:#fff}.exam-section-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px}.exam-section-heading h3{margin:2px 0 4px;color:#17324d}.exam-section-heading p{margin:0;color:#687b8e}.exam-administration-disclosure{margin:18px 0;border:1px solid #d7e1ea;border-radius:6px;background:#fff}.exam-administration-disclosure summary{padding:14px 16px;cursor:pointer;list-style:none}.exam-administration-disclosure summary span{display:grid;gap:3px}.exam-administration-disclosure summary small{color:#708195}.exam-administration-disclosure .exam-operation-form{margin:0;border:0;border-top:1px solid #e0e7ee;border-radius:0}.exam-document-actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 0}.exam-document-actions a{text-decoration:none;display:inline-flex;align-items:center}.exam-administration-result-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d8e3ee;border-radius:6px;overflow:hidden}.exam-administration-result-summary span{display:grid;gap:4px;padding:16px;border-right:1px solid #d8e3ee}.exam-administration-result-summary span:last-child{border-right:0}.exam-administration-result-summary small{color:#6f8193}.exam-administration-result-summary strong{font-size:24px;color:#183a5a}.exam-administration-result-summary span.warning{background:#fff7e8}.exam-administration-result-summary span.warning strong{color:#a55b00}@media(max-width:980px){.exam-administration-heading{align-items:flex-start;flex-direction:column}.exam-administration-heading-actions{width:100%;flex-wrap:wrap}.exam-workflow-toolbar{grid-template-columns:1fr 1fr}.exam-workflow-editor form{grid-template-columns:1fr 1fr}.exam-administration-steps{grid-template-columns:repeat(4,1fr);row-gap:14px}.exam-administration-steps li::after{display:none}}@media(max-width:620px){.exam-administration-heading,.exam-administration-panel{padding:16px}.exam-workflow-toolbar,.exam-workflow-editor form{grid-template-columns:1fr;padding-inline:16px}.exam-workflow-editor .wide,.exam-workflow-form-actions{grid-column:auto}.exam-administration-steps{padding:14px 12px;grid-template-columns:repeat(2,1fr)}.exam-administration-readiness{grid-template-columns:1fr 1fr}.exam-administration-readiness span:nth-child(2){border-right:0}.exam-administration-tabs{padding-inline:10px;overflow-x:auto}.exam-administration-tabs button{padding-inline:12px;white-space:nowrap}.exam-administration-datebar.exam-administration-result-summary{grid-template-columns:1fr 1fr}}
.exam-administration-steps li[role=button]{cursor:pointer;outline:none}.exam-administration-steps li[role=button]:focus-visible b{box-shadow:0 0 0 3px #b9dcff}.exam-administration-steps li.selected{color:#0c579e}.exam-administration-steps li.selected b{border-color:#1268bd;background:#1268bd;color:#fff}.exam-section-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.exam-workflow-gate{display:none;max-width:760px;margin:16px 0;padding:16px;border:1px solid #d8e3ee;border-left:4px solid #1268bd;border-radius:6px;background:#f5f9fd}.exam-workflow-gate h3{margin:4px 0 8px;color:#17324d}.exam-workflow-gate p:last-child{margin:0;color:#64788c}
.exam-administration-panel[data-exam-admin-panel="preparation"] [data-exam-preparation-part]{display:none}.exam-administration-center.exam-workflow-stage-schedule [data-exam-preparation-part="schedule"],.exam-administration-center.exam-workflow-stage-participants [data-exam-preparation-part="participants"],.exam-administration-center.exam-workflow-stage-proctors [data-exam-preparation-part="proctors"],.exam-administration-center.exam-workflow-stage-validation [data-exam-preparation-part="validation"],.exam-administration-center.exam-workflow-stage-publication [data-exam-preparation-part="publication"],.exam-administration-center.exam-workflow-stage-identity [data-exam-preparation-part="identity"]{display:block}
.exam-administration-panel[data-exam-admin-panel="preparation"]>.exam-workflow-editor[data-exam-preparation-part="identity"]{display:none}
@media(max-width:620px){.exam-section-heading{align-items:flex-start;flex-direction:column}.exam-section-actions{width:100%}}

.exam-document-toolbar{display:grid;grid-template-columns:minmax(210px,1fr) minmax(210px,1fr) auto auto;gap:10px;align-items:end;padding:14px;border:1px solid #d7e1ea;border-radius:6px;background:#f8fafc}.exam-document-toolbar label{display:grid;gap:5px;color:#52677e;font-size:12px;font-weight:700}.exam-document-toolbar select{min-height:42px;width:100%;padding:8px 10px;border:1px solid #c7d4e0;border-radius:5px;background:#fff}.exam-document-catalog{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:8px;margin:14px 0}.exam-document-catalog button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 9px;align-items:center;min-height:66px;padding:10px;border:1px solid #d5e0ea;border-radius:6px;background:#fff;color:#21384e;text-align:left;cursor:pointer}.exam-document-catalog button:hover,.exam-document-catalog button.active{border-color:#176abc;background:#f2f7fc;box-shadow:inset 0 0 0 1px #176abc}.exam-document-catalog button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:5px;background:#eaf2fb;color:#0e5ea9;font-size:18px}.exam-document-catalog strong{font-size:12px}.exam-document-catalog small{color:#708195;font-size:10px}.exam-document-preview{max-height:760px;overflow:auto;padding:18px;border:1px solid #ccd7e1;border-radius:6px;background:#e8edf2}.exam-document-sheet{width:min(100%,780px);min-height:1060px;margin:0 auto 18px;padding:28px 32px;background:#fff;color:#111;box-shadow:0 2px 10px #27384921;font-family:Arial,sans-serif}.exam-document-title{text-align:center;margin:14px 0}.exam-document-title h3{margin:0 0 4px;font-family:"Times New Roman",serif;font-size:18px;letter-spacing:0}.exam-document-title strong{font-size:12px}.exam-document-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin:12px 0;font-size:11px}.exam-document-meta span{display:grid;grid-template-columns:100px 8px 1fr}.exam-document-meta em{font-style:normal}.exam-document-table{width:100%;border-collapse:collapse;font-size:9px}.exam-document-table th,.exam-document-table td{height:26px;padding:4px;border:1px solid #333;text-align:center}.exam-document-table th{background:#edf1f5;font-size:8px}.exam-document-table .student-name{text-align:left}.exam-document-table .signature-cell{min-width:55px}.exam-document-signature{display:grid;width:220px;margin:24px 0 0 auto;font-size:10px;text-align:center}.exam-document-signature i{height:54px}.exam-minutes-copy{font-family:"Times New Roman",serif;font-size:12px;line-height:1.6}.exam-minutes-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}.exam-minutes-copy dl div{display:grid;grid-template-columns:1fr 90px;border-bottom:1px dotted #555}.exam-minutes-copy dd{margin:0}.exam-writing-lines{height:110px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 25px,#777 26px)}.exam-proctor-signatures{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:24px;text-align:center}.exam-proctor-signatures span{display:grid}.exam-proctor-signatures i{height:58px}.exam-participant-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.exam-participant-cards article{min-height:150px;padding:12px;border:1px dashed #222}.exam-participant-cards article>strong,.exam-participant-cards article>b{display:block;text-align:center}.exam-participant-cards article>b{margin:5px 0 9px}.exam-participant-cards dl{margin:0;font-size:10px}.exam-participant-cards dl div{display:grid;grid-template-columns:86px 1fr;margin:4px 0}.exam-participant-cards dd{margin:0;font-weight:700}.exam-room-sign{display:grid;place-items:center;min-height:560px;text-align:center}.exam-room-sign small{font-size:22px}.exam-room-sign strong{font-size:72px;color:#083c70}.exam-room-sign span{font-size:28px;font-weight:700}.exam-room-sign b{font-size:24px}.exam-desk-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.exam-desk-labels article{display:grid;place-items:center;min-height:92px;padding:7px;border:1px dashed #222;text-align:center}.exam-desk-labels article>b{font-size:22px;color:#0b4f8a}.exam-desk-labels article>strong{font-size:10px}.exam-desk-labels article>span,.exam-desk-labels article>small{font-size:8px}.exam-rules-list{margin:18px 20px;padding-left:20px;font-family:"Times New Roman",serif;font-size:12px;line-height:1.8}
@media(max-width:1100px){.exam-document-catalog{grid-template-columns:repeat(3,1fr)}.exam-document-toolbar{grid-template-columns:1fr 1fr}.exam-document-toolbar button{width:100%}}@media(max-width:620px){.exam-document-catalog{grid-template-columns:1fr 1fr}.exam-document-toolbar{grid-template-columns:1fr}.exam-document-sheet{min-width:720px}.exam-document-preview{padding:8px}}

.assessment-review-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:16px 0}.assessment-review-toolbar label{min-width:210px}.assessment-review-toolbar span{color:#475569;font-weight:700}.assessment-review-list{display:grid;gap:10px}.assessment-review-card{border:1px solid #dbe3ef;background:#fff;padding:16px;border-radius:6px}.assessment-review-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.assessment-review-card header div,.assessment-review-meta span{display:grid;gap:3px}.assessment-review-card small{color:#64748b}.assessment-review-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.assessment-review-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}.assessment-review-actions input{flex:1 1 260px;min-width:0}.assessment-review-note{padding:10px 12px;border-left:3px solid #d97706;background:#fff7ed}.assessment-review-questions{display:grid;gap:8px;max-height:360px;overflow:auto;padding:12px 0 0;margin:0;list-style:none}.assessment-review-questions li{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:10px;background:#f8fafc;border:1px solid #e2e8f0}.assessment-review-questions li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#dbeafe;color:#1d4ed8;font-weight:800}.assessment-review-questions li div{display:grid;gap:4px}.gradebook-status.pending{background:#fff7ed;color:#b45309}.gradebook-status.revision{background:#fef2f2;color:#b91c1c}.gradebook-status.approved{background:#ecfdf5;color:#047857}@media(max-width:720px){.assessment-review-toolbar,.assessment-review-card header{align-items:stretch;flex-direction:column}.assessment-review-meta{grid-template-columns:1fr}}
.assessment-review-preview{display:grid;gap:12px;margin-top:16px;padding:16px;border:1px solid #c9d8e8;border-radius:7px;background:#f5f8fc}.assessment-review-preview>header{align-items:center}.assessment-review-preview>header span{display:grid;gap:2px}.assessment-review-preview>header small{text-transform:uppercase;letter-spacing:.06em}.assessment-review-preview>header>b{color:#0d5aa7}.assessment-review-progress{height:6px;overflow:hidden;border-radius:999px;background:#dce5ef}.assessment-review-progress span{display:block;height:100%;background:#1768bd}.assessment-review-question-card{display:grid;gap:16px;min-height:330px;padding:20px;border:1px solid #d4deea;border-radius:7px;background:#fff}.assessment-review-question-heading{display:flex;justify-content:space-between;gap:10px;color:#52677e;font-size:12px;font-weight:800}.assessment-review-question-card h3{margin:0;color:#172f49;font-size:18px;line-height:1.45}.assessment-review-options{display:grid;gap:9px}.assessment-review-option{display:block}.assessment-review-option input{position:absolute;opacity:0}.assessment-review-option span{display:flex;align-items:center;gap:11px;min-height:48px;padding:10px 12px;border:1px solid #cfdbe7;border-radius:6px;color:#263e57}.assessment-review-option span b{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#e7f0fa;color:#145c9e}.assessment-review-structured{display:grid;gap:8px}.assessment-review-structured label{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,.8fr);align-items:center;gap:12px;padding:10px;border:1px solid #d6e0ea;border-radius:6px}.assessment-review-structured select,.assessment-review-essay{width:100%;border:1px solid #cbd7e3;border-radius:6px;padding:10px;background:#f8fafc;color:#536478}.assessment-review-question-card aside{display:grid;gap:3px;padding:11px 13px;border-left:4px solid #16815c;background:#eef9f4}.assessment-review-question-card aside strong{color:#075d42}.assessment-review-media{display:grid;gap:6px;margin:0;padding:10px;border:1px solid #d8e2ec;border-radius:6px;background:#f8fafc}.assessment-review-media img,.assessment-review-media video{display:block;width:100%;max-height:420px;object-fit:contain;background:#edf2f7}.assessment-review-media audio{width:100%}.assessment-review-media-file{display:grid;gap:3px;padding:12px;border:1px solid #a9c8e8;border-radius:6px;background:#edf5fd;color:#115aa2;text-decoration:none}.assessment-review-question-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}.assessment-review-question-nav>div{display:flex;justify-content:center;gap:6px;overflow-x:auto;padding:4px}.assessment-review-question-nav>div button{flex:0 0 34px;height:34px;border:1px solid #b8c9da;border-radius:5px;background:#fff;color:#315675;font-weight:800}.assessment-review-question-nav>div button.active{border-color:#1768bd;background:#1768bd;color:#fff}@media(max-width:720px){.assessment-review-question-card{padding:14px;min-height:280px}.assessment-review-structured label{grid-template-columns:1fr}.assessment-review-question-nav{grid-template-columns:1fr 1fr}.assessment-review-question-nav>div{grid-column:1/-1;grid-row:1}.assessment-review-question-nav>.compact-button{width:100%}}

.assessment-grade-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}.assessment-grade-tabs button{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:10px 14px;border:1px solid #cbd7e4;border-radius:7px;background:#fff;color:#415a73;font-weight:800;cursor:pointer}.assessment-grade-tabs button b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border-radius:50%;background:#eaf0f6;color:#34536f}.assessment-grade-tabs button.active{border-color:#1268bd;background:#edf5ff;color:#0b58a4;box-shadow:inset 0 -3px #1268bd}.assessment-grade-tabs button.active b{background:#1268bd;color:#fff}.assessment-grade-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px;border:1px solid #d7e1eb;border-radius:7px;overflow:hidden;background:#fff}.assessment-grade-summary span{display:grid;gap:3px;padding:13px 15px;border-right:1px solid #dfe7ef}.assessment-grade-summary span:last-child{border-right:0}.assessment-grade-summary small{color:#6b7e91;font-weight:700}.assessment-grade-summary strong{font-size:22px;color:#1a3d5f}.assessment-grade-summary .amber strong{color:#a25a00}.assessment-grade-summary .red strong{color:#b42318}.assessment-grade-summary .green strong{color:#087f5b}.assessment-review-toolbar{align-items:end}.assessment-review-toolbar .assessment-review-search{flex:1 1 360px}.assessment-review-toolbar input,.assessment-review-toolbar select{width:100%;min-height:42px;padding:8px 11px;border:1px solid #c7d4e0;border-radius:6px;background:#fff}.assessment-empty-state{display:grid;justify-items:center;gap:5px;padding:38px 20px;border:1px dashed #c4d2e0;border-radius:7px;background:#f8fafc;text-align:center}.assessment-empty-state strong{color:#23415f}.assessment-empty-state p{margin:0;color:#6c7f92}.assessment-student-preview{width:min(100%,900px);margin:16px auto 0;padding:14px;border:1px solid #c9d8e8;border-radius:8px;background:#f2f6fb}.assessment-student-preview .assessment-run-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border-radius:7px;background:#173f70;color:#fff}.assessment-run-header span{display:grid;gap:3px;min-width:0}.assessment-run-header small{color:#dbeafe}.assessment-run-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}.assessment-run-header>b{padding:7px 10px;border-radius:5px;background:#fff;color:#173f70;font-size:12px}.assessment-student-preview .assessment-exam-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;border:1px solid #d4deea;border-radius:7px;overflow:hidden;background:#fff}.assessment-exam-meta>span{display:grid;gap:3px;padding:10px 12px;border-right:1px solid #dce5ee}.assessment-exam-meta>span:last-child{border-right:0}.assessment-exam-meta small{color:#718297;font-weight:700}.assessment-exam-meta strong{color:#203b58}.assessment-exam-meta .secure strong{color:#087f5b}.assessment-student-preview .assessment-progress{height:6px;margin:10px 0 14px;overflow:hidden;border-radius:999px;background:#d9e4ef}.assessment-student-preview .assessment-progress span{display:block;height:100%;background:#1768bd}.assessment-student-preview .student-question-page-form{display:grid;gap:14px;width:min(100%,820px);margin:0 auto}.assessment-student-preview .student-question-card{min-height:330px;padding:20px;border:1px solid #d4deea;border-radius:8px;background:#fff;box-shadow:0 5px 15px rgba(25,55,88,.05)}.student-question-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#64748b;font-size:12px;font-weight:800}.student-question-card h3{margin:15px 0 20px;color:#182a40;font-size:17px;line-height:1.55}.student-question-options{display:grid;gap:9px}.student-question-options label{display:block}.student-question-options input{position:absolute;opacity:0}.student-question-options span{display:flex;align-items:center;gap:11px;min-height:48px;padding:10px 12px;border:1px solid #d0dbe7;border-radius:7px;color:#263e57}.student-question-options span b{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#e7f0fa;color:#145c9e}.student-question-media{display:grid;gap:7px;margin:0 0 16px;padding:10px;border:1px solid #dce5ef;border-radius:7px;background:#f8fafc}.student-question-media img,.student-question-media video{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:6px;background:#eef3f8}.student-question-media audio{width:100%}.student-question-media figcaption{color:#64748b;font-size:12px}.student-question-media-file{display:grid;gap:3px;padding:12px;border:1px solid #9fc2ec;border-radius:7px;background:#edf5ff;color:#124f9f;text-decoration:none}.assessment-student-preview .assessment-question-navigator{padding:14px;border:1px solid #d6e0eb;border-radius:7px;background:#fff}.assessment-student-preview .assessment-navigator-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#26445f}.assessment-question-number-grid{display:grid;grid-template-columns:repeat(10,minmax(36px,1fr));gap:7px}.assessment-question-number-grid button{aspect-ratio:1;min-width:0;border:2px solid #dc3636;border-radius:6px;background:#fff;color:#c52d2d;font-weight:850}.assessment-question-number-grid button.current{outline:3px solid #173f70;outline-offset:2px}.assessment-student-preview .assessment-page-navigation{display:grid;grid-template-columns:1fr 1fr;gap:10px}.assessment-student-preview .assessment-page-navigation button{width:100%}.assessment-archive-list{display:grid;gap:8px}.assessment-archive-list article{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid #d8e2ec;border-radius:7px;background:#fff}.assessment-archive-list article>div{display:grid;gap:3px;min-width:0}.assessment-archive-list article small{color:#6c7e91;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assessment-archive-grade{display:grid;place-items:center;width:42px;height:42px;border-radius:7px;background:#eaf2fb;color:#0e5ca8;font-weight:850}@media(max-width:720px){.assessment-grade-summary{grid-template-columns:1fr 1fr}.assessment-grade-summary span:nth-child(2){border-right:0}.assessment-review-toolbar .assessment-review-search{flex-basis:100%}.assessment-student-preview{padding:9px}.assessment-student-preview .assessment-exam-meta{grid-template-columns:1fr}.assessment-exam-meta>span{border-right:0;border-bottom:1px solid #dce5ee}.assessment-exam-meta>span:last-child{border-bottom:0}.assessment-student-preview .student-question-card{min-height:280px;padding:15px}.assessment-question-number-grid{grid-template-columns:repeat(5,1fr);gap:9px}.assessment-archive-list article{grid-template-columns:42px minmax(0,1fr)}.assessment-archive-list article>.gradebook-status{grid-column:2;justify-self:start}}@media(max-width:480px){.assessment-grade-tabs{gap:6px}.assessment-grade-tabs button{display:grid;justify-items:center;gap:5px;padding:8px}.assessment-grade-summary{grid-template-columns:1fr}.assessment-grade-summary span{border-right:0;border-bottom:1px solid #dfe7ef}.assessment-grade-summary span:last-child{border-bottom:0}.assessment-run-header strong{font-size:15px}.assessment-student-preview .assessment-page-navigation{grid-template-columns:1fr 1fr}}

@media print{body.printing-exam-administration .control-sidebar,body.printing-exam-administration .control-topbar,body.printing-exam-administration .exam-administration-heading-actions,body.printing-exam-administration .exam-administration-steps,body.printing-exam-administration .exam-administration-readiness,body.printing-exam-administration .exam-administration-tabs,body.printing-exam-administration [data-exam-admin-panel]:not([data-exam-admin-panel="execution"]){display:none!important}body.printing-exam-administration .exam-administration-center{display:block!important;border:0;box-shadow:none}body.printing-exam-administration [data-exam-admin-panel="execution"]{display:block!important;padding:0}body.printing-exam-administration .exam-operation-actions{display:none}body.printing-exam-administration .control-content{margin:0;padding:0}}
@media print{@page{size:210mm 330mm;margin:10mm}body.printing-exam-document *{visibility:hidden!important}body.printing-exam-document #examDocumentPreview,body.printing-exam-document #examDocumentPreview *{visibility:visible!important}body.printing-exam-document #examDocumentPreview{position:absolute;inset:0;max-height:none;overflow:visible;padding:0;border:0;background:#fff}body.printing-exam-document .exam-document-sheet{width:190mm;min-height:310mm;margin:0;padding:5mm;box-shadow:none;break-after:page}body.printing-exam-document .exam-document-sheet:last-child{break-after:auto}body.printing-exam-document .official-document-letterhead{grid-template-columns:20mm 1fr 20mm;min-height:27mm}body.printing-exam-document .official-document-letterhead img{width:18mm;height:21mm}}
.school-exam-schedule-form{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;margin-bottom:16px;padding:14px;border:1px solid #d9e4ee;border-radius:6px;background:#f8fafc}.school-exam-schedule-form label{display:grid;gap:6px;color:#52677e;font-size:12px;font-weight:700}.school-exam-schedule-form label.wide{grid-column:span 2}.school-exam-schedule-form input,.school-exam-schedule-form select{min-height:42px;width:100%;padding:8px 10px;border:1px solid #c7d4e0;border-radius:5px;background:#fff}.school-exam-schedule-form label small{color:#6d7f91;font-weight:600}.school-exam-grade-picker{display:grid;gap:8px;margin:0;padding:10px 12px;border:1px solid #c7d4e0;border-radius:6px;background:#fff}.school-exam-grade-picker legend{padding:0 4px;color:#52677e;font-size:12px;font-weight:800}.school-exam-grade-picker label{display:flex!important;align-items:center;gap:8px;min-height:26px;color:#17324d;font-size:13px;font-weight:800}.school-exam-grade-picker input[type=checkbox]{width:16px;height:16px;min-height:16px;accent-color:#1268bd}.school-exam-grade-picker small{color:#6d7f91;font-weight:600}.school-exam-schedule-actions{display:flex;align-items:end;gap:8px}.exam-schedule-list article.active{border-color:#1262b3;background:#eef6ff;box-shadow:inset 0 0 0 1px #1262b3}.exam-schedule-list article>div:last-child{display:flex;align-items:center;justify-content:flex-end;gap:7px}.exam-schedule-list article button{white-space:nowrap}@media(max-width:900px){.school-exam-schedule-form{grid-template-columns:1fr 1fr}.school-exam-schedule-form label.wide{grid-column:auto}}@media(max-width:620px){.school-exam-schedule-form.school-exam-schedule-actions{align-items:stretch;flex-direction:column}}
.seven-kaih-toolbar{display:flex;gap:12px;align-items:end;margin:16px 0}.seven-kaih-toolbar label{display:grid;gap:6px;color:#445469}.seven-kaih-toolbar input,.seven-kaih-toolbar select{min-width:180px;height:40px;border:1px solid #cbd7e3;border-radius:6px;padding:0 10px;background:#fff}.seven-kaih-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d9e3ed;border-radius:7px;background:#fff;margin:12px 0 18px}.seven-kaih-summary div{padding:14px;text-align:center;border-right:1px solid #e0e7ee}.seven-kaih-summary div:last-child{border-right:0}.seven-kaih-summary strong,.seven-kaih-summary span{display:block}.seven-kaih-summary strong{font-size:25px;color:#074e91}.seven-kaih-summary span{font-size:12px;color:#68788a}.seven-kaih-class-list{display:grid;gap:10px}.seven-kaih-class-row{padding:15px;border:1px solid #dbe4ec;border-radius:7px;background:#fff}.seven-kaih-class-row>div:first-child{display:flex;justify-content:space-between;margin-bottom:12px}.seven-kaih-class-row small{color:#758497}.seven-kaih-habit-metrics{display:grid;grid-template-columns:repeat(7,minmax(90px,1fr));gap:6px}.seven-kaih-habit-metrics span{display:grid;gap:2px;padding:9px;border:1px solid #e2e8ef;border-radius:5px}.seven-kaih-habit-metrics b{font-size:20px;color:#145da5}.seven-kaih-habit-metrics small{font-size:10px;line-height:1.2}.seven-kaih-habit-metrics em{font-size:10px;color:#198754;font-style:normal}@media(max-width:900px){.seven-kaih-habit-metrics{grid-template-columns:repeat(2,1fr)}.seven-kaih-summary{grid-template-columns:repeat(2,1fr)}}
.exam-bell-table-wrap{overflow:auto;border:1px solid #dbe5ef;border-radius:6px;background:#fff}.exam-bell-table{width:100%;min-width:840px;border-collapse:collapse;font-size:13px}.exam-bell-table th{padding:10px 12px;border-bottom:1px solid #dbe5ef;background:#f6f9fc;color:#38536e;text-align:left}.exam-bell-table td{padding:11px 12px;border-bottom:1px solid #e6edf4;vertical-align:middle}.exam-bell-table tr:last-child td{border-bottom:0}.exam-bell-table tr.active{background:#eef6ff}.exam-bell-table td:nth-child(1){width:58px;text-align:center}.exam-bell-table td:nth-child(2){width:115px}.exam-bell-table td:nth-child(2) b,.exam-bell-table td:nth-child(2) span{display:block}.exam-bell-table td:nth-child(2) b{color:#0b5ca8}.exam-bell-table td:nth-child(2) span{color:#687d91}.exam-bell-table td strong{display:block;color:#182f47}.exam-bell-table td small{display:block;margin-top:3px;color:#708195}.exam-bell-table td:last-child{display:flex;gap:7px;justify-content:flex-end}.status-badge.green{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#e7f6ed;color:#08794d;font-size:11px;font-weight:800}


.exam-import-panel>p{grid-column:1/-1;margin:0;color:#5b6f85;font-weight:600}

.exam-room-board-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 12px;padding:12px 14px;border:1px solid #dbe9f7;border-radius:6px;background:#f7fbff}.exam-room-board-schedule{display:grid;gap:2px}.exam-room-board-schedule strong{font-size:14px;color:#17324d}.exam-room-board-schedule small{color:#687b8e;font-size:12px}.exam-room-board-tools{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.exam-room-count{display:grid;gap:4px;color:#687b8e;font-size:12px}.exam-room-count input{width:84px;padding:6px 8px;border:1px solid #cedbe7;border-radius:5px;font:inherit;text-align:center}.exam-room-warning{margin:0 0 12px;padding:10px 13px;border:1px solid #e8b9bc;border-radius:6px;background:#fdecec;color:#a3242c;font-size:12.5px;line-height:1.5}.exam-room-warning.ok{border-color:#b6e0ca;background:#e6f6ee;color:#0f7b4f}.exam-room-table-wrap{overflow-x:auto;border:1px solid #d8e3ee;border-radius:6px}.exam-room-table{width:100%;border-collapse:collapse}.exam-room-table th{padding:9px 10px;border-bottom:2px solid #d8e3ee;color:#687b8e;font-size:11px;letter-spacing:.05em;text-transform:uppercase;text-align:left}.exam-room-table td{padding:7px 10px;border-bottom:1px solid #eef3f8;vertical-align:middle}.exam-room-row.pair-start td{border-top:2px solid #d8e3ee}.exam-room-row:nth-child(4n+3),.exam-room-row:nth-child(4n+4){background:#f9fbfd}.exam-room-col-no{width:76px}.exam-room-col-name{width:170px}.exam-room-col-fill{width:152px}.exam-room-col-action{width:152px}.exam-room-no{color:#687b8e;font-size:12px;font-weight:700;text-align:center;white-space:nowrap}.exam-room-no b{display:block;color:#17324d;font-size:15px}.exam-room-no small{display:block;color:#9aabbb;font-size:10px;font-weight:600}.exam-room-name,.exam-room-class{width:100%;padding:7px 9px;border:1px solid #cedbe7;border-radius:5px;font:inherit;color:#17324d;background:#fff}.exam-room-name:focus,.exam-room-class:focus{outline:2px solid #cfe4fa;border-color:#7fb2e4}.exam-room-fill{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}.exam-room-fill b{font-size:15px}.exam-room-fill small{display:block;color:#64788d;font-size:10.5px}.exam-room-actions{text-align:right;white-space:nowrap}.exam-room-actions .compact-button+.compact-button{margin-left:6px}.compact-button.danger{border:1px solid #e0b0b0;background:#fff;color:#b42318}.compact-button.danger:hover{background:#fdf2f2}.exam-room-empty{padding:16px;color:#93a6b8}.exam-room-board-note{margin:12px 0 0;color:#687b8e;font-size:12.5px}@media(max-width:620px){.exam-room-board-bar{align-items:flex-start;flex-direction:column}.exam-room-table td,.exam-room-table th{padding:6px 7px}}

/* Latihan Mandiri TKA — PWA Siswa & PWA Guru.
   Salinan inline ada di siswa.html dan guru.html karena kedua portal tidak memuat styles.css. */
.tka-latihan{display:grid;gap:14px;margin-top:16px}
.tka-latihan-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end;padding:14px;border:1px solid var(--line,#dce3eb);border-radius:12px;background:#fff}
.tka-latihan-filter label{display:grid;gap:6px;color:var(--muted,#6f7c8d);font-size:13px;font-weight:700}
.tka-latihan-filter select{width:100%;min-height:42px;padding:0 10px;border:1px solid var(--line,#dce3eb);border-radius:8px;background:#fff;color:inherit;font:inherit}
.tka-latihan-filter button{align-self:end;min-height:42px}
.tka-latihan-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted,#6f7c8d);font-size:13px}
.tka-latihan-progress strong{color:inherit;font-size:15px}
.tka-latihan-card{display:grid;gap:14px;padding:18px;border:1px solid var(--line,#dce3eb);border-radius:14px;background:#fff}
.tka-latihan-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted,#6f7c8d);font-size:12px}
.tka-latihan-meta span{padding:3px 9px;border-radius:999px;background:rgba(23,105,210,.09)}
.tka-latihan-figure{margin:0}
.tka-latihan-figure img{display:block;max-width:100%;height:auto;border-radius:10px}
.tka-latihan-stimulus{padding:12px 14px;border-left:3px solid var(--blue,#1769d2);border-radius:0 10px 10px 0;background:rgba(23,105,210,.06);line-height:1.6;white-space:pre-line}
.tka-latihan-prompt{margin:0;font-size:17px;line-height:1.5}
.tka-latihan-options{display:grid;gap:10px}
.tka-latihan-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line,#dce3eb);border-radius:10px;background:#fff;cursor:pointer}
.tka-latihan-option input{margin-top:3px}
.tka-latihan-option span{display:flex;gap:8px;line-height:1.5}
.tka-latihan-option b{min-width:18px}
.tka-latihan-option.is-key{border-color:#12835f;background:rgba(18,131,95,.1)}
.tka-latihan-option.is-chosen:not(.is-key){border-color:#c53e4b;background:rgba(197,62,75,.08)}
.tka-latihan-structured{display:grid;gap:10px}
.tka-latihan-structured label{display:grid;gap:6px}
.tka-latihan-structured select{width:100%;min-height:40px;padding:0 10px;border:1px solid var(--line,#dce3eb);border-radius:8px;background:#fff;font:inherit}
.tka-latihan-result{display:grid;gap:6px;padding:14px;border:1px solid transparent;border-radius:12px}
.tka-latihan-result.is-correct{border-color:#12835f;background:rgba(18,131,95,.1)}
.tka-latihan-result.is-wrong{border-color:#c53e4b;background:rgba(197,62,75,.08)}
.tka-latihan-result p{margin:0;line-height:1.55}
.tka-latihan-actions{display:flex;flex-wrap:wrap;gap:10px}
.tka-latihan-actions button{flex:1 1 140px}
.tka-latihan-source{margin:0;color:var(--muted,#6f7c8d);font-size:12px;line-height:1.5}
.tka-latihan-source a{color:inherit}
.tka-latihan-empty{padding:22px;text-align:center}
.kegiatan-siswa-tabs{display:flex;gap:2px;padding:12px 0 0;border-bottom:1px solid #d9e2ec;background:#fff;overflow-x:auto}
.kegiatan-siswa-tabs button{min-height:42px;padding:0 18px;border:0;border-bottom:3px solid transparent;background:transparent;color:#5d6f82;font-weight:700;cursor:pointer;white-space:nowrap}
.kegiatan-siswa-tabs button.active{border-color:#1268bd;color:#0c579e}
.kegiatan-siswa-panel{display:none;padding:18px 2px}
.kegiatan-siswa-panel.active{display:block}
.kegiatan-class-names-field[hidden]{display:none !important}
.kegiatan-class-names-field select{min-height:132px}
.kegiatan-class-names-field small{color:#6b7e91;font-weight:600}
#studentActivityParticipantClasses{min-width:170px;min-height:104px}
.kegiatan-journal-list{display:grid;gap:12px}
.kegiatan-journal-card{display:grid;gap:12px;padding:14px 16px;border:1px solid #d7e1ea;border-radius:8px;background:#fff}
.kegiatan-journal-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kegiatan-journal-card header div{display:grid;gap:3px}
.kegiatan-journal-card header small{color:#6b7e91}
.kegiatan-journal-card dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.kegiatan-journal-card dt{color:#52677e;font-weight:700}
.kegiatan-journal-card dd{margin:0;color:#26394f;white-space:pre-line}
.kegiatan-journal-photos{display:flex;flex-wrap:wrap;gap:8px}
.kegiatan-journal-photos img{width:120px;height:90px;object-fit:cover;border:1px solid #cfdae5;border-radius:6px;background:#eef3f8}
.kegiatan-assessment-table{min-width:680px}
.kegiatan-assessment-table th,.kegiatan-assessment-table td{vertical-align:top}
.kegiatan-assessment-table input[data-assessment-score]{width:76px;text-align:center;font-weight:700}
.kegiatan-assessment-table input[data-assessment-dimension]{width:64px;text-align:center}
.kegiatan-assessment-table input.is-invalid{border-color:#c62828;background:#fdecea}
.kegiatan-assessment-table textarea[data-assessment-note]{min-width:170px;min-height:40px;padding:6px 8px;border:1px solid #cfdae5;border-radius:6px;font:inherit;resize:vertical}
.kegiatan-assessment-table tr.is-published{background:#f2f8ff}
.kegiatan-assessment-predikat{font-weight:700;color:#0c579e}
.kegiatan-assessment-publish{margin:0;font-size:11px;color:#52677e}
.kegiatan-unfilled-panel{margin-top:22px;padding-top:18px;border-top:1px solid #d9e2ec}
.kegiatan-unfilled-panel .student-data-heading{margin-bottom:10px}
.kegiatan-journal-preview{margin-top:16px;overflow-x:auto;border:1px solid #cfd7df;background:#eef1f4;padding:18px}
.kegiatan-journal-preview:empty{display:none}
.kegiatan-journal-print-sheet{min-width:720px;margin:0 auto}
.kegiatan-journal-entries{display:grid;gap:14px;margin-top:12px}
.kegiatan-journal-entry{border:1px solid #b9c4cf;padding:10px 12px;background:#fff;break-inside:avoid;page-break-inside:avoid}
.kegiatan-journal-entry header{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #d4dce4;padding-bottom:5px;margin-bottom:6px;font-size:12px}
.kegiatan-journal-entry dl{display:grid;grid-template-columns:120px 1fr;gap:3px 10px;margin:0;font-size:11px}
.kegiatan-journal-entry dt{font-weight:700}
.kegiatan-journal-entry dd{margin:0;white-space:pre-line}
.kegiatan-journal-print-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.kegiatan-journal-print-photos img{width:150px;height:112px;object-fit:cover;border:1px solid #6b7c90;background:#fff}
@media print{
  body.printing-official-report .official-report-sheet.kegiatan-journal-print-sheet{min-width:0}
  body.printing-official-report .kegiatan-journal-entry{break-inside:avoid;page-break-inside:avoid}
  body.printing-official-report .kegiatan-journal-print-photos img{width:130px;height:98px}
}
@media(max-width:620px){.kegiatan-siswa-tabs{padding-inline:0}.kegiatan-siswa-tabs button{padding-inline:12px}.kegiatan-journal-card dl{grid-template-columns:1fr}.kegiatan-journal-card header{flex-direction:column;align-items:flex-start}}