/* ============================================
   W3 Dashboard - Components
   Cards, Tables, Badges, Buttons, Forms
   ============================================ */

/* ---- Stat Cards ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.2s;
}

.stat-card:hover { box-shadow: var(--shadow-sm); }

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.stat-card-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

.stat-card-icon svg {
    width: 20px; height: 20px;
}

.stat-card-icon.blue   { background: var(--accent-primary-light); color: var(--accent-primary); }
.stat-card-icon.green  { background: var(--success-bg); color: var(--success); }
.stat-card-icon.purple { background: rgba(124,58,237,0.1); color: var(--accent-secondary); }
.stat-card-icon.amber  { background: var(--warning-bg); color: var(--warning); }

.stat-card-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.stat-card-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat-card-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-top: var(--space-2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.stat-card-delta.positive { background: var(--success-bg); color: var(--success); }
.stat-card-delta.negative { background: var(--error-bg); color: var(--error); }

/* ---- Section Card ---- */
.section-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-6);
}

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

.section-card-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

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

.section-card-body.no-pad { padding: 0; }

/* ---- Data Table ---- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table th {
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    text-align: start;
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
}

.data-table th:hover { color: var(--text-primary); }

.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
    color: var(--text-primary);
}

.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover { background: var(--bg-surface-alt); }

.data-table .mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.data-table .dimmed {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* ---- Badge ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }
.badge-info    { background: var(--info-bg);     color: var(--info);    border: 1px solid var(--info-border); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    font-family: var(--font-sans);
}

.btn-primary {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.btn-primary:hover { background: var(--accent-primary-hover); }

.btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-primary);
}
.btn-secondary:hover {
    background: var(--bg-surface-alt);
    border-color: var(--text-tertiary);
}

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

.btn svg { width: 16px; height: 16px; }

/* ---- Tabs ---- */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: var(--space-6);
}

.tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    background: none;
    font-family: var(--font-sans);
}

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

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

/* ---- Health Components ---- */
.health-banner {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    font-weight: 600;
    font-size: var(--text-sm);
}

.health-banner.ok      { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.health-banner.warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.health-banner.error   { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }

.health-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-secondary);
}
.health-row:last-child { border-bottom: none; }

.health-row-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
}

.health-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.health-dot.green  { background: var(--success); }
.health-dot.yellow { background: var(--warning); }
.health-dot.red    { background: var(--error); }

.health-row-value {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* ---- Service Cards ---- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.service-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}

.service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.service-card-name { font-weight: 600; font-size: var(--text-sm); }

.progress-bar {
    height: 6px;
    background: var(--bg-surface-alt);
    border-radius: 3px;
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.progress-bar-fill.green  { background: var(--success); }
.progress-bar-fill.yellow { background: var(--warning); }
.progress-bar-fill.red    { background: var(--error); }

.metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.metric-value {
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ---- Filter Bar ---- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.filter-select, .filter-search {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
}

.filter-search { min-width: 200px; }
.filter-search:focus, .filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.filter-spacer { flex: 1; }

/* ---- Date Range ---- */
.date-range {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.date-preset {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.date-preset:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.date-preset.active { background: var(--accent-primary); color: white; border-color: var(--accent-primary); }

/* ---- Pagination ---- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
}

.pagination-btn {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.pagination-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.pagination-btn.active { background: var(--accent-primary); color: white; border-color: var(--accent-primary); }

/* ---- Activity Feed ---- */
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-secondary);
}
.activity-item:last-child { border-bottom: none; }

.activity-icon {
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.activity-icon.ocr  { background: var(--accent-primary-light); color: var(--accent-primary); }
.activity-icon.ai   { background: rgba(124,58,237,0.1); color: var(--accent-secondary); }
.activity-icon.auth { background: var(--warning-bg); color: var(--warning); }

.activity-text { flex: 1; font-size: var(--text-sm); }

.activity-time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* ---- Chart Container ---- */
.chart-container {
    position: relative;
    height: 250px;
    padding: var(--space-4) var(--space-6);
}

/* ---- Modal ---- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100;
    align-items: center;
    justify-content: center;
}
.modal-overlay.show { display: flex; }

.modal {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    min-width: 400px;
    max-width: 520px;
    box-shadow: var(--shadow-lg);
}

.modal-title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-6); }

.form-group { margin-bottom: var(--space-5); }

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-start;
    margin-top: var(--space-6);
}

/* ---- Settings ---- */
.settings-group { margin-bottom: var(--space-8); }

.settings-group-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-primary);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-secondary);
}

