/*
 * The product's one overlay: dialogs and side sheets, from the school's
 * design ("Dialogs & side sheets").
 *
 * Markup comes from <x-overlay> (resources/views/components/overlay.blade.php),
 * behaviour from pa-overlay.js beside this file. Both are plain files served
 * from this server rather than built by Vite, because a routine deploy here is
 * `git pull` without an asset build, and a confirm dialog that silently fails
 * to arrive would leave every action it guards unreachable.
 *
 * The tokens are restated here rather than borrowed from `.pp`: an overlay is
 * moved to the end of <body>, outside whatever page drew it, and it appears on
 * pages that are not the portal's at all.
 *
 * A field's border is --ov-field, #8a8580, 3.65:1 on the white card (WCAG
 * 1.4.11); the buttons keep --ov-line-strong. The dark cut keeps the line
 * its field had.
 */
.pa-ov{
  --ov-ink:#1d1b1a; --ov-body:#2f353c; --ov-muted:#5f6670;
  --ov-line:#e4ded6; --ov-line-strong:#cfc6bb; --ov-field:#8a8580; --ov-sunken:#efebe6; --ov-card:#ffffff;
  --ov-accent:var(--pa-primary, #901212);
  --ov-accent-50:color-mix(in srgb, var(--ov-accent) 8%, #fff);
  --ov-accent-700:color-mix(in srgb, var(--ov-accent) 78%, #000);
  --ov-ok:#1e6b45; --ov-ok-50:#e5f3ec; --ov-warn:#8a5a00; --ov-warn-50:#fdf1d8;
  --ov-bad:#b3261e; --ov-bad-50:#fdecea; --ov-navy:#24245a; --ov-navy-50:#ecedf6;
  /* Above everything else fixed to the page — the bars, toasts, a cookie
     banner — or a bottom sheet's buttons could sit under one of them, and
     the page behind cannot be used while an overlay is open. */
  position:fixed; inset:0; z-index:2100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(29,27,26,.48);
  color:var(--ov-body); font-size:14px; line-height:1.5; text-align:start;
}
.pa-ov[hidden]{ display:none !important; }
[data-bs-theme="dark"] .pa-ov{
  --ov-ink:#f4f1ec; --ov-body:#d9d4ce; --ov-muted:#aaa39b;
  --ov-line:#3a3531; --ov-line-strong:#4d4742; --ov-field:#4d4742; --ov-sunken:#2b2825; --ov-card:#23201e;
  --ov-accent-50:color-mix(in srgb, var(--ov-accent) 22%, #23201e);
  --ov-ok:#8fd3ae; --ov-ok-50:#1d3328; --ov-warn:#f0c36b; --ov-warn-50:#3a2d12;
  --ov-bad:#f2a49e; --ov-bad-50:#3d1f1c; --ov-navy:#c9c9f0; --ov-navy-50:#2a2a44;
}
/* The page behind does not scroll while something sits over it. */
html.pa-ov-open, html.pa-ov-open body{ overflow:hidden; }

/* ── The panel: 400 confirm and timeout · 560 forms and receipts ·
      720 previews · 480 side sheet, full height ─────────────────────── */
.pa-ov-panel{
  position:relative; display:flex; flex-direction:column;
  width:400px; max-width:100%; max-height:calc(100vh - 48px);
  background:var(--ov-card); border-radius:16px; overflow:hidden; outline:0;
  /* A shadow on overlays only: nothing else in the product casts one. */
  box-shadow:0 12px 32px rgba(29,27,26,.14), 0 2px 6px rgba(29,27,26,.08);
  animation:pa-ov-in .16s ease-out;
}
.pa-ov[data-ov-size="form"] .pa-ov-panel{ width:560px; }
.pa-ov[data-ov-size="preview"] .pa-ov-panel{ width:720px; }
.pa-ov[data-ov-size="sheet"]{ justify-content:flex-end; align-items:stretch; padding:0; }
.pa-ov[data-ov-size="sheet"] .pa-ov-panel{
  width:480px; height:100%; max-height:none; border-radius:16px 0 0 16px; animation-name:pa-ov-slide;
}
@keyframes pa-ov-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes pa-ov-slide{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
@keyframes pa-ov-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pa-ov-panel{ animation:none !important; } }

/* ── Anatomy: a header with icon, title and a 12px eyebrow; a 14/16 body;
      a footer with a 1px top line ──────────────────────────────────── */
.pa-ov-head{ display:flex; align-items:flex-start; gap:14px; padding:20px 16px 0 24px; }
.pa-ov-icon{
  flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--ov-sunken); color:var(--ov-ink);
}
.pa-ov-icon svg{ width:20px; height:20px; }
.pa-ov-icon.is-danger{ background:var(--ov-bad-50); color:var(--ov-bad); }
.pa-ov-icon.is-warn{ background:var(--ov-warn-50); color:var(--ov-warn); }
.pa-ov-icon.is-ok{ background:var(--ov-ok-50); color:var(--ov-ok); }
.pa-ov-icon.is-info{ background:var(--ov-navy-50); color:var(--ov-navy); }
.pa-ov-icon.is-person{
  width:48px; height:48px; border-radius:999px; background:var(--ov-accent-50); color:var(--ov-accent);
  font-size:16px; font-weight:700;
}
.pa-ov-titles{ flex:1; min-width:0; padding-top:2px; }
.pa-ov-eyebrow{
  margin:0; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ov-muted);
}
.pa-ov .pa-ov-title{
  margin:2px 0 0; font-size:20px; font-weight:700; line-height:1.3; letter-spacing:normal; color:var(--ov-ink);
  overflow-wrap:anywhere;
}
.pa-ov-sub{ margin:2px 0 0; font-size:13px; color:var(--ov-muted); font-variant-numeric:tabular-nums; }
.pa-ov .pa-ov-x{
  flex:none; width:40px; height:40px; padding:0; border:0; border-radius:8px; background:transparent;
  color:var(--ov-muted); display:grid; place-items:center; cursor:pointer;
}
.pa-ov .pa-ov-x:hover{ background:var(--ov-sunken); color:var(--ov-ink); }
.pa-ov-x svg{ width:18px; height:18px; }
.pa-ov-below{ padding:12px 24px 0; }
.pa-ov-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px 24px 24px; }
.pa-ov-lead{ margin:0; font-size:16px; color:var(--ov-ink); }
.pa-ov-body p{ margin:0; }
.pa-ov-body p + p, .pa-ov-body .pa-ov-note{ margin-top:10px; }
.pa-ov-note{ font-size:13px; color:var(--ov-muted); }
/* What a yes takes with it, listed under the sentence that says so. */
.pa-ov-list{ margin:10px 0 0; padding-left:20px; font-size:14px; color:var(--ov-ink); }
.pa-ov-list li + li{ margin-top:4px; }
.pa-ov-foot{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px 24px;
  border-top:1px solid var(--ov-line); background:var(--ov-card);
}
.pa-ov-aside{ display:flex; align-items:center; gap:8px; min-width:0; }
.pa-ov-actions{ margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }

/* ── Buttons say the verb; the primary sits on the right ─────────────── */
.pa-ov :is(a, button).pa-ov-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:6px 16px; border-radius:8px;
  border:1px solid var(--ov-line-strong); background:var(--ov-card); color:var(--ov-ink);
  font:inherit; font-size:14px; font-weight:600; line-height:1.2; text-align:center; text-decoration:none;
  cursor:pointer; white-space:normal;
}
.pa-ov :is(a, button).pa-ov-btn:hover{ background:var(--ov-sunken); color:var(--ov-ink); }
.pa-ov :is(a, button).pa-ov-btn.is-primary{ background:var(--ov-accent); border-color:var(--ov-accent); color:#fff; }
.pa-ov :is(a, button).pa-ov-btn.is-primary:hover{ background:var(--ov-accent-700); border-color:var(--ov-accent-700); color:#fff; }
.pa-ov :is(a, button).pa-ov-btn.is-danger{ background:#b3261e; border-color:#b3261e; color:#fff; }
.pa-ov :is(a, button).pa-ov-btn.is-danger:hover{ background:#8f1e18; border-color:#8f1e18; color:#fff; }
/* The way out that loses work: quiet, and alone on the left. */
.pa-ov :is(a, button).pa-ov-btn.is-discard{ border-color:transparent; background:transparent; color:var(--ov-bad); padding:6px 12px; }
.pa-ov :is(a, button).pa-ov-btn.is-discard:hover{ background:var(--ov-bad-50); color:var(--ov-bad); }
.pa-ov :is(a, button).pa-ov-btn:is([disabled], [aria-disabled="true"]){
  background:var(--ov-sunken); border-color:var(--ov-sunken); color:var(--ov-muted); cursor:not-allowed;
}
.pa-ov-btn svg{ width:18px; height:18px; flex:none; }
.pa-ov :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--ov-accent); outline-offset:2px; box-shadow:none;
}
.pa-ov a:not(.pa-ov-btn){ color:var(--ov-accent); font-weight:600; text-decoration:none; }
.pa-ov a:not(.pa-ov-btn):hover{ color:var(--ov-accent-700); text-decoration:underline; }
/* A control that reads as a link but is a button. */
.pa-ov .pa-ov-link{
  padding:0; border:0; background:none; color:var(--ov-accent); font:inherit; font-weight:600; cursor:pointer;
}
.pa-ov .pa-ov-link:hover{ color:var(--ov-accent-700); text-decoration:underline; }

/* ── Parts the patterns share ────────────────────────────────────────── */
/* A word and a tint, never the tint alone. */
.pa-ov-chip{
  display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; line-height:18px;
  padding:2px 8px; border-radius:999px; background:var(--ov-sunken); color:var(--ov-body); white-space:nowrap;
}
.pa-ov-chip.is-ok{ background:var(--ov-ok-50); color:var(--ov-ok); }
.pa-ov-chip.is-warn{ background:var(--ov-warn-50); color:var(--ov-warn); }
.pa-ov-chip.is-bad{ background:var(--ov-bad-50); color:var(--ov-bad); }
.pa-ov-chip.is-info{ background:var(--ov-navy-50); color:var(--ov-navy); }
.pa-ov-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pa-ov-num{ font-variant-numeric:tabular-nums; }
.pa-ov-code{ font-variant-numeric:tabular-nums; background:var(--ov-sunken); border-radius:4px; padding:1px 6px; }

.pa-ov-field{ margin-top:16px; }
.pa-ov-field > label, .pa-ov-legend{
  display:block; margin:0 0 6px; padding:0; font-size:13px; font-weight:600; color:var(--ov-ink);
}
.pa-ov .pa-ov-input{
  width:100%; min-height:40px; box-sizing:border-box; padding:6px 12px; border:1px solid var(--ov-field);
  border-radius:8px; background:var(--ov-card); color:var(--ov-ink); font:inherit; font-size:14px;
}
.pa-ov .pa-ov-input.is-bad{ border-color:var(--ov-bad); }
.pa-ov .pa-ov-input.is-ok{ border-color:var(--ov-ok); }
.pa-ov-hint{ margin-top:6px; font-size:12px; color:var(--ov-muted); }
.pa-ov-hint.is-bad{ color:var(--ov-bad); }
.pa-ov-hint.is-ok{ color:var(--ov-ok); }
.pa-ov-checks{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.pa-ov-check{ display:flex; align-items:center; gap:8px; min-height:32px; margin:0; font-size:14px; color:var(--ov-body); }
.pa-ov-check input{ width:18px; height:18px; margin:0; accent-color:var(--ov-accent); }
.pa-ov-check.is-off{ color:var(--ov-muted); }
.pa-ov-check small{ font-size:12px; color:var(--ov-muted); }
.pa-ov fieldset{ border:0; margin:16px 0 0; padding:0; min-width:0; }

.pa-ov-quote{
  margin-top:12px; padding:10px 12px; border-radius:8px; background:var(--ov-sunken);
  font-size:13px; line-height:1.45; color:var(--ov-body); overflow-wrap:anywhere;
}
.pa-ov-box{ border:1px solid var(--ov-line); border-radius:12px; padding:12px; }
.pa-ov-person{ display:flex; align-items:center; gap:12px; }
.pa-ov-av{
  flex:none; width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background:var(--ov-navy-50); color:var(--ov-navy); font-size:14px; font-weight:700;
}
.pa-ov-person-main{ flex:1; min-width:0; }
.pa-ov-person-name{ font-size:14px; font-weight:600; color:var(--ov-ink); }
.pa-ov-person-sub{ font-size:13px; color:var(--ov-muted); }

/* A definition list read as a two-column card: the receipt. */
.pa-ov-dl{
  display:grid; grid-template-columns:minmax(0, 160px) minmax(0, 1fr); margin:16px 0 0;
  border:1px solid var(--ov-line); border-radius:12px; overflow:hidden; font-size:13px;
}
.pa-ov-dl dt{ padding:10px 14px; background:var(--ov-sunken); color:var(--ov-muted); font-weight:400; }
.pa-ov-dl dd{ margin:0; padding:10px 14px; color:var(--ov-ink); overflow-wrap:anywhere; }
.pa-ov-dl :is(dt, dd):nth-child(n+3){ border-top:1px solid var(--ov-line); }
.pa-ov-big{ font-size:44px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--ov-ink); font-variant-numeric:tabular-nums; }

.pa-ov-table{ width:100%; border-collapse:collapse; font-size:13px; }
.pa-ov-table th{
  padding:8px 10px; background:var(--ov-sunken); color:var(--ov-muted); font-weight:600; text-align:left;
}
.pa-ov-table td{ padding:8px 10px; border-top:1px solid var(--ov-line); color:var(--ov-body); vertical-align:top; }
.pa-ov-table .is-num{ text-align:right; font-variant-numeric:tabular-nums; }
.pa-ov-table td strong{ color:var(--ov-ink); }
.pa-ov-framed{ border:1px solid var(--ov-line); border-radius:12px; overflow:hidden; }

/* Label-and-value rows, e.g. "Class teacher · Ms. Nazia Rahman". */
.pa-ov-rows{ margin:0; }
.pa-ov-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:13px; }
.pa-ov-row + .pa-ov-row{ border-top:1px solid var(--ov-sunken); }
.pa-ov-row > :first-child{ color:var(--ov-muted); }
.pa-ov-row > :last-child{ color:var(--ov-ink); font-weight:600; text-align:right; font-variant-numeric:tabular-nums; min-width:0; }
.pa-ov-section + .pa-ov-section{ margin-top:18px; }
.pa-ov-section-head{
  margin:0 0 8px; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ov-muted);
}
.pa-ov-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.pa-ov-tile{ border:1px solid var(--ov-line); border-radius:12px; padding:14px; }
.pa-ov-tile-label{ font-size:12px; color:var(--ov-muted); }
.pa-ov-tile-value{ margin-top:4px; font-size:20px; font-weight:700; color:var(--ov-ink); font-variant-numeric:tabular-nums; }
.pa-ov-tile-sub{ font-size:13px; color:var(--ov-muted); }
.pa-ov-empty{ font-size:13px; color:var(--ov-muted); }

