/* ==========================================================================
   Tansi UI layer — app-wide page grammar  ("Refined Clarity" design system)
   --------------------------------------------------------------------------
   Components: TansiPage, TansiPageHeader, TansiStatCard, TansiStat,
   TansiSection, TansiTabs (Components/Shared/Ui/).

   Everything here is driven by the design-system variables defined in app.css
   (--card-bg, --card-border, --shadow-card, --radius-*, --text-*) and MudBlazor
   palette vars (--mud-palette-*), so light/dark are handled automatically by
   the .mud-theme-light / .mud-theme-dark body classes — never media queries.

   THE ACCENT THREAD: a page declares its module (TansiPage Module="...") and
   inherits the same identity color the drawer nav shows for that module
   (--page-accent, resolved from NavigationRegistry — single source of truth).
   The accent colors NON-TEXT signals only: the header icon tile, the active
   tab underline, hover fills and focus rings. Running text stays neutral
   (--text-*) so contrast never depends on a module hue. Module hexes are
   mid-tone (picked for white-on-color drawer tiles): they pass the 3:1
   non-text bar on light surfaces as-is, and are lightened for dark surfaces
   via color-mix below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Accent derivation
   --------------------------------------------------------------------------
   Each primitive derives from --page-accent so it also works standalone,
   falling back to the brand primary when no TansiPage ancestor sets it.
   -------------------------------------------------------------------------- */
.tansi-page,
.tansi-header,
.tansi-stat-card,
.tansi-stat,
.tansi-statstrip,
.tansi-section,
.tansi-tabs {
    --tansi-accent: var(--page-accent, var(--mud-palette-primary));
    /* ink: the accent as drawn on the current canvas */
    --tansi-accent-ink: var(--tansi-accent);
    /* soft: translucent fill for tiles, hovers and chips */
    --tansi-accent-soft: color-mix(in srgb, var(--tansi-accent) 11%, transparent);
}

/* Mid-tone module hexes sink into dark canvases — lift them toward white.
   58/42 keeps hue identity while clearing 3:1 on --mud-palette-background. */
.mud-theme-dark .tansi-page,
.mud-theme-dark .tansi-header,
.mud-theme-dark .tansi-stat-card,
.mud-theme-dark .tansi-stat,
.mud-theme-dark .tansi-statstrip,
.mud-theme-dark .tansi-section,
.mud-theme-dark .tansi-tabs {
    --tansi-accent-ink: color-mix(in srgb, var(--tansi-accent) 58%, #ffffff);
    --tansi-accent-soft: color-mix(in srgb, var(--tansi-accent) 16%, transparent);
}

/* --------------------------------------------------------------------------
   1. Page scaffold  (TansiPage.razor)
   -------------------------------------------------------------------------- */
.tansi-page {
    display: flow-root;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Page header band  (TansiPageHeader.razor)
   -------------------------------------------------------------------------- */
.tansi-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.tansi-header__lead {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.tansi-header__back {
    flex-shrink: 0;
}

.tansi-header__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--tansi-accent-ink);
    background: var(--tansi-accent-soft);
}

.tansi-header__text {
    min-width: 0;
}

.tansi-header__title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--text-heading);
}

.tansi-header__subtitle {
    margin: 2px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-caption);
}

.tansi-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   3. KPI cards + compact stat strip  (TansiStatCard.razor / TansiStat.razor)
   --------------------------------------------------------------------------
   Stat accents are SEMANTIC (state, not module): primary/success/warning/
   error/info map onto the Mud feedback palette, same contract as CRM.
   -------------------------------------------------------------------------- */
.tansi-accent-primary { --tansi-state: var(--mud-palette-primary); }
.tansi-accent-success { --tansi-state: var(--mud-palette-success); }
.tansi-accent-warning { --tansi-state: var(--mud-palette-warning); }
.tansi-accent-error   { --tansi-state: var(--mud-palette-error); }
.tansi-accent-info    { --tansi-state: var(--mud-palette-info); }
.tansi-accent-neutral { --tansi-state: var(--mud-palette-text-secondary); }

.tansi-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.tansi-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tansi-state), color-mix(in srgb, var(--tansi-state) 30%, transparent));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tansi-stat-card--clickable {
    cursor: pointer;
}

.tansi-stat-card--clickable:hover {
    transform: translateY(-3px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-card-hover);
}

.tansi-stat-card--clickable:hover::before {
    opacity: 1;
}

