/* =====================================================================
   REMIS — THEME LAYER
   Ribaad Technology · Ribaad Education Management Information System
   ---------------------------------------------------------------------
   HOW THIS WORKS, AND WHY IT IS ONE FILE.

   The system has style.css plus seventeen module stylesheets, and all of
   them read the same :root tokens. This file loads LAST and retunes
   those tokens, so the whole system re-skins from one place. Nothing
   above it is edited: no class renamed, no markup touched. Rollback is
   deleting one <link>.

   Where a token cannot express the change, there are a small number of
   targeted overrides below. Each one says what it is fixing. Resist
   adding more — the moment this file starts restyling components one by
   one it stops being a theme and becomes a second stylesheet to keep in
   step with the first.

   ---------------------------------------------------------------------
   THE DESIGN, AND THE REASONING

   WHO USES THIS. Registrars, head teachers and education officers, on
   the same four or five screens all day, often on a modest laptop or a
   phone. Nobody is here to be delighted; they are here to find a child's
   record and be sure it is the right child. The design's job is to make
   the data legible and the state of things obvious, and then get out of
   the way.

   WHAT CHANGED, AND WHY.

   1. The card grid became a strip. The dashboard was eight identical
      rounded boxes, each with its own border and shadow, arranged in a
      grid — the default SaaS treatment, and it gives eight numbers the
      same weight as each other and as the panel behind them. They are
      now one continuous band divided by hairlines. Fewer edges, one
      object, and the numbers can be read across.

   2. Shadows mean "floating", not "important". Static panels get a
      hairline and space. Shadow is kept for things that genuinely sit
      above the page: modals, dropdowns, the mobile sidebar. When
      everything is raised, nothing is.

   3. The table header lost its solid navy band. On a register of two
      hundred children that band is the loudest thing on screen and it is
      not the data. It is now a light rule with sentence-case labels.

   4. Row actions rest, and wake on hover. Every row carried a filled red
      delete button, so the most destructive action on the page was also
      the most visible thing in it. The controls now sit quiet and come
      up under the pointer; delete takes its red only when reached for.

   5. The ground turned warm. The old paper was a cool blue-grey, which
      put it in competition with the navy. A warm near-neutral leaves
      navy as the only strong colour in the room, so it can mean
      something when it appears.

   6. Motion answers actions only. Hover, press, open, focus. There are
      no entrance animations: a register that fades in every time is a
      register you wait for. prefers-reduced-motion turns off what is
      left.

   WHAT WAS DELIBERATELY LEFT ALONE. The navy is Ribaad's, sampled from
   the company mark; a redesign is not a licence to repaint somebody's
   identity. The ten sidebar icon colours stay — they are how people find
   a module by shape and colour rather than by reading eleven labels.

   @media print stands the whole layer down, so report cards, ID cards,
   transcripts and receipts print exactly as they did before.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS — the whole re-skin, in one block
   --------------------------------------------------------------------- */
:root{
    /* Ground and surfaces. Warm, low-chroma, so navy is the only strong
       colour on the page. */
    /* The ground is a proper warm grey, not an almost-white. At three
       percent off white the panels did not read as panels — the whole
       screen was one flat sheet. White surfaces now sit on it clearly,
       which is what makes the panel borders quiet enough to keep. */
    --paper:#EEECE6;
    --bg:#EEECE6;
    --surface:#FFFFFF;
    --surface-2:#F7F5F1;
    --surface-input:#FFFFFF;

    /* Ink. Slightly cooler and deeper than before: on a warm ground it
       reads as black without being black. */
    --ink:#16202B;
    --text:#16202B;
    --text-strong:#0C1722;
    --text-muted:#5C6874;
    --text-faint:#8B95A0;

    /* Hairlines, warmed to match the ground. A border should be the
       quietest thing that still separates two things. */
    --line:#E5E3DE;
    --border:#E5E3DE;
    --border-strong:#D3D0C9;

    /* Corners: a small, consistent radius. One radius on a button and a
       different one on the panel around it is a tell, not a hierarchy. */
    --radius:10px;
    --radius-lg:14px;

    /* Elevation is reserved for things that float. */
    --shadow-sm:none;
    --shadow-md:0 2px 4px rgba(16,32,48,.04), 0 8px 24px rgba(16,32,48,.06);
    --shadow-lg:0 24px 64px rgba(10,22,36,.22);
    --shadow-pop:0 12px 32px rgba(12,26,42,.14);

    --focus-ring:0 0 0 3px rgba(47,123,234,.28);
    --topbar-bg:#FFFFFF;

    /* Motion. One duration and one curve, used everywhere, so the
       interface moves like one thing. */
    --t-fast:120ms;
    --t:180ms;
    --ease:cubic-bezier(.2,.6,.3,1);
}

