/* ==========================================================================
   Kinder Kalp Preschool - Management System
   Palette and typography taken from kinderkalp.com
   ========================================================================== */

:root {
  --brand:        #5a50e1;
  --brand-dark:   #433ab8;
  --brand-light:  #efedfd;
  --brand-tint:   #f6f5ff;
  --accent:       #f15a24;
  --accent-dark:  #d74817;
  --accent-light: #fdeee7;
  --yellow:       #ffd200;

  --nav-bg:       #291e63;
  --nav-bg-2:     #1d1548;
  --nav-text:     #cdc8ee;
  --nav-muted:    #928cc4;

  --ink:      #1e1e38;
  --ink-2:    #58586f;
  --ink-3:    #8e8ea6;
  --line:     #e7e4f2;
  --line-2:   #f1eff8;
  --surface:  #ffffff;
  --canvas:   #fbf9f4;

  --ok:      #12805a;
  --ok-bg:   #e4f5ee;
  --warn:    #9a6a05;
  --warn-bg: #fff6dd;
  --err:     #cc3521;
  --err-bg:  #fdeceb;
  --info:    #3f4bc4;
  --info-bg: #ecedfc;

  --radius:   12px;
  --radius-s: 8px;
  --shadow:   0 1px 2px rgba(41, 30, 99, .06), 0 4px 14px rgba(41, 30, 99, .06);
  --shadow-lg: 0 14px 44px rgba(41, 30, 99, .22);

  --sidebar-w: 236px;
  --font: "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: "Baloo 2", "Quicksand", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0;
}
h1 { font-size: 21px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0 0 10px; }
a  { color: var(--brand); }

