/* ธีมน้ำเงิน-ฟ้า · ฟอนต์ Prompt · ใช้ได้ทั้งคอมพิวเตอร์และมือถือ (Android / iOS) */
:root {
    --coor-navy: #0d3b8c;
    --coor-blue: #1565c0;
    --coor-sky: #42a5f5;
    --coor-light: #e3f2fd;
    --coor-pale: #f4f9ff;
    --coor-border: #d3e4fa;

    --bs-font-sans-serif: "Prompt", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --bs-body-font-weight: 300;
    --bs-body-bg: var(--coor-pale);
    --bs-body-color: #1d2b44;
    --bs-primary: #1565c0;
    --bs-primary-rgb: 21, 101, 192;
    --bs-link-color: #1565c0;
    --bs-link-color-rgb: 21, 101, 192;
    --bs-link-hover-color: #0d3b8c;
    --bs-link-hover-color-rgb: 13, 59, 140;
    --bs-border-radius: .6rem;
}

body { min-height: 100vh; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, th, .fw-semibold { font-weight: 500; }
h1, .h3 { color: var(--coor-navy); }

/* แถบเมนู */
.app-navbar {
    background: linear-gradient(90deg, var(--coor-navy), var(--coor-blue));
    padding-top: .8rem; padding-bottom: .8rem;
    box-shadow: 0 2px 8px rgba(13, 59, 140, .25);
}
.app-navbar .navbar-brand { font-weight: 500; }
.app-navbar .nav-link, .app-navbar .btn { white-space: nowrap; }
@media (min-width: 1200px) { .app-navbar .navbar-text { white-space: nowrap; } }
.app-navbar .nav-link { color: rgba(255, 255, 255, .88); }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus { color: #fff; }
.app-navbar .navbar-text { color: #cfe5ff; font-size: .9rem; }
.app-navbar .dropdown-menu { border-color: var(--coor-border); box-shadow: 0 6px 18px rgba(13, 59, 140, .15); }
.app-navbar .dropdown-item:active { background: var(--coor-blue); }

/* ปุ่ม */
.btn { font-weight: 400; }
.btn-primary {
    --bs-btn-bg: var(--coor-blue); --bs-btn-border-color: var(--coor-blue);
    --bs-btn-hover-bg: var(--coor-navy); --bs-btn-hover-border-color: var(--coor-navy);
    --bs-btn-active-bg: var(--coor-navy); --bs-btn-active-border-color: var(--coor-navy);
    --bs-btn-disabled-bg: var(--coor-blue); --bs-btn-disabled-border-color: var(--coor-blue);
}
.btn-outline-primary {
    --bs-btn-color: var(--coor-blue); --bs-btn-border-color: var(--coor-blue);
    --bs-btn-hover-bg: var(--coor-blue); --bs-btn-hover-border-color: var(--coor-blue);
    --bs-btn-active-bg: var(--coor-navy); --bs-btn-active-border-color: var(--coor-navy);
}
.btn-link { --bs-btn-color: var(--coor-blue); --bs-btn-hover-color: var(--coor-navy); }

/* ฟอร์ม — ตัวอักษร 16px กัน iOS ซูมเมื่อแตะช่องกรอก */
.form-control, .form-select { font-size: 1rem; border-color: var(--coor-border); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--coor-sky);
    box-shadow: 0 0 0 .2rem rgba(66, 165, 245, .25);
}
.form-check-input:checked { background-color: var(--coor-blue); border-color: var(--coor-blue); }
.form-control:disabled { background: var(--coor-light); }

/* การ์ด / แท็บ */
.card { border-color: var(--coor-border); border-radius: .9rem; box-shadow: 0 2px 10px rgba(13, 59, 140, .06); }
.nav-tabs .nav-link.active { color: var(--coor-navy); font-weight: 500; }
.nav-pills .nav-link.active { background: var(--coor-blue); }

/* ตาราง */
.table { --bs-table-bg: #fff; border-color: var(--coor-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #f3f8ff; }
.table-head-blue thead th { background: var(--coor-blue); color: #fff; white-space: nowrap; border-color: #2a77cc; }
.table-head-light thead th { background: var(--coor-light); color: var(--coor-navy); }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { text-decoration: underline; color: inherit; }
.sort-idle { opacity: .55; font-size: .85em; }
.table-responsive { border-radius: .75rem; }
.num { text-align: right; }

/* ปฏิทินไทย (พ.ศ.) ของช่อง date_input */
.thai-date { position: relative; flex-wrap: nowrap; }
.tdp {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050; width: 300px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid var(--coor-border); border-radius: .75rem; padding: .6rem;
}
.tdp-head { display: flex; gap: .3rem; align-items: center; margin-bottom: .4rem; }
.tdp-head select { flex: 1; min-width: 0; border: 1px solid var(--coor-border); border-radius: .4rem; padding: .25rem; font-size: 1rem; background: #fff; }
.tdp-head button, .tdp-foot button {
    border: 0; background: var(--coor-light); color: var(--coor-navy); border-radius: .4rem; padding: .25rem .6rem; font-size: 1.1rem;
}
.tdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.tdp-dow { font-size: .8rem; color: var(--coor-navy); font-weight: 500; padding: .2rem 0; }
.tdp-day { border: 0; background: transparent; border-radius: .4rem; padding: .4rem 0; font-size: .95rem; }
.tdp-day:hover:not(:disabled) { background: var(--coor-light); }
.tdp-day.today { outline: 1px solid var(--coor-sky); }
.tdp-day.selected { background: var(--coor-blue); color: #fff; }
.tdp-day:disabled { color: #b9c4d4; }
.tdp-foot { text-align: right; margin-top: .4rem; }
.tdp-foot button { font-size: .9rem; }

/* หน้าเข้าสู่ระบบ */
.login-page {
    background: linear-gradient(160deg, var(--coor-navy) 0%, var(--coor-blue) 45%, var(--coor-sky) 100%);
}
.login-card { max-width: 440px; margin: 6vh auto; border: 0; border-radius: 1.25rem; box-shadow: 0 16px 48px rgba(0, 0, 0, .22); }
.login-card h1 { color: var(--coor-navy); }
.login-logo { border-radius: 50%; box-shadow: 0 6px 18px rgba(13, 59, 140, .18); }
.login-org { color: var(--coor-blue); font-weight: 500; font-size: 1.05rem; }

/* ส่วนท้าย: หัวข้อ + ช่องติดต่อพร้อมไอคอน คั่นด้วยเส้นแนวตั้ง (มือถือเรียงลงมา) */
.app-footer {
    background: #fff; border-top: 1px solid var(--coor-border); margin-top: 2rem;
    padding: 1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom));
}
.app-footer-title { font-size: 1.1rem; font-weight: 500; text-align: center; color: var(--coor-navy); margin-bottom: 1.1rem; }
.app-footer-title span { color: var(--coor-blue); }
.app-contacts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }
.app-contact {
    display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .4rem 1rem;
    color: inherit; text-decoration: none;
}
.app-contact + .app-contact { border-left: 1px solid var(--coor-border); }
a.app-contact:hover .app-contact-value { color: var(--coor-blue); text-decoration: underline; }
.app-contact-icon {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(13, 59, 140, .15);
}
.app-contact-icon.is-web { background: linear-gradient(135deg, var(--coor-blue), var(--coor-sky)); }
.app-contact-icon.is-line { background: #06c755; }
.app-contact-icon.is-phone { background: linear-gradient(135deg, #0d3b8c, #1e88e5); }
.app-contact-label { display: block; font-size: .85rem; color: #5b6b85; line-height: 1.3; }
.app-contact-value { display: block; font-weight: 500; color: var(--coor-navy); line-height: 1.35; }
.app-contact-value a { color: inherit; text-decoration: none; }
.app-contact-value a:hover { color: var(--coor-blue); text-decoration: underline; }
.login-page .app-footer { background: rgba(255, 255, 255, .95); border-top: 0; margin-top: 0; }
@media (max-width: 767.98px) {
    .app-footer-title span { display: block; }
    .app-contacts { grid-template-columns: 1fr; gap: .25rem; }
    .app-contact { justify-content: flex-start; padding: .5rem .25rem; }
    .app-contact + .app-contact { border-left: 0; border-top: 1px solid var(--coor-border); }
}

/* ตารางยาวเกิน 20 แถว: เลื่อนในกรอบ หัวตารางติดด้านบน */
.table-scroll { max-height: 70vh; overflow-y: auto; border: 1px solid var(--coor-border); border-radius: .75rem; }
.table-scroll table { margin-bottom: 0; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* มือถือ: ตารางเรียงเป็นการ์ดทีละแถว (ป้ายคอลัมน์มาจาก data-label ที่ app.js ใส่ให้) */
@media (max-width: 767.98px) {
    main.container-fluid { padding-left: 12px; padding-right: 12px; }
    h1.h3, .h3 { font-size: 1.25rem; }
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr {
        background: #fff; border: 1px solid var(--coor-border); border-radius: .75rem;
        margin-bottom: .75rem; padding: .35rem .75rem; box-shadow: 0 2px 8px rgba(13, 59, 140, .06);
    }
    .table-stack > tbody > tr > td {
        display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
        border: 0; padding: .3rem 0; text-align: right; background: transparent; box-shadow: none;
    }
    .table-stack > tbody > tr > td::before {
        content: attr(data-label); flex: 0 0 40%; text-align: left; font-weight: 500; color: var(--coor-navy);
    }
    .table-stack > tbody > tr > td[colspan] { justify-content: center; text-align: center; }
    .table-stack > tbody > tr > td[colspan]::before { content: none; }
    .table-stack > tbody > tr > td.text-center { justify-content: space-between; }
}