@layer base {
    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-background text-on-surface font-body antialiased;
        min-height: 100vh;
        overflow-x: hidden;
        font-family: Inter, "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background-color: #0a0e1a;
        background-image:
            linear-gradient(180deg, #0a0e1a 0%, #0d1626 48%, #0b111f 100%);
        font-size: 14px;
        text-rendering: optimizeLegibility;
    }

    .material-symbols-outlined {
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
        line-height: 1;
        vertical-align: middle;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(10, 14, 26, 0.5);
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(125, 211, 252, 0.2);
        border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(125, 211, 252, 0.4);
    }

    /* ---------- TYPOGRAPHY ---------- */

    .section-header {
        @apply flex items-center gap-3 text-lg md:text-xl font-semibold tracking-wide text-primary;
        font-size: 0.95rem !important;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #7dd3fc;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.35;
    }

    .section-header-icon {
        width: 4px;
        height: 24px;
        border-radius: 999px;
        flex-shrink: 0;
    }

    /* ---------- GLASS SYSTEM ---------- */

    .card,
    .glass-panel {
        position: relative;
        overflow: visible;
        border-radius: 0.75rem;
        padding: 1rem;
        background: rgba(15, 21, 36, 0.6);
        border: 1px solid rgba(125, 211, 252, 0.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow:
            0 0 30px rgba(125, 211, 252, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .card::before,
    .glass-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(
            135deg,
            rgba(255,255,255,0.04),
            transparent 35%
        );
    }

    /* ---------- FORM ELEMENTS ---------- */

    .input-group {
        @apply space-y-1;
        min-width: 0;
        gap: 0.2rem;
    }

    .input-label {
        @apply block text-xs font-semibold uppercase tracking-wider text-on-surface-variant;
        display: block;
        color: #a0b4c4;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
        line-height: 1.4;
        margin-bottom: 0.2rem !important;
        font-size: 0.72rem !important;
    }

    .input-field,
    .textarea-field,
    .glass-input,
    select,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="date"] {
        width: 100%;
        min-width: 0;
        border-radius: 0.875rem;
        border: 1px solid rgba(125, 211, 252, 0.12);
        background: rgba(15, 21, 36, 0.45);
        color: #e0e8f0;
        padding: 0.55rem 0.75rem !important;
        min-height: 40px;
        font-size: 0.9rem !important;
        line-height: 1.4;
        transition:
            border-color 0.2s ease,
            background-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.15s ease;
    }

    textarea {
        resize: vertical;
        min-height: 44px;
    }

    .input-field::placeholder,
    .textarea-field::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: rgba(160, 180, 196, 0.7);
    }

    .input-field:hover,
    .textarea-field:hover,
    select:hover,
    textarea:hover,
    input:hover {
        border-color: rgba(125, 211, 252, 0.22);
    }

    .input-field:focus,
    .textarea-field:focus,
    .glass-input:focus,
    select:focus,
    textarea:focus,
    input:focus {
        outline: none;
        border-color: rgba(125, 211, 252, 0.5);
        background: rgba(15, 21, 36, 0.7);
        box-shadow:
            0 0 0 3px rgba(125, 211, 252, 0.08),
            0 0 18px rgba(125, 211, 252, 0.08);
    }

    select option {
        background: #162032;
        color: #e0e8f0;
    }

    /* ---------- CHECKBOX ---------- */

    input[type="checkbox"],
    input[type="radio"],
    .glass-checkbox {
        appearance: none;
        -webkit-appearance: none;
        flex-shrink: 0;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 0.35rem;
        border: 1px solid rgba(125, 211, 252, 0.25);
        background: rgba(15, 21, 36, 0.7);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

    input[type="radio"] {
        border-radius: 999px;
    }

    input[type="checkbox"]:checked,
    input[type="radio"]:checked,
    .glass-checkbox:checked {
        background: rgba(125, 211, 252, 0.2);
        border-color: #7dd3fc;
        box-shadow: 0 0 10px rgba(125, 211, 252, 0.15);
    }

    input[type="checkbox"]:checked::after,
    .glass-checkbox:checked::after {
        content: "";
        width: 5px;
        height: 9px;
        border: solid #7dd3fc;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        margin-bottom: 1px;
    }

    input[type="radio"]:checked::after {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 999px;
        background: #7dd3fc;
    }

    /* ---------- BUTTONS ---------- */

    .glass-button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        min-width: 40px;
        white-space: nowrap;
        border-radius: 999px;
        border: 1px solid rgba(125, 211, 252, 0.25);
        background: rgba(125, 211, 252, 0.12);
        color: #7dd3fc;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            transform 0.15s ease,
            box-shadow 0.2s ease;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .glass-button-primary:hover {
        background: rgba(125, 211, 252, 0.2);
        border-color: rgba(125, 211, 252, 0.45);
        transform: translateY(-1px);
        box-shadow: 0 0 24px rgba(125, 211, 252, 0.1);
    }

    .glass-button-primary:active {
        transform: translateY(0);
    }

    /* ---------- ASA BUTTON ---------- */

    .asa-button {
        background: rgba(15, 21, 36, 0.55);
        color: #cbd5e1;
        border-radius: 0.875rem;
        transition: all 0.2s ease;
    }

    .asa-button:hover {
        border-color: rgba(125, 211, 252, 0.4);
        color: #7dd3fc;
        background: rgba(125, 211, 252, 0.12);
    }

    .asa-button.active,
    .asa-button[data-active="true"] {
        background: rgba(125, 211, 252, 0.18);
        border-color: rgba(125, 211, 252, 0.5);
        color: #7dd3fc;
        box-shadow: 0 0 18px rgba(125, 211, 252, 0.1);
    }

    /* ---------- RISK ---------- */

    .risk-low {
        background: rgba(74, 222, 128, 0.12);
        color: #86efac;
        border: 1px solid rgba(74, 222, 128, 0.2);
    }

    .risk-medium {
        background: rgba(251, 146, 60, 0.12);
        color: #fdba74;
        border: 1px solid rgba(251, 146, 60, 0.2);
    }

    .risk-high {
        background: rgba(248, 113, 113, 0.12);
        color: #fca5a5;
        border: 1px solid rgba(248, 113, 113, 0.2);
    }

    /* ---------- TABLE / DETAILS ---------- */

    details summary {
        user-select: none;
    }

    details[open] summary {
        margin-bottom: 0.25rem;
    }

    /* ---------- ICD DROPDOWN ---------- */

    .icd-suggestions {
        margin-top: 0.4rem;
        overflow: hidden;
        border-radius: 0.875rem;
    }

    .icd-suggestions li {
        padding: 0.75rem 0.875rem;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .icd-suggestions li:hover {
        background: rgba(125, 211, 252, 0.08);
    }

    /* ---------- MOBILE ---------- */

    @media (max-width: 768px) {
        .card,
        .glass-panel {
            padding: 0.75rem !important;
            border-radius: 1rem;
        }

        .section-header {
            font-size: 1rem;
            line-height: 1.4;
        }

        header {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        .glass-button-primary {
            min-height: 38px;
        }

        input,
        select,
        textarea {
            font-size: 16px !important;
        }
    }

    /* -------------------------------------------------- */
    /* ẨN VÙNG IN TRÊN MÀN HÌNH                           */
    /* -------------------------------------------------- */
    @media screen {
        .print-summary-sheet {
            display: none !important;
        }
    }

    /* ---------- PRINT ---------- */

    @media print {
        @page {
            size: A4 portrait;
            margin: 10mm;
        }

        body {
            font-size: 10.5pt;
            background: white !important;
            color: black !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            margin: 0;
            padding: 0;
        }

        /* Ẩn giao diện app, chỉ hiện phần tóm tắt */
        .app-sidebar, 
        .app-header, 
        .clinical-main, 
        .mobile-bottom-nav,
        .no-print {
            display: none !important;
        }

        .print-summary-sheet {
            display: block !important;
            width: 100%;
        }

        /* Quy tắc trang */
        .print-page {
            page-break-after: always;
            position: relative;
        }
        
        .print-page:last-child {
            page-break-after: auto;
        }

        /* Layout chung */
        .print-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            border-bottom: 2pt solid #000;
            padding-bottom: 3mm;
            margin-bottom: 4mm;
        }

        .print-title {
            font-size: 16pt;
            font-weight: 800;
            text-transform: uppercase;
        }

        .print-subtitle {
            font-size: 10pt;
            font-style: italic;
            color: #333 !important;
            margin-top: 1mm;
        }

        .print-small {
            font-size: 9pt;
            line-height: 1.3;
        }

        /* Hệ thống lưới cột (Grid) */
        .print-grid {
            display: flex !important;
            flex-wrap: wrap;
            gap: 4mm;
        }

        .print-col-12 { width: 100%; }
        .print-col-7 { width: calc(58.333% - 2mm); }
        .print-col-6 { width: calc(50% - 2mm); }
        .print-col-5 { width: calc(41.666% - 2mm); }

        /* Khung nội dung (Card) */
        .print-card {
            border: 1pt solid #000 !important;
            padding: 3mm;
            border-radius: 4px;
            break-inside: avoid;
            background: white !important;
            color: black !important;
        }

        .print-card h3 {
            font-size: 11pt;
            font-weight: bold;
            border-bottom: 1pt solid #aaa;
            padding-bottom: 1.5mm;
            margin-top: 0;
            margin-bottom: 2mm;
            text-transform: uppercase;
        }

        /* Key-Value Pair */
        .print-kv {
            display: flex;
            flex-direction: column;
            gap: 1.5mm;
            font-size: 10pt;
        }

        .print-kv > div {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 0.5pt dashed #ddd;
            padding-bottom: 1mm;
        }

        .print-kv > div > b {
            white-space: nowrap;
            margin-right: 3mm;
            font-weight: 600;
        }

        .print-kv > div > span {
            text-align: right;
        }

        /* Danh sách (ul) */
        .print-list {
            margin: 0;
            padding-left: 4.5mm;
            font-size: 10pt;
        }

        .print-list li {
            margin-bottom: 1mm;
            line-height: 1.4;
        }

        /* Bảng hiển thị thông tin Dịch / Log trong mổ */
        .print-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9.5pt;
        }

        .print-table th, .print-table td {
            border: 0.5pt solid #000;
            padding: 1.5mm 2mm;
            text-align: left;
        }

        .print-table th {
            background-color: #f4f4f4 !important;
            font-weight: bold;
        }

        .print-muted {
            color: #555 !important;
            font-style: italic;
            font-size: 9pt;
        }
    }

    /* --- READABILITY + RESPONSIVE FIX --- */

    /* Kích hoạt Dark Mode native cho scrollbar, date picker (hết trắng chói) */
    html {
        color-scheme: dark;
    }

    /* 1. Contrast chữ sáng hơn nhiều & form dễ đọc hơn */
    body, label, span, p, div {
        color: #f8fafc; /* slate-50: Làm sáng text tổng thể */
    }
    .text-slate-300, .text-slate-400 {
        color: #e2e8f0 !important; /* slate-200: Tăng độ tương phản cho text mờ */
    }

    /* 2. Input không bị “trắng chói” */
    input[type="text"], input[type="number"], input[type="date"], select, textarea {
        background-color: #1e293b !important; /* slate-800 */
        color: #f8fafc !important;
        border: 1px solid #475569 !important; /* slate-600 */
        border-radius: 0.375rem;
    }
    input:focus, select:focus, textarea:focus {
        background-color: #0f172a !important; /* slate-900 */
        border-color: #3b82f6 !important; /* blue-500 */
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
        outline: none;
    }

    /* 3. Spacing/grid ổn định & Responsive tablet/mobile */
    @media (max-width: 768px) {
        .grid {
            gap: 0.75rem !important;
        }
        .mobile-grid-2, .grid-cols-2 {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        
        /* 4. Sidebar/header cân đối hơn trên mobile */
        aside, .sidebar {
            width: 100% !important;
            height: auto !important;
            position: relative !important;
            border-right: none !important;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding: 1.25rem !important;
        }
        header {
            padding: 1rem 1.25rem !important;
            text-align: center;
        }
    }

    /* 5. ASA button rõ trạng thái active hơn */
    .asa-button {
        transition: all 0.2s ease-in-out;
    }
    .asa-button.bg-primary-container {
        background-color: #3b82f6 !important; /* Xanh dương sáng */
        color: #ffffff !important;
        border: 2px solid #93c5fd !important; /* Xanh nhạt hơn ở viền */
        font-weight: 700 !important;
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
        transform: scale(1.03);
    }

    /* --- COMPACT CLINICAL WORKFLOW DENSITY --- */
    main {
        padding: 0.75rem 1.25rem !important; /* Giảm padding dọc */
    }
    main > .space-y-8 > * + *, .space-y-8 > * + * {
        margin-top: 1rem !important; /* Ép card gap gọn lại */
    }
    header {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    nav {
        height: 3.5rem !important;
    }
    nav .material-symbols-outlined {
        font-size: 20px !important;
    }
    nav span:last-child {
        font-size: 0.68rem !important;
    }
    @media (min-width: 769px) {
        aside, .sidebar {
            width: 14rem !important; /* w-56: Thu hẹp sidebar */
        }
    }
    .compact-form .input-group {
        gap: 0.2rem !important;
    }
}

/* ---------- RESPONSIVE UX OVERRIDES ---------- */

:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

button,
a,
summary,
input,
select,
textarea {
    touch-action: manipulation;
}

details.main-accordion {
    scroll-margin-top: 4.75rem;
}

.section-header > div,
.section-header span,
.card,
.glass-panel,
.input-group {
    min-width: 0;
}

.section-header > div,
.card h4,
.card h5,
label,
p {
    overflow-wrap: anywhere;
}

.clinical-main {
    max-width: min(100%, 1480px) !important;
}

.app-header {
    position: sticky;
    top: 0;
}

.top-actions {
    min-width: 0;
}

.top-actions .glass-button-primary {
    flex: 0 0 auto;
}

.app-sidebar {
    width: 15rem !important;
}

.app-sidebar a,
.mobile-bottom-nav a {
    min-height: 44px;
}

.icd-suggestions {
    z-index: 80;
}

.glass-input {
    border: 1px solid #475569 !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

@media (min-width: 1280px) {
    .clinical-main {
        padding: 1rem 2rem 2rem !important;
    }

    .card,
    .glass-panel {
        padding: 1rem !important;
    }
}

@media (max-width: 1024px) {
    .clinical-main {
        padding: 0.875rem !important;
    }

    .card,
    .glass-panel {
        padding: 0.875rem !important;
    }
}

@media (max-width: 767px) {
    body {
        padding-bottom: calc(5rem + var(--safe-bottom)) !important;
    }

    .app-header {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 0.625rem;
        padding: 0.75rem !important;
    }

    .app-header h2 {
        flex: 1 1 100%;
        max-width: none !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }

    .top-actions {
        display: flex;
        width: 100%;
        gap: 0.5rem !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-bottom: 0.125rem;
    }

    .top-actions::-webkit-scrollbar,
    .mobile-bottom-nav::-webkit-scrollbar {
        display: none;
    }

    .top-actions .hidden.sm\:inline {
        display: inline !important;
    }

    .top-actions .glass-button-primary {
        padding-inline: 0.75rem !important;
        min-height: 42px;
    }

    .clinical-main {
        padding: 0.75rem !important;
    }

    .section-header {
        align-items: flex-start;
        font-size: 0.92rem !important;
        padding: 0.75rem !important;
    }

    .section-header-icon,
    .section-header .w-1 {
        margin-top: 0.1rem;
    }

    .mobile-bottom-nav {
        justify-content: flex-start !important;
        gap: 0.25rem;
        height: auto !important;
        min-height: calc(4.25rem + var(--safe-bottom));
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 0.5rem 0.5rem calc(0.5rem + var(--safe-bottom)) !important;
        border-radius: 0 !important;
    }

    .mobile-bottom-nav a {
        flex: 0 0 4.75rem;
        padding: 0.375rem 0.25rem !important;
    }

    .mobile-bottom-nav span:last-child {
        max-width: 4.25rem;
        white-space: normal;
        line-height: 1.1;
        text-align: center;
    }
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 640px) {
    .card .grid.grid-cols-2,
    .card .grid.grid-cols-3,
    .card .grid.grid-cols-4,
    .card .grid.grid-cols-5,
    .glass-panel .grid.grid-cols-2,
    .glass-panel .grid.grid-cols-3,
    .glass-panel .grid.grid-cols-4 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .card .asa-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .card .lab-electrolytes,
    .card .mobile-two-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .input-field,
    .textarea-field,
    .glass-input,
    select,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="date"] {
        min-height: 44px;
        font-size: 16px !important;
    }

    .glass-button-primary {
        min-height: 44px;
    }

    .fixed.inset-0 > div {
        max-width: calc(100vw - 1rem) !important;
    }
}

@media (max-width: 420px) {
    .clinical-main {
        padding-inline: 0.5rem !important;
    }

    .card,
    .glass-panel {
        padding: 0.75rem !important;
    }

    .top-actions .glass-button-primary {
        padding-inline: 0.625rem !important;
    }

    .top-actions .material-symbols-outlined {
        font-size: 18px !important;
    }

    .asa-button {
        min-width: 0;
        padding-inline: 0 !important;
    }
}