html[data-theme="dark"]{
    --paper:#0F1519;
    --bg:#0F1519;
    --surface:#161D23;
    --surface-2:#1B242B;
    --surface-input:#141B21;
    --line:#28323A;
    --border:#28323A;
    --border-strong:#38444E;
    --shadow-sm:none;
    --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --focus-ring:0 0 0 3px rgba(91,147,238,.34);
}

/* ---------------------------------------------------------------------
   2. TYPE — one family, a tighter scale
   --------------------------------------------------------------------- */
body{
    font-feature-settings:"cv05" 1, "ss01" 1, "tnum" 0;
    -webkit-font-smoothing:antialiased;
    letter-spacing:-0.004em;
}

/* Numbers in tables and figures line up in columns. A register where
   the digits do not align is a register that is harder to scan for the
   one wrong value. */
.ss-table td, .ss-table th,
.dsh-card-value, .kpi-value, .mono, .reg-num, .tr-ocount strong,
.rp-table td, .rp-table th{ font-variant-numeric:tabular-nums; }

h1,h2,h3,h4,h5{ letter-spacing:-0.018em; }
h2{ font-size:25px; line-height:1.16; }
h3{ font-size:16.5px; line-height:1.3; }

/* Small labels in sentence case. All-caps micro-labels are a habit, not
   a hierarchy; at 11px they cost legibility and buy nothing. */
.ss-table thead th,
.st-d-label,
.tr-grp{
    text-transform:none;
    letter-spacing:0;
    font-size:12px;
    color:var(--text-faint);
}
.sidebar .nav-group-title{ letter-spacing:.04em; font-size:10.5px; }

/* ---------------------------------------------------------------------
   3. PANELS — hairline and space, not shadow
   --------------------------------------------------------------------- */
.panel, .card, .ss-card, .rp-card{
    box-shadow:none;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}
.panel{ padding:20px 22px; }
@media (max-width:640px){ .panel{ padding:15px 14px; } }

/* Things that genuinely float keep their lift. */
.ss-modal-card, .dropdown-menu, .menu-pop, .tooltip, .ss-toast{
    box-shadow:var(--shadow-lg);
}

/* ---------------------------------------------------------------------
   4. THE DASHBOARD STRIP
   The one bold move: eight boxes become one divided band.
   --------------------------------------------------------------------- */
