/* ==========================================================================
   CETVN IE DASHBOARD — Design System
   Nguồn tham chiếu: design/DESIGN.md ("AgentQL — Aurora glow over a midnight
   terminal"). Không phụ thuộc Primer CSS — toàn bộ token/component viết mới.
   Dark = bảng màu gốc trong design/variables.css. Light = tự suy diễn theo
   đúng vai trò từng lớp bề mặt (Void→Abyss→Deep Sea→Cobalt Panel đảo độ sáng).
   ========================================================================== */

/* -------------------------------------------------------------------------
   0. PAGE TRANSITIONS — chuyển trang mượt giữa các báo cáo (View Transitions
   API, native trình duyệt). App này là Flask/Jinja render-per-request (MPA,
   không phải SPA) — mỗi lần bấm menu là 1 lần tải trang mới hoàn toàn, trước
   đây không có hiệu ứng gì nên khi thuyết trình cảm giác "giật/trôi". Khai
   báo `@view-transition { navigation: auto }` bật crossfade tự động cho MỌI
   điều hướng nội bộ cùng origin (link sidebar, "Back to Hub", breadcrumb...)
   mà KHÔNG cần viết JS chặn click — an toàn tuyệt đối cho logout/form/link
   ngoài vì cơ chế điều hướng thật sự không đổi, chỉ thêm 1 bước animate ở
   tầng compositor trước khi trang cũ được thay bằng trang mới.
   Trình duyệt CHƯA hỗ trợ (vd Firefox cũ) tự động bỏ qua rule này, quay về
   chuyển trang tức thời như hiện tại — progressive enhancement, không cần
   fallback JS riêng.
   ------------------------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

/* Tắt hiệu ứng crossfade mặc định ở tầng "root" (toàn trang, gồm cả sidebar/
   header) — nếu không tắt, sidebar sẽ bị "chớp" nhẹ mỗi lần đổi trang vì
   mục đang active thay đổi. Ta chỉ muốn phần NỘI DUNG chính (`.app-main`)
   fade+slide, còn sidebar/header giữ cảm giác đứng yên (đúng thứ tạo ra
   cảm giác "trôi" khi không có gì neo lại giữa 2 trang). */
::view-transition-group(root) {
    animation-duration: 1ms;
}

/* `.app-main` được tách thành 1 transition-group RIÊNG (`view-transition-name`
   dưới mục 3. LAYOUT) — animate CHỈ `transform`/`opacity` (GPU compositing,
   không đụng layout/paint) để mượt tuyệt đối kể cả với trang có bảng/biểu đồ
   nặng. Cùng easing/thời lượng đã dùng cho tab switcher (Downtime: 200ms,
   cubic-bezier(0.16, 1, 0.3, 1)) để cảm giác nhất quán toàn app. */