.settings-label { font-size: var(--text-sm); font-weight: 500; }
.settings-desc { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }

.toggle {
    width: 44px; height: 24px;
    background: #D1D5DB;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle.active { background: var(--accent-primary); }
.toggle::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    inset-inline-start: 2px;
    transition: transform 0.2s;
    box-shadow: var(--shadow-sm);
}
.toggle.active::after { transform: translateX(-20px); }
html[dir="ltr"] .toggle.active::after { transform: translateX(20px); }

/* ---- Loading / Empty / Error States ---- */
.loading-state, .empty-state, .error-state {
    text-align: center;
    padding: var(--space-10);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

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

.inline-error {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--error-border, rgba(220,38,38,0.2));
    background: var(--error-bg, rgba(220,38,38,0.08));
    color: var(--error, #DC2626);
    font-size: var(--text-sm);
}

.loading-spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--space-3);
}

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

/* ---- Last Update ---- */
.last-update {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    padding: var(--space-4) 0;
}

/* ---- KPI Grid (alias for stats-grid) ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

/* ---- Tab Content ---- */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---- Health Dot Status Classes ---- */
.health-dot.success { background: var(--success); }
.health-dot.warning { background: var(--warning); }
.health-dot.error   { background: var(--error); }

/* ---- Health Banner Status Classes ---- */
.health-banner.healthy   { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.health-banner.degraded  { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.health-banner.unhealthy { background: var(--error-bg);   color: var(--error);   border: 1px solid var(--error-border); }

/* ---- Infrastructure Live Visual ---- */
.infra-visual {
    position: relative;
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: radial-gradient(circle at 20% 20%, rgba(59,130,246,0.12), transparent 45%),
                radial-gradient(circle at 80% 30%, rgba(124,58,237,0.12), transparent 45%),
                linear-gradient(135deg, #0f172a, #111827 50%, #0b1224);
    overflow: hidden;
    color: #e5edff;
}
.infra-visual::before {
    content: '';
    position: absolute;
    inset: -50% -50%;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 80px),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 80px);
    transform: rotate(3deg);
    animation: grid-scan 14s linear infinite;
}
.infra-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.18), transparent 55%);
    pointer-events: none;
}

.infra-visual-header {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.06);
    color: #e5edff;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: pulse-ring 2.4s infinite;
}

.infra-visual-nodes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.infra-node {
    position: relative;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.infra-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.16);
}
.infra-node .node-pulse {
    position: absolute;
    inset: -10%;
    border-radius: 24px;
    background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 55%);
    opacity: 0.8;
    animation: shimmer 6s ease-in-out infinite;
}
.infra-node.status-healthy .node-pulse { background: radial-gradient(circle, rgba(34,197,94,0.16), transparent 55%); }
.infra-node.status-degraded .node-pulse { background: radial-gradient(circle, rgba(234,179,8,0.18), transparent 55%); }
.infra-node.status-unhealthy .node-pulse { background: radial-gradient(circle, rgba(239,68,68,0.18), transparent 55%); }

.infra-node-name {
    position: relative;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #e5edff;
    margin-bottom: var(--space-2);
}
.infra-node-status {
    position: relative;
    font-size: var(--text-sm);
    color: rgba(229, 237, 255, 0.82);
    margin-bottom: var(--space-3);
}
.infra-node-metrics {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.infra-node-latency {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.7);
    font-family: var(--font-mono);
}