.tansi-stat-card--active {
    border-color: var(--tansi-state);
    box-shadow: 0 0 0 1px var(--tansi-state), var(--shadow-card);
    background: color-mix(in srgb, var(--tansi-state) 6%, var(--card-bg));
}

.tansi-stat-card--active::before {
    opacity: 1;
}

.tansi-stat-card--clickable:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: var(--shadow-card);
}

.tansi-stat-card--clickable:disabled:hover {
    transform: none;
    border-color: var(--card-border);
    box-shadow: var(--shadow-card);
}

.tansi-stat-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tansi-stat-card__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-caption);
    line-height: 1.4;
}

.tansi-stat-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--tansi-state);
    background: color-mix(in srgb, var(--tansi-state) 14%, transparent);
}

.tansi-stat-card__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--text-heading);
}

.tansi-stat-card__caption {
    font-size: 0.8125rem;
    color: var(--text-caption);
    line-height: 1.4;
}

.tansi-stat-card__bar {
    margin-top: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tansi-state) 16%, transparent);
    overflow: hidden;
}

.tansi-stat-card__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--tansi-state);
    transition: width var(--transition-smooth);
}

/* Responsive grid for a row of KPI cards. */
.tansi-stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 24px;
}

/* Divided strip band — reference-design middle row. Scrolls sideways on
   narrow screens instead of wrapping, so the dividers stay honest. */
.tansi-statstrip {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

.tansi-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    min-width: 150px;
    padding: 14px 20px;
}

.tansi-stat + .tansi-stat {
    border-left: 1px solid var(--card-border);
}

/* Flush variant: strip used inside an existing card — no double chrome. */
.tansi-statstrip--flush {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.tansi-statstrip--flush .tansi-stat {
    padding: 6px 20px 6px 0;
}

.tansi-statstrip--flush .tansi-stat + .tansi-stat {
    padding-left: 20px;
}

.tansi-stat__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--tansi-state);
    background: color-mix(in srgb, var(--tansi-state) 13%, transparent);
}

.tansi-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--text-heading);
}

.tansi-stat__label {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-caption);
}

/* --------------------------------------------------------------------------
   4. Sections  (TansiSection.razor)
   -------------------------------------------------------------------------- */
.tansi-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
}

.tansi-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px 0;
}

.tansi-section__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tansi-section__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--tansi-accent-ink);
    background: var(--tansi-accent-soft);
}

.tansi-section__heading-text {
    min-width: 0;
}

.tansi-section__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-caption);
    line-height: 1.4;
}

.tansi-section__title {
    margin: 2px 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.35;
    color: var(--text-heading);
}

.tansi-section__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.tansi-section__body {
    padding: 16px 24px 20px;
}

.tansi-section__head + .tansi-section__body {
    padding-top: 14px;
}

/* Plain variant: no chrome — the overline heading gets a hairline rule,
   the "DETAILED MODULES ────" divider pattern. */
.tansi-section--plain {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.tansi-section--plain > .tansi-section__head {
    padding: 0;
}

.tansi-section--plain > .tansi-section__head::after {
    content: "";
    flex: 1 1 24px;
    height: 1px;
    background: var(--card-border);
}

.tansi-section--plain > .tansi-section__head > .tansi-section__actions {
    margin-left: 0;
    order: 3;
}

.tansi-section--plain > .tansi-section__body {
    padding: 14px 0 0;
}

/* --------------------------------------------------------------------------
   5. Tabs  (TansiTabs.razor — styling MudTabs internals, scoped)
   --------------------------------------------------------------------------
   Underline tabs on a transparent bar: sentence case (Mud's uppercase off),
   48px targets, neutral text, module-accent slider. Content panels get
   breathing room via .tansi-tabpanel (PanelClass).
   -------------------------------------------------------------------------- */
.tansi-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--card-border);
}

.tansi-tabs .mud-tabs-tabbar .mud-tab {
    text-transform: none;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    color: var(--text-body);
    border-radius: 8px 8px 0 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tansi-tabs .mud-tabs-tabbar .mud-tab:hover {
    background: var(--tansi-accent-soft);
    color: var(--text-heading);
}

.tansi-tabs .mud-tabs-tabbar .mud-tab.mud-tab-active {
    color: var(--text-heading);
    font-weight: 700;
}

.tansi-tabs .mud-tabs-tabbar .mud-tab:focus-visible {
    outline: 2px solid var(--tansi-accent-ink);
    outline-offset: -2px;
}

.tansi-tabs .mud-tabs-tabbar .mud-tab-slider {
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--tansi-accent-ink);
}

