:root {
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-50: #eef2ff;
  --ink-900: #111827;
  --ink-700: #374151;
  --ink-500: #6b7280;
  --ink-300: #d1d5db;
  --ink-100: #f3f4f6;
  --surface: #ffffff;
  --canvas: #f6f7fb;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
}

* { box-sizing: border-box; }

html {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--canvas);
  color: var(--ink-900);
  margin: 0;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  /* App-like touch feel: no gray flash on tap, no rubber-band bounce past
     the edges of a scroll area, no accidental text selection on taps. */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Never let a tap-and-hold select text or show the iOS callout menu on
   interactive chrome - inputs/textareas are excluded so typing still
   works normally. */
button, a, .sidebar-nav, .app-topbar, .stat-card, .btn {
  -webkit-user-select: none;
  user-select: none;
}

/* iOS auto-zooms the page if a focused input's font is under 16px - this
   keeps every form control at a safe size so focusing a field never
   triggers that jarring zoom. */
input, select, textarea { font-size: 16px; }
@media (min-width: 576px) {
  input, select, textarea { font-size: inherit; }
}

img, svg { max-width: 100%; }

a { text-decoration: none; color: inherit; }

/* ---------- Auth / Login screen ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 20%, #6366f1 0%, #4338ca 45%, #312e81 100%);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 960px;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(17, 24, 39, 0.35);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
}

.auth-visual {
  background: linear-gradient(160deg, var(--brand-600), #312e81);
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.auth-visual i { font-size: 2.5rem; opacity: 0.9; }
.auth-visual h2 { font-weight: 700; font-size: 1.75rem; margin: 0; }
.auth-visual p { color: rgba(255,255,255,0.85); margin: 0; line-height: 1.6; }

.auth-form-wrap { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.auth-form-wrap h3 { font-weight: 700; margin-bottom: 4px; }
.auth-form-wrap .subtitle { color: var(--ink-500); margin-bottom: 28px; }

.form-control, .form-select {
  border-radius: 10px;
  border: 1px solid var(--ink-300);
  padding: 10px 14px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.form-label { font-weight: 600; font-size: 0.875rem; color: var(--ink-700); }

.btn-brand {
  background: var(--brand-600);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.btn-brand:hover { background: var(--brand-700); color: #fff; }

@media (max-width: 860px) {
  .auth-card { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
}

/* ---------- App shell ---------- */
/* Fixed to exactly one viewport height, and clipped - so the browser
   window itself never scrolls. Only .app-content (below) scrolls; the
   sidebar and topbar always stay in place. */
.app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh; /* accounts for mobile browser address bars - avoids the classic "100vh is taller than the real screen" bug */
  overflow: hidden;
}

