/* ==========================================================================
   components.css — primitives (non-interactive)
   --------------------------------------------------------------------------
   Session 3, part 1. Pure CSS primitives — no JS dependencies.
   Loaded AFTER layout.css and owns reusable UI primitives (.btn, .card,
   .badge, .table, .progress-bar, .empty-state, .stat-card, .page-header,
   .status-indicator).

   Section index:
     1. Typography (h1-h6, a)
     2. Buttons        — .btn, variants, sizes, states
     3. Fields         — .field, .field-input/select/textarea/file, label/hint/error
     4. Cards          — .card, header/body/footer, variants
     5. Badges         — .badge, semantic variants, --dot, .pulse
     6. Lists          — .list, .list-item, variants
     7. Tables         — .data-table / .table (incl. mobile card-collapse)
     8. Progress       — .progress-bar
     9. State          — .state, .loading, .empty-state, .error-state
    10. Alerts         — .alert, semantic variants
    11. Metrics        — .metric, .stat-card legacy aliases, grids
    12. Page header    — .page-header (legacy)
    13. Status         — .status-indicator, .status-dot, .pulse
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Typography                                                              */
/* -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--neutral-12);
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
    font-weight: var(--weight-semibold);
    margin: 0;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--neutral-11); }

p {
    margin: 0;
    color: var(--neutral-12);
}

a {
    color: var(--accent-11);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    a:hover { color: var(--accent-10); }
}

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--neutral-3);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-xs);
    padding: 1px 6px;
    color: var(--neutral-12);
}

hr {
    border: 0;
    border-top: 1px solid var(--border-hairline);
    margin: var(--space-6) 0;
}

/* -------------------------------------------------------------------------- */
/* 2. Buttons                                                                 */
/* -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--neutral-12);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-height: var(--touch-target);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-instant) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn:active:not(:disabled):not([aria-disabled="true"]):not([data-loading="true"]) {
    transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn[data-loading="true"] {
    cursor: wait;
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.btn[data-loading="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid var(--neutral-12);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Sizes */
.btn-sm {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-sm);
    min-height: 32px;
    gap: var(--space-1-5);
}

.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-md);
    min-height: 48px;
}

/* Block (full-width) */
.btn--block { width: 100%; }

/* Icon-only */
.btn-icon {
    width: var(--touch-target);
    min-width: var(--touch-target);
    padding: 0;
    flex-shrink: 0;
}

.btn-icon.btn-sm { width: 32px; min-width: 32px; }

/* Variants */
.btn-primary {
    background: var(--accent-9);
    border-color: var(--accent-9);
    color: white;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-1);
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        background: var(--accent-10);
        border-color: var(--accent-10);
    }
}

.btn-secondary {
    background: var(--neutral-3);
    border-color: var(--border-hairline-strong);
    color: var(--neutral-12);
}

@media (hover: hover) and (pointer: fine) {
    .btn-secondary:hover {
        background: var(--neutral-4);
        border-color: var(--border-hairline-bright);
    }
}

.btn-ghost {
    background: transparent;
    color: var(--neutral-11);
}

@media (hover: hover) and (pointer: fine) {
    .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--neutral-12);
    }
}

.btn-outline {
    background: transparent;
    border-color: var(--border-hairline-strong);
    color: var(--neutral-12);
}

@media (hover: hover) and (pointer: fine) {
    .btn-outline:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--border-hairline-bright);
    }
}

.btn-danger {
    background: var(--danger-9);
    border-color: var(--danger-9);
    color: white;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-1);
}

@media (hover: hover) and (pointer: fine) {
    .btn-danger:hover {
        background: color-mix(in srgb, var(--danger-9) 88%, white);
        border-color: color-mix(in srgb, var(--danger-9) 88%, white);
    }
}

.btn-success {
    background: var(--success-9);
    border-color: var(--success-9);
    color: #062613;
    font-weight: var(--weight-semibold);
}

@media (hover: hover) and (pointer: fine) {
    .btn-success:hover {
        background: color-mix(in srgb, var(--success-9) 90%, white);
    }
}

