/* BISE Multan result theme.
   Extracted verbatim from application/views/result_main.php so the Archive
   page uses the identical palette and result-table styling. result_main.php
   keeps its own inline copy untouched - that page is the declaration-day
   critical path and is deliberately not being edited for this. */
    /* BISE Multan design system (same tokens as the laravel12 app's
       resources/js/plugins/vuetify.ts) — Kashi Blue primary, terracotta
       accent, warm paper background instead of pure white/purple. */
    :root {
      --paper: #FBF8F1;
      --paper-2: #F3EDDC;
      --ink: #22303A;
      --ink-soft: #5D6E75;
      --line: #E1D6BA;
      --kashi: #1D7A98;
      --kashi-deep: #0F4A5E;
      --kashi-soft: #DFF0F3;
      --terracotta: #C4622A;
    }

    body {
      background: linear-gradient(to bottom, var(--paper), var(--paper-2));
      min-height: 100vh;
      color: var(--ink);
    }

    @media print {
      body * {
        visibility: hidden !important;
      }

      #results,
      #results * {
        visibility: visible !important;
      }

      #results {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* #results has Bootstrap's .table-responsive class, which sets
           overflow-x: auto — fine for scrolling on screen, but there's no
           "scroll" on a printed page, so anything past the visible width
           was silently clipped instead of scrolled. This is the actual
           cause of columns going missing in print. */
        overflow: visible !important;
      }

      #results table {
        width: 100% !important;
        font-size: 8px !important;
        border-collapse: collapse !important;
      }

      /* Shrunk right down so a full ~9-10 subject result comfortably fits
         one portrait page — this, not page size, is what actually
         controls whether it spills onto a second page. */
      .printtable td {
        padding: 0.1rem 0.25rem !important;
      }

      /* The marks-table column headers (Subject Name/Max Marks/Obtained
         Marks, 9th/10th/Total/Percentile/Relative Grade, Theory/Practical)
         inherit Bootstrap's .h6 sizing, which prints oversized/cramped
         next to the shrunk data rows — knock them down separately. */
      .printtable .rt-col-header {
        font-size: 7px !important;
      }

      /* Deliberately no `size:` here — declaring one (portrait OR
         landscape) makes Chrome/Edge lock the print dialog's orientation
         picker to match it instead of just defaulting to it. Margin alone
         doesn't affect that control, so it's kept. */
      @page {
        margin: 0.6cm;
      }
    }

    .card-style {
      border: none;
      border-radius: 1rem;
      background: #fff;
      box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.05);
    }

    .brand-border {
      border-bottom: 4px solid var(--kashi);
    }

    .btn-primary {
      background-color: var(--kashi);
      border-color: var(--kashi);
    }

    .btn-primary:hover {
      background-color: var(--kashi-deep);
      border-color: var(--kashi-deep);
    }

    .btn-brand {
      color: #fff;
      background-color: var(--kashi);
      border-color: var(--kashi);
    }

    .btn-brand:hover {
      background-color: var(--kashi-deep);
      border-color: var(--kashi-deep);
    }

    .header-logo {
      height: 60px;
    }

    .g-recaptcha {
      transform: scale(0.9);
      transform-origin: 0 0;
    }

    .linegap {
      margin-bottom: 10px;
    }

    .fixsize {
      width: 200px;
    }

    /* The results table (built client-side by displayStudentResultJSON())
       uses Bootstrap's stock .text-primary utility for its headings — this
       makes that resolve to the brand color instead of Bootstrap's default
       blue, without touching any of that JS. */
    .text-primary {
      color: var(--kashi-deep) !important;
    }

    /* Result table visual polish — HTML structure/data built by
       displayStudentResultJSON() is unchanged, only how it's styled. */
    .printtable table {
      border-collapse: separate;
      border-spacing: 0;
    }

    .printtable td {
      padding: 0.55rem 0.75rem;
    }

    .printtable .rt-banner {
      background: var(--kashi-soft);
    }

    .printtable .rt-info-row {
      background: var(--paper-2);
    }

    .printtable .rt-subject-row:nth-child(even) {
      background: #FAFAF7;
    }

    .rt-grade {
      display: inline-block;
      min-width: 2.25rem;
      padding: 0.1rem 0.5rem;
      border-radius: 0.35rem;
      font-weight: 700;
    }

    .rt-grade-a { background: var(--mint-soft, #D9EEE6); color: var(--heading-green, #1B5E44); }
    .rt-grade-b { background: var(--kashi-soft); color: var(--kashi-deep); }
    .rt-grade-c { background: var(--gold-soft, #F2E2B8); color: #7A5C10; }
    .rt-grade-f { background: #F6D9D2; color: #8A2A18; }

    /* Print keeps plain black/white — colored banding is a screen-only
       affordance, not something worth spending ink/toner on. */
    @media print {
      .printtable .rt-banner,
      .printtable .rt-info-row,
      .printtable .rt-subject-row:nth-child(even) {
        background: none !important;
      }
      .rt-grade {
        background: none !important;
        color: inherit !important;
        padding: 0;
      }
    }

    /* Pure CSS spinner for the search-in-progress state — no added
       request/library, just a border-color trick + rotation. */
    .search-spinner {
      display: inline-block;
      width: 1.25rem;
      height: 1.25rem;
      border: 0.2rem solid var(--kashi-soft);
      border-top-color: var(--kashi);
      border-radius: 50%;
      animation: search-spin 0.8s linear infinite;
      vertical-align: middle;
      margin-right: 0.5rem;
    }

    @keyframes search-spin {
      to { transform: rotate(360deg); }
    }