.dsh-cards{
    gap:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
.dsh-card{
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    padding:18px 20px;
    box-shadow:inset 1px 0 0 var(--border), inset 0 1px 0 var(--border);
}
.dsh-card:hover{ transform:none; background:var(--surface-2); }
.dsh-card-value{ font-size:26px; letter-spacing:-0.03em; }

/* ---------------------------------------------------------------------
   5. TABLES — the register is the point of the page

   NOTE ON SELECTORS. The register tables are `table.data`, not the
   `.ss-table` class used by the newer platform pages. Both are styled
   here, and both are named explicitly rather than reached for with a
   bare `th`, which would repaint the timetable grid and the exam-record
   grid as well — those two have their own deliberate colouring.
   --------------------------------------------------------------------- */
table.data, .ss-table{ border-color:var(--border); }

table.data th, .ss-table thead th{
    background:var(--surface);
    color:var(--text-faint);
    font-weight:600;
    font-size:12px;
    letter-spacing:0;
    text-transform:none;
    border-bottom:1px solid var(--border-strong);
    padding-top:12px; padding-bottom:12px;
}
/* The sortable-header hover was a darker navy, which no longer exists
   on a light header. */
table.data th.th-sort:hover{ background:var(--surface-2); color:var(--text-strong); }

table.data tbody tr, .ss-table tbody tr{
    transition:background var(--t-fast) var(--ease);
}
table.data tr:hover td, .ss-table tbody tr:hover{ background:var(--surface-2); }

/* Row controls rest until reached for. Focus counts as reaching, or
   they would be unreachable without a mouse. */
table.data td .btn-small, .ss-table td .btn-small{
    opacity:.6;
    transition:opacity var(--t-fast) var(--ease),
               background var(--t-fast) var(--ease),
               border-color var(--t-fast) var(--ease),
               color var(--t-fast) var(--ease);
}
table.data tr:hover td .btn-small,
.ss-table tr:hover td .btn-small,
table.data td .btn-small:focus-visible,
.ss-table td .btn-small:focus-visible{ opacity:1; }

/* Delete stops shouting. Every row carried a filled red button, making
   the most destructive action the most visible thing on the page. It is
   red when you reach for it, not before. */
table.data td .btn-red, .ss-table td .btn-red{
    background:transparent;
    color:var(--red);
    border:1px solid var(--border);
}
table.data td .btn-red:hover, .ss-table td .btn-red:hover,
table.data td .btn-red:focus-visible, .ss-table td .btn-red:focus-visible{
    background:var(--red); color:#fff; border-color:var(--red); opacity:1;
}

/* ---------------------------------------------------------------------
   6. FILTER BARS — a real bug, not a preference
   input,select{width:100%} in style.css catches flex children, so every
   filter bar stacked one control per line and pushed the table a whole
   screen down. Five filters belong on one line.
   --------------------------------------------------------------------- */
.ss-toolbar, .tr-filters .form-row, .rp-filters{
    display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
}
.ss-toolbar > *, .rp-filters > *{ width:auto; flex:1 1 170px; min-width:0; }
.ss-toolbar input, .ss-toolbar select,
.rp-filters input, .rp-filters select{ width:100%; }
.ss-toolbar .btn, .rp-filters .btn{ flex:0 0 auto; }
@media (max-width:640px){
    .ss-toolbar > *, .rp-filters > *{ flex:1 1 100%; }
}

/* ---------------------------------------------------------------------
   7. CONTROLS — motion that answers an action
   --------------------------------------------------------------------- */
.btn{
    border-radius:9px;
    transition:background var(--t-fast) var(--ease),
               border-color var(--t-fast) var(--ease),
               color var(--t-fast) var(--ease),
               transform var(--t-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline:2px solid var(--brand-500);
    outline-offset:2px;
    box-shadow:none;
}

input, select, textarea{
    border-radius:9px;
    transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:focus, select:focus, textarea:focus{ box-shadow:var(--focus-ring); }

/* Links underline on hover rather than living underlined: in a table of
   names, permanent underlines are visual noise across every row. */
a{ transition:color var(--t-fast) var(--ease); }

/* ---------------------------------------------------------------------
   8. SIDEBAR
   The ten icon colours stay — they are how somebody finds a module by
   colour instead of reading eleven labels. What changes is the weight
   around them.
   --------------------------------------------------------------------- */
.sidebar{ border-right:1px solid var(--border); box-shadow:none; }
.sidebar a{
    border-radius:9px;
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar a:hover{ background:var(--surface-2); }
.sidebar a.active{ font-weight:600; }
.topbar, .topheader{ border-bottom:1px solid var(--border); box-shadow:none; }

/* ---------------------------------------------------------------------
   9. BADGES — a state, read at a glance, not a decoration
   --------------------------------------------------------------------- */
.badge{ /* pills at 20px radius on a 10px-radius interface read as a
           different design system; squared off to match. */
    border-radius:6px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
    padding:3px 9px;
}

/* ---------------------------------------------------------------------
   10. QUALITY FLOOR
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}

/* Documents print as they always did. The layer is a screen concern;
   an ID card or a transcript is not. */
@media print{
    :root{
        --paper:#fff; --bg:#fff; --surface:#fff; --surface-2:#fff;
        --line:#ccc; --border:#ccc; --shadow-md:none; --shadow-lg:none;
    }
    .dsh-cards, .dsh-card{ border:0 !important; box-shadow:none !important; }
    table.data th, .ss-table thead th{ background:#fff !important; color:#000 !important; }
}