/* ============================================================
   SECTION 1 — Light theme tokens
   ============================================================ */
/* Control sizing tokens. Theme-independent, so they sit above the light/dark
   blocks rather than being duplicated in each. */
:root {
    --sh-control-height: 36px;
    --sh-control-height-sm: 30px;
}

[data-theme="light"] {
    --sh-bg-page: #F4F4F5;
    --sh-bg-surface: #FFFFFF;
    --sh-bg-sunken: #F4F4F5;
    --sh-bg-elevated: #FFFFFF;
    --sh-bg-overlay: #FFFFFF;
    --sh-border: #E4E4E7;
    --sh-border-strong: #D4D4D8;
    --sh-text-primary: #18181B;
    --sh-text-secondary: #52525B;
    --sh-text-tertiary: #A1A1AA;
    --sh-text-placeholder: #A1A1AA;
    --sh-text-disabled: #D4D4D8;
    --sh-accent: #F10F78;
    --sh-accent-hover: #C90C63;
    --sh-accent-subtle: #FEF0F6;
    --sh-accent-text: #A80A55;
    --sh-green-bg: #F0FDF4; --sh-green-border: #BBF7D0; --sh-green-text: #15803D;
    --sh-blue-bg: #EFF6FF; --sh-blue-border: #BFDBFE; --sh-blue-text: #1D4ED8;
    --sh-amber-bg: #FFFBEB; --sh-amber-border: #FDE68A; --sh-amber-text: #B45309;
    --sh-red-bg: #FEF2F2; --sh-red-border: #FECACA; --sh-red-text: #B91C1C;
    --sh-gray-bg: #F4F4F5; --sh-gray-border: #E4E4E7; --sh-gray-text: #71717A;
    --sh-hover: rgba(0,0,0,0.04);
    --sh-active: rgba(0,0,0,0.08);
    --sh-focus-ring: #F10F78;
    --sh-radius-sm: 4px;
    --sh-radius-md: 6px;  /* buttons — intentionally compact for data-dense admin UI (spec: 12px) */
    --sh-radius-lg: 8px;  /* cards   — intentionally compact for data-dense admin UI (spec: 16px) */
    --sh-radius-xl: 12px;
    --sh-radius-full: 9999px;
    --sh-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --sh-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --sh-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
    --sh-purple-bg: #F5F3FF;
    --sh-purple-border: #DDD6FE;
    --sh-purple-text: #7C3AED;
    --sh-sidebar-width: 220px;
    --sh-sidebar-collapsed-width: 56px;
    --sh-topbar-height: 48px;
    --sh-content-padding: 24px;
}

/* ============================================================
   SECTION 2 — Dark theme tokens
   ============================================================ */
[data-theme="dark"] {
    --sh-bg-page: #0F0F10;
    --sh-bg-surface: #18181B;
    --sh-bg-sunken: #111113;
    --sh-bg-elevated: #1C1C1F;
    --sh-bg-overlay: #1C1C1F;
    --sh-border: #2E2E32;
    --sh-border-strong: #4B4B52;
    --sh-text-primary: #FAFAFA;
    --sh-text-secondary: #A1A1AA;
    --sh-text-tertiary: #71717A;
    --sh-text-placeholder: #52525B;
    --sh-text-disabled: #3F3F46;
    --sh-accent: #F10F78;
    --sh-accent-hover: #F540A0;
    --sh-accent-subtle: #3D0B23;
    --sh-accent-text: #F472B6;
    --sh-green-bg: #052E16; --sh-green-border: #14532D; --sh-green-text: #4ADE80;
    --sh-blue-bg: #0C1A3A; --sh-blue-border: #1E3A6E; --sh-blue-text: #60A5FA;
    --sh-amber-bg: #1C1200; --sh-amber-border: #422006; --sh-amber-text: #FCD34D;
    --sh-red-bg: #1F0505; --sh-red-border: #450A0A; --sh-red-text: #F87171;
    --sh-gray-bg: #18181B; --sh-gray-border: #27272A; --sh-gray-text: #71717A;
    --sh-hover: rgba(255,255,255,0.04);
    --sh-active: rgba(255,255,255,0.08);
    --sh-focus-ring: #F10F78;
    --sh-radius-sm: 4px;
    --sh-radius-md: 6px;  /* buttons — intentionally compact for data-dense admin UI (spec: 12px) */
    --sh-radius-lg: 8px;  /* cards   — intentionally compact for data-dense admin UI (spec: 16px) */
    --sh-radius-xl: 12px;
    --sh-radius-full: 9999px;
    --sh-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --sh-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --sh-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
    --sh-purple-bg: #1E1533;
    --sh-purple-border: #4C1D95;
    --sh-purple-text: #A78BFA;
    --sh-sidebar-width: 220px;
    --sh-sidebar-collapsed-width: 56px;
    --sh-topbar-height: 48px;
    --sh-content-padding: 24px;
}


/* ============================================================
   SECTION 3 — Base styles
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: var(--sh-bg-page);
    color: var(--sh-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sh-accent-text); text-decoration: none; }
a:hover { color: var(--sh-accent); }


/* ============================================================
   SECTION 4 — App shell
   ============================================================ */
.sh-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--sh-bg-page);
}

.sh-sidebar {
    width: var(--sh-sidebar-width);
    flex-shrink: 0;
    height: 100%;
    /* The nav is the only scroll region. When the whole sidebar scrolled instead, the logo left the
       top and the pinned user block came along, which read as "the list ends here". */
    overflow: hidden;
    background: var(--sh-bg-surface);
    border-right: 1px solid var(--sh-border);
    display: flex;
    flex-direction: column;
    transition: width 200ms ease;
}

.sh-sidebar__logo {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    flex-shrink: 0;
}

.sh-sidebar__logo img {
    height: 24px;
    width: 24px;
}

.sh-sidebar__logo-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--sh-accent);
    letter-spacing: -0.01em;
    flex: 1;
}

.sh-mode-switcher {
    padding: 8px 12px 4px;
}

.sh-mode-switcher .sh-segmented {
    width: 100%;
}

.sh-sidebar__nav {
    flex: 1;
    min-height: 0;
    padding: 4px 0;
    overflow-y: auto;

    /* Scroll shadows: the `local` layers ride the content and hide the shadow at each end, so the
       shading only appears on the edge that actually has more nav beyond it. Without an affordance,
       an admin whose viewport cuts the list off concludes the console has no Equipo or Permisos. */
    background:
        linear-gradient(var(--sh-bg-surface) 30%, rgba(0, 0, 0, 0)) top / 100% 20px no-repeat local,
        linear-gradient(rgba(0, 0, 0, 0), var(--sh-bg-surface) 70%) bottom / 100% 20px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) top / 100% 8px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) bottom / 100% 8px no-repeat scroll;
}

.sh-sidebar__spacer { flex: 1; }

.sh-sidebar__bottom {
    border-top: 1px solid var(--sh-border);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sh-sidebar__user-info { flex: 1; min-width: 0; }

.sh-sidebar__user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--sh-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-sidebar__user-role {
    font-size: 12px;
    color: var(--sh-text-tertiary);
}

.sh-nav-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 12px;
    text-align: center;
}

/* Nav groups */
.sh-nav-group { margin-top: 20px; }
.sh-nav-group:first-child { margin-top: 0; }

.sh-nav-group__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--sh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0 16px;
    margin-bottom: 2px;
}

.sh-nav-group__label--toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sh-nav-group__label--toggle:hover { color: var(--sh-text-secondary); }
.sh-nav-group__label-text { flex: 1; }

.sh-nav-group__chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 150ms ease;
}

.sh-nav-group--collapsed .sh-nav-group__chevron { transform: rotate(-90deg); }

/* Nav items */
.sh-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    margin: 1px 4px;
    border-radius: var(--sh-radius-md);
    font-size: 14px;
    color: var(--sh-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms, color 120ms;
    border: none;
    background: none;
    width: calc(100% - 8px);
    border-left: 2px solid transparent;
}

.sh-nav-item:hover {
    background: var(--sh-hover);
    color: var(--sh-text-primary);
    text-decoration: none;
}

.sh-nav-item--active {
    background: var(--sh-accent-subtle);
    color: var(--sh-accent-text);
    border-left-color: var(--sh-accent);
}

.sh-nav-item--active:hover {
    background: var(--sh-accent-subtle);
}

.sh-nav-item__icon {
    width: 16px;
    height: 16px;
    color: var(--sh-text-tertiary);
    flex-shrink: 0;
}

.sh-nav-item--active .sh-nav-item__icon {
    color: var(--sh-accent);
}

[data-theme="dark"] .sh-nav-item--active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sh-text-primary);
    border-left-color: var(--sh-text-primary);
}
[data-theme="dark"] .sh-nav-item--active:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sh-nav-item--active .sh-nav-item__icon {
    color: var(--sh-text-primary);
}

.sh-nav-item__text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-nav-item__badge {
    font-size: 12px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: var(--sh-radius-full);
    background: var(--sh-amber-bg);
    color: var(--sh-amber-text);
    border: 1px solid var(--sh-amber-border);
}

/* Main area */
.sh-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.sh-topbar {
    height: var(--sh-topbar-height);
    flex-shrink: 0;
    border-bottom: 1px solid var(--sh-border);
    background: var(--sh-bg-surface);
    display: flex;
    align-items: center;
    padding: 0 var(--sh-content-padding);
    gap: 12px;
    position: relative;
}

.sh-topbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sh-topbar__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sh-text-primary);
    margin: 0;
    white-space: nowrap;
}

.sh-topbar__subtitle {
    font-size: 13px;
    color: var(--sh-text-tertiary);
}

.sh-topbar__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.sh-topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sh-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--sh-content-padding);
}


/* ============================================================
   SECTION 5 — Components
   ============================================================ */

/* ── 5a: ShBadge ── */
.sh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--sh-radius-full);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
    font-family: inherit;
}
.sh-badge--success { background: var(--sh-green-bg); color: var(--sh-green-text); border-color: var(--sh-green-border); }
.sh-badge--warning { background: var(--sh-amber-bg); color: var(--sh-amber-text); border-color: var(--sh-amber-border); }
.sh-badge--danger  { background: var(--sh-red-bg);   color: var(--sh-red-text);   border-color: var(--sh-red-border); }
.sh-badge--info    { background: var(--sh-blue-bg);  color: var(--sh-blue-text);  border-color: var(--sh-blue-border); }
.sh-badge--neutral { background: var(--sh-gray-bg);  color: var(--sh-gray-text);  border-color: var(--sh-gray-border); }
.sh-badge--accent  { background: var(--sh-accent-subtle); color: var(--sh-accent-text); border-color: transparent; }
.sh-badge--md { font-size: 12px; padding: 3px 9px; }

/* ── 5b: ShButton ── */
.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--sh-radius-md);
    border: 1px solid var(--sh-border);
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
    white-space: nowrap;
    padding: 0 12px;
    height: var(--sh-control-height);
    text-decoration: none;
    line-height: 1;
    outline: none;
}
.sh-btn--sm { height: var(--sh-control-height-sm); padding: 0 10px; font-size: 12px; }
.sh-btn--secondary {
    background: var(--sh-bg-surface);
    color: var(--sh-text-primary);
    border-color: var(--sh-border);
}
.sh-btn--secondary:hover { background: var(--sh-hover); border-color: var(--sh-border-strong); }
[data-theme="dark"] .sh-btn--secondary { border-color: var(--sh-border-strong); }
.sh-btn--primary {
    background: var(--sh-accent);
    color: #fff;
    border-color: transparent;
}
.sh-btn--primary:hover { background: var(--sh-accent-hover); }
.sh-btn--ghost {
    background: transparent;
    color: var(--sh-text-secondary);
    border-color: transparent;
}
.sh-btn--ghost:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.sh-btn--danger {
    background: var(--sh-red-bg);
    color: var(--sh-red-text);
    border-color: var(--sh-red-border);
}
.sh-btn--danger:hover { filter: brightness(0.95); }
.sh-btn:disabled, .sh-btn--disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sh-btn:focus-visible { box-shadow: 0 0 0 3px var(--sh-accent-subtle), 0 0 0 1px var(--sh-accent); }
.sh-btn:active:not(:disabled) { transform: scale(0.99); background: var(--sh-active); }

.sh-btn__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sh-spin 0.6s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* ── 5c: Typed input components (shared base) ── */