.mini-meter {
    position: relative;
}
.mini-meter-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.8);
    margin-bottom: 6px;
}
.mini-meter-value {
    font-family: var(--font-mono);
    color: rgba(255,255,255,0.9);
}
.mini-meter-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.mini-meter-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes shimmer {
    0% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(-4px); opacity: 0.5; }
    100% { transform: translateY(0); opacity: 0.7; }
}
@keyframes grid-scan {
    0% { transform: rotate(3deg) translateY(0); }
    100% { transform: rotate(3deg) translateY(-40px); }
}

/* ---- Health Row extras ---- */
.health-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    flex: 1;
}

.health-value {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* ---- Activity Feed extras ---- */
.activity-feed {
    padding: var(--space-4) var(--space-6);
    max-height: 320px;
    overflow-y: auto;
}

.activity-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.activity-dot.success { background: var(--success); }
.activity-dot.error   { background: var(--error); }
.activity-dot.warning { background: var(--warning); }

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

/* ---- Filter Input ---- */
.filter-input {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    min-width: 200px;
}
.filter-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ---- Modal Structure ---- */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.modal-body { margin-bottom: var(--space-6); }

.modal-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: flex-start;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }

/* ---- Pagination extras ---- */
.pagination-info {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.pagination-buttons {
    display: flex;
    gap: var(--space-2);
}

/* ---- Metric Bar (Infrastructure) ---- */
.metric-bar-wrapper {
    margin-bottom: var(--space-3);
}

.metric-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.service-card-metrics {
    margin-top: var(--space-3);
}

.service-card-metric-text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-top: var(--space-2);
}

/* ---- Date Presets in Topbar ---- */
.date-presets {
    display: flex;
    gap: var(--space-1);
}

/* ---- Form Grid ---- */
.form-grid {
    display: grid;
    gap: var(--space-4);
}

/* ---- Section Card direct content padding ---- */
.section-card > .data-table { margin: 0; }
.section-card > .empty-state { margin: var(--space-6); }
.section-card > .filter-bar { margin: var(--space-4) var(--space-6); }

/* ---- Checkbox Toggle (for settings) ---- */
.toggle {
    display: inline-block;
}

.toggle input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    display: inline-block;
    width: 44px; height: 24px;
    background: #D1D5DB;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    inset-inline-start: 2px;
    transition: transform 0.2s;
    box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle-slider {
    background: var(--accent-primary);
}

.toggle input:checked + .toggle-slider::after {
    transform: translateX(-20px);
}

html[dir="ltr"] .toggle input:checked + .toggle-slider::after {
    transform: translateX(20px);
}

/* ---- Code inline ---- */
code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--bg-surface-alt);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
}

/* ---- Settings Engine Cards ---- */
.settings-engine-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.engine-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-primary);
    margin-top: var(--space-3);
}

.detail-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-primary);
    white-space: nowrap;
}

.engine-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* ---- Section Card Subtitle ---- */
.section-card-subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    font-weight: 400;
}

/* ---- Button Error variant ---- */
.btn-error {
    background: var(--error);
    color: #fff;
    border: none;
}
.btn-error:hover {
    background: #B91C1C;
}

/* ---- Form full-width field ---- */
.form-grid .full-width {
    grid-column: 1 / -1;
}

/* ---- Ollama Pull Status ---- */
.pull-status-container {
    margin-top: var(--space-3);
}

.pull-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-primary);
}

.pull-status.success {
    background: var(--success-bg);
    border-color: var(--success);
}

.pull-status.error {
    background: var(--error-bg, rgba(220,38,38,0.05));
    border-color: var(--error);
}

.pull-status-icon {
    flex-shrink: 0;
}

.pull-status-icon .spinner {
    animation: spin 1.2s linear infinite;
    color: var(--accent-primary);
}

.badge-neutral {
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
}

.badge-info {
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-primary);
}

/* ═══════════════════════════════════════════════════
   Infrastructure Page — Topology, ECS, AWS, Gauges
   ═══════════════════════════════════════════════════ */

