/*
 * StanCRM look and feel (spec app-shell/visual-style; professional-saas-look design D2). This is the ONLY place for
 * visual overrides: pages do not style themselves.
 *
 * Radzen Standard / Standard Dark supply the components; this file overrides them in layers:
 *   1. palette          fixed zinc greys
 *   2. semantic tokens  --sc-* for light (:root) and dark (:root.stancrm-dark): the only colours anything else uses
 *   3. Radzen mapping   --rz-* set from the --sc-* tokens, plus the compact density
 *   4. type             the Archivo stack and grid figures
 *   5. shell            the ground, the floating content panel and its header, the sidebar, sign-in pages
 *   6. common blocks    cards, the search panel, framework UI
 *   7. status           row edges and pills (StatusFamilies decides the family)
 *   8. components       ticket list, task list, attachments, click-to-call
 *   9. utilities        the sizes pages need, in place of inline styles
 *  10. client portal    the portal's soft look under html.stancrm-portal (spec app-shell/client-portal-look): its token values, then
 *                       the few shape rules tokens cannot express. Staff pages never carry the class.
 *
 * The dark class sits on <html> because Radzen derives its variables on :root (js/theme.js, ThemeRootClass).
 */

/* ---------- 1. Palette ---------- */
:root {
    --sc-gray-0: #ffffff;
    --sc-gray-50: #fafafa;
    --sc-gray-100: #f4f4f5;
    --sc-gray-200: #e4e4e7;
    --sc-gray-300: #d4d4d8;
    --sc-gray-400: #a1a1aa;
    --sc-gray-500: #71717a;
    --sc-gray-600: #52525b;
    --sc-gray-700: #3f3f46;
    --sc-gray-800: #27272a;
    --sc-gray-900: #18181b;
    --sc-gray-950: #09090b;
}

/* ---------- 2. Semantic tokens ---------- */
:root {
    --sc-bg: #f1f1f3; /* the window ground; the sidebar sits on it and the content panel floats on it */
    --sc-surface: var(--sc-gray-0);
    --sc-panel: #f7f7f8;
    --sc-sidebar: var(--sc-bg);
    --sc-border: var(--sc-gray-200);
    --sc-border-faint: #ededf0; /* grid column lines */
    --sc-border-strong: var(--sc-gray-300);
    --sc-text: var(--sc-gray-900);
    --sc-text-muted: #63636b; /* between gray-500 and gray-600: gray-500 is only 4.4:1 on the grey search panel */
    --sc-text-disabled: var(--sc-gray-400);
    --sc-accent: var(--sc-gray-900);
    --sc-accent-hover: var(--sc-gray-800);
    --sc-accent-text: var(--sc-gray-0);
    --sc-hover: var(--sc-gray-100);
    --sc-active: var(--sc-gray-100);
    --sc-focus: var(--sc-gray-900);
    --sc-danger: #be123c;
    --sc-danger-hover: #9f1239;
    --sc-shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.06);
    --sc-shadow-lift: 0 1px 2px rgb(24 24 27 / 0.06); /* under the current menu entry only */
    --sc-shadow-card: 0 1px 3px rgb(24 24 27 / 0.08), 0 4px 12px rgb(24 24 27 / 0.06); /* My Day cards */
    --sc-card-head: #ececef; /* a card's title bar: a step darker than the panel grey */
    --sc-success-head: #bfe8cf; /* the title bar of a success card (Work completed): a darker green than its fill */
    --sc-success-head-text: #14532d;

    /* The orange highlight (orange-highlight-floating-layout D4): "where you are" and "on", never status. */
    --sc-highlight: #f05a1a; /* marks, switch tracks, checked boxes: 3:1+ on the surface and the ground */
    --sc-highlight-fill: #cf4410; /* fills that carry text: white on it is 4.5:1+ */
    --sc-highlight-text: var(--sc-gray-0);
    --sc-highlight-soft: #fff3ed;

    --sc-radius-sm: 4px; /* pills */
    --sc-radius: 8px; /* buttons, inputs, dropdowns, menu entries */
    --sc-radius-lg: 12px; /* cards, panels, grid boxes, dialogs */
    --sc-radius-xl: 14px; /* the content panel */
    --sc-font: "Archivo", "Segoe UI", system-ui, sans-serif;

    /* Status families (design D3): fg = pill text, bg = pill fill, edge = the row's left edge. */
    --sc-neutral-fg: #52525b;
    --sc-neutral-bg: #f1f1f3;
    --sc-neutral-edge: #a1a1aa;
    --sc-info-fg: #4338ca;
    --sc-info-bg: #eef0ff;
    --sc-info-edge: #6366f1;
    --sc-progress-fg: #a16207;
    --sc-progress-bg: #fdf7e3;
    --sc-progress-edge: #eab308;
    --sc-review-fg: #7e22ce;
    --sc-review-bg: #f6efff;
    --sc-review-edge: #a855f7;
    --sc-success-fg: #15803d;
    --sc-success-bg: #ecfaf1;
    --sc-success-edge: #22c55e;
    --sc-alert-fg: #be123c;
    --sc-alert-bg: #fff0f3;
    --sc-alert-edge: #e11d48;
}

:root.stancrm-dark {
    --sc-bg: var(--sc-gray-950);
    --sc-surface: var(--sc-gray-900);
    --sc-panel: #111113;
    --sc-sidebar: var(--sc-bg);
    --sc-border: var(--sc-gray-800);
    --sc-border-faint: #222226;
    --sc-border-strong: var(--sc-gray-700);
    --sc-text: var(--sc-gray-50);
    --sc-text-muted: var(--sc-gray-400);
    --sc-text-disabled: var(--sc-gray-600);
    --sc-accent: var(--sc-gray-50);
    --sc-accent-hover: var(--sc-gray-200);
    --sc-accent-text: var(--sc-gray-900);
    --sc-hover: #202023;
    --sc-active: var(--sc-gray-800);
    --sc-focus: var(--sc-gray-50);
    --sc-danger: #e11d48;
    --sc-danger-hover: #f43f5e;
    --sc-shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.5), 0 0 0 1px var(--sc-gray-800);
    --sc-shadow-lift: none;
    --sc-shadow-card: 0 1px 3px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.35);
    --sc-card-head: #1f1f23;
    --sc-success-head: #1f4a2c;
    --sc-success-head-text: #bbf7d0;

    --sc-highlight: #fb6a2c;
    --sc-highlight-fill: #fb6a2c;
    --sc-highlight-text: var(--sc-gray-900);
    --sc-highlight-soft: #2a1810;

    /* Dark families: a light tint for text, a deep tint for the fill, the 500 hue for the edge. */
    --sc-neutral-fg: #d4d4d8;
    --sc-neutral-bg: #27272a;
    --sc-neutral-edge: #71717a;
    --sc-info-fg: #a5b4fc;
    --sc-info-bg: #1f2140;
    --sc-info-edge: #6366f1;
    --sc-progress-fg: #fcd34d;
    --sc-progress-bg: #33290f;
    --sc-progress-edge: #eab308;
    --sc-review-fg: #d8b4fe;
    --sc-review-bg: #2a1f3d;
    --sc-review-edge: #a855f7;
    --sc-success-fg: #86efac;
    --sc-success-bg: #16291c;
    --sc-success-edge: #22c55e;
    --sc-alert-fg: #fda4af;
    --sc-alert-bg: #3a1820;
    --sc-alert-edge: #e11d48;
}