/* Field wrapper */
.sh-field { display: flex; flex-direction: column; gap: 5px; }

/* Label — .sh-input-label kept for direct usages in pages */
.sh-field-label, .sh-input-label { font-size: 12px; font-weight: 500; color: var(--sh-text-secondary); }

/* Inner wrapper (position context for prefix/suffix/icons) */
.sh-input-wrap { position: relative; }

/* Base input element — .sh-input kept as alias for raw <input class="sh-input"> usages in pages */
.sh-input-base, .sh-input {
    width: 100%;
    height: var(--sh-control-height);
    padding: 0 12px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.sh-input-base::placeholder, .sh-input::placeholder { color: var(--sh-text-placeholder); }
.sh-input-base:hover:not(:disabled), .sh-input:hover { border-color: var(--sh-border-strong); }
.sh-input-base:focus, .sh-input:focus { border-color: var(--sh-accent); box-shadow: 0 0 0 3px var(--sh-accent-subtle); }
.sh-input-base:disabled { opacity: 0.5; cursor: not-allowed; background: var(--sh-bg-sunken); }
.sh-input-base--error, .sh-input--error { border-color: var(--sh-red-border); }
.sh-input-base--error:focus, .sh-input--error:focus { box-shadow: 0 0 0 3px var(--sh-red-bg); }
textarea.sh-input-base, textarea.sh-input { height: auto; padding: 8px 12px; resize: vertical; }

/* Error message */
.sh-field-error, .sh-input-error-msg { font-size: 12px; color: var(--sh-red-text); }

.sh-field-hint { font-size: 11px; line-height: 1.4; color: var(--sh-text-tertiary); }

/* Icon prefix */
.sh-input-icon-left, .sh-input-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--sh-text-tertiary);
    pointer-events: none;
    width: 16px; height: 16px;
}
.sh-input-base--has-icon, .sh-input--has-icon { padding-left: 34px; }

/* Date picker */
.sh-datepicker { position: relative; }
/* The trigger is a button so it can be tabbed to; the inner span carries the input styling so the
   control still reads as a field. */
.sh-datepicker__trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.sh-datepicker__trigger:disabled { cursor: not-allowed; }
.sh-datepicker__trigger input,
.sh-datepicker__display { cursor: pointer; padding-right: 36px; }
.sh-datepicker__display {
    display: flex;
    align-items: center;
    width: 100%;
}
.sh-datepicker__display--placeholder { color: var(--sh-text-placeholder); }
.sh-datepicker__trigger:focus-visible .sh-datepicker__display {
    border-color: var(--sh-accent);
    box-shadow: 0 0 0 3px var(--sh-accent-subtle);
}
.sh-datepicker__icon {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--sh-text-tertiary);
    pointer-events: none;
}
.sh-datepicker__backdrop {
    position: fixed; inset: 0; z-index: 999;
}
.sh-datepicker__dropdown {
    position: absolute; top: 100%; left: 0; z-index: 1000;
    margin-top: 4px;
    width: 280px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 12px;
    animation: sh-datepicker-in 120ms ease-out;
}
@keyframes sh-datepicker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sh-datepicker__nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.sh-datepicker__nav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; border-radius: var(--sh-radius-sm);
    background: transparent; color: var(--sh-text-secondary); cursor: pointer;
    transition: background 120ms;
}
.sh-datepicker__nav-btn:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.sh-datepicker__month-label {
    font-size: 13px; font-weight: 600; color: var(--sh-text-primary);
    text-transform: capitalize;
}
.sh-datepicker__grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.sh-datepicker__day-header {
    font-size: 11px; font-weight: 600; color: var(--sh-text-tertiary);
    text-align: center; padding: 4px 0;
}
.sh-datepicker__cell {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 0 auto;
    font-size: 13px; border: none; border-radius: var(--sh-radius-sm);
    background: transparent; color: var(--sh-text-primary); cursor: pointer;
    transition: background 100ms, color 100ms;
}
.sh-datepicker__cell:hover:not(:disabled) { background: var(--sh-hover); }
.sh-datepicker__cell--today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--sh-accent); }
.sh-datepicker__cell--selected { background: var(--sh-accent) !important; color: #fff !important; font-weight: 600; }
.sh-datepicker__cell--disabled { color: var(--sh-text-disabled); cursor: not-allowed; opacity: 0.4; }
.sh-datepicker__cell--empty { cursor: default; }
.sh-datepicker__footer {
    display: flex; justify-content: space-between;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--sh-border);
}
.sh-datepicker__footer-btn {
    font-size: 12px; font-weight: 500; border: none;
    background: transparent; color: var(--sh-accent); cursor: pointer;
    padding: 4px 8px; border-radius: var(--sh-radius-sm);
    transition: background 100ms;
}
.sh-datepicker__footer-btn:hover { background: var(--sh-hover); }

/* Number input */
.sh-number-wrap { position: relative; display: flex; align-items: center; }
.sh-number-input { flex: 1; }
.sh-number-input::-webkit-inner-spin-button,
.sh-number-input::-webkit-outer-spin-button { appearance: none; }
.sh-number-input { -moz-appearance: textfield; }
.sh-number-affix {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    font-size: 13px;
    color: var(--sh-text-tertiary);
    pointer-events: none;
}
.sh-number-affix--left { left: 12px; }
.sh-number-affix--right { right: 12px; }
.sh-number-input--has-prefix { padding-left: 28px; }
.sh-number-input--has-suffix { padding-right: 28px; }

/* Select error modifier */
.sh-select--error { border-color: var(--sh-red-border); }

/* Password show/hide toggle */
.sh-input-base--has-eye { padding-right: 36px; }
.sh-input-eye-btn {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--sh-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sh-radius-sm);
    line-height: 0;
    transition: color 120ms;
}
.sh-input-eye-btn:hover { color: var(--sh-text-primary); }
.sh-input-eye-icon { width: 16px; height: 16px; }

/* OTP boxes */
.sh-otp-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
}
.sh-otp-input {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    border: 1.5px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    background: var(--sh-bg-surface);
    color: var(--sh-text-primary);
    caret-color: var(--sh-accent);
    outline: none;
    cursor: text;
    transition: border-color 120ms, box-shadow 120ms;
    -moz-appearance: textfield;
}
.sh-otp-input:focus {
    border-color: var(--sh-accent);
    box-shadow: 0 0 0 3px var(--sh-accent-subtle);
}
.sh-otp-input.sh-otp-box--filled { border-color: var(--sh-border-strong); }
.sh-otp-input.sh-otp-box--error { border-color: var(--sh-red-border); }
.sh-otp-input.sh-otp-box--error:focus { box-shadow: 0 0 0 3px var(--sh-red-bg); }

/* ── 5d: ShSelect ── */
.sh-select {
    width: 100%;
    height: var(--sh-control-height);
    padding: 0 32px 0 12px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 120ms;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}
.sh-select:hover { border-color: var(--sh-border-strong); }
.sh-select:focus { border-color: var(--sh-focus-ring); box-shadow: 0 0 0 3px var(--sh-accent-subtle); }

/* ── 5e: ShCard ── */
.sh-card {
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
}
.sh-card--padded { padding: 16px 20px; }
.sh-card--hoverable { cursor: pointer; transition: border-color 120ms; }
.sh-card--hoverable:hover { border-color: var(--sh-border-strong); }

/* ── 5f: ShStat ── */
.sh-stat {
    background: var(--sh-bg-sunken);
    border-radius: var(--sh-radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sh-stat__icon { color: var(--sh-text-tertiary); width: 20px; height: 20px; }
.sh-stat__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--sh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sh-stat__value {
    font-size: 28px;
    font-weight: 600;
    color: var(--sh-text-primary);
    line-height: 1;
}
.sh-stat__delta { font-size: 12px; font-weight: 500; }
.sh-stat__delta--positive { color: var(--sh-green-text); }
.sh-stat__delta--negative { color: var(--sh-red-text); }

/* ── 5g: ShSegmented ── */
.sh-segmented {
    display: inline-flex;
    background: var(--sh-bg-sunken);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    padding: 2px;
    gap: 1px;
}
.sh-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 28px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sh-text-secondary);
    border-radius: calc(var(--sh-radius-md) - 1px);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    transition: all 120ms;
}
.sh-segmented__item:hover { color: var(--sh-text-primary); }
.sh-segmented__item--active {
    background: var(--sh-bg-surface);
    color: var(--sh-text-primary);
    box-shadow: var(--sh-shadow-sm);
}
.sh-segmented--full {
    display: flex;
    width: 100%;
}
.sh-segmented--full .sh-segmented__item {
    flex: 1;
    justify-content: center;
}

/* ── 5h: ShModal ── */
dialog.sh-modal {
    border: none;
    border-radius: var(--sh-radius-xl);
    background: var(--sh-bg-surface);
    color: var(--sh-text-primary);
    padding: 0;
    max-height: 85vh;
    overflow: hidden;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px var(--sh-border);
}
dialog.sh-modal[open] { display: flex; }
dialog.sh-modal::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
dialog.sh-modal--sm { width: 400px; }
dialog.sh-modal--md { width: 560px; }
dialog.sh-modal--lg { width: 720px; }
.sh-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sh-border);
    flex-shrink: 0;
}
.sh-modal__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sh-text-primary);
    margin: 0;
}
.sh-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--sh-radius-sm);
    color: var(--sh-text-tertiary);
    cursor: pointer;
    transition: background 120ms;
}
.sh-modal__close:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.sh-modal__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.sh-modal__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--sh-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ── 5i: ShToast ── */
.sh-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.sh-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--sh-radius-lg);
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    box-shadow: var(--sh-shadow-md);
    min-width: 280px;
    max-width: 420px;
    pointer-events: auto;
    animation: sh-toast-in 200ms ease-out;
}
@keyframes sh-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.sh-toast__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.sh-toast--success .sh-toast__icon { color: var(--sh-green-text); }
.sh-toast--error .sh-toast__icon { color: var(--sh-red-text); }
.sh-toast--warning .sh-toast__icon { color: var(--sh-amber-text); }
.sh-toast--info .sh-toast__icon { color: var(--sh-blue-text); }
.sh-toast__message { flex: 1; font-size: 13px; color: var(--sh-text-primary); line-height: 1.4; }
.sh-toast__repeats {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: var(--sh-radius-full);
    background: var(--sh-bg-sunken);
    font-size: 11px;
    font-weight: 600;
    color: var(--sh-text-secondary);
}
.sh-toast__close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--sh-text-tertiary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sh-radius-sm);
}
.sh-toast__close:hover { color: var(--sh-text-primary); background: var(--sh-hover); }

/* ── 5j: ShTable / QuickGrid ── */
.sh-table-wrap {
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    background: var(--sh-bg-surface);
}
.sh-table-wrap table { width: 100%; border-collapse: collapse; }
.sh-table-wrap thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sh-text-tertiary);
    background: var(--sh-bg-sunken);
    border-bottom: 1px solid var(--sh-border);
    white-space: nowrap;
}
.sh-table-wrap tbody tr {
    border-bottom: 1px solid var(--sh-border);
    transition: background 80ms;
}
.sh-table-wrap tbody tr:last-child { border-bottom: none; }
.sh-table-wrap tbody tr:hover { background: var(--sh-hover); }
.sh-table-wrap tbody td {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--sh-text-primary);
    vertical-align: middle;
}
.sh-table-wrap .col-sort-asc::after  { content: ' \2191'; color: var(--sh-accent); }
.sh-table-wrap .col-sort-desc::after { content: ' \2193'; color: var(--sh-accent); }
.sh-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--sh-border);
    font-size: 13px;
    color: var(--sh-text-secondary);
    background: var(--sh-bg-sunken);
}

/* ── 5k: ShEmptyState ── */
.sh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 8px;
    text-align: center;
}
.sh-empty__icon { color: var(--sh-text-tertiary); margin-bottom: 4px; width: 40px; height: 40px; }
.sh-empty__title { font-size: 14px; font-weight: 500; color: var(--sh-text-primary); }
.sh-empty__desc { font-size: 13px; color: var(--sh-text-tertiary); max-width: 320px; }

/* ── 5k2: ModeGuard pending ── */
.sh-guard-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
}
.sh-guard-pending__text { font-size: 13px; color: var(--sh-text-tertiary); }