/* -------------------------------------------------------------------------- */
/* 3. Fields (form inputs)                                                    */
/* -------------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.field-label,
.form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--neutral-11);
}

.field-input,
.field-select,
.field-textarea,
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--neutral-3);
    border: 1px solid var(--border-hairline-strong);
    border-radius: var(--radius-md);
    color: var(--neutral-12);
    font-family: inherit;
    font-size: var(--text-md);
    line-height: var(--leading-md);
    min-height: var(--touch-target);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.field-input::placeholder,
.field-textarea::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--neutral-9);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    background: var(--neutral-4);
    border-color: var(--accent-9);
}

.field-input:disabled,
.field-select:disabled,
.field-textarea:disabled,
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.field-textarea,
.form-textarea {
    resize: vertical;
    min-height: 96px;
    line-height: var(--leading-base);
}

.field-select,
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8B0C4' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
    cursor: pointer;
}

.field-hint,
.form-hint {
    font-size: var(--text-xs);
    color: var(--neutral-9);
}

.field-error {
    font-size: var(--text-xs);
    color: var(--danger-11);
}

.field--invalid .field-input,
.field--invalid .field-select,
.field--invalid .field-textarea {
    border-color: var(--danger-6);
    background: var(--danger-3);
}

.field--invalid .field-input:focus,
.field--invalid .field-select:focus,
.field--invalid .field-textarea:focus {
    border-color: var(--danger-9);
}

.field--dirty .field-input,
.field--dirty .field-select,
.field--dirty .field-textarea,
.cfg-input.dirty {
    border-color: var(--accent-6);
}

/* iOS autozoom prevention: bump font-size to 16px on small screens */
@media (max-width: 767.98px) {
    .field-input,
    .field-select,
    .field-textarea,
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px;
    }
}

/* Legacy form-group container */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

/* File input wrapper */
.field-file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--neutral-3);
    border: 1px dashed var(--border-hairline-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--neutral-11);
    font-size: var(--text-sm);
    min-height: var(--touch-target);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .field-file:hover {
        border-color: var(--accent-6);
        background: var(--neutral-4);
        color: var(--neutral-12);
    }
}

.field-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* 4. Cards                                                                   */
/* -------------------------------------------------------------------------- */

.card {
    background: var(--neutral-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.card--elevated {
    box-shadow: var(--shadow-1);
}

@media (hover: hover) and (pointer: fine) {
    .card--elevated:hover {
        box-shadow: var(--shadow-2);
        border-color: var(--border-hairline-strong);
    }
}

.card--inset { background: var(--neutral-3); }

.card--danger {
    background: var(--danger-3);
    border-color: var(--danger-6);
}

.card--accent {
    background: var(--accent-3);
    border-color: var(--accent-6);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-hairline);
}

.card-header h2,
.card-header h3,
.card-title {
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
    font-weight: var(--weight-semibold);
    color: var(--neutral-12);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.card-subtitle {
    font-size: var(--text-sm);
    color: var(--neutral-11);
    margin-top: var(--space-1);
}

.card-action {
    color: var(--accent-11);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.card-body,
.card-content {
    padding: var(--space-6);
}

.card--padded-sm .card-body,
.card--padded-sm .card-content {
    padding: var(--space-4);
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-hairline);
    background: var(--neutral-3);
}

@media (max-width: 767.98px) {
    .card-header,
    .card-footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    .card-body,
    .card-content {
        padding: var(--space-5) var(--space-4);
    }
}

/* -------------------------------------------------------------------------- */
/* 5. Badges                                                                  */
/* -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 3px var(--space-2);
    background: var(--neutral-3);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--neutral-11);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}

.badge--neutral { background: var(--neutral-3); border-color: var(--border-hairline); color: var(--neutral-11); }
.badge--accent  { background: var(--accent-3);  border-color: var(--accent-6);  color: var(--accent-11);  }
.badge--success { background: var(--success-3); border-color: var(--success-6); color: var(--success-11); }
.badge--warning { background: var(--warning-3); border-color: var(--warning-6); color: var(--warning-11); }
.badge--danger  { background: var(--danger-3);  border-color: var(--danger-6);  color: var(--danger-11);  }
.badge--info    { background: var(--info-3);    border-color: var(--info-6);    color: var(--info-11);    }

.badge--solid.badge--accent  { background: var(--accent-9);  border-color: var(--accent-9);  color: white; }
.badge--solid.badge--success { background: var(--success-9); border-color: var(--success-9); color: #062613; }
.badge--solid.badge--danger  { background: var(--danger-9);  border-color: var(--danger-9);  color: white; }
.badge--solid.badge--warning { background: var(--warning-9); border-color: var(--warning-9); color: #2A1F0E; }

/* Leading dot */
.badge--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge--pulse::before {
    animation: badge-pulse 1.6s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Legacy aliases — keep templates working until session 9 retires them */
.badge-pending             { background: var(--neutral-3);  border-color: var(--border-hairline); color: var(--neutral-11); }
.badge-in_progress         { background: var(--accent-3);   border-color: var(--accent-6);  color: var(--accent-11);  }
.badge-completed           { background: var(--success-3);  border-color: var(--success-6); color: var(--success-11); }
.badge-failed              { background: var(--danger-3);   border-color: var(--danger-6);  color: var(--danger-11);  }
.badge-created_with_errors { background: var(--warning-3);  border-color: var(--warning-6); color: var(--warning-11); }

/* -------------------------------------------------------------------------- */
/* 6. Lists                                                                   */
/* -------------------------------------------------------------------------- */

.list,
.list-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--neutral-3);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    color: var(--neutral-12);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .list-item:hover {
        background: var(--neutral-4);
        border-color: var(--border-hairline-strong);
    }
}

.list-item--clickable { cursor: pointer; }

.list-item--danger {
    border-left: 3px solid var(--danger-9);
}

.list-item--success {
    border-left: 3px solid var(--success-9);
}

.list-item-content {
    flex: 1;
    min-width: 0;
}

.list-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.list-item-title {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--neutral-12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-item-meta {
    font-size: var(--text-xs);
    color: var(--neutral-11);
    margin-top: 2px;
}

.list-item-trailing {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--neutral-9);
    font-size: var(--text-sm);
}

/* -------------------------------------------------------------------------- */
/* 7. Tables                                                                  */
/* -------------------------------------------------------------------------- */

.data-table,
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    color: var(--neutral-12);
}