/* ---------- 3. Radzen mapping ---------- */
:root {
    /* Compact density, one type step up (spec "Readable type size"): every rem below scales with the root. */
    --rz-root-font-size: 15px;
    --rz-body-font-size: 0.9375rem;
    --rz-text-body1-font-size: 0.9375rem;
    --rz-text-body2-font-size: 0.875rem;
    --rz-input-height: 2rem;
    --rz-input-font-size: 0.875rem;
    --rz-form-field-filled-height: 2.75rem;
    --rz-grid-cell-padding: 0.25rem 0.5rem;
    --rz-grid-header-cell-padding: 0.25rem 0;
    --rz-grid-cell-font-size: 0.8125rem;
    --rz-grid-header-font-size: 0.8125rem;
    --rz-sidebar-width: 15.5rem;
    --rz-layout-body-padding: 0.5rem 0.5rem 0.5rem 0; /* the strip of ground round the content panel */
    --rz-card-padding: 0.75rem;
    /* The sidebar menu (sidebar-rail-refresh D2): the collapsed rail, the square each entry fills in it, and its motion. */
    --stancrm-rail-width: 4rem;
    --stancrm-rail-item: 2.5rem;
    --stancrm-nav-icon: 1.375rem;
    --stancrm-nav-inset: calc((var(--stancrm-rail-width) - var(--stancrm-rail-item)) / 2); /* centres the square in the rail */
    --stancrm-nav-motion: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --stancrm-nav-fade-in: opacity 150ms ease-out 100ms; /* text shows once the width has started to open */
    --stancrm-nav-fade-out: opacity 100ms ease-in; /* text is gone before the width clips it */

    /* Greys: both Standard themes order their base scale light to dark, so the zinc scale fits either. */
    --rz-base-50: var(--sc-gray-50);
    --rz-base-100: var(--sc-gray-100);
    --rz-base-200: var(--sc-gray-200);
    --rz-base-300: var(--sc-gray-300);
    --rz-base-400: var(--sc-gray-400);
    --rz-base-500: var(--sc-gray-500);
    --rz-base-600: var(--sc-gray-600);
    --rz-base-700: var(--sc-gray-700);
    --rz-base-800: var(--sc-gray-800);
    --rz-base-900: var(--sc-gray-900);
    --rz-base-background-color: var(--sc-surface);
    --rz-body-background-color: var(--sc-bg);
    --rz-layout-body-background-color: var(--sc-bg);
    --rz-text-color: var(--sc-text);
    --rz-text-title-color: var(--sc-text);
    --rz-text-secondary-color: var(--sc-text-muted);
    --rz-text-tertiary-color: var(--sc-text-muted);
    --rz-text-disabled-color: var(--sc-text-disabled);
    --rz-border-normal: 1px solid var(--sc-border);
    --rz-border-focus: 1px solid var(--sc-border-strong);
    --rz-border-radius: var(--sc-radius);
    --rz-text-font-family: var(--sc-font);

    /* The single monochrome accent. */
    --rz-primary: var(--sc-accent);
    --rz-primary-light: var(--sc-accent-hover);
    --rz-primary-lighter: var(--sc-hover);
    --rz-primary-dark: var(--sc-accent-hover);
    --rz-primary-darker: var(--sc-accent-hover);
    --rz-on-primary: var(--sc-accent-text);
    --rz-on-primary-lighter: var(--sc-text);
    --rz-secondary: var(--sc-accent);
    --rz-on-secondary: var(--sc-accent-text);
    --rz-link-color: var(--sc-text);
    --rz-outline-color: var(--sc-focus);

    /* Meaning colours come from the status families. */
    --rz-danger: var(--sc-danger);
    --rz-danger-light: var(--sc-danger-hover);
    --rz-danger-dark: var(--sc-danger-hover);
    --rz-danger-darker: var(--sc-danger-hover);
    --rz-danger-lighter: var(--sc-alert-bg);
    --rz-on-danger-lighter: var(--sc-alert-fg);
    --rz-success-lighter: var(--sc-success-bg);
    --rz-on-success-lighter: var(--sc-success-fg);
    --rz-info-lighter: var(--sc-info-bg);
    --rz-on-info-lighter: var(--sc-info-fg);
    --rz-warning-lighter: var(--sc-progress-bg);
    --rz-on-warning-lighter: var(--sc-progress-fg);

    /* Inputs. */
    --rz-input-background-color: var(--sc-surface);
    --rz-input-border: 1px solid var(--sc-border-strong);
    --rz-input-border-radius: var(--sc-radius);
    --rz-input-focus-border: 1px solid var(--sc-focus);
    --rz-input-focus-shadow: 0 0 0 1px var(--sc-focus);
    --rz-form-field-label-color: var(--sc-text-muted);
    --rz-form-field-label-focus-color: var(--sc-text);
    --rz-form-field-label-floating-background-color: var(--sc-surface);

    /* Buttons and surfaces are flat; only overlays float. */
    --rz-button-shadow: none;
    --rz-button-focus-shadow: none;
    --rz-button-border-radius: var(--sc-radius);
    --rz-card-shadow: none;
    --rz-card-border: 1px solid var(--sc-border);
    --rz-card-border-radius: var(--sc-radius-lg);
    --rz-card-background-color: var(--sc-surface);
    --rz-panel-shadow: none;
    --rz-panel-background-color: var(--sc-surface);
    --rz-panel-border-radius: var(--sc-radius-lg);
    --rz-alert-border-radius: var(--sc-radius-lg);
    --rz-dialog-border-radius: var(--sc-radius-lg);
    --rz-dialog-shadow: var(--sc-shadow-overlay);
    --rz-dropdown-panel-shadow: var(--sc-shadow-overlay);
    --rz-dropdown-panel-border: 1px solid var(--sc-border);
    --rz-datepicker-panel-shadow: var(--sc-shadow-overlay);
    --rz-datepicker-panel-border: 1px solid var(--sc-border);
    --rz-notification-shadow: var(--sc-shadow-overlay);
    --rz-notification-border-radius: var(--sc-radius-lg);
    --rz-context-menu-box-shadow: var(--sc-shadow-overlay);
    --rz-splitbutton-menu-shadow: var(--sc-shadow-overlay);
    --rz-timespanpicker-popup-shadow: var(--sc-shadow-overlay);
    --rz-colorpicker-panel-shadow: var(--sc-shadow-overlay);
    --rz-tabs-tab-selected-top-border-color: var(--sc-accent);
    --rz-tabs-tab-selected-color: var(--sc-text);

    /* Grids: a rounded box, hairline rows, faint columns, a grey header row, no stripes
       (spec "Rows separated by a thin line"; orange-highlight-floating-layout D6). */
    --rz-grid-background-color: var(--sc-surface);
    --rz-grid-border: 1px solid var(--sc-border);
    --rz-grid-border-radius: var(--sc-radius-lg);
    --rz-grid-cell-border: 1px solid var(--sc-border);
    --rz-grid-bottom-cell-border: 1px solid var(--sc-border);
    --rz-grid-right-cell-border: 1px solid var(--sc-border-faint);
    --rz-grid-stripe-background-color: transparent;
    --rz-grid-stripe-odd-background-color: transparent;
    --rz-grid-header-background-color: var(--sc-panel);
    --rz-grid-header-color: var(--sc-text-muted);
    --rz-grid-hover-background-color: var(--sc-hover);
    --rz-grid-hover-color: inherit;
    /* Frozen columns (row actions) must be opaque: the stripe colours above are transparent, and Radzen derives the
       frozen ones from them, so the scrolled columns showed through the action buttons. */
    --rz-grid-frozen-cell-background-color: var(--sc-surface);
    --rz-grid-frozen-stripe-background-color: var(--sc-surface);
    --rz-grid-frozen-stripe-odd-background-color: var(--sc-surface);
    --rz-grid-selected-background-color: var(--sc-active);
    --rz-grid-selected-color: inherit;

    /* Pager: inside the grid box; the current page carries the orange highlight (design D4, D6). */
    --rz-pager-border: none;
    --rz-pager-button-border-radius: var(--sc-radius);
    --rz-pager-numeric-button-border: 1px solid var(--sc-border);
    --rz-pager-numeric-button-background-color: var(--sc-surface);
    --rz-pager-numeric-button-color: var(--sc-text);
    --rz-pager-numeric-button-hover-background-color: var(--sc-hover);
    --rz-pager-numeric-button-hover-color: var(--sc-text);
    --rz-pager-numeric-button-selected-background-color: var(--sc-highlight-fill);
    --rz-pager-numeric-button-selected-border: 1px solid var(--sc-highlight-fill);
    --rz-pager-numeric-button-selected-color: var(--sc-highlight-text);

    /* Checked controls carry the orange highlight; primary buttons and focus rings stay on the accent. */
    --rz-switch-checked-background-color: var(--sc-highlight);
    --rz-checkbox-checked-background-color: var(--sc-highlight);
    --rz-checkbox-checked-border: 1px solid var(--sc-highlight);
    --rz-checkbox-checked-color: var(--sc-highlight-text);
    --rz-checkbox-checked-hover-background-color: var(--sc-highlight);
    --rz-checkbox-checked-hover-border: 1px solid var(--sc-highlight);
    --rz-radio-checked-background-color: var(--sc-highlight);
    --rz-radio-checked-border: 1px solid var(--sc-highlight);
    --rz-radio-checked-color: var(--sc-highlight-text);
    --rz-radio-checked-hover-background-color: var(--sc-highlight);

    /* Sidebar: on the ground, no border of its own (the header lives in the content panel). */
    --rz-sidebar-background-color: var(--sc-sidebar);
    --rz-sidebar-color: var(--sc-text-muted);
    --rz-sidebar-border-inline-end: none;
    --rz-sidebar-toggle-color: var(--sc-text-muted);
    --rz-sidebar-toggle-hover-background-color: var(--sc-hover);
    --rz-sidebar-toggle-hover-color: var(--sc-text);
    --rz-profile-menu-background-color: transparent;
    --rz-profile-menu-top-item-background-color: transparent;
    --rz-profile-menu-item-hover-background-color: var(--sc-hover);
}

/* Grids: sticky headers; the last row drops its line, the grid border closes it; the pager sits below a hairline. */
.rz-data-grid .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.rz-data-grid .rz-grid-table tbody > tr:last-child > td {
    border-bottom: none;
}

