/* =================================================================
   WF Portal — Page-specific styles (Global)
   -----------------------------------------------------------------
   Consolidated from scoped .razor.css files into global CSS to
   avoid Blazor CSS-isolation issues with child components.
   ================================================================= */

/* =================================================================
   Layout — Main & Footer
   ================================================================= */

/* wf-main is the universal viewport boundary.
   Content pages scroll inside it (overflow: auto).
   App pages fill it exactly via flex: 1 + min-height: 0. */
.wf-main {
    display: flex;
    flex-direction: column;
    padding: var(--theme-page-padding);
    flex: 1;
    min-height: 0;
    overflow: auto;
    background-color: var(--theme-background-subtle);
}

/* Blazor's @key wrapper — pass flex chain to page content */
.wf-main > div:first-child {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Stat Cards ────────────────────────────────────────────────── */

.wf-stat-card {
    flex: 1;
    min-width: 6rem;
    text-align: center;
    padding: 0.6rem 0.5rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-background);
}
.wf-stat-value { font-size: 1.4rem; font-weight: 700; }
.wf-stat-label { font-size: 0.68rem; color: var(--theme-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Tabs (simple underline) ────────────────────────────────────── */

.wf-tabs {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--theme-border);
}
.wf-tabs li {
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--theme-text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.wf-tabs li:hover { color: var(--theme-text); }
.wf-tabs li.active { color: var(--theme-primary); border-bottom-color: var(--theme-primary); }

/* =================================================================
   Dashboard
   ================================================================= */

.wf-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.wf-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-size: var(--theme-font-size-xs);
    font-weight: 500;
    color: var(--theme-primary);
    text-decoration: none;
}
.wf-widget-link:hover {
    color: var(--theme-primary-hover);
}

/* -- Quick access cards ------------------------------------------ */
.wf-quick-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background-color: var(--theme-background-raised);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    text-decoration: none;
    color: var(--theme-text);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.wf-quick-card:hover {
    border-color: var(--theme-border-subtle);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transform: translateY(-1px);
    color: var(--theme-text);
    text-decoration: none;
}
.wf-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.wf-quick-title {
    font-weight: 600;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-emphasis);
}
.wf-quick-desc {
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-secondary);
    margin-top: 0.125rem;
}

/* -- News feed --------------------------------------------------- */
.wf-news-feed {
    display: flex;
    flex-direction: column;
}
.wf-news-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--theme-border);
}
.wf-news-item:last-child {
    border-bottom: none;
}
.wf-news-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.4rem;
}
.wf-news-headline {
    font-size: var(--theme-font-size-sm);
    font-weight: 500;
    color: var(--theme-text-emphasis);
}
.wf-news-date {
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-muted);
    margin-top: 0.125rem;
}

/* =================================================================
   Entity Builder — Palette + Canvas
   ================================================================= */

.wf-palette {
    background-color: var(--theme-background-subtle);
    border-right: 1px solid var(--theme-border);
    width: 220px;
    min-width: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wf-palette-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--theme-border);
}

.wf-palette-section {
    padding: 0.75rem 0.75rem 0.25rem;
    font-size: var(--theme-font-size-xs);
    font-weight: 600;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wf-palette-item {
    padding: 0.35rem 0.75rem;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text);
    cursor: grab;
    user-select: none;
    border-radius: var(--theme-radius-button);
    transition: background-color 120ms ease;
}
.wf-palette-item:hover {
    background-color: var(--theme-background-hover);
    color: var(--theme-text-emphasis);
}

.wf-palette-group-header {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: var(--theme-font-size-sm);
    font-weight: 600;
    color: var(--theme-text-muted);
    cursor: pointer;
    user-select: none;
    border-radius: var(--theme-radius-button);
    transition: background-color 120ms ease;
}
.wf-palette-group-header:hover {
    background-color: var(--theme-background-hover);
    color: var(--theme-text-emphasis);
}
.wf-palette-group-header.expanded {
    color: var(--theme-text);
}

/* Group drop-target highlight */
.wf-palette-group.drop-active {
    outline: 2px dashed var(--theme-primary);
    outline-offset: -2px;
    background-color: var(--theme-primary-muted);
    border-radius: var(--theme-radius-button);
}

/* Remove button on group property items (visible on hover) */
.wf-remove-btn {
    opacity: 0;
    transition: opacity 120ms ease;
    line-height: 1;
    color: var(--theme-text-muted);
}
.wf-palette-item:hover .wf-remove-btn {
    opacity: 0.6;
}
.wf-remove-btn:hover {
    opacity: 1 !important;
    color: var(--theme-danger) !important;
}

.wf-drop-zone {
    border: 2px dashed var(--theme-border-subtle);
    border-radius: var(--theme-radius-button);
    padding: 0.5rem;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted);
    font-size: var(--theme-font-size-sm);
    transition: all 150ms ease;
}
.wf-drop-zone.active {
    border-color: var(--theme-primary);
    background-color: var(--theme-primary-muted);
    color: var(--theme-primary);
}

/* =================================================================
   Responsive — Tablet
   ================================================================= */

@media (max-width: 991.98px) {
    .wf-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =================================================================
   Responsive — Mobile
   ================================================================= */

@media (max-width: 767.98px) {
    .wf-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .wf-quick-card {
        padding: 0.75rem;
    }
    .wf-palette {
        width: 100%;
        min-width: unset;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--theme-border);
    }
    /* Stack entity builder vertically on mobile */
    .wf-builder-layout {
        flex-direction: column !important;
        height: auto !important;
    }
}

/* =================================================================
   Content Page — scrollable wrapper for non-app pages
   Forces the page content to size to its natural height so wf-main
   scrolls it, rather than clamping to viewport like app pages.
   ================================================================= */

.wf-content-page {
    flex: 0 0 auto;
}

/* =================================================================
   "Run opened in its own window" card — the settled state a launch
   host page (WorkflowLaunchPage / LaunchByCode) shows after the run
   pops out, instead of an abandoned spinner behind a dead dialog.
   ================================================================= */

.wf-popped {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 480px;
    margin: 3.5rem auto 0;
    padding: 2.25rem 2rem;
    text-align: center;
    background: var(--theme-background);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: 0 12px 36px color-mix(in srgb, var(--theme-text) 10%, transparent);
}

.wf-popped-icon {
    font-size: 2.75rem;
    color: var(--theme-primary);
}

.wf-popped-title {
    margin: 0.25rem 0 0;
}

.wf-popped-hint {
    margin: 0;
    color: var(--theme-text-muted);
}

.wf-popped-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* =================================================================
   Sticky Save Bar — Theme Editor
   ================================================================= */

.wf-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0.75rem 2rem;
    background-color: var(--theme-background-raised);
    border-top: 1px solid var(--theme-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
    z-index: 1040;
}

/* =================================================================
   Admin Tabs — used on All Users, Tenant Users, etc.
   ================================================================= */
.wf-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--theme-border);
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.wf-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 120ms, border-color 120ms;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wf-tab:hover {
    color: var(--theme-text);
}

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

.wf-tab .wf-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-muted);
}

.wf-tab.active .wf-tab-count {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

/* =================================================================
   Admin Tree View — collapsible tenant → user hierarchy
   ================================================================= */
.wf-tree-node {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius, 6px);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.wf-tree-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--theme-card-bg);
    cursor: pointer;
    user-select: none;
    transition: background 120ms;
}

.wf-tree-header:hover {
    background: var(--theme-hover);
}

.wf-tree-chevron {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    transition: transform 120ms;
    flex-shrink: 0;
}

.wf-tree-chevron.expanded {
    transform: rotate(90deg);
}

.wf-tree-title {
    font-weight: 600;
    font-size: 0.875rem;
    flex: 1;
    min-width: 0;
}

.wf-tree-badge {
    font-size: 0.7rem;
}

.wf-tree-body {
    border-top: 1px solid var(--theme-border);
}

.wf-tree-body .table {
    margin-bottom: 0;
}

.wf-tree-body .table th {
    font-size: 0.75rem;
}

.wf-tree-body .table td {
    font-size: 0.8125rem;
}

/* ── Advanced Theme Editor ─────────────────────────────────── */

.cursor-pointer { cursor: pointer; }

/* ── Message Turn card (Message Center Turns + Threads) ────── */

/* Tenant-wide Turns browse: a conversation group wraps one handset's turns under a
   single header, so the browse reads as "conversations -> their turns" instead of a
   flat list of identical-looking cards each repeating the whole chain. */
.mtc-convo-group {
    border: 1px solid var(--theme-border, rgba(0,0,0,.125));
    border-radius: var(--theme-radius, 6px);
    margin-bottom: 1rem;
    overflow: hidden;
}
.mtc-convo-group-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem;
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 8%, var(--theme-surface, #fff));
    border-bottom: 1px solid var(--theme-border, rgba(0,0,0,.125));
}
.mtc-convo-group-head > i:first-child { color: var(--theme-primary, #0d6efd); }
/* Cards inside a group sit flush -- the group border owns the outer frame. */
.mtc-convo-group .mtc-card {
    border: none;
    border-bottom: 1px solid var(--theme-border, rgba(0,0,0,.08));
    border-radius: 0;
    margin-bottom: 0;
}
.mtc-convo-group .mtc-card:last-child { border-bottom: none; }

/* Collapsible Replay-driver header (Test Center): a slim, full-width toggle that
   reads like a card header but discloses the replay controls only when opened. */
.wf-replay-head {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    gap: .15rem;
    padding: .5rem .75rem;
    background: transparent;
    border: none;
    border-radius: var(--theme-radius, 8px);
    color: var(--theme-text, #212529);
    font-size: .85rem;
    cursor: pointer;
}
.wf-replay-head:hover { background: color-mix(in oklch, var(--theme-primary, #0d6efd) 6%, transparent); }
.wf-replay-head > i:nth-child(2) { color: var(--theme-primary, #0d6efd); }

/* Message Center Overview "Cleanup & Retention" mini-panel -- the one home for both
   on-demand erase and the scheduled retention pack. */
.mci-cleanup {
    padding: 1rem 1.25rem;
    border-radius: var(--theme-radius, 8px);
    border: 1px solid var(--theme-border, rgba(0,0,0,.1));
    background: color-mix(in oklch, var(--theme-danger, #dc3545) 5%, var(--theme-surface, #fff));
}
.mci-cleanup-head { font-weight: 700; display: flex; align-items: center; }
.mci-cleanup-head i { color: var(--theme-danger, #dc3545); }
.mci-cleanup-sub { margin: .15rem 0 .6rem; font-size: .82rem; color: var(--theme-text, #495057); opacity: .8; }
.mci-cleanup-hint { font-size: .78rem; color: var(--theme-text, #495057); opacity: .7; }

.mtc-card {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, rgba(0,0,0,.125));
    border-radius: var(--theme-radius, 6px);
    margin-bottom: .5rem;
}

.mtc-head {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: .5rem .75rem;
    cursor: pointer;
    color: inherit;
}

.mtc-head:hover { background: rgba(0,0,0,.03); }

.mtc-body {
    border-top: 1px solid var(--theme-border, rgba(0,0,0,.125));
    padding: .5rem .75rem;
}

.mtc-pre {
    background: rgba(0,0,0,.05);
    padding: 6px 8px;
    border: 1px solid var(--theme-border, rgba(0,0,0,.125));
    border-radius: var(--theme-radius, 6px);
    font-size: .72rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 24vh;
    overflow-y: auto;
    margin-bottom: .5rem;
}

/* Workspace: master (nav) + detail panes. Stacks on narrow, splits on wide. */
.mtc-workspace {
    border-top: 1px solid var(--theme-border, rgba(0,0,0,.125));
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mtc-nav { min-width: 0; }
.mtc-detail { min-width: 0; }

@media (min-width: 992px) {
    .mtc-workspace { flex-direction: row; align-items: flex-start; }
    .mtc-nav { flex: 1 1 56%; }
    .mtc-detail {
        flex: 1 1 44%;
        position: sticky;
        top: .5rem;
        max-height: 76vh;
        overflow-y: auto;
        border-left: 1px solid var(--theme-border, rgba(0,0,0,.125));
        padding-left: 1rem;
    }
}

/* Conversation list (left nav) -- contained in its own bordered panel */
.mtc-convo {
    display: flex;
    flex-direction: column;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--theme-border, rgba(0,0,0,.125));
    border-radius: var(--theme-radius, 6px);
    padding: .25rem;
    background: var(--theme-surface, #fff);
}

.mtc-convo-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .35rem;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.25;
    font-size: .82rem;
}

.mtc-convo-row + .mtc-convo-row { border-top: 1px solid var(--theme-border, rgba(0,0,0,.07)); }

.mtc-convo-row:hover { background: rgba(0,0,0,.04); }
.mtc-convo-row.active { background: color-mix(in oklch, var(--theme-primary, #0d6efd) 14%, transparent); }
.mtc-convo-type { min-width: 5rem; opacity: .8; }
.mtc-convo-text { flex: 1 1 auto; min-width: 0; }
.mtc-role { min-width: 3.4rem; text-align: center; }

/* Turn-chain navigator (walk the handset's turns) */
.mtc-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 28vh;
    overflow-y: auto;
    border-left: 2px solid var(--theme-border, rgba(0,0,0,.125));
    margin-left: .35rem;
}

.mtc-chain-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .18rem .45rem;
    margin-left: -.4rem;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.25;
}

.mtc-chain-item:hover { background: rgba(0,0,0,.04); }

.mtc-chain-item.active {
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 14%, transparent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--theme-primary, #0d6efd);  /* accent bar -- connects the timeline */
}

.mtc-chain-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mtc-chain-dot.open { background: var(--theme-success, #198754); }
.mtc-chain-dot.closed { background: var(--theme-border, #adb5bd); }
.mtc-chain-time { min-width: 5.5rem; flex: 0 0 auto; }
.mtc-chain-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mtc-chain-label { line-height: 1.2; font-size: .8rem; }
.mtc-chain-snip {
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* JSON explorer (JsonBlock + recursive JsonTree) */
.jt-block {
    background: rgba(0,0,0,.04);
    border-radius: 6px;
    padding: .25rem .5rem;
    margin-bottom: .5rem;
}

.jt-bar { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; }

.jt-root {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    max-height: 42vh;
    overflow: auto;
}

.jt-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: .25rem; }
.jt-toggle > .bi { font-size: .6rem; opacity: .6; }

.jt-children {
    margin-left: 1rem;
    border-left: 1px dashed var(--theme-border, rgba(0,0,0,.15));
    padding-left: .5rem;
}

.jt-leaf { line-height: 1.5; }
.jt-key { font-weight: 600; }
.jt-punc { opacity: .55; }
.jt-str { color: color-mix(in oklch, var(--theme-success, #198754) 75%, var(--theme-text, #212529)); }
.jt-num { color: color-mix(in oklch, var(--theme-primary, #0d6efd) 75%, var(--theme-text, #212529)); }
.jt-bool { color: color-mix(in oklch, var(--theme-accent, #6f42c1) 75%, var(--theme-text, #212529)); }
.jt-null { opacity: .6; font-style: italic; }

/* ── Message Center intro / overview ──────────────────────── */

.mci-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--theme-radius, 8px);
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 8%, var(--theme-surface, #fff));
    border: 1px solid var(--theme-border, rgba(0,0,0,.1));
}

.mci-hero-art { flex: 0 0 auto; color: var(--theme-primary, #0d6efd); }
.mci-hero-art svg { width: 120px; height: 96px; }
.mci-hero-title { margin: 0 0 .25rem; font-weight: 700; }
.mci-hero-sub { margin: 0; color: var(--theme-text, #495057); opacity: .8; }

.mci-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.mci-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: .4rem;
    padding: 1rem;
    border-radius: var(--theme-radius, 8px);
    border: 1px solid var(--theme-border, rgba(0,0,0,.1));
    background: var(--theme-surface, #fff);
    color: inherit;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.mci-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-color: var(--theme-primary, #0d6efd);
}

.mci-art { color: var(--theme-primary, #0d6efd); margin-bottom: .25rem; }
.mci-art svg { width: 96px; height: 64px; }
.mci-title { font-weight: 600; }
.mci-desc { font-size: .82rem; color: var(--theme-text, #495057); opacity: .8; flex: 1 1 auto; }
.mci-open { font-size: .8rem; font-weight: 600; color: var(--theme-primary, #0d6efd); }

/* Theme-aware SVG paint classes for the intro illustrations */
.mci-fill-soft { fill: color-mix(in oklch, var(--theme-primary, #0d6efd) 18%, transparent); }
.mci-fill-accent { fill: color-mix(in oklch, var(--theme-primary, #0d6efd) 65%, transparent); }
.mci-stroke { stroke: var(--theme-primary, #0d6efd); }
.mci-stroke-faint { stroke: color-mix(in oklch, var(--theme-primary, #0d6efd) 40%, transparent); }
.mci-stroke-light { stroke: var(--theme-surface, #fff); }

/* Springboard section heading -- groups a grid under a titled band (Define / Operate). */
.mci-section {
    margin: 1.5rem 0 .5rem;
}
.mci-section:first-of-type { margin-top: .5rem; }
.mci-section-title {
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.mci-section-title i { color: var(--theme-primary, #0d6efd); }
.mci-section-sub {
    margin: .1rem 0 0;
    font-size: .82rem;
    color: var(--theme-text, #495057);
    opacity: .8;
}

/* Compact icon-card variant -- the "sub-tools" tier: a big themed icon instead of a
   bespoke illustration, in a tighter grid. Reads as a lower rank than the illustrated
   .mci-card "kings". */
.mci-grid-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .75rem;
}
.mci-card-sm {
    flex-direction: row;
    align-items: center;
    gap: .65rem;
    padding: .75rem .85rem;
}
.mci-art-icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-radius, 8px);
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 14%, transparent);
    color: var(--theme-primary, #0d6efd);
    font-size: 1.2rem;
}
.mci-card-sm .mci-title { font-size: .9rem; }

/* -- Admin Dashboard control-center extras (.adm-*) --
   Warm greeting chip, the "start here" ladder, and the at-a-glance
   stats strip. All paint from --theme-* tokens via color-mix so they
   track the tenant theme and read correctly in dark mode (no hardcoded
   light colors). Built on top of the shared .mci-* springboard. */

/* Tenant chip inside the hero subtitle. */
.adm-tenant-chip {
    display: inline-flex;
    align-items: center;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--theme-primary, #0d6efd);
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--theme-primary, #0d6efd) 24%, transparent);
}

/* "New here? Start with these" -- the platform spine ladder. */
.adm-starthere {
    margin: 1rem 0 .25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--theme-radius, 8px);
    background: color-mix(in oklch, var(--theme-accent, #6f42c1) 7%, var(--theme-surface, #fff));
    border: 1px solid var(--theme-border, rgba(0,0,0,.1));
}
.adm-starthere-head {
    font-weight: 700;
    display: flex;
    align-items: center;
}
.adm-starthere-head i { color: var(--theme-accent, #6f42c1); }
.adm-starthere-sub {
    margin: .15rem 0 .75rem;
    font-size: .82rem;
    color: var(--theme-text, #495057);
    opacity: .8;
}
.adm-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .65rem;
}
.adm-ladder-step {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.adm-ladder-num {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--theme-surface, #fff);
    background: var(--theme-accent, #6f42c1);
}
.adm-ladder-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.adm-ladder-title {
    font-weight: 600;
    font-size: .9rem;
    color: var(--theme-text, #212529);
}
.adm-ladder-link:hover .adm-ladder-title { color: var(--theme-primary, #0d6efd); }
.adm-ladder-desc {
    font-size: .78rem;
    color: var(--theme-text, #495057);
    opacity: .8;
}

/* At-a-glance stats strip -- small clickable count tiles. */
.adm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .75rem;
    margin: 1rem 0 .25rem;
}
.adm-stat {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .85rem;
    border-radius: var(--theme-radius, 8px);
    border: 1px solid var(--theme-border, rgba(0,0,0,.1));
    background: var(--theme-surface, #fff);
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.adm-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-color: var(--theme-primary, #0d6efd);
}
.adm-stat-icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-radius, 8px);
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 14%, transparent);
    color: var(--theme-primary, #0d6efd);
    font-size: 1.2rem;
}
.adm-stat-body { display: flex; flex-direction: column; line-height: 1.15; }
.adm-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--theme-text, #212529);
}
.adm-stat-label {
    font-size: .78rem;
    color: var(--theme-text, #495057);
    opacity: .8;
}

/* Remember-where-you-were status chip (AreaResetButton with StatusLabel) */
.area-remember-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.2;
    color: var(--theme-text, #495057);
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--theme-primary, #0d6efd) 22%, transparent);
    transition: background .12s ease, border-color .12s ease;
}

.area-remember-chip:hover {
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 14%, transparent);
    border-color: var(--theme-primary, #0d6efd);
}

.area-remember-pin {
    color: var(--theme-primary, #0d6efd);
    font-size: .72rem;
}

.area-remember-text {
    white-space: nowrap;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.area-remember-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 0 0 .1rem;
    color: var(--theme-text-muted, #6c757d);
    font-size: .7rem;
    line-height: 1;
    opacity: .65;
    transition: opacity .12s ease, color .12s ease;
}

.area-remember-clear:hover {
    opacity: 1;
    color: var(--theme-danger, #dc3545);
}

/* Data Studio intro -- non-link container cards + recent chips + coming-soon box */
.dsi-static-card { cursor: default; }

.dsi-static-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--theme-border, rgba(0, 0, 0, .1));
}

.dsi-recent { margin-top: .5rem; }

.dsi-recent-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6c757d);
    margin-bottom: .3rem;
}

.dsi-recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.dsi-recent-chip {
    border: 1px solid color-mix(in oklch, var(--theme-primary, #0d6efd) 25%, transparent);
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 8%, transparent);
    color: var(--theme-text, #495057);
    border-radius: 999px;
    padding: .12rem .55rem;
    font-size: .76rem;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.dsi-recent-chip:hover {
    background: color-mix(in oklch, var(--theme-primary, #0d6efd) 18%, transparent);
    border-color: var(--theme-primary, #0d6efd);
    transform: translateY(-1px);
}

.dsi-soon { opacity: .72; }

.dsi-soon-tag {
    align-self: flex-start;
    margin-top: .25rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--theme-text-muted, #6c757d);
    background: color-mix(in oklch, var(--theme-text, #495057) 8%, transparent);
    border-radius: 4px;
    padding: .1rem .4rem;
}