.data-table thead th,
.table thead th,
.data-table th,
.table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border-bottom: 1px solid var(--border-hairline);
    color: var(--neutral-9);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}

.data-table td,
.table td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
    color: var(--neutral-12);
    font-size: var(--text-sm);
    vertical-align: middle;
}

.data-table tbody tr:last-child td,
.table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tr.is-clickable,
.table tr.is-clickable,
.data-table tr[onclick],
.table tr[onclick] {
    cursor: pointer;
    transition: background var(--duration-instant) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .data-table tr.is-clickable:hover,
    .table tr.is-clickable:hover,
    .data-table tr[onclick]:hover,
    .table tr[onclick]:hover {
        background: rgba(255, 255, 255, 0.03);
    }
}

.data-table--striped tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.data-table--compact th,
.data-table--compact td {
    padding: var(--space-2) var(--space-3);
}

/* Mobile: collapse rows to stacked card layout using data-label attrs */
@media (max-width: 767.98px) {
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td,
    .table,
    .table thead,
    .table tbody,
    .table tr,
    .table th,
    .table td {
        display: block;
    }

    .data-table thead,
    .table thead {
        position: absolute;
        left: -9999px;
    }

    .data-table tr,
    .table tr {
        background: var(--neutral-2);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
        margin-bottom: var(--space-2);
    }

    .data-table tbody tr:last-child,
    .table tbody tr:last-child {
        margin-bottom: 0;
    }

    .data-table td,
    .table td {
        border-bottom: 0;
        padding: var(--space-1-5) 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        min-width: 0;
    }

    .data-table td[data-label]::before,
    .table td[data-label]::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        color: var(--neutral-9);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        flex-shrink: 0;
    }
}

/* -------------------------------------------------------------------------- */
/* 8. Progress                                                                */
/* -------------------------------------------------------------------------- */

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--neutral-4);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: var(--accent-9);
    border-radius: inherit;
    transition: width var(--duration-slow) var(--ease-out);
}

.progress-bar--success .progress-bar-fill { background: var(--success-9); }
.progress-bar--danger  .progress-bar-fill { background: var(--danger-9); }
.progress-bar--warning .progress-bar-fill { background: var(--warning-9); }

.progress-bar--sm { height: 4px; }
.progress-bar--lg { height: 10px; }