.rz-data-grid {
    overflow: hidden;
}

    .rz-data-grid .rz-pager {
        border-top: 1px solid var(--sc-border);
    }

/* A frozen header cell keeps the header grey; a right-frozen column is set off by a hairline while rows scroll under it. */
.rz-data-grid .rz-grid-table thead th.rz-frozen-cell {
    background-color: var(--sc-panel);
}

.rz-data-grid .rz-grid-table-fixed .rz-frozen-cell-right {
    border-inline-start: 1px solid var(--sc-border);
}

/* Secondary buttons (ButtonStyle.Light / Base, filled): white with a grey border. */
.rz-button.rz-variant-filled.rz-light,
.rz-button.rz-variant-filled.rz-base {
    background-color: var(--sc-surface);
    color: var(--sc-text);
    box-shadow: inset 0 0 0 1px var(--sc-border-strong);
}

    .rz-button.rz-variant-filled.rz-light:not(.rz-state-disabled):hover,
    .rz-button.rz-variant-filled.rz-base:not(.rz-state-disabled):hover {
        background-color: var(--sc-hover);
    }

/* A visible focus ring on every control reached by keyboard. */
.rz-button:focus-visible,
.rz-sidebar-toggle:focus-visible,
a:focus-visible {
    outline: 2px solid var(--sc-focus);
    outline-offset: 2px;
}

/* ---------- 4. Type ---------- */
body {
    font-family: var(--sc-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Ids, dates, times and counts line up in columns. */
.rz-data-grid td,
.stancrm-num {
    font-variant-numeric: tabular-nums;
}

/* ---------- 5. Shell (staff and client) ---------- */
/* The content panel floats on the ground (spec "Floating content panel"; orange-highlight-floating-layout D1). */
.stancrm-content {
    box-sizing: border-box;
    min-height: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-xl);
}

.stancrm-page-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 0.75rem 0 0.25rem;
    border-bottom: 1px solid var(--sc-border);
}

.stancrm-page {
    padding: 0.75rem;
}

.stancrm-page-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--sc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stancrm-spacer {
    flex: 1 1 auto;
}

/* The staff header's ticket search (spec "Ticket search in the header"): a narrow box with its button; it shrinks before the
   title does on a narrow window. */
.stancrm-ticket-search {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex: 0 1 10rem;
    min-width: 6rem;
}

.stancrm-ticket-search-box {
    width: 100%;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* Unread counters: plain figures, no coloured badges in the frame. */
.stancrm-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sc-text-muted);
    text-decoration: none;
    padding: 0.25rem 0.375rem;
    border-radius: var(--sc-radius);
}

    .stancrm-counter:hover {
        background: var(--sc-hover);
        color: var(--sc-text);
    }

    .stancrm-counter .rz-badge {
        background-color: var(--sc-active);
        color: var(--sc-text);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

.stancrm-user-name {
    margin-inline-start: 0.25rem;
    font-weight: 500;
}

/* The sidebar: the brand card, then each menu section under a small label (design D2, D3; sidebar-rail-refresh D2–D6).
   Every entry keeps the same inset and padding expanded and in the rail, so its icon never moves: only the width changes. */
.stancrm-sidebar.rz-sidebar {
    padding: 0.5rem 0;
    box-sizing: border-box;
    overflow-x: hidden;
    transition: width var(--stancrm-nav-motion), opacity var(--stancrm-nav-motion);
}

.stancrm-brand-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 var(--stancrm-nav-inset) 0.5rem;
    padding: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    color: var(--sc-text);
    text-decoration: none;
    transition: padding var(--stancrm-nav-motion), gap var(--stancrm-nav-motion);
}

    .stancrm-brand-card img {
        width: 2rem;
        height: 2rem;
        flex: none;
        object-fit: contain;
        border: 1px solid var(--sc-border);
        border-radius: var(--sc-radius);
        background: var(--sc-gray-0);
    }

.stancrm-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    line-height: 1.25;
    white-space: nowrap;
    transition: var(--stancrm-nav-fade-in);
}

.stancrm-brand-name {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.stancrm-brand-sub {
    font-size: 0.75rem;
    color: var(--sc-text-muted);
}

.stancrm-menu-group {
    max-height: 2rem;
    padding: 0.5rem calc(var(--stancrm-nav-inset) + 0.5rem) 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
    transition: max-height var(--stancrm-nav-motion), padding var(--stancrm-nav-motion), opacity var(--stancrm-nav-motion);
}

.stancrm-nav {
    display: flex;
    flex-direction: column;
}

.stancrm-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sections are split by a hairline, in the rail and expanded alike. */
.stancrm-nav-section + .stancrm-nav-section::before,
.stancrm-nav-divider {
    content: "";
    display: block;
    flex: none;
    height: 1px;
    margin: 0.375rem var(--stancrm-nav-inset);
    background: var(--sc-border);
}

.stancrm-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--stancrm-nav-inset));
    height: var(--stancrm-rail-item);
    margin: 1px var(--stancrm-nav-inset);
    padding: 0 calc((var(--stancrm-rail-item) - var(--stancrm-nav-icon)) / 2);
    border: 0;
    border-radius: var(--sc-radius);
    background: transparent;
    color: var(--sc-text-muted);
    font: inherit;
    font-size: 0.9375rem;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms, color 120ms;
}

    .stancrm-nav-item:hover {
        background-color: var(--sc-hover);
        color: var(--sc-text);
    }

    .stancrm-nav-item:focus-visible {
        outline: 2px solid var(--sc-focus);
        outline-offset: -2px;
    }

    .stancrm-nav-item .stancrm-nav-icon {
        flex: none;
        width: var(--stancrm-nav-icon);
        font-size: var(--stancrm-nav-icon);
        color: inherit;
    }

.stancrm-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: var(--stancrm-nav-fade-in);
}

/* Direct links are semibold; group headers stay regular with a chevron (spec "Direct links set apart from groups"). */
.stancrm-nav-link {
    font-weight: 600;
    color: var(--sc-text);
}

.stancrm-nav-group {
    font-weight: 400;
}

    .stancrm-nav-item .stancrm-nav-chevron {
        flex: none;
        width: 1.125rem;
        font-size: 1.125rem;
        transition: transform var(--stancrm-nav-motion), var(--stancrm-nav-fade-in);
    }

    .stancrm-nav-group[aria-expanded="true"] .stancrm-nav-chevron {
        transform: rotate(180deg);
    }

.stancrm-nav-current-group {
    color: var(--sc-text);
}

/* A group's entries slide open: the grid row animates from 0fr to the content's own height (design D3). */
.stancrm-nav-kids {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--stancrm-nav-motion);
}

.stancrm-nav-kids-open {
    grid-template-rows: 1fr;
}

.stancrm-nav-kids-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: var(--stancrm-nav-fade-out);
}

.stancrm-nav-kids-open > .stancrm-nav-kids-inner {
    opacity: 1;
    transition: opacity var(--stancrm-nav-motion);
}

/* The same fold for any block that swaps between the expanded sidebar and the rail (the callback card and its icon). */
.stancrm-fold {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--stancrm-nav-motion);
}

.stancrm-fold-open {
    grid-template-rows: 1fr;
}

.stancrm-fold-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: var(--stancrm-nav-fade-out);
}

.stancrm-fold-open > .stancrm-fold-inner {
    opacity: 1;
    transition: var(--stancrm-nav-fade-in);
}

.stancrm-nav-kids .stancrm-nav-child {
    height: 2.125rem;
    padding-inline-start: calc((var(--stancrm-rail-item) - var(--stancrm-nav-icon)) / 2 + var(--stancrm-nav-icon) + 0.75rem);
    font-weight: 400;
}

    .stancrm-nav-kids .stancrm-nav-child .stancrm-nav-icon {
        display: none;
    }

/* The current entry: a white pill with an orange mark at its left (spec "Staff navigation menu"; design D5). In the rail
   the same box is a square tile, and a group that holds the current page is marked in its place. */
.stancrm-nav-item.stancrm-nav-current,
.stancrm-nav-rail .stancrm-nav-item.stancrm-nav-current-group {
    background-color: var(--sc-surface);
    box-shadow: inset 0 0 0 1px var(--sc-border), var(--sc-shadow-lift);
    color: var(--sc-text);
    font-weight: 600;
}

    .stancrm-nav-current::before,
    .stancrm-nav-rail .stancrm-nav-current-group::before {
        content: "";
        position: absolute;
        inset-block: 0.5625rem;
        inset-inline-start: calc(2px - var(--stancrm-nav-inset));
        width: 3px;
        border-radius: 2px;
        background: var(--sc-highlight);
    }

/* The rail (spec "Collapsed icon rail"): labels fade, section labels fold away, groups open a flyout instead. */
.stancrm-nav-rail .stancrm-nav-label,
.stancrm-nav-rail .stancrm-nav-chevron {
    opacity: 0;
    transition: transform var(--stancrm-nav-motion), var(--stancrm-nav-fade-out);
}