/* ---- Topology Container ---- */
.infra-topology {
    position: relative;
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: radial-gradient(ellipse at 30% 20%, rgba(59,130,246,0.10), transparent 50%),
                radial-gradient(ellipse at 70% 30%, rgba(124,58,237,0.08), transparent 50%),
                linear-gradient(135deg, #0f172a, #111827 50%, #0b1224);
    color: #e5edff;
    overflow: hidden;
}
.infra-topology::before {
    content: '';
    position: absolute;
    inset: -50% -50%;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 1px, transparent 80px),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 1px, transparent 80px);
    transform: rotate(2deg);
    animation: grid-scan 20s linear infinite;
    pointer-events: none;
}

.topo-header {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.05);
    font-size: var(--text-sm); font-weight: 500;
    margin-bottom: var(--space-6);
}
.topo-version {
    margin-inline-start: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    opacity: 0.6;
}

.topo-canvas {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
}

/* ---- Topology Nodes ---- */
.topo-node {
    position: relative;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    text-align: center;
    min-width: 140px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.topo-node:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.2);
}
.topo-node--gw {
    padding: var(--space-5) var(--space-8);
    border-color: rgba(59,130,246,0.3);
    background: rgba(59,130,246,0.06);
}

.topo-node-glow {
    position: absolute; inset: -20%;
    border-radius: 50%;
    opacity: 0.6;
    animation: shimmer 5s ease-in-out infinite;
    pointer-events: none;
}
.topo-node.status-success .topo-node-glow { background: radial-gradient(circle, rgba(34,197,94,0.15), transparent 60%); }
.topo-node.status-warning .topo-node-glow { background: radial-gradient(circle, rgba(234,179,8,0.18), transparent 60%); }
.topo-node.status-error   .topo-node-glow { background: radial-gradient(circle, rgba(239,68,68,0.18), transparent 60%); }

.topo-node-icon {
    position: relative;
    width: 28px; height: 28px;
    margin: 0 auto var(--space-2);
    color: rgba(255,255,255,0.75);
}
.topo-node-icon svg { width: 100%; height: 100%; }
.topo-node--gw .topo-node-icon { width: 32px; height: 32px; color: rgba(147,197,253,0.9); }

.topo-node-name {
    position: relative;
    font-weight: 700; font-size: var(--text-sm);
    letter-spacing: 0.01em; color: #e5edff;
    margin-bottom: var(--space-1);
}
.topo-node-status {
    position: relative;
    font-size: var(--text-xs);
    color: rgba(229, 237, 255, 0.75);
    margin-bottom: var(--space-2);
}
.topo-node-meta {
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-1);
}
.topo-node-meta span {
    font-size: 10px;
    font-family: var(--font-mono);
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.05);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.topo-node-type { text-transform: capitalize; }

/* ---- Animated Arrows ---- */
.topo-arrows {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-3) 0;
}
.topo-arrow {
    width: 2px;
    height: 40px;
    position: relative;
}
.topo-arrow-line {
    width: 2px; height: 100%;
    background: linear-gradient(to bottom, rgba(59,130,246,0.5), rgba(59,130,246,0.15));
    border-radius: 1px;
    position: relative;
    overflow: visible;
}
.topo-arrow-dot {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59,130,246,0.6);
    left: -2px;
    animation: flow-down 1.8s ease-in-out infinite;
}
.topo-arrow:nth-child(2) .topo-arrow-dot { animation-delay: 0.3s; }
.topo-arrow:nth-child(3) .topo-arrow-dot { animation-delay: 0.6s; }
.topo-arrow:nth-child(4) .topo-arrow-dot { animation-delay: 0.9s; }
.topo-arrow:nth-child(5) .topo-arrow-dot { animation-delay: 1.2s; }
.topo-arrow:nth-child(6) .topo-arrow-dot { animation-delay: 1.5s; }

@keyframes flow-down {
    0%   { top: -4px; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: calc(100% - 2px); opacity: 0; }
}

.topo-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    width: 100%;
    max-width: 900px;
}

