/* ==========================================================================
   CMTMec design system — shared component styles.

   Deliberately global rather than per-component scoped CSS. Several of these
   components have a MudBlazor component as their root element (MudPaper, MudChip,
   MudAlert, MudTable), and Blazor only stamps its scope attribute onto plain HTML
   elements — so a .razor.css rule for those would compile to a selector that never
   matches anything. The .cmt- prefix is the collision guard instead.

   Every value here resolves through a --mud-palette-* variable, so both themes are
   covered by the one rule.
   ========================================================================== */

/* ==========================================================================
   TYPEFACES

   IBM Plex, self-hosted. A <link> to fonts.googleapis.com would cost an external
   request on every page load and fall back silently if it were ever blocked —
   which is why the previous web font was removed. These are the latin and
   latin-ext subsets only; the browser downloads latin-ext solely if a page
   actually uses one of its characters.

   Plex Sans ships as one variable file covering 400-700.
   ========================================================================== */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-400-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-400-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Digits that stack in a column must line up — record ids, employee numbers,
   hours, money. */
.cmt-nums,
.cmt-nums td,
.cmt-nums th {
    font-variant-numeric: tabular-nums;
}

/* Identifiers and figures. Dispatch has always set numbers in mono; it makes a
   transposed employee number visible at a glance. */
.cmt-mono {
    font-family: "Cascadia Mono", "Cascadia Code", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
}

/* Present to a screen reader, invisible on screen — a column header for a column of links. */
.cmt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Truncate to a single line. Replaces the inline
   "max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap"
   that was repeated verbatim across at least five pages. */
.cmt-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   PageHeader
   -------------------------------------------------------------------------- */
.cmt-pagehead {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.cmt-pagehead__crumbs {
    margin-bottom: -2px;
}

.cmt-pagehead__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.cmt-pagehead__icon {
    flex: none;
    margin-top: 2px;
}

.cmt-pagehead__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 320px;
}

.cmt-pagehead__title {
    /* A real heading, in sentence case — the page name is the first thing read. */
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.2;
}

.cmt-pagehead__subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Actions sit right on wide screens and wrap underneath on narrow ones, rather than
   squeezing the title down to two words. */
.cmt-pagehead__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

@media (max-width: 600px) {
    .cmt-pagehead__actions {
        margin-left: 0;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   EmptyState
   -------------------------------------------------------------------------- */
.cmt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 24px;
    text-align: center;
}

.cmt-empty__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--mud-palette-background-gray);
    margin-bottom: 2px;
}

.cmt-empty__title {
    max-width: 46ch;
    text-wrap: balance;
}

.cmt-empty__body {
    max-width: 52ch;
}

.cmt-empty__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   KpiTile
   -------------------------------------------------------------------------- */
.cmt-kpi {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
}

/* Severity reads as a status dot beside the label as well as its colour, so it survives
   greyscale and does not depend on hue alone. A normal tile carries no dot. */
.cmt-kpi--ok .cmt-kpi__label::before,
.cmt-kpi--warn .cmt-kpi__label::before,
.cmt-kpi--bad .cmt-kpi__label::before,
.cmt-kpi--info .cmt-kpi__label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    order: -1;
}

.cmt-kpi--ok .cmt-kpi__label::before   { background: var(--mud-palette-success); }
.cmt-kpi--warn .cmt-kpi__label::before { background: var(--mud-palette-warning); }
.cmt-kpi--bad .cmt-kpi__label::before  { background: var(--mud-palette-error); }
.cmt-kpi--info .cmt-kpi__label::before { background: var(--mud-palette-info); }