/* ── 5l: ShAvatar ── */
.sh-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sh-radius-full);
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
}
.sh-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.sh-avatar--md { width: 32px; height: 32px; font-size: 12px; }
.sh-avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.sh-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── 5m: ShPageHeader ── */
.sh-page-header { margin-bottom: 24px; }
.sh-breadcrumb { font-size: 12px; color: var(--sh-text-tertiary); margin-bottom: 6px; }
.sh-breadcrumb a { color: var(--sh-text-tertiary); text-decoration: none; }
.sh-breadcrumb a:hover { color: var(--sh-text-secondary); }
.sh-page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.sh-page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--sh-text-primary);
    margin: 0;
    line-height: 1.2;
}
.sh-page-subtitle {
    font-size: 13px;
    color: var(--sh-text-tertiary);
    margin: 4px 0 0;
}
.sh-page-freshness {
    font-size: 12px;
    color: var(--sh-text-tertiary);
    font-weight: normal;
    white-space: nowrap;
}
.sh-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── 5n: Skeleton shimmer ── */
.sh-skeleton {
    background: linear-gradient(90deg, var(--sh-border) 25%, var(--sh-bg-sunken) 50%, var(--sh-border) 75%);
    background-size: 200% 100%;
    animation: sh-shimmer 1.5s infinite;
    border-radius: var(--sh-radius-sm);
}
@keyframes sh-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── 5o: Icon button ── */
.sh-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sh-control-height);
    height: var(--sh-control-height);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    background: transparent;
    cursor: pointer;
    transition: background 120ms;
    padding: 0;
    color: var(--sh-text-secondary);
    flex-shrink: 0;
}
.sh-icon-btn--sm { width: var(--sh-control-height-sm); height: var(--sh-control-height-sm); }
.sh-icon-btn:hover {
    background: var(--sh-hover);
    border-color: var(--sh-border-strong);
    color: var(--sh-text-primary);
}
.sh-icon-btn--ghost {
    border-color: transparent;
}
.sh-icon-btn--ghost:hover {
    border-color: transparent;
}

.sh-icon {
    width: 16px;
    height: 16px;
    color: inherit;
    stroke-width: 1.5;
}

/* ── 5p: Popup/Dropdown ── */
.sh-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}
.sh-popup {
    position: fixed;
    z-index: 1000;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    box-shadow: var(--sh-shadow-md);
    min-width: 220px;
    padding: 4px 0;
}
.sh-popup__header {
    padding: 8px 16px;
    border-bottom: 1px solid var(--sh-border);
    margin-bottom: 4px;
}
.sh-popup__header-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--sh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.sh-popup__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--sh-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background 80ms;
}
.sh-popup__item:hover,
.sh-popup__item:focus-visible { background: var(--sh-hover); text-decoration: none; color: var(--sh-text-primary); }
/* Popup rows are a mix of <a> and <button>; reset the button chrome so the two are indistinguishable. */
button.sh-popup__item { width: 100%; background: transparent; border: 0; font: inherit; text-align: left; }
.sh-popup__item--active { background: var(--sh-accent-subtle); }
.sh-popup__item-icon { width: 18px; height: 18px; flex-shrink: 0; }
.sh-popup__item-text { flex: 1; }
.sh-popup__empty {
    padding: 16px;
    text-align: center;
    color: var(--sh-text-tertiary);
    font-size: 13px;
}

/* ── Notification badge ── */
.sh-notification-dot {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--sh-red-text);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}


/* ── 5q: ShAlert ── */
.sh-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--sh-radius-md);
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.5;
}
.sh-alert--success { background: var(--sh-green-bg); color: var(--sh-green-text); border-color: var(--sh-green-border); }
.sh-alert--warning { background: var(--sh-amber-bg); color: var(--sh-amber-text); border-color: var(--sh-amber-border); }
.sh-alert--danger  { background: var(--sh-red-bg);   color: var(--sh-red-text);   border-color: var(--sh-red-border); }
.sh-alert--info    { background: var(--sh-blue-bg);  color: var(--sh-blue-text);  border-color: var(--sh-blue-border); }
.sh-alert__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.sh-alert__content { flex: 1; }
.sh-alert__title { font-weight: 600; margin-bottom: 2px; }

/* ── 5r: ShSpinner ── */
.sh-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sh-spinner__circle {
    border: 2.5px solid var(--sh-border);
    border-top-color: var(--sh-accent);
    border-radius: 50%;
    animation: sh-spin 0.7s linear infinite;
}
.sh-spinner--sm .sh-spinner__circle { width: 16px; height: 16px; }
.sh-spinner--md .sh-spinner__circle { width: 24px; height: 24px; }
.sh-spinner--lg .sh-spinner__circle { width: 36px; height: 36px; }

/* ── 5s: ShSwitch ── */
.sh-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--sh-text-primary);
}
.sh-switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.sh-switch__track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--sh-border-strong);
    transition: background 120ms;
    position: relative;
    flex-shrink: 0;
}
.sh-switch__input:checked + .sh-switch__track { background: var(--sh-accent); }
.sh-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 120ms;
}
.sh-switch__input:checked + .sh-switch__track .sh-switch__thumb { transform: translateX(16px); }
.sh-switch__input:focus-visible + .sh-switch__track { box-shadow: 0 0 0 3px var(--sh-accent-subtle); }

/* ── 5t: ShCheckbox ── */
.sh-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--sh-text-primary);
}
.sh-checkbox__input {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1.5px solid var(--sh-border-strong);
    background: var(--sh-bg-surface);
    appearance: none;
    cursor: pointer;
    transition: all 120ms;
    display: grid;
    place-content: center;
    flex-shrink: 0;
}
.sh-checkbox__input:checked {
    background: var(--sh-accent);
    border-color: var(--sh-accent);
}
.sh-checkbox__input:checked::after {
    content: '';
    width: 8px;
    height: 5px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
    margin-top: -1px;
}
.sh-checkbox__input:focus-visible { box-shadow: 0 0 0 3px var(--sh-accent-subtle); }

/* ── 5u: ShTabs ── */
.sh-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--sh-border);
    margin-bottom: 16px;
}
.sh-tabs__item {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sh-text-secondary);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms, border-color 120ms;
    font-family: inherit;
}
.sh-tabs__item:hover { color: var(--sh-text-primary); }
.sh-tabs__item--active {
    color: var(--sh-accent-text);
    border-bottom-color: var(--sh-accent);
}

/* ── 5v: Layout utilities ── */
.sh-flex { display: flex; }
.sh-flex-col { display: flex; flex-direction: column; }
.sh-flex-row { display: flex; flex-direction: row; }
.sh-flex-wrap { flex-wrap: wrap; }
.sh-flex-1 { flex: 1; min-width: 0; }
.sh-items-center { align-items: center; }
.sh-items-start { align-items: flex-start; }
.sh-items-end { align-items: flex-end; }
.sh-justify-between { justify-content: space-between; }
.sh-justify-center { justify-content: center; }
.sh-justify-end { justify-content: flex-end; }
.sh-gap-xs { gap: 4px; }
.sh-gap-sm { gap: 8px; }
.sh-gap-md { gap: 12px; }
.sh-gap-lg { gap: 16px; }
.sh-gap-xl { gap: 24px; }
.sh-grid { display: grid; gap: 16px; }
.sh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sh-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sh-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sh-grid-5 { grid-template-columns: repeat(5, 1fr); }
.sh-w-full { width: 100%; }
.sh-text-center { text-align: center; }
.sh-text-right { text-align: right; }
.sh-text-sm { font-size: 12px; }
.sh-text-xs { font-size: 11px; }
.sh-text-muted { color: var(--sh-text-secondary); }
.sh-text-tertiary { color: var(--sh-text-tertiary); }
.sh-font-medium { font-weight: 500; }
.sh-font-semibold { font-weight: 600; }
.sh-mt-sm { margin-top: 8px; }
.sh-mt-md { margin-top: 16px; }
.sh-mt-lg { margin-top: 24px; }
.sh-mb-sm { margin-bottom: 8px; }
.sh-mb-md { margin-bottom: 16px; }
.sh-mb-lg { margin-bottom: 24px; }
.sh-p-md { padding: 16px; }
.sh-p-lg { padding: 24px; }
.sh-hidden { display: none; }
.sh-py-xl { padding-top: 24px; padding-bottom: 24px; }
.sh-ml-auto { margin-left: auto; }

/* BEM-style grid aliases (pages use the double-dash convention) */
.sh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sh-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ── 5w: Data grid (QuickGrid) ── */
.sh-table-wrap .quickgrid { width: 100%; border-collapse: collapse; }
.sh-table-wrap .quickgrid thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sh-text-tertiary);
    background: var(--sh-bg-sunken);
    border-bottom: 1px solid var(--sh-border);
    white-space: nowrap;
    cursor: pointer;
}
.sh-table-wrap .quickgrid tbody tr {
    border-bottom: 1px solid var(--sh-border);
    transition: background 80ms;
}
.sh-table-wrap .quickgrid tbody tr:last-child { border-bottom: none; }
.sh-table-wrap .quickgrid tbody tr:hover { background: var(--sh-hover); }
.sh-table-wrap .quickgrid tbody td {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--sh-text-primary);
    vertical-align: middle;
}
.sh-table-wrap .quickgrid .col-sort-asc::after { content: ' \2191'; color: var(--sh-accent); }
.sh-table-wrap .quickgrid .col-sort-desc::after { content: ' \2193'; color: var(--sh-accent); }

/* ── 5x: Progress bar linear ── */
.sh-progress {
    width: 100%;
    height: 6px;
    background: var(--sh-bg-sunken);
    border-radius: 3px;
    overflow: hidden;
}
.sh-progress__bar {
    height: 100%;
    background: var(--sh-accent);
    border-radius: 3px;
    transition: width 300ms ease;
}
.sh-progress--indeterminate .sh-progress__bar {
    width: 40%;
    animation: sh-progress-slide 1.2s ease-in-out infinite;
}
@keyframes sh-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ── 5x2: ShLoadingBar ── */
.sh-loading-bar {
    width: 80px;
    height: 4px;
    background: var(--sh-border);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.sh-loading-bar__fill {
    height: 100%;
    background: var(--sh-accent);
    border-radius: 2px;
    transition: width 1s linear;
}

/* ── 5y: Dropdown button ── */
.sh-dropdown-wrap { position: relative; display: inline-flex; }
.sh-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 180px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    box-shadow: var(--sh-shadow-md);
    padding: 4px 0;
    margin-top: 4px;
}
.sh-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--sh-text-primary);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 80ms;
}
.sh-dropdown-item:hover { background: var(--sh-hover); }

/* ── 5z: Misc page utilities ── */
.sh-section-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--sh-text-secondary);
    margin: 0 0 12px 0;
}
.sh-divider {
    height: 1px;
    background: var(--sh-border);
    margin: 16px 0;
}
.sh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.sh-chart-card {
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    padding: 20px;
    min-width: 0;
}
.sh-chart-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--sh-text-secondary);
    margin: 0 0 12px 0;
}
.sh-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sh-form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}
.sh-password-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 120ms;
    outline: none;
}
.sh-password-input::placeholder { color: var(--sh-text-placeholder); }
.sh-password-input:focus { border-color: var(--sh-focus-ring); box-shadow: 0 0 0 3px var(--sh-accent-subtle); }
.sh-numeric-input { width: 100%; }


/* ============================================================
   SECTION 6 — Page-specific: DeliveryOrders
   ============================================================ */
.page-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.page-header .rzi { display: none; }
.page-header h3 { margin: 0; font-weight: 600; font-size: 18px; color: var(--sh-text-primary); letter-spacing: -0.01em; }
.page-header .sh-text-sm { font-size: 13px; color: var(--sh-text-tertiary); }

.filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--sh-bg-surface); border: 1px solid var(--sh-border); border-radius: 6px; padding: 12px 16px; margin-bottom: 0; }
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }

.grid-card { background: var(--sh-bg-surface); border: 1px solid var(--sh-border); border-radius: 6px; cursor: default; transition: border-color 100ms ease; }
.grid-card:hover { border-color: var(--sh-border-strong); }
.grid-card__body { padding: 14px; }
.grid-card__title { font-weight: 500; font-size: 13px; color: var(--sh-text-primary); }
.grid-card__value { font-weight: 500; font-size: 15px; color: var(--sh-text-primary); }
.grid-card__caption { font-size: 12px; color: var(--sh-text-secondary); }
.grid-card__detail { background: var(--sh-bg-sunken); border: 1px solid var(--sh-border); border-radius: 4px; padding: 8px 10px; }

