/* ============================================================================
   AUIS Scheduler - application stylesheet.

   Settled by T-29, 2026-10-15. The brief from the owner: "clean, serious,
   professional, like a newspaper. No jumbo."

   ⚠ WHAT BELONGS HERE, AND WHAT DOES NOT.
   Colour, type and radius are theme tokens and live in SchedulerTheme.cs -
   NEVER here and never in a component. This file is only for the few
   newspaper details MudBlazor cannot express as a token: the masthead rule,
   hairline separators, and the small-caps section labels.

   Everything that used to be in this file was deleted: it was the stock
   Blazor template's Bootstrap styling - .btn-primary, .btn-link,
   .form-control, .darker-border-checkbox - targeting classes this
   application never uses, since the UI is MudBlazor throughout. It also
   carried raw colour literals (#006bb7, #1b6ec2, #e50000) and a
   `font-family: 'Helvetica Neue'` on <body> that silently fought the theme's
   own stack. Three competing font declarations is how an application ends up
   looking like two applications.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   RTL - logical properties, not physical ones. Decided 2026-10-10 (§8).

     margin-inline-start   not  margin-left
     padding-inline        not  padding-left / padding-right
     inset-inline-start    not  left
     text-align: start     not  text-align: left
     border-inline-end     not  border-right

   A logical property follows the writing direction; a physical one does not,
   so an RTL page laid out with physical properties comes out mirrored in all
   the wrong places.

   ⚠ MudBlazor's OWN spacing classes are physical and do NOT flip. Verified
   against MudBlazor 9.11: `.ml-1,.mx-1{margin-left:4px !important}`. A T-29
   audit found 34 physical-direction usages already in the markup, five days
   after the rule was written down - so the rule needed utilities to point at,
   not just a paragraph. Those are below. Use them instead of ml-* / mr-*.
   ---------------------------------------------------------------------------- */

.ms-1 { margin-inline-start: 4px !important; }
.ms-2 { margin-inline-start: 8px !important; }
.ms-3 { margin-inline-start: 12px !important; }
.ms-4 { margin-inline-start: 16px !important; }

.me-1 { margin-inline-end: 4px !important; }
.me-2 { margin-inline-end: 8px !important; }
.me-3 { margin-inline-end: 12px !important; }
.me-4 { margin-inline-end: 16px !important; }

/* Numeric and action columns. `end` follows the writing direction; `right`
   does not, and 22 table cells were using `right` before T-29. */
.text-end { text-align: end !important; }
.text-start { text-align: start !important; }
.nowrap { white-space: nowrap; }


/* ----------------------------------------------------------------------------
   The masthead. A white bar under a heavy rule, which is what a newspaper
   actually looks like - rather than a coloured band, which is the "jumbo" the
   brief rules out.
   ---------------------------------------------------------------------------- */

.mud-appbar {
    border-block-end: 2px solid var(--mud-palette-text-primary);
    box-shadow: none !important;
}

.mud-drawer {
    border-inline-end: 1px solid var(--mud-palette-divider);
}


/* ----------------------------------------------------------------------------
   Rules, not boxes.

   Newspapers separate content with hairlines and whitespace. Every content
   surface is a bordered sheet at elevation 0; nothing floats. §8 carries this
   as a rule so that a second, raised style does not appear later.
   ---------------------------------------------------------------------------- */

.mud-paper {
    box-shadow: none !important;
    border: 1px solid var(--mud-palette-divider);
}

/* A table already sits inside a bordered sheet; a second border doubles it. */
.mud-table.mud-table-outlined { border: none; }

/* Column headings as small-caps labels - the newspaper section-header device,
   and it also makes a dense table easier to scan. */
/* ⚠ Specificity, measured rather than guessed. MudBlazor styles this cell
   with `.mud-table-root .mud-table-head .mud-table-cell` - THREE classes,
   (0,3,0). Two earlier attempts lost to it: `.mud-table-head th` (0,1,1) and
   `.mud-table-head th.mud-table-cell` (0,2,1), because class count is
   compared before element count. Matching its depth and adding the element
   gives (0,3,1), which wins on the merits instead of with !important. */
.mud-table-root .mud-table-head th.mud-table-cell {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* A course code is an identifier and must never wrap - "DEN 350" broke onto
   two lines in a dense table before this. */
td.mud-table-cell .code, .code { white-space: nowrap; font-weight: 700; }

/* ----------------------------------------------------------------------------
   Chrome is serif, data is sans (owner, 2026-10-15).

   The frame of the application - masthead, navigation, buttons - is set like
   a newspaper. What sits INSIDE it - table cells, form inputs, helper text -
   stays sans, because serif numerals and course codes in a 366-row table are
   measurably slower to scan, and that table is what staff work a queue on.

   ⚠ The stack is NOT repeated here. `--mud-typography-h4-family` is the
   variable MudBlazor emits from SchedulerTheme's heading family, so the font
   still has exactly one home. Duplicating the stack in CSS is how the three
   competing font declarations happened in the first place.
   ---------------------------------------------------------------------------- */

.mud-nav-link,
.mud-appbar .mud-typography,
.mud-button-root {
    font-family: var(--mud-typography-h4-family);
}

/* The rule under a page title: the masthead device, repeated at page level. */
.page-rule {
    border-block-end: 1px solid var(--mud-palette-text-primary);
    padding-block-end: 8px;
}

/* Figures read character by character - a one-time password, a student
   number. A class, because it was an inline font-family in one dialog. */
.figures {
    font-family: 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', 'Courier New', monospace;
    letter-spacing: 0.12em;
}


/* ----------------------------------------------------------------------------
   Blazor's own error UI. Restyled rather than deleted: it is the last-resort
   banner shown when even SafeArea cannot recover, so it must still be legible
   and must not look like the stock template.
   ---------------------------------------------------------------------------- */

.blazor-error-boundary {
    background: var(--mud-palette-error);
    color: #FFFFFF;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.validation-message {
    color: var(--mud-palette-error);
}


html[dir="rtl"] {
    /* Nothing yet, and that is now the point: the utilities above are
       direction-agnostic, so RTL should need no overrides here. Set dir on
       <html> from the request culture when the language switcher lands
       (T-30). */
}