/* ---- ECS Grid ---- */
.ecs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
}
.ecs-service {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-secondary);
}
.ecs-service-header {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.ecs-service-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ecs-service-name {
    font-weight: 600; font-size: var(--text-sm);
    font-family: var(--font-mono);
}
.ecs-service-counts {
    display: flex; align-items: center; gap: var(--space-2);
}
.ecs-bar-track {
    flex: 1; height: 6px;
    background: var(--border-secondary);
    border-radius: 3px;
    overflow: hidden;
}
.ecs-bar-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.4s ease;
}
.ecs-service-ratio {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ---- AWS Cards Grid ---- */
.aws-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}
.aws-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}
.aws-card-header {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-secondary);
}
.aws-card-icon {
    width: 24px; height: 24px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.aws-card-icon svg { width: 100%; height: 100%; }
.aws-card-title {
    font-weight: 600; font-size: var(--text-sm);
    flex: 1;
}
.aws-card-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-secondary);
    font-size: var(--text-sm);
}
.aws-card-row:last-child { border-bottom: none; }
.aws-card-label { color: var(--text-secondary); }
.aws-card-value {
    font-family: var(--font-mono);
    font-weight: 500;
}
.aws-card-warn {
    color: var(--error);
    font-weight: 600;
}

/* ---- Database Gauges ---- */
.db-gauges {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    padding: var(--space-4) 0;
    margin-bottom: var(--space-3);
}
.db-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.gauge-svg { display: block; }
.gauge-fill {
    transition: stroke-dashoffset 0.6s ease;
}
.gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    margin-top: -8px;
}
.gauge-value {
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    line-height: 1;
}
.gauge-label {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.gauge-subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-top: var(--space-2);
}
.db-details {
    padding: 0 var(--space-2);
}

/* ---- Docs Page ---- */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
}
.doc-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.doc-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.1);
}
.doc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.doc-audience {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
.doc-card-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.doc-card-meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}
.doc-card-changes {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.doc-card-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}
.doc-markdown-raw {
    direction: ltr;
    text-align: left;
}

/* ---- Queue Tab ---- */
.queue-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning);
    margin-inline-end: 4px;
    animation: queue-pulse-anim 1.2s ease-in-out infinite;
}
@keyframes queue-pulse-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.queue-refresh-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: queue-pulse-anim 2s ease-in-out infinite;
}

/* ---- Two-Column Layout ---- */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-6);
}
@media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }
}

/* ---- Health Detail Cards ---- */
.health-detail-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}
.health-detail-card {
    background: var(--bg-page);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.health-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.health-detail-name {
    font-weight: 600;
    font-size: var(--text-sm);
}
.health-detail-meta {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-2);
}
.health-detail-item {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ============================================
   OCR Tester Page
   ============================================ */

/* Dropzone */
.dropzone {
    border: 2px dashed var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}
.dropzone:hover,
.dropzone.drag-over {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}
.dropzone-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-2);
    opacity: 0.5;
}
.dropzone-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.dropzone-text strong {
    color: var(--accent-primary);
}
.dropzone-file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
}
.dropzone-file-name {
    flex: 1;
    font-weight: 500;
    font-size: var(--text-sm);
}
.dropzone-file-size {
    color: var(--text-muted);
    font-size: var(--text-xs);
}
.dropzone-file-remove {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.2rem;
    padding: 0 var(--space-1);
    border: none;
    background: none;
    transition: color 0.2s;
}
.dropzone-file-remove:hover {
    color: var(--error);
}