::view-transition-old(app-main),
::view-transition-new(app-main) {
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(app-main) { animation-name: page-content-out; }
::view-transition-new(app-main) { animation-name: page-content-in; }

@keyframes page-content-out {
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes page-content-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   1. TOKENS — Dark (mặc định) + Light override
   ------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* Surfaces */
    --bg-void: #0b0c0e;
    --bg-base: #0e111b;
    --bg-surface: #0d172b;
    --bg-surface-raised: #12244f;
    --bg-overlay: #101a30;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #abaebb;
    --text-tertiary: #c7c9d1;
    --text-on-accent: #ffffff;

    /* Borders */
    --border-default: #172540;
    --border-subtle: #151e32;
    --border-hairline: #24375a;
    --border-muted: #3c3f44;

    /* Accent */
    --accent: #2862d7;
    --accent-2: #305fbd;
    --accent-purple: #625fff;
    --accent-pink: #ff7dda;
    --accent-wash: #85a6e9;
    --accent-wash-bg: rgba(133, 166, 233, .14);
    --gradient-primary: linear-gradient(90deg, #305fbd, #625fff);
    --gradient-aurora-purple: radial-gradient(79.43% 95.88% at 38.94% -53.46%, rgba(98, 95, 255, .38) 0px, rgba(0, 0, 0, 0));
    --gradient-aurora-pink: radial-gradient(27.99% 22.08% at 72.13% 103.46%, rgba(255, 125, 218, .33) 0px, rgba(0, 0, 0, 0));

    /* Semantic status */
    --success: #3fb950;
    --success-bg: rgba(63, 185, 80, .16);
    --danger: #f85149;
    --danger-bg: rgba(248, 81, 73, .16);
    --warning: #d29922;
    --warning-bg: rgba(210, 153, 34, .16);
    --info: var(--accent);
    --info-bg: rgba(40, 98, 215, .16);

    /* Shadows */
    --shadow-sm: rgba(0, 0, 0, .15) 0 0 0 1px;
    --shadow-md: rgba(0, 0, 0, .2) 0 3px 16px 0;
    --shadow-lg: rgba(0, 0, 0, .5) 0 4px 30px 0;
    --shadow-xl: rgba(0, 0, 0, .34) 0 20px 35px 0, rgba(0, 0, 0, .25) 0 4px 13px 0;

    /* Fonts */
    --font-display: 'Figtree', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Radius */
    --radius-sm: 2px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Spacing (khớp thang 4/8/16/24px đã dùng trong template: mb-1..mb-4) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;

    /* ---- Primer CSS variable compat shim ----
       Nhiều template/inline-style cũ tham chiếu trực tiếp biến của Primer
       (var(--color-canvas-default, #hex)) — định nghĩa lại đúng tên biến đó
       trỏ sang token mới để toàn bộ style inline tự động lên theme mới mà
       KHÔNG cần sửa từng chỗ. Đây là lựa chọn có chủ đích, không phải sót. */
    --color-canvas-default: var(--bg-base);
    --color-canvas-subtle: var(--bg-surface);
    --color-canvas-overlay: var(--bg-overlay);
    --color-canvas-inset: var(--bg-void);
    --color-border-default: var(--border-default);
    --color-fg-default: var(--text-primary);
    --color-fg-muted: var(--text-secondary);
    --color-accent-fg: var(--accent-wash);
    --color-accent-emphasis: var(--accent);
    --color-accent-subtle: rgba(40, 98, 215, .16);
    --color-neutral-muted: rgba(60, 63, 68, .22);
}

[data-color-mode="light"] {
    color-scheme: light;

    --bg-void: #f2f4fa;
    --bg-base: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-raised: #eef1fc;
    --bg-overlay: #ffffff;

    --text-primary: #0b0c0e;
    --text-secondary: #4b4f5b;
    --text-tertiary: #6b7080;
    --text-on-accent: #ffffff;

    --border-default: #dde1ea;
    --border-subtle: #e8eaf1;
    --border-hairline: #d7dff2;
    --border-muted: #c7cbd3;

    --accent-wash-bg: rgba(40, 98, 215, .08);

    --success-bg: rgba(63, 185, 80, .12);
    --danger-bg: rgba(248, 81, 73, .12);
    --warning-bg: rgba(210, 153, 34, .14);
    --info-bg: rgba(40, 98, 215, .1);

    --shadow-sm: rgba(15, 23, 42, .08) 0 0 0 1px;
    --shadow-md: rgba(15, 23, 42, .1) 0 3px 16px 0;
    --shadow-lg: rgba(15, 23, 42, .12) 0 4px 30px 0;
    --shadow-xl: rgba(15, 23, 42, .16) 0 20px 35px 0, rgba(15, 23, 42, .1) 0 4px 13px 0;

    --color-accent-subtle: rgba(40, 98, 215, .1);
    --color-neutral-muted: rgba(107, 112, 128, .12);
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

p { margin: 0 0 var(--space-3); }

a {
    color: var(--accent-wash);
    text-decoration: none;
}
a:hover { color: var(--accent); text-decoration: underline; }

hr, .border-top {
    border: none;
    border-top: 1px solid var(--border-default);
}

table { font-family: var(--font-body); }

input, select, textarea, button { font-family: inherit; }

::selection { background: var(--accent); color: #fff; }

/* -------------------------------------------------------------------------
   3. LAYOUT — Sidebar + Main
   ------------------------------------------------------------------------- */
.app-shell {
    position: relative;
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    width: 264px;
    flex-shrink: 0;
    min-height: 100vh;
    background: var(--bg-void);
    border-right: 1px solid var(--border-subtle);
    padding: 20px 12px 16px;
    overflow: hidden;
    transition: width .2s ease, padding .2s ease, opacity .15s ease;
}

/* Thu gọn thanh điều hướng: sidebar co về 0, nút bấm trượt theo mép để mở lại. */
.app-shell.sidebar-collapsed .app-sidebar {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border-right-color: transparent;
    pointer-events: none;
}

.sidebar-edge-toggle {
    position: absolute;
    top: 18px;
    left: 264px;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: left .2s ease, border-color .15s ease, color .15s ease;
}

.sidebar-edge-toggle:hover { border-color: var(--accent-wash); color: var(--text-primary); }
.sidebar-edge-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.app-shell.sidebar-collapsed .sidebar-edge-toggle { left: 15px; transform: translateX(0); }
.app-shell.sidebar-collapsed .sidebar-edge-toggle svg { transform: rotate(180deg); }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 22px;
}

.sidebar-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
}

.sidebar-brand-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.2;
}

.sidebar-brand-text small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.sidebar-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li { list-style: none; }

.sidebar-section {
    margin: 18px 10px 6px;
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-link a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-link a:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    text-decoration: none;
}

.sidebar-link.is-active a {
    background: var(--bg-surface-raised);
    color: #fff;
}

.sidebar-link-child a {
    padding-left: 22px;
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.sidebar-link-child.is-active a { color: var(--accent-wash); }

.sidebar-user {
    margin-top: auto;
    padding: 14px 10px 0;
    border-top: 1px solid var(--border-subtle);
}

.sidebar-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.sidebar-user-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    margin-top: 1px;
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: capitalize;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.theme-toggle-btn:hover { border-color: var(--accent-wash); color: var(--text-primary); }
.theme-toggle-btn svg { width: 14px; height: 14px; }
.theme-toggle-btn .icon-sun { display: none; }
[data-color-mode="light"] .theme-toggle-btn .icon-moon { display: none; }
[data-color-mode="light"] .theme-toggle-btn .icon-sun { display: block; }

.sidebar-logout {
    display: block;
    padding: 7px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.sidebar-logout:hover {
    border-color: var(--danger);
    color: var(--danger);
    text-decoration: none;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: 28px 32px 48px;
    view-transition-name: app-main;
}

@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .app-sidebar { width: 100%; min-height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
    .app-shell.sidebar-collapsed .app-sidebar { width: 100%; opacity: 1; padding: 20px 12px 16px; pointer-events: auto; border-right-color: var(--border-subtle); }
    .sidebar-body { flex-direction: row; }
    .sidebar-edge-toggle { display: none; }
    .app-main { padding: 20px 16px 32px; }
}

/* -------------------------------------------------------------------------
   3.1 PAGE TABS — điều hướng nhiều "trang" (section) trong cùng 1 view,
   dùng cho các Engine chia nội dung thành nhiều tab (vd Downtime). Hỗ trợ
   cả click lẫn lăn chuột (wheel) khi hover trên thanh tab để chuyển trang.
   ------------------------------------------------------------------------- */
.page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.page-tab {
    flex: 1 1 auto;
    padding: 9px 14px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.page-tab:hover { color: var(--text-primary); background: var(--bg-surface-raised); }

.page-tab.is-active {
    background: var(--gradient-primary);
    color: #fff;
}

/* -------------------------------------------------------------------------
   4. UTILITIES
   ------------------------------------------------------------------------- */
.d-flex { display: flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none !important; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-items-center { align-items: center; }
.flex-items-end { align-items: flex-end; }
.flex-justify-between { justify-content: space-between; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mr-3 { margin-right: var(--space-3); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

.f6 { font-size: 12px; }
.h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.text-bold { font-weight: 600; }
.text-left { text-align: left; }
.text-uppercase { text-transform: uppercase; letter-spacing: .06em; }
.color-fg-muted { color: var(--text-secondary); }
.color-fg-subtle { color: var(--text-tertiary); }
.input-block { width: 100%; }
.btn-block { display: block; width: 100%; }

/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease;
}

.btn:hover { border-color: var(--accent-wash); color: var(--text-primary); text-decoration: none; background: var(--bg-surface-raised); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent-wash); outline-offset: 2px; }

.btn-sm { padding: 5px 12px; font-size: 12px; }

.btn-primary {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}
.btn-primary:hover { filter: brightness(1.08); color: #fff; border-color: transparent; }

.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.btn-group, .BtnGroup {
    display: inline-flex;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--border-default);
}
.btn-group .btn, .BtnGroup-item {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border-default);
    margin: 0;
}
.btn-group .btn:last-child, .BtnGroup-item:last-child { border-right: none; }
.btn-group .btn.selected, .btn-group .btn[aria-pressed="true"], .BtnGroup-item.is-active {
    background: var(--bg-surface-raised);
    color: #fff;
}

/* -------------------------------------------------------------------------
   6. CARDS / BOX / WIDGETS
   ------------------------------------------------------------------------- */
.Box, .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.Box-header {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.Box-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

.Box-body { padding: var(--space-3); }

.Box-footer {
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.widget-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.widget-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.blankslate {
    padding: 64px 24px;
    text-align: center;
    color: var(--text-secondary);
}
.blankslate h3 { color: var(--text-primary); margin-bottom: var(--space-2); }

/* -------------------------------------------------------------------------
   7. BADGES / LABELS
   ------------------------------------------------------------------------- */
.Label, .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--accent-wash-bg);
    color: var(--accent-wash);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: capitalize;
}

.Label--danger { background: var(--danger-bg); color: var(--danger); }
.Label--secondary { background: var(--color-neutral-muted); color: var(--text-secondary); }

.status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
}
.status-badge.status-valid { background: var(--success-bg); color: var(--success); }
.status-badge.status-invalid { background: var(--danger-bg); color: var(--danger); }

/* -------------------------------------------------------------------------
   8. FORMS
   ------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-3); }
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-control, .form-select, input[type="text"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="search"], select, textarea {
    width: auto;
    padding: 8px 12px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 13px;
    transition: border-color .15s ease;
}

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-wash);
}

select.form-select { cursor: pointer; }

/* -------------------------------------------------------------------------
   9. TABLES
   ------------------------------------------------------------------------- */
table.preview-table, table.raw-table, table.matrix-table, table.batch-matrix-table,
table.downtime-table, .drawer-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

table.preview-table th, table.preview-table td,
table.raw-table th, table.raw-table td,
table.matrix-table th, table.matrix-table td,
table.batch-matrix-table th, table.batch-matrix-table td,
table.downtime-table th, table.downtime-table td {
    border: 1px solid var(--border-subtle);
    padding: 6px 10px;
    text-align: left;
    color: var(--text-primary);
}

table.preview-table thead th, table.raw-table thead th,
table.matrix-table thead th, table.batch-matrix-table thead th,
table.downtime-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-surface-raised);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    z-index: 1;
}

table.preview-table tbody tr:hover td,
table.matrix-table tbody tr:hover td,
table.batch-matrix-table tbody tr:hover td,
table.downtime-table tbody tr:hover td {
    background: var(--bg-surface-raised);
}

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

/* -------------------------------------------------------------------------
   10. FLASH / ALERTS
   ------------------------------------------------------------------------- */
.flash {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    font-size: 13px;
}
.flash-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.flash-error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.flash-warn { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }

/* -------------------------------------------------------------------------
   11. DROPZONE / PROGRESS
   ------------------------------------------------------------------------- */
.dropzone {
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover { border-color: var(--accent-wash); background: var(--accent-wash-bg); }
.dropzone.dragover { border-color: var(--accent); background: var(--info-bg); }
.dropzone-icon { color: var(--text-secondary); margin-bottom: 8px; }
.dropzone-hint { color: var(--text-tertiary); font-size: 11px; margin-top: 4px; }

.progress-bar-track {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border-default);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    width: 0%;
    transition: width .2s ease;
}
.progress-bar-fill.is-processing {
    width: 100% !important;
    background: repeating-linear-gradient(45deg, #305fbd, #305fbd 12px, #625fff 12px, #625fff 24px);
    background-size: 34px 34px;
    animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes {
    from { background-position: 0 0; }
    to { background-position: 34px 0; }
}

/* -------------------------------------------------------------------------
   12. TOASTS
   ------------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
}

.import-toast {
    box-shadow: var(--shadow-lg);
    animation: toast-slide-in .18s ease-out;
}
.import-toast .toast-title { font-weight: 600; margin-bottom: 2px; }
.import-toast .toast-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.import-toast .toast-stats { display: flex; gap: 10px; font-size: 12px; margin-bottom: 8px; }
.import-toast .toast-actions { display: flex; gap: 8px; }

@keyframes toast-slide-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* -------------------------------------------------------------------------
   13. MODAL / OVERLAY / DRAWER
   ------------------------------------------------------------------------- */
.top-batches-overlay, .day-batches-overlay {
    background: rgba(4, 6, 12, .68) !important;
}
.top-batches-panel, .day-batches-panel {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl);
}
.top-batches-header, .day-batches-header {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 12, .68);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(92vw, 960px);
    background: var(--bg-base);
    border-left: 1px solid var(--border-default);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 151;
}
.drawer-overlay.is-open .drawer-panel { transform: translateX(0); }

.drawer-header, .drawer-toolbar, .drawer-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.drawer-footer {
    border-bottom: none;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.drawer-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.drawer-empty { padding: 32px; text-align: center; color: var(--text-secondary); }

.raw-row-invalid td { background: var(--danger-bg); }
.raw-cell-editable { cursor: text; }
.raw-cell-editable:hover { outline: 1px dashed var(--accent-wash); outline-offset: -1px; }
.raw-cell-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 2px 4px;
    background: var(--bg-base);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    border-radius: 3px;
}
.virtual-scroll-spacer { width: 100%; }

/* Modal Import (import-modal) */
#import-modal { background: rgba(4, 6, 12, .72) !important; }

/* -------------------------------------------------------------------------
   14. CASE NOTES / CELL INTERACTIONS (Downtime drill-down)
   ------------------------------------------------------------------------- */
.case-note-cell {
    display: inline-block;
    min-width: 60px;
    min-height: 1.2em;
    cursor: text;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
}
.case-note-cell:hover { background: var(--accent-wash-bg); }
.case-note-empty { color: var(--text-tertiary); font-style: italic; }
.case-note-editing { padding: 2px !important; }
.case-note-input {
    width: 100%;
    min-width: 140px;
    font: inherit;
    background: var(--bg-base);
    color: inherit;
    border: 1px solid var(--accent-wash);
    border-radius: var(--radius-sm);
    padding: 2px 4px;
}
textarea.case-note-input { min-width: 220px; min-height: 60px; resize: vertical; }

.cell-clickable { cursor: pointer; text-decoration: underline dotted; }
.cell-clickable:hover { background: var(--accent-wash-bg) !important; }

/* -------------------------------------------------------------------------
   15. GRAPHIFY DIAGRAM
   ------------------------------------------------------------------------- */
.graph-node rect { stroke: var(--accent); fill: var(--bg-surface); }
.graph-edge { stroke: var(--text-tertiary); stroke-width: 1.5; fill: none; }