/* ==========================================================================
   SIM Sekolah SMKN 4 Tanjungpinang — Design System
   Palet: biru navy institusional + aksen kuning keemasan, tipografi Plus
   Jakarta Sans (UI/heading) + Inter (isi) + IBM Plex Mono (kode/nomor referensi).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper: #F5F8FC;
  --surface: #FFFFFF;
  --surface-sunken: #EAF1FB;
  --ink: #10253D;
  --ink-soft: #4B6178;
  --ink-faint: #8BA0B5;
  --border: #DDE7F2;
  --border-strong: #BBD0E4;

  --primary: #14406B;
  --primary-dark: #0B1F33;
  --primary-tint: #E7EEF7;
  --accent: #F5B400;
  --accent-dark: #C88E00;
  --accent-tint: #FFF3D6;
  --success: #2F9E5B;
  --success-tint: #E7F6EC;
  --warning: #8A6300;
  --warning-tint: #FFF3D6;
  --danger: #C0392B;
  --danger-tint: #FBE9E7;

  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(11,31,51,0.08), 0 1px 0 rgba(11,31,51,0.05);
  --shadow-pop: 0 12px 32px rgba(11,31,51,0.25);

  --sidebar-w: 250px;
  --topbar-h: 64px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4, .heading{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
.mono{ font-family: 'IBM Plex Mono', monospace; }

:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- App shell ---------- */
.app{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  min-width: 0;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background: var(--primary-dark);
  color: #C9D8E8;
  padding: 22px 14px 20px;
  display:flex;
  flex-direction:column;
  gap: 20px;
  position: sticky;
  top:0;
  height:100vh;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 4px 10px 14px;
  min-height: 64px;
  min-width: 0;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  display:flex;align-items:center;justify-content:center;
  color:#132338; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:14px;
  flex:none;
}
.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  flex:none;
}
.login-brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  flex:none;
}
.brand-text{ min-width:0; line-height:1.25; }
.brand-text .t1{ font-family:'Plus Jakarta Sans'; font-weight:700; font-size:14px; color:#fff; }
.brand-text .t2{ overflow:hidden; color:#91A9C0; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }

.nav-group{ display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.nav-label{
  font-size: 10.5px;
  color: #6C87A0;
  padding: 12px 12px 4px;
  font-weight:600;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px;
  min-height:40px;
  border-radius: 8px;
  color:#B9CBDE;
  font-size:13.5px;
  font-weight: 500;
  cursor:pointer;
}
.nav-item > span:last-child{ min-width:0; overflow-wrap:anywhere; }
.nav-item:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{ background: rgba(245,180,0,0.16); color:#FFE8AC; font-weight:600; }
.nav-item .ic{ width:17px; text-align:center; flex:none; opacity:0.9; }
.sidebar-foot{
  margin-top:auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.09);
  font-size:11.5px;
  color:#6C87A0;
}

/* ---------- Main / Topbar ---------- */
.main{ display:flex; flex-direction:column; min-height:100vh; min-width:0; }
.topbar{
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 26px;
  position: sticky; top:0; z-index:5;
}
.topbar-title{ display:flex; flex-direction:column; gap:1px; }
.topbar-title h1{ font-size:17px; }
.topbar-title .crumb{ font-size:12px; color:var(--ink-faint); }
.topbar-right{ display:flex; align-items:center; gap:16px; }
.search-mini{
  display:flex; align-items:center; gap:8px;
  background: var(--surface-sunken);
  border:1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 7px 12px;
  font-size:13px; color:var(--ink-soft);
  width:220px;
}
.bell{
  width:34px;height:34px;border-radius:var(--radius-control);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft); position:relative;
}
.bell .dot{ position:absolute; top:7px; right:7px; width:7px;height:7px;border-radius:50%; background:var(--danger); border:1.5px solid var(--surface); }
.account{ display:flex; align-items:center; gap:10px; padding-left:14px; border-left:1px solid var(--border); }
.avatar{
  width:34px;height:34px;border-radius:50%;
  background: var(--primary-tint); color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans'; font-weight:700; font-size:12.5px;
}
.account-text{ line-height:1.2; }
.account-text .name{ font-size:13px; font-weight:600; }
.account-text .role{ font-size:11.5px; color:var(--ink-faint); }

.content{ padding: 26px; flex:1; min-width:0; }
.content.narrow{ max-width: 900px; }

/* ---------- Grid / layout helpers ---------- */
.row{ display:flex; gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.spread{ display:flex; align-items:center; justify-content:space-between; }

/* ---------- Card ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-pad{ padding: 20px 22px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.card-head h2{ font-size:14.5px; }
.card-head .sub{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
.link-more{ font-size:12.5px; font-weight:600; color:var(--primary); }

/* ---------- Stat card ---------- */
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:18px 20px; box-shadow: var(--shadow-card);
}
.stat .label{ font-size:12.5px; color:var(--ink-soft); font-weight:500; }
.stat .value{ font-family:'Plus Jakarta Sans'; font-size:28px; font-weight:800; margin-top:6px; }
.stat .delta{ font-size:12px; margin-top:6px; display:flex; align-items:center; gap:5px; }
.stat .delta.up{ color: var(--success); }
.stat .delta.warn{ color: var(--warning); }
.stat .icon-box{ width:36px;height:36px;border-radius:9px; display:flex;align-items:center;justify-content:center; margin-bottom:10px; font-size:15px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: var(--radius-control);
  padding: 9px 16px;
  font-size: 13.5px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  font-family:'Plus Jakarta Sans';
}
.btn-primary{ background: var(--accent); color:#3A2C00; }
.btn-primary:hover{ background: var(--accent-dark); color:#fff; }
.btn-navy{ background: var(--primary); color:#fff; }
.btn-navy:hover{ background: var(--primary-dark); }
.btn-ghost{ background: transparent; border-color:var(--border-strong); color:var(--ink); }
.btn-ghost:hover{ background: var(--surface-sunken); }
.btn-danger-ghost{ background: transparent; border-color: #E7C4BE; color: var(--danger); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:0.45; cursor:not-allowed; }

/* ---------- Form ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.field .hint{ font-size:11.5px; color:var(--ink-faint); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select, textarea{
  font-family:'Inter';
  border:1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  width:100%;
}
input:focus, select:focus, textarea:focus{ border-color:var(--primary); }
textarea{ resize:vertical; min-height:84px; font-family:'Inter'; }
.upload-box{
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-control);
  padding: 22px;
  text-align:center;
  color: var(--ink-soft);
  font-size:13px;
  background: var(--surface-sunken);
}
.upload-box .ic{ font-size:20px; margin-bottom:6px; display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkbox-item{ display:flex; align-items:center; gap:8px; font-size:13px; background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:var(--radius-control); padding:9px 12px; }
.checkbox-item input{ accent-color:var(--primary); width:15px; height:15px; }

/* ---------- Table ---------- */
table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; font-size:11.5px; color:var(--ink-faint);
  font-weight:600; padding: 10px 14px; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td{
  padding: 13px 14px; border-bottom:1px solid var(--border);
  font-size:13px; vertical-align:middle;
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: var(--surface-sunken); }
tbody tr.selected{ background: var(--primary-tint); }
.cell-strong{ font-weight:600; }
.cell-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

/* ---------- Pills / badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight:600;
}
.pill .dot{ width:6px;height:6px;border-radius:50%; }
.pill-success{ background: var(--success-tint); color: var(--success); }
.pill-success .dot{ background: var(--success); }
.pill-warning{ background: var(--warning-tint); color: var(--warning); }
.pill-warning .dot{ background: var(--accent-dark); }
.pill-danger{ background: var(--danger-tint); color: var(--danger); }
.pill-danger .dot{ background: var(--danger); }
.pill-neutral{ background: var(--surface-sunken); color: var(--ink-soft); }
.pill-neutral .dot{ background: var(--ink-faint); }

/* ---------- Tabs / filters ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.tab{ padding:10px 4px; margin-right:22px; font-size:13.5px; font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent; cursor:pointer; }
.tab.active{ color:var(--primary); border-color: var(--accent); }
.filter-bar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.chip.active{ background: var(--primary); border-color:var(--primary); color:#fff; }
.select-mini{ padding:6px 10px; font-size:12.5px; border-radius:var(--radius-control); border:1px solid var(--border-strong); background:var(--surface); }

/* ---------- Timeline / steps ---------- */
.steps{ display:flex; align-items:flex-start; gap:0; }
.step{ display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.step .node{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px; font-weight:700; font-family:'Plus Jakarta Sans';
  background: var(--surface-sunken); color:var(--ink-faint); border:2px solid var(--border);
  z-index:1;
}
.step.done .node{ background: var(--success); color:#fff; border-color:var(--success); }
.step.current .node{ background: var(--accent); color:#3A2C00; border-color:var(--accent); }
.step .line{ position:absolute; top:13px; left:50%; width:100%; height:2px; background:var(--border); z-index:0; }
.step:last-child .line{ display:none; }
.step.done .line{ background: var(--success); }
.step .label{ font-size:11px; margin-top:8px; text-align:center; color:var(--ink-soft); max-width:100px; }

/* ---------- Misc content pages ---------- */
.info-list{ display:flex; flex-direction:column; gap:12px; }
.info-row{ display:flex; justify-content:space-between; font-size:13px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.info-row:last-child{ border-bottom:none; padding-bottom:0; }
.info-row .k{ color:var(--ink-faint); }
.info-row .v{ font-weight:600; text-align:right; }

.two-pane{ display:grid; grid-template-columns: 1fr 1.05fr; gap:18px; align-items:start; }
.list-panel{ max-height: 640px; overflow:auto; }
.list-item{ padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; }
.list-item:hover{ background:var(--surface-sunken); }
.list-item.active{ background: var(--primary-tint); border-left:3px solid var(--primary); padding-left:13px; }
.list-item .top{ display:flex; justify-content:space-between; margin-bottom:4px; }
.list-item .subj{ font-size:13.5px; font-weight:600; }
.list-item .meta{ font-size:11.5px; color:var(--ink-faint); }

.empty-state{ text-align:center; padding: 48px 20px; color:var(--ink-faint); }
.empty-state .ic{ font-size:28px; margin-bottom:10px; }
.empty-state h3{ font-size:14px; color:var(--ink); margin-bottom:4px; }
.empty-state p{ margin:0; font-size:12.5px; }

.kbd{ font-family:'IBM Plex Mono'; font-size:11px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:5px; padding:1px 6px; }

/* ---------- Login page ---------- */
.auth-shell{
  min-height:100vh; min-height:100svh; display:grid; grid-template-columns: 1.1fr 1fr;
  background: var(--primary-dark);
}
.auth-side{
  padding: 60px; color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  min-width:0;
  background:
    radial-gradient(560px 420px at 85% 15%, rgba(245,180,0,0.20), transparent 60%),
    linear-gradient(165deg, #071626, var(--primary-dark) 65%);
}
.auth-side .quote{ font-family:'Plus Jakarta Sans'; font-size:24px; font-weight:700; line-height:1.4; max-width:420px; }
.auth-side .quote-by{ font-size:12.5px; color:#8FA6BC; margin-top:14px; }
.auth-form-wrap{ background: var(--paper); display:flex; align-items:center; justify-content:center; min-width:0; padding:36px; }
.auth-card{ width:min(100%, 420px); }
.auth-card h1{ font-size:22px; margin-bottom:6px; }
.auth-card .sub{ font-size:13px; color:var(--ink-soft); margin-bottom:26px; }

/* ---------- Public certificate verify page ---------- */
.public-shell{ min-height:100vh; background: var(--paper); }
.public-top{ background:var(--primary-dark); color:#fff; padding:16px 40px; display:flex; align-items:center; gap:10px; }
.public-wrap{ max-width: 640px; margin: 0 auto; padding: 56px 20px; }
.verify-badge{
  display:flex; align-items:center; gap:10px; background:var(--success-tint); color:var(--success);
  padding:12px 16px; border-radius:var(--radius-control); font-weight:700; font-size:13.5px; margin-bottom:22px;
}

/* ---------- Modal ---------- */
.modal-overlay{
  display:none;
  position:fixed; inset:0; z-index:50;
  background: rgba(11,31,51,0.45);
  align-items:center; justify-content:center;
  padding:24px 20px;
  overflow:hidden;
}
.modal-overlay.open{ display:flex; }
.modal-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  width:100%; max-width:640px;
  max-height:min(88vh, 860px);
  max-height:min(88dvh, 860px);
  overflow:hidden;
  animation: modal-in .15s ease-out;
}
.modal-card--wide{ max-width:760px; }
.modal-card--extra-wide{ max-width:980px; }
.modal-card--large{ max-width:680px; }
.modal-card--medium{ max-width:600px; }
.modal-card--compact{ max-width:520px; }
.modal-card>form{ display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
@keyframes modal-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border);
  flex:none;
}
.modal-head h2{ font-size:15.5px; }
.modal-close{
  width:30px;height:30px;border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{ background:var(--surface-sunken); }
.modal-body{
  flex:1;
  min-height:0;
  padding:20px 22px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal-foot{
  display:flex; justify-content:flex-end; gap:10px;
  padding:16px 22px; border-top:1px solid var(--border);
  flex:none;
  flex-wrap:wrap;
}

/* ==========================================================================
   RESPONSIVE PATCH - sidebar jadi menu hamburger, tabel data menyesuaikan
   layar kecil, form dan modal mengikuti lebar layar.
   (Ditaruh paling akhir supaya menimpa blok @media lama yang menyembunyikan sidebar.)
   ========================================================================== */

.menu-toggle{
  display:none;
  width:36px; height:36px; flex:none; margin-right:12px;
  border-radius:var(--radius-control);
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  align-items:center; justify-content:center; cursor:pointer; font-size:16px;
}
.sidebar-backdrop{ display:none; }

@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .menu-toggle{ display:flex; }

  /* sidebar jadi laci yang meluncur dari kiri, bukan disembunyikan total */
  .sidebar{
    display:flex;
    position:fixed; top:0; left:0; height:100vh; width:260px; z-index:40;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.open{ transform: translateX(0); }

  .sidebar-backdrop.open{
    display:block; position:fixed; inset:0; z-index:39;
    background: rgba(11,31,51,0.45);
  }

  .grid-3, .grid-4, .grid-2, .two-pane{ grid-template-columns: 1fr; }
  .field-row, .checkbox-grid{ grid-template-columns: 1fr; }

  .auth-shell{ grid-template-columns: 1fr; min-height:100vh; min-height:100svh; }
  .auth-side{ display:flex; justify-content:flex-start; padding:18px 22px; min-height:82px; }
  .auth-side > div:not(.brand){ display:none; }
  .auth-form-wrap{ min-height:calc(100vh - 82px); min-height:calc(100svh - 82px); align-items:flex-start; padding:32px 22px; }
  .auth-card{ width:100%; max-width:440px; }

  .topbar{ padding: 0 14px; gap:8px; }
  .topbar-title{ min-width:0; }
  .topbar-title h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .search-mini{ width:130px; }
  .account-text{ display:none; }
  .account{ padding-left:10px; }

  .modal-overlay{ padding:16px; }
  .modal-card{ max-width:100%; }

  /* Tabel tetap bisa digeser pada tablet; layar ponsel memakai kartu di bawah. */
  table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .steps{ overflow-x:auto; padding-bottom:4px; }
}

@media (max-width: 480px){
  .content{ padding:16px; }
  .card-pad{ padding:16px; }
  .search-mini{ display:none; }
  .topbar-title h1{ font-size:15px; }
  .topbar-right{ gap:10px; }
  .stat .value{ font-size:22px; }
  .auth-form-wrap{ padding:26px 18px; }
  .auth-card h1{ font-size:21px; }
  .auth-card .sub{ margin-bottom:22px; }
  .auth-card input{ min-height:46px; font-size:16px; }
  .auth-card .btn{ min-height:46px; }
}

/* ---------- Outgoing letters responsive table ---------- */
.outgoing-table-wrap{ max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:10px; -webkit-overflow-scrolling:touch; }
.outgoing-table{ display:table; width:100%; min-width:900px; margin:0; overflow:visible; white-space:normal; }
.outgoing-table th,.outgoing-table td{ vertical-align:top; }
.outgoing-table td:last-child{ min-width:170px; }
.outgoing-filters{ display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 600px){
  .outgoing-filters{ flex-wrap:wrap; overflow:visible; padding-bottom:0; }
  .outgoing-filters .chip{ flex:1 1 auto; justify-content:center; }
}

/* ---------- Report CSV import ---------- */
.report-import{ padding:24px 26px; }
.report-import__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.report-import__eyebrow{ color:var(--primary); font-size:10px; font-weight:700; letter-spacing:.1em; margin-bottom:5px; }
.report-import__header h2{ font-size:17px; }
.report-import__header p{ color:var(--ink-faint); font-size:12.5px; margin:4px 0 0; }
.report-import__limit{ flex:none; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--paper); color:var(--ink-soft); padding:6px 11px; font-size:11px; font-weight:600; }
.report-import__limit span{ color:var(--ink-faint); padding:0 2px; }
.report-import__grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); gap:20px; align-items:stretch; }
.report-import__templates{ padding:2px 0; }
.report-import__section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.report-import__section-head>div{ display:flex; align-items:center; gap:9px; }
.report-import__section-head h3{ font-size:13px; }
.report-import__section-head>span{ color:var(--ink-faint); font-size:11px; text-align:right; }
.report-import__step{ display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; background:var(--primary-tint); color:var(--primary); font:700 10px 'Plus Jakarta Sans',sans-serif; }
.report-template-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.report-template{ min-width:0; min-height:68px; display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.report-template:hover{ border-color:var(--border-strong); background:#FBFDFF; transform:translateY(-1px); }
.report-template__icon{ flex:none; display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:9px; background:var(--success-tint); color:var(--success); font:700 9px 'Plus Jakarta Sans',sans-serif; letter-spacing:.02em; }
.report-template__copy{ min-width:0; display:flex; flex:1; flex-direction:column; gap:3px; }
.report-template__copy strong{ overflow:hidden; color:var(--ink); font-size:11.5px; line-height:1.35; text-overflow:ellipsis; }
.report-template__copy small{ color:var(--ink-faint); font-size:10px; }
.report-template__download{ flex:none; color:var(--primary); font-size:18px; font-weight:600; line-height:1; }
.report-import__upload{ padding:17px; border:1px solid var(--border); border-radius:11px; background:var(--paper); }
.report-import__form{ display:flex; flex-direction:column; gap:11px; }
.report-import__form .field{ margin:0; gap:5px; }
.report-import__form .field label{ font-size:11.5px; }
.report-import__form select{ height:39px; padding-top:8px; padding-bottom:8px; background:var(--surface); }
.report-import__form input[type=file]{ width:100%; min-height:41px; padding:5px; border:1px dashed var(--border-strong); border-radius:var(--radius-control); background:var(--surface); color:var(--ink-soft); font:11px 'Inter',sans-serif; }
.report-import__form input[type=file]::file-selector-button{ margin-right:9px; padding:7px 10px; border:0; border-radius:6px; background:var(--primary-tint); color:var(--primary); font:600 11px 'Inter',sans-serif; cursor:pointer; }
.report-import__submit{ width:100%; justify-content:center; min-height:40px; margin-top:1px; }
.report-import__guidance{ display:flex; align-items:flex-start; gap:10px; margin-top:18px; padding-top:15px; border-top:1px solid var(--border); }
.report-import__info-icon{ flex:none; display:flex; align-items:center; justify-content:center; width:19px; height:19px; border:1px solid var(--border-strong); border-radius:50%; color:var(--ink-soft); font:600 11px 'Inter',sans-serif; }
.report-import__guidance strong{ color:var(--ink-soft); font-size:11px; }
.report-import__guidance p{ margin:3px 0 0; color:var(--ink-faint); font-size:11px; line-height:1.55; }
.report-import__error{ margin:0 0 14px; padding:12px 14px; border:1px solid #F1C9C4; border-radius:var(--radius-control); background:var(--danger-tint); color:var(--danger); font-size:12px; }
.report-import__error ul{ max-height:130px; overflow:auto; margin:7px 0 0; padding-left:18px; }
.report-import__error li+li{ margin-top:3px; }
.report-export-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.report-export-note{ margin:-8px 0 16px; color:var(--ink-faint); font-size:11px; text-align:right; }
.report-preview{ position:fixed; z-index:1200; inset:0; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(9,24,40,.58); }
.report-preview.open{ display:flex; }
.report-preview__dialog{ display:flex; flex-direction:column; width:min(1100px,100%); max-height:min(82vh,820px); overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--paper); box-shadow:0 24px 80px rgba(9,24,40,.24); }
.report-preview__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--border); }
.report-preview__eyebrow{ color:var(--primary); font-size:9px; font-weight:700; letter-spacing:.12em; }
.report-preview__header h2{ margin-top:3px; font-size:17px; }
.report-preview__close{ width:34px; height:34px; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--ink-soft); font-size:24px; line-height:1; cursor:pointer; }
.report-preview__body{ min-height:150px; overflow:auto; padding:16px 22px; }
.report-preview__count{ margin:0 0 10px; color:var(--ink-soft); font-size:12px; }
.report-preview__table-wrap{ max-width:100%; overflow:auto; border:1px solid var(--border); border-radius:8px; }
.report-preview__table-wrap table{ min-width:100%; border-collapse:collapse; white-space:nowrap; }
.report-preview__table-wrap th,.report-preview__table-wrap td{ max-width:260px; overflow:hidden; padding:9px 11px; border-bottom:1px solid var(--border); text-align:left; text-overflow:ellipsis; font-size:11px; }
.report-preview__table-wrap th{ position:sticky; top:0; background:var(--primary-tint); color:var(--primary); font-weight:700; text-transform:capitalize; }
.report-preview__table-wrap tbody tr:nth-child(even){ background:var(--surface); }
.report-preview__error{ color:var(--danger); font-size:12px; }
.report-preview__footer{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px; border-top:1px solid var(--border); background:var(--surface); }
.report-preview__footer>span{ color:var(--ink-faint); font-size:11px; }
.report-preview__footer>div{ display:flex; flex:none; gap:8px; }
.report-import__preview{ max-width:100%; margin-top:14px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--ink-soft); font-size:11px; }
.report-import__preview[hidden]{ display:none; }
.report-import__preview>strong{ color:var(--ink); font-size:12px; }
.report-import__preview>p{ margin:4px 0 9px; color:var(--ink-faint); line-height:1.5; }
.report-import__preview-table{ display:block; max-width:100%; overflow:auto; border-collapse:collapse; white-space:nowrap; }
.report-import__preview-table th,.report-import__preview-table td{ max-width:210px; overflow:hidden; padding:6px 8px; border:1px solid var(--border); text-overflow:ellipsis; }
.report-import__preview-table th{ background:var(--primary-tint); color:var(--primary); font-weight:700; }
.report-import__preview-limit{ color:var(--danger)!important; font-weight:600; }
.report-import__submit:disabled{ cursor:not-allowed; opacity:.55; }

@media (max-width: 760px){
  .report-import{ padding:20px; }
  .report-import__grid{ grid-template-columns:1fr; gap:16px; }
}

@media (max-width: 520px){
  .report-export-actions{ width:100%; }
  .report-export-actions .btn{ flex:1; justify-content:center; }
  .report-export-note{ margin-top:-10px; text-align:left; }
  .report-preview{ padding:9px; }
  .report-preview__dialog{ max-height:92vh; }
  .report-preview__header,.report-preview__body{ padding-left:14px; padding-right:14px; }
  .report-preview__footer{ align-items:stretch; flex-direction:column; padding:12px 14px; }
  .report-preview__footer>div .btn{ flex:1; justify-content:center; }
  .report-import__header{ flex-direction:column; gap:10px; }
  .report-template-grid{ grid-template-columns:1fr; }
  .report-import__upload{ padding:14px; }
  .report-import__section-head{ align-items:flex-start; flex-direction:column; }
  .report-import__section-head>span{ padding-left:34px; text-align:left; }
}

/* ---------- Student data transfer ---------- */
.student-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.student-transfer{ margin:16px 0; padding:17px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.student-transfer__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:13px; }
.student-transfer__head h3{ font-size:13px; }
.student-transfer__head p,.student-transfer__note{ margin:4px 0 0; color:var(--ink-faint); font-size:11px; line-height:1.55; }
.student-transfer__form{ display:grid; grid-template-columns:minmax(190px,1fr) minmax(180px,1fr) auto; gap:12px; align-items:end; }
.student-transfer__form .field{ margin:0; gap:5px; }
.student-transfer__form .field label{ font-size:11.5px; }
.student-transfer__form input[type=file]{ width:100%; min-height:39px; padding:5px; border:1px dashed var(--border-strong); border-radius:var(--radius-control); background:var(--paper); font-size:11px; }
.student-transfer__form .student-file-picker{ position:relative; display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; padding:6px 9px; border:1px dashed var(--border-strong); border-radius:9px; background:var(--paper); transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.student-transfer__form .student-file-picker:hover,.student-transfer__form .student-file-picker:focus-within{ border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px var(--primary-tint); }
.student-file-picker__icon{ display:flex; align-items:center; justify-content:center; width:31px; height:31px; flex:none; border-radius:8px; background:var(--primary-tint); color:var(--primary); font:700 8px 'Plus Jakarta Sans',sans-serif; }
.student-file-picker__name{ min-width:0; flex:1; overflow:hidden; color:var(--ink-faint); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.student-file-picker.has-file .student-file-picker__name{ color:var(--ink); font-weight:600; }
.student-file-picker__browse{ flex:none; padding:7px 10px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--ink); font-size:10.5px; font-weight:600; }
.student-transfer__form .student-file-picker__input{ position:absolute; z-index:2; inset:0; width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:9px; opacity:0; cursor:pointer; }
.student-file-picker__help{ display:block; margin-top:5px; color:var(--ink-faint); font-size:10px; }
.student-transfer__preview{ margin-top:13px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--paper); color:var(--ink-soft); font-size:11px; }
.student-transfer__preview[hidden]{ display:none; }
.student-transfer__preview>strong{ color:var(--ink); font-size:12px; }
.student-transfer__preview>p{ margin:4px 0 9px; color:var(--ink-faint); }
.student-transfer__preview table{ display:block; max-width:100%; overflow:auto; border-collapse:collapse; white-space:nowrap; }
.student-transfer__preview th,.student-transfer__preview td{ max-width:220px; overflow:hidden; padding:6px 8px; border:1px solid var(--border); text-overflow:ellipsis; }
.student-transfer__preview th{ background:var(--primary-tint); color:var(--primary); }
.student-transfer__form button:disabled{ cursor:not-allowed; opacity:.55; }
.student-alert{ margin:0 0 12px; padding:10px 14px; border-radius:var(--radius-control); background:var(--danger-tint); color:var(--danger); font-size:12px; }
.student-alert--success{ background:var(--success-tint); color:var(--success); }
.student-alert ul{ max-height:140px; overflow:auto; margin:7px 0 0; padding-left:18px; }
@media (max-width:760px){ .student-transfer__form{ grid-template-columns:1fr; } }
@media (max-width:520px){ .student-actions{ width:100%; } .student-actions .btn{ flex:1; justify-content:center; } .student-transfer__head{ flex-direction:column; } }
.student-transfer{ padding:0; overflow:hidden; background:var(--paper); }
.student-transfer__summary{ display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 16px; list-style:none; cursor:pointer; }
.student-transfer__summary::-webkit-details-marker{ display:none; }
.student-transfer__summary:hover{ background:var(--surface); }
.student-transfer__summary-icon{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border-radius:10px; background:var(--primary-tint); color:var(--primary); font:700 9px 'Plus Jakarta Sans',sans-serif; }
.student-transfer__summary-copy{ display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
.student-transfer__summary-copy strong{ color:var(--ink); font-size:12.5px; }
.student-transfer__summary-copy small{ color:var(--ink-faint); font-size:11px; }
.student-transfer__summary-action{ color:var(--primary); font-size:11px; font-weight:600; }
.student-transfer__summary-action span{ display:inline-block; margin-left:4px; transition:transform .15s ease; }
.student-transfer[open] .student-transfer__summary-action span{ transform:rotate(180deg); }
.student-transfer__content{ padding:2px 17px 16px; border-top:1px solid var(--border); }
.student-transfer__head{ align-items:center; margin:12px 0; }
.student-search{ display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(200px,1fr) auto auto; gap:9px; align-items:center; margin:15px 0 12px; }
.student-search__query{ display:flex; align-items:center; gap:9px; min-width:0; height:39px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-control); background:var(--surface-sunken); color:var(--ink-faint); }
.student-search__query:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }
.student-search__query>span{ font-size:19px; line-height:1; }
.student-search__query input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:12.5px; }
.student-search__query input::placeholder{ color:var(--ink-faint); }
.student-search__select{ width:100%; height:39px; padding:0 11px; border:1px solid var(--border-strong); border-radius:var(--radius-control); background:var(--paper); color:var(--ink); font:inherit; font-size:12px; }
.student-search__reset{ padding:7px 3px; color:var(--ink-faint); font-size:11px; white-space:nowrap; }
.student-search__reset:hover{ color:var(--primary); }
.student-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.student-table{ min-width:680px; }
.student-table thead th{ padding:11px 14px; background:var(--surface); color:var(--ink-soft); font-size:10px; letter-spacing:.035em; text-transform:uppercase; }
.student-table tbody td{ padding:13px 14px; }
.student-table tbody tr{ transition:background .12s ease; }
.student-program{ display:inline-flex; padding:4px 9px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--ink-soft); font-size:10.5px; }
.student-row-action{ display:inline-flex; align-items:center; padding:5px 8px; border:0; border-radius:6px; background:transparent; color:var(--primary); font:600 11px 'Inter',sans-serif; text-decoration:none; cursor:pointer; }
.student-row-action:hover{ background:var(--primary-tint); }
.student-row-action--danger{ color:var(--danger); }
.student-row-action--danger:hover{ background:var(--danger-tint); }
@media (max-width:760px){ .student-search{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; } .student-search__query{ grid-column:1 / -1; } }
@media (max-width:520px){ .student-search{ grid-template-columns:1fr auto; } .student-search__query{ grid-column:1 / -1; } .student-search__select{ grid-column:1 / -1; } .student-search .btn{ justify-content:center; } .student-transfer__summary-action{ font-size:0; } .student-transfer__summary-action span{ font-size:16px; } .student-table{ min-width:620px; } }

/* ---------- Mobile data tables ---------- */
/* ---------- Notification panel ---------- */
.notification-menu{ position:relative; flex:none; }
.notification-menu__button{ cursor:pointer; border:0; }
.notification-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:50;
  display:none;
  flex-direction:column;
  width:320px;
  max-width:calc(100vw - 16px);
  max-height:min(420px, calc(100vh - 80px));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:0 12px 28px rgba(16,37,61,.18);
}
.notification-panel.is-open{ display:flex; }
.notification-panel__title{
  flex:none;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
  font-weight:700;
}
.notification-panel__items{ min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.notification-panel__item{
  display:block;
  padding:11px 16px;
  border-bottom:1px solid var(--border);
  color:var(--ink);
  font-size:12.5px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.notification-panel__item:last-child{ border-bottom:0; }
.notification-panel__item:hover{ background:var(--surface-sunken); }
.notification-panel__empty{ padding:16px; color:var(--ink-faint); font-size:12.5px; text-align:center; }

/* ---------- Certificate issue modal ---------- */
.certificate-issue-launch{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.certificate-issue-launch h2{ font-size:15px; }
.certificate-issue-launch .sub{ margin-top:4px; color:var(--ink-faint); font-size:12px; }
.certificate-issue-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:20px; align-items:start; }
.certificate-issue-form{ min-width:0; }
.certificate-issue-actions{ display:flex; justify-content:flex-end; gap:8px; }
.certificate-issue-actions .btn{ min-height:42px; }
.certificate-preview-panel{ min-width:0; padding:15px; border:1px solid var(--border); border-radius:12px; background:var(--surface-sunken); }
.certificate-preview-panel h3{ margin:0 0 12px; color:var(--ink); font-size:13px; }
.certificate-preview-card{ overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--shadow-card); }
.certificate-preview-card__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; background:var(--primary-dark); color:#fff; font-size:10px; }
.certificate-preview-card__header strong{ display:block; margin-top:4px; font-size:12px; }
.certificate-preview-card__header img{ width:38px; height:44px; flex:none; object-fit:contain; }
.certificate-preview-card__details{ padding:14px 15px; }
.certificate-preview-card__details .info-row{ gap:10px; padding:7px 0; font-size:11px; }
.certificate-preview-card__details .k{ flex:0 0 68px; }
.certificate-preview-card__details .v{ min-width:0; overflow-wrap:anywhere; text-align:right; }
.certificate-preview-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 15px; border-top:1px solid var(--border); color:var(--ink-faint); font-size:9px; }
.certificate-preview-card__qr{ width:35px; height:35px; flex:none; border:4px solid #fff; outline:1px solid var(--border-strong); background:repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 / 8px 8px; }
.disposition-launch{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.disposition-launch h2{ font-size:14px; }
.disposition-launch .sub{ margin-top:4px; color:var(--ink-faint); font-size:11.5px; }

@media (max-width:760px){ .certificate-issue-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px){
  .certificate-issue-launch{ align-items:stretch; flex-direction:column; }
  .certificate-issue-launch>.btn{ width:100%; justify-content:center; min-height:44px; }
  .disposition-launch{ align-items:stretch; flex-direction:column; }
  .disposition-launch>.btn{ width:100%; justify-content:center; min-height:44px; }
  .certificate-issue-actions .btn{ flex:1 1 130px; justify-content:center; }
  .certificate-preview-panel{ padding:12px; }
}

@media (max-width:600px){
  .modal-overlay{
    align-items:flex-end;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .modal-card,.modal-card--wide,.modal-card--extra-wide{
    width:100%;
    max-width:none;
    max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    border-radius:18px 18px 12px 12px;
  }
  .modal-head{ padding:14px 16px; }
  .modal-body{ padding:16px; }
  .modal-foot{ justify-content:stretch; gap:8px; padding:12px 16px; }
  .modal-foot>.btn{ flex:1 1 120px; min-height:44px; justify-content:center; }
  .modal-body input:not([type="checkbox"]):not([type="radio"]),
  .modal-body select,
  .modal-body textarea{ min-width:0; max-width:100%; font-size:16px; }

  .notification-panel{
    position:fixed;
    top:calc(var(--topbar-h) + 8px);
    right:8px;
    width:min(420px, calc(100vw - 16px));
    max-width:none;
    max-height:calc(100vh - var(--topbar-h) - 24px);
    max-height:calc(100svh - var(--topbar-h) - 24px);
  }
  .notification-panel__items{ max-height:calc(100svh - var(--topbar-h) - 76px); }
}

@media (max-width:980px){
  .content .report-summary-grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .content table.report-status-table{
    display:table;
    width:100%;
    min-width:0;
    overflow:visible;
    border-collapse:collapse;
    white-space:normal;
  }
  .content table.report-status-table tbody td{ padding:12px 8px; }
  .content table.report-status-table tbody td:last-child{ width:86px; white-space:nowrap; }
  .content table.report-status-table .pill{ max-width:100%; white-space:normal; }

  .content table.mobile-card-table{
    display:block;
    width:100%;
    min-width:0 !important;
    overflow:visible;
    border:0;
    border-collapse:separate;
    white-space:normal;
  }
  .content table.mobile-card-table thead{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  .content table.mobile-card-table tbody{
    display:grid;
    width:100%;
    gap:10px;
  }
  .content table.mobile-card-table tbody tr{
    display:block;
    min-width:0;
    padding:3px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    box-shadow:var(--shadow-card);
  }
  .content table.mobile-card-table tbody td{
    display:grid;
    grid-template-columns:minmax(78px, 34%) minmax(0, 1fr);
    align-items:start;
    gap:10px;
    width:100%;
    min-width:0;
    max-width:none;
    overflow:visible;
    padding:9px 0;
    border-bottom:1px solid var(--border);
    font-size:12px;
    line-height:1.45;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
  .content table.mobile-card-table tbody td::before{
    content:attr(data-mobile-label);
    color:var(--ink-faint);
    font-size:10px;
    font-weight:700;
    line-height:1.45;
  }
  .content table.mobile-card-table tbody td[colspan]{
    display:block;
    padding:15px 0;
    border-bottom:0;
    text-align:center;
  }
  .content table.mobile-card-table tbody td[colspan]::before{ content:none; }
  .content table.mobile-card-table tbody tr:last-child td{ border-bottom:0; }
  .content table.mobile-card-table tbody td > *{ min-width:0; max-width:100%; }

  .content .outgoing-table-wrap,
  .content .student-table-wrap,
  .content .report-preview__table-wrap{
    overflow:visible;
    border:0;
  }
  .content .outgoing-table td:last-child{ min-width:0; }
  .content .outgoing-filters{ flex-wrap:wrap; overflow:visible; }
  .content .outgoing-filters .chip{ flex:1 1 auto; }
}