.cmt-kpi__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.cmt-kpi__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.cmt-kpi__unit {
    font-size: 0.875rem;
    font-weight: 560;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

.cmt-kpi__foot {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   DataCard
   -------------------------------------------------------------------------- */
.cmt-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

.cmt-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 18px;
    box-sizing: border-box;
    flex: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cmt-card__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cmt-card__hint {
    margin-left: auto;
    white-space: nowrap;
}

.cmt-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* When a hint is present it takes the auto margin; otherwise the actions do. */
.cmt-card__head > .cmt-card__actions:not(:first-child) {
    margin-left: auto;
}

.cmt-card__hint + .cmt-card__actions {
    margin-left: 0;
}

.cmt-card__body {
    padding: 18px;
}

.cmt-card__body--flush {
    padding: 0;
}

/* --------------------------------------------------------------------------
   AppTable
   -------------------------------------------------------------------------- */

/* Column headers read as labels rather than as data: smaller, secondary ink, sentence case. */
.cmt-table th {
    height: 36px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    background-color: var(--mud-palette-background-gray);
}

/* Compact by default — this is a working tool, and the row is the reading. */
.cmt-table td {
    height: 36px;
}

/* Digits that stack in a column must line up. */
.cmt-table td,
.cmt-table th {
    font-variant-numeric: tabular-nums;
}

/* Right-aligned action cluster at the end of a row. */
.cmt-table td.cmt-table__actions {
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   LoadingState
   -------------------------------------------------------------------------- */
.cmt-loading__skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.cmt-loading__linear {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.cmt-loading__inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* A control whose work is in flight: the icon turns until the page clears the class. Pair it
   with Disabled so the turn cannot be re-triggered mid-flight. The Committees header Refresh
   holds the class for a minimum beat (see the page) so a reload that returns in 300 ms still
   reads as one deliberate turn rather than a flicker. */
.cmt-busy .mud-icon-root {
    animation: cmt-busy-turn 0.9s linear infinite;
}

@keyframes cmt-busy-turn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cmt-busy .mud-icon-root {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   ErrorBanner
   -------------------------------------------------------------------------- */
.cmt-error {
    margin-bottom: 16px;
}

.cmt-error__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cmt-error__title {
    font-weight: 620;
}

.cmt-error__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   ConfirmDialog
   -------------------------------------------------------------------------- */
.cmt-confirm__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cmt-confirm__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 56ch;
}

/* --------------------------------------------------------------------------
   PersonChip
   -------------------------------------------------------------------------- */
.cmt-person {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 4px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    max-width: 100%;
}

.cmt-person--clickable {
    cursor: pointer;
}

.cmt-person--clickable:hover {
    border-color: var(--mud-palette-primary);
}

.cmt-person--clickable:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cmt-person__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.cmt-person__text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.cmt-person__name {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmt-person__secondary {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MonthNavigator
   -------------------------------------------------------------------------- */
.cmt-monthnav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cmt-monthnav__stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.cmt-monthnav__label {
    min-width: 148px;
    font-weight: 640;
    font-size: 0.875rem;
}

.cmt-monthnav__quick {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   AppErrorBoundary
   -------------------------------------------------------------------------- */
.cmt-boundary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 24px 0;
}

.cmt-boundary__details {
    width: 100%;
    max-width: 640px;
}

.cmt-boundary__message {
    font-family: "Cascadia Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    word-break: break-word;
}

/* ==========================================================================
   SHELL
   ========================================================================== */

/* --------------------------------------------------------------------------
   Top bar — Flight Plan (2026-10-22). The theme's MudAppBar in navy (AppbarBackground), so its
   height is --mud-appbar-height and every page that sizes itself off the bar follows. Text on
   it uses the appbar palette, never the page's, so it reads in both themes.
   -------------------------------------------------------------------------- */
.cmt-topbar {
    /* Inset, so the hairline does not add to the bar's height. */
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--mud-palette-appbar-text) 10%, transparent);
}

.cmt-topbar .mud-toolbar {
    gap: 8px;
}

.cmt-topbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-right: 16px;
    color: inherit;
    text-decoration: none;
}

.cmt-topbar__mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #FFFFFF;
    background-color: #2F6BEA;
}

.cmt-topbar__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cmt-topbar__name {
    font-size: 0.875rem;
    font-weight: 700;
}

/* The environment reads as a quiet second line under the name, not a pill. */
.cmt-topbar .cmt-env {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.6875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--mud-palette-appbar-text) 72%, transparent);
}

.cmt-topbar__areas {
    align-self: stretch;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cmt-topbar__area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: color-mix(in srgb, var(--mud-palette-appbar-text) 72%, transparent);
}

.cmt-topbar__area:hover {
    color: var(--mud-palette-appbar-text);
}

.cmt-topbar__area--on {
    font-weight: 600;
    color: var(--mud-palette-appbar-text);
    border-bottom-color: #6EA0FF;
}

.cmt-topbar__area:focus-visible,
.cmt-topbar__brand:focus-visible,
.cmt-topbar__search:focus-visible {
    outline: 2px solid #6EA0FF;
    outline-offset: -2px;
}

.cmt-topbar__count {
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 16px;
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.16);
}

.cmt-topbar__fill {
    flex: 1 1 0;
}

.cmt-topbar__search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    width: 280px;
    height: 36px;
    padding: 0 8px 0 12px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    color: color-mix(in srgb, var(--mud-palette-appbar-text) 72%, transparent);
    background-color: rgba(255, 255, 255, 0.08);
}