.do-layout { display: flex; gap: 0; min-height: calc(100vh - 120px); }
.do-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.do-content { flex: 1; overflow-y: auto; padding-top: 8px; }
.do-sidebar { width: 210px; flex-shrink: 0; background: var(--sh-bg-surface); border-left: 1px solid var(--sh-border); padding: 14px 12px; overflow-y: auto; transition: width 150ms ease, padding 150ms ease, opacity 150ms ease; }
.do-sidebar--closed { width: 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.do-sidebar-section { display: flex; flex-direction: column; gap: 2px; }
.do-sidebar-label { font-size: 11px; font-weight: 500; color: var(--sh-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.do-sidebar-divider { height: 1px; background: var(--sh-border); margin: 10px 0; }

.do-status-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--sh-text-primary); border-left: 2px solid transparent; transition: background 80ms ease; }
.do-status-row .rzi { font-size: 14px !important; }
.do-status-row:hover { background: var(--sh-hover); }
.do-status-row--active { border-left-color: var(--sh-accent); background: var(--sh-accent-subtle); font-weight: 500; }
.do-status-row--active:hover { background: var(--sh-accent-subtle); }
.do-status-count { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 3px; background: var(--sh-bg-sunken); border: 1px solid var(--sh-border); color: var(--sh-text-tertiary); }
.do-status-count--active { background: var(--sh-accent-subtle); border-color: transparent; color: var(--sh-accent-text); }

.do-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 100%; }
.do-kanban-col { background: var(--sh-bg-sunken); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--sh-border); }
.do-kanban-col__title { font-size: 12px; font-weight: 500; color: var(--sh-text-secondary); }
.do-kanban-scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.do-kanban-scroll .grid-card { padding: 10px; margin-bottom: 6px; border-radius: 5px; }

.do-tl-label { font-size: 11px; font-weight: 500; color: var(--sh-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.do-tl-label::after { content: ''; flex: 1; height: 1px; background: var(--sh-border); }
.do-tl-row { border-left: 3px solid transparent; background: var(--sh-bg-surface); border-top: 1px solid var(--sh-border); border-right: 1px solid var(--sh-border); border-bottom: 1px solid var(--sh-border); border-radius: 0 5px 5px 0; padding: 8px 14px; }
.do-tl-row:hover { background: var(--sh-hover); }
.do-tl-row.avl { border-left-color: var(--sh-green-text); }
.do-tl-row.fil { border-left-color: var(--sh-amber-text); }
.do-tl-row.int { border-left-color: var(--sh-blue-text); }
.do-tl-row.can { border-left-color: var(--sh-red-text); }
.do-tl-row.exp { border-left-color: var(--sh-gray-text); }
.do-tl-row.cmp { border-left-color: var(--sh-green-text); }

.do-content .sh-empty { padding: 32px; }


/* ============================================================
   SECTION 7 — KPI cards & charts
   ============================================================ */
.kpi-card { text-align: center; padding: 16px; border-radius: 6px; background: var(--sh-bg-surface); border: 1px solid var(--sh-border); }
.kpi-card .kpi-value { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--sh-text-primary); letter-spacing: -0.02em; }
.kpi-card .kpi-label { font-size: 11px; color: var(--sh-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

.chart-container { background: var(--sh-bg-surface); border-radius: 6px; border: 1px solid var(--sh-border); padding: 20px; }
.chart-container .chart-title { font-weight: 600; font-size: 13px; color: var(--sh-text-primary); margin-bottom: 12px; }

/* Chart summary bar — shared across pages */
.chart-summary {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--sh-text-secondary);
    padding: 8px;
    background: var(--sh-bg-sunken);
    border-radius: var(--sh-radius-md);
    margin-bottom: 8px;
    flex-wrap: wrap;
}


/* ============================================================
   SECTION 10 — Scrollbars
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sh-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sh-text-tertiary); }


/* ============================================================
   SECTION 11 — Focus, selection, loading
   ============================================================ */
::selection {
    background: var(--sh-accent-subtle);
    color: var(--sh-accent-text);
}

*:focus-visible {
    outline: 2px solid var(--sh-focus-ring);
    outline-offset: 1px;
}

/* Chip rows wrapped for roving-tabindex navigation keep the layout they already had. */
.sh-chip-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Detail panel step controls ── */
.sh-detail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--sh-bg-sunken);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
}
.sh-detail-nav__hint {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--sh-text-tertiary);
}

/* ── Accessibility utilities ── */

/* Present to screen readers, absent to everyone else. Used by the live region that announces actions
   whose only other feedback is a visual state change. */
.sh-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Off-screen until focused: without it, Tab from the address bar walks the whole sidebar before
   reaching the page. */
.sh-skip-link {
    position: absolute;
    top: 8px;
    left: -9999px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-accent);
    border-radius: var(--sh-radius-md);
    box-shadow: var(--sh-shadow-md);
    color: var(--sh-text-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.sh-skip-link:focus,
.sh-skip-link:focus-visible { left: 8px; }

/* Rows and headers that behave like buttons but are not one; the ring has to be inset or the sticky
   header clips it. */
.sh-row-focusable:focus-visible,
.sh-th-sortable__btn:focus-visible {
    outline: 2px solid var(--sh-focus-ring);
    outline-offset: -2px;
}

.loading-progress circle { stroke: var(--sh-border); }
.loading-progress circle:last-child { stroke: var(--sh-accent); }

#blazor-error-ui {
    background: var(--sh-red-bg);
    color: var(--sh-red-text);
    border-top: 1px solid var(--sh-red-border);
}


/* Icons are now rendered via CSS mask-image in lucide-icons.css —
   no empty-element placeholder needed. */


/* ============================================================
   SECTION 13 — ShFilterChip
   ============================================================ */
.sh-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 28px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--sh-radius-full);
    border: 1px solid var(--sh-border);
    background: var(--sh-bg-surface);
    color: var(--sh-text-secondary);
    cursor: pointer;
    transition: all 120ms;
    white-space: nowrap;
    user-select: none;
    font-family: inherit;
    line-height: 1;
}
.sh-filter-chip:hover {
    border-color: var(--sh-border-strong);
    color: var(--sh-text-primary);
}
.sh-filter-chip--active {
    background: var(--sh-accent-subtle);
    border-color: var(--sh-accent-text);
    color: var(--sh-accent-text);
}
[data-theme="dark"] .sh-filter-chip--active {
    background: rgba(241, 15, 120, 0.15);
    border-color: var(--sh-accent);
    color: var(--sh-accent);
}
.sh-filter-chip__count {
    background: var(--sh-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 99px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
    line-height: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sh-filter-chip__count--muted {
    background: var(--sh-gray-bg);
    color: var(--sh-text-secondary);
}

/* ============================================================
   SECTION 13b — ShFilterHint
   ============================================================ */
.sh-filter-hint {
    font-size: 10px;
    line-height: 1.3;
    color: var(--sh-text-tertiary);
}

/* ============================================================
   SECTION 14 — Filter bar
   ============================================================ */
.sh-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.sh-filter-bar__search {
    flex: 1;
    min-width: 200px;
}
.sh-filter-bar__chips {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}
.sh-filter-bar__right {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
.sh-filter-bar__date {
    width: 140px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-family: inherit;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    outline: none;
    transition: border-color 120ms;
    cursor: pointer;
}
.sh-filter-bar__date:hover { border-color: var(--sh-border-strong); }
.sh-filter-bar__date:focus { border-color: var(--sh-focus-ring); box-shadow: 0 0 0 3px var(--sh-accent-subtle); }
.sh-filter-bar__sort {
    height: 28px;
    padding: 0 28px 0 10px;
    font-size: 12px;
    font-family: inherit;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    transition: border-color 120ms;
    min-width: 130px;
}
.sh-filter-bar__sort:hover { border-color: var(--sh-border-strong); }
.sh-filter-bar__sort:focus { border-color: var(--sh-focus-ring); box-shadow: 0 0 0 3px var(--sh-accent-subtle); }
@media (max-width: 768px) {
    .sh-filter-bar__search { flex: unset; width: 100%; }
    .sh-filter-bar__right { margin-left: 0; }
}

.sh-deeplink-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0 var(--sh-content-px, 24px);
    background: var(--sh-accent-subtle);
    border: 1px solid var(--sh-accent-border);
    border-radius: var(--sh-radius-md);
    font-size: 13px;
    color: var(--sh-accent-text);
}
.sh-deeplink-bar__label { font-weight: 500; }
.sh-deeplink-bar__clear {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sh-text-tertiary);
    padding: 2px;
    display: flex;
    border-radius: var(--sh-radius-sm);
}
.sh-deeplink-bar__clear:hover { color: var(--sh-text-primary); background: var(--sh-hover); }

.sh-stat-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin: 0 var(--sh-content-px, 24px);
    font-size: 12px;
    color: var(--sh-text-secondary);
    flex-wrap: wrap;
}
.sh-stat-bar__item strong { font-weight: 600; }
.sh-stat-bar__item--warning strong { color: var(--sh-amber-text); }
.sh-stat-bar__item--success strong { color: var(--sh-green-text); }
.sh-stat-bar__item--danger strong { color: var(--sh-red-text); }
.sh-stat-bar__item--info strong { color: var(--sh-blue-text); }
.sh-stat-bar__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sh-border-strong); flex-shrink: 0; }

/* ── 15. Slide Panel ────────────────────────────────── */
/* Scroll lock for modal overlays.

   The scrollport is .sh-content, not the document, so locking `body` did
   nothing: the page kept scrolling behind an open panel. Both the shared
   ShSlidePanel and the hand-rolled trip panel are covered. */
body:has(.sh-slide-panel-overlay),
body:has(.trip-detail-overlay),
body:has(.ts-filter-backdrop) { overflow: hidden; }

.sh-shell:has(.sh-slide-panel-overlay) .sh-content,
.sh-shell:has(.trip-detail-overlay) .sh-content,
.sh-shell:has(.ts-filter-backdrop) .sh-content { overflow: hidden; }
.sh-slide-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999; }
.sh-slide-panel {
    position: fixed; top: 0; right: 0;
    max-width: 95vw; height: 100vh;
    background: var(--sh-bg-surface);
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex; flex-direction: column; overflow: hidden;
}
.sh-slide-panel__loading { display: flex; align-items: center; justify-content: center; height: 100%; }
.sh-slide-panel__header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sh-border);
    flex: 0 0 auto;
}
.sh-slide-panel__title { margin: 0; font-weight: 700; flex: 1 1 auto; }
.sh-slide-panel__body {
    flex: 1 1 auto;
    overflow-y: auto; overflow-x: hidden;
    padding: 16px 20px 24px;
    display: flex; flex-direction: column; gap: 16px;
}

/* ============================================================
   SECTION 15 — Analytics panel components
   ============================================================ */
.sh-panel {
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
}
.sh-panel__header {
    display: flex;
    align-items: center;
    padding: 12px 16px 8px;
    gap: 8px;
}
.sh-panel__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--sh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}
.sh-panel__info {
    color: var(--sh-text-tertiary);
    cursor: help;
    opacity: 0;
    transition: opacity 150ms;
    display: flex; align-items: center;
}
.sh-panel:hover .sh-panel__info { opacity: 1; }
.sh-panel__info:hover { color: var(--sh-text-secondary); }
.sh-panel__body {
    padding: 0 16px 16px;
}

/* -- Stat panel -- */
.sh-panel--stat .sh-panel__body { display: flex; align-items: flex-end; gap: 16px; }
.sh-stat-panel__value { font-size: 28px; font-weight: 700; color: var(--sh-text-primary); line-height: 1; }
.sh-stat-panel__delta {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px; font-weight: 600; border-radius: var(--sh-radius-full);
    padding: 2px 8px;
}
.sh-stat-panel__delta--up { background: var(--sh-green-bg); color: var(--sh-green-text); }
.sh-stat-panel__delta--down { background: var(--sh-red-bg); color: var(--sh-red-text); }
.sh-stat-panel__sparkline { flex: 1; min-width: 80px; height: 32px; }

/* -- Bar panel -- */
.sh-bar-panel__container { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.sh-bar-panel__col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; }
.sh-bar-panel__bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.sh-bar-panel__bar { width: 100%; border-radius: var(--sh-radius-sm) var(--sh-radius-sm) 0 0; transition: height 400ms ease; min-height: 2px; }
.sh-bar-panel__label { font-size: 10px; color: var(--sh-text-tertiary); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }

/* -- Line panel -- */
.sh-line-panel__chart { width: 100%; height: 80px; }

/* -- Donut panel -- */
.sh-donut-panel__body { display: flex; align-items: center; gap: 20px; }
.sh-donut-panel__chart { width: 120px; height: 120px; flex-shrink: 0; }
.sh-donut-panel__legend { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sh-donut-panel__legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.sh-donut-panel__swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.sh-donut-panel__legend-label { flex: 1; color: var(--sh-text-secondary); }
.sh-donut-panel__legend-count { font-weight: 600; color: var(--sh-text-primary); }
.sh-donut-panel__legend-pct { color: var(--sh-text-tertiary); min-width: 36px; text-align: right; }

/* -- Funnel panel -- */
.sh-funnel__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sh-funnel__label { width: 80px; font-size: 11px; color: var(--sh-text-secondary); text-align: right; flex-shrink: 0; }
.sh-funnel__bar-track { flex: 1; height: 16px; background: var(--sh-bg-sunken); border-radius: var(--sh-radius-sm); overflow: hidden; }
.sh-funnel__bar { height: 100%; background: var(--sh-accent); border-radius: var(--sh-radius-sm); transition: width 400ms ease; }
.sh-funnel__count { font-size: 11px; font-weight: 600; color: var(--sh-text-primary); min-width: 32px; }
.sh-funnel__pct { font-size: 11px; color: var(--sh-text-tertiary); min-width: 36px; text-align: right; }

/* -- Heatmap panel -- */
.sh-heat-panel__grid { display: grid; gap: 1px; }
.sh-heat-panel__corner { grid-row: 1; grid-column: 1; }
.sh-heat-panel__hour-label { font-size: 10px; color: var(--sh-text-tertiary); text-align: center; grid-row: 1; line-height: 16px; }
.sh-heat-panel__day-label { font-size: 10px; color: var(--sh-text-tertiary); text-align: right; padding-right: 4px; grid-column: 1; line-height: 15px; }
.sh-heat-panel__cell { width: 15px; height: 15px; border-radius: 2px; }

/* -- Pill buttons (shared across pages) -- */
.sh-pill {
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--sh-border); background: var(--sh-bg-surface);
    color: var(--sh-text-secondary); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 150ms ease;
}
.sh-pill:hover { border-color: var(--sh-accent); color: var(--sh-accent); }
.sh-pill--active { background: var(--sh-accent); color: #fff; border-color: var(--sh-accent); }


/* ============================================================
   SECTION 20 — CSS Tooltip System
   ============================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    background: var(--sh-bg-elevated);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--sh-text-primary);
    box-shadow: var(--sh-shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms 200ms;
    z-index: 9999;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 6px;
}
[data-tooltip]:hover::after { opacity: 1; }
[data-tooltip=""]::after,
[data-tooltip]:active::after { display: none; }
[data-tooltip-pos="right"]::after {
    left: 100%; top: 50%;
    transform: translateY(-50%);
    margin-top: 0; margin-left: 8px;
}
[data-tooltip-pos="left"]::after {
    left: auto; right: 100%; top: 50%;
    transform: translateY(-50%);
    margin-top: 0; margin-right: 8px;
}
[data-tooltip-pos="top"]::after {
    left: 50%; top: auto; bottom: 100%;
    transform: translateX(-50%);
    margin-top: 0; margin-bottom: 6px;
}


/* ============================================================
   SECTION 21 — Collapsed sidebar
   ============================================================ */
.sh-sidebar--collapsed {
    width: var(--sh-sidebar-collapsed-width);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.sh-sidebar--collapsed::-webkit-scrollbar { display: none; }

.sh-sidebar--collapsed .sh-sidebar__logo {
    justify-content: center;
    padding: 0;
}
.sh-sidebar--collapsed .sh-sidebar__logo-text { opacity: 0; width: 0; overflow: hidden; }

.sh-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--sh-radius-sm);
    color: var(--sh-text-tertiary);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    flex-shrink: 0;
    padding: 0;
}
.sh-sidebar__toggle:hover {
    background: var(--sh-hover);
    color: var(--sh-text-primary);
}
.sh-sidebar--collapsed .sh-sidebar__toggle { display: none; }

.sh-sidebar__expand-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-tertiary);
    cursor: pointer;
    margin: 4px auto 0;
    transition: background 120ms, color 120ms;
}
.sh-sidebar__expand-btn:hover {
    background: var(--sh-hover);
    color: var(--sh-text-primary);
}
.sh-sidebar--collapsed .sh-sidebar__expand-btn { display: flex; }

/* Nav groups in collapsed mode */
.sh-sidebar--collapsed .sh-nav-group__label { opacity: 0; width: 0; height: 0; overflow: hidden; margin: 0; padding: 0; }
.sh-sidebar--collapsed .sh-nav-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sh-border);
}
.sh-sidebar--collapsed .sh-nav-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Nav items in collapsed mode */
.sh-sidebar--collapsed .sh-nav-item {
    justify-content: center;
    padding: 0;
    margin: 1px 4px;
    width: calc(100% - 8px);
    height: 36px;
    border-left: none;
    border-radius: var(--sh-radius-md);
}
.sh-sidebar--collapsed .sh-nav-item--active {
    border-left: none;
}
.sh-sidebar--collapsed .sh-nav-item__text { display: none; }
.sh-sidebar--collapsed .sh-nav-item__icon {
    width: 18px;
    height: 18px;
}
.sh-sidebar--collapsed .sh-nav-item__badge {
    position: absolute;
    top: 2px; right: 2px;
    font-size: 9px;
    padding: 0 4px;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
}

/* CSS tooltips are clipped by overflow — JS tooltip handles collapsed sidebar */
.sh-sidebar--collapsed [data-tooltip]::after { display: none; }

/* Bottom section in collapsed mode */
.sh-sidebar--collapsed .sh-sidebar__bottom {
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    gap: 8px;
}
.sh-sidebar--collapsed .sh-sidebar__user-info { opacity: 0; width: 0; overflow: hidden; }


/* ============================================================
   SECTION 22 — Topbar refinements
   ============================================================ */
.sh-topbar__divider {
    width: 1px;
    height: 20px;
    background: var(--sh-border);
    flex-shrink: 0;
}

.sh-topbar__group {
    display: flex;
    align-items: center;
    gap: 4px;
}


/* ============================================================
   SECTION 23 — Enhanced table (grid lines, truncation, resize)
   ============================================================ */
.sh-table--grid thead th,
.sh-table--grid tbody td {
    border-right: 1px solid var(--sh-border);
}
.sh-table--grid thead th:last-child,
.sh-table--grid tbody td:last-child {
    border-right: none;
}

.sh-table--truncate tbody td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sortable column header */
.sh-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 120ms;
}
.sh-th-sortable:hover { color: var(--sh-text-primary); }
/* Headers are focusable so they can be sorted from the keyboard; the ring is inset because a sticky
   header clips anything drawn outside its box. */
.sh-th-sortable:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: -2px; }
.sh-th-sortable__wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sh-th-sortable__icon {
    width: 14px; height: 14px;
    color: var(--sh-text-tertiary);
    flex-shrink: 0;
}
.sh-th-sortable__sort {
    width: 12px; height: 12px;
    color: var(--sh-text-tertiary);
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0;
    transition: opacity 120ms;
}
.sh-th-sortable:hover .sh-th-sortable__sort { opacity: 0.5; }
.sh-th-sortable--asc .sh-th-sortable__sort,
.sh-th-sortable--desc .sh-th-sortable__sort { opacity: 1; color: var(--sh-accent); }

/* Column filter dropdown in header */
.sh-th-filter {
    position: relative;
    display: inline-flex;
}
.sh-th-filter__btn {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border: none; background: transparent;
    border-radius: var(--sh-radius-sm);
    color: var(--sh-text-tertiary);
    cursor: pointer;
    padding: 0;
    transition: background 120ms, color 120ms;
    flex-shrink: 0;
}
.sh-th-filter__btn:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.sh-th-filter__btn--active { color: var(--sh-accent); }
.sh-th-filter__dropdown {
    position: absolute;
    top: 100%; left: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    box-shadow: var(--sh-shadow-md);
    padding: 4px;
    z-index: 100;
}
.sh-th-filter__option {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    font-size: 12px; font-weight: 500;
    color: var(--sh-text-secondary);
    border: none; background: transparent;
    border-radius: var(--sh-radius-sm);
    cursor: pointer; width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 80ms;
}
.sh-th-filter__option:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.sh-th-filter__option--active {
    background: var(--sh-accent-subtle);
    color: var(--sh-accent-text);
}

/* Column resize handle */
.sh-col-resize {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background 120ms;
}
.sh-col-resize:hover,
.sh-col-resize--dragging {
    background: var(--sh-accent);
}
.sh-table-wrap th { position: relative; }

/* Clickable table row */
.sh-table__row--clickable { cursor: pointer; }
.sh-table__row--selected {
    background: var(--sh-accent-subtle) !important;
}

/* ============================================================
   SECTION 26 — Popup separator
   ============================================================ */
.sh-popup__separator {
    height: 1px;
    background: var(--sh-border);
    margin: 4px 0;
}

/* ============================================================
   SECTION 27 — Sidebar collapse animation fix (#21)
   ============================================================ */
.sh-sidebar__logo-text,
.sh-nav-group__label,
.sh-nav-item__text,
.sh-sidebar__user-info {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 150ms ease;
}
.sh-sidebar--collapsed .sh-sidebar__logo-text,
.sh-sidebar--collapsed .sh-nav-group__label,
.sh-sidebar--collapsed .sh-sidebar__user-info {
    opacity: 0;
    width: 0;
    display: none;
    transition: opacity 100ms ease;
}

/* ============================================================
   SECTION 28a — Expandable nav item (sub-menu)
   ============================================================ */
