/* =====================================================================
   UI refresh (Phase 2.5) — ปรับหน้าตาฟอร์ม ปุ่ม การ์ด ตาราง ให้ทันสมัย
   โหลดต่อจาก app.css · ต้องการกลับไปหน้าตาเดิม: ลบ <link ui.css> ใน layout.php / layout_blank.php
   ===================================================================== */
:root {
  /* สีหลัก — ถูกแทนที่ด้วยสีธีมของบริษัท (ตั้งค่าที่ บริษัท → แก้ไข → สีธีม) */
  --brand: #1f3a5f; --brand-2: #2f6690; --brand-3: #3d82b8; --brand-hover: #28577a; --brand-soft: #ecf3f9; --brand-border: #bad4e8; --brand-muted: #82abc9;
  --brand-rgb: 47, 102, 144; --brand-dark-rgb: 31, 58, 95;
  --ink: #1b2430; --muted: #5b6675; --line: #dde3ea; --line-soft: #edf1f5;
  --surface: #ffffff; --page: #f3f6f9;
  --radius: .6rem; --radius-sm: .45rem;
  --ring: 0 0 0 .22rem rgba(var(--brand-rgb), .18);
  --shadow-1: 0 1px 2px rgba(16, 30, 54, .06), 0 1px 3px rgba(16, 30, 54, .06);
  --shadow-2: 0 6px 18px rgba(16, 30, 54, .10);
  --bs-primary: var(--brand-2); --bs-primary-rgb: var(--brand-rgb); --bs-link-color: var(--brand-2); --bs-link-color-rgb: var(--brand-rgb); --bs-link-hover-color: var(--brand); --bs-primary-text-emphasis: var(--brand); --bs-primary-bg-subtle: var(--brand-soft); --bs-primary-border-subtle: var(--brand-border);
  --bs-border-radius: var(--radius-sm);
}
body { background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; }
/* backwards (ไม่ใช่ both): จบแอนิเมชันแล้วต้องไม่ค้าง transform/opacity ไว้ — ไม่งั้น main กลายเป็น stacking context
   แล้ว modal ที่อยู่ข้างในถูกฉากหลังดำ (backdrop) ทับ กดอะไรไม่ได้/ปิดไม่ได้ */
main.container-fluid { animation: ui-fade .25s ease-out backwards; }
@keyframes ui-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- หัวเรื่อง ---------- */
.page-title { font-size: 1.4rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }

