/* ───────────────────────────────────────────────────────────────────────
   surfaces.css - Pillar 8 theme primitives
   ---------------------------------------------------------------------
   Canonical --theme-* token registry consumed by every SurfaceRunner
   kind component. Tenants override these via Tenant.CSS (the brand
   JSON's CSS field overrides the :root block downstream).

   color-mix() in oklch derives hover / sunken / on-color variants from
   the primary so a tenant only has to author one brand color and the
   whole palette cascades. Falls back to direct values on older browsers
   that don't support color-mix (graceful degradation).
   ─────────────────────────────────────────────────────────────────── */

:root {
    /* ── Brand colors (tenant-overridable via Tenant.CSS) ────────── */
    --theme-primary:       #1e6091;
    --theme-accent:        #4dabf7;
    --theme-info:          #3b82f6;
    --theme-success:       #16a34a;
    --theme-warning:       #d97706;
    --theme-danger:        #dc2626;

    /* ── Surfaces (tinted-neutral cascade) ───────────────────────── */
    --theme-surface:           #ffffff;
    --theme-surface-elevated:  #fafafa;
    --theme-surface-sunken:    #f4f4f5;
    --theme-background:        #f8fafc;
    --theme-background-subtle: #eef2f6;

    /* ── Text ───────────────────────────────────────────────────── */
    --theme-text:              #0f172a;
    --theme-text-muted:        #64748b;
    --theme-text-on-primary:   #ffffff;

    /* ── Border + radius + shadow ───────────────────────────────── */
    --theme-border:            #e2e8f0;
    --theme-border-strong:     #cbd5e1;
    --theme-radius-sm:         4px;
    --theme-radius-md:         8px;
    --theme-radius-lg:         12px;
    --theme-radius-pill:       9999px;

    /* Brand-tinted shadows. color-mix takes primary + transparent so
       the tint blends in without leaving a stark colored cast. */
    --theme-shadow-sm: 0 1px 3px color-mix(in oklch, var(--theme-primary), transparent 92%);
    --theme-shadow-md: 0 4px 12px color-mix(in oklch, var(--theme-primary), transparent 85%);
    --theme-shadow-lg: 0 12px 32px color-mix(in oklch, var(--theme-primary), transparent 80%);

    /* ── Spacing tokens (8pt grid) ──────────────────────────────── */
    --theme-space-1: 4px;
    --theme-space-2: 8px;
    --theme-space-3: 12px;
    --theme-space-4: 16px;
    --theme-space-5: 24px;
    --theme-space-6: 32px;

    /* ── Animation tokens ───────────────────────────────────────── */
    --theme-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --theme-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───────────────────────────────────────────────────────────────────
   Hash-color tile palette (Wave 1: tiles kind, future: kanban)
   8-color WP-style flat palette. Hash an item's stable key (e.g.
   InternalName) into one of these to keep colors stable across
   reloads. The CSS classes are picked by C# via HashColorBadge.
   ─────────────────────────────────────────────────────────────── */

.tile-color-blue    { background: #1e6091; color: #ffffff; }
.tile-color-cyan    { background: #0e7490; color: #ffffff; }
.tile-color-teal    { background: #0f766e; color: #ffffff; }
.tile-color-green   { background: #166534; color: #ffffff; }
.tile-color-orange  { background: #c2410c; color: #ffffff; }
.tile-color-red     { background: #b91c1c; color: #ffffff; }
.tile-color-magenta { background: #be185d; color: #ffffff; }
.tile-color-purple  { background: #6b21a8; color: #ffffff; }

/* ───────────────────────────────────────────────────────────────────
   SurfaceRunner shell
   ─────────────────────────────────────────────────────────────── */

.surface-runner {
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-5);
    padding: var(--theme-space-4);
    background: var(--theme-background);
    color: var(--theme-text);
    min-height: 100%;
}

.surface-runner__empty {
    color: var(--theme-text-muted);
    text-align: center;
    padding: var(--theme-space-6);
    font-size: 0.9rem;
}

.surface-runner__loading {
    color: var(--theme-text-muted);
    padding: var(--theme-space-5);
    text-align: center;
}

.surface-runner__error {
    background: color-mix(in oklch, var(--theme-danger), transparent 92%);
    color: var(--theme-danger);
    border: 1px solid color-mix(in oklch, var(--theme-danger), transparent 80%);
    border-radius: var(--theme-radius-md);
    padding: var(--theme-space-4);
}

/* ───────────────────────────────────────────────────────────────────
   Card kind primitive (Wave 1)
   ─────────────────────────────────────────────────────────────── */

.surface-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    padding: var(--theme-space-4) var(--theme-space-5);
    box-shadow: var(--theme-shadow-sm);
    transition: box-shadow var(--theme-transition-fast);
}

.surface-card:hover {
    box-shadow: var(--theme-shadow-md);
}

.surface-card--hero {
    background: linear-gradient(135deg,
        var(--theme-primary),
        color-mix(in oklch, var(--theme-primary), var(--theme-accent) 35%));
    color: var(--theme-text-on-primary);
    border: none;
    padding: var(--theme-space-5) var(--theme-space-6);
}

.surface-card--panel {
    background: var(--theme-surface);
    border-left: 3px solid var(--theme-primary);
}

.surface-card--billboard {
    background: var(--theme-surface);
    border: none;
    border-radius: var(--theme-radius-lg);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--theme-shadow-md);
}

.surface-card--billboard .surface-card__hd {
    background: var(--theme-primary);
    color: var(--theme-text-on-primary);
    padding: var(--theme-space-5) var(--theme-space-6);
}

.surface-card--billboard .surface-card__body {
    padding: var(--theme-space-4) var(--theme-space-6);
}

.surface-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
    margin: 0 0 var(--theme-space-3) 0;
}

.surface-card--hero .surface-card__title,
.surface-card--billboard .surface-card__hd .surface-card__title {
    color: color-mix(in oklch, var(--theme-text-on-primary), transparent 25%);
}

.surface-card__fields {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: var(--theme-space-2) var(--theme-space-4);
    align-items: baseline;
}

.surface-card__label {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.surface-card__value {
    color: inherit;
    font-size: 0.95rem;
    word-break: break-word;
}

.surface-card__value--hero {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Mobile-narrow tweak: stack label over value below 480px so we don't
   pinch the value column to nothing. */
@media (max-width: 480px) {
    .surface-card__fields {
        grid-template-columns: 1fr;
        gap: var(--theme-space-1) 0;
    }
    .surface-card__label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
}

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Tile (single) + Tiles (grid)
   ─────────────────────────────────────────────────────────────── */

.surface-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--theme-space-4) var(--theme-space-5);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-sm);
    transition: transform var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
    color: var(--theme-text-on-primary);
    min-height: 96px;
}

.surface-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-md);
}

.surface-tile:active {
    transform: translateY(0);
}

.surface-tile--sq   { aspect-ratio: 1 / 1; max-width: 200px; }
.surface-tile--wide { aspect-ratio: 2 / 1; max-width: 420px; }
.surface-tile--hero { aspect-ratio: 16 / 7; width: 100%; padding: var(--theme-space-5) var(--theme-space-6); }

/* Accent variants (used when themeAccent != auto-hash) */
.surface-tile--primary { background: var(--theme-primary); }
.surface-tile--accent  { background: var(--theme-accent); }
.surface-tile--info    { background: var(--theme-info); }
.surface-tile--success { background: var(--theme-success); }
.surface-tile--warning { background: var(--theme-warning); }
.surface-tile--danger  { background: var(--theme-danger); }

.surface-tile__count {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.0;
    margin-bottom: 4px;
}

.surface-tile--hero .surface-tile__count {
    font-size: 3.5rem;
}

.surface-tile__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: auto;
    line-height: 1.2;
}

.surface-tile__subtitle {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 2px;
}

.surface-tile__caption {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 4px;
}

.surface-tiles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--theme-space-3);
    margin-top: var(--theme-space-3);
}

@media (min-width: 768px) {
    .surface-tiles__grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Table
   ─────────────────────────────────────────────────────────────── */

.surface-table__scroll {
    margin: var(--theme-space-3) calc(var(--theme-space-5) * -1) 0;
    padding: 0 var(--theme-space-5);
    overflow-x: auto;
}

.surface-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.surface-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted);
    padding: var(--theme-space-2) var(--theme-space-3);
    border-bottom: 1px solid var(--theme-border-strong);
    white-space: nowrap;
    background: var(--theme-background-subtle);
}

.surface-table td {
    padding: var(--theme-space-3);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text);
    vertical-align: top;
}

.surface-table tbody tr:hover td {
    background: var(--theme-background-subtle);
}

.surface-table tbody tr:last-child td {
    border-bottom: none;
}

.surface-table__null {
    color: var(--theme-text-muted);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Timeline
   ─────────────────────────────────────────────────────────────── */

.surface-timeline__group-header {
    margin-top: var(--theme-space-4);
    padding: var(--theme-space-2) var(--theme-space-3);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text);
    background: var(--theme-background-subtle);
    border-left: 3px solid var(--theme-primary);
    border-radius: var(--theme-radius-sm);
}

.surface-timeline__scroll {
    margin: var(--theme-space-2) calc(var(--theme-space-5) * -1) 0;
    padding: 0 var(--theme-space-5);
    overflow-x: auto;
}

.surface-timeline {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.surface-timeline__row-header {
    text-align: left;
    font-weight: 600;
    padding: var(--theme-space-2) var(--theme-space-3);
    white-space: nowrap;
    color: var(--theme-text);
    background: var(--theme-surface-sunken);
    position: sticky;
    left: 0;
    z-index: 1;
}

.surface-timeline__head {
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--theme-space-2);
    border-bottom: 2px solid var(--theme-border);
}

.surface-timeline__cell {
    padding: var(--theme-space-2) var(--theme-space-3);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text);
    text-align: center;
    white-space: nowrap;
    border-left: 3px solid transparent;
    font-variant-numeric: tabular-nums;
}

/* Event color stripes (left border on each cell + color hint on head) */
.surface-timeline__head--neutral  { color: var(--theme-text-muted); }
.surface-timeline__head--info     { color: var(--theme-info); }
.surface-timeline__head--success  { color: var(--theme-success); }
.surface-timeline__head--primary  { color: var(--theme-primary); }
.surface-timeline__head--warning  { color: var(--theme-warning); }
.surface-timeline__head--danger   { color: var(--theme-danger); }
.surface-timeline__head--muted    { color: var(--theme-text-muted); }

.surface-timeline__cell--neutral  { border-left-color: var(--theme-border-strong); }
.surface-timeline__cell--info     { border-left-color: var(--theme-info); }
.surface-timeline__cell--success  { border-left-color: var(--theme-success); }
.surface-timeline__cell--primary  { border-left-color: var(--theme-primary); }
.surface-timeline__cell--warning  { border-left-color: var(--theme-warning); }
.surface-timeline__cell--danger   { border-left-color: var(--theme-danger); }
.surface-timeline__cell--muted    { border-left-color: var(--theme-border); }

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Picker strip
   ─────────────────────────────────────────────────────────────── */

.surface-picker-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--theme-space-2);
    margin-top: var(--theme-space-3);
}

.surface-picker-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--theme-radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    transition: transform var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
    color: var(--theme-text-on-primary);
    user-select: none;
}

.surface-picker-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-sm);
}

.surface-picker-chip:active {
    transform: translateY(0);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Metrics strip
   ─────────────────────────────────────────────────────────────── */

.surface-metrics-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--theme-space-3);
    margin-top: var(--theme-space-3);
}

.surface-metric {
    background: var(--theme-surface-sunken);
    border-radius: var(--theme-radius-md);
    padding: var(--theme-space-3) var(--theme-space-4);
    border-left: 3px solid var(--theme-primary);
}

.surface-metric__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted);
}

.surface-metric__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text);
    line-height: 1.1;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.surface-metric__trend {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 2px;
}

.surface-metric__trend--neutral { color: var(--theme-text-muted); }
.surface-metric__trend--info    { color: var(--theme-info); }
.surface-metric__trend--success { color: var(--theme-success); }
.surface-metric__trend--warning { color: var(--theme-warning); }
.surface-metric__trend--danger  { color: var(--theme-danger); }

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Gauge
   ─────────────────────────────────────────────────────────────── */

.surface-gauge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--theme-space-1);
    margin-top: var(--theme-space-2);
}

.surface-gauge__icon {
    font-size: 1.5rem;
    color: var(--theme-text-muted);
}

.surface-gauge__main {
    display: flex;
    align-items: baseline;
    gap: var(--theme-space-3);
}

.surface-gauge__value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.0;
    font-variant-numeric: tabular-nums;
}

.surface-gauge__value--primary  { color: var(--theme-primary); }
.surface-gauge__value--accent   { color: var(--theme-accent); }
.surface-gauge__value--success  { color: var(--theme-success); }
.surface-gauge__value--warning  { color: var(--theme-warning); }
.surface-gauge__value--danger   { color: var(--theme-danger); }

.surface-gauge__trend {
    font-size: 1rem;
    font-weight: 600;
}

.surface-gauge__trend--neutral { color: var(--theme-text-muted); }
.surface-gauge__trend--info    { color: var(--theme-info); }
.surface-gauge__trend--success { color: var(--theme-success); }
.surface-gauge__trend--warning { color: var(--theme-warning); }
.surface-gauge__trend--danger  { color: var(--theme-danger); }

.surface-gauge__subtitle {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - External link card
   ─────────────────────────────────────────────────────────────── */

.surface-external {
    transition: box-shadow var(--theme-transition-fast), border-color var(--theme-transition-fast);
}

.surface-external:hover {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-shadow-md);
}

.surface-external__icon {
    font-size: 1.5rem;
    color: var(--theme-primary);
}

.surface-external__title {
    font-weight: 600;
    color: var(--theme-text);
}

.surface-external__url {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-top: 2px;
}

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Notification banner
   ─────────────────────────────────────────────────────────────── */

.surface-notification {
    display: flex;
    align-items: flex-start;
    gap: var(--theme-space-3);
    padding: var(--theme-space-3) var(--theme-space-4);
    border-radius: var(--theme-radius-md);
    border-left: 4px solid;
}

.surface-notification--info {
    background: color-mix(in oklch, var(--theme-info), transparent 92%);
    border-left-color: var(--theme-info);
    color: var(--theme-text);
}

.surface-notification--success {
    background: color-mix(in oklch, var(--theme-success), transparent 92%);
    border-left-color: var(--theme-success);
    color: var(--theme-text);
}

.surface-notification--warning {
    background: color-mix(in oklch, var(--theme-warning), transparent 92%);
    border-left-color: var(--theme-warning);
    color: var(--theme-text);
}

.surface-notification--danger {
    background: color-mix(in oklch, var(--theme-danger), transparent 92%);
    border-left-color: var(--theme-danger);
    color: var(--theme-text);
}

.surface-notification__icon {
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.surface-notification--info    .surface-notification__icon { color: var(--theme-info); }
.surface-notification--success .surface-notification__icon { color: var(--theme-success); }
.surface-notification--warning .surface-notification__icon { color: var(--theme-warning); }
.surface-notification--danger  .surface-notification__icon { color: var(--theme-danger); }

.surface-notification__content {
    flex: 1;
}

.surface-notification__title {
    font-weight: 600;
    margin-bottom: 2px;
}

.surface-notification__body {
    font-size: 0.9rem;
    line-height: 1.4;
}

.surface-notification__action {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 4px 12px;
    border-radius: var(--theme-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.surface-notification__action:hover {
    background: color-mix(in oklch, currentColor, transparent 90%);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 2 - Empty state
   ─────────────────────────────────────────────────────────────── */

.surface-empty-state {
    text-align: center;
    padding: var(--theme-space-6) var(--theme-space-5);
}

.surface-empty-state__icon {
    font-size: 3rem;
    margin-bottom: var(--theme-space-3);
    display: block;
}

.surface-empty-state__icon--muted   { color: var(--theme-text-muted); }
.surface-empty-state__icon--primary { color: var(--theme-primary); }
.surface-empty-state__icon--warning { color: var(--theme-warning); }
.surface-empty-state__icon--danger  { color: var(--theme-danger); }

.surface-empty-state__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text);
    margin: 0 0 var(--theme-space-2);
}

.surface-empty-state__body {
    color: var(--theme-text-muted);
    margin: 0 0 var(--theme-space-4);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.surface-empty-state__cta {
    background: var(--theme-primary);
    color: var(--theme-text-on-primary);
    border: none;
    padding: 8px 20px;
    border-radius: var(--theme-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
}

.surface-empty-state__cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 3 - Action bar + shared action button (used by ActionBar + HeroBanner CTAs)
   ─────────────────────────────────────────────────────────────── */

.surface-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--theme-space-2);
    margin: 0;
}

.surface-action-bar--left   { justify-content: flex-start; }
.surface-action-bar--center { justify-content: center; }
.surface-action-bar--right  { justify-content: flex-end; }

.surface-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--theme-radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--theme-transition-fast), box-shadow var(--theme-transition-fast), background-color var(--theme-transition-fast);
    border: 1px solid transparent;
    line-height: 1;
}

.surface-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-sm);
}

.surface-action-btn:active {
    transform: translateY(0);
}

.surface-action-btn i {
    font-size: 1rem;
}

.surface-action-btn--default {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border-strong);
}

.surface-action-btn--default:hover {
    background: var(--theme-surface-elevated);
    border-color: var(--theme-primary);
}

.surface-action-btn--primary {
    background: var(--theme-primary);
    color: var(--theme-text-on-primary);
}

.surface-action-btn--accent {
    background: var(--theme-accent);
    color: var(--theme-text-on-primary);
}

.surface-action-btn--success {
    background: var(--theme-success);
    color: var(--theme-text-on-primary);
}

.surface-action-btn--danger {
    background: var(--theme-danger);
    color: var(--theme-text-on-primary);
}

.surface-action-btn--ghost {
    background: transparent;
    color: inherit;
    border-color: color-mix(in oklch, currentColor, transparent 70%);
}

.surface-action-btn--ghost:hover {
    background: color-mix(in oklch, currentColor, transparent 92%);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 3 - Hero banner
   ─────────────────────────────────────────────────────────────── */

.surface-hero-banner {
    position: relative;
    border-radius: var(--theme-radius-lg);
    overflow: hidden;
    min-height: 220px;
    padding: var(--theme-space-6);
    color: var(--theme-text-on-primary);
    background-color: var(--theme-primary);
    background-image: linear-gradient(135deg,
        var(--theme-primary),
        color-mix(in oklch, var(--theme-primary), var(--theme-accent) 35%));
    background-size: cover;
    background-position: center;
    box-shadow: var(--theme-shadow-md);
}

/* When an imageUrl is supplied, the linear-gradient inline-style is
   omitted and the bg image takes over; overlay variants add a scrim
   so the text stays legible. */
.surface-hero-banner--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.surface-hero-banner--light::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.75) 100%);
    pointer-events: none;
}

.surface-hero-banner--light {
    color: var(--theme-text);
}

.surface-hero-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-2);
    justify-content: flex-end;
    height: 100%;
    min-height: 180px;
}

/* Tagline + subtitle inherit from the .surface-hero-banner wrapper so
   they track the theme (--theme-text-on-primary on dark/default
   overlay, --theme-text on light overlay).

   Title uses --theme-accent explicitly — it's the headline, the
   accent color is what the tenant picked for "stand out against
   the primary" chrome, and the global
   "h1, h2, ... { color: var(--theme-text-emphasis); }" rule in
   root.css otherwise wins on specificity and the title renders
   near-black on top of the primary gradient. */

.surface-hero-banner__tagline {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    margin-bottom: 4px;
    color: inherit;
}

.surface-hero-banner__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: var(--theme-accent);
}

.surface-hero-banner__subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
    max-width: 640px;
    color: inherit;
}

.surface-hero-banner__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--theme-space-2);
    margin-top: var(--theme-space-3);
}

/* Hero banner mobile breakpoint */
@media (max-width: 640px) {
    .surface-hero-banner {
        min-height: 160px;
        padding: var(--theme-space-5);
    }
    .surface-hero-banner__title {
        font-size: 1.5rem;
    }
    .surface-hero-banner__subtitle {
        font-size: 0.9rem;
    }
}

/* ───────────────────────────────────────────────────────────────────
   Wave 3 - Breadcrumbs
   ─────────────────────────────────────────────────────────────── */

.surface-breadcrumbs {
    padding: 0;
    margin: 0;
}

.surface-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.85rem;
}

.surface-breadcrumbs__crumb {
    display: inline-flex;
    align-items: center;
    color: var(--theme-text-muted);
}

.surface-breadcrumbs__crumb--current {
    display: inline-flex;
    align-items: center;
    color: var(--theme-text);
    font-weight: 600;
}

.surface-breadcrumbs__link {
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: var(--theme-text-muted);
    cursor: pointer;
    font-size: inherit;
    border-radius: var(--theme-radius-sm);
    transition: background-color var(--theme-transition-fast), color var(--theme-transition-fast);
}

.surface-breadcrumbs__link:hover {
    background: var(--theme-background-subtle);
    color: var(--theme-primary);
    text-decoration: underline;
}

.surface-breadcrumbs__sep {
    margin: 0 4px;
    color: var(--theme-text-muted);
    opacity: 0.6;
    font-size: 0.7rem;
}

/* ───────────────────────────────────────────────────────────────────
   Wave 3 - Shortcut strip
   ─────────────────────────────────────────────────────────────── */

.surface-shortcut-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--theme-space-3);
    margin-top: var(--theme-space-3);
}

.surface-shortcut {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--theme-space-2);
    padding: var(--theme-space-4);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    text-align: left;
    cursor: pointer;
    transition: transform var(--theme-transition-fast), box-shadow var(--theme-transition-fast), border-color var(--theme-transition-fast);
    color: var(--theme-text);
}

.surface-shortcut:hover {
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-md);
    border-color: currentColor;
}

.surface-shortcut__icon {
    font-size: 1.5rem;
}

.surface-shortcut--primary .surface-shortcut__icon { color: var(--theme-primary); }
.surface-shortcut--accent  .surface-shortcut__icon { color: var(--theme-accent); }
.surface-shortcut--info    .surface-shortcut__icon { color: var(--theme-info); }
.surface-shortcut--success .surface-shortcut__icon { color: var(--theme-success); }
.surface-shortcut--warning .surface-shortcut__icon { color: var(--theme-warning); }
.surface-shortcut--danger  .surface-shortcut__icon { color: var(--theme-danger); }
.surface-shortcut--muted   .surface-shortcut__icon { color: var(--theme-text-muted); }

.surface-shortcut__label {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ───────────────────────────────────────────────────────────────────
   Wave 4 - Chart (pure SVG)
   ─────────────────────────────────────────────────────────────── */

.surface-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-top: var(--theme-space-3);
}

.surface-chart__bar {
    transition: opacity var(--theme-transition-fast);
}

.surface-chart__bar:hover {
    opacity: 0.8;
}

.surface-chart__label {
    fill: var(--theme-text-muted);
    font-size: 11px;
    font-family: inherit;
}

.surface-chart__value {
    fill: var(--theme-text);
    font-size: 11px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.surface-chart__pie-label {
    fill: var(--theme-text-on-primary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    pointer-events: none;
}

.surface-chart__line {
    transition: stroke-width var(--theme-transition-fast);
}

.surface-chart__dot {
    transition: r var(--theme-transition-fast);
}

.surface-chart__dot:hover {
    r: 5;
}

/* ───────────────────────────────────────────────────────────────────
   Wave 4 - Kanban
   ─────────────────────────────────────────────────────────────── */

.surface-kanban__scroll {
    margin: var(--theme-space-3) calc(var(--theme-space-5) * -1) 0;
    padding: 0 var(--theme-space-5);
    overflow-x: auto;
}

.surface-kanban__board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: var(--theme-space-3);
    padding-bottom: var(--theme-space-3);
}

.surface-kanban__col {
    background: var(--theme-surface-sunken);
    border-radius: var(--theme-radius-md);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    max-height: 600px;
}

.surface-kanban__col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--theme-space-3) var(--theme-space-4);
    border-bottom: 1px solid var(--theme-border);
}

.surface-kanban__col-name {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text);
}

.surface-kanban__col-count {
    background: var(--theme-surface);
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--theme-radius-pill);
}

.surface-kanban__col-body {
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-2);
    padding: var(--theme-space-3);
    overflow-y: auto;
    flex: 1;
}

.surface-kanban__empty {
    padding: var(--theme-space-3);
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    text-align: center;
    border: 1px dashed var(--theme-border);
    border-radius: var(--theme-radius-sm);
}

.surface-kanban__card {
    background: var(--theme-surface);
    padding: var(--theme-space-3);
    border-radius: var(--theme-radius-sm);
    border-left: 3px solid var(--theme-border-strong);
    box-shadow: var(--theme-shadow-sm);
    transition: transform var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
}

.surface-kanban__card:hover {
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md);
}

/* Card accent stripes match HashColors palette so the same row stays
   the same color across reloads. The HashColors helper returns class
   names like "tile-color-blue"; we want just the suffix to map to a
   border color. The C# strips "tile-color-" prefix to produce our
   suffix here. */
.surface-kanban__card-accent--blue    { border-left-color: #1e6091; }
.surface-kanban__card-accent--cyan    { border-left-color: #0e7490; }
.surface-kanban__card-accent--teal    { border-left-color: #0f766e; }
.surface-kanban__card-accent--green   { border-left-color: #166534; }
.surface-kanban__card-accent--orange  { border-left-color: #c2410c; }
.surface-kanban__card-accent--red     { border-left-color: #b91c1c; }
.surface-kanban__card-accent--magenta { border-left-color: #be185d; }
.surface-kanban__card-accent--purple  { border-left-color: #6b21a8; }

.surface-kanban__card-title {
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 2px;
}

.surface-kanban__card-subtitle {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

.surface-kanban__card-caption {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    margin-top: 4px;
}

/* ───────────────────────────────────────────────────────────────────
   Wave 4 - Map
   ─────────────────────────────────────────────────────────────── */

.surface-map__fallback {
    margin-top: var(--theme-space-3);
    border-radius: var(--theme-radius-md);
    background:
        linear-gradient(135deg,
            color-mix(in oklch, var(--theme-primary), transparent 88%),
            color-mix(in oklch, var(--theme-accent), transparent 88%));
    border: 1px solid var(--theme-border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.surface-map__pin {
    font-size: 3rem;
    color: var(--theme-danger);
    filter: drop-shadow(0 2px 4px color-mix(in oklch, var(--theme-danger), transparent 60%));
}

.surface-map__address-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--theme-space-3);
    background: color-mix(in oklch, var(--theme-surface), transparent 12%);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--theme-border);
    border-bottom-left-radius: var(--theme-radius-md);
    border-bottom-right-radius: var(--theme-radius-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.surface-map__address-strip strong {
    color: var(--theme-text);
    font-size: 0.9rem;
}

.surface-map__coords {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.surface-map__open-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--theme-space-2);
    font-size: 0.85rem;
    color: var(--theme-primary);
    text-decoration: none;
}

.surface-map__open-link:hover {
    text-decoration: underline;
}

/* ───────────────────────────────────────────────────────────────────
   Wave 5 - Tabs
   ─────────────────────────────────────────────────────────────── */

.surface-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-4);
}

.surface-tabs__strip {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--theme-border);
    overflow-x: auto;
    margin-bottom: 0;
}

.surface-tab-head {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: var(--theme-space-3) var(--theme-space-4);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: color var(--theme-transition-fast), border-color var(--theme-transition-fast), background-color var(--theme-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.surface-tab-head:hover {
    color: var(--theme-text);
    background: var(--theme-background-subtle);
}

.surface-tab-head--active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
}

.surface-tab-head--active:hover {
    color: var(--theme-primary);
    background: transparent;
}

.surface-tabs__panel {
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-4);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 5 - Loading skeleton (shimmer placeholder)
   ─────────────────────────────────────────────────────────────── */

@keyframes surface-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.surface-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-3);
}

.surface-skeleton__bar {
    height: 14px;
    border-radius: var(--theme-radius-sm);
    background: linear-gradient(
        90deg,
        var(--theme-surface-sunken) 0%,
        var(--theme-background-subtle) 50%,
        var(--theme-surface-sunken) 100%);
    background-size: 200% 100%;
    animation: surface-skeleton-shimmer 1.8s ease-in-out infinite;
}

.surface-skeleton__bar--0 { width: 100%; }
.surface-skeleton__bar--1 { width: 92%; }
.surface-skeleton__bar--2 { width: 78%; }

/* ───────────────────────────────────────────────────────────────────
   Wave 7 - Embed-surface (composes another Surface inline)
   ─────────────────────────────────────────────────────────────── */

.surface-embed-surface {
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-4);
    padding: var(--theme-space-4);
    background: var(--theme-surface-sunken);
    border: 1px dashed var(--theme-border-strong);
    border-radius: var(--theme-radius-md);
    position: relative;
}

.surface-embed-surface::before {
    content: "Embedded surface";
    position: absolute;
    top: -10px;
    left: 12px;
    background: var(--theme-surface);
    padding: 0 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted);
    border-radius: var(--theme-radius-sm);
}

.surface-embed-surface__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--theme-space-2);
    border-bottom: 1px solid var(--theme-border);
}

.surface-embed-surface__name {
    font-weight: 600;
    color: var(--theme-text);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 8 - Camera / Signature / Geo-checkin
   ─────────────────────────────────────────────────────────────── */

.surface-camera__preview {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--theme-space-4);
    align-items: start;
    margin-top: var(--theme-space-3);
}

.surface-camera__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--theme-radius-md);
    border: 1px solid var(--theme-border);
}

.surface-camera__placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--theme-text-muted);
}

.surface-camera__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 480px) {
    .surface-camera__preview {
        grid-template-columns: 1fr;
    }
    .surface-camera__thumb,
    .surface-camera__placeholder {
        max-width: 240px;
    }
}

.surface-signature__prompt {
    text-align: center;
    padding: var(--theme-space-4);
    background: var(--theme-surface-sunken);
    border: 2px dashed var(--theme-border-strong);
    border-radius: var(--theme-radius-md);
}

.surface-signature__icon {
    font-size: 3rem;
    color: var(--theme-text-muted);
    display: block;
    margin-bottom: var(--theme-space-2);
}

.surface-geo-checkin__result {
    display: flex;
    gap: var(--theme-space-4);
    align-items: center;
    margin-top: var(--theme-space-3);
    padding: var(--theme-space-3);
    background: color-mix(in oklch, var(--theme-success), transparent 92%);
    border-left: 4px solid var(--theme-success);
    border-radius: var(--theme-radius-md);
}

.surface-geo-checkin__pin {
    font-size: 2rem;
    color: var(--theme-success);
}

.surface-geo-checkin__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ───────────────────────────────────────────────────────────────────
   Wave 9 - Filters / Search / Quick-add
   ─────────────────────────────────────────────────────────────── */

.surface-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--theme-space-2);
}

.surface-filters__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    margin-right: var(--theme-space-2);
}

.surface-filters__empty {
    color: var(--theme-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

.surface-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--theme-radius-pill);
    border: 1px solid var(--theme-border-strong);
    background: var(--theme-surface);
    color: var(--theme-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--theme-transition-fast);
}

.surface-filter-chip:hover {
    border-color: var(--theme-primary);
    background: var(--theme-background-subtle);
}

.surface-filter-chip--active {
    background: var(--theme-primary);
    color: var(--theme-text-on-primary);
    border-color: var(--theme-primary);
}

.surface-filter-chip--clear {
    color: var(--theme-text-muted);
    border-style: dashed;
}

/* Cross-section filter badge (Wave 9.5 cascade).
   Renders on subscriber kinds (table / tiles / embed-view / etc.) when a
   filter publisher (search / filters / quick-add) has pushed state to
   that section's slot. Tells the user "this section is filtered" so a
   table with N hidden rows isn't confusing. */
.surface-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    margin-left: var(--theme-space-2);
    border-radius: 999px;
    background: var(--theme-primary-muted, rgba(37, 99, 235, 0.14));
    color: var(--theme-primary, #1d4ed8);
    vertical-align: middle;
    white-space: nowrap;
}
.surface-filter-badge i { font-size: 0.72rem; }

/* Wave 9.8 quick-add pending rows.
   Subscriber kinds (Table / Tiles / EmbedView / EmbedReport) render
   ghost rows at the top of their list when a quick-add publisher has
   pushed an optimistic value. Ghost styling: warning-muted background,
   italic value text, clock icon + "pending" badge, dismiss button. */