/* The countdown bar. */
.pa-ov-meter{ margin-top:16px; height:6px; border-radius:999px; background:var(--ov-sunken); overflow:hidden; }
.pa-ov-meter > span{ display:block; height:100%; width:100%; border-radius:999px; background:#e8a317; }

/* Tabs inside a side sheet. */
.pa-ov-tabs{ display:flex; gap:16px; padding:8px 24px 0; border-bottom:1px solid var(--ov-line); overflow-x:auto; }
.pa-ov .pa-ov-tab{
  min-height:44px; padding:0 4px; border:0; border-bottom:2px solid transparent; background:transparent;
  color:var(--ov-body); font:inherit; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.pa-ov .pa-ov-tab[aria-selected="true"]{ color:var(--ov-accent); font-weight:600; border-bottom-color:var(--ov-accent); }

/* A flash message inside a dialog, e.g. why a send did not go. */
.pa-ov-alert{ margin-top:12px; padding:10px 12px; border-radius:8px; font-size:13px; }
.pa-ov-alert.is-bad{ background:var(--ov-bad-50); color:var(--ov-bad); }
.pa-ov-alert.is-warn{ background:var(--ov-warn-50); color:var(--ov-warn); }

/* ── Under 600px wide every dialog becomes a bottom sheet with 48px buttons ── */
@media (max-width:599.98px){
  .pa-ov, .pa-ov[data-ov-size="sheet"]{ align-items:flex-end; justify-content:center; padding:0; }
  .pa-ov .pa-ov-panel, .pa-ov[data-ov-size] .pa-ov-panel{
    width:100%; max-width:100%; height:auto; max-height:92vh; border-radius:16px 16px 0 0; animation-name:pa-ov-rise;
  }
  .pa-ov[data-ov-size="sheet"] .pa-ov-panel{ height:92vh; }
  .pa-ov-head{ padding:16px 8px 0 16px; }
  .pa-ov-below{ padding:12px 16px 0; }
  .pa-ov-tabs{ padding:8px 16px 0; }
  .pa-ov-body{ padding:12px 16px 20px; }
  .pa-ov-foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .pa-ov-aside{ width:100%; }
  .pa-ov-actions{ width:100%; margin-left:0; }
  .pa-ov-actions > *{ flex:1 1 0; }
  .pa-ov :is(a, button).pa-ov-btn{ min-height:48px; }
  .pa-ov .pa-ov-x{ width:48px; height:48px; }
  .pa-ov-dl{ grid-template-columns:minmax(0, 120px) minmax(0, 1fr); }
  .pa-ov-big{ font-size:36px; }
}