/* Upload Health Monitor styles */
.mon-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.mon-filter-bar { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 12px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mon-filter-bar label { font-size: 13px; font-weight: 500; color: #475569; }
.mon-filter-bar input, .mon-filter-bar select { font-size: 13px; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #1a1a2e; outline: none; transition: border-color 0.15s; }
.mon-filter-bar input:focus, .mon-filter-bar select:focus { border-color: #2563eb; }
.mon-filter-bar .btn { font-size: 13px; padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #475569; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.mon-filter-bar .btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.mon-filter-bar .btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.mon-filter-bar .btn-primary:hover { background: #1d4ed8; }

.refresh-indicator { display: flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 6px; padding: 6px 12px; font-size: 13px; color: #64748b; }
.refresh-indicator .countdown { font-weight: 600; color: #2563eb; min-width: 24px; text-align: center; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; animation: mon-pulse 2s infinite; }
.status-dot.error { background: #ef4444; }
@keyframes mon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Staleness Banner */
.staleness-banner {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #92400e;
}
.staleness-banner.critical {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}
.staleness-age {
    margin-left: auto;
    font-family: monospace;
    font-size: 12px;
    opacity: 0.7;
}

/* Summary Cards */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.summary-card { background: #fff; border-radius: 8px; padding: 20px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.summary-card .label { font-size: 12px; font-weight: 500; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.summary-card .value { font-size: 28px; font-weight: 700; color: #1a1a2e; margin-top: 4px; }
.summary-card .sub { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.summary-card.success .value { color: #16a34a; }
.summary-card.warning .value { color: #d97706; }
.summary-card.danger .value { color: #dc2626; }

/* Section */
.section { background: #fff; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); margin-bottom: 24px; }
.section-header { padding: 16px 20px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }
.section-header h2 { font-size: 15px; font-weight: 600; color: #1a1a2e; }
.section-header .badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #f1f5f9; color: #475569; font-weight: 500; }
.section-body { padding: 16px 20px; overflow-x: auto; }

/* Camera Grid */
.camera-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.camera-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; cursor: pointer; transition: all 0.15s; position: relative; }
.camera-card:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,0.1); }
.camera-card .cam-name { font-size: 13px; font-weight: 600; color: #1a1a2e; word-break: break-all; }
.camera-card .cam-stats { font-size: 12px; color: #64748b; margin-top: 6px; }
.camera-card .cam-rate { position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.camera-card.green { border-left: 3px solid #22c55e; }
.camera-card.green .cam-rate { background: #dcfce7; color: #16a34a; }
.camera-card.yellow { border-left: 3px solid #eab308; }
.camera-card.yellow .cam-rate { background: #fef9c3; color: #a16207; }
.camera-card.red { border-left: 3px solid #ef4444; }
.camera-card.red .cam-rate { background: #fee2e2; color: #dc2626; }
.camera-card.grey { border-left: 3px solid #94a3b8; }
.camera-card.grey .cam-rate { background: #f1f5f9; color: #64748b; }

/* Monitoring Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.data-table tr:hover td { background: #f8fafc; }
.data-table .mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
.error-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; font-family: 'SF Mono', monospace; }
.error-badge.h5-empty { background: #fef3c7; color: #92400e; }
.error-badge.b2-fail { background: #fee2e2; color: #991b1b; }
.error-badge.default { background: #f1f5f9; color: #475569; }

/* Empty/Loading */
.empty-state { text-align: center; padding: 48px 24px; color: #94a3b8; }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.empty-state h3 { font-size: 16px; color: #64748b; margin-bottom: 8px; }
.empty-state p { font-size: 13px; max-width: 400px; margin: 0 auto; }
.loading-state { text-align: center; padding: 40px; color: #94a3b8; }

/* Responsive */
@media (max-width: 768px) {
    .mon-header { padding: 12px 16px; }
    .mon-filter-bar { padding: 10px 16px; }
    .summary-cards { grid-template-columns: repeat(2, 1fr); }
    .camera-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 8px; }
}
@media (max-width: 480px) {
    .summary-cards { grid-template-columns: 1fr; }
    .mon-filter-bar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Dark Mode
   ============================================================ */

/* Header & filter bar */
[data-theme="dark"] .mon-header { background: #16213e; border-color: #2a2a4a; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .mon-filter-bar { background: #16213e; border-color: #2a2a4a; }
[data-theme="dark"] .mon-filter-bar label { color: #a0a0a0; }
[data-theme="dark"] .mon-filter-bar input,
[data-theme="dark"] .mon-filter-bar select { background: #1a1a2e; color: #e0e0e0; border-color: #2a2a4a; }
[data-theme="dark"] .mon-filter-bar input:focus,
[data-theme="dark"] .mon-filter-bar select:focus { border-color: #64b5f6; }
[data-theme="dark"] .mon-filter-bar .btn { background: #1a1a2e; color: #a0a0a0; border-color: #2a2a4a; }
[data-theme="dark"] .mon-filter-bar .btn:hover { background: #16213e; border-color: #4a4a6a; }
[data-theme="dark"] .mon-filter-bar .btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
[data-theme="dark"] .mon-filter-bar .btn-primary:hover { background: #1d4ed8; }

/* Refresh indicator */
[data-theme="dark"] .refresh-indicator { background: #1a1a2e; color: #a0a0a0; }
[data-theme="dark"] .refresh-indicator .countdown { color: #64b5f6; }

/* Staleness banner */
[data-theme="dark"] .staleness-banner { background: #3e2723; border-color: #5c4a20; color: #ffcc80; }
[data-theme="dark"] .staleness-banner.critical { background: #4a0000; border-color: #7a2020; color: #ef9a9a; }

/* Summary cards */
[data-theme="dark"] .summary-card { background: #0f3460; border-color: #2a2a4a; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .summary-card .label { color: #a0a0a0; }
[data-theme="dark"] .summary-card .value { color: #e0e0e0; }
[data-theme="dark"] .summary-card .sub { color: #6c757d; }
[data-theme="dark"] .summary-card.success .value { color: #66bb6a; }
[data-theme="dark"] .summary-card.warning .value { color: #ffa726; }
[data-theme="dark"] .summary-card.danger .value { color: #ef5350; }

/* Sections */
[data-theme="dark"] .section { background: #0f3460; border-color: #2a2a4a; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .section-header { border-color: #2a2a4a; }
[data-theme="dark"] .section-header h2 { color: #e0e0e0; }
[data-theme="dark"] .section-header .badge { background: #2a2a4a; color: #a0a0a0; }
[data-theme="dark"] .section-body { color: #e0e0e0; }

/* Camera grid */
[data-theme="dark"] .camera-card { background: #16213e; border-color: #2a2a4a; }
[data-theme="dark"] .camera-card:hover { border-color: #64b5f6; box-shadow: 0 2px 8px rgba(100,181,246,0.15); }
[data-theme="dark"] .camera-card .cam-name { color: #e0e0e0; }
[data-theme="dark"] .camera-card .cam-stats { color: #a0a0a0; }
[data-theme="dark"] .camera-card.green .cam-rate { background: #1a3a1a; color: #66bb6a; }
[data-theme="dark"] .camera-card.yellow .cam-rate { background: #3b2e1a; color: #ffa726; }
[data-theme="dark"] .camera-card.red .cam-rate { background: #3b1a1a; color: #ef5350; }
[data-theme="dark"] .camera-card.grey .cam-rate { background: #2a2a4a; color: #6c757d; }

/* Data tables */
[data-theme="dark"] .data-table th { color: #a0a0a0; border-color: #2a2a4a; }
[data-theme="dark"] .data-table td { color: #e0e0e0; border-color: #1a1a2e; }
[data-theme="dark"] .data-table tr:hover td { background: #16213e; }
[data-theme="dark"] .error-badge.h5-empty { background: #3b2e1a; color: #ffa726; }
[data-theme="dark"] .error-badge.b2-fail { background: #3b1a1a; color: #ef5350; }
[data-theme="dark"] .error-badge.default { background: #2a2a4a; color: #a0a0a0; }

/* Empty / loading states */
[data-theme="dark"] .empty-state { color: #6c757d; }
[data-theme="dark"] .empty-state h3 { color: #a0a0a0; }
[data-theme="dark"] .loading-state { color: #6c757d; }

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .status-dot { animation: none !important; }
}