.sh-nav-expandable__chevron {
    width: 14px;
    height: 14px;
    color: var(--sh-text-tertiary);
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.sh-nav-expandable--open .sh-nav-expandable__chevron {
    transform: rotate(180deg);
}
.sh-nav-expandable__children {
    padding-left: 16px;
}
.sh-nav-expandable__children .sh-nav-item {
    font-size: 13px;
    height: 30px;
}
.sh-sidebar--collapsed .sh-nav-expandable__chevron { display: none; }
.sh-sidebar--collapsed .sh-nav-expandable__children {
    padding-left: 0;
}
.sh-sidebar--collapsed .sh-nav-expandable__children .sh-nav-item {
    font-size: 14px;
    height: 36px;
}

/* ============================================================
   SECTION 28 — Animations & micro-interactions (#25)
   ============================================================ */
/* Opacity only — deliberately no transform.

   This animation runs with `fill-mode: both` on .sh-content and .sh-card, so its
   final keyframe persists indefinitely. A transform of any value, including
   translateY(0), makes the element a containing block for every fixed-position
   descendant. That trapped each overlay inside the scrolling content area: slide
   panels rendered short and clipped instead of filling the viewport, and
   click-outside backdrops covered only their card.

   If a slide-in is wanted again, put it on a leaf element that can never contain
   an overlay, not on a layout container. */
@keyframes sh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sh-fade-in-scale {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes sh-slide-in-right {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes sh-count-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.sh-content { animation: sh-fade-in 250ms ease-out both; }

.sh-card {
    animation: sh-fade-in 300ms ease-out both;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.sh-card:hover { box-shadow: var(--sh-shadow-md); }
[data-theme="dark"] .sh-card:hover { box-shadow: none; border-color: var(--sh-border-strong); }

.sh-table tbody tr {
    transition: background 120ms ease;
}

.sh-btn, .sh-icon-btn {
    transition: all 150ms ease;
}
.sh-btn:active, .sh-icon-btn:active {
    transform: scale(0.96);
}

.sh-badge, .sh-notification-dot {
    transition: transform 200ms ease;
}
.sh-notification-dot {
    animation: sh-count-pulse 600ms ease;
}

.sh-popup {
    animation: sh-fade-in-scale 150ms ease both;
}

@keyframes sh-slide-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.sh-slide-panel {
    animation: sh-slide-panel-in 300ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.sh-slide-panel__body {
    animation: sh-slide-in-right 250ms ease-out both;
}
[data-theme="dark"] .sh-slide-panel { box-shadow: none; border-left: 1px solid var(--sh-border-strong); }

@keyframes sh-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
.sh-toast--removing {
    animation: sh-toast-out 200ms ease-in forwards;
}

.sh-toggle input:checked + .sh-toggle__track {
    transition: background 200ms ease;
}
.sh-toggle__thumb {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sh-pill {
    transition: all 150ms ease;
}
.sh-pill:active { transform: scale(0.95); }

.sh-nav-item {
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.sh-spinner {
    animation: sh-spin 800ms linear infinite;
}
@keyframes sh-spin {
    to { transform: rotate(360deg); }
}

.sh-stat-panel__value {
    transition: color 300ms ease;
}

.sh-filter-chip {
    transition: all 150ms ease;
}
.sh-filter-chip:active { transform: scale(0.95); }

/* ── Icon size utilities ── */
.sh-icon--xs { width: 12px; height: 12px; }
.sh-icon--sm { width: 14px; height: 14px; }
.sh-icon--lg { width: 20px; height: 20px; }
.sh-icon--xl { width: 24px; height: 24px; }

/* ── Search input (shared component) ── */
.sh-search-input { position: relative; }
.sh-search-input__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--sh-text-tertiary); pointer-events: none; }
.sh-search-input__field { padding-left: 32px; height: var(--sh-control-height); font-size: 13px; }

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   ShSelect — custom listbox
   Replaces the native <select>, whose option list is drawn by the OS and so
   ignored every --sh-* token (a light popup on the dark theme). Heights match
   .sh-input-base exactly so a select sitting next to an input lines up.
   ────────────────────────────────────────────────────────────────────────── */
.sh-combo { position: relative; width: 100%; }

.sh-combo__control {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: var(--sh-control-height, 36px);
    padding: 0 10px 0 12px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.sh-combo__control:hover:not(:disabled) { border-color: var(--sh-border-strong); }
.sh-combo__control:focus-visible,
.sh-combo--open .sh-combo__control {
    border-color: var(--sh-accent);
    box-shadow: 0 0 0 3px var(--sh-accent-subtle);
}
.sh-combo__control:disabled { opacity: 0.5; cursor: not-allowed; background: var(--sh-bg-sunken); }
.sh-combo--error .sh-combo__control { border-color: var(--sh-red-border); }

.sh-combo__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sh-combo__value--placeholder { color: var(--sh-text-placeholder); }

.sh-combo__chevron {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--sh-text-tertiary);
    transition: transform 120ms;
}
.sh-combo--open .sh-combo__chevron { transform: rotate(180deg); }

/* The clear button is overlaid, so the room it needs is taken out of the value rather than out of
   the control: padding on the control shifts the chevron inwards too, and the two ended up on top
   of each other. */
.sh-combo__control--clearable .sh-combo__value { padding-right: 20px; }

.sh-combo__clear {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--sh-radius-full);
    color: var(--sh-text-tertiary);
    cursor: pointer;
    z-index: 1;
}
.sh-combo__clear:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.sh-combo__clear-icon { width: 12px; height: 12px; }

/* Panel sits above the field's siblings; filter bars are dense so it must not be clipped. */
.sh-combo__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-width: 320px;
    z-index: 1001;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    box-shadow: var(--sh-shadow-lg, 0 8px 24px rgba(0,0,0,0.18));
    overflow: hidden;
}

.sh-combo__search {
    position: relative;
    padding: 6px;
    border-bottom: 1px solid var(--sh-border);
}
.sh-combo__search-icon {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--sh-text-tertiary);
    pointer-events: none;
}
.sh-combo__search-input {
    width: 100%;
    height: 30px;
    padding: 0 8px 0 30px;
    background: var(--sh-bg-sunken);
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm, 4px);
    color: var(--sh-text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.sh-combo__search-input:focus { border-color: var(--sh-accent); }
.sh-combo__search-input::-webkit-search-cancel-button { appearance: none; }

.sh-combo__options { max-height: 260px; overflow-y: auto; padding: 4px; }

.sh-combo__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--sh-radius-sm, 4px);
    font-size: 13px;
    color: var(--sh-text-primary);
    cursor: pointer;
}
.sh-combo__option--highlighted { background: var(--sh-hover); }
.sh-combo__option--selected { color: var(--sh-accent-text); font-weight: 500; }
.sh-combo__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-combo__option-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--sh-accent); }

.sh-combo__empty {
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--sh-text-tertiary);
}

.sh-combo__backdrop { position: fixed; inset: 0; z-index: 1000; }

/* ──────────────────────────────────────────────────────────────────────────
   Control height parity

   Before this there were five different heights in play — buttons 36, small
   buttons 30, icon buttons 32, inputs 36, search fields 28 — so any toolbar
   mixing them had controls sitting a few pixels proud of their neighbours.
   Everything now resolves to one of two tiers, and a toolbar forces a single
   tier on its children so pages cannot reintroduce the mismatch by choosing
   a small button next to a default input.
   ────────────────────────────────────────────────────────────────────────── */
/* Every interactive control inside a toolbar snaps to the same height,
   whichever size variant the page asked for. */
.sh-filter-bar,
.sh-toolbar,
.sh-page-header__actions {
    --sh-toolbar-height: var(--sh-control-height);
}

.sh-filter-bar .sh-btn,
.sh-filter-bar .sh-btn--sm,
.sh-filter-bar .sh-icon-btn,
.sh-filter-bar .sh-input,
.sh-filter-bar .sh-input-base,
.sh-filter-bar .sh-select,
.sh-filter-bar .sh-combo__control,
.sh-filter-bar .sh-number-input,
.sh-filter-bar .sh-number-plain,
.sh-filter-bar .sh-search-input__field,
.sh-filter-bar .sh-datepicker__trigger input,
.sh-toolbar .sh-btn,
.sh-toolbar .sh-btn--sm,
.sh-toolbar .sh-icon-btn,
.sh-toolbar .sh-input,
.sh-toolbar .sh-input-base,
.sh-toolbar .sh-select,
.sh-toolbar .sh-combo__control,
.sh-toolbar .sh-number-input,
.sh-toolbar .sh-number-plain,
.sh-toolbar .sh-search-input__field,
.sh-toolbar .sh-datepicker__trigger input {
    height: var(--sh-toolbar-height);
}

.sh-filter-bar .sh-icon-btn,
.sh-toolbar .sh-icon-btn { width: var(--sh-toolbar-height); }

/* A toolbar row lays its controls out on a shared baseline. Fields wrapped in
   .sh-field carry a label, so align to the end rather than the centre or the
   labelled fields push their inputs out of line. */
.sh-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* .sh-field is the wrapper ShSelect/ShTextbox/ShNumberInput render; it must not
   stretch its child taller than the tier. */
.sh-filter-bar .sh-field,
.sh-toolbar .sh-field { margin-bottom: 0; }

/* Opt a toolbar down a tier when it sits inside a dense context such as a table
   row or a card header. */
.sh-toolbar--sm { --sh-toolbar-height: var(--sh-control-height-sm); }

/* Number input: native spin buttons are inconsistent across browsers and were
   rendering as an oversized glyph. Suppressed on the shared class, not only on
   .sh-number-input, so raw number inputs in pages match too. */
input[type="number"].sh-input,
input[type="number"].sh-input-base { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].sh-input::-webkit-inner-spin-button,
input[type="number"].sh-input::-webkit-outer-spin-button,
input[type="number"].sh-input-base::-webkit-inner-spin-button,
input[type="number"].sh-input-base::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* A bare number input still gets the shared field styling, so pages that use a
   raw <input type="number"> are not visibly different from ShNumberInput. */
.sh-number-plain {
    width: 100%;
    height: var(--sh-control-height);
    padding: 0 12px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color 120ms, box-shadow 120ms;
}
.sh-number-plain::-webkit-inner-spin-button,
.sh-number-plain::-webkit-outer-spin-button { appearance: none; margin: 0; }
.sh-number-plain::placeholder { color: var(--sh-text-placeholder); }
.sh-number-plain:hover { border-color: var(--sh-border-strong); }
.sh-number-plain:focus { border-color: var(--sh-accent); box-shadow: 0 0 0 3px var(--sh-accent-subtle); }

/* ──────────────────────────────────────────────────────────────────────────
   Checkbox parity
   Pages that use a raw <input type="checkbox"> were getting the browser default
   next to styled ShCheckboxes. This styles the bare element to match.
   ────────────────────────────────────────────────────────────────────────── */
input[type="checkbox"]:not(.sh-checkbox__input) {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1.5px solid var(--sh-border-strong);
    background: var(--sh-bg-surface);
    appearance: none;
    cursor: pointer;
    transition: all 120ms;
    display: grid;
    place-content: center;
    flex-shrink: 0;
    margin: 0;
}
input[type="checkbox"]:not(.sh-checkbox__input):checked {
    background: var(--sh-accent);
    border-color: var(--sh-accent);
}
input[type="checkbox"]:not(.sh-checkbox__input):checked::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid var(--sh-accent-fg, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
input[type="checkbox"]:not(.sh-checkbox__input):hover:not(:disabled) { border-color: var(--sh-accent); }
input[type="checkbox"]:not(.sh-checkbox__input):disabled { opacity: 0.5; cursor: not-allowed; }

/* ──────────────────────────────────────────────────────────────────────────
   Pinned side column

   A detail column beside a long list must stay on screen while the list
   scrolls. `position: sticky` alone is not enough: a sticky element taller
   than its scrollport cannot hold, so it scrolls until its bottom edge is
   reached and then leaves with the page. Capping the height and giving the
   column its own scroll keeps it pinned no matter how much content it holds.

   The scrollport here is `.sh-content`, not the window, so the offset is
   measured against the content area rather than the viewport top.
   ────────────────────────────────────────────────────────────────────────── */
.sh-pinned-panel {
    position: sticky;
    top: var(--sh-pinned-panel-top, 0.5rem);

    /* Never taller than the visible content area, so sticky always has room. */
    max-height: calc(100vh - var(--sh-topbar-height, 48px) - var(--sh-content-padding, 24px) * 2);
    overflow-y: auto;

    /* In a grid or flex row, items stretch by default and a stretched item has
       no travel to stick within. */
    align-self: start;

    /* The column scrolls independently; stop that chaining to the page behind
       it when it reaches its end. */
    overscroll-behavior: contain;
}

/* Scrollbar only while the pointer is over the column, so a pinned panel does
   not permanently show a second scrollbar next to the page's own. */
.sh-pinned-panel { scrollbar-width: thin; }
.sh-pinned-panel::-webkit-scrollbar { width: 8px; }
.sh-pinned-panel::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.sh-pinned-panel:hover::-webkit-scrollbar-thumb { background: var(--sh-border-strong); }

/* Stacked layouts have no second column to sit beside, so pinning would trap
   the content in a short scrolling box. */
@media (max-width: 1100px) {
    .sh-pinned-panel {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* ============================================================
   CRM
   ============================================================ */

.crm-centered {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.crm-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sh-space-md, 1rem);
}

.crm-board-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sh-text-primary);
    text-decoration: none;
}

.crm-board-title:hover { color: var(--sh-accent); }

.crm-board-meta,
.crm-board-conversion {
    display: flex;
    gap: 0.375rem;
    font-size: 12px;
    color: var(--sh-text-tertiary);
}

.crm-board-stats {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--sh-border);
}

.crm-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.crm-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sh-text-tertiary);
}

/* ── Kanban ────────────────────────────────────────────────── */

/* The board owns the height of the content area. `.sh-content` is the scrollport for every other
   page, so without this the columns' own scrollbars end up nested inside a second one and the page
   scrolls behind the board — three bars for one list. */
.crm-board-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.crm-board-page > .kanban,
.crm-board-page > .crm-centered {
    flex: 1 1 auto;
    min-height: 0;
}

.kanban {
    display: flex;
    gap: var(--sh-space-md, 1rem);
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.kanban__column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 300px;
    min-height: 0;
    max-height: 100%;
    padding: 0.75rem;
    background: var(--sh-bg-sunken);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    transition: border-color 120ms ease, background-color 120ms ease;
}

/* While a drag is in flight every column advertises itself, so the target is visible before the
   card is anywhere near it. */
.kanban--dragging .kanban__column {
    border-style: dashed;
    border-color: var(--sh-border-strong);
}

.kanban--dragging .kanban__column--dragover,
.kanban__column--dragover {
    border-style: solid;
    border-color: var(--sh-accent);
    background: var(--sh-accent-subtle);
}