.hidden { display: none !important; }
.muted  { color: var(--ink-3); }
.small  { font-size: 12.5px; }
.right  { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono   { font-variant-numeric: tabular-nums; }
.grow   { flex: 1; }
.strong { font-weight: 650; }

/* ==========================================================================
   Login
   ========================================================================== */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1000px 520px at 12% -12%, #ebe8fd 0%, transparent 62%),
    radial-gradient(900px 520px at 96% 112%, #ffe6d8 0%, transparent 58%),
    var(--canvas);
}

.login-card {
  width: 100%;
  max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 32px 30px;
}

.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand .mark {
  display: block;
  width: auto; height: 62px;
  margin: 0 auto 14px;
}
.login-brand h1 { font-size: 19px; }
.login-brand p  { color: var(--ink-3); font-size: 13px; margin: 3px 0 0; }

.login-hint {
  margin-top: 18px;
  padding: 11px 13px;
  background: var(--brand-tint);
  border: 1px solid #ddd8fa;
  border-radius: var(--radius-s);
  font-size: 12.5px;
  color: #443a9e;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-brand .mark {
  height: 34px; width: auto; flex: 0 0 auto;
  /* the logo is drawn for light backgrounds; lift it off the deep navy */
  background: #fff;
  padding: 4px 6px;
  border-radius: 8px;
}
.sidebar-brand .name { font-weight: 650; color: #fff; font-size: 14px; line-height: 1.25; }
.sidebar-brand .sub  { font-size: 11px; color: var(--nav-muted); }

.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--nav-muted); padding: 12px 10px 5px; font-weight: 700;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--radius-s);
  color: var(--nav-text); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
}
.nav a:hover  { background: rgba(255,255,255,.07); color: #fff; }
.nav a.active { background: var(--brand); color: #fff; font-weight: 600; }
.nav a .ico { width: 17px; text-align: center; opacity: .95; font-size: 14px; }
.nav a .pill {
  margin-left: auto;
  background: var(--accent); color: #fff;
  border-radius: 20px; padding: 0 7px;
  font-size: 11px; font-weight: 700; line-height: 17px;
}

.sidebar-foot {
  padding: 12px; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; gap: 9px;
}
.avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: grid; place-items: center;
  font-weight: 650; font-size: 13px; color: #fff;
}
.sidebar-foot .who   { min-width: 0; }
.sidebar-foot .who b  { display: block; color: #fff; font-size: 13px; font-weight: 600;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot .who span { font-size: 11px; color: var(--nav-muted); text-transform: capitalize; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 13px 24px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
.topbar .title h1 { font-size: 18px; }
.topbar .title p  { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-3); }
.topbar .actions  { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.content { padding: 20px 24px 48px; flex: 1; }

.menu-btn {
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 6px 10px;
  font-size: 17px; cursor: pointer; color: var(--ink);
}
.menu-btn:hover { background: var(--brand-tint); }

/* Hiding the menu gives the content the whole width. */
.app.nav-hidden .sidebar { display: none; }

/* ==========================================================================
   Cards, tiles, layout helpers
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head h2 { font-size: 15px; }
.card-head .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.card-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 13px 15px;
  box-shadow: var(--shadow);
}
.tile .label { font-size: 12px; color: var(--ink-3); font-weight: 550; }
.tile .value { font-size: 25px; font-weight: 700; line-height: 1.15; margin-top: 3px;
               font-variant-numeric: tabular-nums; }
.tile .foot  { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
/* A short list inside a tile: name on the left, figure on the right. */
.tile-list > div { display: flex; justify-content: space-between; gap: 10px; line-height: 1.55; }
.tile-list > div b { color: var(--ink-2, var(--ink)); font-variant-numeric: tabular-nums; }
.tile.is-accent { border-left-color: var(--accent); }
.tile.is-ok     { border-left-color: var(--ok); }
.tile.is-err    { border-left-color: var(--err); }
.tile.is-info   { border-left-color: var(--info); }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { border-color: var(--brand); }

.cols { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
.cols-3 { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; align-items: start; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 13px 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-all { grid-column: 1 / -1; }

label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
label .req { color: var(--err); margin-left: 2px; }
.field .help { font-size: 11.5px; color: var(--ink-3); }

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=email], input[type=tel], input[type=search], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-family: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(90, 80, 225, .16);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--line-2); color: var(--ink-3); cursor: not-allowed;
}
textarea { resize: vertical; min-height: 68px; }
select { appearance: none; background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' stroke='%238e8ea6' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.checkline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.checkline input { width: 15px; height: 15px; accent-color: var(--brand); }

fieldset {
  border: none; border-top: 1px solid var(--line-2);
  margin: 20px 0 0; padding: 16px 0 0;
}
fieldset legend {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--ink-3); padding: 0 8px 0 0;
}

.form-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  background: var(--surface); color: var(--ink);
  border-color: var(--line);
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover:not(:disabled) { background: var(--line-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #a82817; border-color: #a82817; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn-ghost:hover:not(:disabled) { background: var(--brand-light); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ==========================================================================
   Tables
   ========================================================================== */

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

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  padding: 9px 12px;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); white-space: nowrap;
}
table.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover { background: var(--brand-tint); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tfoot td {
  padding: 10px 12px; font-weight: 700;
  border-top: 2px solid var(--line); background: var(--brand-tint);
}
.cell-main { font-weight: 600; }
.cell-sub  { font-size: 12px; color: var(--ink-3); }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px; font-weight: 650;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-new     { background: #eeecf6; color: #55556e; border-color: #e0dcee; }
.badge-called  { background: var(--info-bg); color: var(--info); border-color: #d3d6f7; }
.badge-visit   { background: var(--warn-bg); color: var(--warn); border-color: #f5e3ae; }
.badge-ok      { background: var(--ok-bg);  color: var(--ok);   border-color: #bfe6d7; }
.badge-err     { background: var(--err-bg); color: var(--err);  border-color: #f7cfca; }
.badge-brand   { background: var(--brand-light); color: var(--brand-dark); border-color: #d6d1fa; }
.badge-plain   { background: var(--line-2); color: var(--ink-2); border-color: var(--line); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  background: var(--brand-light); color: var(--brand-dark);
  font-size: 12px; font-weight: 600;
}
.chip button {
  border: none; background: none; cursor: pointer;
  color: inherit; font-size: 14px; line-height: 1; padding: 0;
}

/* ==========================================================================
   Filters
   ========================================================================== */

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Every box starts on the same line; a note under one of them hangs
     below it instead of lifting it above the others. */
  gap: 10px 12px; align-items: start;
}
.filters .field { gap: 4px; min-width: 0; }
.filters label { font-size: 11.5px; }
.filters .field .help { font-size: 11px; line-height: 1.3; }
/* The buttons get a wider slot of their own and wrap inside it rather
   than running out of the card. */
.filters .field:has(.filter-actions) { grid-column: span 2; }
.filters .filter-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.filters .filter-actions .btn { white-space: nowrap; }

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -21px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand);
}
.tl-item.is-ok::before  { border-color: var(--ok); background: var(--ok); }
.tl-item.is-err::before { border-color: var(--err); background: var(--err); }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-time { font-size: 11.5px; color: var(--ink-3); }
.tl-body { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.tl-who  { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ==========================================================================
   Detail lists
   ========================================================================== */

.dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 18px;
}
.dl div { min-width: 0; }
.dl dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 650; margin-bottom: 2px;
}
.dl dd { margin: 0; font-size: 13.5px; word-break: break-word; }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(29, 21, 72, .55);
  display: grid; place-items: start center;
  padding: 34px 16px; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 680px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.modal.narrow { max-width: 440px; }
.modal.wide   { max-width: 900px; }
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
}
.modal-head h2 { font-size: 16px; }
.modal-head .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.modal-head .x {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 21px; line-height: 1; color: var(--ink-3); padding: 0 3px;
}
.modal-head .x:hover { color: var(--ink); }
.modal-body { padding: 20px; }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--line-2);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}

/* ==========================================================================
   Toast / alerts
   ========================================================================== */

.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px;
  max-width: min(400px, calc(100vw - 36px));
}
.toast {
  background: var(--nav-bg); color: #fff;
  padding: 11px 15px; border-radius: var(--radius-s);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start;
  animation: toast-in .18s ease-out;
}
.toast.is-ok  { background: #0f6a4b; }
.toast.is-err { background: #a82817; }
.toast .x { margin-left: auto; cursor: pointer; opacity: .7; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.alert {
  padding: 11px 14px; border-radius: var(--radius-s);
  font-size: 13px; border: 1px solid transparent;
  margin-bottom: 14px;
}
.alert-err  { background: var(--err-bg);  color: #99271a; border-color: #f7cfca; }
.alert-warn { background: var(--warn-bg); color: #7d5604; border-color: #f5e3ae; }
.alert-ok   { background: var(--ok-bg);   color: #0f6a4b; border-color: #bfe6d7; }
.alert-info { background: var(--info-bg); color: #333fae; border-color: #d3d6f7; }
.alert b { font-weight: 700; }

/* ==========================================================================
   States
   ========================================================================== */

.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty .ico  { font-size: 34px; opacity: .5; margin-bottom: 8px; }
.empty h3    { color: var(--ink-2); margin-bottom: 4px; }
.empty p     { font-size: 13px; max-width: 380px; margin: 0 auto 14px; }

.loading { padding: 44px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.spinner {
  width: 22px; height: 22px; margin: 0 auto 10px;
  border: 2.5px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pager {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-3);
}
.pager .btn-group { margin-left: auto; }

/* ==========================================================================
   Fee sheet
   ========================================================================== */

.fee-total {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 15px; border-radius: var(--radius-s);
  background: var(--brand-tint); border: 1px solid #ddd8fa;
  margin-bottom: 14px;
}
.fee-total .label { font-size: 12.5px; color: var(--brand-dark); font-weight: 600; }
.fee-total .value { font-size: 23px; font-weight: 700; color: var(--brand-dark);
                    margin-left: auto; font-variant-numeric: tabular-nums; }

.comp-row {
  display: grid;
  grid-template-columns: 1fr 130px 150px 34px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.sched-row {
  display: grid;
  grid-template-columns: 34px 1fr 170px 100px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}

.comp-row .del {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-s); cursor: pointer;
  height: 34px; color: var(--err); font-size: 15px;
}
.comp-row .del:hover { background: var(--err-bg); }




/* ==========================================================================
   Attendance  (sized for a tablet held in the hand)
   ========================================================================== */

.att-bar { position: sticky; top: 57px; z-index: 15; background: var(--surface); }
.att-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }

.att-chip {
  padding: 4px 11px; border-radius: 20px;
  background: var(--line-2); color: var(--ink-2);
  font-size: 12.5px; font-weight: 600;
}
.att-chip b { font-size: 14px; }
.att-chip.is-p    { background: var(--ok-bg);   color: var(--ok); }
.att-chip.is-a    { background: var(--err-bg);  color: var(--err); }
.att-chip.is-h    { background: var(--warn-bg); color: var(--warn); }
.att-chip.is-todo { background: var(--brand-light); color: var(--brand-dark); }

.att-status { font-size: 12px; color: var(--ink-3); min-width: 120px; }
.att-status.is-saving { color: var(--warn); }
.att-status.is-saved  { color: var(--ok); }
.att-status.is-error  { color: var(--err); font-weight: 700; }

.att-list { padding: 0; }

.att-group {
  padding: 10px 16px;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 14px; font-weight: 600; color: var(--brand-dark);
  position: sticky; top: 110px; z-index: 10;
}

.att-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-2);
}
.att-row:last-child { border-bottom: none; }

.att-who { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.att-avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: var(--brand-light); color: var(--brand-dark);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.att-name { font-weight: 650; font-size: 15px; }
.att-meta { font-size: 12.5px; color: var(--ink-3); }

.att-marks { display: flex; gap: 8px; flex: 0 0 auto; }

/* Big, forgiving targets - these are tapped with a thumb all morning. */
.att-btn {
  min-width: 64px; min-height: 48px;
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  transition: background .1s, border-color .1s, color .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.att-btn-letter { font-size: 17px; font-weight: 800; line-height: 1; color: var(--ink-3); }
.att-btn-word   { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .04em; color: var(--ink-3); }
.att-btn:active { transform: scale(.96); }

.att-btn.is-p.is-on {
  background: var(--ok); border-color: var(--ok);
}
.att-btn.is-a.is-on {
  background: var(--err); border-color: var(--err);
}
.att-btn.is-h.is-on {
  background: var(--accent); border-color: var(--accent);
}
.att-btn.is-on .att-btn-letter,
.att-btn.is-on .att-btn-word { color: #fff; }

@media (max-width: 640px) {
  .att-row { flex-wrap: wrap; }
  .att-marks { width: 100%; }
  .att-btn { flex: 1; }
  .att-btn-word { display: none; }
}

/* ==========================================================================
   Help
   ========================================================================== */

.help-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.help-quick-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.help-quick-btn:hover { border-color: var(--brand); background: var(--brand-tint); }
.help-quick-ico { font-size: 20px; line-height: 1; }

.help-sec .card-head { cursor: pointer; user-select: none; }
.help-sec:not(.is-open) .card-body { display: none; }
.help-sec .card-head:hover { background: var(--brand-tint); }
.help-ico { font-size: 20px; line-height: 1; }
.help-toggle {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--line-2); color: var(--ink-2);
  font-size: 15px; font-weight: 700; line-height: 1;
}

ol.help-steps {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: help;
}
ol.help-steps > li {
  counter-increment: help;
  position: relative;
  padding: 0 0 16px 40px;
}
ol.help-steps > li::before {
  content: counter(help);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 12.5px; font-weight: 700;
  font-family: var(--font);
}
ol.help-steps > li:not(:last-child)::after {
  content: ''; position: absolute;
  left: 13px; top: 30px; bottom: 4px;
  width: 2px; background: var(--line);
}
ol.help-steps > li:last-child { padding-bottom: 4px; }
.help-step-t { font-weight: 700; margin-bottom: 3px; padding-top: 3px; }
.help-step-d { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.help-step-d b { color: var(--ink); }

.help-search { max-width: 420px; }

@media print {
  /* A printed copy for the front desk: every section, no controls. */
  .help-sec .card-body { display: block !important; }
  .help-sec { page-break-inside: avoid; }
  .help-quick, .help-search, .help-toggle { display: none !important; }
}

/* ==========================================================================
   Receipt
   ========================================================================== */

.receipt-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 2px solid var(--line);
}
.receipt-logo { height: 54px; width: auto; }
.receipt-title h2 { font-size: 18px; }

/* When a modal (a receipt) is open, print just the modal. When no modal
   is open, these rules must not apply - otherwise every page prints
   blank, which is exactly the bug they once caused. */
@media print {
  body.modal-open * { visibility: hidden; }
  body.modal-open .modal-backdrop, body.modal-open .modal-backdrop * { visibility: visible; }
  body.modal-open .modal-backdrop {
    position: absolute; inset: 0; padding: 0;
    background: #fff; overflow: visible; display: block;
  }
  body.modal-open .modal { max-width: 100%; box-shadow: none; border-radius: 0; }
  body.modal-open .modal-head, body.modal-open .modal-foot { display: none !important; }
  body.modal-open .modal-body { padding: 0; }
  body.modal-open .print-header { display: none !important; }
}

/* ==========================================================================
   Print
   ========================================================================== */

.print-header { display: none; }

/* Kinder Kalp letterhead at the top of every printed page and saved PDF,
   with the page number at the foot. The words are set from the page being
   printed (app.js, setHeader); the logo is a print-sized copy, drawn at
   a third of its pixel size so it stays sharp. */
:root {
  /* Embedded, not linked: the browser does not wait for a linked image
     before drawing the page margins, so it would print blank. */
  --kk-ph-logo: image-set(url("data:image/png;base64,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") 3x);
  --kk-ph-title: "Kinder Kalp Preschool";
  --kk-ph-date: "";
}

@media print {
  @page {
    margin: 24mm 10mm 14mm;
    @top-left {
      content: var(--kk-ph-logo); vertical-align: bottom;
      padding-bottom: 2mm; border-bottom: 2px solid #291e63;
    }
    @top-center {
      content: var(--kk-ph-title); white-space: pre; text-align: left;
      font-family: "Baloo 2", "Quicksand", sans-serif; font-size: 11pt; font-weight: 700; color: #291e63;
      vertical-align: bottom; padding-bottom: 3mm; border-bottom: 2px solid #291e63;
    }
    @top-right {
      content: var(--kk-ph-date); white-space: pre; text-align: right;
      font-size: 8.5pt; color: #555;
      vertical-align: bottom; padding-bottom: 3mm; border-bottom: 2px solid #291e63;
    }
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 8pt; color: #777; }
  }
  .sidebar, .topbar, .filters, .btn, .pager, .toasts, .no-print,
  .att-marks, .help-quick, .help-search { display: none !important; }
  .content { padding: 0; }
  body  { background: #fff; }

  /* Let long sections run on to the next page instead of jumping whole
     to it - a card taller than what is left of a page used to leave the
     page before it almost empty. Only small pieces are kept together. */
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: auto; page-break-inside: auto; }
  .card-head { break-after: avoid; page-break-after: avoid; }
  tr, .tile, .alert, .fee-total, .dl > div, .receipt-head { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  /* Side-by-side columns cannot be split across pages: stack them. */
  .cols, .cols-3 { display: block; }
  .cols > * + *, .cols-3 > * + * { margin-top: 14px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .table-wrap, .card-body.flush { overflow: visible !important; }
  table { width: 100%; }

  /* The letterhead is drawn in the page margin (see @page below), so it
     is on every page; the in-page copy would only repeat it on the first. */
  .print-header { display: none !important; }
  .print-header .ph-inner { display: flex; align-items: center; gap: 14px; }
  .print-header img { height: 44px; width: auto; }
  .print-header .ph-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
  .print-header .ph-entity:not(:empty) { font-size: 11px; color: #555; margin-top: 1px; }
  .print-header .ph-title { font-size: 12px; color: #444; }
  .print-header .ph-date { margin-left: auto; font-size: 11px; color: #555; text-align: right; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .cols, .cols-3 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Slid with `left` rather than `transform`: if a browser or an embedded
     webview ignores transforms, the drawer stays hidden instead of
     covering the page. */
  .sidebar {
    position: fixed; z-index: 60; top: 0;
    left: calc(-1 * var(--sidebar-w));
    visibility: hidden;
    transition: left .2s ease, visibility .2s;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { left: 0; visibility: visible; }
  .scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(29, 21, 72, .5);
  }
  .content { padding: 16px 14px 40px; }
  .topbar  { padding: 11px 14px; }
  .field.span-2 { grid-column: span 1; }
  .comp-row { grid-template-columns: 1fr 1fr; }
  .sched-row { grid-template-columns: 24px 1fr; }
  .sched-row input[type=date], .sched-row input[type=number] { grid-column: 2; }
  .comp-row .del { grid-column: 2; justify-self: end; width: 40px; }
}

/* ==========================================================================
   Organisation - legal entities, stakeholders and campuses
   ========================================================================== */

.form-grid > .span-all { grid-column: 1 / -1; }

/* Long campus names must not push the sidebar out of shape. */
.sidebar-brand .brand-text { min-width: 0; }
.sidebar-brand .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-brand .sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Read-only detail pairs */
.kv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px; margin-bottom: 18px;
}
.kv .k { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.kv .v { font-size: 13.5px; color: var(--ink); white-space: pre-wrap; }

/* "Stakeholders as at <date>" */
.org-asat {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--brand-light); border-radius: 9px;
}
.org-asat input[type=date] {
  padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
}

.org-history-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 22px 0 8px;
}
.org-history { display: flex; flex-direction: column; gap: 8px; }
.org-set {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--line-2);
}
.org-campus-list { margin: 6px 0 0 18px; font-size: 13px; }
.org-campus-list li { margin: 3px 0; }

/* The stakeholder editor */
.stake-box {
  margin-top: 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--line-2);
}
.stake-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.stake-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 9px; }
.stake-row {
  display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center;
}
.stake-row:has(input:nth-of-type(2)) { grid-template-columns: 1.6fr 1fr auto; }
.stake-row:has(input:nth-of-type(3)) { grid-template-columns: 1.6fr 1fr .7fr auto; }
.stake-row input { padding: 7px 9px; font-size: 13px; }

/* Campus logos */
.campus-logo {
  height: 30px; width: auto; max-width: 46px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px;
}
.logo-preview { margin-top: 8px; }
.logo-preview img {
  height: 54px; width: auto; max-width: 180px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px; display: block; margin-bottom: 6px;
}

/* The campus and entity a receipt was issued by */
.receipt-issuer { margin-left: auto; text-align: right; max-width: 45%; }
.receipt-issuer .b { font-weight: 650; font-size: 13.5px; }

@media (max-width: 860px) {
  .stake-row,
  .stake-row:has(input:nth-of-type(2)),
  .stake-row:has(input:nth-of-type(3)) { grid-template-columns: 1fr auto; }
  .receipt-issuer { max-width: none; text-align: left; margin-left: 0; }
}

/* ==========================================================================
   Choosing and switching campus
   ========================================================================== */

.campus-card {
  width: min(460px, 100%);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px 26px 24px;
  box-shadow: var(--shadow-lg);
}
.campus-h { font-size: 19px; margin: 14px 0 4px; }

.campus-list { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 10px; }

.campus-pick {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  font: inherit; color: inherit;
  transition: border-color .12s, background .12s, transform .06s;
}
.campus-pick:hover { border-color: var(--brand); background: var(--brand-light); }
.campus-pick:active { transform: translateY(1px); }
.campus-pick.is-current { border-color: var(--brand); background: var(--brand-light); }
.campus-pick img {
  height: 38px; width: 38px; object-fit: contain; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 3px;
}
.campus-initial {
  height: 38px; width: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--brand-light); color: var(--brand-dark);
  border-radius: 9px; font-weight: 700; font-size: 17px;
}
.campus-name { font-weight: 650; font-size: 14px; }
.campus-go { color: var(--brand); font-size: 17px; flex: 0 0 auto; }

/* The button in the top bar */
.campus-btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto; padding: 6px 11px;
  background: var(--brand-light); color: var(--brand-dark);
  border: 1px solid #d6d1fa; border-radius: 20px;
  font: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; max-width: 260px;
}
.campus-btn:hover { border-color: var(--brand); }
.campus-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campus-dot {
  height: 7px; width: 7px; border-radius: 50%;
  background: var(--brand); flex: 0 0 auto;
}
.campus-caret { opacity: .6; flex: 0 0 auto; }

/* The financial year, sitting beside the campus. */
.fy-btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 8px; padding: 6px 11px;
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 20px;
  font: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; flex: 0 0 auto;
}
.fy-btn:hover { border-color: var(--brand); }
.fy-btn.is-only { cursor: default; }
.fy-btn.is-only:hover { border-color: var(--line); }
.fy-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--brand-dark); background: var(--brand-light);
  border-radius: 5px; padding: 1px 5px;
}
.fy-label { white-space: nowrap; }
/* Without a campus chip the year still needs pushing right. */
.topbar .fy-btn:first-of-type { margin-left: auto; }
.topbar .campus-btn ~ .fy-btn { margin-left: 8px; }

/* The topbar already pushes actions right; keep them apart. */
.topbar .campus-btn + .actions { margin-left: 10px; }
.topbar .fy-btn + .actions { margin-left: 10px; }

@media (max-width: 860px) {
  .campus-btn { max-width: 150px; }
  .fy-btn { padding: 6px 8px; }
  .fy-btn .fy-label { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
  .campus-card { padding: 22px 18px 18px; }
}

@media print {
  .print-header .ph-campus { font-size: 11px; color: #333; font-weight: 600; }
}

/* ==========================================================================
   Temporary passwords handed out by the admin
   ========================================================================== */

.temp-pw {
  font-family: "Consolas", "Menlo", monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  background: var(--brand-light); color: var(--brand-dark);
  border: 1px solid #d6d1fa; border-radius: 7px;
  padding: 3px 9px; white-space: nowrap;
}
.issued table { font-size: 13.5px; }

/* ==========================================================================
   Accounting
   ========================================================================== */

/* One line of a hand-made entry */
.jv-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 8px;
}
.jv-rows { display: flex; flex-direction: column; gap: 7px; }
.jv-row {
  display: grid; gap: 7px; align-items: center;
  grid-template-columns: 2.2fr .9fr .9fr 1.4fr auto;
}
.jv-row input, .jv-row select { padding: 7px 9px; font-size: 13px; }
.jv-totals {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: var(--line-2); border-radius: 9px;
  font-variant-numeric: tabular-nums; font-size: 13px;
}

/* Statement rows: groups stand out, totals rule off */
.stmt-group td { background: var(--brand-tint); }
.stmt-total td {
  border-top: 2px solid var(--line);
  background: var(--line-2); font-variant-numeric: tabular-nums;
}
tr.is-cancelled td { opacity: .55; text-decoration: line-through; }
tr.is-cancelled td .badge { opacity: 1; text-decoration: none; }

@media (max-width: 860px) {
  .jv-row { grid-template-columns: 1fr 1fr; }
  .jv-row select { grid-column: 1 / -1; }
}

/* ==========================================================================
   Inventory: purchase lines, reference chips, asset photos
   ========================================================================== */

.pur-rows { display: flex; flex-direction: column; gap: 10px; }
.pur-row {
  display: grid; gap: 7px; align-items: center;
  grid-template-columns: 2.4fr .8fr .8fr 1fr auto;
  padding: 9px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--line-2);
}
.pur-row input, .pur-row select { padding: 7px 9px; font-size: 13px; }
.pur-amt { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
/* The note under a line spans the whole row. */
.pur-note {
  grid-column: 1 / -1; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; font-size: 12.5px;
}

/* What a purchase or issue was for */
.ref-picker { display: flex; flex-direction: column; gap: 10px; }
.ref-group-t {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
.ref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ref-chip {
  padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink-2);
}
.ref-chip:hover { border-color: var(--brand); }
.ref-chip.is-on {
  background: var(--brand); border-color: var(--brand);
  color: #fff; font-weight: 650;
}

.asset-thumb {
  height: 34px; width: 46px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line);
  cursor: pointer; background: #fff;
}
.asset-thumb:hover { border-color: var(--brand); }

@media (max-width: 860px) {
  .pur-row { grid-template-columns: 1fr 1fr auto; }
  .pur-row select { grid-column: 1 / -1; }
}

/* ==========================================================================
   Collapsible menu sections and the report index
   ========================================================================== */

.nav-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--nav-muted); padding: 12px 10px 5px; font-weight: 700;
}
.nav-toggle:hover { color: #fff; }
.nav-caret { font-size: 13px; opacity: .7; line-height: 1; }
.nav-toggle .pill {
  background: var(--accent); color: #fff;
  border-radius: 20px; padding: 0 7px;
  font-size: 11px; font-weight: 700; line-height: 17px;
}
.nav-items.is-closed { display: none; }

/* The index of accounting reports */
.report-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.report-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.report-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.report-ico { font-size: 22px; line-height: 1.1; flex: 0 0 auto; }
.report-title { font-weight: 650; font-size: 14px; color: var(--ink); }
.report-blurb { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.report-note {
  font-size: 11.5px; color: var(--ink-3); margin-top: 5px;
  border-top: 1px dashed var(--line); padding-top: 5px;
}
.report-go { color: var(--brand); font-size: 16px; flex: 0 0 auto; }

/* A statement line already written into the books */
tr.is-posted td { background: var(--ok-bg); }
tr.is-posted td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

/* ==========================================================================
   Payroll
   ========================================================================== */

.staff-photo {
  height: 38px; width: 38px; object-fit: cover;
  border-radius: 50%; border: 1px solid var(--line); background: #fff;
}
.staff-photo-lg {
  height: 72px; width: 72px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.staff-head { display: flex; gap: 16px; align-items: flex-start; }

/* How a salary splits, shown as it is typed */
.breakup-box {
  display: grid; gap: 8px; margin-top: 12px; padding: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--brand-tint); border: 1px solid #ddd8fa; border-radius: 10px;
}
.breakup-part { font-variant-numeric: tabular-nums; }

.doc-grid {
  display: grid; gap: 10px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.doc-card {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--line-2);
}
.doc-label { font-size: 12.5px; font-weight: 650; flex: 1 0 100%; }

/* ==========================================================================
   Payslips
   ========================================================================== */

.payslip-sheet { display: flex; flex-direction: column; gap: 20px; }

.payslip {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 18px; background: #fff;
}
.payslip-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid var(--brand);
}
.payslip-logo { height: 46px; width: auto; }
.payslip-school { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.payslip-entity { font-size: 11.5px; color: var(--ink-3); }
.payslip-title { text-align: right; font-weight: 700; letter-spacing: .08em; font-size: 13px; }
.payslip-month { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

.payslip-who {
  display: grid; gap: 5px 18px; margin-bottom: 12px; font-size: 12.5px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.payslip-who .k {
  display: inline-block; min-width: 84px; color: var(--ink-3); font-size: 11.5px;
}

.payslip-days {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px; font-size: 12.5px;
  background: var(--brand-tint); border-radius: 8px;
}

.payslip-cols {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.payslip-col-t {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.payslip table { font-size: 12.5px; }

.payslip-net {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px; padding: 12px 14px;
  background: var(--brand); color: #fff; border-radius: 9px;
}
.payslip-net-l { font-size: 12px; opacity: .85; }
.payslip-net-v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.payslip-words { font-size: 12px; font-style: italic; }
.payslip-foot {
  margin-top: 10px; font-size: 11px; color: var(--ink-3); text-align: center;
}

@media (max-width: 860px) {
  .payslip-cols { grid-template-columns: 1fr; }
  .payslip-head { flex-wrap: wrap; }
  .payslip-title { text-align: left; }
}

@media print {
  /* One payslip per page, and no app furniture around it. */
  .payslip { border: 0; padding: 0; page-break-after: always; break-after: page; }
  .payslip:last-child { page-break-after: auto; break-after: auto; }
  .payslip-sheet { gap: 0; }
  .payslip-net { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .payslip-days { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* A fee head priced on one child */
.fee-head-row {
  display: grid; gap: 7px; align-items: center;
  grid-template-columns: 2fr 1fr 1.4fr auto;
  padding: 9px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--line-2);
}
.fee-head-row input, .fee-head-row select { padding: 7px 9px; font-size: 13px; }

@media (max-width: 860px) {
  .fee-head-row { grid-template-columns: 1fr auto; }
  .fee-head-row select { grid-column: 1 / -1; }
}

/* "+ New category" under a picker — small enough not to compete with the
   field, close enough that nobody has to leave the form to add a master. */
.link-add {
  background: none; border: 0; padding: 2px 0; margin-top: -6px;
  font: inherit; font-size: 12px; color: var(--brand);
  cursor: pointer; text-align: left;
}
.link-add:hover { text-decoration: underline; }

/* The Profit & Loss account is a real T-account: expenses on the debit
   side at the left, income on the credit side at the right, a rule down
   the middle, and both sides padded to the same length so it closes
   level. */
.pnl-t table.data th:nth-child(3),
.pnl-t table.data td:nth-child(3) { border-left: 2px solid var(--line); }
.pnl-t table.data td:nth-child(1),
.pnl-t table.data td:nth-child(3) { width: 34%; }
.pnl-t .stmt-group-cell { background: transparent; }

/* Lines of a statement that open the group or ledger behind them. */
a.drill { color: inherit; text-decoration: none; cursor: pointer; }
a.drill:hover { color: var(--brand); text-decoration: underline; }
.crumbs { margin-bottom: 4px; }
@media print { a.drill { color: inherit !important; text-decoration: none !important; } .crumbs { display: none; } }

/* The rate card of an hourly fee structure: one row per age group. */
.rate-row {
  display: grid;
  grid-template-columns: 1.6fr .8fr .8fr .9fr .9fr .9fr 32px;
  gap: 8px; align-items: start; margin-bottom: 8px;
}
.rate-row.rate-head {
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.rate-row input { width: 100%; }
@media (max-width: 700px) {
  .rate-row { grid-template-columns: 1fr 1fr 1fr; }
  .rate-row.rate-head { display: none; }
}
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }

.err-text { color: var(--err); }
/* The one of two alternative fields not in use. */
.field.is-off, input.is-off { opacity: .45; }
.agreed-line { display: grid; grid-template-columns: 170px 1fr 40px; gap: 8px; margin-bottom: 6px; }

/* ==========================================================================
   Sorting tables
   ========================================================================== */

table.data th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.data th.sortable:hover { color: var(--ink); }
table.data th .sort-ind { margin-left: 5px; font-size: 10px; opacity: .35; }
table.data th.is-sorted { color: var(--brand); }
table.data th.is-sorted .sort-ind { opacity: 1; }
@media print {
  table.data th .sort-ind { display: none; }
}

/* ==========================================================================
   Reports menu: families of reports, each opening its own short list
   ========================================================================== */

.report-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.report-group-wrap { position: relative; }
.report-group .caret { font-size: 11px; opacity: .8; }
.report-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(20, 16, 60, .15)); padding: 6px;
  display: flex; flex-direction: column;
}
.report-item {
  text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 12px; border-radius: 7px; font: inherit; font-size: 14px; color: var(--ink);
}
.report-item span { color: var(--ink-3); }
.report-item:hover { background: var(--brand-light, #efedff); }
.report-item.is-current { background: var(--brand-light, #efedff); color: var(--brand); }

/* The day-by-day attendance register: many narrow columns. */
.report-dense table.data th, .report-dense table.data td { padding: 5px 4px; font-size: 11.5px; }
.report-dense table.data td.mark { text-align: center; font-weight: 700; }
.report-dense td.mark-A { color: var(--err); background: var(--err-bg); }
.report-dense td.mark-H { color: #9a6b00; background: #fff6dc; }
.report-dense td.mark-P { color: var(--ok); }
.report-list { max-height: 70vh; overflow-y: auto; }
@media print { .report-dense table.data th, .report-dense table.data td { padding: 2px 2px; font-size: 8.5px; } }

/* A bank line's own note, typed by the school and posted with it. */
textarea.bank-note {
  display: block; width: 100%; min-width: 180px; margin-top: 6px;
  min-height: 34px; height: 34px;
  font: inherit; font-size: 12.5px; padding: 5px 8px; resize: vertical;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--brand-tint);
}
textarea.bank-note:focus { border-style: solid; border-color: var(--brand); background: var(--surface); outline: none; }
.bank-note-text { margin-top: 4px; font-style: italic; color: var(--ink-2); }