:root {
  --ink: #243041;
  --muted: #64748b;
  --line: #d7e2ea;
  --paper: #ffffff;
  --soft: #f5f8fb;
  --accent: #16837b;
  --accent-dark: #0f5f5a;
  --blue: #356ac3;
  --sky: #dff2ff;
  --mint: #dff7ea;
  --lemon: #fff5cc;
  --peach: #ffe6da;
  --lavender: #eee4ff;
  --rose: #ffe3ed;
  --gold: #b88716;
  --danger: #b42318;
  --ok: #25735a;
  --shadow: 0 8px 24px rgba(36, 48, 65, 0.07);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, #ffe1e7 0 16%, #fff2bf 16% 32%, #dcf7df 32% 48%, #dff2ff 48% 64%, #e8e3ff 64% 80%, #ffe3ed 80% 100%) top / 100% 8px no-repeat,
    var(--soft);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  cursor: pointer;
  padding: 0 16px;
  font-weight: 700;
}

button:hover {
  background: var(--accent-dark);
}

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

button.secondary {
  background: #e8f4fb;
  border: 1px solid #b9dff4;
  color: var(--accent-dark);
}

button.danger {
  background: var(--rose);
  border: 1px solid #f4b6cc;
  color: var(--danger);
}

input,
select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 8px 10px;
}

input:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(53, 106, 195, 0.12);
  outline: 0;
}

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

main {
  width: min(1360px, calc(100% - 28px));
  margin: 14px auto 40px;
}

.app-header {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 226, 232, 0.95), rgba(255, 246, 206, 0.95), rgba(222, 247, 234, 0.95), rgba(224, 242, 255, 0.95), rgba(238, 228, 255, 0.95)),
    #f8fbff;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 18px;
  justify-items: center;
  min-height: 310px;
  padding: 24px max(16px, calc((100vw - 1360px) / 2));
  text-align: center;
}

.brand-block {
  align-items: center;
  display: flex;
  gap: 18px;
}

.logo-slot {
  align-items: center;
  background: white;
  border: 1px solid rgba(53, 106, 195, 0.16);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--accent);
  display: flex;
  flex: 0 0 154px;
  font-weight: 800;
  height: 154px;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}

.logo-slot img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.app-header h1 {
  font-size: clamp(30px, 4.4vw, 54px);
  letter-spacing: 0;
  line-height: 1;
  margin: 8px 0;
}

.rainbow-word span:nth-child(1) {
  color: #e53935;
}

.rainbow-word span:nth-child(2) {
  color: #fb8c00;
}

.rainbow-word span:nth-child(3) {
  color: #fdd835;
}

.rainbow-word span:nth-child(4) {
  color: #43a047;
}

.rainbow-word span:nth-child(5) {
  color: #00acc1;
}

.rainbow-word span:nth-child(6) {
  color: #1e88e5;
}

.rainbow-word span:nth-child(7) {
  color: #8e24aa;
}

.app-header p {
  margin: 0;
  color: #465568;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.header-side {
  display: grid;
  gap: 14px;
  width: min(780px, 100%);
}

.photo-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
}

.photo-strip img {
  aspect-ratio: 3 / 4;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(53, 106, 195, 0.16);
  border-radius: 8px;
  display: block;
  height: 100%;
  max-height: 260px;
  object-fit: contain;
  object-position: center;
  padding: 6px;
  transition: transform 180ms ease, box-shadow 180ms ease;
  width: 100%;
  z-index: 1;
}

.photo-strip img:hover,
.photo-strip img:focus {
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
  transform: scale(1.65);
  z-index: 5;
}

.auth-only {
  display: none;
}

.hidden {
  display: none !important;
}

body.logged-in .auth-only {
  display: grid;
}

body.logged-in .tabs.auth-only {
  display: grid;
}

body.logged-in #loginPanel {
  display: none;
}

body.staff-user .admin-only {
  display: none !important;
}

.login-panel {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-top: 14px;
  padding: 18px;
}

.login-panel {
  flex-wrap: wrap;
}

.login-panel h2,
.login-panel p {
  margin: 0;
}

.login-panel p {
  color: var(--muted);
  margin-top: 6px;
}

.login-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: 160px 220px 110px 150px;
}

.login-message,
.form-message {
  color: var(--danger);
  grid-column: 1 / -1;
  min-height: 18px;
}

.forgot-panel {
  align-items: end;
  border-top: 1px solid var(--line);
  display: grid;
  flex-basis: 100%;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 130px;
  padding-top: 14px;
}

.user-bar {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  gap: 12px;
  grid-template-columns: minmax(220px, 320px) 1fr;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px 12px;
}

.user-bar > div:last-child {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.user-bar .year-picker {
  background: #f8fafc;
  border-color: var(--line);
}

.user-bar .year-picker label {
  color: var(--muted);
}

.year-picker {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  min-width: 210px;
  padding: 14px;
}

.year-picker label {
  color: #e6fffb;
}

.summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 12px;
}

.metric {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  padding: 12px;
}

