@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
}

/* Custom scrollbar (chỉ dùng cho màn hình) */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f1f1; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #94a3b4; 
}

/* Loading overlay (chỉ dùng cho màn hình) */
.loading-overlay { 
    background-color: rgba(255, 255, 255, 0.8); 
}

/* Trạng thái SOW (dùng cho cả màn hình và in) */
.status-badge {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.status-badge.completed {
    background-color: #d1fae5;
    color: #065f46;
}
.status-badge.not-completed {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Bố cục radio button (dùng cho cả màn hình và in) */
.assessment-row {
    display: grid;
    grid-template-columns: 1fr 120px 120px; 
    gap: 0;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.assessment-item-label {
    padding-left: 12px;
    font-size: 0.875rem;
    color: #374151;
}
.assessment-column-dat,
.assessment-column-tot {
    padding: 0 8px;
    border-left: 1px solid #e5e7eb;
    text-align: center;
    display: grid; 
    grid-template-rows: 1fr auto; 
    align-items: center;
    min-height: 48px; 
}
.assessment-column-dat label,
.assessment-column-tot label {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0; 
}
.assessment-column-dat span,
.assessment-column-tot span {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4b5563;
}
.assessment-group > .assessment-row:last-child {
    border-bottom: none;
}

/* --- (THIẾU) QUY TẮC DÀNH RIÊNG CHO VIỆC IN PDF --- */
/* Bổ sung khối @media print để hỗ trợ window.print() */
@media print {
    /* Ẩn tất cả mọi thứ TRỪ phần #app */
    body > *:not(#app) {
        display: none !important;
    }

    /* Đảm bảo #app và nội dung của nó được hiển thị */
    body, #app {
        visibility: visible;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ẩn các phần tử không mong muốn BÊN TRONG #app khi in */
    #app header,
    #app footer,
    #app #saveButton,
    #app .p-6.pt-0, /* Ẩn cả div bọc nút Lưu */
    #app #loading-overlay,
    #app #notification-toast {
        display: none !important;
    }

    /* Đặt lại padding cho nội dung chính khi in */
    main {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Đảm bảo SOW không bị vỡ/ngắt trang giữa chừng */
    .sow-item, .assessment-group, section {
        page-break-inside: avoid;
    }

    /* Cho phép ngắt trang TRƯỚC SOW (nếu cần) */
    .sow-item {
        page-break-before: auto;
    }
}
/* === (MỚI) CSS CHO SOW THU GỌN === */

/* 1. Nút bấm (tiêu đề SOW) */
.sow-header-button {
    display: flex;
    justify-content: space-between; /* Đẩy nội dung ra 2 bên */
    align-items: center;
    width: 100%;
    padding: 1rem; /* 16px */
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}
/* Hiệu ứng khi di chuột qua */
.sow-header-button:hover {
    background-color: #f9fafb; /* bg-gray-50 */
}

/* 2. Icon mũi tên (chevron) */
.sow-toggle-icon {
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0; /* Không bị co lại */
    margin-left: 1rem;
    /* Mặc định xoay -90 độ (thu gọn) */
    transform: rotate(-90deg); 
}
/* Lớp .expanded sẽ xoay mũi tên về 0 độ */
.sow-toggle-icon.expanded {
    transform: rotate(0deg);
}

/* 3. Khung chứa nội dung SOW */
.sow-content-wrapper {
    /* Mặc định ẩn */
    display: none;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}
/* Lớp .expanded sẽ hiện nội dung */
.sow-content-wrapper.expanded {
    display: block;
}