:root {
    --primary-color: #c95117;
    --bg-color: #f3f4f6;
    --border-color: #e5e7eb;
}
body { font-family: 'Inter', sans-serif; margin: 0; background-color: var(--bg-color); height: 100vh; overflow: hidden; }

/* Quản lý 2 màn hình */
.screen-active { display: block; height: 100%; }
.screen-hidden { display: none; }

/* -- MÀN HÌNH SẢNH -- */
.header { background: white; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; }
.header h2 { margin: 0; color: var(--primary-color); font-size: 20px; }
.search-box input { padding: 10px 15px; width: 300px; border: 1px solid var(--border-color); border-radius: 8px; }

/* HIỆU CHỈNH FLEX CHO GRID ĐỂ GÓI GỌN GIẤY A4 */
.grid-container { 
    padding: 40px; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 30px; 
    overflow-y: auto; 
    height: calc(100vh - 80px); 
    align-content: flex-start; /* ÉP CÁC CARD GỌN GÀNG LÊN TRÊN */
}

/* THIẾT KẾ CARD THÀNH TỜ GIẤY A4 */
.form-card { 
    width: 210px;
    min-height: 297px; 
    background: white; 
    padding: 25px 15px 20px 35px; /* Lùi lề trái 35px để chừa gáy tài liệu */
    border-radius: 2px; 
    cursor: grab; 
    border: 1px solid var(--border-color); 
    transition: 0.2s; 
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.08);
}
.form-card:hover { 
    border-color: var(--primary-color); 
    box-shadow: 5px 10px 20px rgba(0,0,0,0.15); 
    transform: translateY(-5px); 
}
.form-card:active { cursor: grabbing; }

