/* =============================================================================
 * CAPEX DASHBOARD — DESIGN SYSTEM DÙNG CHUNG CHO CÁC TRANG TOOLS
 * -----------------------------------------------------------------------------
 * File này là NGUỒN CHÂN LÝ duy nhất về màu sắc, font, bo góc, khoảng cách
 * cho mọi trang trong /tools/**. Được nạp CUỐI CÙNG trong <head> của mỗi trang
 * để ghi đè các style cũ không đồng nhất.
 *
 * Token lấy đúng từ public/index.html (dashboard chính):
 *   --bg-main #0b0f17 · --bg-card #121824 · --bg-card-hover #1c2638
 *   --border-card #263347 · --text-title #ffffff · --text-sub #94a3b8
 * ========================================================================== */

/* ---------- 1. TOKEN ---------- */
:root {
    /* Nền */
    --bg-main: #0b0f17;
    --bg-card: #121824;
    --bg-card-hover: #1c2638;
    --bg-input: #080c14;
    --bg-deep: #070b12;

    /* Viền */
    --border-card: #263347;
    --border-soft: #1f2a3b;
    --border-strong: #334155;

    /* Chữ — đã kiểm WCAG trên nền #0b0f17 và #121824 */
    --text-title: #ffffff;   /* 18.9:1 */
    --text-body: #e2e8f0;    /* 15.4:1 */
    --text-sub: #94a3b8;     /* 7.1:1 — dùng cho nhãn, mô tả */
    --text-muted: #a8b8cc;   /* 8.9:1 — thay cho #64748b vốn chỉ 3.9:1 */

    /* Accent (giữ nguyên bảng màu dashboard) */
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-orange: #f59e0b;
    --accent-red: #ff5c5c;
    --accent-cyan: #22d3ee;

    /* Bề mặt nút chính — dashboard dùng nền sáng + chữ tối */
    --btn-primary-bg: #e2e8f0;
    --btn-primary-bg-hover: #cbd5e1;
    --btn-primary-text: #080c14;

    /* Bo góc & khoảng cách (đồng bộ dashboard) */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-full: 9999px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* Đổ bóng */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.7);

    /* Ghi đè các biến cũ mà từng trang tools tự định nghĩa.
       Nhiều trang map --primary/--accent về --cyan-primary (#e2e8f0) rồi dùng
       làm NỀN cho nút có chữ trắng → 1.2:1. Ở đây map về đúng vai trò. */
    --cyan-primary: #e2e8f0;
    --cyan-hover: #cbd5e1;
    --cyan-glow: rgba(226, 232, 240, 0.15);

    /* Tương thích tên biến của các trang cũ */
    --panel: var(--bg-card);
    --panel2: var(--bg-card-hover);
    --bg: var(--bg-main);
    --surface: var(--bg-card);
    --surface2: var(--bg-card-hover);
    --card-bg: var(--bg-card);
    --border: var(--border-card);
    --border-light: var(--border-soft);
    --border2: var(--border-strong);
    --text: var(--text-body);
    --text2: var(--text-sub);
    --text3: var(--text-muted);
    --text-dim: var(--text-sub);
    --text-muted-legacy: var(--text-muted);
    --primary: var(--btn-primary-bg);
    --primary-light: var(--accent-cyan);
    --primary-dark: #0284c7;
    --accent: var(--cyan-primary);
    --accent2: var(--cyan-hover);
    --accent-hover: var(--cyan-hover);
    --gold: var(--accent-orange);
    --gold2: #d97706;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --font: var(--font-sans);
    --sans: var(--font-sans);
}

/* ---------- 2. NỀN & CHỮ GỐC ---------- */
html,
body {
    background-color: var(--bg-main) !important;
    color: var(--text-body) !important;
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Đồng bộ font: tiêu đề & nội dung dùng Inter; số liệu dùng JetBrains Mono.
   Các trang cũ khai báo Sora / Exo 2 / Rajdhani / Nunito / Saira / Noto Sans /
   IBM Plex Sans / DM Sans / Barlow / Lexend — gom hết về Inter để thống nhất. */
body,
h1, h2, h3, h4, h5, h6,
p, span, div, li, dt, dd, label, legend, figcaption,
input, select, textarea, button,
th, td, caption, summary,
a, strong, em, small, b {
    font-family: var(--font-sans) !important;
}

/* KHÔNG ép font cho thẻ icon Font Awesome / icon font khác, nếu không
   glyph sẽ biến thành ô vuông (tofu). Font Awesome khai báo font-family qua
   các class .fa-solid / .fa-regular / .fa-brands nên phải giữ nguyên. */
i, .fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-thin, .fa-duotone,
i[class*="fa-"], span[class*="fa-"], div[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "FontAwesome" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    line-height: 1 !important;
}

/* Giữ font mono cho các ô số liệu / mã kỹ thuật */
input[type="number"],
input[type="text"].mono,
.mono, .code, code, pre, kbd, samp,
.font-mono, .stat-value, .result-value, .value-mono {
    font-family: var(--font-mono) !important;
}

/* ---------- 3. SÀN CỠ CHỮ (đồng bộ dashboard) ---------- */
/* Nhiều trang dùng 10px/10.5px/11px — quá nhỏ để đọc. Nâng sàn lên 12px. */
body {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ---------- 4. CARD / PANEL ---------- */
/* Mọi khối nội dung chính dùng chung một kiểu bề mặt như .card-panel dashboard */
.card,
.panel,
.input-panel,
.section-card,
.result-card,
.metric-card,
.load-card,
.card-body,
.cards .card,
.pnl,
.res,
.result-box,
.summary-box,
.info-panel,
.form-panel,
.tool-card,
.box-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-body) !important;
}

