:root {
  --bg: #eef3f8;
  --surface: #ffffff;
  --line: #d8e1ec;
  --text: #162033;
  --muted: #66758a;
  --accent: #0f8b8d;
  --accent-strong: #0b6f71;
  --danger: #c2410c;
  --warn: #b45309;
  --ok: #15803d;
  --shadow: 0 16px 36px rgba(22, 32, 51, 0.11);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

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

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.loginShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #eaf7f7, #f7f4ec 48%, #edf2ff);
}

.loginPanel {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.15);
}

.primaryBtn,
.ghostBtn,
.iconBtn,
.sideAction {
  border: 0;
  min-height: 38px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
}

.primaryBtn {
  color: #fff;
  background: var(--accent);
  padding: 0 14px;
}

.primaryBtn:hover {
  background: var(--accent-strong);
}

.ghostBtn {
  background: #eef3f8;
  color: var(--text);
  padding: 0 14px;
}

.iconBtn {
  width: 38px;
  background: #eef3f8;
  color: var(--text);
}

.message {
  min-height: 20px;
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

.appShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
  background: #142235;
  color: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.brandMark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 900;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: #aec0d3;
}

.classNav {
  display: grid;
  gap: 8px;
}

.navGroup {
  display: grid;
  gap: 6px;
}

