/*
 * /assets/css/style.css
 * (CSS หลักของระบบ)
 */

/* (Font Sarabun และ SweetAlert - จากครั้งก่อน) */
/*
 * /assets/css/style.css
 * (ฉบับปรับปรุง: ธีมสี Teal และปรับ Layout)
 */

/* --- 1. Font และ พื้นหลัง --- */
body {
  font-family: 'Sarabun', sans-serif;
  /* (เปลี่ยนสีพื้นหลังเป็นเทาที่นุ่มนวลขึ้นเล็กน้อย) */
  background-color: #f4f7f6; 
}
.swal-sarabun { 
    font-family: "Sarabun", sans-serif; 
}

/* --- 2. (!! หัวใจหลัก !!) การตั้งค่าสีใหม่ (Override Bootstrap) --- */
:root {
    /* (เปลี่ยนสีหลักเป็น Teal) */
    --bs-primary: #0D9488; 
    --bs-primary-rgb: 13, 148, 136;
    
    /* (กำหนดสี Hover (เข้มขึ้นเล็กน้อย)) */
    --bs-primary-hover: #0A7F71;
    
    /* (ปรับให้มุมมนขึ้นเล็กน้อย) */
    --bs-border-radius: 0.375rem; 
    
    /* (ปรับ Card ให้นูนขึ้นมา) */
    --bs-card-border-width: 0;
    --bs-card-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}


/* --- 3. การปรับใช้ธีมกับส่วนต่างๆ --- */

/* (Buttons) */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}
.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    color: white;
}

/* (Text & Links) */
.text-primary {
    color: var(--bs-primary) !important; 
}
a {
    color: var(--bs-primary);
}
a:hover {
    color: var(--bs-primary-hover);
}

/* (Navbar - ใช้สีธีมกับ Brand) */
.navbar-brand.text-primary {
    color: var(--bs-primary) !important;
}

/* (Modal Headers) */
.modal-header.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* (Card Headers - ทำให้สะอาดขึ้น) */
.card-header.bg-light {
    background-color: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
}

/* (Badges) */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* (Pagination) */
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.page-link {
    color: var(--bs-primary);
}


/* --- 4. (แก้ไข) หน้า Login (Split Screen) --- */
/* (ใช้ Gradient สีใหม่) */
.login-branding-side {
    background: linear-gradient(to right, rgba(13, 148, 136, 0.85), rgba(9, 100, 90, 0.85)),
                url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNjAzNTV8MHwxfGFsbHx8fHx8fHx8fDE3MzEyMzk2Nzh8&ixlib=rb-4.0.3&q=80&w=1080');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 3rem;
}

.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa; 
}
.login-container { min-height: 100vh; }

@media (max-width: 991.98px) {
    .login-branding-side { display: none; }
    .login-form-side { background-color: #f4f7f6; }
}

/* (ปรับขนาด Font ให้เหมาะสม - จากครั้งก่อน) */
.form-control, .btn, .form-select,
.navbar, .card-header, .dropdown-item, .nav-link,
.modal-title, .modal-body, 
.swal2-title, .swal2-html-container {
    font-size: 1rem;
}

/* --- 5. High-Contrast & Clearly Visible Radio Buttons & Checkboxes --- */
.form-check-input {
    width: 1.35em !important;
    height: 1.35em !important;
    margin-top: 0.15em !important;
    border: 2.5px solid #475569 !important; /* Dark Slate Gray for high visibility */
    cursor: pointer !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.form-check-input:hover {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.2) !important;
}
.form-check-input:checked {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
}
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.2' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
}
.form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.form-check-label {
    cursor: pointer !important;
    padding-left: 0.2rem !important;
}

/* Modal Option Card Boxes */
.sgs-option-box {
    background-color: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.sgs-option-box:hover {
    border-color: #0D9488;
    background-color: #f0fdfa;
}
.sgs-option-box:has(.form-check-input:checked) {
    border-color: #0D9488;
    background-color: #f0fdfa;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12);
}