.app-sidebar {
  width: 260px;
  max-width: 82vw;
  flex-shrink: 0;
  background: #111827;
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  padding-left: env(safe-area-inset-left); /* landscape notch on the side */
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand i { color: #818cf8; font-size: 1.4rem; }
.sidebar-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
}

.sidebar-institute {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a5b4fc;
  background: rgba(129, 140, 248, 0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-institute i { font-size: 0.9rem; }
.sidebar-institute span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); /* home indicator on iPhone */
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #d1d5db;
  font-weight: 500;
  font-size: 0.925rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-link i { width: 20px; text-align: center; font-size: 1.05rem; }
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-link.active { background: var(--brand-600); color: #fff; }

.sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); }

.app-main { flex: 1; min-width: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.app-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  padding-top: calc(18px + env(safe-area-inset-top)); /* status bar area when installed on iPhone */
  padding-right: calc(28px + env(safe-area-inset-right));
  background: var(--surface);
  border-bottom: 1px solid var(--ink-100);
  flex-shrink: 0;
}
.topbar-title { font-size: 1.25rem; font-weight: 700; margin: 0; flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.badge-role {
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.user-name { font-weight: 600; color: var(--ink-700); }
.sidebar-toggle { border: none; background: none; font-size: 1.4rem; color: var(--ink-700); }

/* This is the ONLY part of a logged-in page that scrolls - the sidebar
   and topbar are outside it, so they stay fixed on screen while this
   area's own content (which may still be taller than one screen, e.g.
   a long "Add student" panel above a student list) scrolls internally. */
.app-content { padding: 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* Opt-in for a page's main row/panel: makes it fill whatever vertical
   space is actually left in .app-content (instead of just taking its
   natural height), and makes any .table-scroll inside it grow/shrink to
   use that space too - so on a normal-size screen the page itself never
   needs to scroll, only the list inside it does (which it already could).
   Deliberately does NOT remove .table-scroll's own max-height cap (see
   below) - flex sizing fills the space when there's room, but the cap
   is what actually guarantees the table (and so the page) can never
   grow past it, however many rows it holds or however this layout
   resolves in a given browser. Without that cap a long list has nothing
   stopping it from rendering at full height and dragging the whole page
   into scrolling.
   .app-content above keeps its own scroll as a last-resort safety net
   only, for edge cases (a very short window, heavy browser zoom) where
   content still doesn't fit - it should never trigger in normal use. */
.content-fill {
  flex: 1;
  min-height: 0;
}
.content-fill > [class*="col-"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.content-fill .panel,
.panel.content-fill {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  /* Same reasoning as .table-scroll's cap above: flex sizing shrinks this
     panel to fit when things work as intended, but this is the hard
     backstop that guarantees it (and so the page) never grows past the
     screen even if a browser doesn't resolve the flex heights the way
     we expect. */
  max-height: 82vh;
}
.content-fill .panel > .table-scroll:last-child,
.panel.content-fill > .table-scroll:last-child {
  flex: 1;
  min-height: 0;
}

/* ---------- Cards / stats ---------- */
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ink-100);
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-card .icon-wrap {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--brand-50);
  color: var(--brand-600);
  flex-shrink: 0;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { color: var(--ink-500); font-size: 0.85rem; margin-top: 4px; }

.panel {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 24px;
}
.panel-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 18px; }

.table { margin-bottom: 0; }
.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-100);
  font-weight: 600;
  padding-bottom: 12px;
}
.table td { vertical-align: middle; padding: 12px 8px; }
.table tbody tr { border-bottom: 1px solid var(--ink-100); }
.table tbody tr:last-child { border-bottom: none; }

/* Keeps long lists from making the whole page grow forever - the table
   scrolls internally instead, with the header pinned in place. Kept
   shorter than "fill the viewport" on purpose: it leaves headroom above
   for things like a filter bar that can grow taller (e.g. an extra
   dropdown appearing, or the filter row wrapping to two lines) without
   pushing the panel past the screen and forcing the page itself to
   scroll - only the table's own list should ever need to scroll. */
.table-scroll {
  max-height: 46vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--ink-100);
  border-radius: 10px;
}
/* Shorter variant for panels that sit below other content (e.g. dashboard
   history under stat cards) - keeps the whole page fitting the screen
   instead of the panel's own scroll box adding to page height. */
.table-scroll.table-scroll-sm {
  max-height: 260px;
}
.table-scroll .table { margin-bottom: 0; }
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: 0 1px 0 var(--ink-100);
}
.table-scroll tbody tr:last-child { border-bottom: none; }

.mark-input { width: 80px; text-align: center; }