/* -------------------------------------------------------------------------- */
/* 9. State (loading / empty / error)                                         */
/* -------------------------------------------------------------------------- */

.state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    min-height: 240px;
}

.state-icon {
    width: 48px;
    height: 48px;
    color: var(--neutral-9);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}

.state-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}

.state--loading .state-icon {
    width: 32px;
    height: 32px;
    border: 3px solid var(--neutral-6);
    border-top-color: var(--accent-9);
    border-radius: 50%;
    animation: state-spin 0.8s linear infinite;
}

.state--error .state-icon { color: var(--danger-9); }
.state--success .state-icon { color: var(--success-9); }

@keyframes state-spin {
    to { transform: rotate(360deg); }
}

.state-title {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
    font-weight: var(--weight-semibold);
    color: var(--neutral-12);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

.state-description {
    font-size: var(--text-base);
    color: var(--neutral-11);
    margin: 0;
    max-width: 420px;
}

.state .btn {
    margin-top: var(--space-3);
}

/* Legacy aliases — bare divs with .loading / .empty-state / .error-state
   that templates render via JS template literals */
.loading,
.empty-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--neutral-11);
    font-size: var(--text-base);
    min-height: 200px;
}

.error-state { color: var(--danger-11); }

/* -------------------------------------------------------------------------- */
/* 10. Alerts                                                                 */
/* -------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--neutral-3);
    color: var(--neutral-12);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.alert-error,
.alert--danger {
    background: var(--danger-3);
    border-color: var(--danger-6);
    color: var(--danger-11);
}

.alert-success,
.alert--success {
    background: var(--success-3);
    border-color: var(--success-6);
    color: var(--success-11);
}

.alert-warning,
.alert--warning {
    background: var(--warning-3);
    border-color: var(--warning-6);
    color: var(--warning-11);
}

.alert-info,
.alert--info {
    background: var(--info-3);
    border-color: var(--info-6);
    color: var(--info-11);
}

/* -------------------------------------------------------------------------- */
/* 11. Metrics & legacy stat-card                                             */
/* -------------------------------------------------------------------------- */

.metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.metric-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--neutral-9);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.metric-value {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
    font-weight: var(--weight-semibold);
    color: var(--neutral-12);
    letter-spacing: var(--tracking-tight);
}

.metric-trend {
    font-size: var(--text-xs);
    color: var(--neutral-11);
    margin-top: var(--space-1);
}

.metric-trend--up    { color: var(--success-11); }
.metric-trend--down  { color: var(--danger-11); }

/* Legacy stat-card (used by index.html dashboard until session 6 rebuilds it) */
.stat-card {
    background: var(--neutral-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.stat-card.active  { border-color: var(--accent-6); }
.stat-card.success { border-color: var(--success-6); }
.stat-card.error   { border-color: var(--danger-6); }

.stat-icon {
    font-size: var(--text-2xl);
    color: var(--accent-11);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.stat-value {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
    font-weight: var(--weight-semibold);
    color: var(--neutral-12);
    letter-spacing: var(--tracking-tight);
}

.stat-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--neutral-9);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.stat-description {
    font-size: var(--text-xs);
    color: var(--neutral-11);
}

/* Grids */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
}

.info-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.info-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 767.98px) {
    .info-grid-2,
    .info-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* 12. Page header (legacy — used by uploads/campaigns/accounts/settings)     */
/* -------------------------------------------------------------------------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
}

.page-header h1 {
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--neutral-12);
    margin: 0;
}

.page-header p,
.page-header .page-subtitle {
    font-size: var(--text-sm);
    color: var(--neutral-11);
    margin-top: var(--space-1);
}

.page-header-actions,
.page-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .page-header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    .page-header h1 {
        font-size: var(--text-xl);
        line-height: var(--leading-xl);
    }
}

/* -------------------------------------------------------------------------- */
/* 13. Status indicator + status dot                                          */
/* -------------------------------------------------------------------------- */

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--neutral-11);
}

.status-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral-7);
    transition: background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.status-indicator.connected .dot {
    background: var(--success-9);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-9) 22%, transparent);
}

.status-indicator.disconnected .dot,
.status-indicator.error .dot {
    background: var(--danger-9);
}

.status-indicator.warning .dot {
    background: var(--warning-9);
}