.stancrm-nav-rail .stancrm-menu-group {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
}

.stancrm-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* Fixed without offsets, the flyout sits where it would in the flow (under its button) but escapes the sidebar's
   overflow; the margins lift it level with the button and move it beside the rail (design D5). */
.stancrm-nav-flyout {
    position: fixed;
    z-index: 1001;
    box-sizing: border-box;
    width: 15rem;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    margin-top: calc(-1 * var(--stancrm-rail-item) - 1px);
    margin-inline-start: calc(var(--stancrm-rail-width) + 0.375rem);
    padding: 0.375rem;
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    box-shadow: var(--sc-shadow-overlay);
    animation: stancrm-flyout-in var(--stancrm-nav-motion);
}

    .stancrm-nav-flyout:focus {
        outline: none;
    }

.stancrm-nav-flyout-title {
    padding: 0.375rem 0.625rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
}

.stancrm-nav-flyout .stancrm-nav-item {
    width: 100%;
    height: 2.125rem;
    margin: 1px 0;
    padding-inline: 0.625rem;
    font-weight: 400;
    color: var(--sc-text);
}

    .stancrm-nav-flyout .stancrm-nav-item .stancrm-nav-icon {
        color: var(--sc-text-muted);
    }

.stancrm-nav-rail .stancrm-nav-flyout .stancrm-nav-label {
    opacity: 1;
}

.stancrm-nav-flyout .stancrm-nav-item.stancrm-nav-current {
    background-color: var(--sc-active);
    box-shadow: none;
}

    .stancrm-nav-flyout .stancrm-nav-current::before {
        display: none;
    }

@keyframes stancrm-flyout-in {
    from {
        opacity: 0;
        transform: translateX(-0.375rem);
    }
}

/* Unread count: a number after the label; in the rail a dot on the icon (spec "Portal icon rail"). */
.stancrm-nav-item .stancrm-notifications-badge {
    flex: none;
    transition: opacity var(--stancrm-nav-motion);
}

.stancrm-nav-rail .stancrm-notifications-badge {
    position: absolute;
    top: 0.375rem;
    inset-inline-start: calc(50% + 0.25rem);
    width: 0.5625rem;
    min-width: 0;
    height: 0.5625rem;
    padding: 0;
    font-size: 0;
    box-shadow: 0 0 0 2px var(--sc-sidebar);
}

/* Desktop: a collapsed sidebar is the icon rail instead of disappearing. */
@media (min-width: 769px) {
    .stancrm-sidebar.rz-sidebar-collapsed {
        width: var(--stancrm-rail-width) !important;
        opacity: 1;
    }

        .stancrm-sidebar.rz-sidebar-collapsed .stancrm-brand-text {
            opacity: 0;
            transition: var(--stancrm-nav-fade-out);
        }

        .stancrm-sidebar.rz-sidebar-collapsed .stancrm-brand-card {
            gap: 0;
            padding: calc((var(--stancrm-rail-item) - 2rem) / 2 - 1px);
        }
}

/* Reduce motion: groups, the rail and the flyout change at once (spec "Animated menu groups"). */
@media (prefers-reduced-motion: reduce) {
    .stancrm-sidebar.rz-sidebar,
    .stancrm-sidebar * {
        transition: none !important;
        animation: none !important;
    }
}

/* Narrow screens: Radzen's responsive sidebar opens over the content; the panel fills the window. */
@media (max-width: 768px) {
    .stancrm-shell {
        --rz-layout-body-padding: 0;
    }

    .stancrm-content {
        border: none;
        border-radius: 0;
    }

    .stancrm-sidebar {
        background: var(--sc-bg);
    }

        /* Closed, the sidebar is 0 wide; its padding would otherwise push the page 8px off the right edge. */
        .stancrm-sidebar:not(.rz-sidebar-expanded) {
            padding: 0;
            overflow: hidden;
        }

    .stancrm-page {
        padding: 0.5rem;
    }

    .stancrm-user-name {
        display: none;
    }

    /* Search panels: the fixed-width fields share each row instead of leaving a ragged half-width column. */
    .stancrm-filter-bar {
        padding: 0.5rem;
    }

        .stancrm-filter-bar > .rz-form-field {
            flex: 1 1 9.5rem;
            min-width: 0;
        }

            .stancrm-filter-bar > .rz-form-field .rz-dropdown,
            .stancrm-filter-bar > .rz-form-field .rz-textbox,
            .stancrm-filter-bar > .rz-form-field .rz-numeric,
            .stancrm-filter-bar > .rz-form-field .rz-datepicker {
                width: 100%;
                min-width: 0;
            }
}

/* Sign-in pages: a plain bordered card, no shadow. */
.stancrm-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--sc-bg);
}

.stancrm-auth-card {
    width: 100%;
    max-width: 22rem;
    padding: 1.5rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    color: var(--sc-text);
}

.stancrm-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

    .stancrm-auth-brand img {
        height: 2.25rem;
        width: auto;
        border: 1px solid var(--sc-border);
        border-radius: 4px;
        background: var(--sc-gray-0);
    }

.stancrm-auth a {
    color: var(--sc-text);
}

.stancrm-error-page h1 {
    font-size: 1.25rem;
}

/* ---------- 6. Common blocks ---------- */
.rz-card {
    box-shadow: none;
}

/* The search panel at the top of a list page: set apart by a grey fill; its inputs stay white. */
.stancrm-filter-bar {
    padding: 0.75rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-panel);
}

/* The "Search panel" switch above it. */
.stancrm-filter-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.stancrm-narrow-card {
    max-width: 26rem;
}

.stancrm-muted {
    color: var(--sc-text-muted);
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    background: var(--sc-alert-bg);
    color: var(--sc-alert-fg);
    border-top: 1px solid var(--sc-alert-edge);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: var(--sc-alert-bg);
    color: var(--sc-alert-fg);
    border: 1px solid var(--sc-alert-edge);
    border-radius: var(--sc-radius-lg);
    padding: 1rem;
}

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

/* ---------- 7. Status: row edges and pills (StatusFamilies) ---------- */
.stancrm-edge-neutral { --sc-edge: var(--sc-neutral-edge); }
.stancrm-edge-info { --sc-edge: var(--sc-info-edge); }
.stancrm-edge-progress { --sc-edge: var(--sc-progress-edge); }
.stancrm-edge-review { --sc-edge: var(--sc-review-edge); }
.stancrm-edge-success { --sc-edge: var(--sc-success-edge); }
.stancrm-edge-alert { --sc-edge: var(--sc-alert-edge); }

/* An inset shadow, not a border, so the edge adds no width and columns do not shift. */
.rz-data-grid .stancrm-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--sc-edge, transparent);
    padding-inline-start: calc(0.5rem + 3px);
}

.rz-data-grid .stancrm-row > td {
    vertical-align: top;
}

.stancrm-pill {
    display: inline-flex;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.5rem;
    border-radius: var(--sc-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--sc-pill-fg);
    background: var(--sc-pill-bg);
}

.stancrm-pill-neutral { --sc-pill-fg: var(--sc-neutral-fg); --sc-pill-bg: var(--sc-neutral-bg); }
.stancrm-pill-info { --sc-pill-fg: var(--sc-info-fg); --sc-pill-bg: var(--sc-info-bg); }
.stancrm-pill-progress { --sc-pill-fg: var(--sc-progress-fg); --sc-pill-bg: var(--sc-progress-bg); }
.stancrm-pill-review { --sc-pill-fg: var(--sc-review-fg); --sc-pill-bg: var(--sc-review-bg); }
.stancrm-pill-success { --sc-pill-fg: var(--sc-success-fg); --sc-pill-bg: var(--sc-success-bg); }
.stancrm-pill-alert { --sc-pill-fg: var(--sc-alert-fg); --sc-pill-bg: var(--sc-alert-bg); }

.stancrm-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* ---------- 8. Components ---------- */
/* Ticket and task lists wrap long details instead of cutting them off. The selector out-ranks Radzen's
   ".rz-grid-table td .rz-cell-data" (nowrap + ellipsis), which a two-class selector does not. */