/* Attendance status selector (teacher entry table) */
.attendance-status-group { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.attendance-status-group input[type="radio"] { display: none; }
.attendance-status-group label {
  margin: 0;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--ink-100);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-500);
  white-space: nowrap;
  transition: all 0.15s ease;
}
.attendance-status-group input[value="present"]:checked + label { background: #d1f5e0; border-color: #59c98a; color: #157347; }
.attendance-status-group input[value="absent"]:checked + label  { background: #fbdada; border-color: #e57373; color: #b02a2a; }
.attendance-status-group input[value="late"]:checked + label    { background: #fdecc8; border-color: #e0ad4f; color: #8a5a00; }
.attendance-status-group input[value="excused"]:checked + label { background: #d6ecfb; border-color: #64b5e8; color: #0b5f8a; }
.attendance-remarks-input { min-width: 140px; }
.attendance-progress { height: 6px; border-radius: 4px; }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-500);
}
.empty-state i { font-size: 2.2rem; color: var(--ink-300); margin-bottom: 10px; display: block; }

/* Activity log filter bar - a slightly recessed panel-within-a-panel so the
   filter controls read as one distinct unit above the results. */
.activity-filter-bar {
  background: var(--canvas);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  padding: 16px;
}

@media (max-width: 992px) {
  .app-sidebar { position: fixed; left: -280px; z-index: 40; transition: left 0.2s ease; box-shadow: var(--shadow-md); }
  .app-sidebar.open { left: 0; }
}

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

/* Tablets (iPad portrait and similar) */
@media (max-width: 820px) {
  .app-content { padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .panel { padding: 20px; }
  .table-scroll { max-height: 40vh; }
}

/* Phones */
@media (max-width: 576px) {
  .app-topbar {
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-right: calc(16px + env(safe-area-inset-right));
    gap: 10px;
  }
  .app-content { padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .panel { padding: 16px; border-radius: 12px; }
  .stat-card { padding: 16px; }
  .topbar-title { font-size: 1.05rem; }
  .user-name { display: none; }
  .table-scroll { max-height: 38vh; border-radius: 8px; }
  .table-scroll.table-scroll-sm { max-height: 220px; }
  .auth-visual, .auth-form-wrap { padding: 28px 22px; }
  .auth-card { border-radius: 16px; }
  .btn-sm { padding: 7px 11px; min-height: 34px; }
  .mark-input { width: 68px; }
}

/* ---------- Install prompt bar (PWA "add to home screen") ---------- */
.install-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--brand-700);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.15);
  animation: install-bar-up 0.25s ease;
}
@keyframes install-bar-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.install-bar .install-bar-action {
  font-weight: 700;
  color: var(--brand-700);
  flex-shrink: 0;
}
.install-bar .install-bar-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
  padding: 4px;
}

/* When installed and running standalone (from the home screen), there's no
   browser chrome at all - a couple of small touches make it read as an
   app rather than "a website with no address bar". */
@media (display-mode: standalone) {
  .install-bar { display: none; } /* already installed - never show the prompt */
}

/* ==================================================================
   Student Profile page — a modern digital replica of the institute's
   paper enrollment form (photo, grouped fields, Kurdish/Arabic-aware
   typography for the values admins type in).
   ================================================================== */

.kurdish-text {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, sans-serif;
}

.profile-hero {
  background: linear-gradient(135deg, var(--brand-600), #312e81);
  border-radius: var(--radius);
  padding: 28px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}

.profile-photo-frame {
  width: 108px;
  height: 108px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 3px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-photo-frame i {
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 0.7);
}

.profile-hero-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.profile-hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}
.profile-hero-meta .badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 500;
}

.profile-section {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--ink-100);
  padding: 20px;
  height: 100%;
}
.profile-section-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-700);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 20px;
}
.profile-field label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-500);
  margin-bottom: 2px;
}
.profile-field .value {
  font-weight: 600;
  color: var(--ink-900);
  word-break: break-word;
}
.profile-field .value.empty {
  font-weight: 400;
  color: var(--ink-300);
}
.profile-field .kurdish-label {
  color: var(--ink-500);
  font-size: 0.78rem;
  margin-inline-start: 4px;
}