.kanban__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kanban__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.kanban__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-text-primary);
    flex: 1 1 auto;
}

.kanban__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--sh-text-tertiary);
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    padding: 0 0.375rem;
}

.kanban__wip {
    font-size: 11px;
    color: var(--sh-text-secondary);
    background: var(--sh-amber-bg, #FEF3C7);
    border-radius: var(--sh-radius-sm);
    padding: 0.25rem 0.5rem;
}

.kanban__cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    min-height: 40px;
}

.kanban__card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding: 0.625rem;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    cursor: pointer;
}

.kanban__card:hover { border-color: var(--sh-accent); }

.kanban__card[draggable="true"]:active { cursor: grabbing; }

.kanban__card--dragging {
    opacity: 0.4;
    cursor: grabbing;
    /* The tilt is what tells you the card is in your hand rather than merely faded. */
    transform: rotate(3deg) scale(0.98);
}

.kanban__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.kanban__card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.kanban__card-org {
    font-size: 12px;
    color: var(--sh-text-secondary);
}

.kanban__card-labels,
.kanban__card-foot {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.kanban__label {
    width: 22px;
    height: 5px;
    border-radius: 3px;
    display: inline-block;
}

.kanban__due {
    font-size: 11px;
    color: var(--sh-text-tertiary);
}

.kanban__due--overdue {
    color: var(--sh-red-text, #B91C1C);
    font-weight: 600;
}

.kanban__owner { margin-left: auto; }

.kanban__empty {
    font-size: 12px;
    color: var(--sh-text-tertiary);
    text-align: center;
    padding: 0.75rem 0;
    margin: 0;
}

/* The insertion marker is what makes a drop target readable; without it the card simply teleports
   and the person cannot tell where it will land. A card-shaped gap reads as "it lands here" —
   a hairline reads as a divider. */
.kanban__insertion {
    flex: 0 0 auto;
    height: 44px;
    border: 1px dashed var(--sh-accent);
    border-radius: var(--sh-radius-md);
    background: var(--sh-accent-subtle);
}

.kanban__dropzone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--sh-accent-text);
    border: 1px dashed var(--sh-accent);
    border-radius: var(--sh-radius-md);
    background: var(--sh-accent-subtle);
    padding: 0.875rem 0;
    margin: 0;
}

/* ── CRM detail ────────────────────────────────────────────── */

.crm-detail-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.crm-detail-stage {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-text-secondary);
}

.crm-tab-body {
    display: flex;
    flex-direction: column;
    gap: var(--sh-space-md, 1rem);
    margin-top: 1rem;
}

.crm-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sh-space-md, 1rem);
}

.crm-panel-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-text-primary);
    margin: 0 0 0.5rem;
}

.crm-participant,
.crm-config-row,
.crm-contact-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.crm-participant-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.crm-participant-name,
.crm-config-name,
.crm-task-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.crm-config-name { flex: 1 1 auto; }

.crm-handle--retired {
    text-decoration: line-through;
    color: var(--sh-text-tertiary);
}

.crm-config-add {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.crm-defs {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    font-size: 13px;
}

.crm-defs dt {
    color: var(--sh-text-tertiary);
}

.crm-defs dd {
    margin: 0;
    color: var(--sh-text-primary);
}

.crm-label-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.crm-label-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}

.crm-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-timeline-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sh-border);
}

.crm-timeline-when {
    font-size: 12px;
    color: var(--sh-text-tertiary);
}

.crm-timeline-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.crm-timeline-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-text-primary);
    flex-wrap: wrap;
}

.crm-note-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.crm-note-edited {
    font-size: 11px;
    font-style: italic;
    color: var(--sh-text-tertiary);
}

.crm-note-body {
    margin: 0;
    font-size: 13px;
    color: var(--sh-text-primary);
    white-space: pre-wrap;
}

.crm-linked-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.crm-linked-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Revenue Sherpa cannot prove it retains is surfaced, never silently counted or dropped. */
.crm-pending-note {
    font-size: 12px;
    color: var(--sh-text-secondary);
    background: var(--sh-amber-bg, #FEF3C7);
    border: 1px solid var(--sh-amber-border, #FDE68A);
    border-radius: var(--sh-radius-md);
    padding: 0.625rem 0.75rem;
}

.crm-list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.crm-row--overdue td { background: var(--sh-red-bg, #FEF2F2); }

/* ---- Inline editing on the board canvas ---- */

.kanban__title--editable {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm);
    padding: 0.125rem 0.25rem;
    margin: -0.125rem -0.25rem;
    text-align: left;
    cursor: text;
    font: inherit;
}

.kanban__title--editable:hover {
    background: var(--sh-bg-surface);
    border-color: var(--sh-border);
}

.kanban__title-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-text-primary);
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-accent);
    border-radius: var(--sh-radius-sm);
    padding: 0.125rem 0.25rem;
    outline: none;
}

.kanban__title-input--chip {
    flex: 0 0 auto;
    width: 140px;
    font-weight: 500;
}

.kanban__column--ghost {
    background: none;
    border-style: dashed;
    flex: 0 0 220px;
}

.kanban__add,
.crm-chip-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--sh-text-secondary);
    background: none;
    border: 1px dashed var(--sh-border-strong);
    border-radius: var(--sh-radius-md);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.kanban__add:hover,
.crm-chip-add:hover {
    color: var(--sh-accent);
    border-color: var(--sh-accent);
    background: var(--sh-accent-subtle);
}

.crm-chip-add {
    padding: 0.25rem 0.625rem;
    font-size: 12px;
}

/* Sits at the foot of a column, so a card is added where it belongs rather than in whichever
   stage a modal happens to default to. */
.kanban__add--card {
    flex: 0 0 auto;
    justify-content: flex-start;
    border-style: solid;
    border-color: transparent;
    padding: 0.375rem 0.5rem;
    font-size: 12px;
}

.kanban__add--card:hover {
    border-style: solid;
    background: var(--sh-bg-surface);
}

/* ---- Dialog fields ---- */

.crm-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.crm-field-hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--sh-text-tertiary);
}

.crm-field-row {
    display: flex;
    gap: 0.5rem;
}

.crm-field-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* ---- Inline editing outside the board ---- */

.crm-inline {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm);
    padding: 0.125rem 0.25rem;
    margin: -0.125rem -0.25rem;
    cursor: text;
    font: inherit;
    color: inherit;
}

.crm-inline:hover {
    background: var(--sh-bg-surface);
    border-color: var(--sh-border);
}

.crm-inline-input {
    font: inherit;
    color: var(--sh-text-primary);
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-accent);
    border-radius: var(--sh-radius-sm);
    padding: 0.125rem 0.25rem;
    outline: none;
    min-width: 0;
}

.crm-inline-input--title { width: 100%; }

.crm-inline-hint {
    font-size: 11px;
    color: var(--sh-text-tertiary);
}

.crm-cell-inline {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* One-tap shortcut inside a dense row: visible enough to find, quiet enough not to compete
   with the row's own content. */
.crm-quick {
    appearance: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--sh-text-tertiary);
    background: none;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    padding: 0 0.25rem;
    cursor: pointer;
}

.crm-quick:hover {
    color: var(--sh-accent);
    border-color: var(--sh-accent);
    background: var(--sh-accent-subtle);
}

.crm-menu-name { flex: 1 1 auto; }

.crm-menu-check {
    color: var(--sh-accent);
    font-weight: 700;
}

.crm-label-pill__remove {
    appearance: none;
    background: none;
    border: none;
    padding: 0 0 0 0.25rem;
    margin: 0;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.crm-label-pill__remove:hover { opacity: 1; }

/* ── Envío Masivo: the irreversible action ── */
.eb-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid var(--sh-red-text);
    border-radius: var(--sh-radius-md);
    background: var(--sh-red-bg);
}

.crm-board-card { cursor: pointer; }

.kanban__label--named {
    width: auto;
    height: auto;
    padding: 1px 7px;
    border-radius: var(--sh-radius-full);
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    white-space: nowrap;
}


/* ============================================================
   SECTION 29 — Small screens
   ============================================================ */

/* The shell is a fixed-width sidebar next to a flexible column, which below roughly
   900px leaves the content under 150px wide. Under that width the sidebar becomes an
   off-canvas drawer and the topbar splits into two rows. */
.sh-nav-toggle { display: none; }

/* The drawer's mode switcher is markup the desktop layout already renders in the topbar. */
.sh-sidebar__modes { display: none; }

.sh-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    padding: 0;
}

/* The search stops fitting beside the mode switcher and the action icons well before the
   sidebar runs out of room, so it takes a second row of its own first. */
@media (max-width: 1200px) {
    .sh-topbar {
        height: auto;
        min-height: var(--sh-topbar-height);
        align-items: flex-start;
        padding: 8px var(--sh-content-padding);
    }
    .sh-topbar__left { flex-wrap: wrap; row-gap: 8px; }
}

@media (max-width: 900px) {
    /* 100vh on mobile browsers measures the viewport without the retracting URL bar, so the
       bottom of the shell sits under it until the user scrolls. */
    .sh-shell, .sh-main { height: 100dvh; }

    /* Hidden rather than merely translated away: an off-screen drawer still holds ~25 tab
       stops, so a keyboard user would page through an invisible nav before reaching the page. */
    .sh-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 60;
        width: min(280px, 84vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 200ms ease, visibility 200ms;
    }
    .sh-shell--nav-open .sh-sidebar {
        transform: none;
        visibility: visible;
        box-shadow: var(--sh-shadow-md);
    }
    .sh-shell--nav-open .sh-nav-backdrop { display: block; }

    /* Collapsing to an icon rail is a desktop affordance — the drawer is always full width,
       so the stored collapsed preference must not follow the admin onto a phone. */
    .sh-sidebar.sh-sidebar--collapsed { width: min(280px, 84vw); overflow: hidden; }
    .sh-sidebar.sh-sidebar--collapsed .sh-sidebar__logo { justify-content: flex-start; padding: 0 16px; }
    .sh-sidebar.sh-sidebar--collapsed .sh-sidebar__expand-btn { display: none; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-group { margin-top: 20px; padding-top: 0; border-top: none; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-group:first-child { margin-top: 0; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-item { justify-content: flex-start; padding: 0 12px; margin: 1px 4px; width: calc(100% - 8px); height: 34px; border-radius: var(--sh-radius-md); border-left: 2px solid transparent; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-item--active { border-left-color: var(--sh-accent); }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-item__badge { position: static; font-size: 11px; padding: 0 6px; min-width: 18px; height: 18px; line-height: 18px; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-expandable__chevron { display: block; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-expandable__children { padding-left: 16px; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-expandable__children .sh-nav-item { font-size: 13px; height: 30px; }
    .sh-sidebar.sh-sidebar--collapsed .sh-sidebar__bottom { flex-direction: row; align-items: center; padding: 12px; gap: 10px; }
    .sh-sidebar.sh-sidebar--collapsed .sh-sidebar__logo-text,
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-group__label,
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-item__text,
    .sh-sidebar.sh-sidebar--collapsed .sh-sidebar__user-info { display: block; opacity: 1; width: auto; }
    .sh-sidebar.sh-sidebar--collapsed .sh-sidebar__user-info { flex: 1; min-width: 0; }
    .sh-sidebar.sh-sidebar--collapsed .sh-nav-group__label { height: auto; padding: 0 16px; margin-bottom: 2px; }

    /* Menu and actions on the first row, search across the full width of the second. */
    .sh-topbar { flex-wrap: wrap; row-gap: 8px; }
    .sh-nav-toggle { display: flex; flex-shrink: 0; order: 1; }
    .sh-topbar__right { order: 2; margin-left: auto; }
    .sh-topbar__left { order: 3; flex: 1 0 100%; }
    .sh-topbar__divider { display: none; }

    /* The mode switcher moves into the drawer, where its labels still fit. */
    .sh-topbar .sh-mode-switcher { display: none; }
    .sh-sidebar__modes { display: block; padding: 8px 12px 0; }

    .sh-popup { max-width: calc(100vw - 24px); }

    .sh-page-header__row { flex-wrap: wrap; }
    .sh-page-header__actions { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    :root, [data-theme="dark"] { --sh-content-padding: 16px; }
    .sh-chart-card { padding: 14px; }
}

/* Pricing — calculator, matrix, taxonomy */

.pricing-calc,
.pricing-config {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 16px;
    align-items: start;
}

.pricing-taxonomy {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 16px;
    align-items: start;
}

.pricing-muted {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--sh-text-secondary);
}

.pricing-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--sh-text-tertiary);
}

.pricing-tiny {
    margin: 0.5rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--sh-text-tertiary);
}

.pricing-scope {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
}

.pricing-scope__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pricing-scope__count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--sh-text-tertiary);
}

.pricing-weight {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sh-border);
}

.pricing-weight .sh-weight-bar { grid-column: 1 / -1; }

.pricing-weight:last-child { border-bottom: none; }

.pricing-weight__name {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sh-text-primary);
}