.stancrm-ticket-grid .rz-grid-table td .rz-cell-data, .stancrm-task-grid .rz-grid-table td .rz-cell-data {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Ticket list: bold category and brief in the text colour, details muted. */

.stancrm-ticket-category {
    font-weight: 600;
}

.stancrm-ticket-brief {
    font-weight: 500;
}

.stancrm-ticket-label {
    font-weight: 500;
    color: var(--sc-text-muted);
}

.stancrm-ticket-contact,
.stancrm-ticket-old,
.stancrm-ticket-time,
.stancrm-ticket-feedback {
    color: var(--sc-text-muted);
}

.stancrm-ticket-old {
    cursor: help;
}

.stancrm-ticket-feedback {
    font-size: 0.75rem;
}

.stancrm-rating-good {
    color: var(--sc-success-fg);
}

.stancrm-rating-poor {
    color: var(--sc-alert-fg);
}

.stancrm-ticket-rating .rz-icon {
    font-size: 1rem;
    vertical-align: text-bottom;
    color: var(--sc-text-muted);
}

/* Pasted images shrink to their box, never wider (spec "Pasted images fit their box"; post-migration-refinements D8): in every
   rich-text editor and every container that shows stored HTML. The stored HTML keeps the image at full size. */
.rz-html-editor-content img,
.stancrm-ticket-details img,
.stancrm-ticket-descr img,
.stancrm-ticket-description img,
.stancrm-ticket-resolution img,
.stancrm-client-resolution img,
.stancrm-task-description img,
.stancrm-task-release img,
.stancrm-request-reason img,
.stancrm-kb-contents-view img,
.stancrm-notification-text img,
.stancrm-canned-text img,
.stancrm-holiday-descr img {
    max-width: 100%;
    height: auto;
}

/* View Description (spec tickets/ticket-dashboard "Long descriptions on demand"): the dialog's content scrolls, never sideways. */
.stancrm-description-dialog .rz-dialog-content {
    overflow-y: auto;
    overflow-x: hidden;
}

/* A wide table or preformatted block cannot push a scrollbar into the editor either. */
.rz-html-editor-content {
    overflow-x: hidden;
}

.rz-html-editor-content pre {
    white-space: pre-wrap;
}

[title].stancrm-pill-alert {
    cursor: help;
}

/* A date with its time on the line below, muted (DateTimeCell; spec "Date and time on two lines"). */
.stancrm-dt-date,
.stancrm-dt-time {
    display: block;
    white-space: nowrap;
}

.stancrm-dt-time {
    color: var(--sc-text-muted);
}

/* Task list. */
/* A high-priority task's priority cell (spec tasks/task-dashboard "Row content"): the alert family's soft fill. */
.rz-data-grid .rz-grid-table td.stancrm-priority-high {
    background-color: var(--sc-alert-bg);
    color: var(--sc-alert-fg);
}

/* A task's expanded detail starts where the Task column's text does, not under the expand arrow (spec "Row detail"). */
.stancrm-task-grid .rz-expanded-row-template {
    margin-inline-start: var(--rz-grid-column-icon-width);
}

/* Development Tasks and Tickets Dashboard read one size up from the shared tokens (spec "Larger text on the staff work lists";
   post-migration-refinements D6a). Scoped by the page class, since other pages share the grid classes. Padding stays as is. */
.stancrm-large-type {
    --rz-grid-cell-font-size: 0.9375rem;
    --rz-grid-header-font-size: 0.9375rem;
    --rz-input-font-size: 0.9375rem;
    --rz-text-body2-font-size: 0.9375rem;
}

.stancrm-large-type .stancrm-pill,
.stancrm-large-type .stancrm-ticket-feedback,
.stancrm-large-type .stancrm-task-estimate,
.stancrm-large-type .stancrm-dt-time {
    font-size: 0.8125rem;
}

/* The work lists light up the row under the pointer. Radzen does this only for grids with row selection (".rz-selectable"),
   which these two are not. The frozen actions cell follows the row; a high-priority cell keeps its tint. */
.stancrm-large-type .rz-data-grid tbody tr.rz-data-row:hover > td:not(.stancrm-priority-high) {
    background-color: var(--rz-grid-hover-background-color);
}

.stancrm-task-id {
    font-weight: 600;
    margin-right: 0.35rem;
}

.stancrm-task-priority {
    font-weight: 600;
}

.stancrm-task-clock {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stancrm-task-clock-overdue {
    color: var(--sc-alert-fg);
}

/* Kanban Sheet: seven columns side by side, scrolling inside the content panel; stacked on narrow windows. */
.stancrm-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 1fr);
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .stancrm-kanban {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }
}

.stancrm-kanban-column {
    min-width: 0;
}

.stancrm-kanban-employee {
    color: var(--sc-text-muted);
}

.stancrm-task-estimate {
    display: block;
    font-size: 0.75rem;
    color: var(--sc-text-muted);
}

.stancrm-task-deadline {
    color: var(--sc-alert-fg);
}

.stancrm-task-detail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

/* Click-to-call (CallLink): a link-styled button in the text colour. */
.stancrm-call-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sc-text-muted);
    font: inherit;
    cursor: pointer;
}

    .stancrm-call-link:hover:not(:disabled) {
        color: var(--sc-text);
        text-decoration: underline;
    }

    .stancrm-call-link:disabled {
        color: var(--sc-text-disabled);
        cursor: progress;
    }

    .stancrm-call-link .rz-icon {
        font-size: 1.1em;
    }

/* Attachments (FileAttachments component). */
.stancrm-attachments-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

    .stancrm-attachments-list li {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        overflow-wrap: anywhere;
    }

.stancrm-attachments-progress,
.stancrm-attachments-error {
    margin-top: 0.25rem;
}

/* Generate EXE and Release EXE (specs tasks/exe-generation and tasks/exe-release): the legacy explanation, and the large red
   untested-tasks warning that blocks a build. */
.stancrm-release-intro {
    color: var(--sc-text-muted);
}

.stancrm-release-gate {
    color: var(--sc-danger);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Dev Report: the "not found" warnings and the linked clients (spec tasks/dev-report "Report columns"). */
.stancrm-dev-report-warning {
    color: var(--sc-alert-fg);
    font-weight: 600;
}

.stancrm-dev-report-client,
.stancrm-dev-report-developer {
    font-weight: 600;
}

/* Masters pages (convert-masters): an inline message under a field edited in a grid row. */
.stancrm-field-error {
    color: var(--sc-danger);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Knowledge Base (convert-knowledge-base D4): the tree beside the selected entry; stacked on narrow windows. */
.stancrm-kb {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .stancrm-kb {
        grid-template-columns: minmax(0, 1fr);
    }
}

.stancrm-kb-tree {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 0.5rem;
    overflow-x: auto;
}

.stancrm-kb-entry {
    min-width: 0;
}

.stancrm-kb-contents-view {
    overflow-wrap: anywhere;
}

.stancrm-kb-contents-view pre {
    white-space: pre-wrap;
}

.stancrm-kb-invalid-link,
.stancrm-kb-empty {
    color: var(--sc-text-muted);
}

/* Client portal: Dashboard figures and the Tasks page (spec client-portal/client-dashboard, client-tasks) */
.stancrm-client-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stancrm-client-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem;
}

.stancrm-client-figure {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid var(--sc-border);
    border-radius: 0.5rem;
    background: var(--sc-panel);
}

.stancrm-client-figure-value {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sc-text);
}

.stancrm-client-figure-label {
    color: var(--sc-text-muted);
}

.stancrm-client-task-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stancrm-client-files a {
    font-weight: 600;
}

.stancrm-client-group {
    font-weight: 600;
}

/* My Day (spec app-shell/my-day "Board layout"; staff-my-day design D8): count cards across the top, then list cards in a
   responsive grid; one column below 768px. Shared tokens only, so light and dark follow the theme. */
/* My Day reads one size up: body text 15px, small text 13px (the request after review: "Increase the font-size"). */
.stancrm-myday {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1rem;
}

.stancrm-myday-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.stancrm-myday-greeting {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--sc-text);
}

.stancrm-myday-date {
    margin: 0.15rem 0 0;
    color: var(--sc-text-muted);
}

.stancrm-myday-board {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stancrm-myday-refresh {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--sc-text-muted);
    font-size: 0.875rem;
}

.stancrm-myday-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem;
}

.stancrm-myday-count {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    box-shadow: var(--sc-shadow-card);
    color: var(--sc-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .stancrm-myday-count:hover {
        background: var(--sc-hover);
    }

.stancrm-myday-count-value {
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stancrm-myday-count-label {
    color: var(--sc-text-muted);
}

.stancrm-myday-count-alert {
    border-color: var(--sc-alert-edge);
    background: var(--sc-alert-bg);
}

    .stancrm-myday-count-alert .stancrm-myday-count-value {
        color: var(--sc-alert-fg);
    }

/* Two columns, each its own stack, so a short card never leaves a gap beside a tall one; the cards keep a fixed order. */
.stancrm-myday-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.stancrm-myday-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.stancrm-myday-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    box-shadow: var(--sc-shadow-card);
    overflow: hidden;
}

.stancrm-myday-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-card-head);
}

.stancrm-myday-card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--sc-text);
}

.stancrm-myday-empty {
    margin: 0;
    padding: 1rem 0.75rem;
    color: var(--sc-text-muted);
}

.stancrm-myday-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stancrm-myday-row {
    border-bottom: 1px solid var(--sc-border-faint);
    box-shadow: inset 3px 0 0 var(--sc-edge, transparent);
}

    .stancrm-myday-row:last-child {
        border-bottom: 0;
    }