.cmt-topbar__search:hover {
    background-color: rgba(255, 255, 255, 0.13);
}

.cmt-topbar__kbd {
    margin-left: auto;
    padding: 0 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Below 1600px the search is an icon, so an Admin's eleven area tabs fit a 1440px laptop. */
@media (max-width: 1599.98px) {
    .cmt-topbar__search {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .cmt-topbar__search-label,
    .cmt-topbar__kbd {
        display: none;
    }
}

.cmt-topbar__user {
    display: flex;
    cursor: pointer;
    border-radius: 50%;
}

/* The current area's pages, in the page's flow under the bar. Its height is published as
   --cmt-areatabs-h so the chat page and the slide-overs, which subtract the chrome above them,
   subtract it too. Zero below Md, where the strip is hidden. */
@media (min-width: 960px) {
    .cmt-shell:has(.cmt-areatabs) {
        --cmt-areatabs-h: 45px;
    }
}

.cmt-areatabs {
    gap: 24px;
    padding: 0 24px;
    overflow-x: auto;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cmt-areatabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.cmt-areatabs__tab:hover {
    color: var(--mud-palette-text-primary);
}

.cmt-areatabs__tab--on {
    color: var(--mud-palette-text-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.cmt-areatabs__tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.cmt-areatabs__count {
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
}

.cmt-areatabs__count--urgent {
    color: var(--mud-palette-error);
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.cmt-sidebar__collapse {
    margin-left: auto;
    flex: none;
}

/* Environment marker: a dot and a word, so Production is unmistakable without a red pill
   shouting on every screen. */
.cmt-env {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
}

.cmt-env::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--cmt-env-dot, var(--mud-palette-text-secondary));
}

.cmt-env--prod { --cmt-env-dot: var(--mud-palette-warning); }
.cmt-env--stg  { --cmt-env-dot: var(--mud-palette-info); }
.cmt-env--dev  { --cmt-env-dot: var(--mud-palette-success); }

@media (max-width: 600px) {
    .cmt-env { display: none; }
}

/* --------------------------------------------------------------------------
   Main content container
   -------------------------------------------------------------------------- */
.cmt-main {
    /* Exposed as variables so full-height pages (chat) can subtract the real chrome
       instead of hardcoding a magic viewport offset. */
    --cmt-main-pad-top: 32px;
    --cmt-main-pad-bottom: 48px;
    padding-top: var(--cmt-main-pad-top);
    padding-bottom: var(--cmt-main-pad-bottom);
}

/* --------------------------------------------------------------------------
   PHONE — the Android app always, the website below 600px (FormFactor, spec D15).
   Everything phone-only hangs off .cmt-phone, so desktop never sees these rules.
   The phone bar is 56px at every width: the app on a tablet stays a phone.
   -------------------------------------------------------------------------- */
.cmt-shell.cmt-phone {
    --mud-appbar-height: 56px;
}

.cmt-phonebar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cmt-phonebar .mud-toolbar {
    gap: 4px;
}

.cmt-phonebar__mark {
    margin-right: 10px;
}

.cmt-phonebar__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.0625rem;
    font-weight: 600;
}

.cmt-phonebar__avatar {
    width: 32px;
    height: 32px;
    margin-left: 4px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.cmt-phonebar__avatar:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cmt-phone .cmt-main {
    --cmt-main-pad-top: 16px;
    --cmt-main-pad-bottom: calc(24px + env(safe-area-inset-bottom));
    padding-left: 16px;
    padding-right: 16px;
}

/* --------------------------------------------------------------------------
   Sidebar — the page's own surface, with a hairline edge. Everything on it is
   drawn from the drawer palette, which the theme sets to the page's text
   colours, so nothing here assumes a dark ground.
   -------------------------------------------------------------------------- */
.cmtmec-app-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.cmtmec-app-drawer .mud-drawer-content {
    justify-content: flex-start;
}

.cmtmec-app-drawer-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-height: 100%;
    overflow-y: auto;
    padding: 14px 12px 10px;
}

.cmtmec-app-drawer-content .mud-navmenu {
    flex: 0 0 auto;
}

.cmtmec-app-drawer .mud-nav-link {
    margin: 1px 0;
    padding-block: 7px;
    border-radius: 6px;
    color: var(--mud-palette-drawer-text);
    font-size: 0.875rem;
}

.cmtmec-app-drawer .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-drawer-icon);
}

.cmtmec-app-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-action-default-hover);
}

.cmtmec-app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-drawer-text);
    font-weight: 600;
    background-color: var(--mud-palette-action-default-hover);
}

