/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-md); border:1px solid transparent;
  font-size:13.5px; font-weight:600; padding:10px 16px; cursor:pointer;
  min-height:40px; text-align:center;
}
.btn .ic{ width:16px; height:16px; flex:none; }
.btn-primary{ background:var(--blue-600); color:var(--on-primary); }
.btn-primary:hover{ background:var(--blue-700); }
.btn-gold{ background:var(--blue-100); color:var(--blue-800); border-color:var(--blue-300); }
.btn-gold:hover{ background:var(--blue-300); color:var(--blue-900); }
.btn-line{ background:var(--surface); border-color:var(--blue-300); color:var(--blue-700); }
.btn-line:hover{ border-color:var(--blue-600); background:var(--blue-050); }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ color:var(--blue-700); background:var(--blue-050); }
.btn-danger{ background:var(--bad-bg); color:var(--bad-text); border-color:var(--bad-line); }
.btn-danger:hover{ background:#F9DAD6; }
.btn-sm{ padding:7px 12px; font-size:12.5px; min-height:34px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Flat bordered surface ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); min-width:0;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4); border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.panel-head h3{ font-size:15px; min-width:0; }
.panel-head .hint{ font-size:12px; color:var(--ink-faint); margin:0; }
.panel-body{ padding:var(--sp-4); }
@media (min-width: 1024px){
  .panel-head{ padding:var(--sp-4) var(--sp-5); }
  .panel-body{ padding:var(--sp-5); }
}

/* ---------- Stat tiles ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.stat-tile{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent,var(--blue-600));
  border-radius:var(--r-md); padding:var(--sp-4); min-width:0;
}
.stat-tile .stat-label{ font-size:12px; color:var(--ink-faint); margin-bottom:6px; }
.stat-tile .stat-value{ font-family:var(--font-serif); font-size:22px; font-weight:600; line-height:1.1; overflow-wrap:anywhere; }
.stat-tile .stat-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; }
@media (min-width: 640px){
  .stat-grid{ gap:var(--sp-4); margin-bottom:var(--sp-5); }
  .stat-tile .stat-value{ font-size:26px; }
}
@media (min-width: 1100px){
  .stat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stat-tile .stat-value{ font-size:28px; }
}

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; min-width:0; max-width:100%; }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th{
  text-align:left; font-size:11.5px; color:var(--ink-faint); font-weight:600;
  padding:10px var(--sp-3); border-bottom:1px solid var(--line-strong); white-space:nowrap;
  background:var(--blue-050);
}
table.data td{ padding:12px var(--sp-3); border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tbody tr:hover{ background:var(--blue-050); }
table.data .num{ text-align:right; font-variant-numeric:tabular-nums; }
table.data .empty{ text-align:center; color:var(--ink-faint); }
@media (min-width: 1024px){
  table.data th, table.data td{ padding-left:var(--sp-4); padding-right:var(--sp-4); }
}

/* ---------- Badges / status pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:20px; font-size:11.5px; font-weight:700; border:1px solid transparent;
}
.badge-ok{ background:var(--ok-bg); color:var(--ok-text); border-color:var(--ok-line); }
.badge-warn{ background:var(--warn-bg); color:var(--warn-text); border-color:var(--warn-line); }
.badge-bad{ background:var(--bad-bg); color:var(--bad-text); border-color:var(--bad-line); }
.badge-info{ background:var(--info-bg); color:var(--info-text); border-color:var(--info-line); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
.form-grid > *, .stat-grid > *{ min-width:0; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.field .req{ color:var(--bad-text); }
.field input, .field select, .field textarea{
  border:1px solid var(--line-strong); background:var(--surface-raised); color:var(--ink);
  border-radius:var(--r-md); padding:10px 12px; font-size:14px; font-family:inherit;
  width:100%; min-width:0; min-height:42px;
}
.field textarea{ min-height:80px; }
.field input:focus, .field select:focus, .field textarea:focus{ box-shadow:var(--focus-ring); outline:none; border-color:var(--blue-500); }
.field input:disabled, .field select:disabled{ background:var(--bg); color:var(--ink-faint); cursor:not-allowed; }
.field .note{ font-size:11.5px; color:var(--ink-faint); }
.form-actions{ display:flex; justify-content:flex-end; gap:var(--sp-3); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); flex-wrap:wrap; }
.form-actions .btn{ flex:1 1 auto; }
@media (min-width: 640px){
  .form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4) var(--sp-5); }
  .form-actions .btn{ flex:0 0 auto; }
}
@media (min-width: 1280px){
  .form-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------- Inline form grids used by pages (2fr 1fr 1fr etc.) ---------- */
