/* ---------------------------------------------------------------------------
   Shield Solutions brand skin.

   The palette, the type and the corner radii are the ones the client's own site
   uses (shieldsolutionsnow.com): indigo #2D2BAB on white, near-black body copy,
   Poppins for the interface and Inter for the figures, 5px on controls and 15px
   on cards.

   Everything here is scoped under .shield-page, which the Shield screens put on
   their outermost element. The rest of the application keeps the per-tenant
   theme it is configured with, so this file cannot repaint screens that were
   never meant to change. MudBlazor components are not reachable through CSS
   isolation, which is why these rules live in a global stylesheet rather than
   in a .razor.css beside each page.
   --------------------------------------------------------------------------- */

.shield-page {
    /* Brand */
    --shield-indigo: #2D2BAB;
    --shield-indigo-hover: #242290;
    --shield-indigo-dark: #1B1A6E;
    --shield-indigo-soft: #EEEEFA;
    --shield-indigo-border: #C9C8EE;

    /* Ink */
    --shield-ink: #292929;
    --shield-ink-muted: #787878;
    --shield-ink-faint: #A7A7A7;

    /* Ground */
    --shield-surface: #FFFFFF;
    --shield-surface-alt: #F8F8F8;
    --shield-surface-sunk: #F3F3F3;
    --shield-line: #E4E4E4;
    --shield-line-strong: #D9D9D9;
    --shield-night: #111111;

    /* State. Chosen to sit beside the indigo rather than fight it. */
    --shield-danger: #C62828;
    --shield-danger-soft: #FCEAEA;
    --shield-warn: #B26A00;
    --shield-warn-soft: #FFF4E0;
    --shield-good: #1B7F4B;
    --shield-good-soft: #E8F6EE;
    --shield-draft: #7A3FD6;
    --shield-draft-soft: #F3EBFC;

    /* Shape */
    --shield-radius-control: 5px;
    --shield-radius-card: 15px;
    --shield-radius-pill: 999px;
    --shield-shadow-card: 0 1px 2px rgba(17, 17, 17, .05), 0 8px 24px rgba(17, 17, 17, .05);

    /* Type */
    --shield-font: Poppins, "Nunito Sans", Helvetica, Arial, sans-serif;
    --shield-font-figures: Inter, Poppins, Helvetica, Arial, sans-serif;

    font-family: var(--shield-font);
    color: var(--shield-ink);
}

/* --- Type ---------------------------------------------------------------- */

.shield-page .mud-typography,
.shield-page .mud-input,
.shield-page .mud-button-root,
.shield-page .mud-table-cell,
.shield-page .mud-chip-content {
    font-family: var(--shield-font);
}

.shield-page h1,
.shield-page h2,
.shield-page .mud-typography-h4,
.shield-page .mud-typography-h5,
.shield-page .mud-typography-h6 {
    font-family: var(--shield-font-figures);
    font-weight: 700;
    color: var(--shield-ink);
    letter-spacing: -.01em;
}

/* Figures - money, hours, counts - read better in Inter with tabular digits. */
.shield-figure {
    font-family: var(--shield-font-figures);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--shield-ink);
}

.shield-page .shield-muted {
    color: var(--shield-ink-muted);
}

/* --- Page furniture ------------------------------------------------------ */

.shield-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.shield-page-head .shield-page-title {
    font-family: var(--shield-font-figures);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.shield-page-head .shield-page-subtitle {
    color: var(--shield-ink-muted);
    font-size: .85rem;
    margin: 2px 0 0;
}

.shield-page-head-spacer {
    flex: 1 1 auto;
}

/* A heading between groups of cards on a page that has more than one group. */
.shield-section-title {
    font-family: var(--shield-font);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--shield-ink-muted);
    margin: 20px 0 10px;
}

/* --- Cards --------------------------------------------------------------- */

.shield-page .mud-paper {
    border-radius: var(--shield-radius-card);
}

.shield-card {
    background: var(--shield-surface);
    border: 1px solid var(--shield-line);
    border-radius: var(--shield-radius-card);
    box-shadow: var(--shield-shadow-card);
    padding: 16px;
}

.shield-card-flush {
    padding: 0;
    overflow: hidden;
}

.shield-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--shield-line);
    font-weight: 600;
    font-size: .9rem;
}

/* --- KPI strip ----------------------------------------------------------- */

.shield-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.shield-kpi {
    background: var(--shield-surface);
    border: 1px solid var(--shield-line);
    border-radius: var(--shield-radius-card);
    padding: 12px 14px;
}

.shield-kpi-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shield-ink-muted);
}

