:root {
    color-scheme: light;
    font-family: "Noto Sans Thai", "Thonburi", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #183044;
    background: #f3f7fa;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f3f7fa; color: #183044; font-size: 15px; line-height: 1.55; }
a { color: #0b5fa5; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.25; }
h2 { margin-bottom: 4px; font-size: 1.08rem; }
p { color: #627987; }
.app-shell { width: 100%; min-width: 0; min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { min-width: 0; padding: 22px 14px; color: #fff; background: linear-gradient(180deg, #0b5fa5, #084a80); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 8px 28px; color: #fff; font-weight: 700; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 11px 11px 15px 15px; color: #fff; background: #2cb7c9; font-weight: 700; font-size: .82rem; }
.main-nav { min-width: 0; max-width: 100%; display: grid; gap: 5px; }
.main-nav a, .nav-disabled { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; color: #fff; }
.main-nav a[aria-current="page"] { background: rgba(255,255,255,.18); font-weight: 600; }
.main-nav a:hover { background: rgba(255,255,255,.11); }
.nav-disabled { color: rgba(255,255,255,.58); cursor: default; }
.nav-disabled small { font-size: .63rem; }
.app-main { min-width: 0; }
.topbar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: #fff; border-bottom: 1px solid #dbe7ec; }
.account-menu { display: flex; align-items: center; gap: 9px; font-size: .86rem; }
.global-search { flex: 0 1 360px; margin-left: auto; }
.global-search label { display: block; }
.global-search input { min-height: 38px; background: #f6fafb; }
.account-menu form { margin: 0; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2cb7c9; font-weight: 700; text-transform: uppercase; }
.text-button { border: 0; background: transparent; color: #0b5fa5; padding: 5px; }
.page-content { max-width: 1440px; margin: 0 auto; padding: 24px; }
.page-heading, .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-heading { margin-bottom: 18px; }
.page-heading p, .panel-heading p { margin-bottom: 0; }
.panel-heading { align-items: center; margin-bottom: 14px; }
.panel { padding: 18px; margin-bottom: 16px; background: #fff; border: 1px solid #d8e4e9; border-radius: 14px; box-shadow: 0 8px 28px rgba(22, 66, 88, .06); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.metric-grid.four-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { display: block; padding: 16px; color: inherit; background: #fff; border: 1px solid #d8e4e9; border-radius: 13px; }
.metric-card:hover { border-color: #85b8d2; box-shadow: 0 8px 22px rgba(22, 66, 88, .08); }
.metric-card span, .metric-card small { display: block; color: #607986; }
.metric-card strong { display: block; margin: 3px 0; color: #183044; font-size: 1.7rem; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 9px; border: 1px solid transparent; font-weight: 600; white-space: nowrap; }
.primary-button { color: #fff; background: #0b5fa5; }
.primary-button:hover { background: #084c87; }
.secondary-button { color: #0b5fa5; background: #fff; border-color: #bcd2dc; }
.text-link { align-self: center; font-weight: 600; }
.button-group { display: flex; gap: 8px; flex-wrap: wrap; }
.alert { max-width: 100%; margin-bottom: 14px; padding: 11px 13px; border-radius: 10px; border: 1px solid; }
.alert-success { color: #176848; background: #e5f7ef; border-color: #a9dfca; }
.alert-warning { color: #825000; background: #fff4de; border-color: #efd29a; }
.alert-error { color: #a12b2b; background: #fff0ef; border-color: #e8b5b1; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .9rem; }
th { padding: 9px 10px; text-align: left; color: #607986; background: #f0f5f7; font-weight: 600; white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid #e5edf0; vertical-align: middle; }
tbody tr:hover { background: #f8fbfc; }
.money { text-align: right; font-variant-numeric: tabular-nums; }
.subtext { display: block; margin-top: 2px; color: #748a95; }
.status-chip { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border-radius: 999px; color: #805000; background: #fff1d6; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.status-active, .status-completed { color: #176848; background: #ddf5eb; }
.status-awaiting_confirmation, .status-warning, .status-completed_with_exceptions { color: #805000; background: #fff1d6; }
.empty-state { padding: 30px 16px; text-align: center; color: #6a818d; background: #f7fafb; border: 1px dashed #ccdce3; border-radius: 11px; }
.empty-state.compact { padding: 18px; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-row.align-end { align-items: end; }
.filter-row.align-end label { flex: 1 1 150px; }
.filter-row .employee-select { flex-basis: 260px; }
.search-field { flex: 1 1 300px; }
label { display: grid; gap: 6px; color: #29495b; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 42px; padding: 8px 10px; color: #183044; background: #fff; border: 1px solid #bfd1d9; border-radius: 9px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(44,183,201,.22); border-color: #2cb7c9; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field-span-2 { grid-column: 1 / -1; }
.form-sections { padding: 0; overflow: hidden; }
.form-section { display: grid; grid-template-columns: 38px 220px minmax(0, 1fr); gap: 16px; padding: 20px; border-bottom: 1px solid #e2ebef; }
.section-index { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #0b5fa5; font-weight: 700; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 20px; background: #f7fafb; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-list { margin: 12px 0 0; }
.detail-list div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid #e6edf0; }
.detail-list dt { color: #687f8b; }
.detail-list dd { margin: 0; font-weight: 600; }
.eyebrow { margin-bottom: 4px; color: #0b5fa5; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 16px; }
.stepper span { padding: 9px; color: #6a818d; background: #e8eff2; border-radius: 10px; font-size: .82rem; }
.stepper b { margin-right: 6px; }
.stepper .step-current { color: #fff; background: #0b5fa5; }
.stepper .step-done { color: #176848; background: #ddf5eb; }
.upload-panel { max-width: 760px; }
.form-stack { display: grid; gap: 14px; }
.file-drop { padding: 18px; background: #f5fafb; border: 1px dashed #9cbecb; border-radius: 12px; }
.file-drop small { color: #6a818d; font-weight: 400; }
.callout { padding: 12px; border-radius: 10px; }
.callout-info { color: #145a72; background: #e7f5f8; border: 1px solid #b8dfe7; }
.confirmation-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 14px; background: #edf7fa; border: 1px solid #c6e3e9; border-radius: 11px; }
.confirmation-box p { margin: 3px 0 0; }
.confirm-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.confirm-check input { width: auto; min-height: auto; }
.status-group { display: flex; gap: 7px; flex-wrap: wrap; }
.compact-list div { grid-template-columns: 180px minmax(0, 1fr); }
.timeline-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.timeline-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; background: #f6fafb; border-radius: 9px; }
.timeline-list b { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; background: #0b5fa5; border-radius: 50%; }
.timeline-list small { color: #6a818d; }
.interval-list { display: grid; gap: 8px; }
.interval-list > div { display: grid; grid-template-columns: minmax(130px, auto) 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e5edf0; }
.status-regular { color: #176848; background: #ddf5eb; }
.status-break { color: #48606c; background: #e8eff2; }
.status-overtime_candidate { color: #805000; background: #fff1d6; }
.status-ready, .status-ready_with_exception, .status-approved { color: #176848; background: #ddf5eb; }
.status-exception, .status-no_schedule, .status-no_punch, .status-open, .status-submitted, .status-pending { color: #9a3c22; background: #ffe9e2; }
.status-not_scheduled, .status-accepted { color: #48606c; background: #e8eff2; }
.status-reviewed { color: #145a72; background: #e7f5f8; }
.status-rejected, .status-cancelled { color: #48606c; background: #e8eff2; }
.status-cancellation_requested { color: #805000; background: #fff1d6; }
.exception-list { display: grid; gap: 10px; }
.exception-list > article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 16px; padding: 13px; border: 1px solid #e1eaee; border-radius: 11px; }
.exception-list strong, .exception-list small { display: block; margin-top: 5px; }
.exception-list p { margin: 6px 0 0; }
.inline-review-form { display: grid; gap: 8px; }
.ot-total-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.ot-total-grid > div { padding: 12px; background: #edf7fa; border-radius: 10px; }
.ot-total-grid span, .ot-total-grid small { display: block; color: #607986; }
.ot-total-grid strong { display: block; margin: 3px 0; }
.action-details { margin-top: 14px; border-top: 1px solid #e1eaee; }
.action-details summary { padding: 13px 0 5px; color: #0b5fa5; font-weight: 700; cursor: pointer; }
.action-form { padding-top: 12px; }
.day-pill { display: inline-grid; place-items: center; min-width: 31px; min-height: 27px; margin: 2px; padding: 2px 6px; color: #145a72; background: #e7f5f8; border-radius: 8px; font-size: .78rem; font-weight: 700; }
.day-fieldset { padding: 13px; border: 1px solid #d7e3e8; border-radius: 10px; }
.day-fieldset legend { padding: 0 7px; color: #29495b; font-weight: 700; }
.day-check-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.employee-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.employee-check-grid .confirm-check { align-items: flex-start; padding: 9px; background: #f6fafb; border-radius: 9px; }
.allocation-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, .7fr); gap: 9px; align-items: center; }
.payroll-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.payroll-actions form { display: grid; align-content: space-between; gap: 10px; padding: 12px; background: #f6fafb; border-radius: 10px; }
.inline-override { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(120px, 1fr); gap: 5px; margin-top: 6px; }
.inline-override .confirm-check, .inline-override button { grid-column: auto; }
.compact-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2ebef; }
.file-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.file-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; background: #f6fafb; border-radius: 9px; }
.file-list small { color: #6a818d; }
.search-results { display: grid; gap: 12px; }
.search-results > article { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 1fr) auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid #e0e9ed; border-radius: 12px; }
.search-results h2, .search-results p { margin-bottom: 2px; }
.readiness-list { display: grid; gap: 7px; margin-top: 12px; }
.readiness-list article { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(120px, auto); gap: 12px; align-items: center; padding: 10px; background: #f7fafb; border-radius: 9px; }
.readiness-list small { display: block; color: #6a818d; }
.readiness-list code { overflow-wrap: anywhere; text-align: right; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #074d82, #0b5fa5 50%, #2cb7c9); }
.auth-shell { width: min(100%, 620px); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; color: #fff; }
.auth-brand div { display: grid; }
.auth-brand small { opacity: .8; }
.auth-card { padding: 24px; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(3, 35, 58, .26); }
.auth-card h1 { text-align: center; }
.auth-card > p { text-align: center; }
.auth-card.wide-card { width: min(900px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.check-item { display: grid; padding: 10px; border-radius: 9px; }
.check-item small { overflow-wrap: anywhere; }
.check-pass { color: #176848; background: #e5f7ef; }
.check-fail { color: #a12b2b; background: #fff0ef; }
.help-text { margin: 16px 0 0; font-size: .84rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar { padding: 12px; }
    .brand { margin: 0 4px 10px; }
    .main-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .main-nav a, .nav-disabled { justify-content: center; min-width: 0; padding: 8px 5px; text-align: center; white-space: nowrap; }
    .nav-disabled small { display: none; }
    .form-section { grid-template-columns: 38px minmax(0, 1fr); }
    .form-section > .field-grid { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .main-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .main-nav a, .nav-disabled { font-size: .82rem; }
    .topbar { padding: 10px 14px; }
    .topbar > div:first-child { display: none; }
    .account-menu { margin-left: auto; }
    .global-search { display: none; }
    .page-content { padding: 16px 12px; }
    .page-heading, .panel-heading, .confirmation-box { align-items: stretch; flex-direction: column; }
    .button-group { display: grid; }
    .metric-grid, .metric-grid.four-metrics, .profile-grid, .field-grid, .check-grid, .ot-total-grid { grid-template-columns: 1fr; }
    .field-span-2 { grid-column: auto; }
    .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-section { grid-template-columns: 34px minmax(0, 1fr); padding: 15px; }
    .account-menu > span:not(.avatar) { display: none; }
    .auth-page { padding: 14px; }
    .auth-card.wide-card { width: calc(100vw - 28px); }
    .exception-list > article { grid-template-columns: 1fr; }
    .interval-list > div { grid-template-columns: 1fr; }
    .day-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employee-check-grid, .payroll-actions, .inline-override, .allocation-grid { grid-template-columns: 1fr; }
    .search-results > article { grid-template-columns: 1fr; }
    .readiness-list article { grid-template-columns: 80px minmax(0, 1fr); }
    .readiness-list code { grid-column: 2; text-align: left; }
}