.cmtmec-app-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

.cmtmec-app-drawer .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.cmtmec-app-drawer .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-weight: 600;
}

.cmt-nav__section {
    display: block;
    padding: 16px 10px 4px;
    color: var(--mud-palette-drawer-icon);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

.cmt-nav__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* MudBlazor wraps each link in an inline-block tooltip root that sizes to its content, so a long
   label plus a badge overflowed the sidebar. Make the wrapper fill the row and let the label shrink. */
.cmtmec-app-drawer .mud-navmenu .mud-tooltip-root {
    display: block;
    width: 100%;
}

.cmtmec-app-drawer .mud-nav-link-text {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.cmt-nav__badge {
    flex-shrink: 0;
    margin: 0 0 0 8px;
    height: 20px;
    min-width: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cmtmec-app-drawer .cmt-nav__badge.mud-chip-color-default {
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background);
}

.cmt-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 14px;
}

.cmt-sidebar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.cmt-sidebar__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmt-sidebar__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-drawer-text);
}

.cmt-sidebar__app {
    font-size: 0.75rem;
    color: var(--mud-palette-drawer-icon);
    white-space: nowrap;
}

/* The environment pill reads as words inside the brand line. */
.cmt-sidebar__app .cmt-env {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 500;
}

.cmt-sidebar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    cursor: pointer;
}

.cmt-sidebar__search:hover {
    border-color: var(--mud-palette-lines-inputs);
}

.cmt-sidebar__search:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.cmt-sidebar__search-label {
    flex: 1;
    text-align: left;
}

.cmt-sidebar__kbd {
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 0.6875rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 5px;
    background-color: var(--mud-palette-surface);
}

.cmt-sidebar__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.cmt-sidebar__foot .mud-menu {
    flex: 1;
    min-width: 0;
}

.cmt-sidebar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}