.shield-kpi-value {
    font-family: var(--shield-font-figures);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 2px;
}

.shield-kpi-note {
    font-size: .72rem;
    color: var(--shield-ink-muted);
}

/* A KPI whose number is the point of the screen: the money, the totals. */
.shield-kpi-accent {
    background: var(--shield-indigo);
    border-color: var(--shield-indigo);
}

.shield-kpi-accent .shield-kpi-label,
.shield-kpi-accent .shield-kpi-note {
    color: rgba(255, 255, 255, .78);
}

.shield-kpi-accent .shield-kpi-value {
    color: #FFFFFF;
}

.shield-kpi-danger .shield-kpi-value { color: var(--shield-danger); }
.shield-kpi-warn .shield-kpi-value   { color: var(--shield-warn); }
.shield-kpi-good .shield-kpi-value   { color: var(--shield-good); }

/* --- Buttons ------------------------------------------------------------- */

.shield-page .mud-button-root {
    border-radius: var(--shield-radius-control);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}

.shield-page .mud-button-filled-primary {
    background-color: var(--shield-indigo);
    color: #FFFFFF;
}

.shield-page .mud-button-filled-primary:hover {
    background-color: var(--shield-indigo-hover);
}

.shield-page .mud-button-outlined-primary,
.shield-page .mud-button-text-primary {
    color: var(--shield-indigo);
}

.shield-page .mud-button-outlined-primary {
    border-color: var(--shield-indigo-border);
}

.shield-page .mud-icon-button {
    border-radius: var(--shield-radius-control);
}

/* --- Tabs (Schedule / Marketplace / Hours by ... / Time off) ------------- */

.shield-page .mud-tabs-toolbar {
    border-bottom: 1px solid var(--shield-line);
}

.shield-page .mud-tab {
    text-transform: none;
    font-weight: 600;
    font-size: .88rem;
    min-width: 0;
    padding: 0 16px;
}

.shield-page .mud-tab.mud-tab-active {
    color: var(--shield-indigo);
}

.shield-page .mud-tab-slider {
    background: var(--shield-indigo);
    height: 3px;
}

/* --- Chips and badges --------------------------------------------------- */

.shield-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--shield-radius-pill);
    padding: 1px 8px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.shield-badge-neutral { background: var(--shield-surface-sunk); color: var(--shield-ink-muted); border-color: var(--shield-line-strong); }
.shield-badge-brand   { background: var(--shield-indigo-soft); color: var(--shield-indigo); border-color: var(--shield-indigo-border); }
.shield-badge-good    { background: var(--shield-good-soft); color: var(--shield-good); border-color: #BFE3CE; }
.shield-badge-warn    { background: var(--shield-warn-soft); color: var(--shield-warn); border-color: #F0D9A8; }
.shield-badge-danger  { background: var(--shield-danger-soft); color: var(--shield-danger); border-color: #F0C0C0; }
.shield-badge-draft   { background: var(--shield-draft-soft); color: var(--shield-draft); border-color: #DCC7F4; }

/* --- Tables ------------------------------------------------------------- */

.shield-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .84rem;
}

.shield-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--shield-surface-alt);
    border-bottom: 1px solid var(--shield-line-strong);
    padding: 8px 12px;
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shield-ink-muted);
    white-space: nowrap;
}

.shield-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--shield-line);
    vertical-align: middle;
}

.shield-table tbody tr:hover td {
    background: var(--shield-indigo-soft);
}

.shield-table tfoot td {
    padding: 8px 12px;
    border-top: 2px solid var(--shield-line-strong);
    font-family: var(--shield-font-figures);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    background: var(--shield-surface-alt);
}

.shield-num {
    text-align: right;
    font-family: var(--shield-font-figures);
    font-variant-numeric: tabular-nums;
}

.shield-scroll-x {
    overflow-x: auto;
}

/* --- Kanban board (marketplace pipeline) -------------------------------- */

.shield-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}

.shield-board-column {
    background: var(--shield-surface-alt);
    border: 1px solid var(--shield-line);
    border-radius: var(--shield-radius-card);
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

.shield-board-column-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--shield-line);
}

.shield-board-column-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shield-ink-muted);
}

.shield-board-column-count {
    font-family: var(--shield-font-figures);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    background: var(--shield-surface);
    border: 1px solid var(--shield-line-strong);
    border-radius: var(--shield-radius-pill);
    padding: 0 8px;
    font-size: .72rem;
}

.shield-board-column-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    max-height: 62vh;
    overflow-y: auto;
}

.shield-board-empty {
    color: var(--shield-ink-faint);
    font-size: .78rem;
    padding: 12px 4px;
    text-align: center;
}