/* Code block */
.code-block {
    background: #1a1a2e;
    color: #e0e0e0;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    overflow-x: auto;
    white-space: pre;
    line-height: 1.6;
    max-height: 350px;
    direction: ltr;
    text-align: left;
}
.code-block .code-keyword { color: #c792ea; }
.code-block .code-string  { color: #c3e88d; }
.code-block .code-url     { color: #82aaff; }
.code-block .code-comment { color: #676e95; font-style: italic; }

/* Quality meter */
.quality-meter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.quality-meter-bar {
    width: 100px;
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
}
.quality-meter-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
}
.quality-meter-fill.high   { background: var(--success); }
.quality-meter-fill.medium { background: var(--warning); }
.quality-meter-fill.low    { background: var(--error); }
.quality-meter-value {
    font-weight: 600;
    font-size: var(--text-sm);
    min-width: 2.5rem;
}

/* Result tabs */
.result-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: var(--space-4);
    overflow-x: auto;
}
.result-tab {
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.2s;
}
.result-tab:hover {
    color: var(--text-primary);
}
.result-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 500;
}
.result-content {
    display: none;
}
.result-content.active {
    display: block;
}

/* Text output */
.text-output {
    max-height: 500px;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Options grid */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.option-card {
    padding: var(--space-3);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.option-card:hover {
    border-color: var(--accent-primary);
}
.option-card.selected {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.06);
}
.option-card-title {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}
.option-card-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Toggle switch for OCR tester */
.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--bg-tertiary);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch.active {
    background: var(--accent-primary);
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch.active::after {
    transform: translateX(18px);
}
.toggle-label {
    font-size: var(--text-sm);
}

/* KPI mini row for results */
.result-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.result-kpi {
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    text-align: center;
}
.result-kpi-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}
.result-kpi-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* PII badges */
.pii-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.pii-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-full);
    color: var(--error);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* Image gallery for async results */
.images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}
.image-thumb {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}
.image-thumb:hover {
    transform: scale(1.02);
}
.image-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.image-thumb-label {
    padding: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-surface);
}

/* API key status */
.key-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
}
.key-status.valid {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}
.key-status.invalid {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}
.key-status.checking {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
}