.navGroupTitle {
  margin-top: 4px;
  color: #aec0d3;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.classBtn,
.sideAction {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.classBtn.active,
.sideAction.active {
  background: #fff;
  color: #142235;
}

.sideAction {
  margin-top: 2px;
}

.sideAction strong {
  margin-left: auto;
  min-width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 139, 141, 0.2);
}

.sideAction.danger {
  margin-top: auto;
  color: #fee2e2;
}

.workspace {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
  min-height: 82px;
  padding: 18px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.topActions {
  display: flex;
  gap: 10px;
}

.panel {
  margin: 18px;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(22, 32, 51, 0.06);
  overflow: hidden;
}

.controlBar {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 170px 180px minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

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

.controlBar.reportFilters {
  grid-template-columns: 150px 150px 140px 150px minmax(220px, 1fr) 190px;
}

.sheetTarget {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheetTarget strong,
.sheetTarget span {
  display: block;
}

.sheetTarget span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sheetTarget a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.tableWrap {
  overflow: auto;
  max-height: calc(100vh - 180px);
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dataTable th,
.dataTable td {
  border-bottom: 1px solid #edf1f5;
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}

.dataTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
}

.dataTable th:nth-child(1) {
  width: 170px;
}

.dataTable th:nth-child(2) {
  width: 260px;
}

.dataTable th:nth-child(3) {
  width: 150px;
}

.dataTable select,
.dataTable input {
  min-height: 36px;
}

.trackerTable {
  min-width: 1680px;
  table-layout: fixed;
}

.trackerTable th,
.trackerTable td {
  border-right: 1px solid #edf1f5;
}

.trackerTable thead tr:first-child th {
  background: #f8e1c6;
  color: #111827;
  font-size: 15px;
  text-align: center;
}

.trackerTable thead tr:nth-child(2) th {
  top: 39px;
  background: #fff7ed;
  color: #111827;
  text-align: center;
}

.trackerTable .sttCol,
.trackerTable .sttCell {
  width: 64px;
  text-align: center;
}

.trackerTable .nameCol,
.trackerTable .nameCell {
  width: 270px;
}

.trackerTable .payCol,
.trackerTable .payCell {
  width: 160px;
}

.trackerTable .sessionHead,
.trackerTable .sessionCell {
  width: 96px;
  text-align: center;
}

.trackerTable .activeSessionCell {
  width: 240px;
  background: #f8fafc;
}

.trackerTable .sessionHead.selectedSession {
  width: 240px;
  background: #dbeafe;
}

.trackerTable .sessionHead span {
  display: block;
  font-weight: 900;
}

.trackerTable .sessionHead small {
  display: block;
  min-height: 15px;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

.trackerTitle {
  letter-spacing: 0;
}

.sttCell {
  background: #fff0dc;
  font-weight: 900;
}

.nameCell {
  font-weight: 700;
}

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

.studentNameBox strong,
.studentNameBox small {
  display: block;
}

.studentNameBox small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.studentActions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
}

.miniBtn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--accent-strong);
  font-weight: 900;
}

.miniBtn.danger {
  color: var(--danger);
}

.payCell {
  background: #f8d2d2;
  color: #7f1d1d;
  font-weight: 700;
}

.sessionCell {
  height: 58px;
  font-weight: 900;
}

.sessionEditor {
  display: grid;
  grid-template-columns: minmax(104px, 0.8fr) minmax(118px, 1fr) minmax(118px, 1fr);
  gap: 6px;
  align-items: center;
}

.sessionEditor select,
.sessionEditor input {
  min-height: 34px;
  padding: 7px 8px;
}

.markX {
  background: #dbeafe;
  color: #111827;
}

.markLate {
  background: #fef3c7;
  color: #92400e;
}

.markPermit {
  background: #86efac;
  color: #14532d;
}

.markAbsent,
.markLeave {
  background: #fee2e2;
  color: #991b1b;
}

.markAbsent {
  background: #ff3b3b;
  color: #111827;
}

.markLeave {
  background: #5ed9df;
  color: #0f172a;
}

.statusAbsent select {
  border-color: #f97316;
  background: #fff7ed;
}

.absenceList,
.auditList {
  padding: 14px;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 180px);
  overflow: auto;
}

.reportGrid {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  background: #f8fafc;
}

.reportGrid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.reportGrid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reportGrid strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.breakdownGrid {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  background: #fff;
}

.breakdownBlock {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

.breakdownBlock h3 {
  margin-bottom: 8px;
  font-size: 14px;
}

.breakdownBlock p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.breakdownRow {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #edf1f5;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.breakdownRow:first-of-type {
  border-top: 0;
}

.breakdownRow span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdownRow strong {
  color: var(--text);
}

.configHead {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.statusLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.statusLegend span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.statusLegend strong {
  color: var(--text);
}

.configWrap {
  max-height: calc(100vh - 170px);
}

.configTable {
  min-width: 1540px;
}

.configTable th:nth-child(1) {
  width: 110px;
}

.configTable th:nth-child(2) {
  width: 150px;
}

.configTable th:nth-child(3) {
  width: 150px;
}

.configTable th:nth-child(4),
.configTable th:nth-child(5) {
  width: 430px;
}

.configTable th:nth-child(6) {
  width: 150px;
}

.configTable th:nth-child(7),
.configTable th:nth-child(8),
.configTable th:nth-child(9) {
  width: 90px;
}

.absenceItem,
.auditItem {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: #fff;
}

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

.absenceMeta,
.auditItem small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.absenceEdit {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 170px auto;
  gap: 10px;
  align-items: end;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  background: #eef3f8;
  color: #475569;
  white-space: nowrap;
}

.badge.warn {
  background: #fff7ed;
  color: var(--warn);
}

.badge.ok {
  background: #ecfdf5;
  color: var(--ok);
}

.dialog {
  width: min(460px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.dialog form {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.dialog header,
.dialog footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #142235;
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 920px) {
  .appShell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  .classNav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .controlBar,
  .controlBar.reportFilters,
  .controlBar.compact,
  .absenceEdit {
    grid-template-columns: 1fr;
  }

  .sheetTarget,
  .configHead {
    align-items: stretch;
    flex-direction: column;
  }

  .reportGrid,
  .breakdownGrid {
    grid-template-columns: 1fr;
  }

  .trackerTable {
    min-width: 1480px;
  }

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

@media (max-width: 620px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topActions {
    width: 100%;
  }

  .topActions .primaryBtn {
    flex: 1;
  }

  .panel {
    margin: 10px;
  }

  .classNav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}