.stancrm-myday-sublabel {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--sc-border-faint);
    background: var(--sc-panel);
    color: var(--sc-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.stancrm-myday-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem calc(0.75rem + 3px);
    border: 0;
    background: transparent;
    color: var(--sc-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .stancrm-myday-item:hover {
        background: var(--sc-hover);
    }

.stancrm-myday-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.stancrm-myday-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex: none;
    white-space: nowrap;
}

.stancrm-myday-id,
.stancrm-myday-clock,
.stancrm-myday-when,
.stancrm-myday-priority {
    font-variant-numeric: tabular-nums;
}

.stancrm-myday-id {
    color: var(--sc-text-muted);
    font-size: 0.875rem;
}

.stancrm-myday-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.stancrm-myday-meta,
.stancrm-myday-when,
.stancrm-myday-priority {
    color: var(--sc-text-muted);
    font-size: 0.875rem;
}

.stancrm-myday-note {
    color: var(--sc-text-muted);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stancrm-myday-more {
    margin: 0;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-top: 1px solid var(--sc-border-faint);
    background: transparent;
    color: var(--sc-text-muted);
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
}

button.stancrm-myday-more {
    cursor: pointer;
}

    button.stancrm-myday-more:hover {
        color: var(--sc-text);
        background: var(--sc-hover);
    }

.stancrm-myday-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem;
}

    .stancrm-myday-stats dt {
        color: var(--sc-text-muted);
        font-size: 0.875rem;
    }

    .stancrm-myday-stats dd {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

/* Work completed: a green count and a green card with a darker green title bar. */
.stancrm-myday-count-success {
    border-color: var(--sc-success-edge);
    background: var(--sc-success-bg);
}

    .stancrm-myday-count-success .stancrm-myday-count-value {
        color: var(--sc-success-fg);
    }

.stancrm-myday-count-static {
    cursor: default;
}

    .stancrm-myday-count-static:hover {
        background: var(--sc-success-bg);
    }

.stancrm-myday-completed {
    border-color: var(--sc-success-edge);
    background: var(--sc-success-bg);
}

    .stancrm-myday-completed .stancrm-myday-card-head {
        border-bottom-color: var(--sc-success-edge);
        background: var(--sc-success-head);
    }

    .stancrm-myday-completed .stancrm-myday-card-title,
    .stancrm-myday-completed .stancrm-myday-viewall {
        color: var(--sc-success-head-text);
    }

    .stancrm-myday-completed .stancrm-myday-row,
    .stancrm-myday-completed .stancrm-myday-more {
        border-color: var(--sc-success-head);
    }

    .stancrm-myday-completed .stancrm-myday-item:hover {
        background: var(--sc-success-head);
    }

/* The period bar: Today, This week, This month, Custom, and the custom days beside them. */
.stancrm-myday-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-panel);
}

.stancrm-myday-period-range {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.stancrm-myday-period-error {
    color: var(--sc-alert-fg);
    font-size: 0.875rem;
}

@media (max-width: 1100px) {
    .stancrm-myday-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stancrm-myday-counts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- 9. Utilities (in place of inline styles; design D6) ---------- */
.sc-w-full { width: 100%; }
.sc-w-6-5 { width: 6.5rem; }
.sc-w-7 { width: 7rem; }
.sc-w-8 { width: 8rem; }
.sc-w-9 { width: 9rem; }
.sc-w-10 { width: 10rem; }
.sc-w-11 { width: 11rem; }
.sc-w-12 { width: 12rem; }
.sc-w-14 { width: 14rem; }
.sc-w-16 { width: 16rem; }
.sc-w-18 { width: 18rem; }
.sc-minw-10 { min-width: 10rem; }
.sc-minw-11 { min-width: 11rem; }
.sc-minw-12 { min-width: 12rem; }
.sc-minw-14 { min-width: 14rem; }

/* Rich-text editor heights. */
.sc-editor-xs { height: 160px; }
.sc-editor-sm { height: 220px; }
.sc-editor-md { height: 260px; }
.sc-editor-lg { height: 360px; }
.sc-editor-xl { height: 440px; }

/* An editor that fills its tab (the tab takes the height of the form's tallest tab). */
.sc-editor-fill { height: 100%; }

/* Tabs that keep one size whichever tab is shown (the ticket and task forms): the panels share one grid cell, so the dialog
   takes the tallest tab's height, and the inactive ones are hidden without leaving the layout. Radzen hides them with an
   inline display:none. */
.sc-tabs-same-size .rz-tabview-panels {
    display: grid;
}

.sc-tabs-same-size .rz-tabview-panels > .rz-tabview-panel {
    grid-area: 1 / 1;
    min-width: 0;
    display: block !important;
}

.sc-tabs-same-size .rz-tabview-panels > .rz-tabview-panel[aria-hidden="true"],
.sc-tabs-same-size .rz-tabview-panels > .rz-tabview-panel[style*="none"] {
    visibility: hidden;
}

/* The task form's instructions fill their tab. */
.stancrm-task-form-notes {
    width: 100%;
    height: 100%;
    resize: none;
}

/* The Remarks tab gives the remarks editor all the height the Ticket tab leaves over, never less than before. */
.stancrm-ticket-remarks-pane {
    height: 100%;
}

.stancrm-ticket-remarks-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.stancrm-ticket-remarks-editor {
    flex: 1 1 auto;
    min-height: 260px;
}

/* ---------- 10. Client portal (spec app-shell/client-portal-look; client-portal-soft-look design D2) ---------- */
/* The portal redefines the semantic tokens, so the Radzen mapping (layer 3) and every rule above follow them. The
   --sc-portal-* tokens exist only here. Every portal token has a light and a dark value (VisualStyleTests.Portal). */
:root.stancrm-portal {
    --sc-bg: #eceef8; /* the lavender ground */
    --sc-surface: #ffffff;
    --sc-panel: #f3f4fb; /* search panels, grid headers, secondary buttons */
    --sc-sidebar: #f6f7fd;
    --sc-border: #e4e6f2;
    --sc-border-faint: #eef0f7;
    --sc-border-strong: #cfd2e3;
    --sc-text: #1e2033;
    --sc-text-muted: #565b70;
    --sc-text-disabled: #a0a3b8;
    --sc-accent: #5b4bdb;
    --sc-accent-hover: #4434c2;
    --sc-accent-text: #ffffff;
    --sc-hover: #f1f0fe;
    --sc-active: #ebe9fe;
    --sc-focus: #5b4bdb;
    --sc-danger: #be123c;
    --sc-danger-hover: #9f1239;
    --sc-shadow-overlay: 0 18px 40px rgb(60 50 160 / 0.18), 0 2px 6px rgb(60 50 160 / 0.08);
    --sc-shadow-lift: 0 6px 16px rgb(91 75 219 / 0.14);

    /* In the portal the "where you are / on" marks are violet like the accent. */
    --sc-highlight: #6d5df6;
    --sc-highlight-fill: #5b4bdb;
    --sc-highlight-text: #ffffff;
    --sc-highlight-soft: #efedff;

    /* Checked controls filled entirely in violet (post-migration-refinements D15): Radzen's standard theme paints the tick's
       own box in the base background, so the icon background is re-declared with the fill, and the hover state with it. */
    --rz-checkbox-checked-background-color: var(--sc-highlight);
    --rz-checkbox-checked-border: 1px solid var(--sc-highlight);
    --rz-checkbox-checked-color: var(--sc-highlight-text);
    --rz-checkbox-checked-icon-background-color: var(--sc-highlight);
    --rz-checkbox-checked-hover-background-color: var(--sc-highlight);
    --rz-checkbox-checked-hover-border: 1px solid var(--sc-highlight);
    --rz-radio-checked-background-color: var(--sc-highlight);
    --rz-radio-checked-border: 1px solid var(--sc-highlight);
    --rz-radio-checked-color: var(--sc-highlight-text);
    --rz-radio-checked-hover-background-color: var(--sc-highlight);
    --rz-switch-checked-background-color: var(--sc-highlight);

    --sc-radius-sm: 999px; /* pills, fully rounded */
    --sc-radius: 12px; /* buttons, inputs, menu entries */
    --sc-radius-lg: 22px; /* cards, grid boxes, dialogs */
    --sc-radius-xl: 28px; /* the content panel */
    --sc-font: "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;

    /* Portal-only tokens. */
    --sc-portal-panel: #f8f9fe; /* the floating content panel */
    --sc-portal-shadow-card: 0 12px 30px rgb(60 50 160 / 0.08);
    --sc-portal-shadow-button: 0 8px 18px rgb(109 93 246 / 0.32);
    --sc-portal-tint-1: #efedff; /* stat cards: decoration only, never status */
    --sc-portal-tint-2: #fff6e3;
    --sc-portal-tint-3: #e9f8f0;
    --sc-portal-tint-4: #fdedf1;
    --sc-portal-tile-1: #7b6cf6;
    --sc-portal-tile-2: #b7791f;
    --sc-portal-tile-3: #2f9466;
    --sc-portal-tile-4: #d6466a;
    --sc-portal-tile-icon: #ffffff;
    --sc-portal-avatar-bg: #e2deff;
    --sc-portal-avatar-text: #4434c2;
    --sc-portal-badge: #c92a50; /* unread counts; white text on it */
    --sc-portal-badge-text: #ffffff;
    --sc-portal-track: #ecedf5; /* the progress bar's empty track */
    --sc-portal-chart-1: #5fcf94; /* Tickets by Status: Completed, In Progress, Pending, Callback; the legend carries the text */
    --sc-portal-chart-2: #f6c445;
    --sc-portal-chart-3: #8ea6ff;
    --sc-portal-chart-4: #f2849f;

    /* Radzen shapes the tokens alone cannot reach: soft lift on cards and primary buttons. */
    --rz-card-shadow: var(--sc-portal-shadow-card);
    --rz-panel-shadow: var(--sc-portal-shadow-card);
    --rz-button-shadow: none;
    --rz-text-font-family: var(--sc-font);
    --rz-link-color: var(--sc-accent);
}

:root.stancrm-portal.stancrm-dark {
    --sc-bg: #12111f;
    --sc-surface: #1f1e33;
    --sc-panel: #26253d;
    --sc-sidebar: #181729;
    --sc-border: #2e2d48;
    --sc-border-faint: #26253d;
    --sc-border-strong: #3d3c5c;
    --sc-text: #ecebf8;
    --sc-text-muted: #aeadc9;
    --sc-text-disabled: #6b6a8a;
    --sc-accent: #a99cff;
    --sc-accent-hover: #c0b6ff;
    --sc-accent-text: #12111f;
    --sc-hover: #26253f;
    --sc-active: #2d2b4a;
    --sc-focus: #a99cff;
    --sc-danger: #f0506e;
    --sc-danger-hover: #f6728b;
    --sc-shadow-overlay: 0 18px 40px rgb(0 0 0 / 0.55), 0 0 0 1px #2e2d48;
    --sc-shadow-lift: 0 6px 16px rgb(0 0 0 / 0.35);

    --sc-highlight: #a99cff;
    --sc-highlight-fill: #a99cff;
    --sc-highlight-text: #12111f;
    --sc-highlight-soft: #2a2550;

    /* Checked controls filled entirely in violet (post-migration-refinements D15): Radzen's standard theme paints the tick's
       own box in the base background, so the icon background is re-declared with the fill, and the hover state with it. */
    --rz-checkbox-checked-background-color: var(--sc-highlight);
    --rz-checkbox-checked-border: 1px solid var(--sc-highlight);
    --rz-checkbox-checked-color: var(--sc-highlight-text);
    --rz-checkbox-checked-icon-background-color: var(--sc-highlight);
    --rz-checkbox-checked-hover-background-color: var(--sc-highlight);
    --rz-checkbox-checked-hover-border: 1px solid var(--sc-highlight);
    --rz-radio-checked-background-color: var(--sc-highlight);
    --rz-radio-checked-border: 1px solid var(--sc-highlight);
    --rz-radio-checked-color: var(--sc-highlight-text);
    --rz-radio-checked-hover-background-color: var(--sc-highlight);
    --rz-switch-checked-background-color: var(--sc-highlight);

    --sc-portal-panel: #18172a;
    --sc-portal-shadow-card: 0 12px 30px rgb(0 0 0 / 0.30);
    --sc-portal-shadow-button: 0 8px 18px rgb(0 0 0 / 0.35);
    --sc-portal-tint-1: #2a2552;
    --sc-portal-tint-2: #3a2f12;
    --sc-portal-tint-3: #163024;
    --sc-portal-tint-4: #3a1c28;
    --sc-portal-tile-1: #8b7cf8;
    --sc-portal-tile-2: #d9a12a;
    --sc-portal-tile-3: #3fb57e;
    --sc-portal-tile-4: #e0607f;
    --sc-portal-tile-icon: #12111f;
    --sc-portal-avatar-bg: #2d2a5a;
    --sc-portal-avatar-text: #c9c2ff;
    --sc-portal-badge: #f0506e;
    --sc-portal-badge-text: #12111f;
    --sc-portal-track: #2e2d48;
    --sc-portal-chart-1: #4cc38a;
    --sc-portal-chart-2: #e3b23c;
    --sc-portal-chart-3: #7f95f0;
    --sc-portal-chart-4: #e0708c;

    --rz-card-shadow: var(--sc-portal-shadow-card);
    --rz-panel-shadow: var(--sc-portal-shadow-card);
    --rz-button-shadow: none;
    --rz-text-font-family: var(--sc-font);
    --rz-link-color: var(--sc-accent);
}

/* Portal shapes: soft lifts instead of hairlines (spec "Soft surfaces"). */
html.stancrm-portal .stancrm-content {
    background: var(--sc-portal-panel);
    border-color: transparent;
    box-shadow: var(--sc-portal-shadow-card);
}

html.stancrm-portal .stancrm-page-header {
    min-height: 4rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-bottom-color: transparent;
}

html.stancrm-portal .stancrm-page {
    padding: 0.5rem 1.25rem 1.25rem;
}

html.stancrm-portal .rz-card,
html.stancrm-portal .rz-data-grid {
    border-color: transparent;
    box-shadow: var(--sc-portal-shadow-card);
}

html.stancrm-portal .rz-button.rz-primary:not(.rz-state-disabled) {
    box-shadow: var(--sc-portal-shadow-button);
}

/* The sidebar is a rounded card inset from the window: a ground-coloured border keeps Radzen's layout grid untouched. */
@media (min-width: 769px) {
    html.stancrm-portal .stancrm-sidebar {
        border: 0.75rem solid transparent;
        border-inline-end-width: 0.25rem;
        border-radius: calc(var(--sc-radius-xl) + 0.75rem);
        background-clip: padding-box;
        filter: drop-shadow(0 10px 22px rgb(60 50 160 / 0.10));
    }

    html.stancrm-portal.stancrm-dark .stancrm-sidebar {
        filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.35));
    }
}