/* Badge counts inside tab labels stay quiet. */
.tansi-tabs .mud-tabs-tabbar .mud-tab .mud-badge {
    font-weight: 600;
}

.tansi-tabpanel {
    padding: 20px 0 0;
}

/* Legacy hand-rolled tab bar (MyProfile's .profile-tabs) adapted to the house
   tab look. The bar's tabs are real <button role="tab"> elements; these rules
   override the older app.css .profile-tab styling via the .tansi-page scope.
   The :where() reset keeps element-level specificity below the class rules
   (see NavMenu lesson: an element-typed reset must never outrank them). */
.tansi-page .profile-tabs {
    gap: 2px;
    border-bottom: 1px solid var(--card-border);
}

.tansi-page :where(button.profile-tab) {
    background: none;
    border: 0;
    font: inherit;
    text-align: center;
}

.tansi-page .profile-tab {
    text-transform: none;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    min-height: 48px;
    padding: 12px 16px;
    color: var(--text-body);
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tansi-page .profile-tab:hover {
    background: var(--tansi-accent-soft);
    color: var(--text-heading);
}

.tansi-page .profile-tab-active {
    color: var(--text-heading);
    font-weight: 700;
    border-bottom-color: var(--tansi-accent-ink);
    background: transparent;
}

.tansi-page .profile-tab:focus-visible {
    outline: 2px solid var(--tansi-accent-ink);
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   6. Accessibility
   -------------------------------------------------------------------------- */
/* TansiStatCard renders as <a>/<button> when interactive — neutralize element
   defaults without touching card styling. */
:where(a.tansi-stat-card) {
    display: block;
    color: inherit;
    text-decoration: none;
}
:where(button.tansi-stat-card) {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

.tansi-stat-card--clickable:focus-visible {
    outline: 2px solid var(--tansi-accent-ink);
    outline-offset: 2px;
}

:where(a.tansi-card-link) {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

/* Catalog cards keep whole-card click as a mouse convenience but the title
   text is the real keyboard/link entry point (LeadsList/SupportAdmin split —
   whole-card nav + an in-card action button can't both be a single <a>). */
:where(a.tansi-card-title-link) {
    color: inherit;
    text-decoration: none;
    font: inherit;
}
.tansi-card-title-link:hover {
    text-decoration: underline;
}
.tansi-card-title-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .tansi-stat-card,
    .tansi-stat-card::before,
    .tansi-stat-card__bar-fill,
    .tansi-tabs .mud-tabs-tabbar .mud-tab {
        transition: none;
    }

    .tansi-stat-card--clickable:hover {
        transform: none;
    }

    .tansi-tabs .mud-tab-slider {
        transition: none !important;
    }
}

@media (prefers-contrast: more) {
    .tansi-stat-card,
    .tansi-statstrip,
    .tansi-section:not(.tansi-section--plain) {
        border-color: color-mix(in srgb, var(--text-body) 45%, transparent);
    }

    .tansi-tabs .mud-tabs-tabbar {
        border-bottom-color: color-mix(in srgb, var(--text-body) 45%, transparent);
    }
}

/* Screen-reader-only utility — promoted from NavMenu.razor.css (scoped there,
   unusable elsewhere). NavMenu keeps its scoped copy. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — first focusable element on every page; invisible until focused. */
.tansi-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 18px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.tansi-skip-link:focus,
.tansi-skip-link:focus-visible {
    left: 0;
}

/* Zero-specificity reset for converting clickable divs into real <button>s
   without fighting existing card/row styling (same trick as
   `:where(button.profile-tab)` above). */
:where(button.tansi-btn-reset) {
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Intrinsic pointer affordance for TansiChoiceCard — callers no longer need
   to remember to set cursor:pointer on their own card class. */
:where(.tansi-choice-card) {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   6b. App bar  (MainLayout's MudAppBar — class="tansi-appbar")
   --------------------------------------------------------------------------
   Extends the drawer nav's vocabulary to the top bar: flat surface with the
   hairline app.css already draws (elevation stays 0 in markup), quiet
   soft-primary hover fills on 40px rounded targets, the same 3px focus ring
   NavMenu.razor.css uses, and theme-derived colors only. Child components
   (TenantIndicator, ChatNotification, NotificationBell) inherit the icon
   treatment through this scope without owning any bar chrome themselves.
   -------------------------------------------------------------------------- */
.tansi-appbar {
    --bar-text: var(--mud-palette-appbar-text, var(--mud-palette-text-primary));
    --bar-icon: var(--bar-text);
    --bar-soft: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --bar-line: color-mix(in srgb, var(--mud-palette-text-secondary) 45%, transparent);
    --bar-focus: var(--mud-palette-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 22%, transparent) !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--mud-palette-black) 8%, transparent) !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.tansi-appbar.tansi-appbar--view-all {
    --view-all-bar: #EFB63B;
    --view-all-control: #FBEBBE;
    --view-all-control-hover: #FDF3D8;
    --view-all-accent: #DCA326;
    --view-all-icon: #6B4204;
    --view-all-text: #4A2F03;
    --view-all-ink: var(--view-all-text);
    --bar-text: var(--view-all-ink);
    --bar-icon: var(--view-all-icon);
    --bar-soft: var(--view-all-control-hover);
    --bar-line: #DCA326;
    --bar-focus: #C98A12;
    background-color: var(--view-all-bar) !important;
    color: var(--view-all-ink);
    border-bottom-color: #D3941A !important;
    box-shadow: inset 0 -3px 0 #D3941A,
                0 2px 6px color-mix(in srgb, #D3941A 35%, transparent) !important;
}

.tansi-appbar.tansi-appbar--view-all .mud-toolbar > .mud-icon-button {
    color: var(--view-all-ink);
    background: var(--view-all-control);
    border: 1px solid var(--bar-line);
    box-shadow: 0 1px 2px rgba(89, 56, 0, 0.18);
}

.tansi-appbar.tansi-appbar--view-all .mud-toolbar > .mud-icon-button:hover {
    color: var(--view-all-ink);
    background: var(--view-all-control-hover);
    border-color: var(--bar-focus);
}

.tansi-appbar.tansi-appbar--view-all .app-logo.mud-image {
    background-color: #402A05;
    filter: none;
}

.tansi-appbar.tansi-appbar--view-all .app-logo.mud-image img {
    background: transparent;
    filter: brightness(0) saturate(100%) invert(1);
}

.tansi-appbar.tansi-appbar--view-all .tansi-global-search__input .mud-input-outlined,
.tansi-appbar.tansi-appbar--view-all .tansi-workspace-select__input .mud-input-outlined,
.tansi-appbar.tansi-appbar--view-all .tansi-appbar__account-actions,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__launch.mud-button-root,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__active {
    background: var(--view-all-control);
    border-color: var(--bar-line);
    color: var(--view-all-ink);
    box-shadow: 0 1px 2px rgba(89, 56, 0, 0.18);
}

.tansi-appbar.tansi-appbar--view-all .tansi-global-search__input:hover .mud-input-outlined,
.tansi-appbar.tansi-appbar--view-all .tansi-workspace-select__input:hover .mud-input-outlined,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__launch.mud-button-root:hover,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__active:hover {
    background: var(--view-all-control-hover);
    border-color: var(--bar-focus);
}

.tansi-appbar.tansi-appbar--view-all .tansi-global-search__input:focus-within .mud-input-outlined,
.tansi-appbar.tansi-appbar--view-all .tansi-workspace-select__input:focus-within .mud-input-outlined {
    background: var(--view-all-control-hover);
}

.tansi-appbar.tansi-appbar--view-all .tansi-global-search__input:focus-within .mud-input-outlined-border,
.tansi-appbar.tansi-appbar--view-all .tansi-workspace-select__input:focus-within .mud-input-outlined-border {
    border-color: var(--bar-focus) !important;
}

.tansi-appbar.tansi-appbar--view-all .mud-toolbar > .mud-icon-button .mud-icon-root,
.tansi-appbar.tansi-appbar--view-all .tansi-appbar__account-actions .mud-icon-root {
    color: var(--bar-icon);
}

.tansi-appbar.tansi-appbar--view-all .tansi-global-search__input .mud-input-adornment-start {
    color: var(--bar-icon);
}

.tansi-appbar.tansi-appbar--view-all .tansi-global-search__input .mud-input-slot,
.tansi-appbar.tansi-appbar--view-all .tansi-global-search__input .mud-input-slot::placeholder,
.tansi-appbar.tansi-appbar--view-all .tansi-workspace-select__input .mud-input-slot {
    color: var(--view-all-text);
}

.tansi-appbar.tansi-appbar--view-all .tansi-workspace-select__input .mud-input-adornment,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__launch .mud-icon-root,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__active > .mud-icon-root {
    color: var(--bar-icon);
}

.tansi-appbar.tansi-appbar--view-all .tt-topbar__launch,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__active,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__context small {
    color: var(--view-all-text);
}

.tansi-appbar.tansi-appbar--view-all .tansi-profile-avatar {
    background: repeating-linear-gradient(135deg, #E9B23C 0 7px, #DCA326 7px 14px);
    color: var(--view-all-text);
    box-shadow: inset 0 0 0 1px #D3941A;
}

.tansi-appbar.tansi-appbar--view-all .mud-button-root,
.tansi-appbar.tansi-appbar--view-all .mud-button-label,
.tansi-appbar.tansi-appbar--view-all .mud-input-slot,
.tansi-appbar.tansi-appbar--view-all .tt-topbar__active {
    text-transform: none;
}

.tansi-appbar.tansi-appbar--view-all .tansi-profile-trigger {
    border-left-color: #E3B95C;
}

.tansi-appbar.tansi-appbar--view-all .tansi-appbar__counter-badge .mud-badge {
    color: #FDF3D8 !important;
    background: #B4530A !important;
    border-color: #FBEBBE !important;
}

.tansi-appbar.tansi-appbar--view-all a {
    color: var(--view-all-text);
}

.tansi-appbar.tansi-appbar--view-all a:hover {
    color: var(--view-all-text);
}

.tansi-appbar.tansi-appbar--view-all .tt-topbar__divider {
    background: var(--bar-line);
}

.tansi-appbar.tansi-appbar--view-all .tt-topbar__active:focus-visible {
    outline-color: var(--bar-focus);
}

.tansi-appbar .mud-toolbar {
    gap: 2px;
}

.tansi-appbar .mud-icon-root {
    color: var(--bar-icon);
}

.tansi-appbar .tansi-global-search__input .mud-input-slot,
.tansi-appbar .tansi-global-search__input .mud-input-slot::placeholder,
.tansi-appbar .tansi-workspace-select__input .mud-input-slot,
.tansi-appbar .tt-topbar__launch,
.tansi-appbar .tt-topbar__active,
.tansi-appbar .tt-topbar__context strong,
.tansi-appbar .tt-topbar__context small {
    color: var(--bar-text);
}

.tansi-appbar .mud-button-root,
.tansi-appbar .mud-button-label,
.tansi-appbar .mud-input-slot,
.tansi-appbar .tt-topbar__active {
    text-transform: none;
}

.tansi-appbar .tt-topbar__launch.mud-button-root,
.tansi-appbar .tt-topbar__launch .mud-button-label,
.tansi-appbar .tansi-workspace-select__input .mud-input-slot {
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: normal;
}

.tansi-global-search {
    flex: 0 1 400px;
    width: clamp(190px, 26vw, 400px);
    min-width: 150px;
    margin-left: clamp(8px, 1.5vw, 20px);
}

.tansi-global-search__input .mud-input-control {
    margin: 0;
}

.tansi-global-search__input .mud-input-outlined {
    min-height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
}

.tansi-global-search__input .mud-input-outlined-border {
    border-color: var(--bar-line);
}

.tansi-global-search__input .mud-input-slot {
    color: var(--bar-text);
    font-size: 0.8125rem;
}

.tansi-global-search__input .mud-input-adornment-start {
    color: var(--mud-palette-text-secondary);
}

.tansi-global-search__input:focus-within .mud-input-outlined {
    background: var(--mud-palette-surface);
}

.tansi-global-search__input:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px;
}

.tansi-global-search__popover {
    min-width: min(390px, calc(100vw - 24px)) !important;
    padding: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 13px !important;
    box-shadow: var(--mud-elevation-8) !important;
}

.tansi-global-search__result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding-block: 3px;
}

.tansi-global-search__result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.tansi-global-search__result-icon.is-company {
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
    color: var(--mud-palette-secondary);
}

.tansi-global-search__result-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.tansi-global-search__result-copy strong,
.tansi-global-search__result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tansi-global-search__result-copy strong {
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.tansi-global-search__result-copy small {
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    margin-top: 3px;
}

.tansi-global-search__result-type {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 9%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tansi-global-search__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 10px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.tansi-appbar__tenant-slot,
.tansi-appbar__secondary-action {
    display: inline-flex;
    align-items: center;
}

.tansi-appbar__primary-actions,
.tansi-appbar__account-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
}

.tansi-appbar__account-actions {
    margin-left: 10px;
    gap: 0;
    height: 46px;
    padding: 0;
    border: 1px solid var(--bar-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
}

.tansi-appbar__tenant-slot {
    width: 190px;
    margin: 0;
}

.tansi-workspace-select,
.tansi-workspace-select__input {
    width: 100%;
}

.tansi-workspace-select__input .mud-input-control {
    margin: 0;
}

.tansi-workspace-select__input .mud-input-outlined {
    min-height: 40px;
    overflow: hidden;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
}

.tansi-workspace-select__input .mud-input-outlined-border {
    border-radius: 999px !important;
    border-color: var(--bar-line);
}

.tansi-workspace-select__input .mud-input-slot,
.tansi-workspace-select__input .mud-input-adornment {
    color: var(--bar-text);
    font-size: 0.8125rem;
}

.tansi-workspace-select__input:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

.tansi-appbar .mx-1,
.tansi-appbar .mx-2 {
    margin-inline: 0 !important;
}

.tansi-appbar__counter-badge .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 17px) calc(100% - 17px);
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 800;
}

.tansi-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 44px;
    padding: 5px 12px 5px 9px;
    border: 0;
    border-left: 1px solid var(--bar-line);
    border-radius: 0 999px 999px 0;
    background: transparent;
    color: var(--bar-text);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.tansi-profile-trigger:hover {
    background: var(--bar-soft);
}

.tansi-profile-trigger:focus-visible {
    outline: 3px solid var(--bar-focus);
    outline-offset: 2px;
}

.tansi-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.tansi-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tansi-profile-avatar--large {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    font-size: 0.9375rem;
}

.tansi-profile-menu__header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: min(330px, calc(100vw - 24px));
    padding: 14px 16px;
}

.tansi-profile-menu__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.tansi-profile-menu__identity strong,
.tansi-profile-menu__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tansi-profile-menu__identity strong {
    color: var(--mud-palette-text-primary);
    font-size: 0.9375rem;
}

.tansi-profile-menu__identity small {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* Icon buttons: uniform 40px rounded targets, drawer-style hover + ring. */
.tansi-appbar .mud-icon-button {
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 10px;
    color: var(--bar-text);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tansi-appbar .mud-icon-button:hover {
    background: var(--bar-soft);
}

.tansi-appbar .mud-icon-button:focus-visible,
.tansi-appbar .mud-button:focus-visible {
    outline: 3px solid var(--bar-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

/* The inbox and profile share one pill, but remain two generous click targets. */
.tansi-appbar__account-actions .mud-icon-button {
    width: 58px;
    min-width: 58px;
    height: 44px;
    padding: 10px 17px;
    border-radius: 999px 0 0 999px;
}

.tansi-appbar__account-actions .mud-icon-button:focus-visible {
    border-radius: 999px 0 0 999px;
}

.tansi-appbar__account-actions .tansi-appbar__counter-badge .mud-badge.mud-badge-top.right.mud-badge-overlap {
    left: calc(100% - 27px);
}

/* Cart badge — theme error hue, replaces the old hardcoded-hex span. */
.tansi-appbar__cart {
    position: relative;
    display: inline-flex;
}

/* Signed-in user's name in the app bar. Capped and ellipsised so a long
   name cannot push the account controls off the end of the bar. */
.tansi-appbar__user {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .92;
}

.tansi-appbar__badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text, #fff);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
}

/* Tenant pill — the chip becomes a flat bordered pill (drawer inset-card
   language) instead of a filled bubble with a scale hover. Status hues stay:
   quiet primary tint for the active tenant, warning for View All, error for
   the missing-workspace nudge. */
.tansi-appbar .tenant-chip.mud-chip {
    height: 32px;
    margin: 0 6px 0 0;
    padding: 0 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.6rem;
    border: 1px solid var(--bar-line);
    background: transparent;
    color: var(--bar-text);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.tansi-appbar .tenant-chip.mud-chip .mud-chip-icon {
    color: var(--mud-palette-primary);
}

.tansi-appbar .tenant-chip.mud-chip.mud-chip-color-warning {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
}

.tansi-appbar .tenant-chip.mud-chip.mud-chip-color-warning .mud-chip-icon {
    color: var(--mud-palette-warning);
}

.tansi-appbar .tenant-chip.mud-chip.mud-chip-color-error {
    border-color: color-mix(in srgb, var(--mud-palette-error) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.tansi-appbar .tenant-chip.mud-chip.mud-chip-color-error .mud-chip-icon {
    color: var(--mud-palette-error);
}

/* Beats the component's own `.tenant-chip.clickable:hover { scale }` rule. */
.tansi-appbar .tenant-chip.clickable:hover {
    transform: none;
    background: var(--bar-soft);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

@media (max-width: 1040px) {
    .tansi-global-search {
        flex-basis: 260px;
        width: clamp(160px, 22vw, 260px);
        margin-left: 8px;
    }

    .tansi-appbar__tenant-slot {
        display: none;
    }
}

@media (max-width: 700px) {
    .tansi-appbar .mud-toolbar {
        padding-inline: 8px;
    }

    .tansi-appbar__home,
    .tansi-appbar__secondary-action {
        display: none !important;
    }

    .tansi-global-search {
        flex: 1 1 auto;
        width: auto;
        min-width: 112px;
        margin-left: 4px;
    }

    .tansi-global-search__input .mud-input-slot::placeholder {
        font-size: 0.75rem;
    }
}

@media (max-width: 430px) {
    .tansi-global-search {
        flex: 0 1 40px;
        width: 40px;
        min-width: 40px;
    }

    .tansi-global-search__input .mud-input-outlined {
        min-height: 38px;
    }

    .tansi-global-search__input .mud-input-slot::placeholder {
        color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tansi-appbar .mud-icon-button,
    .tansi-appbar .tenant-chip.mud-chip {
        transition: none;
    }

    .tansi-appbar .tenant-chip.pulsing {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .tansi-header {
        gap: 12px;
        margin-bottom: 20px;
    }

    .tansi-header__icon {
        width: 42px;
        height: 42px;
    }

    .tansi-header__title {
        font-size: 1.375rem;
    }

    .tansi-header__actions {
        width: 100%;
        margin-left: 0;
    }

    .tansi-section__head {
        padding: 14px 18px 0;
    }

    .tansi-section__body {
        padding: 14px 18px 18px;
    }

    .tansi-section--plain > .tansi-section__head {
        padding: 0;
    }

    .tansi-section--plain > .tansi-section__body {
        padding: 12px 0 0;
    }
}

.tansi-validation-summary .tansi-validation-link {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  min-height: 24px;
  text-align: left;
}

/* ── Course Management (Training) ───────────────────────────────── */
.cm-noimg {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2, rgba(0,0,0,.04));
  border: 1px dashed var(--card-border);
  color: var(--text-caption);
}

/* Thumbnail wrapper */
.cm-thumb {
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  background: var(--mud-palette-surface);
}
.cm-thumb img {
  max-width: 100%;
  max-height: 100%;
}

.cm-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cm-titlebtn:hover {
  text-decoration: underline;
}

.cm-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.cm-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.cm-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--shadow-card-hover);
}

.cm-card > .mud-image,
.cm-card > .cm-noimg {
  width: 100%;
  height: 120px;
  border-radius: 0;
}

.cm-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}

.cm-board {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .cm-board {
    grid-template-columns: 1fr;
  }
}

.cm-bcol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--card-border);
}

.cm-bhead {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--card-border);
}

.cm-bcard {
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
}

.cm-bthumb {
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.cm-bthumb > .mud-image,
.cm-bthumb > .cm-noimg {
  width: 100%;
  height: 84px;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   8. Storage resolution  (StoragePutawayPicker, StockMovePanel)
   --------------------------------------------------------------------------
   One visual grammar for "which storage spot?" wherever the resolver asks it
   — receiving, no-PO receipts and stock moves. A spot is an option CARD, not
   a dropdown row: the path, its quantity and the selected state all have to
   be readable at a glance while someone is standing at a shelf.

   .tansi-resolve-note states what the resolver found before the options are
   listed (auto-selected / already stored here / first putaway), so the list
   is never presented without saying why those entries are the list.
   -------------------------------------------------------------------------- */

.tansi-resolve-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.tansi-resolve-note::before {
  content: "!";
  font-weight: 700;
  flex-shrink: 0;
}
.tansi-resolve-note.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.tansi-resolve-note.is-ok { background: var(--success-soft); color: var(--success-ink); }
.tansi-resolve-note.is-ok::before { content: "\2713"; }
.tansi-resolve-note.is-info { background: var(--section-bg); color: var(--text-body); }
.tansi-resolve-note.is-info::before { content: "\2139"; }

.tansi-spot {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  margin-bottom: 8px;
  background: var(--card-bg);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.tansi-spot:hover { border-color: var(--card-hover-border); }
.tansi-spot.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
/* The radio owns the whole card so the entire row is a click target. */
.tansi-spot .mud-radio { width: 100%; margin: 0; }

.tansi-spot-path { font-weight: 600; font-size: 0.875rem; color: var(--text-heading); }
.tansi-spot-sep { color: var(--text-caption); margin: 0 5px; }
.tansi-spot-qty { font-size: 0.75rem; color: var(--text-caption); margin-left: 8px; }

/* The alternates disclosure — indented under "a different location…" so it
   reads as that option's detail rather than a fourth sibling choice. */
.tansi-spot-alternates { margin: -2px 0 8px 34px; }

.tansi-spot-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   9. Location picker  (LocationPicker.razor)
   --------------------------------------------------------------------------
   A select of flat breadcrumbs made every row carry its whole lineage, so the
   leaf — the only part that differs — sat furthest right and the shared prefix
   repeated down the list. Here the indent carries the hierarchy, the row prints
   only its own name, and the type sits right-aligned as a quiet classifier.
   -------------------------------------------------------------------------- */

.loc-picker { position: relative; }

.loc-picker-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}
.loc-picker-req { color: var(--danger-ink); margin-left: 2px; }

.loc-picker-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px 8px 14px;
  text-align: left;
  font: inherit;
  color: var(--text-body);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.loc-picker-field:hover { border-color: var(--card-hover-border); }
.loc-picker-field.is-open { border-color: var(--primary); background: var(--section-bg); }
.loc-picker-field:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.loc-picker.is-disabled .loc-picker-field { cursor: not-allowed; opacity: 0.6; }

.loc-picker-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-picker-value.is-placeholder { color: var(--text-caption); }

.loc-picker-clear {
  flex-shrink: 0;
  color: var(--text-caption);
  font-size: 12px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
}
.loc-picker-clear:hover { color: var(--danger-ink); background: var(--section-bg); }
.loc-picker-caret { flex-shrink: 0; color: var(--text-caption); }

/* Sits under the popup, over everything else: an outside click lands here. */
.loc-picker-backdrop { position: fixed; inset: 0; z-index: 1200; }

/* At least as wide as the field, wider when the names need it — a narrow
   filter field must not force every site name into an ellipsis. */
.loc-picker-pop {
  position: absolute;
  z-index: 1201;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  max-height: 340px;
  background: var(--card-bg);
  border: 1px solid var(--card-hover-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
}

.loc-picker-filter {
  flex-shrink: 0;
  margin: 10px 10px 8px;
  padding: 9px 12px;
  font: inherit;
  color: var(--text-body);
  background: var(--card-bg);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
}
.loc-picker-filter:focus { outline: none; }

.loc-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0 6px 4px;
}

.loc-picker-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  font: inherit;
  color: var(--text-body);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.loc-picker-opt:hover,
.loc-picker-opt.is-active { background: var(--section-bg); }
.loc-picker-opt.is-selected { font-weight: 700; color: var(--text-heading); }
.loc-picker-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* A grouping level: shown for orientation, not for picking. */
.loc-picker-opt.is-unselectable { color: var(--text-caption); cursor: default; }
.loc-picker-opt.is-unselectable .loc-picker-name { font-style: italic; }

/* Accordion chevron; the leaf spacer keeps names aligned in a column. */
.loc-picker-toggle {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-caption);
  cursor: pointer;
}
.loc-picker-toggle:hover { background: var(--card-hover-border); color: var(--text-heading); }
.loc-picker-toggle--leaf { cursor: default; }
.loc-picker-count {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-caption);
  background: var(--section-bg);
  border-radius: 8px;
  padding: 0 6px;
}

.loc-picker-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-picker-type {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-caption);
}
.loc-picker-dot { flex: 0 0 10px; font-size: 9px; color: var(--primary); }

.loc-picker-empty,
.loc-picker-foot {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-caption);
}
.loc-picker-foot { border-top: 1px solid var(--card-border); }

/* A peer site: addressable, but its stock is not visible to this user. Tinted
   apart from the plain type chip so the distinction is not just wording. */
.loc-picker-peer {
  color: var(--warn-ink);
  background: var(--warn-soft);
  padding: 1px 6px;
  border-radius: 4px;
}