.profile-extra-photos {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.profile-extra-photo-box {
  width: 130px;
}
.profile-extra-photo-box .frame {
  width: 130px;
  height: 130px;
  border-radius: 10px;
  border: 1px dashed var(--ink-300);
  background: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-extra-photo-box .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-extra-photo-box .frame i {
  color: var(--ink-300);
  font-size: 1.8rem;
}
.profile-extra-photo-box .caption {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-500);
  margin-top: 6px;
}

/* ------------------------------------------------------------------
   Printing (Student Profile → Print button)
   A4 portrait, one clean page: institute logo top-left, institute name
   top-centre, then the student's photo/name and all the data sections
   in a compact 2-column layout. Page margin is 0 (so the browser has no
   room for its own date/URL header & footer) and the real margins are
   padding on the content instead.
   ------------------------------------------------------------------ */
.profile-hero-added { margin-top: 8px; font-size: 0.8rem; opacity: 0.85; }

.print-header { display: none; }

@page { size: A4 portrait; margin: 0; }

@media print {
  /* The on-screen app shell is a fixed-height, clipped, scrolling
     layout — on paper that would cut the page off after one screenful. */
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body {
    font-size: 10pt;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .app-sidebar, .app-topbar, .no-print, .install-bar, .alert { display: none !important; }
  .app-shell, .app-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .app-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 9mm 12mm !important;
  }
  .table-scroll { max-height: none !important; overflow: visible !important; }

  /* --- Header: logo left, institute name centred --- */
  .print-header {
    display: grid;
    grid-template-columns: 26mm 1fr 26mm;
    align-items: center;
    gap: 4mm;
    padding-bottom: 2.5mm;
    margin-bottom: 4mm;
    border-bottom: 1.5pt solid #111;
  }
  .print-header-logo {
    width: 24mm;
    height: 24mm;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .print-header-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .print-header-title { text-align: center; }
  .print-header-name { font-size: 18pt; font-weight: 700; line-height: 1.25; color: #000; }
  .print-header-sub {
    margin-top: 1mm;
    font-size: 10pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #444;
  }

  /* --- Student banner: plain white instead of the screen gradient --- */
  .profile-hero {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border: 1pt solid #888;
    border-radius: 3mm;
    padding: 3mm 4mm !important;
    gap: 5mm !important;
    flex-wrap: nowrap !important;
    margin-bottom: 3mm !important;
    break-inside: avoid;
  }
  .profile-photo-frame {
    width: 26mm;
    height: 33mm;
    border-radius: 2mm;
    border: 1pt solid #555;
    background: #f3f4f6;
  }
  .profile-photo-frame i { color: #9ca3af; }
  .profile-hero-name { font-size: 16pt; color: #000; }
  .profile-hero-meta { font-size: 9.5pt; color: #000; gap: 6px; }
  .profile-hero-added { margin-top: 2mm; font-size: 8.5pt; color: #000; opacity: 1; }
  .profile-hero-meta .badge {
    background: #fff !important;
    color: #000 !important;
    border: 0.5pt solid #777;
  }

  /* --- Data sections: 2 columns, compact, nothing split across pages --- */
  .profile-view-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 3mm;
    margin: 0 !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  .profile-view-row > * {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .profile-view-row > .col-12 { grid-column: 1 / -1; }
  .profile-section {
    border: 1pt solid #999;
    border-radius: 2mm;
    box-shadow: none;
    padding: 2.5mm 3.5mm;
    height: 100%;
    break-inside: avoid;
  }
  .profile-section-title {
    color: #000;
    font-size: 10pt;
    margin-bottom: 2mm;
    padding-bottom: 1.2mm;
    border-bottom: 0.5pt solid #bbb;
  }
  .profile-field-grid { grid-template-columns: 1fr 1fr; gap: 2mm 3mm; }
  .profile-field label { font-size: 7pt; color: #444; margin-bottom: 0; }
  /* keep each Kurdish label in one piece: it wraps to its own line instead of splitting mid-phrase */
  .profile-field .kurdish-label { font-size: 7.5pt; color: #444; display: inline-block; white-space: nowrap; }
  .profile-field .value { font-size: 10pt; color: #000; line-height: 1.35; }
  .profile-field .value.empty { color: #999; }

  .profile-extra-photos { gap: 6mm; flex-wrap: nowrap; }
  .profile-extra-photo-box { width: 30mm; }
  .profile-extra-photo-box .frame {
    width: 30mm;
    height: 30mm;
    border: 0.75pt dashed #777;
    background: #fff;
  }
  .profile-extra-photo-box .caption { color: #000; font-size: 8pt; }
}

/* Add-student form — same idea as .content-fill panels: the page itself
   never scrolls to fit this, only the field area does, capped to a
   fraction of the viewport. The submit button stays outside that
   scrolling area so it's always reachable without hunting for it. */
.form-scroll-area {
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}
.form-scroll-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
}
[data-bs-toggle="collapse"] .bi-chevron-down {
  transition: transform 0.2s ease;
}
[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}