/* Header của card: nền tối, chữ sáng — không dùng nền sáng + chữ trắng nữa */
.card-header,
.panel-header,
.section-header,
.card-head {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-title) !important;
    border-bottom: 1px solid var(--border-card) !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* ---------- 5. FORM ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-title) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Padding: KHÔNG dùng !important để inline style của từng trang (vốn đã
   chừa chỗ cho icon tuyệt đối, ví dụ padding-left:38px) vẫn thắng. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
    padding: 6px 10px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
    color: var(--text-title) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-sub) !important;
    opacity: 1 !important;
}

/* Ô chọn kiểu radio/checkbox dạng nút (tool_12 .radio-btn, tool_03 .load-card…) */
.radio-btn {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-card) !important;
    color: var(--text-sub) !important;
    border-radius: var(--radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.radio-btn.active,
.radio-btn.selected {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* ---------- 6. NÚT ---------- */
button,
.btn,
input[type="button"],
input[type="submit"] {
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
    cursor: pointer;
}

/* Nút chính: nền sáng + chữ tối (đúng quy ước dashboard) */
.btn-primary,
.btn-cyan,
button[type="submit"],
.btn-calc,
.btn-calculate,
.calc-btn,
.primary-btn {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: 1px solid var(--btn-primary-bg) !important;
}

.btn-primary:hover,
.btn-cyan:hover,
button[type="submit"]:hover,
.btn-calc:hover,
.btn-calculate:hover,
.calc-btn:hover,
.primary-btn:hover {
    background-color: var(--btn-primary-bg-hover) !important;
    border-color: var(--btn-primary-bg-hover) !important;
}

/* Nút phụ: nền trong suốt, viền, chữ sáng */
.btn-secondary,
.btn-outline,
.btn-ghost,
button.secondary {
    background-color: transparent !important;
    border: 1px solid var(--border-card) !important;
    color: var(--text-body) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover,
button.secondary:hover {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-title) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-blue) !important;
    outline-offset: 2px !important;
}

/* ---------- 7. BẢNG ---------- */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
}

th {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-title) !important;
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border-card) !important;
    text-align: left;
}

td {
    background-color: var(--bg-card) !important;
    color: var(--text-body) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

tr:hover td {
    background-color: var(--bg-card-hover) !important;
}

/* ---------- 8. CHỮ PHỤ / NHÃN — SỬA LỖI TƯƠNG PHẢN ---------- */
/* #64748b trên nền tối chỉ đạt 3.9:1 — dưới chuẩn WCAG AA 4.5:1.
   Nhiều trang dùng class riêng (text3, text-dim, muted, hint, sub, note…)
   nên ghi đè theo cả class lẫn thuộc tính màu. */
.text-muted,
.text-sub,
.text-dim,
.text-secondary,
.muted,
.sub,
.subtitle,
.hint,
.help,
.note,
.description,
.caption,
.hint-text,
.help-text,
unit,
.unit,
.form-group .unit,
.load-card-sub,
.card-sub,
.card-note {
    color: var(--text-sub) !important;
}

.unit,
.form-group .unit,
.input-unit,
.suffix {
    color: var(--text-sub) !important;
    font-size: 12px !important;
}

/* ---------- 9. HỘP THÔNG BÁO (info / warn / success / error) ---------- */
.info-box,
.alert,
.notice,
.callout,
.note-box,
.guide-box,
.warn-box,
.warning-box,
.error-box,
.success-box {
    border-radius: var(--radius-md) !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.info-box,
.alert-info,
.callout-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.38) !important;
    color: #bfdbfe !important;
}

.warn-box,
.warning-box,
.alert-warn,
.alert-warning,
.callout-warn {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.38) !important;
    color: #fcd34d !important;
}

.success-box,
.alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.38) !important;
    color: #6ee7b7 !important;
}

.error-box,
.alert-error,
.alert-danger {
    background-color: rgba(255, 92, 92, 0.12) !important;
    border: 1px solid rgba(255, 92, 92, 0.38) !important;
    color: #fca5a5 !important;
}

