/* foundations.css
 *
 * Cross-cutting layers the portal previously had no home for: keyboard focus,
 * reduced motion, print, and a named stacking scale.
 *
 * Loaded after the portal's global sheets in _Host.cshtml. Order cannot beat
 * the per-page `outline: none !important` rules, so the ring is drawn with
 * box-shadow, which those rules leave alone (except where a rule also sets
 * `box-shadow: none !important`). Forced-colors mode uses an !important outline.
 *
 * These rules are additive. Nothing here changes colour, type, spacing or
 * layout in normal (mouse, screen, motion-allowed) use.
 */


/* ---------------------------------------------------------------------------
 * 1. Keyboard focus
 *
 * The portal carries ~64 `outline: none` rules against ~11 focus indicators,
 * because styling :focus put a ring on mouse clicks too and it got removed
 * wholesale. :focus-visible only matches keyboard (and other non-pointer)
 * focus, so the ring can come back without the mouse-click noise that caused
 * it to be suppressed in the first place.
 *
 * The ring value is the one already used in the codebase
 * (rgba(27, 79, 137, 0.25)), not a new invention. It is deliberately a fixed
 * literal rather than a tenant variable: a tenant able to set the focus ring
 * to their own background could make the portal unusable by keyboard without
 * ever noticing.
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.e-btn:focus-visible,
.e-input:focus-visible,
.e-input-group:focus-within {
    outline: 2px solid transparent;      /* keeps a visible ring in forced-colors mode */
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(27, 79, 137, 0.25);
}

/* Windows High Contrast / forced-colors: box-shadow is dropped by the mode, so
   fall back to a real outline, which forced-colors does honour. */
@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
    .e-btn:focus-visible {
        /* !important: per-page stylesheets carry `outline: none !important` on
           focus, which a normal declaration can never beat, whatever the order. */
        outline: 2px solid Highlight !important;
        outline-offset: 2px;
    }
}

/* ---------------------------------------------------------------------------
 * 2. Reduced motion
 *
 * WCAG 2.1 AA (2.3.3 Animation from Interactions). The portal's transitions
 * are short and purposeful, so this near-zeroes them rather than removing the
 * declarations -- transitionend handlers still fire, which some components
 * rely on to sequence state.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ---------------------------------------------------------------------------
 * 3. Print
 *
 * Permits, inspection reports and fee receipts get printed and filed. Browsers
 * drop background graphics by default, so anything that carries meaning via a
 * background colour needs a border and a text label to survive.
 * ------------------------------------------------------------------------- */
@media print {
    /* Chrome/Safari honour this; Firefox ignores it. Status chips below are
       built to read correctly either way. */
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: #FFFFFF !important;
    }

    /* Navigation, actions and chrome carry nothing onto paper. */
    #navigation-sidebar,
    .portal-nav,
    .top-right-buttons,
    .sidebar-overlay,
    .e-toolbar,
    .e-gridtoolbar,
    .e-pager,
    .skip-link,
    .no-print {
        display: none !important;
    }

    /* Reclaim the sidebar gutter. */
    .content-wrapper,
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Status chips: a background alone disappears when background graphics are
       off, taking the meaning with it. A border always prints. */
    .statusGreen,
    .statusBlue,
    .statusRed,
    .pill,
    .status-btn,
    .status-chip {
        border: 1px solid #333333 !important;
        color: #000000 !important;
        background: transparent !important;
        padding: 2px 6px !important;
    }

    /* Tables should not be cut mid-row, and headers repeat across pages. */
    table { page-break-inside: auto; }
    tr    { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; }

    /* Truncated cells hide data on paper. */
    .e-grid .e-rowcell,
    td, th {
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }

    /* Elevation is meaningless in print and costs ink. */
    * { box-shadow: none !important; }

    /* Spell out link targets so a printed page stays actionable. */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        word-break: break-all;
    }

    @page {
        margin: 1.5cm;
    }
}


/* ---------------------------------------------------------------------------
 * 4. Stacking scale
 *
 * Declared for new work to consume. Existing z-index values in the portal run
 * 1, 2, 10, 100, 2500, 9999, 12000, 99999, 100000, 100001 -- each overlay
 * outbidding the last. These tokens are deliberately NOT applied retroactively
 * here: re-tiering live overlays is a behavioural change and belongs in its own
 * reviewed pass. Use them for anything new, and migrate existing rules onto
 * them as those components are touched.
 * ------------------------------------------------------------------------- */
:root {
    --z-base:        0;
    --z-raised:      10;
    --z-sticky:      100;
    --z-dropdown:    200;
    --z-overlay:     300;
    --z-dialog:      400;
    --z-toast:       500;
    --z-skip-link:   600;   /* MainLayout .skip-link */
}

/* Visually hidden but still read by screen readers. Used for the page h1 where the design
   shows a different visible heading (or none). Not display:none, which hides it from
   assistive technology too. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tooltips can be dismissed with Escape (1.4.13); see a11y-tooltip-dismiss.js. */
html[data-tips-dismissed] [data-tip]::after,
html[data-tips-dismissed] [data-tip]::before {
    opacity: 0 !important;
    visibility: hidden !important;
}