/* ═══════════════════════════════════════════════════════════════════
   Pupil — site-wide styling.
   Ported from the original inc/head.php + Menu.php <style> blocks and
   adapted from Bootstrap 4 / AdminLTE 3 to Bootstrap 5 / AdminLTE 4.
   ═══════════════════════════════════════════════════════════════════ */

:root { --pupil-primary: #4a6fdb; --pupil-ink: #1a2236; }

body { font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif; }

/* ── Toast ───────────────────────────────────────────────────────── */
#pupil-toast {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  min-width: 260px; max-width: 380px;
  border-radius: 8px; padding: 13px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  font-size: 14px; font-weight: 500;
  animation: pupilSlideIn .3s ease;
}
#pupil-toast.toast-success { background:#d1fae5; color:#065f46; border-left:4px solid #10b981; }
#pupil-toast.toast-error   { background:#fee2e2; color:#991b1b; border-left:4px solid #ef4444; }
#pupil-toast.toast-info    { background:#dbeafe; color:#1e40af; border-left:4px solid #3b82f6; }
@keyframes pupilSlideIn { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Table action buttons / badges ───────────────────────────────── */
.btn-action { padding: 3px 10px; font-size: 12px; }
.badge-active    { background:#d1fae5; color:#065f46; }
.badge-inactive  { background:#fee2e2; color:#991b1b; }
.badge-on_hold   { background:#fef3c7; color:#92400e; }
.badge-completed { background:#dbeafe; color:#1e40af; }
.status-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; display: inline-block; }

/* ── Avatar initials ─────────────────────────────────────────────── */
.stu-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: #dbeafe; color: #1e40af;
}

.req { color: #e53e3e; margin-left: 2px; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card { box-shadow: 0 1px 6px rgba(0,0,0,.08) !important; border: none; border-radius: 12px; overflow: hidden; }
.card.card-outline { border-top: 3px solid #dde4ed; }
.card.card-primary.card-outline   { border-top-color: #4a6fdb; }
.card.card-info.card-outline      { border-top-color: #3b82f6; }
.card.card-secondary.card-outline { border-top-color: #8a9ab0; }
.card-header { background: #fff; border-bottom: 1px solid #eef0f3; }
.card-header .card-title { font-size: 14.5px; font-weight: 700; color: #1a2236; }

/* ── Modern form fields (site-wide) ──────────────────────────────── */
label { font-size: 12.5px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.form-group { margin-bottom: 18px; }
.form-control, .form-select {
  border: 1.5px solid #dde4ed; border-radius: 10px;
  padding: 10px 14px; line-height: 1.4;
  color: #222; background: #f9fbff; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control::placeholder { color: #b3bccb; }
.form-control:focus, .form-select:focus {
  border-color: #4a6fdb; background: #fff;
  box-shadow: 0 0 0 3px rgba(74,111,219,.12);
}
.form-control[readonly], .form-control:disabled { background: #f2f4f7; color: #8a94a3; border-color: #e5e9f0; }
.form-control.is-invalid { border-color: #ef4444; }
textarea.form-control { border-radius: 12px; resize: vertical; }

/* Buttons */
.btn { border-radius: 8px; font-weight: 600; }
.btn-sm { border-radius: 7px; }
.btn-primary { --bs-btn-bg: #4a6fdb; --bs-btn-border-color: #4a6fdb; --bs-btn-hover-bg: #3b5bdb; --bs-btn-hover-border-color: #3b5bdb; }

/* ── Mobile quick-action bar ─────────────────────────────────────── */
.mobile-action-bar { gap: 6px; flex: 1 1 auto; }
.mobile-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  flex: 1 1 0; padding: 6px 10px; border-radius: 18px;
  font-size: 11px; font-weight: 600; color: #495057; text-decoration: none;
  background: #f1f3f9; border: 1px solid #e5e9f0; white-space: nowrap;
}
.mobile-action-btn:hover, .mobile-action-btn:active { background: #e6e9f5; color: #212529; }
.mobile-action-btn.mobile-action-danger { color: #dc3545; background: #fdecea; border-color: #f5c2c7; }

/* ── Mobile row-cards (replace tables on phones) ─────────────────── */
.row-card-list { padding: 10px; }
.row-card { background:#fff; border:1px solid #eef0f3; border-radius:12px; padding:12px 14px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.row-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
.row-card-id { display:flex; align-items:center; gap:9px; min-width:0; }
.row-card-name { font-weight:700; font-size:14px; line-height:1.25; word-break:break-word; }
.row-card-sub { font-size:11.5px; color:#8a9ab0; }
.row-card-body { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; font-size:12.5px; margin-bottom:10px; }
.row-card-body.rc-1col { grid-template-columns:1fr; }
.rc-label { color:#8a9ab0; font-size:10px; text-transform:uppercase; letter-spacing:.4px; display:block; margin-bottom:1px; }
.rc-value { color:#333; font-weight:600; word-break:break-word; }
.row-card-actions { display:flex; gap:6px; border-top:1px solid #f1f3f9; padding-top:10px; }
.row-card-actions .btn { flex:1; }
.row-card-empty { text-align:center; color:#8a9ab0; padding:30px 10px; font-size:13px; }

/* Course row-card: payment-method list + fee/students split */
.rc-methods { display:flex; flex-direction:column; gap:6px; margin-top:3px; }
.rc-method {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px;
  font-size:12.5px; line-height:1.35; font-weight:400;
  padding:6px 9px; background:#f7f8fb; border:1px solid #eef0f3; border-radius:8px;
}
.rc-method-tag {
  flex:none; font-weight:700; font-size:11px; letter-spacing:.2px;
  background:#eef2ff; color:#4a6fdb; border-radius:6px; padding:2px 7px; white-space:nowrap;
}
.rc-method-tag .fa-star { font-size:8px; color:#f0a500; margin-right:3px; }
.rc-method-detail { color:#5b6472; }
.rc-method.is-retired { opacity:.55; }
.rc-method.is-retired .rc-method-tag { background:#eceef2; color:#8a9ab0; }
.rc-method-badge { font-size:9px; align-self:center; }

.rc-split { display:flex; gap:26px; }
.rc-split .rc-item { flex:none; }
.rc-fee { font-size:15px; font-weight:700; color:#1f2937; }

/* ── Course "methods" editor (templates/courses/_methods_editor.html.twig) ── */
.cm-card { background:#fff; border-color:#e6e9f0 !important; padding:.6rem .7rem !important; margin-bottom:.5rem !important; }
.cm-grid { margin-bottom:0; }
.cm-grid > [class*="col-"] { display:flex; flex-direction:column; margin-bottom:.4rem !important; }
.cm-label {
  display:block; margin-bottom:2px;
  font-size:10.5px; font-weight:600; line-height:1.15; color:#8a9ab0;
  text-transform:uppercase; letter-spacing:.3px;
}
.cm-label .req { color:#dc3545; }
/* bottom-align every input so a label that wraps to 2 lines never offsets its row */
.cm-grid .form-control, .cm-grid .form-select { margin-top:auto; }
.cm-grid .form-control-sm, .cm-grid .form-select-sm { height:32px; min-height:32px; padding-top:.2rem; padding-bottom:.2rem; }
.cm-foot { border-top:1px solid #f1f3f9; margin-top:.1rem; padding-top:.45rem; }
.cm-foot .form-check { margin-bottom:0; }
.cm-foot .form-check-label { color:#5b6472; }

/* ── Menu hub tiles ──────────────────────────────────────────────── */
.menu-section-title { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#8a9ab0; margin:22px 2px 10px; }
.menu-section-title:first-child { margin-top:4px; }
.menu-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:576px) { .menu-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px) { .menu-grid { grid-template-columns:repeat(4,1fr); } }
.menu-tile {
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:#fff; border-radius:12px; padding:16px 14px;
  text-decoration:none; color:#212529; box-shadow:0 1px 6px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .12s ease; min-height:96px;
}
.menu-tile:hover, .menu-tile:active { color:#212529; transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.menu-tile-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#eef2ff; color:#4a6fdb; font-size:17px; flex-shrink:0; }
.menu-tile.menu-danger .menu-tile-icon { background:#fee2e2; color:#dc3545; }
.menu-tile-label { font-size:13.5px; font-weight:700; line-height:1.25; }
.menu-tile-sub { font-size:11px; color:#8a9ab0; }

/* ── Auth screens (login / entry-login / welcome) ────────────────── */
.auth-body { min-height:100vh; background:#1a2236; margin:0; }
.auth-card { width:100%; max-width:400px; background:#fff; border-radius:14px; padding:40px 36px; box-shadow:0 8px 32px rgba(0,0,0,.3); }
.auth-brand { margin-bottom:28px; }
.auth-brand .auth-logo { width:56px; height:56px; object-fit:contain; }
.auth-brand h4 { font-weight:700; color:#1a2236; margin:8px 0 2px; font-size:22px; }
.auth-brand p { color:#8a9ab0; font-size:13px; margin:0; }
.auth-alert { border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:16px; }
.auth-alert-error   { background:#fee2e2; color:#991b1b; }
.auth-alert-success  { background:#d1fae5; color:#065f46; }
.auth-alert-info    { background:#dbeafe; color:#1e40af; }
.btn-auth { background:#4a6fdb; color:#fff; border:none; border-radius:8px; height:42px; font-weight:600; font-size:15px; width:100%; }
.btn-auth:hover { background:#3b5bdb; color:#fff; }
.btn-auth:disabled { opacity:.5; cursor:not-allowed; }

/* PIN inputs on entry-login / kiosk */
.pin-input { letter-spacing:4px; text-align:center; }

/* ── Mobile-first tweaks ─────────────────────────────────────────── */
input, select, textarea { font-size: 16px; }
@media (min-width: 576px) { input, select, textarea { font-size: 14px; } }
@media (max-width: 575.98px) {
  .app-content { padding-left:10px; padding-right:10px; }
  .btn { min-height:40px; }
  .table td, .table th { padding:8px 6px; font-size:13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Dedicated tablet — installed PWA, touch, no browser chrome.
   Target viewports: 800 x 1202 portrait  /  1280 x 722 landscape
   (pointer: coarse, hover: none, devicePixelRatio 1.5).

   Portrait (800px) lands in Bootstrap's `md` band, so the phone-only
   treatments that used to stop at `sm` (576) — row-cards instead of
   wide tables, and the in-app Back/Home/Logout bar — are carried up
   to `lg` (992). Landscape (1280px) is >= lg and keeps the tables.
   ═══════════════════════════════════════════════════════════════════ */

/* A page must never scroll sideways on the tablet. Wide tables still
   scroll inside their own .table-responsive box. */
html, body { overflow-x: hidden; }
.app-wrapper, .app-main, .app-content > .container-fluid { max-width: 100%; }

/* Touch: give every interactive target a finger-sized hit area. */
@media (pointer: coarse) {
  .btn        { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm     { min-height: 40px; }
  /* row-level icon buttons stay compact so table rows don't balloon */
  .btn-action { min-height: 34px; padding: 6px 12px; font-size: 14px; }
  .form-control, .form-select { min-height: 44px; }
  .input-group-sm > .form-control,
  .input-group-sm > .form-select,
  .input-group-sm > .btn { min-height: 40px; }
  .table td, .table th        { padding: 10px 10px; }
  .row-card-actions .btn      { min-height: 44px; }
  .sidebar-menu .nav-link     { padding-top: .65rem; padding-bottom: .65rem; }
  .dropdown-item              { padding-top: .55rem; padding-bottom: .55rem; }
  .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* Tablet portrait band (sm .. just below lg): the row-card list and the
   quick-action bar are visible here — scale them up from phone size. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .mobile-action-bar   { gap: 10px; max-width: 460px; }
  .mobile-action-btn   { font-size: 13px; padding: 9px 16px; border-radius: 22px; }
  .row-card            { padding: 14px 16px; }
  .row-card-name       { font-size: 15px; }
  .row-card-body:not(.rc-1col) { grid-template-columns: repeat(3, 1fr); }
  .menu-tile           { min-height: 108px; }
}

/* Short landscape on the INSTALLED PWA (the 722px-tall standalone
   viewport): claw back the vertical space eaten by chrome so more rows
   fit. Gated to display-mode: standalone so laptop browsers at
   1366x768 keep their normal spacing and footer. */
@media all and (display-mode: standalone) and (orientation: landscape) and (max-height: 800px) {
  .app-content-header { padding-top: .5rem; padding-bottom: .5rem; }
  .app-content        { padding-top: .75rem; }
  .card               { margin-bottom: .75rem; }
  .card-header        { padding-top: .5rem; padding-bottom: .5rem; }
  .app-main .app-footer { display: none; }
  /* denser rows so more of the list fits in the 722px-tall viewport */
  .table td, .table th { padding: 7px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Error pages (404 / 403 / 419 / 500 / 503) — templates/error.html.twig
   Mirrors the auth screens: navy ground, white card, brand blue.
   Each status sets its own accent via --err-accent (inline on .err-stage).
   ═══════════════════════════════════════════════════════════════════ */
.err-body { margin: 0; }
.err-stage {
  position: relative; overflow: hidden; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 24px;
  background: radial-gradient(125% 80% at 50% 0%, #232d47 0%, #1a2236 46%, #141b2d 100%);
}
.err-iris {
  position: absolute; left: 50%; top: 50%; width: 900px; height: 900px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .55;
  background: repeating-radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--err-accent, #3b82f6) 22%, transparent) 0 1.5px,
    transparent 1.5px 52px);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 2%, transparent 66%);
          mask: radial-gradient(circle at 50% 50%, #000 2%, transparent 66%);
}
.err-card {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: #fff; border-radius: 14px; padding: 40px 38px 26px;
  box-shadow: 0 8px 32px rgba(0,0,0,.34);
  animation: errCardIn .44s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes errCardIn { from { opacity: 0; transform: translateY(12px); } }
.err-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; text-decoration: none; }
.err-brand:hover .err-wordmark { text-decoration: underline; }
.err-logo { width: 40px; height: 40px; object-fit: contain; }
.err-wordmark { font-size: 18px; font-weight: 700; color: #1a2236; line-height: 1.05; }
.err-tagline { font-size: 12px; color: #8a9ab0; margin-top: 2px; }
.err-code {
  font-size: 80px; font-weight: 700; line-height: .98; letter-spacing: -2.5px;
  color: var(--err-accent, #3b82f6); font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.err-title { font-size: 22px; font-weight: 700; color: #1a2236; margin: 0 0 8px; }
.err-msg { font-size: 14.5px; line-height: 1.58; color: #4a5568; margin: 0 0 24px; }
.err-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.err-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: 8px; font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.err-btn-primary { background: #4a6fdb; color: #fff; }
.err-btn-primary:hover { background: #3b5bdb; color: #fff; }
.err-btn-ghost { color: #4a6fdb; }
.err-btn-ghost:hover { background: #eef2ff; color: #3b5bdb; }
.err-btn:focus-visible { outline: 3px solid rgba(74,111,219,.4); outline-offset: 2px; }
.err-ref {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef0f3;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5; color: #8a9ab0; word-break: break-all;
}
@media (max-width: 440px) {
  .err-card { padding: 32px 24px 22px; }
  .err-code { font-size: 64px; }
  .err-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .err-card { animation: none; } }

/* ── Detail pages: collapsible sections + labelled fields ─────────── */
/* Used by student profile and any admin detail view via
   templates/partials/detail.html.twig                                */
[x-cloak] { display: none !important; }

.dt-acc    { background:#fff; border:1px solid #e5e9f0; border-radius:12px; overflow:hidden;
             box-shadow:0 1px 6px rgba(0,0,0,.08); }
.dt-sec    { border-bottom:1px solid #e5e9f0; }
.dt-sec:last-child { border-bottom:0; }
.dt-sec-hd { width:100%; text-align:left; border:0; background:#fff; padding:10px 15px;
             font-size:13px; font-weight:700; color:#1a2236; cursor:pointer;
             display:flex; align-items:center; }
.dt-sec-hd:hover { background:#f8fafc; }
.dt-caret       { transition:transform .18s; font-size:11px; color:#94a3b8; }
.dt-caret-open  { transform:rotate(90deg); }
.dt-sec-bd { padding:4px 15px 14px; }

.dt-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 16px; }
.dt-grid.one { grid-template-columns:1fr; }
@media (max-width:640px) { .dt-grid { grid-template-columns:repeat(2,1fr); } }
.dt-label { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:#6c7a92; font-weight:700; }
.dt-value { font-size:13.5px; color:#1a2236; font-weight:500; }
.dt-value small { display:block; color:#6c7a92; font-weight:400; }
.dt-add   { font-size:12px; color:#4a6fdb; font-weight:600; text-decoration:none; }
.dt-add:hover { text-decoration:underline; }
.dt-empty { color:#94a3b8; }

/* fees mini-widget */
.fee-bar    { height:9px; border-radius:999px; background:#eef2f7; overflow:hidden; margin:4px 0 3px; }
.fee-bar > i { display:block; height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); }
.fee-nums   { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; text-align:center; }
.fee-nums div { background:#f8fafc; border:1px solid #e5e9f0; border-radius:10px; padding:8px 6px; }
.fee-nums .n { font-size:15px; font-weight:700; }
.fee-nums .t { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#6c7a92; }

/* profile identity rail */
.profile-photo { width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid #dbeafe; }
.stu-avatar    { width:88px; height:88px; font-size:26px; background:#dbeafe; color:#1d4ed8; border-radius:50%;
                 display:flex; align-items:center; justify-content:center; font-weight:700; }

/* timeline */
.tl-item { position:relative; padding-left:26px; padding-bottom:12px; }
.tl-item:not(:last-child)::before { content:''; position:absolute; left:9px; top:18px; bottom:0; width:2px; background:#e8ecf4; }
.tl-dot  { position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
           display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; }
.tl-item p { font-size:13px; color:#5a6a82; margin:2px 0; }

/* ═══════════════════════════════════════════════════════════════════
   Sidebar — dock it to the FULL page height (not just one viewport).
   AdminLTE caps .app-sidebar at max-height:100vh, so on a page taller
   than the viewport its coloured background stops partway down and the
   body ground shows through at bottom-left. Let the sidebar element
   stretch across its full grid column; keep the brand + menu pinned in
   view and scrolling on their own.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .sidebar-expand-lg .app-sidebar,
  .sidebar-expand-lg.layout-fixed .app-sidebar {
    max-height: none;
    align-self: stretch;
  }
  .sidebar-expand-lg .app-sidebar > .sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .sidebar-expand-lg .app-sidebar > .sidebar-wrapper {
    position: sticky;
    top: calc(3.5rem + 1px);           /* .sidebar-brand height + its border */
    height: calc(100vh - 3.5rem - 1px);
    max-height: calc(100vh - 3.5rem - 1px);
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Add / Edit student form — one clean column of cards, a strict
   two-field grid, sensible field widths on tablet + desktop.
   templates/students/records/form.html.twig
   ═══════════════════════════════════════════════════════════════════ */

/* Cap the form so fields never stretch to an unreadable width on a
   wide monitor; full-bleed on tablet and phone. */
.records-form { max-width: 1060px; }
.records-form > form > .card,
.records-form > .card { margin-bottom: 1rem; }
.records-form .card-header .card-title { margin: 0; }

/* Each grid cell is a column: label on top, control pinned to the
   bottom. A label that wraps to two lines in one cell then no longer
   pushes its input out of line with the neighbouring field. */
.card-body > .row > [class*="col-"].form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;                    /* row gutter (g-3) owns the spacing */
}
.card-body > .row > [class*="col-"].form-group > label:first-child {
  margin-bottom: 6px;
}
.card-body > .row > [class*="col-"].form-group > .form-control,
.card-body > .row > [class*="col-"].form-group > .form-select,
.card-body > .row > [class*="col-"].form-group > textarea {
  margin-top: auto;                    /* bottom-align the control */
}

/* Read-only Student Code: clearly not an editable field. */
.records-form #f-student_code .form-control[readonly] {
  background: #eef1f5;
  color: #5a6a82;
  font-weight: 600;
  letter-spacing: .3px;
}