.metric:nth-child(1) {
  border-top: 4px solid #f6b3c4;
}

.metric:nth-child(2) {
  border-top: 4px solid #f1d56c;
}

.metric:nth-child(3) {
  border-top: 4px solid #8ad6ad;
}

.metric:nth-child(4) {
  border-top: 4px solid #8fcdf3;
}

.metric:nth-child(5) {
  border-top: 4px solid #c5b4f5;
}

.metric:nth-child(6) {
  border-top: 4px solid #f2a7bf;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.metric strong {
  font-size: 21px;
}

.metric.warning strong {
  color: var(--danger);
}

.metric.balance strong {
  color: var(--ok);
}

.tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin: 16px 0 0;
}

.tab-group {
  border-radius: 8px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
}

.master-tabs {
  background: transparent;
  border: 0;
}

.finance-tabs {
  background: transparent;
  border: 0;
}

.tab {
  background: var(--sky);
  border: 1px solid #b9dff4;
  color: #185a96;
  flex: 0 0 auto;
}

.tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

.tab.master {
  background: var(--mint);
  border-color: #a9dfc4;
  color: #1c6b4b;
}

.tab.master.active {
  background: #2f8f69;
  border-color: #2f8f69;
  color: white;
}

.finance-tabs .tab.admin-only {
  background: var(--lavender);
  border-color: #cab7fb;
  color: #5b3aa4;
}

.finance-tabs .tab.admin-only.active {
  background: #7256b8;
  border-color: #7256b8;
  color: white;
}

.tab[data-tab="payments"] {
  background: var(--lemon);
  border-color: #eedb89;
  color: #7a5a07;
}

.tab[data-tab="payments"].active {
  background: #b88716;
  border-color: #b88716;
  color: white;
}

.tab[data-tab="staffLeaves"] {
  background: var(--peach);
  border-color: #ffc1aa;
  color: #9a411f;
}

.tab[data-tab="staffLeaves"].active {
  background: #c75d31;
  border-color: #c75d31;
  color: white;
}

.tab[data-tab="expenses"],
.tab[data-tab="reminders"] {
  background: var(--rose);
  border-color: #f8b9cf;
  color: #9d2450;
}

.tab[data-tab="expenses"].active,
.tab[data-tab="reminders"].active {
  background: #bf3968;
  border-color: #bf3968;
  color: white;
}

.tab[data-tab="tcRecords"],
.tab[data-tab="inactiveStaff"],
.tab[data-tab="reports"],
.tab[data-tab="userManagement"] {
  background: #e5f4ff;
  border-color: #b8dff7;
  color: #225d91;
}

.tab[data-tab="tcRecords"].active,
.tab[data-tab="inactiveStaff"].active,
.tab[data-tab="reports"].active,
.tab[data-tab="userManagement"].active {
  background: #356ac3;
  border-color: #356ac3;
  color: white;
}

.tab[data-tab="userManagement"] {
  background: #fff5cc;
  border-color: #e0c55f;
  color: #745707;
}

.tab[data-tab="userManagement"].active {
  background: #a87908;
  border-color: #a87908;
  color: white;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: none;
  margin-top: 8px;
  padding: 16px;
}

.panel.active {
  display: block;
}

.section-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-head h2,
.report-grid h3 {
  margin: 0 0 6px;
}

.section-head p {
  color: var(--muted);
  margin: 0;
}

.status-note {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  margin-top: 8px !important;
  padding: 7px 10px;
}

.report-actions {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.opening-balance-field {
  min-width: 180px;
}

.form-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 12px;
}

.salary-leave-summary {
  align-self: end;
  background: var(--mint);
  border: 1px solid #9bd3b4;
  border-radius: 8px;
  color: #14532d;
  font-weight: 800;
  min-height: 40px;
  padding: 10px 12px;
}

.upload-panel {
  align-items: end;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 280px) auto auto;
  margin: 0 0 12px;
  padding: 12px;
}

.upload-panel strong {
  display: block;
  margin-bottom: 4px;
}

.upload-panel p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.upload-panel a {
  align-items: center;
  color: var(--accent-dark);
  display: inline-flex;
  font-weight: 800;
  min-height: 36px;
  text-decoration: none;
}

.file-picker {
  display: grid;
  gap: 6px;
}

.file-picker span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.file-picker input {
  background: white;
}

.upload-panel .form-message {
  grid-column: 1 / -1;
  margin: 0;
}

.leave-calendar-field {
  display: grid;
  gap: 8px;
}

.leave-calendar-field {
  grid-column: span 2;
  position: relative;
}

.leave-calendar-field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.calendar-toggle {
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  justify-content: flex-start;
  text-align: left;
}

.leave-calendar {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: none;
  gap: 4px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  left: 0;
  min-width: 320px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}

.leave-calendar-field.open .leave-calendar {
  display: grid;
}

.leave-calendar button {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-height: 32px;
  padding: 0;
}

.leave-calendar button.selected {
  background: #356ac3;
  border-color: #356ac3;
  color: white;
}