/* Standalone status dots — used in uploads/campaigns row name columns */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral-7);
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: var(--space-2);
}

.status-dot-pending             { background: var(--neutral-9); }
.status-dot-in_progress         { background: var(--accent-9);  }
.status-dot-completed           { background: var(--success-9); }
.status-dot-failed              { background: var(--danger-9);  }
.status-dot-created_with_errors { background: var(--warning-9); }

.pulse {
    animation: pulse-anim 1.6s ease-in-out infinite;
}

@keyframes pulse-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ==========================================================================
   Session 4 — Interactive components
   --------------------------------------------------------------------------
   14. Dialog        — .dialog-scrim, .dialog, sizes, sheet variant
   15. Dropdown menu — .dropdown-menu, .dropdown-item, .dropdown-divider
   16. Accordion     — .accordion, .accordion-item, .accordion-trigger
   17. Toast         — .toast-stack, .toast, variants
   18. Tabs          — .tablist, .tab, .tab-panel
   19. Legacy        — slideIn/slideOut keyframes for upload_detail/accounts
                       modal animations until those templates are rebuilt
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 14. Dialog (modal)                                                         */
/* -------------------------------------------------------------------------- */

.dialog-scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: var(--scrim-blur);
    -webkit-backdrop-filter: var(--scrim-blur);
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dialog-scrim[data-state="open"] {
    opacity: 1;
}

.dialog {
    background: var(--surface-glass-3);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border-hairline-bright);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-4);
    color: var(--neutral-12);
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - var(--space-8));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96);
    opacity: 0;
    transition: transform var(--duration-base) var(--ease-spring),
                opacity var(--duration-base) var(--ease-out);
    margin: auto;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dialog { background: var(--neutral-2); }
}

.dialog-scrim[data-state="open"] .dialog {
    transform: scale(1);
    opacity: 1;
}

.dialog--sm { max-width: 400px; }
.dialog--md { max-width: 560px; }
.dialog--lg { max-width: 760px; }

.dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-hairline);
    flex-shrink: 0;
}

.dialog-title {
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
    font-weight: var(--weight-semibold);
    color: var(--neutral-12);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.dialog-description {
    font-size: var(--text-sm);
    color: var(--neutral-11);
    margin-top: var(--space-1);
    line-height: var(--leading-sm);
}

.dialog-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--neutral-9);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    margin: -4px -4px 0 0;
    transition: background var(--duration-instant) var(--ease-out),
                color var(--duration-instant) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .dialog-close:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--neutral-12);
    }
}

.dialog-body {
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-hairline);
    flex-shrink: 0;
    background: var(--neutral-3);
}

/* Sheet variant — slides up from bottom on mobile */
.dialog--sheet {
    align-self: flex-end;
    margin: auto auto 0 auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: calc(100dvh - var(--space-12));
    width: 100%;
    transform: translateY(100%);
    opacity: 1;
}

.dialog-scrim[data-state="open"] .dialog--sheet {
    transform: translateY(0);
}

.dialog-handle {
    width: 36px;
    height: 4px;
    background: var(--neutral-7);
    border-radius: var(--radius-full);
    margin: var(--space-2) auto var(--space-1);
    flex-shrink: 0;
}

.dialog--sheet .dialog-footer {
    padding-bottom: calc(var(--space-4) + var(--safe-bottom));
}

@media (max-width: 480px) {
    .dialog-scrim {
        padding: 0;
        align-items: flex-end;
    }
    .dialog,
    .dialog--sm,
    .dialog--md,
    .dialog--lg {
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 92dvh;
        align-self: flex-end;
        margin: 0;
    }
}

/* -------------------------------------------------------------------------- */
/* 15. Dropdown menu                                                          */
/* -------------------------------------------------------------------------- */

.dropdown-menu {
    position: absolute;
    background: var(--surface-glass-2);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--border-hairline-bright);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    padding: var(--space-1);
    min-width: 180px;
    z-index: var(--z-dropdown);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dropdown-menu { background: var(--neutral-3); }
}

.dropdown-menu[data-state="open"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--neutral-12);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: background var(--duration-instant) var(--ease-out),
                color var(--duration-instant) var(--ease-out);
    min-height: 36px;
}

@media (hover: hover) and (pointer: fine) {
    .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}

.dropdown-item--danger { color: var(--danger-11); }

