/* --bs-border-color (โหมดสว่าง) BS5 default #dee2e6 จางมากบนพื้นขาว — แก้ที่ตัวแปรตรงๆ กัน rule เฉพาะ selector แพ้ specificity/cascade ของ Bootstrap ในบางหน้า, dark mode ไม่แตะ (ประกาศค่าตัวเองอยู่แล้วอ่านออกพอ) */
:root {
    --bs-border-color: #a4abb0;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* sidebar height: dvh แทน vh กัน mobile address bar บัง (vh บรรทัดแรกเป็น fallback) */
.app-sidebar {
    max-height: 100vh !important;
    max-height: 100dvh !important;
}
.app-sidebar .sidebar-wrapper {
    height: calc(100vh - (3.5rem + 1px)) !important;
    height: calc(100dvh - (3.5rem + 1px)) !important;
}

/* small-box การ์ดในแถวเดียวกันสูงไม่เท่ากัน — บังคับสูงเท่ากัน + ดัน footer ชิดล่างเสมอ */
.small-box {
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
}
.small-box > .inner {
    flex: 1 1 auto;
}
.small-box > .small-box-footer {
    margin-top: auto;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.form-group {
    margin-bottom: 1rem;
}

/* * แดงหลัง label ของ field required */
.required .input-group-text::after,
.required > label::after {
    content: "*";
    color: #dc3545;
    margin-left: 4px;
    font-weight: bold;
}

/* หน้า login มีแค่ username/password ที่ required อยู่แล้วเสมอ — ดอกจันซ้ำซ้อนไม่จำเป็น */
.login-page .required .input-group-text::after {
    content: none;
}

/* dark-mode autofill — ป้องกัน browser ทำพื้นหลัง input เป็นสีขาว */
[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea:-webkit-autofill,
[data-bs-theme="dark"] textarea:-webkit-autofill:hover,
[data-bs-theme="dark"] textarea:-webkit-autofill:focus,
[data-bs-theme="dark"] select:-webkit-autofill,
[data-bs-theme="dark"] select:-webkit-autofill:hover,
[data-bs-theme="dark"] select:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff;
    -webkit-text-fill-color: #fff !important;
}

/* select ใช้ class form-control (BS4 เดิม) แทน form-select ของ BS5 — เลยไม่มี chevron ให้เอง เติมเองที่นี่ */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}
[data-bs-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* switch เป็น boolean ผ่าน client-validation เสมอ — Bootstrap ทำ label เขียวตาม is-valid ทั้งที่ไม่ได้ต้องการสื่อสถานะ validate */
.form-switch .form-check-input.is-valid ~ .form-check-label,
.form-switch .form-check-input:valid ~ .form-check-label {
    color: var(--bs-body-color);
}

/* select2 theme เป็น light-only — override เท่าที่จำเป็นสำหรับ dark mode */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message {
    color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

@media (max-width: 575px) {
    .content-header { padding: 6px 0.5rem; }
    .content-header .row { margin-bottom: 0 !important; }
}

/* content full-width บน mobile — sidebar เปิดเป็น overlay ผ่าน hamburger */
/* custom-file browse button — ใช้ data-browse จาก i18n แทน hardcode */
.custom-file-label::after {
    content: attr(data-browse);
}

@media (max-width: 575px) {
    .sidebar-mini.sidebar-collapse .content-wrapper,
    .sidebar-mini.sidebar-collapse .main-footer,
    .sidebar-mini-md.sidebar-collapse .content-wrapper,
    .sidebar-mini-md.sidebar-collapse .main-footer,
    .sidebar-mini-xs.sidebar-collapse .content-wrapper,
    .sidebar-mini-xs.sidebar-collapse .main-footer { margin-left: 0 !important; }
}

/* card-tools ปุ่มหลายตัว (view.php) — AdminLTE4 ใช้ float:right เดิม ตอนพื้นที่ไม่พอ float wrap มั่ว
   ปุ่มสุดท้ายหลุดโดดเดี่ยว ระยะห่างไม่เท่ากัน (margin utility ผสมกัน) เปลี่ยนเป็น flex-wrap + gap บนมือถือแทน */
@media (max-width: 767px) {
    .card-header > .card-tools {
        float: none;
        clear: both;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        width: 100%;
        margin-top: 0.5rem;
        margin-right: 0;
    }
}