/* Intelogix Operations Design System v1.0 - Core components
   Reference: design-system sections 5 and 7. */

/* ============================================================
   5.1 - Header (screen header pattern)
   Applies the tool border-top + signature row + title row.
   ============================================================ */

.screen-header {
    background: var(--bg-surface);
    border-top: 3px solid var(--accent-cam);
    border-bottom: 1px solid var(--bg-divider);
    padding: var(--space-lg) var(--space-2xl);
}

.signature-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--bg-divider);
}

.tool-signature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tool-name {
    font-size: var(--type-body-lg);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.divider-vertical {
    width: 1px;
    height: 16px;
    background: var(--bg-divider);
}

.tool-tagline {
    font-size: var(--type-body);
    color: var(--text-muted);
}

.title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    gap: var(--space-2xl);
}

.title-row .left,
.title-row .right { display: flex; flex-direction: column; gap: var(--space-xs); }

.title-row .right { align-items: flex-end; text-align: right; }

.entity-name {
    font-size: var(--type-heading);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    line-height: 1.2;
}

.metadata {
    font-size: var(--type-body);
    color: var(--text-muted);
}

.display-number {
    font-size: var(--type-display-xl);
    font-weight: var(--weight-medium);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.display-number .unit {
    font-size: var(--type-heading);
    color: var(--text-muted);
    margin-left: var(--space-xs);
}

.trajectory {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--space-xs) var(--space-md);
    font-size: var(--type-body);
    color: var(--text-muted);
    margin-top: var(--space-sm);
    font-variant-numeric: tabular-nums;
}
.trajectory .label { color: var(--text-muted); }
.trajectory .val { color: var(--text-body); text-align: right; }
.trajectory .val.up { color: var(--state-ok-light); }
.trajectory .val.down { color: var(--state-danger-light); }


/* ============================================================
   5.2 - KPI card
   State driven by data, not aesthetics.
   ============================================================ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}

.kpi-card {
    background: var(--state-neutral-bg);
    border-left: 3px solid var(--text-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) 18px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.kpi-card .eyebrow { color: var(--text-muted); }
.kpi-card .value {
    font-size: 28px;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    line-height: 1;
}
.kpi-card .value .unit {
    font-size: 16px;
    color: var(--text-muted);
    margin-left: 2px;
}
.kpi-card .delta {
    font-size: var(--type-body);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.kpi-card .delta.up { color: var(--state-ok-light); }
.kpi-card .delta.down { color: var(--state-danger-light); }
.kpi-card .meta {
    font-size: var(--type-body);
    color: var(--text-subtle);
}

.kpi-card--danger  { background: var(--state-danger-bg); border-left-color: var(--state-danger); }
.kpi-card--warn    { background: var(--state-warn-bg);   border-left-color: var(--state-warn); }
.kpi-card--ok      { background: var(--state-ok-bg);     border-left-color: var(--state-ok); }
.kpi-card--brand   { background: var(--state-brand-bg);  border-left-color: var(--state-brand); }
.kpi-card--neutral { background: var(--state-neutral-bg); border-left-color: var(--text-subtle); }


/* ============================================================
   5.3 - Data table
   ============================================================ */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body-lg);
}
.data-table thead th {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.12em;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--bg-divider);
}
/* Horizontal gutter between adjacent header/body cells so titles like
   "COMPLIANCE" and "LAST COMPLETION" never visually collide. */
.data-table thead th + th,
.data-table tbody td + td { padding-left: var(--space-md); }
.data-table thead th.num { text-align: right; }
.data-table tbody td {
    padding: 14px 0;
    border-top: 1px solid var(--bg-divider);
    color: var(--text-body);
}
.data-table tbody tr:first-child td { border-top: none; }
.data-table tbody td:first-child {
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}
.data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}
.data-table td.num.prior { color: var(--text-muted); }
.data-table td.num.delta-good { color: var(--state-ok-light); }
.data-table td.num.delta-bad  { color: var(--state-danger-light); }

.status-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot--danger { background: var(--state-danger); }
.status-dot--warn   { background: var(--state-warn); }
.status-dot--ok     { background: var(--state-ok); }
.status-dot--brand  { background: var(--state-brand); }

.status-label { font-size: var(--type-body-lg); }
.status-label.danger { color: var(--state-danger-light); }
.status-label.warn   { color: var(--state-warn-light); }
.status-label.ok     { color: var(--state-ok-light); }
.status-label.brand  { color: var(--state-brand-light); }