/* The current entry: a white pill (a tile in the rail) with violet text and a soft lift; no orange mark (spec "Violet accent"). */
html.stancrm-portal .stancrm-nav-item.stancrm-nav-current {
    box-shadow: var(--sc-shadow-lift);
    color: var(--sc-accent);
}

    html.stancrm-portal .stancrm-nav-current::before {
        display: none;
    }

html.stancrm-portal .stancrm-nav-item .stancrm-nav-icon {
    color: var(--sc-accent);
}

/* The rail: the card's ground-coloured border sits outside the rail's own width, so the icons keep their full square. */
@media (min-width: 769px) {
    html.stancrm-portal .stancrm-sidebar.rz-sidebar-collapsed {
        width: calc(var(--stancrm-rail-width) + 1rem) !important;
    }
}

html.stancrm-portal .stancrm-brand-card {
    border-color: transparent;
    background: transparent;
}

/* Portal frame (spec app-shell/client-portal-shell "Portal frame", "Portal header", "Request a Callback card"). */
.stancrm-portal-callback {
    display: flex;
    flex-direction: column;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: calc(var(--rz-sidebar-width) - 1rem - 2 * var(--stancrm-nav-inset)); /* fixed, so it never wraps while the sidebar widens */
    margin: 0.75rem var(--stancrm-nav-inset) 1.25rem; /* room for the soft shadow inside the fold */
    padding: 1rem 0.875rem;
    border-radius: var(--sc-radius-lg);
    background: var(--sc-surface);
    box-shadow: var(--sc-portal-shadow-card);
    text-align: center;
}

.stancrm-portal-callback-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: var(--sc-success-bg);
    color: var(--sc-success-fg);
}

.stancrm-portal-callback-title {
    font-size: 0.9375rem;
}

.stancrm-portal-callback-text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sc-text-muted);
}

.stancrm-portal-callback-icon.rz-button,
.stancrm-portal-collapse.rz-button {
    flex: none;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--stancrm-nav-inset));
    min-height: var(--stancrm-rail-item);
    margin: 1px var(--stancrm-nav-inset);
    padding-inline: calc((var(--stancrm-rail-item) - var(--stancrm-nav-icon)) / 2);
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
    color: var(--sc-text-muted);
}

    .stancrm-portal-callback-icon .rz-button-box,
    .stancrm-portal-collapse .rz-button-box {
        gap: 0.75rem;
    }

    .stancrm-portal-callback-icon .rzi,
    .stancrm-portal-collapse .rzi {
        width: var(--stancrm-nav-icon);
        font-size: var(--stancrm-nav-icon);
    }

    .stancrm-portal-collapse .rz-button-text {
        transition: var(--stancrm-nav-fade-in);
    }

    .stancrm-sidebar.rz-sidebar-collapsed .stancrm-portal-collapse .rz-button-text {
        opacity: 0;
        transition: var(--stancrm-nav-fade-out);
    }

