/* ── DTSC Engineering Library Design System ── */
/* Bảng màu SEICO Hub: nền giấy ấm, navy kỹ thuật, điểm nhấn cam gạch */
:root {
    /* Color Palette — dùng chung với design.dtsc.info và dtsc.info:
       navy #0D2B4E (khung), xanh #1C6BB0 (nút/link), cam #C2551F (điểm nhấn), nền giấy ấm #F6F5F1 */
    --primary: #1C6BB0;
    --primary-hover: #155A94;
    --primary-light: #EAF2FA;
    --primary-dark: #0D2B4E;

    --accent: #C2551F;
    --accent-light: #FBE9DF;

    --success: #1F7A4D;
    --warning: #B45309;
    --danger: #B3261E;
    --info: #1C6BB0;

    --bg-page: #F6F5F1;
    --bg-card: #FFFFFF;
    --border: #DAD8D0;
    --border-focus: #1C6BB0;

    --text: #14202E;
    --text-muted: #5A6573;
    --text-light: #8B94A0;

    /* Elevation Shadows */
    --shadow-sm: 0 1px 2px rgba(23, 33, 43, 0.05);
    --shadow-md: 0 4px 8px -2px rgba(23, 33, 43, 0.08), 0 2px 4px -2px rgba(23, 33, 43, 0.05);
    --shadow-lg: 0 12px 20px -6px rgba(23, 33, 43, 0.12), 0 4px 6px -4px rgba(23, 33, 43, 0.05);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Typography */
    --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* ── Reset & Typography ── */
/* Be Vietnam Pro to hơn Segoe UI cùng cỡ → hạ gốc rem còn 15px và chữ thường còn 14px */
html {
    font-size: 15px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    background-color: var(--bg-page);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Container Layouts ── */
.main-container {
    max-width: 1720px;
    width: 98%;
    margin: 0.85rem auto;
    padding: 0 0.75rem;
    flex: 1;
}

.page-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.page-title-bar h1 {
    font-size: 1.4rem;
    color: var(--primary-dark);
    font-weight: 700;
}

.page-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* ── Cards & Panels ── */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.card-header h2, .card-header h3 {
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 600;
}

/* ── Grid Layouts ── */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.grid-sidebar-main {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.25rem;
}

.grid-main-sidebar {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.25rem;
}

@media (max-width: 1024px) {
    .grid-2, .grid-3, .grid-4, .grid-sidebar-main, .grid-main-sidebar {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════ */
/* ── PRINT STYLESHEET (@media print for clean PDF / A4 output) ── */
/* ══════════════════════════════════════════════════════════════ */
@media print {
    /* 1. Hide web-only interactive navigation and chrome */
    .app-navbar,
    .app-sidebar,
    .sidebar-scrim,
    .app-footer,
    .filter-section,
    .results-table-wrap,
    .no-print,
    .btn,
    .btn-group,
    .footer-action-bar,
    .modal-overlay,
    .action-bar-grid,
    .action-bar-flex {
        display: none !important;
    }

    /* 2. Reset body & container margins for full A4 page */
    body {
        background: #FFFFFF !important;
        color: #000000 !important;
        font-size: 9pt !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.2cm 0.4cm !important;
    }

    /* 3. Page Title & Document Header */
    .print-only-header {
        display: block !important;
        margin-bottom: 0.8cm;
        border-bottom: 2px solid #000000;
        padding-bottom: 0.3cm;
    }

    /* 4. Frame SVG Viewer Box in Print */
    .svg-viewer-box, .viewer-container {
        border: 1px solid #CBD5E1 !important;
        height: auto !important;
        max-height: 380px !important;
        page-break-inside: avoid;
        margin-bottom: 0.5cm !important;
    }

    .svg-viewer-box svg, .viewer-container svg {
        width: 100% !important;
        height: auto !important;
    }

    /* 5. Tables in Print */
    .comp-table-wrap, .table-responsive, table {
        border: 1px solid #000000 !important;
        width: 100% !important;
        page-break-inside: avoid;
    }

    table th {
        background: #F1F5F9 !important;
        color: #000000 !important;
        border-bottom: 1.5px solid #000000 !important;
        padding: 4px 6px !important;
    }

    table td {
        border-bottom: 1px solid #CBD5E1 !important;
        padding: 4px 6px !important;
        color: #000000 !important;
    }

    /* 6. Section Headers */
    .section-header-bar h2 {
        font-size: 11pt !important;
        color: #000000 !important;
    }
}