/* ---------- 10. LINK & BREADCRUMB VỀ DASHBOARD ---------- */
a {
    color: var(--accent-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Nút "← Quay lại danh sách tools" ở đầu mỗi trang */
.back-link,
.back-btn,
a[href*="tong-hop"],
a[href="/"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    min-height: 30px !important;
    text-decoration: none !important;
}

.back-link:hover,
.back-btn:hover,
a[href*="tong-hop"]:hover {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-title) !important;
    border-color: var(--border-strong) !important;
    text-decoration: none !important;
}

/* ---------- 11. THANH TIÊU ĐỀ TRANG ---------- */
/* Ép tiêu đề hero về cùng một thang đo thay vì mỗi trang một cỡ */
h1 {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--text-title) !important;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--text-title) !important;
}

h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--text-body) !important;
}

h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-body) !important;
}

/* ---------- 12. KẾT QUẢ / SỐ LIỆU NỔI BẬT ---------- */
.result-value,
.stat-value,
.metric-value,
.big-number,
.value-big {
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    color: var(--text-title) !important;
}

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px !important;
    }
    h1 { font-size: 20px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 14px !important; }
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: 1fr !important;
    }
    button,
    .btn {
        min-height: 40px !important;
    }
}

/* ---------- 14. SCROLLBAR (đồng bộ dashboard) ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--border-card);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-primary);
}

/* ---------- 15. TIỆN ÍCH ---------- */
.hidden,
[hidden] {
    display: none !important;
}

.mono {
    font-family: var(--font-mono) !important;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }

/* ---------- 16. ACTIVE STATE / PRIMARY BUTTON OVERRIDE ---------- */
/* Nhiều trang tools định nghĩa .active / .calc-btn với nền sáng nhưng chữ
   trắng hoặc xám → không đọc được. Đưa hết về quy ước dashboard:
   nền sáng #e2e8f0 + chữ tối #080c14 (tương phản 15.4:1). */
.btn-calc,
.btn-calculate,
.calc-btn,
.primary-btn,
.btn-full,
.action-btn,
.arr-btn,
button#calcAllBtn,
button#btn-export-pdf,
button.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: 1px solid var(--btn-primary-bg) !important;
}

/* Khung icon chứa emoji: nền tối nhẹ, không ép màu chữ (emoji tự có màu) */
div.header-icon,
.header-icon,
.icon-box,
.icon-wrap {
    background-color: var(--bg-card-hover) !important;
    color: inherit !important;
    border: 1px solid var(--border-card) !important;
}

.tab-btn.active,
.toggle-btn.active,
.btn-toggle.active,
.quick-ref-chip.active,
.panel-btn.active,
.ob.active,
.radio-btn.active,
.seg-btn.active,
.chip.active,
.phase-btn.active,
div.radio-btn.active {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* Ô nhập / khung con còn sót nền sáng */
.iw,
.vc,
.input-wrap,
.sticky-search,
.toggle-btn,
.panel-btn,
.ob {
    background-color: var(--bg-input) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-card) !important;
}

/* Chip / badge trạng thái: nền tối + chữ sáng thay vì nền sáng nhạt */
.version-tag,
.fault-code,
.brand-chip {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-sub) !important;
    border: 1px solid var(--border-card) !important;
}

/* Nhãn .ob ở trạng thái chưa chọn bên trong .ob-group */
.ob-group .ob:not(.active),
.ob-phase:not(.active) {
    background-color: var(--bg-input) !important;
    color: var(--text-sub) !important;
}

/* ---------- 17. NÚT DẠNG PILL / CHIP KHÔNG CÓ COLOR ---------- */
/* Nhiều nút chỉ khai báo background, để color kế thừa mặc định của trình
   duyệt (đen) → chữ đen trên nền tối. Ép lại theo token. */
.ref-pill-btn,
.ref-name,
.quick-ref-chip,
.mini-dot,
button.ref-pill-btn,
span.ref-name {
    color: var(--text-title) !important;
}

/* Nhóm tab dạng pill trong trang tools */
.pill-btn,
.tab-pill,
.seg-pill,
button[class*="pill"] {
    color: var(--text-body) !important;
}

button[class*="pill"].active,
.pill-btn.active,
.tab-pill.active,
.seg-pill.active {
    color: var(--btn-primary-text) !important;
}

/* Badge nằm TRONG nút/tab đang active (nền sáng): dùng nền tối đặc + chữ sáng
   để không bị nền sáng của nút cha làm mất tương phản. */
.tab-btn.active .tab-badge,
.btn-toggle.active .tab-badge,
.toggle-btn.active .tab-badge,
.radio-btn.active .tab-badge,
.tab-btn.active .badge,
.tab-badge {
    background-color: #1f2a3b !important;
    color: #7dd3c0 !important;
    border: 1px solid #334155 !important;
}