@media (hover: hover) and (pointer: fine) {
    .dropdown-item--danger:hover {
        background: var(--danger-3);
        color: var(--danger-11);
    }
}

.dropdown-item:disabled,
.dropdown-item[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.dropdown-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--neutral-9);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-hairline);
    margin: var(--space-1) calc(var(--space-1) * -1);
    border: 0;
}

.dropdown-label {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--neutral-9);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* -------------------------------------------------------------------------- */
/* 16. Accordion                                                              */
/* -------------------------------------------------------------------------- */

.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.accordion-item {
    background: var(--neutral-2);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.accordion-item[data-state="open"] {
    border-color: var(--border-hairline-strong);
    box-shadow: var(--shadow-1);
}

.accordion-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    color: var(--neutral-12);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
    user-select: none;
    min-height: var(--touch-target);
    transition: background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .accordion-trigger:hover { background: rgba(255, 255, 255, 0.03); }
}

.accordion-chevron {
    width: 16px;
    height: 16px;
    color: var(--neutral-9);
    transition: transform var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
    margin-left: auto;
}

.accordion-item[data-state="open"] .accordion-chevron {
    transform: rotate(90deg);
}

.accordion-content {
    padding: var(--space-4) var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-hairline);
    display: none;
}

.accordion-item[data-state="open"] .accordion-content {
    display: block;
}

/* -------------------------------------------------------------------------- */
/* 17. Toast                                                                  */
/* -------------------------------------------------------------------------- */

.toast-stack {
    position: fixed;
    bottom: calc(var(--space-4) + var(--safe-bottom));
    right: calc(var(--space-4) + var(--safe-right));
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    max-width: min(420px, calc(100vw - var(--space-8)));
}

@media (max-width: 767.98px) {
    .toast-stack {
        bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--space-3));
        left: var(--space-3);
        right: var(--space-3);
        max-width: none;
    }
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-glass-2);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--border-hairline-bright);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    color: var(--neutral-12);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    transform: translateY(20px);
    opacity: 0;
    transition: transform var(--duration-base) var(--ease-spring),
                opacity var(--duration-base) var(--ease-out);
    min-height: 44px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .toast { background: var(--neutral-3); }
}

.toast--visible {
    transform: translateY(0);
    opacity: 1;
}

.toast--leaving {
    transform: translateY(20px);
    opacity: 0;
}

.toast--success { border-left: 3px solid var(--success-9); }
.toast--danger,
.toast--error   { border-left: 3px solid var(--danger-9); }
.toast--warning { border-left: 3px solid var(--warning-9); }
.toast--info    { border-left: 3px solid var(--info-9); }

.toast-message {
    flex: 1;
    min-width: 0;
    color: var(--neutral-12);
    word-wrap: break-word;
}

.toast-action {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--accent-11);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .toast-action:hover { color: var(--accent-10); }
}

.toast-close {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--neutral-9);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    margin: -2px -4px -2px 0;
    transition: background var(--duration-instant) var(--ease-out),
                color var(--duration-instant) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .toast-close:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--neutral-12);
    }
}

/* -------------------------------------------------------------------------- */
/* 18. Tabs                                                                   */
/* -------------------------------------------------------------------------- */

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

.tablist {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-hairline);
    overflow-x: auto;
    scrollbar-width: none;
}

.tablist::-webkit-scrollbar { display: none; }

.tab {
    background: transparent;
    border: 0;
    padding: var(--space-3) var(--space-4);
    color: var(--neutral-11);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-sm);
    cursor: pointer;
    position: relative;
    transition: color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: var(--space-3);
    right: var(--space-3);
    height: 2px;
    background: transparent;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    transition: background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .tab:hover { color: var(--neutral-12); }
}

.tab[aria-selected="true"] {
    color: var(--accent-11);
}

.tab[aria-selected="true"]::after {
    background: var(--accent-9);
}

.tab[disabled],
.tab[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tab-panel { outline: none; }
.tab-panel[hidden] { display: none; }

/* -------------------------------------------------------------------------- */
/* 19. Legacy keyframes (used by upload_detail.html / accounts.html embedded  */
/*     modal CSS until those templates are rebuilt in sessions 7-8)           */
/* -------------------------------------------------------------------------- */

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(400px); opacity: 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}