.cmt-sidebar__user:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.cmt-sidebar__user:focus-visible,
.mud-menu-activator:focus-visible .cmt-sidebar__user {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.cmt-sidebar__user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmt-sidebar__user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-drawer-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmt-sidebar__user-role {
    font-size: 0.75rem;
    color: var(--mud-palette-drawer-icon);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   User menu
   -------------------------------------------------------------------------- */
.cmt-usermenu__head {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 16px 8px;
    min-width: 200px;
}

.cmt-usermenu__section {
    display: block;
    padding: 10px 16px 2px;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   Command palette
   -------------------------------------------------------------------------- */
.cmt-palette {
    width: min(560px, calc(100vw - 32px));
    margin-top: 12vh;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(11, 20, 34, .28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.cmt-palette__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    color: var(--mud-palette-text-secondary);
}

.cmt-palette__input {
    flex: 1;
    margin: 0;
}

/* The palette's own border is the field's border; MudBlazor's underline would draw a
   second line across the middle of the header. */
.cmt-palette__input .mud-input.mud-input-underline::before,
.cmt-palette__input .mud-input.mud-input-underline::after {
    display: none;
}

.cmt-palette__input .mud-input > input {
    font-size: 0.9375rem;
}

.cmt-palette__hint {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.cmt-palette__list {
    overflow-y: auto;
    padding: 6px;
}

.cmt-palette__empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px 18px;
    text-align: center;
}

.cmt-palette__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
}

.cmt-palette__row--on {
    background-color: var(--mud-palette-primary-hover);
}

.cmt-palette__row-icon {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.cmt-palette__row--on .cmt-palette__row-icon {
    color: var(--mud-palette-primary);
}

.cmt-palette__row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cmt-palette__row-title {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmt-palette__row-group {
    color: var(--mud-palette-text-secondary);
}

.cmt-palette__row-group::after {
    content: " › ";
}

.cmt-palette__row-desc {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmt-palette__row-enter {
    flex: none;
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ==========================================================================
   FLIGHT DECK (home)

   Clearance layout: the active pay-loss cycle across the top, the attention
   queue grouped by what kind of work it is, and three small reference cards
   down the side. Every colour resolves through the palette, so the same rules
   serve both themes.
   ========================================================================== */
.cmt-flightdeck {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cmt-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
}

/* Plain links inside the panels are actions ("Assign pilot", "Open tasks"), so they take
   the accent rather than inheriting body ink. */
.cmt-panel a:not(.mud-button-root) {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.cmt-panel a:not(.mud-button-root):hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Cycle panel — the page's thesis. The day strip makes "how long is left"
   visible without reading a number.
   -------------------------------------------------------------------------- */
.cmt-cycle {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cmt-cycle__top {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

.cmt-cycle__name {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 1 300px;
    min-width: 220px;
}

.cmt-cycle__kicker {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.cmt-cycle__kicker--closed {
    color: var(--mud-palette-text-secondary);
}

.cmt-cycle__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
}

.cmt-cycle__sub {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-cycle__timeline {
    flex: 1 1 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.cmt-cycle__dates {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-cycle__today {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cmt-cycle__close {
    font-weight: 600;
    color: var(--mud-palette-warning);
}

.cmt-cycle__close--past {
    color: var(--mud-palette-text-secondary);
}

.cmt-cycle__cta {
    flex: none;
    align-self: center;
}

.cmt-days {
    display: grid;
    grid-template-columns: repeat(var(--cmt-days, 30), minmax(0, 1fr));
    gap: 3px;
}

.cmt-days__d {
    height: 22px;
    border-radius: 3px;
    background-color: var(--mud-palette-lines-default);
}

.cmt-days__d--past  { background-color: var(--mud-palette-primary); }
.cmt-days__d--close { background-color: var(--mud-palette-warning); }

/* Today is the one day drawn in ink with a ring, so it reads in greyscale too. */
.cmt-days__d--today {
    background-color: var(--mud-palette-text-primary);
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-text-primary);
}

.cmt-cycle__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 18px;
}

.cmt-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 28px;
    min-width: 0;
}

.cmt-stat:first-child { padding-left: 0; }
.cmt-stat:last-child  { padding-right: 0; }

.cmt-stat + .cmt-stat {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.cmt-stat__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-stat__value {
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.cmt-stat__value--ok  { color: var(--mud-palette-success); }
.cmt-stat__value--bad { color: var(--mud-palette-error); }

.cmt-stat__note {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.cmt-stat__note--warn { color: var(--mud-palette-warning); }
.cmt-stat__note--bad  { color: var(--mud-palette-error); }

.cmt-meter {
    height: 6px;
    border-radius: 3px;
    background-color: var(--mud-palette-lines-default);
    overflow: hidden;
}

.cmt-meter__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background-color: var(--mud-palette-primary);
}

.cmt-meter__fill--ok   { background-color: var(--mud-palette-success); }
.cmt-meter__fill--warn { background-color: var(--mud-palette-warning); }
.cmt-meter__fill--bad  { background-color: var(--mud-palette-error); }

@media (max-width: 900px) {
    .cmt-cycle {
        padding: 20px;
    }

    .cmt-cycle__stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .cmt-stat,
    .cmt-stat:first-child,
    .cmt-stat:last-child {
        padding: 0;
    }

    .cmt-stat + .cmt-stat {
        border-left: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        padding-top: 18px;
    }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
/* Flight Plan: a row of tiles is one panel split by hairlines. The 1px gap shows the
   container's background, which is the line colour; .cmt-fd-kpis below shares this. */
.cmt-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background-color: var(--mud-palette-lines-default);
}

.cmt-kpis > .cmt-kpi,
.cmt-fd-kpis > .cmt-kpi {
    border: 0;
    border-radius: 0;
}

.cmt-flightdeck__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 352px;
    gap: 24px;
    align-items: start;
}

.cmt-flightdeck__side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

/* --------------------------------------------------------------------------
   Attention panel — grouped by the kind of work, filterable.
   -------------------------------------------------------------------------- */
.cmt-attn {
    overflow: hidden;
}

.cmt-attn__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cmt-attn__heading {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cmt-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 8px;
    background-color: var(--mud-palette-background);
    flex-wrap: wrap;
}

.cmt-tabs__tab {
    border: 0;
    border-radius: 6px;
    padding: 5px 12px;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.cmt-tabs__tab:hover {
    color: var(--mud-palette-text-primary);
}

.cmt-tabs__tab--on {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default), 0 1px 2px rgba(18, 33, 58, .10);
}

.cmt-tabs__tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.cmt-attn__group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 24px;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.cmt-attn__group-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cmt-attn__group-title--hi  { color: var(--mud-palette-error); }
.cmt-attn__group-title--mid { color: var(--mud-palette-warning); }

.cmt-attn__group-note {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-attn__group-link {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 600;
}

.cmt-attn__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.cmt-attn__row:last-child {
    border-bottom: 0;
}

.cmt-attn__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
}

.cmt-attn__icon--hi {
    color: var(--mud-palette-error);
    background-color: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
}

.cmt-attn__icon--mid {
    color: var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
}

.cmt-attn__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmt-attn__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.cmt-attn__detail {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.cmt-attn__time {
    flex: none;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.cmt-attn__action {
    flex: none;
}

@media (max-width: 700px) {
    .cmt-attn__head,
    .cmt-attn__group,
    .cmt-attn__row {
        padding-inline: 16px;
    }

    .cmt-attn__row {
        flex-wrap: wrap;
    }

    .cmt-attn__time {
        order: 3;
    }

    .cmt-attn__action {
        order: 4;
        margin-left: 52px;
    }
}

/* --------------------------------------------------------------------------
   Attention queue rows — shared with the Agent Actions page. Severity is
   carried by the icon's tint and glyph, so it survives greyscale.
   -------------------------------------------------------------------------- */
.cmt-queue {
    display: flex;
    flex-direction: column;
}

.cmt-queue__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.cmt-queue__row:last-child {
    border-bottom: 0;
}

.cmt-queue__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.cmt-queue__icon--hi  { background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));   color: var(--mud-palette-error); }
.cmt-queue__icon--mid { background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface)); color: var(--mud-palette-warning); }
.cmt-queue__icon--lo  { background: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));    color: var(--mud-palette-info); }

.cmt-queue__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cmt-queue__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.cmt-queue__detail {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.cmt-queue__action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    align-self: center;
}

.cmt-queue__time {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .cmt-queue__row {
        flex-wrap: wrap;
    }

    .cmt-queue__action {
        width: 100%;
        justify-content: flex-start;
        padding-left: 48px;
    }
}

/* --------------------------------------------------------------------------
   Side cards
   -------------------------------------------------------------------------- */
.cmt-side {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cmt-side__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.cmt-side__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cmt-side__hint {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-side__link {
    font-size: 0.8125rem;
    font-weight: 600;
}

.cmt-side__note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.cmt-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.cmt-figure__value {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.cmt-figure__unit {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* Monthly bars. Bars rather than a line: each month is a closed total, not a
   continuous reading. */
.cmt-bars {
    display: grid;
    grid-template-columns: repeat(var(--cmt-bars, 6), minmax(0, 1fr));
    grid-template-rows: 100%;
    gap: 10px;
    align-items: end;
    height: 120px;
}

.cmt-bars__bar {
    display: block;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-surface));
}

.cmt-bars__bar--now {
    background-color: var(--mud-palette-primary);
}

/* A month with no hours captured is not a month with zero hours lost. */
.cmt-bars__bar--none {
    background: repeating-linear-gradient(
        -45deg,
        var(--mud-palette-lines-default) 0 3px,
        transparent 3px 6px);
}

.cmt-bars__labels {
    display: grid;
    grid-template-columns: repeat(var(--cmt-bars, 6), minmax(0, 1fr));
    gap: 10px;
    margin-top: -6px;
    font-size: 0.75rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.cmt-bars__labels .cmt-bars__label--now {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cmt-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cmt-counts__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmt-counts__value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.cmt-counts__label {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-counts__item--bad .cmt-counts__value,
.cmt-counts__item--bad .cmt-counts__label {
    color: var(--mud-palette-error);
}

/* ==========================================================================
   INSTRUMENT PANEL

   Status primitives (the names date from the earlier instrument-panel
   direction; the look is now Clearance). Every colour resolves through a --mud-palette
   var, so these follow both themes and any later palette change without being
   touched. The one thing that is theme-aware rather than palette-aware is the
   lamp: a lit dot glows on a dark panel and reads as a blur on a white one, so
   in light it gets a ring instead. That is the only [data-theme] rule in this
   file, and it is here because it is a property of the medium, not the colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Label — the small sentence-case caption that titles a panel, a group or a
   figure. Matches Typo.Overline; this is the class form, for the places that
   are not a MudText.
   -------------------------------------------------------------------------- */
.cmt-lbl {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   Led
   -------------------------------------------------------------------------- */
.cmt-led {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background-color: var(--mud-palette-lines-inputs);
}

.cmt-led--ok  { background-color: var(--mud-palette-success); }
.cmt-led--cau { background-color: var(--mud-palette-warning); }
.cmt-led--wrn { background-color: var(--mud-palette-error); }
.cmt-led--act { background-color: var(--mud-palette-primary); }

/* Daylight: a ring, because a glow on a white ground just looks out of focus. */
.cmt-led--ok  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-success) 30%, transparent); }
.cmt-led--cau { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-warning) 30%, transparent); }
.cmt-led--wrn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-error) 30%, transparent); }
.cmt-led--act { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); }

/* Dark: the lamp is actually lit. */
html[data-theme="dark"] .cmt-led--ok  { box-shadow: 0 0 5px color-mix(in srgb, var(--mud-palette-success) 75%, transparent); }
html[data-theme="dark"] .cmt-led--cau { box-shadow: 0 0 5px color-mix(in srgb, var(--mud-palette-warning) 75%, transparent); }
html[data-theme="dark"] .cmt-led--wrn { box-shadow: 0 0 5px color-mix(in srgb, var(--mud-palette-error) 80%, transparent); }
html[data-theme="dark"] .cmt-led--act { box-shadow: 0 0 5px color-mix(in srgb, var(--mud-palette-primary) 75%, transparent); }

/* --------------------------------------------------------------------------
   BulkBar
   -------------------------------------------------------------------------- */
.cmt-bulk {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 34px;
    padding: 0 12px;
    flex: none;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

.cmt-bulk__mark {
    width: 13px;
    height: 13px;
    border-radius: 6px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.cmt-bulk__mark svg {
    width: 9px;
    height: 9px;
}

.cmt-bulk__count {
    font-size: 0.75rem;
    color: var(--mud-palette-primary);
}

.cmt-bulk__summary {
    color: var(--mud-palette-text-secondary);
}

.cmt-bulk__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   PersonSlot
   -------------------------------------------------------------------------- */
.cmt-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    min-width: 0;
}

.cmt-slot--clickable {
    cursor: pointer;
}

.cmt-slot--clickable:hover {
    border-color: var(--mud-palette-primary);
}

.cmt-slot:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* A vacancy is a dashed outline in caution, not a missing row: the gap has to be
   as visible as the people around it, because the gap is the thing to act on. */
.cmt-slot--vacant {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--mud-palette-warning) 42%, transparent);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.cmt-slot__avatar {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.cmt-slot__avatar svg {
    width: 14px;
    height: 14px;
}

.cmt-slot--vacant .cmt-slot__avatar {
    color: var(--mud-palette-warning);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}

.cmt-slot__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmt-slot__name {
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmt-slot--vacant .cmt-slot__name {
    color: var(--mud-palette-warning);
}

.cmt-slot__secondary {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmt-slot__badge {
    margin-left: auto;
    flex: none;
    font-size: 0.75rem;
    letter-spacing: .1em;
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.cmt-slot__badge--muted {
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
    border-color: var(--mud-palette-lines-inputs);
}

.cmt-slot__actions {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cmt-slot__badge + .cmt-slot__actions {
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   SlideOver

   Pinned to the viewport, so the record stays beside the list while the list is
   scrolled. This was absolute — positioned against .cmt-slideover-host — and it
   looked right only until you scrolled: the host is as tall as the whole list,
   so top:0 meant "the top of four hundred rows", and the panel's content sat up
   there and disappeared the moment you moved down the page. The rail kept
   rendering to the full height, which is why it read as the data vanishing
   rather than as the panel leaving.

   Fixed rather than sticky because the aside is the last child of the host,
   after the table: in normal flow — which sticky requires — it would land below
   the list instead of beside it, and making sticky work would mean rebuilding
   the page as a two-column layout for no gain.

   The top offset matches where the content starts, so nothing moves when the
   page is scrolled to the top, and the top bar and page strip stay reachable. The
   --mud-appbar-height / --cmt-areatabs-h / --cmt-main-pad-top trio is the same idiom the chat page
   uses to subtract real chrome instead of hardcoding a viewport offset.
   -------------------------------------------------------------------------- */
.cmt-slideover-host {
    /* No longer a positioning context for the panel, which is fixed. Kept because
       it is the hook pages use to reserve the panel's width — see .sen-host--open. */
    position: relative;
}

.cmt-slideover {
    position: fixed;
    top: calc(var(--mud-appbar-height, 56px) + var(--cmt-areatabs-h, 0px) + var(--cmt-main-pad-top, 24px));
    right: 0;
    bottom: 0;
    /* Below the sidebar and the top bar, both of which sit far higher. The panel
       starts underneath the top bar and must never cover it. */
    z-index: 3;
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: -18px 0 40px -22px rgba(16, 32, 44, .22);
}

html[data-theme="dark"] .cmt-slideover {
    box-shadow: -20px 0 44px -20px rgba(0, 0, 0, .85);
}

.cmt-slideover__head {
    flex: none;
    padding: 11px 13px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cmt-slideover__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cmt-slideover__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmt-slideover__head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cmt-slideover__close {
    margin-left: auto;
}

.cmt-slideover__head-actions + .cmt-slideover__close {
    margin-left: 0;
}

.cmt-slideover__sub {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-slideover__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cmt-slideover__foot {
    flex: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 9px 13px;
    display: flex;
    gap: 7px;
}

.cmt-slideover__foot > * {
    flex: 1;
}

/* --------------------------------------------------------------------------
   Readout list

   The label/value pairs that make up a record shown beside a list — in a
   slide-over, a readout panel or a detail card. A real <dl>: these are
   definitions, and a screen reader that can pair the term with its value is
   the difference between "IAH" and "Domicile IAH".

   The label column is fixed so the values line up down the panel; a value too
   long for its track wraps rather than pushing the label out of the way.
   -------------------------------------------------------------------------- */
.cmt-kv {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 5px 10px;
    margin: 0;
    font-size: 0.75rem;
}

.cmt-kv dt {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    align-self: center;
}

.cmt-kv dd {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Filter chip and segmented control

   Markup rather than components: both wrap a MudBlazor control the caller has
   to configure anyway, and a wrapper around that buys nothing.
   -------------------------------------------------------------------------- */
.cmt-chipf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    border-radius: 6px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}

/* An applied filter is solid and in the accent — a dashed chip is an invitation,
   a solid one is a statement about what you are looking at. */
.cmt-chipf--on {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface));
}

.cmt-seg {
    display: inline-flex;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background-color: var(--mud-palette-surface);
}

.cmt-seg__item {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.cmt-seg__item--on {
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

/* --------------------------------------------------------------------------
   Pills — a status word on a soft ground. The word carries the meaning; the
   colour only repeats it.
   -------------------------------------------------------------------------- */
.cmt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px 2px 0;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.cmt-pill--ok     { color: var(--mud-palette-success); background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.cmt-pill--warn   { color: var(--mud-palette-warning); background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }
.cmt-pill--danger { color: var(--mud-palette-error);   background-color: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }
.cmt-pill--info   { color: var(--mud-palette-primary); background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.cmt-pill--muted  { color: var(--mud-palette-text-secondary); background-color: var(--mud-palette-background); }

/* --------------------------------------------------------------------------
   Flight Deck — Direction A: tiles, then vacancies beside lists, then library.
   -------------------------------------------------------------------------- */
.cmt-fd-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background-color: var(--mud-palette-lines-default);
}

.cmt-fd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin: 24px 0;
}

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

.cmt-fd-table { width: 100%; border-collapse: collapse; }
.cmt-fd-table td { vertical-align: middle; }
.cmt-fd-table th, .cmt-fd-table td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cmt-fd-table th.cmt-num, .cmt-fd-table td.cmt-num { text-align: right; }
.cmt-fd-table tr:last-child td { border-bottom: 0; }
.cmt-fd-lists .cmt-card__actions, .cmt-fd-lists .cmt-card__actions a { white-space: nowrap; }
.cmt-fd-strong { font-weight: 500; }
.cmt-fd-muted { color: var(--mud-palette-text-secondary); font-size: 0.8125rem; }
.cmt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cmt-fd-note {
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.cmt-fd-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    margin: 16px 20px 8px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

.cmt-fd-bar__add { background-color: var(--mud-palette-primary); }
.cmt-fd-bar__req { background-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent); }
.cmt-fd-bar__rem { background-color: var(--mud-palette-warning); }

/* Distribution lists — four totals above the table, and a thin coverage bar per list. */
.cmt-dl-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
}

.cmt-dl-totals > div {
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.cmt-dl-totals > div:first-child { border-left: 0; }
.cmt-dl-totals__label { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.cmt-dl-totals__value { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmt-dl-totals__add .cmt-dl-totals__value { color: var(--mud-palette-primary); }
.cmt-dl-totals__remove .cmt-dl-totals__value { color: var(--mud-palette-warning); }

@media (max-width: 600px) {
    .cmt-dl-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmt-dl-totals > div:nth-child(odd) { border-left: 0; }
    .cmt-dl-totals > div:nth-child(n+3) { border-top: 1px solid var(--mud-palette-lines-default); }
}

.cmt-dl-bar {
    display: block;
    width: 160px;
    height: 5px;
    margin-left: 8px;
    border-radius: 3px;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

.cmt-dl-bar > span {
    display: block;
    height: 100%;
    background-color: var(--mud-palette-success);
}

/* Print: what a page prints is the page, not the application around it. `cmt-noprint` is for a page's own
   controls (a Print button printing itself). The month report (Fpl_StatisticsReportPage) is the first user. */
@media print {
    .cmt-topbar, .cmt-areatabs, .cmt-phonebar, .mud-drawer, .cmt-noprint { display: none !important; }
    .mud-main-content { padding: 0 !important; }
}