@media (max-width: 719px){
  .form-grid[style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important; }
  .stat-grid[style*="grid-template-columns"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  /* keep wide tables readable: scroll inside the wrapper, never squash columns */
  .table-wrap > table.data{ min-width:560px; }
  table.data th, table.data td{ padding:9px 10px; }
  table.data{ font-size:13px; }
}
@media (min-width: 720px) and (max-width: 1023px){
  .form-grid[style*="grid-template-columns"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .stat-grid[style*="grid-template-columns"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:var(--sp-1); border-bottom:1px solid var(--line); margin-bottom:var(--sp-4); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.tab-btn{
  background:none; border:none; padding:12px 4px; margin-right:var(--sp-5);
  font-size:13.5px; font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent;
  cursor:pointer; white-space:nowrap; flex:none;
}
.tab-btn:hover{ color:var(--blue-600); }
.tab-btn.active{ color:var(--blue-700); border-color:var(--blue-600); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- Avatars / people rows ---------- */
.person{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--blue-600); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex:none;
}
.person-meta{ min-width:0; }
.person-meta strong{ display:block; font-size:13.5px; overflow-wrap:anywhere; }
.person-meta span{ display:block; font-size:11.5px; color:var(--ink-faint); }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--ink-faint); }
.empty .ic{ width:34px; height:34px; margin:0 auto var(--sp-3); opacity:.55; }
.empty strong{ display:block; color:var(--ink-soft); font-size:14px; margin-bottom:4px; }

/* ---------- Date / calendar badge ---------- */
.date-badge{ flex-direction:column; align-items:flex-start; line-height:1.25; }
.date-badge .cal-primary{ font-size:12.5px; font-weight:700; color:var(--ink); }
.date-badge .cal-secondary{ font-size:10.5px; color:var(--ink-faint); }

/* ---------- Permission matrix ---------- */
.perm-table td, .perm-table th{ text-align:center; }
.perm-table td:first-child, .perm-table th:first-child{ text-align:left; }
.perm-table{ min-width:520px; }
.switch{ position:relative; display:inline-block; width:40px; height:22px; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .track{ position:absolute; inset:0; background:var(--line-strong); border-radius:20px; transition:.15s; cursor:pointer; }
.switch .track::before{ content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked + .track{ background:var(--blue-600); }
.switch input:checked + .track::before{ transform:translateX(18px); }

/* ---------- Receipt (screen preview; print rules in app-extra.css) ---------- */
.receipt{
  width:100%; max-width:320px; margin:0 auto; background:var(--surface); border:1px dashed var(--line-strong);
  border-radius:var(--r-md); padding:var(--sp-4); font-size:12.5px;
}
.receipt h4{ text-align:center; font-size:15px; margin-bottom:2px; }
.receipt .r-sub{ text-align:center; color:var(--ink-faint); font-size:11px; margin-bottom:var(--sp-4); }
.receipt .r-row{ display:flex; justify-content:space-between; padding:4px 0; gap:8px; }
.receipt .r-line{ border-top:1px dashed var(--line-strong); margin:var(--sp-3) 0; }
.receipt .r-total{ font-weight:700; font-size:14px; }

/* ---------- Searchable picker (parent / guardian etc.) ---------- */
.picker{ position:relative; }
.picker > input[type="text"]{
  border:1px solid var(--line-strong); background:var(--surface-raised); color:var(--ink);
  border-radius:var(--r-md); padding:10px 12px; font-size:14px; width:100%; min-height:42px;
}
.picker > input[type="text"]:focus{ box-shadow:var(--focus-ring); outline:none; border-color:var(--blue-500); }
.picker-results{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  display:none; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop); max-height:280px; overflow-y:auto;
}
.picker-results.open{ display:block; }
.picker-results .search-row{ padding:10px 12px; }
.picker-new{ background:var(--blue-050); }
.picker-note-on{ color:var(--blue-700); font-weight:600; }

/* ---------- Utility ---------- */
.flex{ display:flex; align-items:center; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.mt-4{ margin-top:16px; } .mb-4{ margin-bottom:16px; }
.text-faint{ color:var(--ink-faint); font-size:12px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }