/* ==========================================================================
   Shared component kit — Components/Shared/*.razor (docs/design-ui-consolidation.md §4.1)
   Colours come from tokens.css only. One global sheet rather than .razor.css per component, because
   most of these wrap caller-supplied content that scoped CSS cannot reach.
   ========================================================================== */

/* ── PageShell ───────────────────────────────────────────────────────────── */
.ui-page {
    width: 100%;
    margin: 0 auto;
    padding: var(--ui-space-4);
}
.ui-page--narrow { max-width: var(--ui-page-max-narrow); }
.ui-page--default { max-width: var(--ui-page-max); }
.ui-page--wide { max-width: none; }

@media (max-width: 575.98px) {
    .ui-page { padding: var(--ui-space-3); }
}

.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-4);
}
.ui-page-heading { min-width: 0; }
.ui-page-title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: var(--ui-text);
}
.ui-page-title-icon { margin-right: 0.5rem; color: var(--ui-accent); }
.ui-page-subtitle {
    margin-top: var(--ui-space-1);
    color: var(--ui-text-muted);
}
.ui-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

/* A section heading inside a page. */
.ui-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-text);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.ui-modal { overflow-y: auto; }
.ui-modal .modal-content {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-overlay);
}
.ui-modal .modal-header,
.ui-modal .modal-footer { border-color: var(--ui-border); }
.ui-modal .modal-footer { gap: var(--ui-space-2); }
.ui-modal .modal-footer > * { margin: 0; }
.ui-confirm-message { white-space: pre-line; color: var(--ui-text-muted); }

/* ── Notices (toasts) ────────────────────────────────────────────────────── */
.ui-notice-stack {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
}
.ui-notice { border-left-width: 4px; }
.ui-notice--success { border-left-color: var(--ui-success-fg); }
.ui-notice--info { border-left-color: var(--ui-info-fg); }
.ui-notice--warning { border-left-color: var(--ui-warning-fg); }
.ui-notice--error { border-left-color: var(--ui-danger-fg); }
.ui-notice--success .ui-notice-icon { color: var(--ui-success-fg); }
.ui-notice--info .ui-notice-icon { color: var(--ui-info-fg); }
.ui-notice--warning .ui-notice-icon { color: var(--ui-warning-fg); }
.ui-notice--error .ui-notice-icon { color: var(--ui-danger-fg); }

/* Shared by NoticeHost and NotificationToasts. */
.ariadne-toast {
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-left-width: 4px;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-overlay);
    padding: 10px 12px;
    font-size: .9rem;
}
.ariadne-toast-head { display: flex; align-items: center; }
.ariadne-toast-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ── Loading / empty / error ─────────────────────────────────────────────── */
.ui-async-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-space-5) var(--ui-space-3);
}
.ui-async-refreshing {
    position: relative;
    height: 0;
    display: flex;
    justify-content: flex-end;
    color: var(--ui-text-subtle);
}
.ui-async-refreshing > * { position: absolute; top: 4px; right: 4px; }

.ui-inline-alert { display: flex; align-items: flex-start; }
.ui-inline-alert .btn-close { position: static; padding: .5rem; margin-left: .5rem; }

.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-5) var(--ui-space-3);
    color: var(--ui-text-muted);
}
.ui-empty--compact { padding: var(--ui-space-4) var(--ui-space-2); }
.ui-empty-icon { font-size: 2rem; color: var(--ui-text-subtle); opacity: .8; }
.ui-empty--compact .ui-empty-icon { font-size: 1.4rem; }
.ui-empty-title { font-weight: 600; color: var(--ui-text); }
.ui-empty-body { max-width: 36rem; }
.ui-empty-actions { display: flex; gap: var(--ui-space-2); margin-top: var(--ui-space-1); }

.min-w-0 { min-width: 0; }

/* A quiet boxed region inside a page: forms-within-a-tab, callouts, stat tiles. */
.ui-panel {
    background: var(--ui-surface-sunken);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: var(--ui-space-3);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.ui-badge {
    font-weight: 600;
    border: 1px solid transparent;
}
.ui-badge--neutral { background: var(--ui-neutral-bg); color: var(--ui-neutral-fg); }
.ui-badge--info    { background: var(--ui-info-bg);    color: var(--ui-info-fg); }
.ui-badge--success { background: var(--ui-success-bg); color: var(--ui-success-fg); }
.ui-badge--warning { background: var(--ui-warning-bg); color: var(--ui-warning-fg); }
.ui-badge--danger  { background: var(--ui-danger-bg);  color: var(--ui-danger-fg); }
.ui-badge--accent  { background: var(--ui-accent-soft); color: var(--ui-accent); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.ui-tabs { margin-bottom: var(--ui-space-3); flex-wrap: wrap; }
.ui-tabs .nav-link { color: var(--ui-text-muted); }
.ui-tabs .nav-link:hover { color: var(--ui-text); }
.ui-tabs.nav-tabs .nav-link.active {
    color: var(--ui-accent);
    background: var(--ui-surface);
    border-color: var(--ui-border) var(--ui-border) var(--ui-surface);
}
.ui-tabs.nav-pills .nav-link.active { background: var(--ui-accent); color: var(--ui-text-on-accent); }
.ui-tabs.nav-underline .nav-link.active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.ui-tab-badge { background: var(--ui-neutral-bg); color: var(--ui-neutral-fg); font-weight: 600; }

/* ── Resizable dock ──────────────────────────────────────────────────────── */
.ui-dock {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
.ui-dock-handle {
    flex: 0 0 5px;
    cursor: col-resize;
    background: transparent;
    border-left: 1px solid var(--ui-border);
    transition: background-color .15s;
}
.ui-dock-handle:hover { background: var(--ui-accent-soft); }

/* ── Kit reference page (/dev/ui-kit) ────────────────────────────────────── */
.ui-kit-swatch {
    display: inline-flex;
    flex-direction: column;
    width: 9rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    font-size: .8rem;
}
.ui-kit-swatch > span:first-child { height: 3rem; }
.ui-kit-swatch > span:last-child { padding: 4px 6px; background: var(--ui-surface); color: var(--ui-text-muted); }