/* The hairline above Collapse also pushes it to the foot of the sidebar. */
.stancrm-portal-foot {
    margin-top: auto;
}

.stancrm-portal-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--sc-radius);
    background: var(--sc-surface);
    box-shadow: var(--sc-portal-shadow-card);
    color: var(--sc-text);
    text-decoration: none;
}

.stancrm-portal-bell-count {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--sc-portal-badge);
    color: var(--sc-portal-badge-text);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.stancrm-portal-identity .rz-navigation-item-link {
    gap: 0.625rem;
}

.stancrm-portal-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--sc-portal-avatar-bg);
    color: var(--sc-portal-avatar-text);
    font-weight: 700;
}

.stancrm-portal-identity-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.stancrm-portal-identity-code {
    font-size: 0.75rem;
    color: var(--sc-text-muted);
    margin-inline-start: 0.25rem;
}

html.stancrm-portal .stancrm-notifications-badge {
    background: var(--sc-portal-badge);
    color: var(--sc-portal-badge-text);
}

@media (min-width: 769px) {
    html.stancrm-portal .stancrm-sidebar {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .stancrm-portal-identity-text {
        display: none;
    }
}

/* Header search (spec client-portal/client-search "Search results"). */
.stancrm-portal-search {
    position: relative;
    flex: 0 1 22rem;
    min-width: 0;
}

.stancrm-portal-search-icon {
    position: absolute;
    inset-inline-start: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sc-text-muted);
    pointer-events: none;
}

.stancrm-portal-search-box {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border: 1px solid transparent;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-surface);
    color: var(--sc-text);
    font: inherit;
    box-shadow: var(--sc-portal-shadow-card);
}

.stancrm-portal-search-box::placeholder {
    color: var(--sc-text-muted);
}

.stancrm-portal-search-box:focus-visible {
    outline: 2px solid var(--sc-focus);
    outline-offset: 2px;
}

.stancrm-portal-search-panel {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    top: calc(100% + 0.5rem);
    min-width: 18rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: var(--sc-radius);
    background: var(--sc-surface);
    color: var(--sc-text);
    box-shadow: var(--sc-portal-shadow-card);
}

.stancrm-portal-search-group {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sc-text-muted);
}

.stancrm-portal-search-hit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sc-radius);
    cursor: pointer;
}

.stancrm-portal-search-hit:hover,
.stancrm-portal-search-hit-active {
    background: var(--sc-portal-tint-1);
}

.stancrm-portal-search-no {
    font-weight: 700;
    color: var(--sc-accent);
}

.stancrm-portal-search-brief {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stancrm-portal-search-empty {
    padding: 0.75rem;
    color: var(--sc-text-muted);
}

@media (max-width: 768px) {
    .stancrm-portal-search {
        flex-basis: 10rem;
    }
}

/* Dashboard (spec client-portal/client-dashboard "Dashboard layout" and the cards on it; design D7). */
.stancrm-portal-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    align-items: start;
}

.stancrm-portal-dashboard-main,
.stancrm-portal-dashboard-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.stancrm-portal-dashboard-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
}

.stancrm-portal-greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.stancrm-portal-greeting-text {
    margin: 0;
    font-weight: 700;
}

.stancrm-portal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1rem;
}

.stancrm-portal-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.125rem;
    border-radius: var(--sc-radius-lg);
    color: var(--sc-text);
    text-decoration: none;
    box-shadow: var(--sc-portal-shadow-card);
}

.stancrm-portal-stat:hover {
    transform: translateY(-1px);
}

.stancrm-portal-stat:focus-visible {
    outline: 2px solid var(--sc-focus);
    outline-offset: 2px;
}

.stancrm-portal-stat-1 { background: var(--sc-portal-tint-1); }
.stancrm-portal-stat-2 { background: var(--sc-portal-tint-2); }
.stancrm-portal-stat-3 { background: var(--sc-portal-tint-3); }
.stancrm-portal-stat-4 { background: var(--sc-portal-tint-4); }

.stancrm-portal-stat-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
    border-radius: var(--sc-radius);
    color: var(--sc-portal-tile-icon);
}

.stancrm-portal-stat-1 .stancrm-portal-stat-tile { background: var(--sc-portal-tile-1); }
.stancrm-portal-stat-2 .stancrm-portal-stat-tile { background: var(--sc-portal-tile-2); }
.stancrm-portal-stat-3 .stancrm-portal-stat-tile { background: var(--sc-portal-tile-3); }
.stancrm-portal-stat-4 .stancrm-portal-stat-tile { background: var(--sc-portal-tile-4); }

.stancrm-portal-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stancrm-portal-stat-label {
    color: var(--sc-text-muted);
}

.stancrm-portal-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.stancrm-portal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-panel);
}

.stancrm-portal-tab {
    padding: 0.375rem 0.875rem;
    border: 0;
    border-radius: var(--sc-radius-sm);
    background: transparent;
    color: var(--sc-text-muted);
    font: inherit;
    cursor: pointer;
}

.stancrm-portal-tab-active {
    background: var(--sc-surface);
    color: var(--sc-accent);
    font-weight: 600;
    box-shadow: var(--sc-portal-shadow-card);
}

.stancrm-portal-tab:focus-visible {
    outline: 2px solid var(--sc-focus);
    outline-offset: 2px;
}

.stancrm-portal-ticket-list,
.stancrm-portal-holiday-list,
.stancrm-portal-legend {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stancrm-portal-ticket-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.5rem;
    border-radius: var(--sc-radius);
    color: var(--sc-text);
    text-decoration: none;
}

.stancrm-portal-ticket-row:hover {
    background: var(--sc-panel);
}

.stancrm-portal-ticket-mark {
    color: var(--sc-text-muted);
}

.stancrm-portal-ticket-done {
    color: var(--sc-success-fg);
}

.stancrm-portal-ticket-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.stancrm-portal-ticket-category,
.stancrm-portal-ticket-date {
    color: var(--sc-text-muted);
    font-size: 0.875rem;
}

.stancrm-portal-empty {
    margin: 0;
    padding: 0.75rem 0;
    color: var(--sc-text-muted);
}

.stancrm-portal-chart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.stancrm-portal-ring {
    width: 9rem;
    height: 9rem;
    transform: rotate(-90deg);
}

.stancrm-portal-ring circle {
    fill: none;
    stroke-width: 6;
}

.stancrm-portal-ring-track { stroke: var(--sc-portal-track); }
.stancrm-portal-ring-1 { stroke: var(--sc-portal-chart-1); }
.stancrm-portal-ring-2 { stroke: var(--sc-portal-chart-2); }
.stancrm-portal-ring-3 { stroke: var(--sc-portal-chart-3); }
.stancrm-portal-ring-4 { stroke: var(--sc-portal-chart-4); }

.stancrm-portal-ring-total {
    fill: var(--sc-text);
    font-size: 0.5rem;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    transform: rotate(90deg);
    transform-origin: 21px 21px;
}

.stancrm-portal-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stancrm-portal-legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stancrm-portal-legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.stancrm-portal-legend-dot-1 { background: var(--sc-portal-chart-1); }
.stancrm-portal-legend-dot-2 { background: var(--sc-portal-chart-2); }
.stancrm-portal-legend-dot-3 { background: var(--sc-portal-chart-3); }
.stancrm-portal-legend-dot-4 { background: var(--sc-portal-chart-4); }

.stancrm-portal-legend-value {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stancrm-portal-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stancrm-portal-calendar-month {
    font-weight: 700;
}

.stancrm-portal-calendar-grid {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.stancrm-portal-calendar-grid th {
    padding: 0.25rem 0;
    color: var(--sc-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.stancrm-portal-calendar-grid td {
    padding: 0.125rem 0;
}

.stancrm-portal-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.stancrm-portal-day-outside {
    color: var(--sc-text-muted);
}

.stancrm-portal-day-holiday {
    background: var(--sc-alert-bg);
    color: var(--sc-alert-fg);
    font-weight: 600;
}

.stancrm-portal-day-today {
    background: var(--sc-accent);
    color: var(--sc-accent-text);
    font-weight: 700;
}

.stancrm-portal-progress-figure {
    font-size: 1.75rem;
    font-weight: 700;
}

.stancrm-portal-progress-text {
    color: var(--sc-text-muted);
}

.stancrm-portal-holiday-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stancrm-portal-holiday-list li {
    display: flex;
    flex-direction: column;
    padding-inline-start: 0.75rem;
    border-inline-start: 3px solid var(--sc-accent);
}

.stancrm-portal-holiday-brief {
    font-weight: 600;
}

.stancrm-portal-holiday-date {
    color: var(--sc-text-muted);
    font-size: 0.875rem;
}

.stancrm-portal-holidays-all {
    font-weight: 600;
}

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

    .stancrm-portal-dashboard-side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    }
}

@media (max-width: 768px) {
    .stancrm-portal-ticket-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .stancrm-portal-ticket-category,
    .stancrm-portal-ticket-date {
        display: none;
    }
}