/* A card on the pipeline. The left edge carries the column's colour so the
   stage is readable even when the board is scrolled sideways on a phone. */
.shield-board-card {
    background: var(--shield-surface);
    border: 1px solid var(--shield-line);
    border-left: 3px solid var(--shield-line-strong);
    border-radius: var(--shield-radius-control);
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    display: block;
}

.shield-board-card:hover {
    border-color: var(--shield-indigo-border);
    box-shadow: var(--shield-shadow-card);
}

.shield-board-card-open      { border-left-color: var(--shield-danger); }
.shield-board-card-sent      { border-left-color: var(--shield-indigo); }
.shield-board-card-pending   { border-left-color: var(--shield-draft); }
.shield-board-card-confirmed { border-left-color: var(--shield-good); }

.shield-board-card-title {
    font-weight: 600;
    font-size: .84rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shield-board-card-line {
    font-size: .76rem;
    color: var(--shield-ink-muted);
    margin-top: 2px;
}

.shield-board-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

/* --- Meter bars (forecast splits, fill rates) --------------------------- */

.shield-meter {
    height: 6px;
    border-radius: var(--shield-radius-pill);
    background: var(--shield-surface-sunk);
    overflow: hidden;
    display: flex;
    margin-top: 8px;
}

.shield-meter-part {
    height: 100%;
}

.shield-meter-regular  { background: var(--shield-indigo); }
.shield-meter-overtime { background: var(--shield-warn); }
.shield-meter-holiday  { background: var(--shield-draft); }
.shield-meter-unfilled { background: var(--shield-danger); }

/* --- Empty states ------------------------------------------------------- */

.shield-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--shield-ink-muted);
}

.shield-empty-title {
    font-family: var(--shield-font-figures);
    font-weight: 700;
    color: var(--shield-ink);
    margin-bottom: 4px;
}

/* --- Role guides -------------------------------------------------------------
   The guide body is rendered from Markdown into a MarkupString, so CSS
   isolation cannot reach it: isolation stamps a scope attribute onto the
   elements the .razor file declares, and these elements are not declared
   anywhere. Hence global rules under .shield-page, same as the rest of the file.
   ---------------------------------------------------------------------------- */

.guide-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 1100px) {
    .guide-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .guide-contents {
        position: static;
        max-height: none;
    }
}

.guide-contents {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    font-size: 13px;
    border-left: 2px solid var(--shield-line);
    padding-left: 14px;
}

.guide-contents-title {
    font-family: var(--shield-font-figures);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shield-ink-faint);
    margin-bottom: 8px;
}

.guide-contents a {
    display: block;
    padding: 4px 0;
    color: var(--shield-ink-muted);
    text-decoration: none;
    line-height: 1.35;
}

.guide-contents a:hover {
    color: var(--shield-indigo);
}

/* --- the rendered body --- */

.guide-body {
    max-width: 78ch;
    color: var(--shield-ink);
    font-size: 15px;
    line-height: 1.65;
}

.guide-body > :first-child {
    margin-top: 0;
}

.guide-body h2 {
    font-family: var(--shield-font);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    margin: 40px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--shield-line);
    scroll-margin-top: 16px;
}

.guide-body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.guide-body h3 {
    font-family: var(--shield-font);
    font-weight: 600;
    font-size: 17px;
    margin: 28px 0 8px;
    scroll-margin-top: 16px;
}

.guide-body h4 {
    font-family: var(--shield-font);
    font-weight: 600;
    font-size: 15px;
    color: var(--shield-ink-muted);
    margin: 20px 0 6px;
}

.guide-body p {
    margin: 0 0 14px;
}

.guide-body ul,
.guide-body ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.guide-body li {
    margin-bottom: 6px;
}

.guide-body li > p {
    margin-bottom: 6px;
}

.guide-body a {
    color: var(--shield-indigo);
    text-decoration: none;
    border-bottom: 1px solid var(--shield-indigo-border);
}

.guide-body a:hover {
    border-bottom-color: var(--shield-indigo);
}

.guide-body strong {
    font-weight: 600;
}

.guide-body code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: .875em;
    background: var(--shield-surface-sunk);
    border: 1px solid var(--shield-line);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.guide-body pre {
    background: var(--shield-surface-sunk);
    border: 1px solid var(--shield-line);
    border-radius: var(--shield-radius-control);
    padding: 12px 14px;
    overflow-x: auto;
    margin: 0 0 14px;
}

.guide-body pre code {
    background: none;
    border: 0;
    padding: 0;
    white-space: pre;
}