/* Tạo gáy kẹp tài liệu bên trái tờ A4 */
.form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 25px;
    background: linear-gradient(to right, #f8fafc, #e2e8f0);
    border-right: 1px solid #cbd5e1;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    z-index: 1;
}
/* Tạo 3 lỗ bấm ghim dọc theo gáy */
.form-card::after {
    content: '';
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    height: 150px; width: 8px;
    background: radial-gradient(circle, #cbd5e1 4px, transparent 5px) repeat-y;
    background-size: 100% 50px;
    z-index: 2;
}

/* Đảm bảo nội dung không đè lên gáy */
.form-card > * { position: relative; z-index: 3; }

.form-card .badge { 
    display: inline-block; padding: 4px 8px; background: #fff0eb; 
    color: var(--primary-color); border-radius: 4px; font-size: 11px; 
    margin-bottom: 15px; font-weight: bold; align-self: flex-start;
}
/* Hiệu ứng mờ đi khi anh đang giữ chuột kéo thẻ */
.sortable-ghost { opacity: 0.4; background: #f8fafc; border: 2px dashed var(--primary-color); }

/* --- GIAO DIỆN TÍNH NĂNG BIỂU MẪU THƯỜNG DÙNG --- */
.btn-star { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: none; 
    border: none; 
    font-size: 18px; 
    color: #cbd5e1; 
    cursor: pointer; 
    transition: 0.2s; 
    z-index: 4; /* Nổi lên trên giấy */
}
.btn-star:hover { transform: scale(1.2); color: #facc15; }
.btn-star.active { color: #eab308; }

#btn-favorites.active { 
    background: #fef08a !important; border-color: #facc15 !important; color: #a16207 !important; 
}
#btn-config:hover { background: #e2e8f0 !important; }

/* -- MÀN HÌNH FOCUS MODE -- */
.workspace-header { background: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); height: 60px; box-sizing: border-box;}
.btn-back, .btn-print { padding: 8px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-back { background: #f3f4f6; color: #374151; }
.btn-print { background: var(--primary-color); color: white; }

.workspace-layout { display: flex; height: calc(100vh - 60px); }
.input-panel { width: 40%; background: white; padding: 20px; overflow-y: auto; border-right: 1px solid var(--border-color); }
.a4-panel { 
    width: 60%; background: #525659; padding: 20px; overflow-y: auto; 
}

/* Khung giấy A4 */
.a4-paper { background: white; width: 210mm; min-height: 297mm; padding: 20mm; box-shadow: 0 0 10px rgba(0,0,0,0.5); box-sizing: border-box; font-size: 14pt; line-height: 1.5; }

/* CSS sinh form tự động */
.cccd-scanner-box { background: #f8fafc; padding: 15px; border: 2px dashed #cbd5e1; border-radius: 8px; margin-bottom: 20px; }
.cccd-scanner-box input { width: 100%; padding: 10px; margin-top: 10px; border: 1px solid #94a3b8; border-radius: 4px; box-sizing: border-box;}
.dynamic-input-group { margin-bottom: 0px; }
.dynamic-input-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 14px; color: #334155; }
.dynamic-input-group input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; }

/* Các thẻ span điền dữ liệu trên giấy */
.ef-data { color: blue; border-bottom: 1px dotted blue; min-width: 50px; display: inline-block; }

/* =========================================================
   1. GIAO DIỆN TỜ A4 TRÊN MÀN HÌNH (SCREEN MODE)
========================================================= */
#a4-template-container {
    width: 210mm;
    min-height: 297mm; 
    height: auto !important; 
    background-color: #ffffff;
    margin: 20px auto 40px auto; 
    padding: 25mm 15mm 20mm 30mm !important;        
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid #d1d5db;
    border-radius: 2px;
    overflow: visible; 
}

/* =========================================================
   2. GIAO DIỆN KHI BẤM IN (PRINT MODE)
========================================================= */
@media print {
    body * { visibility: hidden; }
    #a4-template-container, #a4-template-container * { visibility: visible; }
    .ef-data { border-bottom: none !important; color: black !important; }
    #a4-template-container { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0 !important; border: none; box-shadow: none; background-color: transparent; }
    @page { size: A4; margin: 25mm 15mm 20mm 30mm !important; }
}

/* =========================================================
   GIAO DIỆN HỘP THOẠI (CUSTOM DIALOG)
========================================================= */
.eform-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.2s ease-in-out;
}
.eform-modal-overlay.active { opacity: 1; visibility: visible; }
.eform-modal-box {
    background: #ffffff; padding: 20px 25px; border-radius: 8px; width: 380px; max-width: 90%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); transform: translateY(-20px); transition: all 0.3s ease-in-out;
}
.eform-modal-overlay.active .eform-modal-box { transform: translateY(0); }
.eform-modal-title { margin: 0 0 8px 0; font-size: 16px; color: var(--primary-color); }
.eform-modal-desc { margin: 0 0 15px 0; font-size: 13px; color: #475569; }
.eform-modal-input { 
    width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; 
    font-size: 14px; margin-bottom: 20px; outline: none; transition: 0.2s;
}
.eform-modal-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(201, 81, 23, 0.15); }
.eform-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-modal-cancel { padding: 8px 15px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; color: #475569; font-weight: 500; }
.btn-modal-cancel:hover { background: #f1f5f9; }
.btn-modal-confirm { padding: 8px 15px; border: none; background: #16a34a; border-radius: 6px; cursor: pointer; color: #fff; font-weight: 600; }
.btn-modal-confirm:hover { background: #15803d; }

/* =========================================================
   THÔNG BÁO TỰ ĐỘNG TẮT (TOAST NOTIFICATION)
========================================================= */
.eform-toast {
    position: fixed; bottom: 30px; right: 30px; background: #ffffff; border-left: 5px solid #16a34a;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); padding: 15px 20px; border-radius: 4px; display: flex; 
    align-items: center; gap: 12px; z-index: 10000; transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.eform-toast.show { transform: translateX(0); }
.eform-toast-msg { font-size: 14px; color: #334155; font-weight: 500; margin: 0; }
.ef-autofilled { background-color: #e0f2fe !important; border-color: #7dd3fc !important; color: #0369a1 !important; font-weight: 600 !important; transition: background-color 0.3s ease; }

/* =========================================================
   CỬA SỔ MODAL CẤU HÌNH BIỂU MẪU (MỚI THÊM)
========================================================= */
.config-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 10000;
}
.config-modal-content {
    background: white; width: 500px; max-height: 80vh; border-radius: 8px;
    display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.config-modal-header { 
    padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; 
    justify-content: space-between; align-items: center; font-weight: bold; font-size: 16px; color: var(--primary-color);
}
.config-modal-body { padding: 20px; overflow-y: auto; flex-grow: 1; }
.config-modal-footer { padding: 15px 20px; border-top: 1px solid var(--border-color); text-align: right; }

.config-close-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: #64748b; }
.config-btn-save { background: #16a34a; color: white; border: none; padding: 8px 20px; border-radius: 4px; font-weight: bold; cursor: pointer; }

.config-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; border-bottom: 1px solid #f1f5f9;
}
.config-item:hover { background: #f8fafc; }

/* Công tắc tắt mở (Toggle Switch) */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; margin: 0;}
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(18px); }