/* ============================================================
   School Result System - Custom CSS
   Most styling is handled by Tailwind CDN. This file holds:
     - Print styles (so only result cards print)
     - Loading overlay flex display
     - Small overrides for nav active state
   ============================================================ */

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

#loading-overlay {
  display: none;
}
#loading-overlay.show {
  display: flex;
}

#toast {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#toast.show {
  display: block;
}

.nav-link.active {
  background-color: #3730a3;
}

/* ============================================================
   ADMIN PAGE — mobile
   The tab bar scrolls horizontally on narrow screens; give it a
   slim, unobtrusive scrollbar so the overflow is discoverable.
   ============================================================ */
.admin-tabbar {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.admin-tabbar::-webkit-scrollbar {
  height: 4px;
}
.admin-tabbar::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.35);
  border-radius: 4px;
}

/* Responsive table: on phones the .resp-table collapses each row into a
   stacked, labelled card instead of a 6-column horizontal-scroll table.
   The label comes from each <td>'s data-label. Above the sm breakpoint
   (640px) it renders as a normal table. */
@media (max-width: 639px) {
  .resp-table thead { display: none; }
  .resp-table,
  .resp-table tbody { display: block; width: 100%; }
  .resp-table .resp-row {
    display: block;
    border: 1px solid #e2e8f0;       /* slate-200 */
    border-radius: 0.5rem;
    padding: 0.25rem 0.25rem;
    margin-bottom: 0.75rem;
    background: #fff;
  }
  /* Labelled cells become two-column (label | value) flex rows. Cells without a
     data-label (e.g. the empty-state colspan message) keep their normal flow. */
  .resp-table .resp-row > td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: right;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #f1f5f9; /* slate-100 */
  }
  .resp-table .resp-row > td[data-label]:last-child { border-bottom: 0; }
  .resp-table .resp-row > td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #475569;                   /* slate-600 */
    text-align: left;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Inputs/selects inside a card cell take the remaining width (overrides
     Tailwind's max-w-xs on the assignment selects). */
  .resp-table .resp-row > td[data-label] select,
  .resp-table .resp-row > td[data-label] input {
    width: 100%;
    max-width: 60%;
  }
  /* A cell holding a multi-control group (marked .resp-stack, e.g. the
     result-release datetime + Set/Clear) needs more room than a 60%-capped single
     input. Stack the label ABOVE the controls and let the group fill the card
     width. (Class-based so it doesn't rely on :has().) */
  .resp-table .resp-row > td[data-label].resp-stack {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .resp-table .resp-row > td[data-label].resp-stack > div { width: 100%; }
  /* min-width:0 lets a datetime-local (which has a wide intrinsic min width from
     its spin/calendar UI) shrink inside the flex group instead of overflowing the
     card; the input still grows to fill via flex:1 1 auto. */
  .resp-table .resp-row > td[data-label].resp-stack input {
    max-width: none; flex: 1 1 auto; min-width: 0;
  }
  /* An empty value/actions cell shouldn't leave a lonely label. */
  .resp-table .resp-row > td[data-label]:empty { display: none; }
}

/* ============================================================
   HS MARKS ENTRY PAGE
   Indigo/violet theme ported from the standalone HS-Marks-Entry
   app. The bare `select` rule is scoped to this page so the
   admin selects keep their default styling.
   ============================================================ */
.hs-serif { font-family: 'DM Serif Display', serif; }

.card-glow {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.15), 0 8px 32px rgba(99,102,241,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

.bg-mesh {
  background-color: #f5f3ff;
  background-image:
    radial-gradient(at 20% 20%, rgba(139,92,246,0.12) 0px, transparent 55%),
    radial-gradient(at 80% 80%, rgba(99,102,241,0.10) 0px, transparent 55%),
    radial-gradient(at 50% 10%, rgba(167,139,250,0.08) 0px, transparent 50%);
}

#page-hs-marks-entry select,
#page-hs-entry-review select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
}
#page-hs-marks-entry select:disabled,
#page-hs-entry-review select:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-submit {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  transition: all 0.2s ease;
}
.btn-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}
.btn-submit:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.step-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: #ede9fe; color: #6366f1;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.2s, color 0.2s;
}
.step-dot.active { background: #6366f1; color: #fff; }
.step-dot.done   { background: #a5b4fc; color: #fff; }
.step-line { height: 1px; width: 24px; background: #e0e7ff; flex-shrink: 0; }

.result-card {
  page-break-inside: avoid;
  page-break-after: always;
}
.result-card:last-child {
  page-break-after: auto;
}

/* Subject table inside result cards */
.subjects-table {
  width: 100%;
  border-collapse: collapse;
}
.subjects-table th,
.subjects-table td {
  border: 1px solid #cbd5e1;
  padding: 6px 10px;
  text-align: left;
  font-size: 0.92rem;
}
.subjects-table th {
  background-color: #f1f5f9;
  font-weight: 600;
}
.subjects-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-row {
  background-color: #fef9c3;
  font-weight: 600;
}

.status-pass {
  color: #15803d;
  font-weight: 700;
}
.status-fail {
  color: #b91c1c;
  font-weight: 700;
}

/* Compact the result-card subject table on small phones so all 5 columns fit */
@media (max-width: 480px) {
  .subjects-table th,
  .subjects-table td {
    padding: 4px 6px;
    font-size: 0.8rem;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
/* Hidden on screen; revealed inside @media print (.print-only rule below). */
.print-only {
  display: none;
}

@media print {
  body {
    background: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide nav, footer, buttons, search UI */
  .no-print,
  nav,
  footer,
  #toast,
  #loading-overlay {
    display: none !important;
  }

  main {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Pages the router hid (class="hidden") stay hidden */
  .page.hidden {
    display: none !important;
  }

  /* On the Home page: hide hero + search form, show only the result card */
  #page-home > div:not(#lookup-result) {
    display: none !important;
  }

  /* Result preview: hide the action buttons row */
  #result-preview-title,
  #result-preview-refresh,
  #result-preview-print {
    display: none !important;
  }

  /* Elements that appear ONLY when printing (hidden on screen, see below). */
  .print-only {
    display: block !important;
  }

  /* HS Results Preview broadsheet: same A4-landscape fit-to-width treatment as
     Entry Review. `print-landscape` is set on <body> by renderHsResultsPreview. */
  body.print-landscape #hs-results-preview-content {
    box-shadow: none !important;
    padding: 0 !important;
  }
  body.print-landscape #hs-results-preview-content table.hs-preview-broadsheet {
    width: 100% !important;
    table-layout: fixed;
    font-size: 9px;
  }
  body.print-landscape #hs-results-preview-content table.hs-preview-broadsheet th,
  body.print-landscape #hs-results-preview-content table.hs-preview-broadsheet td {
    padding: 2px 4px !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body.print-landscape #hs-results-preview-content table.hs-preview-broadsheet th:nth-child(2),
  body.print-landscape #hs-results-preview-content table.hs-preview-broadsheet td:nth-child(2) {
    width: 16% !important;
  }
  /* "Print all classes" view (Results Preview AND Entry Review): each class
     wrapper starts on a fresh page; its heading stays with its table. Scoped to
     .all-class-page so it applies in any print-landscape content container. */
  body.print-landscape .all-class-page {
    break-before: page;
    page-break-before: always;
  }
  body.print-landscape .all-class-page:first-child {
    break-before: auto;
    page-break-before: avoid;
  }
  body.print-landscape .all-class-page > h2 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .result-card {
    box-shadow: none !important;
    border: 1px solid #475569;
    margin: 0 0 12mm 0;
    padding: 10mm !important;
    background: white !important;
  }

  /* HS/HSS Entry Review broadsheet: print on A4 landscape and shrink the table to
     fit the page width on a single sheet. `print-landscape` is set on <body>
     by Pages.renderReviewSheet while that page is active. */
  body.print-landscape #hs-review-content,
  body.print-landscape #hss-review-content {
    box-shadow: none !important;
    padding: 0 !important;
  }
  body.print-landscape #hs-review-content table,
  body.print-landscape #hss-review-content table {
    width: 100% !important;
    table-layout: fixed;
    font-size: 9px;
  }
  body.print-landscape #hs-review-content th,
  body.print-landscape #hs-review-content td,
  body.print-landscape #hss-review-content th,
  body.print-landscape #hss-review-content td {
    padding: 2px 4px !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Give the name column (2nd) roughly double width so names read better;
     table-layout:fixed honours the first row's cell widths. */
  body.print-landscape #hs-review-content th:nth-child(2),
  body.print-landscape #hs-review-content td:nth-child(2),
  body.print-landscape #hss-review-content th:nth-child(2),
  body.print-landscape #hss-review-content td:nth-child(2) {
    width: 16% !important;
  }
}

/* A4 landscape only when the review broadsheet is the active page. A bare
   @page applies to the whole print job, so it is gated by the body class via
   the rule's presence (the class is removed on other pages). */
@page bhss-landscape {
  size: A4 landscape;
  margin: 8mm;
}
body.print-landscape {
  page: bhss-landscape;
}

/* ============================================================
   UTILITY: smooth scroll
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* Input number spinner removal (cleaner look) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}