/* ---------- การ์ด ---------- */
.card { border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.card > .card-header:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card-header { background: var(--surface); border-bottom: 1px solid var(--line-soft); padding: .85rem 1.15rem; font-weight: 600; font-size: 1.02rem; }
.card-body { padding: 1.15rem 1.25rem; }
.card-footer { background: #fafbfd; border-top: 1px solid var(--line-soft); padding: .8rem 1.15rem; }
@media (min-width: 768px) { .card-body:has(> form) { padding: 1.4rem 1.6rem; } }

/* ---------- ฟอร์ม ---------- */
.form-label { font-weight: 500; font-size: .92rem; color: #344054; margin-bottom: .35rem; }
.form-text { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.form-control, .form-select, .ts-wrapper .ts-control, .input-group-text {
  border-color: var(--line); border-radius: var(--radius-sm); min-height: 2.6rem; font-size: .97rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control-sm, .form-select-sm { min-height: 2.05rem; font-size: .88rem; }
textarea.form-control { min-height: 5.5rem; line-height: 1.55; }
.form-control::placeholder { color: #9aa4b2; }
.form-control:hover:not(:focus):not([readonly]):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: #c3ccd7; }
.form-control:focus, .form-select:focus, .ts-wrapper.focus .ts-control { border-color: var(--brand-3); box-shadow: var(--ring); }
.form-control[readonly], .form-control:disabled, .form-select:disabled { background: #f5f7fa; color: #59636f; }
.input-group-text { background: #f6f8fb; color: var(--muted); }
.input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 5; }
.form-check-input { border-color: #b8c2ce; }
.form-check-input:checked { background-color: var(--brand-2); border-color: var(--brand-2); }
.form-check-input:focus { border-color: var(--brand-3); box-shadow: var(--ring); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.form-check-label { cursor: pointer; }
.was-validated .form-control:invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: #d9534f; }
.ui-shake { animation: ui-shake .35s; }
@keyframes ui-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
label.required::after, .form-label.required::after { content: ' *'; color: #d9534f; font-weight: 600; }
/* ตัวนับตัวอักษร / ปุ่มดูรหัสผ่าน (ใส่โดย ui.js) */
.ui-counter { font-size: .75rem; color: #9aa4b2; text-align: right; margin-top: .2rem; }
.ui-counter.near { color: #c77c02; } .ui-counter.full { color: #d9534f; }
.ui-pass { position: relative; }
.ui-pass .form-control { padding-right: 2.6rem; }
.ui-pass-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); padding: .25rem .45rem; border-radius: .4rem; z-index: 6; }
.ui-pass-btn:hover { background: #eef2f6; color: var(--ink); }

/* ---------- ปุ่ม ---------- */
.btn { --bs-btn-font-weight: 500; border-radius: var(--radius-sm); padding: .5rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s, border-color .15s, color .15s; position: relative; overflow: hidden; }
.btn.w-100, .d-grid > .btn { display: flex; }
.btn-sm { padding: .3rem .7rem; font-size: .86rem; border-radius: .4rem; gap: .3rem; }
.btn-lg { padding: .7rem 1.4rem; }
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(.98); }
.btn:focus-visible { box-shadow: var(--ring) !important; }
.btn .bi { font-size: 1.05em; line-height: 1; }
.btn-primary { --bs-btn-bg: var(--brand-2); --bs-btn-border-color: var(--brand-2); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-disabled-bg: var(--brand-muted); --bs-btn-disabled-border-color: var(--brand-muted);
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)); box-shadow: 0 1px 2px rgba(var(--brand-dark-rgb),.25); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(var(--brand-dark-rgb),.28); }
.btn-success { box-shadow: 0 1px 2px rgba(25,135,84,.25); }
.btn-success:hover { box-shadow: 0 4px 12px rgba(25,135,84,.28); }
.btn-danger:hover { box-shadow: 0 4px 12px rgba(220,53,69,.28); }
.btn-outline-primary { --bs-btn-color: var(--brand-2); --bs-btn-border-color: var(--brand-border); --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-color: var(--brand);
  --bs-btn-hover-border-color: var(--brand-3); --bs-btn-active-bg: var(--brand-2); --bs-btn-active-border-color: var(--brand-2); }
.btn-outline-secondary { --bs-btn-color: #475467; --bs-btn-border-color: var(--line); --bs-btn-hover-bg: #f2f5f8; --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: #c3ccd7; --bs-btn-active-bg: #e7ecf2; --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: #c3ccd7; background: #fff; }
.btn-outline-danger { --bs-btn-border-color: #f0b8bd; --bs-btn-hover-bg: #fdecee; --bs-btn-hover-color: #b02a37; --bs-btn-hover-border-color: #dc3545; background: #fff; }
.btn-outline-success { --bs-btn-border-color: #a8d5bf; --bs-btn-hover-bg: #e8f5ee; --bs-btn-hover-color: #146c43; --bs-btn-hover-border-color: #198754; background: #fff; }
.btn-light { --bs-btn-bg: #eef2f6; --bs-btn-border-color: #eef2f6; --bs-btn-hover-bg: #e2e8ef; --bs-btn-hover-border-color: #e2e8ef; --bs-btn-color: #344054; }
.btn-group > .btn:hover, .btn-group > .btn:active { transform: none; }
.btn-group > .btn { display: inline-flex; }
/* ระลอกคลื่นตอนกด */
.ui-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .18; pointer-events: none; animation: ui-ripple .5s ease-out; }
@keyframes ui-ripple { to { transform: scale(2.6); opacity: 0; } }
/* สถานะกำลังบันทึก */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .bi { display: none; }
.btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

/* แถบปุ่มท้ายฟอร์ม — ติดขอบล่างจอเมื่อฟอร์มยาว */
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.form-actions.is-sticky { position: sticky; bottom: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  margin-left: -1.25rem; margin-right: -1.25rem; margin-bottom: -1.15rem; padding: .75rem 1.25rem; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 -6px 16px rgba(16,30,54,.06); }
@media (min-width: 768px) { .card-body:has(> form) .form-actions.is-sticky { margin-left: -1.6rem; margin-right: -1.6rem; margin-bottom: -1.4rem; padding-left: 1.6rem; padding-right: 1.6rem; } }
.form-actions .ui-dirty-note { display: none; font-size: .82rem; color: #b26b00; margin-left: auto; align-items: center; gap: .35rem; }
form.is-dirty .form-actions .ui-dirty-note { display: inline-flex; }
.card-footer.form-actions { margin: 0; padding: .8rem 1.15rem; border-top: 1px solid var(--line-soft); }
.card-footer.form-actions.is-sticky { margin: 0; padding: .8rem 1.15rem; }

/* ---------- ตาราง ---------- */
.table { --bs-table-hover-bg: #f5f8fc; margin-bottom: 0; }
.table > thead th { background: #f7f9fc; color: #475467; font-size: .82rem; font-weight: 600; letter-spacing: .01em; border-bottom: 1px solid var(--line); padding-top: .65rem; padding-bottom: .65rem; }
.table > tbody td { border-color: var(--line-soft); }
.card > .table-responsive:first-child > .table > thead th:first-child { border-top-left-radius: var(--radius); }
.card > .table-responsive:first-child > .table > thead th:last-child { border-top-right-radius: var(--radius); }
.table-hover > tbody > tr { transition: background-color .12s; }

/* ---------- ป้าย / แจ้งเตือน ---------- */
.badge { font-weight: 600; border-radius: .4rem; padding: .35em .6em; }
.badge.rounded-pill { border-radius: 2rem; }
main > .alert { border: 0; border-left: 4px solid; border-radius: var(--radius-sm); box-shadow: var(--shadow-1); display: flex; gap: .6rem; align-items: flex-start; padding-right: 3rem;
  animation: ui-drop .3s ease-out both; }
main > .alert::before { font-family: 'bootstrap-icons'; font-size: 1.15rem; line-height: 1.4; }
main > .alert-success { border-left-color: #198754; background: #ecf7f1; } main > .alert-success::before { content: '\F26B'; color: #198754; }
main > .alert-danger { border-left-color: #dc3545; background: #fdf0f1; } main > .alert-danger::before { content: '\F33A'; color: #dc3545; }
main > .alert-warning { border-left-color: #f0a500; background: #fff7e6; } main > .alert-warning::before { content: '\F33B'; color: #c77c02; }
main > .alert-info { border-left-color: var(--brand-3); background: var(--brand-soft); } main > .alert-info::before { content: '\F431'; color: var(--brand-2); }
@keyframes ui-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.alert.ui-hide { transition: opacity .4s, transform .4s; opacity: 0; transform: translateY(-6px); }

/* ---------- เมนูดรอปดาวน์ / โมดอล ---------- */
.dropdown-menu { border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-2); animation: ui-drop .14s ease-out; }
.modal-content { border: 0; border-radius: .9rem; box-shadow: 0 20px 50px rgba(16,30,54,.25); }
.ui-confirm .modal-body { padding: 1.6rem 1.6rem 1rem; text-align: center; }
.ui-confirm .ui-confirm-icon { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .75rem;
  background: #fff4e5; color: #c77c02; }
.ui-confirm.is-danger .ui-confirm-icon { background: #fdecee; color: #dc3545; }
.ui-confirm .modal-footer { border: 0; justify-content: center; padding: 0 1.6rem 1.4rem; gap: .5rem; }
.ui-confirm .modal-footer .btn { min-width: 7rem; }

/* ปุ่มกลับขึ้นด้านบน */
.ui-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1030; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 0; background: var(--brand-2); color: #fff; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.ui-top.show { opacity: .9; transform: none; pointer-events: auto; }
.ui-top:hover { opacity: 1; }
body:has(.form-actions.is-sticky) .ui-top { bottom: 5rem; }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.bg-login { background: radial-gradient(1200px 600px at 10% -10%, var(--brand-3) 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, var(--brand-2) 0%, transparent 55%), var(--brand); min-height: 100vh; }
.login-card { width: 100%; max-width: 400px; border: 0; border-radius: 1rem; box-shadow: 0 24px 60px rgba(8,20,40,.35); animation: ui-fade .35s ease-out both; }
.login-card .card-body { padding: 2.2rem 2rem 2rem; }
.login-mark { width: 3.4rem; height: 3.4rem; border-radius: .9rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--brand-3), var(--brand)); box-shadow: 0 8px 18px rgba(var(--brand-dark-rgb),.35); }
.login-card .input-group-text { background: #fff; border-right: 0; }
.login-card .input-group .form-control { border-left: 0; }
.login-card .input-group:focus-within .input-group-text { border-color: var(--brand-3); color: var(--brand-2); }
.login-foot { color: rgba(255,255,255,.7); font-size: .82rem; }

/* หน้าตั้งค่าแบบแคบ — จัดกึ่งกลางจอ */
.page-narrow { margin-left: auto; margin-right: auto; }

/* สีธีมบริษัท: องค์ประกอบเดิมใน app.css ที่ใช้สีฟ้า Bootstrap ตายตัว */
.thai-cal .tc-day:hover, .addr-item:hover, .addr-item.active { background: var(--brand-soft); }
.visit-cal .cal-today { box-shadow: inset 0 0 0 2px var(--brand-3); }
.visit-cal .cal-today .cal-date { color: var(--brand-2); }
.visit-cal .cal-add:hover, .visit-cal .cal-today-row { background: var(--brand-soft); }
.grade-pick .grade-opt input:focus-visible + .box { outline-color: var(--brand-3); }
.card.stat { border-left-width: 4px; }
.stat { border-left-color: var(--brand-2); }
.page-link { --bs-pagination-color: var(--brand-2); --bs-pagination-active-bg: var(--brand-2); --bs-pagination-active-border-color: var(--brand-2); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-2); }
.text-primary { color: var(--brand-2) !important; }
.border-primary { border-color: var(--brand-2) !important; }

/* ตัวเลือกสีธีมบริษัท (บริษัท → แก้ไข) */
.theme-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.theme-swatch { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
  cursor: pointer; position: relative; padding: 0; transition: transform .12s, box-shadow .12s; display: inline-flex; align-items: center; justify-content: center; }
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active { box-shadow: 0 0 0 2px var(--c, var(--ink)), var(--shadow-2); }
.theme-swatch.active::after { content: '\F26E'; font-family: 'bootstrap-icons'; color: #fff; font-size: 1.1rem; position: absolute; }
.theme-custom { background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); color: #fff; overflow: hidden; }
.theme-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.theme-custom .bi { text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.theme-custom.active::after { display: none; }
.theme-custom.active { box-shadow: 0 0 0 2px var(--ink), var(--shadow-2); }
.theme-preview { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-width: 560px; --tp-dark: #1f3a5f; --tp-base: #2f6690; --tp-light: #3d82b8; --tp-soft: #eaf2f9; --tp-border: #b9cfe2; --tp-rgb: 47,102,144; }
.theme-preview .tp-nav { background: var(--tp-dark); color: #fff; display: flex; align-items: center; gap: .9rem; padding: .55rem .9rem; font-size: .88rem; transition: background .25s; }
.theme-preview .tp-link { opacity: .75; } .theme-preview .tp-link.active { opacity: 1; background: rgba(255,255,255,.14); border-radius: .35rem; padding: .1rem .45rem; }
.theme-preview .tp-logo img { height: 22px; max-width: 70px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px 4px; }
.theme-preview .tp-body { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .9rem; background: #fff; }
.theme-preview .tp-btn { background: var(--tp-base); color: #fff; border-radius: .45rem; padding: .35rem .8rem; font-size: .88rem; box-shadow: 0 2px 6px rgba(var(--tp-rgb), .35); transition: background .25s; }
.theme-preview .tp-btn-outline { border: 1px solid var(--tp-border); color: var(--tp-base); background: var(--tp-soft); border-radius: .45rem; padding: .3rem .75rem; font-size: .88rem; }
.theme-preview .tp-a { color: var(--tp-base); text-decoration: underline; font-size: .88rem; }
.theme-preview .tp-input { border: 1px solid var(--tp-light); box-shadow: 0 0 0 .2rem rgba(var(--tp-rgb), .18); border-radius: .45rem; padding: .3rem .7rem; font-size: .85rem; color: var(--muted); }

/* ช่องเวลา 24 ชั่วโมง */
.time24-wrap { position: relative; }
.time24-wrap .form-control { padding-right: 2.2rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.time24-ic { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.time24-pop { position: absolute; z-index: 2000; display: none; width: 272px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .6rem; animation: ui-drop .14s ease-out; }
.time24-pop .t24-head { font-size: .75rem; color: var(--muted); margin: .1rem .1rem .3rem; }
.time24-pop .t24-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: .5rem; }
.time24-pop button { border: 0; background: #f4f6f9; border-radius: .35rem; padding: .32rem 0; font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink); }
.time24-pop .t24-h button.work { background: var(--brand-soft); }
.time24-pop button:hover { background: var(--brand-border); }
.time24-pop button.sel, .time24-pop .t24-h button.work.sel { background: var(--brand-2); color: #fff; }
.time24-pop .t24-foot { display: flex; gap: .3rem; justify-content: flex-end; border-top: 1px solid var(--line-soft); padding-top: .45rem; }
.time24-pop .t24-foot button { padding: .25rem .7rem; font-size: .85rem; }

/* วันเสาร์-อาทิตย์: ปิดไม่ให้ลงรายงานเข้าพบ */
.visit-cal .cal-day.cal-weekend { background: repeating-linear-gradient(135deg, #f1f3f6 0 8px, #eceff3 8px 16px); cursor: not-allowed; }
.visit-cal .cal-day.cal-weekend .cal-date { color: #9aa4b2; }
.visit-cal .cal-dow.cal-weekend { background: #eef1f4; }
.cal-legend .cal-legend-off { background: repeating-linear-gradient(135deg, #dfe3e8 0 3px, #f1f3f6 3px 6px); border: 1px solid #cfd5dc; }
.thai-cal .tc-day.tc-off, .thai-cal .tc-day.tc-off:hover { background: #f1f3f5; color: #c3c9d1; cursor: not-allowed; text-decoration: line-through; }