.calendar-weekday {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.student-picker {
  display: grid;
  gap: 8px;
}

.selected-student {
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  padding: 9px 10px;
}

.student-results {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  padding: 6px;
}

.student-results p {
  color: var(--muted);
  margin: 0;
  padding: 8px;
}

.student-result {
  align-items: center;
  background: #f8fbff;
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 6px;
  grid-template-columns: 64px 1fr auto;
  justify-items: start;
  min-height: 38px;
  text-align: left;
}

.student-result:hover {
  background: var(--mint);
  color: var(--ink);
}

.table-tools {
  margin-bottom: 10px;
  max-width: 420px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  overflow-x: auto;
}

.staff-master {
  margin-bottom: 18px;
}

table {
  border-collapse: collapse;
  min-width: 1120px;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  background: #edf5fb;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

tbody tr:nth-child(even) td {
  background: #fbfdff;
}

tbody tr:hover td {
  background: #f0f8f7;
}

.total-row td {
  background: #eef6fb;
  font-weight: 800;
}

td.actions {
  display: flex;
  gap: 6px;
}

td small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.empty {
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.pill {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
}

.pill.due {
  background: var(--rose);
  color: var(--danger);
}

.pill.clear {
  background: var(--mint);
  color: var(--ok);
}

.pill.paid {
  background: var(--mint);
  color: var(--ok);
}

.pill.unpaid {
  background: var(--rose);
  color: var(--danger);
}

.report-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.report-grid .wide {
  grid-column: 1 / -1;
}

.bar-row {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.bar-label {
  display: flex;
  justify-content: space-between;
}

.bar {
  background: #e6edf3;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.bar span {
  background: var(--gold);
  display: block;
  height: 100%;
  min-width: 2px;
}

.action-link {
  border-radius: 6px;
  background: var(--mint);
  color: var(--accent-dark);
  display: inline-block;
  font-weight: 800;
  padding: 9px 12px;
  text-decoration: none;
}

.receipt-print-area {
  display: none;
}

.receipt {
  background: white;
  border: 1px solid #111827;
  color: #111827;
  display: grid;
  gap: 12px;
  height: 124mm;
  margin: 0 auto 14mm;
  padding: 10mm;
  width: 190mm;
}

.receipt header {
  align-items: center;
  border-bottom: 1px solid #111827;
  display: grid;
  gap: 12px;
  grid-template-columns: 58px 1fr;
  padding-bottom: 8px;
  text-align: center;
}

.receipt header img {
  height: 58px;
  object-fit: contain;
  width: 58px;
}

.receipt h2,
.receipt p {
  margin: 0;
}

.receipt h2 {
  font-size: 24px;
}

.receipt .registration-line {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

.receipt header strong {
  display: block;
  margin-top: 4mm;
}

.receipt-meta {
  display: flex;
  justify-content: space-between;
}

.receipt table {
  border-collapse: collapse;
  min-width: 0;
  width: 100%;
}

.receipt th,
.receipt td {
  border: 1px solid #9ca3af;
  padding: 8px;
}

.receipt th {
  background: #f3f4f6;
  color: #111827;
  text-transform: none;
}

.receipt footer {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
}

.receipt.payslip {
  gap: 6px;
  height: 124mm;
  padding: 7mm;
  width: 190mm;
}

.receipt.payslip header {
  grid-template-columns: 48px 1fr;
  padding-bottom: 4px;
}

.receipt.payslip header img {
  height: 48px;
  width: 48px;
}

.receipt.payslip h2 {
  font-size: 20px;
}

.receipt.payslip th,
.receipt.payslip td {
  font-size: 11px;
  padding: 4px 5px;
}

.receipt.payslip .payslip-salary-table {
  margin-top: 12mm;
}

.receipt.payslip .payslip-salary-table thead th {
  background: #111827;
  color: white;
  text-align: center;
}

.receipt.payslip footer {
  padding-top: 6px;
}

@media (max-width: 920px) {
  .app-header,
  .brand-block,
  .login-panel,
  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .logo-slot {
    flex-basis: auto;
    height: 160px;
    width: 160px;
  }

  .summary-grid,
  .form-grid,
  .upload-panel,
  .report-grid,
  .login-form,
  .forgot-panel,
  .user-bar {
    grid-template-columns: 1fr;
  }

  .year-picker {
    width: 100%;
  }

  table {
    min-width: 760px;
  }
}

@media print {
  @page {
    margin: 8mm;
    size: A4 portrait;
  }

  body {
    background: white;
  }

  .tabs,
  form,
  .table-tools,
  button {
    display: none;
  }

  .panel {
    box-shadow: none;
    display: block;
    page-break-inside: avoid;
  }

  body.receipt-printing > *:not(.receipt-print-area) {
    display: none !important;
  }

  body.receipt-printing .receipt-print-area {
    display: block;
  }

  body.receipt-printing .receipt {
    break-after: avoid;
    margin-bottom: 14mm;
    page-break-after: avoid;
  }

  body.reminders-printing .panel {
    display: none;
  }

  body.reminders-printing #reminders {
    display: block;
  }
}