.pricing-weight__name small {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--sh-text-tertiary);
}

.pricing-weight .sh-field { width: 104px; flex-shrink: 0; }

.pricing-weight__value {
    font-family: var(--sh-font-mono);
    font-size: 0.8125rem;
    color: var(--sh-text-secondary);
}

.pricing-weight--readonly { padding: 6px 0; }

.sh-weight-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sh-weight-bar__track {
    position: relative;
    flex: 1;
    min-width: 48px;
    height: 6px;
    background: var(--sh-bg-sunken);
    border-radius: 3px;
    overflow: hidden;
}

.sh-weight-bar__fill {
    height: 100%;
    background: var(--sh-accent);
    border-radius: 3px;
    transition: width 160ms ease;
}

/* Where the stored weight sits, so an unsaved edit reads as a move rather than a number. */
.sh-weight-bar__baseline {
    position: absolute;
    top: -1px;
    width: 2px;
    height: 8px;
    margin-left: -1px;
    background: var(--sh-text-tertiary);
}

.sh-weight-bar__value {
    flex-shrink: 0;
    min-width: 3.25rem;
    font-family: var(--sh-font-mono);
    font-size: 0.75rem;
    text-align: right;
    color: var(--sh-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sh-weight-bar__value--changed { color: var(--sh-accent-text); font-weight: 600; }

.sh-weight-bar--table { width: 8.5rem; margin-left: auto; }

/* The distance axis, drawn linearly so a bucket's width is its share of the road. */
.pricing-coverage {
    position: relative;
    height: 34px;
    background: var(--sh-bg-sunken);
    border-radius: 6px;
    overflow: hidden;
}

.pricing-coverage__segment {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font: inherit;
    color: inherit;
    background: var(--sh-accent-subtle);
    border: none;
    border-left: 2px solid var(--sh-accent);
    overflow: hidden;
    cursor: pointer;
}

.pricing-coverage__segment:hover { background: var(--sh-hover); }

.pricing-coverage__segment:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: -2px; }

.pricing-coverage__segment--open {
    background: repeating-linear-gradient(
        135deg,
        var(--sh-accent-subtle),
        var(--sh-accent-subtle) 6px,
        transparent 6px,
        transparent 12px);
}

.pricing-coverage__segment--dirty { border-left-color: var(--sh-text-tertiary); }

.pricing-coverage__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sh-accent-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-coverage__ticks {
    position: relative;
    height: 18px;
    margin-top: 2px;
}

.pricing-coverage__tick {
    position: absolute;
    font-family: var(--sh-font-mono);
    font-size: 0.625rem;
    color: var(--sh-text-tertiary);
    transform: translateX(-50%);
}

.pricing-coverage__tick--end { right: 0; left: auto; transform: none; }

/* A table whose cells are inputs needs to stop pretending its rows are text. */
.sh-table--inline td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }

.sh-table--inline .sh-field { margin: 0; }

.sh-table__row--dirty > td { background: var(--sh-accent-subtle); }

.sh-table__row--draft > td { background: var(--sh-bg-sunken); }

.pricing-weight-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-weight-cell .sh-field { width: 92px; flex-shrink: 0; }

.pricing-weight-cell .sh-weight-bar { flex: 1; min-width: 0; }

.pricing-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 4px;
}

.pricing-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--sh-bg-surface);
    border: 1.5px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    /* The glyph is a mask painted with currentColor, so the theme reaches it through here. */
    color: var(--sh-text-secondary);
    transition: border-color 120ms, background 120ms, color 120ms;
}

.pricing-icon:hover { border-color: var(--sh-border-strong); color: var(--sh-text-primary); }

.pricing-icon:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: 2px; }

/* Selection also has to survive being read rather than seen, so the chosen icon carries a mark of
   its own and not only the accent border. */
.pricing-icon[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sh-accent);
}

.pricing-icon { position: relative; }

.pricing-icon--on {
    border-color: var(--sh-accent);
    background: var(--sh-accent-subtle);
    color: var(--sh-accent);
}

/* Drawn as a mask rather than an <img>: the file's own stroke colour cannot follow the theme, so a
   dark glyph on the dark surface disappears. As a mask the colour is ours, the way every other icon
   in the console works. */
.pricing-icon__glyph {
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.pricing-bound--fixed {
    display: inline-block;
    padding: 4px 8px;
    font-family: var(--sh-font-mono);
    font-size: 0.75rem;
    color: var(--sh-text-tertiary);
    background: var(--sh-bg-sunken);
    border-radius: 4px;
}

/* The generator run on one real cell, so the fields above read off the arithmetic. */
.pricing-example {
    margin-top: 0.875rem;
    padding: 10px 12px;
    background: var(--sh-bg-sunken);
    border-radius: 6px;
}

.pricing-example__head {
    font-size: 0.75rem;
    color: var(--sh-text-secondary);
    margin-bottom: 6px;
}

.pricing-example__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-family: var(--sh-font-mono);
    font-size: 0.75rem;
    color: var(--sh-text-primary);
    line-height: 1.9;
}

.pricing-example__row + .pricing-example__row {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--sh-border);
}

.pricing-example__op { color: var(--sh-text-tertiary); }

.pricing-example__note {
    font-family: var(--sh-font-sans, inherit);
    font-size: 0.6875rem;
    color: var(--sh-text-tertiary);
}

.pricing-example__band { color: var(--sh-accent-text); }

.pricing-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0.75rem;
    padding: 8px 10px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--sh-text-secondary);
    background: var(--sh-accent-subtle);
    border: 1px dashed var(--sh-accent);
    border-radius: var(--sh-radius-md);
}

.pricing-matrix-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--sh-border);
    border-bottom: 1px solid var(--sh-border);
}

.pricing-matrix {
    width: 100%;
    border-collapse: collapse;
}

.pricing-matrix thead th {
    padding: 8px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sh-text-tertiary);
    background: var(--sh-bg-sunken);
    white-space: nowrap;
}

.pricing-matrix thead th:first-child { text-align: left; }

.pricing-matrix tbody th {
    padding: 8px 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    color: var(--sh-text-primary);
    white-space: nowrap;
}

.pricing-matrix tbody th small {
    display: block;
    font-family: var(--sh-font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--sh-text-tertiary);
}

.pricing-matrix td { padding: 3px 4px; }

.pricing-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 46px;
    padding: 6px 8px;
    font: inherit;
    color: var(--sh-text-primary);
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}

.pricing-cell:hover {
    border-color: var(--sh-accent);
    background: var(--sh-hover);
}

.pricing-cell:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: 1px; }

.pricing-cell__range {
    font-family: var(--sh-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.pricing-cell__state {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--sh-text-tertiary);
    min-height: 0.625rem;
}

.pricing-cell--manual {
    background: var(--sh-purple-bg);
    border-color: var(--sh-purple-border);
}

.pricing-cell--manual .pricing-cell__state { color: var(--sh-purple-text); }

.pricing-cell--capped {
    background: var(--sh-amber-bg);
    border-color: var(--sh-amber-border);
}

.pricing-cell--capped .pricing-cell__state { color: var(--sh-amber-text); }

.pricing-cell--preview {
    border-style: dashed;
    border-color: var(--sh-accent);
}

.pricing-cell--preview .pricing-cell__state { color: var(--sh-accent-text); }

/* No bracket row exists for this pair, so the amount shown is only what the generator would write:
   a carrier publishing here is refused. Loud on purpose. */
.pricing-cell--missing {
    background: var(--sh-red-bg);
    border-color: var(--sh-red-border);
    border-style: dashed;
}

.pricing-cell--missing .pricing-cell__range { color: var(--sh-red-text); }
.pricing-cell--missing .pricing-cell__state { color: var(--sh-red-text); }

.pricing-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.6875rem;
    color: var(--sh-text-tertiary);
}

.pricing-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pricing-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--sh-border);
}

.pricing-swatch--manual { background: var(--sh-purple-bg); border-color: var(--sh-purple-border); }
.pricing-swatch--capped { background: var(--sh-amber-bg); border-color: var(--sh-amber-border); }
.pricing-swatch--preview { background: transparent; border-style: dashed; border-color: var(--sh-accent); }
.pricing-swatch--missing { background: var(--sh-red-bg); border-style: dashed; border-color: var(--sh-red-border); }

.pricing-suggest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0.75rem;
    padding: 8px 10px;
    font-size: 0.8125rem;
    color: var(--sh-text-secondary);
    background: var(--sh-bg-sunken);
    border-radius: var(--sh-radius-md);
}

/* A quote is in flight, so what is on screen answers the previous parameters. */
.pricing-stale {
    opacity: 0.45;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.pricing-hero {
    padding: 20px;
    text-align: center;
    background: var(--sh-accent-subtle);
    border: 1px solid var(--sh-accent);
    border-radius: var(--sh-radius-lg);
}

.pricing-hero__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sh-accent-text);
}

.pricing-hero__value {
    margin: 6px 0 4px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sh-text-primary);
}

.pricing-hero__sub {
    font-size: 0.75rem;
    color: var(--sh-text-secondary);
}

.pricing-chain__row {
    display: grid;
    grid-template-columns: 1fr auto 7rem;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--sh-border);
}

.pricing-chain__row:last-child { border-bottom: none; }

.pricing-chain__row--total {
    font-weight: 600;
    border-top: 1px solid var(--sh-border-strong);
    border-bottom: none;
}

.pricing-chain__note {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--sh-text-tertiary);
}

.pricing-chain__factor {
    font-family: var(--sh-font-mono);
    font-size: 0.75rem;
    color: var(--sh-accent-text);
    white-space: nowrap;
}

.pricing-chain__amount {
    font-family: var(--sh-font-mono);
    text-align: right;
    white-space: nowrap;
}

.pricing-money {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.pricing-money td {
    padding: 7px 0;
    border-bottom: 1px solid var(--sh-border);
}

.pricing-money td:last-child {
    font-family: var(--sh-font-mono);
    text-align: right;
    white-space: nowrap;
}

.pricing-money__total td {
    font-weight: 600;
    border-bottom: none;
    border-top: 1px solid var(--sh-border-strong);
}

.pricing-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sh-border);
}

.pricing-list__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--sh-border);
}

.pricing-list__row .pricing-list__item { border-bottom: none; }

.pricing-list__order {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding-right: 10px;
}

.pricing-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    font: inherit;
    text-align: left;
    color: var(--sh-text-primary);
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--sh-border);
    cursor: pointer;
}

.pricing-list__item:hover { background: var(--sh-hover); }

.pricing-list__item:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: -2px; }

.pricing-list__item--active {
    background: var(--sh-active);
    border-left-color: var(--sh-accent);
}

.pricing-list__item--muted .pricing-list__name { color: var(--sh-text-tertiary); }

.pricing-list__main { flex: 1; min-width: 0; }

.pricing-list__name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.pricing-list__meta {
    font-size: 0.6875rem;
    color: var(--sh-text-tertiary);
}

.pricing-move {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--sh-text-secondary);
    background: var(--sh-bg-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
}

.pricing-move:hover:not(:disabled) { border-color: var(--sh-accent); color: var(--sh-accent-text); }
.pricing-move:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: 2px; }
.pricing-move:disabled { opacity: 0.4; cursor: default; }

.pricing-help h4 {
    margin: 20px 0 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.pricing-help h4:first-child { margin-top: 0; }

.pricing-help p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--sh-text-secondary);
}

.pricing-help__formula {
    margin: 10px 0;
    padding: 10px 12px;
    font-family: var(--sh-font-mono);
    font-size: 0.75rem;
    text-align: center;
    color: var(--sh-text-primary);
    background: var(--sh-bg-sunken);
    border-radius: var(--sh-radius-md);
}

@media (max-width: 1200px) {
    .pricing-calc,
    .pricing-config,
    .pricing-taxonomy { grid-template-columns: 1fr; }
}