/* =========================================================================
   OMNIGUARD - KHO DỮ LIỆU & SỰ KIỆN (du-lieu.html)
   Dựa trên province-sensors.css (trang cuộn, bảng, ngăn chi tiết).
   Màu 6 loại hiểm họa: bảng phân loại đã kiểm định trên nền tối (thứ tự cố định, kèm chú giải + nhãn chữ)
   ========================================================================= */
:root {
    --hz-FLOOD: #3987e5;
    --hz-FLASH_FLOOD: #d95926;
    --hz-LANDSLIDE: #199e70;
    --hz-RIVERBANK_EROSION: #c98500;
    --hz-STORM: #d55181;
    --hz-THUNDERSTORM: #008300;

    --kind-OBSERVED: #3987e5;
    --kind-REPORTED: #c98500;
    --kind-MODEL: #9085e9;
    --kind-ESTIMATED: #d55181;
    --kind-SIMULATED: #b9a6ff;
}

.dc-tabs { flex-wrap: nowrap; }

.dc-hz { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; }
.dc-hz::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--hz-color, var(--text-3)); flex-shrink: 0; }

.dc-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text-2); white-space: nowrap;
}
.dc-pill.OFFICIAL { color: #9fd3ff; border-color: rgba(57, 135, 229, 0.6); }
.dc-pill.NEWS { color: var(--text-2); }
.dc-pill.LOCAL, .dc-pill.RESEARCH, .dc-pill.SATELLITE { color: #ffd98a; border-color: rgba(201, 133, 0, 0.6); }

.dc-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.dc-status--VERIFIED i { color: var(--st-online); }
.dc-status--CANDIDATE i { color: var(--st-degraded); }
.dc-status--REJECTED i { color: var(--st-nodata); }

.dc-conf { display: flex; align-items: center; gap: 6px; }
.dc-conf .sn-bar { width: 60px; min-width: 60px; }

.dc-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Danh mục dữ liệu */
.dc-kind-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.dc-kind-head h3 { font-size: var(--fs-md); }
.dc-kind-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
    color: var(--text); background: color-mix(in srgb, var(--kind-color) 22%, transparent); border: 1px solid var(--kind-color);
}
.dc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--sp-3); }
.dc-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--kind-color); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.dc-card h4 { font-size: var(--fs-sm); font-weight: 700; }
.dc-dl { display: grid; grid-template-columns: 120px 1fr; gap: 2px 10px; font-size: var(--fs-xs); }
.dc-dl dt { color: var(--text-3); }
.dc-dl dd { color: var(--text-2); }
.dc-rel { font-weight: 700; }
.dc-rel--HIGH { color: #7fdc85; }
.dc-rel--MEDIUM { color: #ffd166; }
.dc-rel--LOW { color: #ff9b85; }

/* Biểu mẫu trong ngăn */
.dc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
.dc-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.dc-form label.full { grid-column: 1 / -1; }
.dc-form input, .dc-form select, .dc-form textarea {
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 7px 9px; font-size: var(--fs-sm); outline: none; font-family: inherit;
}
.dc-form input:focus, .dc-form select:focus, .dc-form textarea:focus { border-color: var(--accent); }
.dc-form textarea { min-height: 64px; resize: vertical; }
.dc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.btn-ok { border-color: rgba(12, 163, 12, 0.6); color: #9be59b; }
.btn-ok:hover { background: rgba(12, 163, 12, 0.18); color: #fff; }

.dc-evidence { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dc-evidence:last-child { border-bottom: none; }
.dc-evidence .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); }
.dc-evidence a { color: var(--text); text-decoration: none; font-weight: 600; }
.dc-evidence a:hover { color: var(--accent); text-decoration: underline; }
.dc-evidence .excerpt { font-size: var(--fs-xs); color: var(--text-2); white-space: pre-line; max-height: 140px; overflow: auto; }

.dc-progress { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.dc-progress > span { display: block; height: 100%; background: var(--accent); }

@media (max-width: 1000px) {
    .dc-tabs { order: 3; width: 100%; overflow-x: auto; }
    .dc-cards { grid-template-columns: 1fr; }
    .dc-form { grid-template-columns: 1fr; }
}

/* Báo cáo thu thập API quan trắc */
.dc-mon-card { gap: 8px; }
.dc-mon-strip { display: flex; gap: 2px; flex-wrap: wrap; }
.dc-mon-cell { display: inline-block; width: 10px; height: 18px; border-radius: 2px; background: var(--st-nodata); opacity: 0.4; flex: 0 0 auto; }
.dc-mon-cell.ONLINE { background: var(--st-online); opacity: 1; }
.dc-mon-cell.DEGRADED { background: var(--st-degraded); opacity: 1; }
.dc-mon-cell.OFFLINE { background: var(--st-offline); opacity: 1; }
.dc-mon-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: var(--sp-3) 0; }
.dc-mon-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dc-mon-legend .dc-mon-cell { width: 10px; height: 10px; }
.dc-mon-scroll { overflow-x: auto; padding: 0 var(--sp-3); }
.dc-mon-table td { min-width: 180px; }
.dc-mon-table td:first-child, .dc-mon-table td:nth-child(2) { min-width: 0; white-space: nowrap; }
.dc-mon-reason { color: var(--text-2); margin-top: 2px; }
.dc-select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 8px; font-size: var(--fs-xs); }