/* ── Alerts Banner ── */
.alerts-banner {
    background: #fffbeb;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    color: #92400e;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #fde68a;
}
.alerts-dismiss {
    background: none;
    border: 1px solid #d97706;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    color: #92400e;
    padding: 2px 8px;
    transition: background 0.15s;
}
.alerts-dismiss:hover { background: #fde68a; }
.alerts-section {
    margin-bottom: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.alerts-section:last-child { margin-bottom: 0; }
.alerts-section-title {
    font-weight: 600;
    font-size: 13px;
    color: #92400e;
    padding: 10px 14px;
    background: #fef3c7;
    border-bottom: 1px solid #e5e7eb;
}
.alerts-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.alerts-row {
    display: table-row;
    font-size: 13px;
}
.alerts-row:not(:last-child) > * {
    border-bottom: 1px solid #f3f4f6;
}
.alerts-row:hover > * {
    background: #f9fafb;
}
.alerts-row > * {
    display: table-cell;
    padding: 10px 14px;
    vertical-align: middle;
    white-space: nowrap;
}
.alerts-key-prefix {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    color: #6b7280;
    width: 110px;
}
.alerts-org, .alerts-org-name {
    color: #111827;
    font-weight: 500;
    width: 120px;
}
.alerts-username {
    color: #111827;
    font-weight: 500;
    width: 180px;
}
.alerts-last-used {
    color: #9ca3af;
    font-size: 12px;
}
.alerts-more {
    text-align: center;
    font-size: 12px;
    color: #92400e;
    padding: 8px;
    background: #fffbeb;
}
.btn-primary-sm {
    background: var(--accent-primary, #2563eb);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-primary-sm:hover { opacity: 0.9; }
.btn-primary-sm:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline-sm {
    background: transparent;
    color: var(--accent-primary, #2563eb);
    border: 1px solid var(--accent-primary, #2563eb);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-outline-sm:hover { background: rgba(37,99,235,0.05); }
.btn-error { background: #dc3545 !important; border-color: #dc3545 !important; color: white !important; }
.badge-error { background: #fecaca; color: #dc2626; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge-warning { background: #fed7aa; color: #ea580c; padding: 2px 8px; border-radius: 10px; font-size: 11px; }

/* Key modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.modal-content {
    background: white; border-radius: 12px; padding: 24px;
    max-width: 500px; width: 90%;
}
.modal-warning { color: #dc2626; font-weight: 500; }
.modal-info { color: #666; font-size: 13px; }
.key-display {
    display: flex; gap: 8px; align-items: center;
    background: #f3f4f6; padding: 12px; border-radius: 6px; margin: 12px 0;
}
.key-display code { flex: 1; word-break: break-all; font-size: 12px; }
.btn-copy {
    background: var(--accent-primary, #2563eb); color: white;
    border: none; border-radius: 4px; padding: 6px 12px;
    font-size: 12px; cursor: pointer;
}
.modal-close {
    display: block; width: 100%; margin-top: 12px;
    padding: 10px; font-size: 14px;
}

/* ═══ Health Grid (Blueprint-aligned) ═══ */
.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3, 12px);
}
.health-grid-group-label {
    grid-column: 1 / -1;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1, 4px) 0 0;
    border-top: 1px solid var(--border, #e5e7eb);
    margin-top: var(--space-2, 8px);
}
.health-grid-group-label:first-child { border-top: none; margin-top: 0; }
.health-card {
    display: flex; align-items: center; gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface-alt, #F1F3F6);
    transition: background 0.15s, box-shadow 0.15s;
    min-height: 44px;
}
.health-card:hover { background: var(--bg-surface, #fff); box-shadow: var(--shadow-xs); }
.health-card-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--text-secondary, #6B7280); }
.health-card-icon svg { width: 100%; height: 100%; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.health-dot.success { background: var(--semantic-success, #059669); }
.health-dot.warning { background: var(--semantic-warning, #D97706); }
.health-dot.error { background: var(--semantic-error, #DC2626); }
.health-dot.unknown { background: var(--text-muted, #9CA3AF); }
.health-card-info { flex: 1; min-width: 0; }
.health-card-name { font-weight: 500; font-size: var(--text-sm, 0.875rem); color: var(--text-primary, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-card-meta { font-size: var(--text-xs, 0.75rem); color: var(--text-muted, #9CA3AF); }

/* ═══ Locked user row ═══ */
tr.row-locked { background: color-mix(in srgb, var(--semantic-error, #DC2626) 5%, transparent); }
[data-theme="dark"] tr.row-locked { background: color-mix(in srgb, var(--semantic-error, #DC2626) 8%, transparent); }

/* ═══ Action badge (audit) ═══ */
.badge-action {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--text-xs, 0.75rem);
    background: var(--bg-surface-alt, #F1F3F6);
    padding: 2px 8px;
    border-radius: var(--radius-sm, 4px);
}

/* ═══ Modal error message ═══ */
.modal-error {
    color: var(--semantic-error, #DC2626);
    font-size: var(--text-sm, 0.875rem);
    margin-top: var(--space-2, 8px);
    min-height: 1.4em;
}

/* ═══ Expandable org row ═══ */
.org-expand {
    background: var(--bg-surface-alt, #F1F3F6);
    padding: var(--space-4, 16px);
    border-top: 1px solid var(--border, #e5e7eb);
    animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}
.org-expand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4, 16px);
}
.org-expand-section h4 {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    margin-bottom: var(--space-2, 8px);
    color: var(--text-secondary, #6B7280);
}
.org-mini-table { width: 100%; font-size: var(--text-xs, 0.75rem); }
.org-mini-table td { padding: 4px 8px; border-bottom: 1px solid var(--border, #e5e7eb); }

/* ═══ Deploy alert badges ═══ */
.deploy-badge {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--text-xs, 0.75rem);
}
.deploy-badge.in-progress {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ═══ Optgroup filter styling ═══ */
.filter-select optgroup {
    font-weight: 600;
    color: var(--text-primary, #111827);
}
.filter-select option {
    font-weight: 400;
}

/* ═══ Audit stats mini bar ═══ */
.audit-stats-bar {
    display: flex; gap: var(--space-3, 12px); padding: var(--space-2, 8px) 0;
    font-size: var(--text-xs, 0.75rem); color: var(--text-secondary, #6B7280);
    flex-wrap: wrap; align-items: center;
}
.audit-stats-bar .stat-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-surface-alt, #F1F3F6);
    padding: 2px 10px; border-radius: var(--radius-full, 9999px);
}
.audit-stats-bar .stat-dot {
    width: 6px; height: 6px; border-radius: 50%;
}