.surface-row-pending {
    background: var(--theme-warning-muted, rgba(217, 119, 6, 0.10));
    font-style: italic;
}
.surface-row-pending:hover {
    background: var(--theme-warning-muted, rgba(217, 119, 6, 0.16));
}
.surface-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    margin-right: var(--theme-space-2);
    border-radius: 999px;
    background: var(--theme-warning-muted, rgba(217, 119, 6, 0.18));
    color: var(--theme-warning, #b45309);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.surface-pending-badge i { font-size: 0.7rem; }
.surface-pending-value {
    font-weight: 600;
    color: var(--theme-text);
}
.surface-pending-dismiss {
    float: right;
    border: none;
    background: transparent;
    color: var(--theme-text-muted);
    cursor: pointer;
    padding: 0 6px;
    line-height: 1.4;
    border-radius: 4px;
}
.surface-pending-dismiss:hover {
    background: var(--theme-danger-muted, rgba(220, 38, 38, 0.14));
    color: var(--theme-danger, #b91c1c);
}
/* Wave 9.8.1 - quick-add save lifecycle status variants on the
   pending badge + row. The save flow transitions a pending row through
   Pending -> Saving -> Saved / Failed. Each status uses a different
   color + icon so the user sees the commit progress visually. */
.surface-pending-badge--saving {
    background: color-mix(in oklch, var(--theme-info, #0284c7) 18%, var(--theme-surface, #fff));
    color: var(--theme-info, #0369a1);
}
.surface-pending-badge--saving i {
    animation: surface-pending-spin 0.9s linear infinite;
}
@keyframes surface-pending-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.surface-pending-badge--saved {
    background: color-mix(in oklch, var(--theme-success, #16a34a) 18%, var(--theme-surface, #fff));
    color: var(--theme-success, #15803d);
}
.surface-pending-badge--failed {
    background: color-mix(in oklch, var(--theme-danger, #dc2626) 18%, var(--theme-surface, #fff));
    color: var(--theme-danger, #b91c1c);
}
.surface-row-pending--saved {
    background: color-mix(in oklch, var(--theme-success, #16a34a) 8%, var(--theme-surface, #fff));
    font-style: normal;
}
.surface-row-pending--saved:hover {
    background: color-mix(in oklch, var(--theme-success, #16a34a) 14%, var(--theme-surface, #fff));
}
.surface-row-pending--failed {
    background: color-mix(in oklch, var(--theme-danger, #dc2626) 10%, var(--theme-surface, #fff));
    font-style: normal;
    border-left: 3px solid var(--theme-danger, #dc2626);
}
.surface-row-pending--failed:hover {
    background: color-mix(in oklch, var(--theme-danger, #dc2626) 16%, var(--theme-surface, #fff));
}

/* Tile-grid pending tile - smaller, dashed border to differentiate from
   saved tiles + a dismiss button anchored top-right. */
.surface-tile-pending {
    border-style: dashed !important;
    opacity: 0.85;
    position: relative;
}
.surface-tile-pending__dismiss {
    position: absolute;
    top: 4px;
    right: 4px;
    float: none;
}

.surface-search {
    display: flex;
    align-items: center;
    gap: var(--theme-space-2);
    padding: var(--theme-space-2) var(--theme-space-3);
}

.surface-search__icon {
    color: var(--theme-text-muted);
    font-size: 1.1rem;
}

.surface-search__input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    color: var(--theme-text);
    padding: 4px 0;
}

.surface-search__input::placeholder {
    color: var(--theme-text-muted);
}

.surface-search__clear {
    background: transparent;
    border: none;
    color: var(--theme-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
}

.surface-search__clear:hover {
    color: var(--theme-text);
}

.surface-quick-add {
    display: flex;
    align-items: center;
    gap: var(--theme-space-3);
    flex-wrap: wrap;
}

.surface-quick-add__hint {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
}

.surface-quick-add__input-row {
    display: flex;
    align-items: center;
    gap: var(--theme-space-2);
    width: 100%;
}

.surface-quick-add__input {
    flex: 1;
    border: 1px solid var(--theme-border-strong);
    border-radius: var(--theme-radius-md);
    padding: 8px 12px;
    font-size: 0.95rem;
    background: var(--theme-surface);
    color: var(--theme-text);
}

.surface-quick-add__input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--theme-primary), transparent 80%);
}

/* ───────────────────────────────────────────────────────────────────
   Wave 10 - Scan / Voice
   ─────────────────────────────────────────────────────────────── */

.surface-scan__result,
.surface-voice__result {
    display: flex;
    gap: var(--theme-space-3);
    align-items: flex-start;
    margin-top: var(--theme-space-3);
    padding: var(--theme-space-3);
    background: color-mix(in oklch, var(--theme-success), transparent 92%);
    border-left: 4px solid var(--theme-success);
    border-radius: var(--theme-radius-md);
}

.surface-scan__success-icon,
.surface-voice__success-icon {
    font-size: 1.5rem;
    color: var(--theme-success);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ───────────────────────────────────────────────────────────────────────
   Wave 10.0 - unified section header chrome
   ---------------------------------------------------------------------
   <SurfaceSectionHeader> component renders the icon + title + suffix +
   right-aligned content row. Consumed by card / tiles / table / embed-*
   / kanban / timeline / map. Specialty kinds (hero-banner, notification-
   banner, gauge) keep their own headers.
   --------------------------------------------------------------------- */
.surface-section-header {
    display: flex;
    align-items: center;
    gap: var(--theme-space-2);
    margin-bottom: var(--theme-space-2);
}
.surface-section-header__icon {
    font-size: 1.1rem;
    color: var(--theme-primary, #1d4ed8);
    flex-shrink: 0;
}
.surface-section-header__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text);
    line-height: 1.4;
}
.surface-section-header__suffix {
    font-size: 0.78rem;
    color: var(--theme-text-muted);
    font-weight: 600;
    background: color-mix(in oklch, var(--theme-text-muted, #6b7280) 14%, var(--theme-surface, #fff));
    padding: 2px 9px;
    border-radius: 999px;
    line-height: 1.4;
}
.surface-section-header__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--theme-space-1);
}

/* Wave 10.0 A2 - format-aware field renderers on the card kind.
   tel + email + link wrap the value in an anchor with an inline icon.
   Color picks up the theme primary so the value reads as actionable. */
.surface-field-tel,
.surface-field-email,
.surface-field-link {
    color: var(--theme-primary, #1d4ed8);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.surface-field-tel:hover,
.surface-field-email:hover,
.surface-field-link:hover {
    text-decoration: underline;
}
.surface-field-tel i,
.surface-field-email i,
.surface-field-link i {
    font-size: 0.85em;
    opacity: 0.85;
}

/* ───────────────────────────────────────────────────────────────────────
   Wave 10.0 B1 - Rich Tile Rows ("cardLayout: rich" on tiles kind)
   ---------------------------------------------------------------------
   Vertical card list with multi-row chrome per card. Each card is a
   tappable container with an icon-prefixed row stack matching the
   Mobile Jobs card shape. Authors compose rows via config.rows[].
   --------------------------------------------------------------------- */
.surface-rich-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--theme-space-2);
}
.surface-rich-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--theme-text);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.surface-rich-card--tappable {
    cursor: pointer;
}
.surface-rich-card--tappable:hover {
    border-color: var(--theme-primary, #1d4ed8);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--theme-primary, #1d4ed8) 18%, transparent);
}
.surface-rich-card--tappable:active {
    transform: scale(0.997);
}
.surface-rich-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}
.surface-rich-card__icon {
    color: var(--theme-text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.surface-rich-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.surface-rich-card__field {
    font-weight: 600;
    color: var(--theme-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.surface-rich-card__suffix {
    font-weight: 400;
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}
.surface-rich-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.surface-rich-card__trailing {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.surface-rich-card__trailing-icon {
    color: var(--theme-text-muted);
    font-size: 0.9rem;
}

/* Rich chip variants - color-by-variant pills used inline or trailing.
   Variants: neutral / primary / accent / success / warning / danger / info.
   ColorMap rules map field values to variants (e.g. Priority -> danger). */
.surface-rich-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.surface-rich-chip i {
    font-size: 0.7rem;
}
.surface-rich-chip--neutral {
    background: color-mix(in oklch, var(--theme-text-muted, #6b7280) 12%, var(--theme-surface, #fff));
    color: var(--theme-text);
    border-color: color-mix(in oklch, var(--theme-text-muted, #6b7280) 24%, var(--theme-border));
}
.surface-rich-chip--primary {
    background: color-mix(in oklch, var(--theme-primary, #1d4ed8) 14%, var(--theme-surface, #fff));
    color: var(--theme-primary, #1d4ed8);
    border-color: color-mix(in oklch, var(--theme-primary, #1d4ed8) 35%, var(--theme-border));
}
.surface-rich-chip--accent {
    background: color-mix(in oklch, var(--theme-accent, #7c3aed) 14%, var(--theme-surface, #fff));
    color: var(--theme-accent, #7c3aed);
    border-color: color-mix(in oklch, var(--theme-accent, #7c3aed) 35%, var(--theme-border));
}
.surface-rich-chip--success {
    background: color-mix(in oklch, var(--theme-success, #16a34a) 14%, var(--theme-surface, #fff));
    color: var(--theme-success, #15803d);
    border-color: color-mix(in oklch, var(--theme-success, #16a34a) 35%, var(--theme-border));
}
.surface-rich-chip--warning {
    background: color-mix(in oklch, var(--theme-warning, #d97706) 14%, var(--theme-surface, #fff));
    color: var(--theme-warning, #b45309);
    border-color: color-mix(in oklch, var(--theme-warning, #d97706) 35%, var(--theme-border));
}
.surface-rich-chip--danger {
    background: color-mix(in oklch, var(--theme-danger, #dc2626) 14%, var(--theme-surface, #fff));
    color: var(--theme-danger, #b91c1c);
    border-color: color-mix(in oklch, var(--theme-danger, #dc2626) 35%, var(--theme-border));
}
.surface-rich-chip--info {
    background: color-mix(in oklch, var(--theme-info, #0284c7) 14%, var(--theme-surface, #fff));
    color: var(--theme-info, #0369a1);
    border-color: color-mix(in oklch, var(--theme-info, #0284c7) 35%, var(--theme-border));
}

/* Wave 10.0 C1 - tab count chip rendered inside .surface-tab-head when
   the tab declares countBundle. Reads bundle slot length and renders
   as "(N)" pill next to the label. */
.surface-tab-head__count {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--theme-text-muted, #6b7280) 18%, var(--theme-surface, #fff));
    color: var(--theme-text);
    line-height: 1.5;
    vertical-align: middle;
}
.surface-tab-head--active .surface-tab-head__count {
    background: color-mix(in oklch, var(--theme-on-primary, #fff) 24%, transparent);
    color: var(--theme-on-primary, #fff);
}