/*
 * Portal component kit — styles for templates/components/*.twig.
 * Consumes the global --portal-c-* tokens (portal-components.css).
 * Motion (pulse, entrances, flashes) lives in portal-motion.css.
 */

/* ── Page header ─────────────────────────────────────────────────── */
.portal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    /* Pages with flex-column <main> (QA, RI, sysmgmt) must not squash the header */
    flex: 0 0 auto;
}

.portal-page-header-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Page titles: strong quiet sans — the app identity lives in the mono
 * labels + geometry, not a display face. Joyride (--portal-font-display)
 * is reserved for big-screen/hero moments (TV pages already use it). */
.portal-page-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 0;
    color: var(--portal-c-text);
}

.portal-page-subtitle {
    font-size: var(--portal-text-sm);
    color: var(--portal-c-text-muted);
}

.portal-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Step the title down on phones */
@media (max-width: 575.98px) {
    .portal-page-title {
        font-size: 1.1rem;
    }
}

/* ── Breadcrumb (detail pages) ───────────────────────────────────── */
.portal-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
    font-family: var(--portal-font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--portal-label-tracking);
    text-transform: uppercase;
}

.portal-breadcrumb-link {
    color: var(--portal-c-text-muted);
    text-decoration: none;
    transition: color 0.14s ease;
}

.portal-breadcrumb-link:hover,
.portal-breadcrumb-link:focus-visible {
    color: var(--portal-c-accent);
}

.portal-breadcrumb-sep {
    color: var(--portal-c-text-muted);
    opacity: 0.5;
}

.portal-breadcrumb-current {
    color: var(--portal-c-text-muted);
    opacity: 0.75;
}

/* ── Stat card ───────────────────────────────────────────────────── */
.portal-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background-color: var(--portal-c-surface);
    border: 1px solid var(--portal-c-border);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: var(--portal-c-shadow);
    min-width: 0;
    height: 100%;
}

.portal-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bs-border-radius);
    font-size: 1rem;
    background-color: var(--portal-c-accent-muted);
    color: var(--portal-c-accent);
    border: 1px solid var(--portal-c-accent-border);
}

.portal-stat-body {
    min-width: 0;
}

.portal-stat-label {
    font-family: var(--portal-font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: var(--portal-label-tracking);
    text-transform: uppercase;
    color: var(--portal-c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-stat-value {
    font-family: var(--portal-font-mono);
    font-size: var(--portal-text-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--portal-c-text);
    font-variant-numeric: tabular-nums;
}

.portal-stat-sub {
    font-size: var(--portal-text-xs);
    color: var(--portal-c-text-muted);
}

/* Accent variants tint the icon chip */
.portal-stat-accent-success .portal-stat-icon {
    background-color: var(--portal-c-badge-success-bg);
    color: var(--portal-c-badge-success-color);
    border-color: transparent;
}

.portal-stat-accent-warning .portal-stat-icon {
    background-color: var(--portal-c-badge-warning-bg);
    color: var(--portal-c-badge-warning-color);
    border-color: transparent;
}

.portal-stat-accent-danger .portal-stat-icon {
    background-color: var(--portal-c-badge-danger-bg);
    color: var(--portal-c-badge-danger-color);
    border-color: transparent;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.portal-empty-state {
    max-width: 26rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.portal-empty-state-img {
    height: 250px;
    width: 250px;
    object-fit: contain;
}

.portal-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 1.5rem;
    background-color: var(--portal-c-badge-muted-bg);
    color: var(--portal-c-text-muted);
    border: 1px solid var(--portal-c-border);
}

/* ── Live dot ────────────────────────────────────────────────────── */
/* In page titles the dot carries a tooltip (liveTitle) — invite the hover */
.portal-page-title .portal-live-dot {
    cursor: help;
}

.portal-live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.15rem;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--portal-c-accent);
    box-shadow: 0 0 0 3px var(--portal-c-accent-muted);
}

.portal-live-dot-success {
    background: var(--portal-c-badge-success-color);
    box-shadow: 0 0 0 3px var(--portal-c-badge-success-bg);
}

.portal-live-dot-warning {
    background: var(--portal-c-badge-warning-color);
    box-shadow: 0 0 0 3px var(--portal-c-badge-warning-bg);
}

.portal-live-dot-danger {
    background: var(--portal-c-badge-danger-color);
    box-shadow: 0 0 0 3px var(--portal-c-badge-danger-bg);
}

.portal-live-dot-idle {
    background: var(--portal-c-text-muted);
    box-shadow: none;
    animation: none;
}