/* A blockquote is the guides' callout: the thing that saves somebody an hour. */
.guide-body .guide-note {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--shield-indigo);
    border-radius: 0 var(--shield-radius-control) var(--shield-radius-control) 0;
    background: var(--shield-indigo-soft);
}

.guide-body .guide-note > :last-child {
    margin-bottom: 0;
}

.guide-body hr {
    border: 0;
    border-top: 1px solid var(--shield-line);
    margin: 28px 0;
}

.guide-body .shield-table td:first-child {
    font-weight: 500;
}

/* --- the index cards --- */

.guide-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.guide-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: var(--shield-surface);
    border: 1px solid var(--shield-line);
    border-radius: var(--shield-radius-card);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.guide-card:hover {
    border-color: var(--shield-indigo-border);
    box-shadow: 0 2px 12px rgba(45, 43, 171, .09);
}

.guide-card-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--shield-radius-control);
    background: var(--shield-indigo-soft);
    color: var(--shield-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-card-title {
    font-family: var(--shield-font);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 2px;
}

.guide-card-audience {
    font-family: var(--shield-font-figures);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--shield-indigo);
    margin-bottom: 6px;
}

.guide-card-summary {
    font-size: 13px;
    line-height: 1.5;
    color: var(--shield-ink-muted);
}

/* --- The shift panel ------------------------------------------------------
   Wider than a default drawer so the three money figures sit on one line, and
   split into a pinned head and a scrolling body so a shift with officers,
   requirements and an open editor still fits a laptop screen rather than
   running off the bottom of it. */

/* The width itself comes from the component's Width parameter - MudBlazor's own selector for it
   outranks this class, so setting it here does nothing. What is left is the head/body split. */
.mud-drawer.shift-panel {
    display: flex;
    flex-direction: column;
    overflow: clip;

    /*
        Above its own backdrop, which is the thing that matters most here. MudBlazor puts a temporary
        drawer at 1100 and that drawer's overlay at appbar + 1, which is 1301 - so any value below 1301
        leaves the panel behind its own dimming, greyed out and refusing clicks. 1250 did exactly that.

        Also above the full-screen schedule at 1200, so clicking a shift there opens the panel over the
        board rather than behind it, and still below dialogs at 1400 so an edit form opens over the panel.
        Two classes to MudBlazor's one, which is what lets this win at all.
    */
    z-index: 1320;
}

.shift-panel .shift-panel-head {
    flex: 0 0 auto;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--shield-line);
    background: var(--shield-surface);
}

.shift-panel .shift-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 20px 20px;
}

/* Three across, and never fewer, so Bill rate / Pay rate / Billing hours read
   as one row of figures instead of wrapping the last one onto its own line. */
.shift-panel .shift-panel-money {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.shift-panel .shift-panel-money .shield-kpi {
    padding: 10px;
}

/* A small text button collapsed to a few pixels tall whenever its label
   wrapped. Give it a floor. */
.shift-panel .shift-panel-more {
    min-height: 38px;
}

/* --- When a shift runs ---------------------------------------------------
   A date and two times on one line. Fixed basis rather than flex-grow so the
   two time fields stay the same size as each other and the row does not
   reflow every time a value is typed. */



/* --- Time of day ----------------------------------------------------------
   Two short dropdowns side by side. Deliberately NOT scoped under
   .shield-page: these forms are rendered inside MudBlazor's dialog container,
   which is a sibling of the page, so a descendant selector never matches
   there - the mistake that left the shift form's own fields at full width. */

.time-of-day {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.time-of-day-label {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary, #666);
    line-height: 1.4;
    white-space: nowrap;
}

.time-of-day-fields {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

/*
    Wide enough for the longest label with room to spare. 5rem measured one pixel of slack against
    "12 AM" once MudSelect's own padding and its dropdown arrow were accounted for - which is to say it
    clipped in practice, because the real face is a shade wider than the one the measurement used.
    6rem leaves 17px on the worst label.
*/
.time-of-day-hour {
    width: 6rem;
    min-width: 6rem;
}

.time-of-day-minute {
    width: 3.75rem;
    min-width: 3.75rem;
}

/* --- When a shift runs ---------------------------------------------------
   A date and two times on one line. Fixed basis so the two time controls stay
   the same size as each other, and the row wraps rather than overflowing,
   because a field that has run off the edge of a dialog cannot be reached. */

.shift-when {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.shift-when-date {
    flex: 0 1 9rem;
    min-width: 8rem;
}

/* The status control sits in a row with the officer's name and two icon
   buttons, so it gets a fixed narrow width rather than the select default. */
.assignment-status {
    width: 7.5rem;
    min-width: 7.5rem;
}