/* Compact data-table variant for long lists */
.data-table.compact tbody td { padding: var(--space-md) var(--space-sm); }
.data-table.compact tbody td:first-child { padding-left: 0; }
.data-table.compact tbody td:last-child  { padding-right: 0; }
.data-table.compact tbody tr:hover { background: var(--bg-surface); }


/* ============================================================
   5.4 - Status badge
   ============================================================ */

.badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: var(--type-eyebrow);
    letter-spacing: 0.08em;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}
.badge--alert {
    background: var(--state-danger);
    color: var(--text-primary);
}
.badge--alert-outline {
    background: var(--state-danger-bg);
    border-color: var(--state-danger);
    color: var(--state-danger-light);
}
.badge--watch {
    background: var(--state-warn-bg);
    border-color: var(--state-warn);
    color: var(--state-warn-light);
}
.badge--ok {
    background: var(--state-ok-bg);
    border-color: var(--state-ok);
    color: var(--state-ok-light);
}
.badge--info {
    background: var(--state-brand-bg);
    border-color: var(--state-brand);
    color: var(--state-brand-light);
}
.badge--neutral {
    background: var(--state-neutral-bg);
    border-color: var(--text-subtle);
    color: var(--text-muted);
}


/* ============================================================
   5.6 - Alert banner
   ============================================================ */

.alert-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    gap: var(--space-lg);
}
.alert-banner .left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.alert-banner .message { color: var(--text-primary); font-size: var(--type-body-lg); }
.alert-banner .right   { color: var(--text-muted); font-size: var(--type-body); }

.alert-banner--danger { background: var(--state-danger-bg); border-left: 3px solid var(--state-danger); }
.alert-banner--brand  { background: var(--state-brand-bg);  border-left: 3px solid var(--state-brand); }
.alert-banner--warn   { background: var(--state-warn-bg);   border-left: 3px solid var(--state-warn); }

.alert-banner--danger .eyebrow { color: var(--state-danger); }
.alert-banner--brand  .eyebrow { color: var(--state-brand); }
.alert-banner--warn   .eyebrow { color: var(--state-warn); }


/* ============================================================
   Section card (generic wrapper for content blocks)
   ============================================================ */

.section-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--bg-divider);
    display: flex;
    flex-direction: column;
}
.section-card > .data-table { flex: 1; }
.section-card + .section-card { margin-top: var(--space-lg); }

.section-title {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.15em;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

.section-grid-2 {
    display: flex;
    gap: var(--space-lg);
    align-items: stretch;
}
.section-grid-2 > .section-card {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 900px) {
    .section-grid-2 { flex-direction: column; }
}

/* Footnote anchored to the bottom of its card */
.card-footnote {
    margin-top: auto;
    padding-top: var(--space-md);
    font-size: var(--type-body);
    color: var(--text-muted);
}


/* ============================================================
   Tab navigation (specific to multi-tab dashboards)
   ============================================================ */

.tab-nav {
    display: flex;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-divider);
    padding: 0 var(--space-2xl);
    gap: var(--space-md);
}
.tab-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px var(--space-md);
    color: var(--text-muted);
    font-size: var(--type-body-lg);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-nav a:hover { color: var(--text-body); text-decoration: none; }
.tab-nav a.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-cam);
}
.tab-nav a .stub-tag {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-divider);
    color: var(--text-muted);
}


/* ============================================================
   Page shell
   ============================================================ */

.page-content {
    padding: var(--space-2xl);
    max-width: 1600px;
    margin: 0 auto;
}

/* ============================================================
   Filter inputs — dark-theme defaults for text fields inside
   .filters-group / .filters-group--search (Drivers, Content,
   Outreach). Browser default is white; this aligns them with
   the CAM dark surface. Scoped to .filters-group so it does
   not leak into Identity forms or other modules.
   ============================================================ */

.filters-group input[type="text"] {
    background: var(--bg-canvas);
    color: var(--text-body);
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-size: var(--type-body);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filters-group input[type="text"]:hover {
    border-color: var(--accent-cam);
}
.filters-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-cam);
    box-shadow: 0 0 0 2px var(--accent-cam-bg);
}
.filters-group input[type="text"]::placeholder {
    color: var(--text-subtle);
}