/* Remede Payroll — layout and components on top of the Remède design system tokens. */
/* สีข้อความเตือนสีเข้ม: design system มีแค่พื้นหลังเตือน จึงกำหนดไว้ที่เดียวที่นี่ */
:root{--warning-text:#7a5a24;--warning-text-2:#8a6420}
html,body{height:100%}
td.neg{color:var(--danger-600)}
body{background:var(--bg-app)}
#app{min-height:100%}
.demo-banner{background:var(--warning-100);color:var(--warning-text);text-align:center;font-size:var(--fs-body-sm);padding:8px var(--space-4);border-bottom:1px solid var(--gold-200)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
.ic{flex:none;display:block}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:5;height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:0 var(--space-6);background:var(--surface-card);border-bottom:1px solid var(--border-default)}
.brand{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none}
.brand-wrap{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.demo-pill{padding:5px 10px;border-radius:var(--radius-pill);background:var(--warning-100);color:var(--warning-text);font-size:12px;font-weight:var(--fw-medium);white-space:nowrap}
.brand-main{font:var(--fw-semibold) 20px/1 var(--font-sans);color:var(--navy-700)}
.brand-sub{font:italic 500 22px/1 var(--font-serif);color:var(--gold-600)}
.brand.big .brand-main{font-size:40px}
.brand.big .brand-sub{font-size:46px}
.topbar-right{display:flex;align-items:center;gap:var(--space-4)}
.cycle-chip{font:13px/1 var(--font-mono);color:var(--text-muted);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:9px 12px}
.seg{display:inline-flex;background:var(--ivory-200);border-radius:var(--radius-pill);padding:4px}
.seg button{font:var(--fw-medium) 13px/1 var(--font-sans);padding:9px 16px;border-radius:var(--radius-pill);color:var(--text-muted)}
.seg button.on{background:var(--surface-card);color:var(--navy-900);box-shadow:var(--shadow-xs)}
.who{display:flex;align-items:center;gap:var(--space-3)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gold-100);color:var(--gold-700);font-weight:var(--fw-semibold)}
.who-text{display:flex;flex-direction:column;line-height:1.25}
.who-text strong{color:var(--text-strong);font-weight:var(--fw-medium);font-size:14px}
.who-text small{color:var(--text-muted);font-size:var(--fs-caption)}
.icon-btn{color:var(--text-muted);padding:6px;border-radius:var(--radius-sm);transition:background var(--transition-fast)}
.icon-btn:hover{background:var(--surface-sunken);color:var(--navy-700)}

/* ---------- layout + sidebar ---------- */
.layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:calc(100% - 64px)}
.side{background:var(--surface-card);border-right:1px solid var(--border-default);padding:var(--space-6) var(--space-3);display:flex;flex-direction:column;gap:2px;
  position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto}
.side-section{font:var(--fw-medium) var(--fs-overline)/1 var(--font-sans);letter-spacing:var(--ls-overline);color:var(--gold-700);
  padding:var(--space-5) var(--space-3) var(--space-2)}
.side-section:first-child{padding-top:var(--space-2)}
.side-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:11px var(--space-3);border-radius:var(--radius-md);
  color:var(--text-body);font-size:14.5px;text-align:left;text-decoration:none;transition:background var(--transition-fast)}
.side-item .ic{color:var(--text-muted)}
.side-item:hover{background:var(--surface-sunken);color:var(--text-body)}
.side-item.is-active{background:var(--gold-100);color:var(--navy-900);font-weight:var(--fw-semibold)}
.side-item.is-active .ic{color:var(--gold-700)}
.side-trail{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--text-muted)}
.badge-count{min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--gold-600);color:#fff;font:var(--fw-medium) 11px/20px var(--font-sans);text-align:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold-500)}
.side-children{margin:2px 0 6px 22px;border-left:1px solid var(--border-default);display:flex;flex-direction:column}
.side-child{padding:9px var(--space-4);color:var(--text-body);font-size:14px;text-decoration:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.side-child:hover{background:var(--surface-sunken);color:var(--text-body)}
.side-child.is-active{color:var(--navy-900);font-weight:var(--fw-medium);background:var(--gold-100)}

/* ---------- page ---------- */
.main{padding:var(--space-8) var(--page-pad) var(--space-16);min-width:0}
.page{max-width:1056px;margin:0 auto;display:flex;flex-direction:column}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.crumb{display:flex;align-items:center;gap:var(--space-3)}
.overline{font:var(--fw-medium) var(--fs-overline)/1 var(--font-sans);letter-spacing:var(--ls-overline);color:var(--text-muted);text-transform:uppercase}
.steps{display:flex;gap:4px}
.steps i{display:block;width:22px;height:3px;border-radius:2px;background:var(--ivory-200)}
.steps i.on{background:var(--gold-600)}
.page-title{font:var(--fw-semibold) var(--fs-h1)/var(--lh-tight) var(--font-sans);color:var(--text-strong);margin:0 0 var(--space-2);letter-spacing:var(--ls-tight)}
.page-sub{color:var(--text-muted);font-size:var(--fs-body-sm);margin:0 0 var(--space-8)}

.btn-outline{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-field);
  background:var(--surface-card);color:var(--navy-900);font-weight:var(--fw-medium);font-size:14px;text-decoration:none;transition:all var(--transition-fast)}
.btn-outline:hover{border-color:var(--navy-300);color:var(--navy-900);box-shadow:var(--shadow-sm)}
.btn-primary{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2);height:var(--field-height);padding:0 var(--space-6);border-radius:var(--radius-field);
  background:var(--color-primary);color:var(--text-on-primary);font-weight:var(--fw-medium);transition:background var(--transition-fast)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{opacity:.6;cursor:progress}
.btn-ghost{display:inline-flex;align-items:center;gap:var(--space-2);padding:9px var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-field);
  background:var(--surface-card);color:var(--navy-900);font-weight:var(--fw-medium);font-size:14px}
.btn-ghost:hover{background:var(--surface-sunken)}

/* ---------- panel ---------- */
.panel{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden}
.panel-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3) var(--space-6);padding:var(--space-6);background:var(--ivory-50);border-bottom:1px solid var(--border-subtle)}
.range-left{display:flex;flex-direction:column;gap:var(--space-3);align-self:end}
.range-label{display:flex;align-items:center;gap:var(--space-2);color:var(--text-strong);font-size:14px}
.range-label .ic{color:var(--text-muted)}
.pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pill{padding:8px var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--surface-card);font-size:14px;color:var(--text-body);transition:all var(--transition-fast)}
.pill:hover{border-color:var(--gold-400)}
.pill.on{background:var(--gold-100);border-color:var(--gold-600);color:var(--navy-900);font-weight:var(--fw-medium)}
.range-dates{display:flex;gap:var(--space-4)}
.range-dates label{display:flex;flex-direction:column;gap:var(--space-2);font-weight:var(--fw-medium);color:var(--text-strong);font-size:14px}
.range-dates input{height:var(--field-height);padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-field);background:var(--surface-card);
  color:var(--navy-900);font:15px var(--font-sans);min-width:170px}
.range-dates input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.range-note{grid-column:1 / -1;margin:0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.range-note strong{color:var(--navy-900);font-weight:var(--fw-medium)}

.panel-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-5) var(--space-6)}
.panel-bar h2{font:var(--fw-semibold) 15px/1.3 var(--font-sans);color:var(--text-strong);margin:0}
.panel-bar p{margin:2px 0 0;font-size:var(--fs-caption);color:var(--text-muted)}
.bar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.chip{padding:8px var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:13.5px;color:var(--text-body);background:var(--surface-card)}
.chip:hover{border-color:var(--navy-300)}
.chip.on{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.notice{display:flex;align-items:center;gap:var(--space-2);margin:0 var(--space-6) var(--space-3);padding:10px var(--space-4);border-radius:var(--radius-field);
  background:var(--warning-100);color:var(--warning-text);font-size:var(--fs-body-sm)}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.data th{background:var(--ivory-50);color:var(--text-muted);font:var(--fw-regular) 12.5px/1.2 var(--font-sans);text-align:left;padding:14px var(--space-6) 14px var(--space-4);
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);white-space:nowrap}
table.data th:first-child,table.data td:first-child{padding-left:var(--space-6)}
table.data td{padding:14px var(--space-6) 14px var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-strong);font-size:14.5px;white-space:nowrap}
table.data .num{text-align:right}
table.data td.num{color:var(--navy-900)}
table.data tbody tr{cursor:pointer;transition:background var(--transition-fast)}
table.data tbody tr:hover{background:var(--ivory-50)}
td.emp strong{display:block;font-weight:var(--fw-medium);color:var(--text-strong)}
td.emp small{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--text-muted)}
.flag{color:var(--danger-600);font-weight:var(--fw-medium)}
.muted-warn{color:var(--warning-600)}
table.data tfoot td{font-weight:var(--fw-semibold);background:var(--ivory-50);border-bottom:0}
.state-cell{text-align:center;color:var(--text-muted);padding:var(--space-10) !important;cursor:default}
.state-cell.err{color:var(--danger-600)}
.state-cell .ic{display:inline-block;vertical-align:-3px}

/* ---------- ค้นหา / ป้ายสถานะ (ใช้หลายหน้า) ---------- */
.search{display:flex;align-items:center;gap:var(--space-2);flex:1 1 280px;max-width:420px;height:40px;padding:0 var(--space-3);
  border:1px solid var(--border-default);border-radius:var(--radius-field);background:var(--surface-card);color:var(--text-muted)}
.search:focus-within{border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.search input{flex:1;border:0;outline:0;background:transparent;font-size:14px;color:var(--text-strong);min-width:0}
.list-meta{margin:0;padding:0 var(--space-6) var(--space-3);font-size:var(--fs-caption);color:var(--text-muted)}
.tag{display:inline-block;padding:4px 10px;border-radius:var(--radius-pill);background:var(--navy-100);color:var(--navy-700);font-size:12.5px}
.status{display:inline-block;padding:4px 10px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:var(--fw-medium)}
.status.ok{background:var(--success-100);color:var(--success-600)}
.status.warn{background:var(--warning-100);color:var(--warning-text)}
.status.bad{background:var(--danger-100);color:var(--danger-600)}
.muted{color:var(--text-muted)}
small.upcoming{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--gold-700)}
table.data td small.muted{font-size:var(--fs-caption)}
.link-btn{display:inline-flex;align-items:center;gap:6px;color:var(--navy-700);font-size:14px;font-weight:var(--fw-medium);padding:6px 2px}
.link-btn:hover{color:var(--gold-700)}
.btn-sm{padding:7px 14px;border-radius:var(--radius-field);border:1px solid var(--border-default);background:var(--surface-card);font-size:13.5px;color:var(--navy-900)}
.btn-sm:hover{background:var(--surface-sunken)}
.btn-sm.ok{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-sm.ok:hover{background:var(--navy-800)}
.btn-sm[disabled],.btn-outline[disabled],.btn-ghost[disabled],.icon-btn[disabled]{opacity:.55;cursor:progress}
td.actions{display:flex;align-items:center;gap:var(--space-2)}
input.mini{width:84px;height:34px;padding:0 10px;text-align:right;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:14px;background:var(--surface-card)}
input.mini:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.toast.err{background:var(--danger-600)}

/* ---------- เลือกเดือน (หน้าอนุมัติ) ---------- */
.month-bar{grid-template-columns:auto 1fr;align-items:center}
.month-bar .range-note{grid-column:auto;text-align:right}
.month-nav{display:flex;align-items:center;gap:var(--space-2)}
.month-nav strong{min-width:110px;text-align:center;color:var(--text-strong);font-size:var(--fs-title);font-weight:var(--fw-semibold)}

/* ---------- แผงแก้ไขด้านขวา (drawer) ---------- */
.scrim{position:fixed;inset:0;background:var(--overlay-scrim);z-index:30;animation:fade var(--transition)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100%;background:var(--surface-card);box-shadow:var(--shadow-lg);z-index:31;
  animation:slide var(--transition-slow)}
.drawer form{height:100%;display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6);border-bottom:1px solid var(--border-subtle)}
.drawer-head h2{margin:0;font:var(--fw-semibold) var(--fs-h3)/1.25 var(--font-sans);color:var(--text-strong)}
.drawer-head small{color:var(--text-muted);font-size:var(--fs-caption)}
.drawer-body{flex:1;overflow-y:auto;padding:var(--space-2) var(--space-6) var(--space-6)}
.drawer-foot{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-subtle);background:var(--ivory-50)}
.dsec{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) 0;border-bottom:1px solid var(--border-subtle)}
.dsec:last-child{border-bottom:0}
.dsec h3{margin:0;font:var(--fw-medium) var(--fs-overline)/1 var(--font-sans);letter-spacing:var(--ls-overline);color:var(--gold-700);text-transform:uppercase}
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-strong);font-weight:var(--fw-medium);min-width:0}
.fld input,.fld select{height:var(--field-height);padding:0 var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-field);
  background:var(--surface-card);font:15px var(--font-sans);color:var(--navy-900);width:100%}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.fld small{font-weight:var(--fw-regular);color:var(--text-muted);font-size:var(--fs-caption)}
.fld.has-err input,.fld.has-err select{border-color:var(--danger-600)}
.fld-err{font-style:normal;font-weight:var(--fw-regular);color:var(--danger-600);font-size:var(--fs-caption)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.grid2 .fld:last-child:nth-child(odd){grid-column:1 / -1}
.history ul{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column}
.history li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--border-default);font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums}
.oi-row{display:grid;grid-template-columns:1fr 140px auto;gap:var(--space-3);align-items:end}
.oi-row .icon-btn{margin-bottom:8px}
.inline-add{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-2);align-items:end}
.inline-add .btn-ghost{height:var(--field-height)}
.inline-add .link-btn{height:var(--field-height)}
/* ---------- นำเข้าไฟล์ POS ---------- */
.gap-top{margin-top:var(--space-6)}
.upload-area{padding:var(--space-5) var(--space-6)}
.dropzone{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6);border:1.5px dashed var(--gold-400);border-radius:var(--radius-card);
  background:var(--ivory-50);color:var(--gold-700);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}
.dropzone:hover,.dropzone.over{background:var(--gold-100);border-color:var(--gold-600)}
.dropzone:focus-within{box-shadow:var(--ring-focus)}
.dropzone span{display:flex;flex-direction:column;gap:2px}
.dropzone strong{color:var(--navy-900);font-weight:var(--fw-medium)}
.dropzone small{color:var(--text-muted);font-size:var(--fs-caption)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0}
.panel-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-subtle);background:var(--ivory-50)}
.panel-foot .muted{margin-right:auto;font-size:var(--fs-body-sm)}
table.data td small.muted{display:block}
table.staged td{white-space:normal;vertical-align:top}
.mini-select{height:34px;padding:0 8px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);font-size:13.5px;max-width:220px}
.ok-text{display:block;color:var(--success-600);font-size:var(--fs-caption)}
.warn-text{color:var(--warning-text-2);font-size:var(--fs-caption)}
small.warn-text{display:block}
.block{display:block}
.btn-sm.danger{background:var(--danger-600);border-color:var(--danger-600);color:#fff}
.chips-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.person-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:var(--radius-pill);background:var(--navy-100);color:var(--navy-900);font-size:13.5px}
.person-chip button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--navy-700)}
.person-chip button:hover{background:var(--navy-200)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(24px);opacity:0}}

/* ---------- misc pages ---------- */
.coming{padding:var(--space-12) var(--space-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.coming h2{margin:var(--space-4) 0 0;font:var(--fw-semibold) var(--fs-title)/1.3 var(--font-sans);color:var(--text-strong)}
.coming p{margin:0;color:var(--text-muted)}
.coming-mark{width:120px;height:80px;border-radius:var(--radius-card);background:linear-gradient(135deg,var(--navy-700),var(--gold-500));opacity:.85}
.center-screen{min-height:calc(100% - 64px);display:grid;place-items:center;padding:var(--space-8)}
.panel.narrow{max-width:420px;padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.panel.narrow h2{margin:0;color:var(--text-strong);font-size:var(--fs-title)}
.panel.narrow p{margin:0 0 var(--space-3);color:var(--text-muted)}

.toast{position:fixed;left:50%;bottom:var(--space-8);transform:translateX(-50%);background:var(--surface-inverse);color:#fff;padding:12px var(--space-5);
  border-radius:var(--radius-field);box-shadow:var(--shadow-lg);font-size:14px;z-index:20}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-hero{background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 45%,var(--gold-600) 100%);display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-16);gap:var(--space-4)}
.login-hero .brand-main{color:#fff}
.login-hero .brand-sub{color:var(--gold-200)}
.tagline{margin:0;font:italic 400 22px/1.4 var(--font-serif);color:rgba(255,255,255,.8)}
.login-side{position:relative;display:grid;place-items:center;padding:var(--space-12) var(--space-6)}
.login-lang{position:absolute;top:var(--space-6);right:var(--space-6)}
.login-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--space-4)}
.login-card h1{margin:0;font:var(--fw-semibold) var(--fs-h2)/1.2 var(--font-sans);color:var(--text-strong)}
.login-card .page-sub{margin:0 0 var(--space-2)}
.login-card label{display:flex;flex-direction:column;gap:var(--space-2);font-size:14px;font-weight:var(--fw-medium);color:var(--text-strong)}
.login-card input{height:var(--field-height);padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-field);background:var(--surface-card);font-size:15px}
.login-card input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.forgot-link{align-self:center}
.login-card .link-btn{justify-content:center}
.form-error{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--danger-600);font-size:var(--fs-body-sm)}

/* ---------- responsive ----------
   Desktop layout (sidebar + content) holds down to tablet width; the table scrolls sideways
   inside its panel instead of the layout collapsing. Phone layout only below 720px. */
.side{scrollbar-width:thin;scrollbar-color:var(--ivory-300) transparent}
.side-item span,.side-section,.side-child{white-space:nowrap}

/* Fit-to-width: between 720px and the 1440px design width the desktop layout is kept
   exactly and scaled down (app.js sets --fit), the same way Claude Design previews it. */
:root{--fit:1;scrollbar-gutter:stable}
body.fit #app{width:var(--layout-w,1440px);zoom:var(--fit)}
/* จอแคบ (หลังย่อถึง 85% แล้ว): จัดแผงช่วงเวลาเป็นแถวเดียว ลดระยะขอบ */
body.compact .main{padding:var(--space-6) var(--space-6) var(--space-12)}
body.compact .panel-top{grid-template-columns:1fr}
body.compact .range-dates input{min-width:150px}
body.compact table.data th,body.compact table.data td{padding-left:var(--space-3);padding-right:var(--space-3)}
body.compact table.data th:first-child,body.compact table.data td:first-child{padding-left:var(--space-5)}
body.fit .layout{min-height:calc(100vh / var(--fit) - 64px)}
body.fit .side{height:calc(100vh / var(--fit) - 64px)}
body.fit .login{min-height:calc(100vh / var(--fit))}

/* ข้อความยาว (โดยเฉพาะภาษาอังกฤษ) ห้ามล้นออกนอกคอลัมน์/เมนู */
table.data th{white-space:normal;vertical-align:bottom}
table.data th,table.data td{padding-right:var(--space-5)}
.side-item span:not(.side-trail){overflow:hidden;text-overflow:ellipsis;min-width:0}
.pill,.chip,.overline{white-space:nowrap}

@media (max-width:719px){
  .who-text,.cycle-chip{display:none}
  .topbar{padding:0 var(--space-4)}
  .topbar-right{gap:var(--space-2)}
  .page-head{flex-wrap:wrap}
  .panel-top{grid-template-columns:1fr}
  .range-dates input{min-width:0;width:100%}
  .range-dates label{flex:1 1 140px}
  .side{flex-wrap:nowrap;overflow-x:auto}
  .side-item{flex:none}
  .search{max-width:none}
  .grid2,.oi-row{grid-template-columns:1fr}
  .oi-row .icon-btn{justify-self:end}
  .drawer{width:100%}
  .layout{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border-default);padding:var(--space-2)}
  .side-section,.side-children{display:none}
  .side-item{width:auto}
  .main{padding:var(--space-6) var(--space-4) var(--space-12)}
  .range-dates{flex-wrap:wrap}
  .login{grid-template-columns:1fr}
  .login-hero{padding:var(--space-10) var(--space-6)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* แถบติดตั้งแอปบนมือถือ อยู่นอก #app เพื่อไม่ให้หายตอนหน้าถูกวาดใหม่ */
.install-bar{position:fixed;left:var(--space-3);right:var(--space-3);bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-4);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.install-bar[hidden]{display:none}
.install-bar p{margin:0;font-size:14px;color:var(--text-body)}
.install-actions{display:flex;gap:var(--space-2)}
.install-actions button{flex:1}

/* อัปโหลดแยก 4 ช่อง: แถวบนแพทย์ แถวล่างพนักงาน */
.upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:720px){.upload-grid{grid-template-columns:minmax(0,1fr)}}
.upload-slot{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.upload-slot h3{margin:0;font-size:15px;font-weight:var(--fw-semibold);color:var(--navy-900)}
.upload-slot .mini-select{width:100%;max-width:none}

/* ตัวเลขสรุปบนสุดของหน้าเงินเดือนและ OT */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--border-subtle)}
.stat{display:flex;flex-direction:column;gap:4px;padding:var(--space-4) var(--space-6);border-right:1px solid var(--border-subtle);min-width:0}
.stat:last-child{border-right:0}
.stat span{font-size:var(--fs-caption);color:var(--text-muted)}
.stat strong{font-size:20px;font-weight:var(--fw-semibold);color:var(--navy-900);font-variant-numeric:tabular-nums}
.sub-row td{background:var(--ivory-50);padding:var(--space-4) var(--space-6)}
.sub-row .history strong{font-weight:var(--fw-medium)}
.day-table{background:var(--surface-card)}
a.status{text-decoration:none}
@media (max-width:720px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(2n){border-right:0}}

/* ช่องกรอกของหน้าทีมบริการลูกค้า */
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);padding:var(--space-5) var(--space-6)}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}
.field-mini{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-caption);color:var(--text-muted);min-width:0}
.field-mini input{height:var(--field-height);padding:0 var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-field);background:var(--surface-card);font-size:14px;color:var(--text-strong);font-variant-numeric:tabular-nums;width:100%}
.field-mini.has-error input,input.mini.is-bad{border-color:var(--danger-600)}
.check-line{display:inline-flex;align-items:center;gap:var(--space-2);font-size:14px;color:var(--text-body)}
@media (max-width:720px){.form-grid,.form-grid.two{grid-template-columns:minmax(0,1fr)}}
.form-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
input.mini.wide{width:130px;max-width:100%}
.target-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-6);padding:0 var(--space-6) var(--space-4);font-size:14px;color:var(--text-body)}
.target-line.muted{color:var(--text-muted);font-size:var(--fs-caption)}
.target-line strong{font-weight:var(--fw-semibold);color:var(--navy-900)}
@media (max-width:720px){.form-grid.five{grid-template-columns:minmax(0,1fr)}}

/* หน้าคำนวณและปิดรอบ */
.step-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.step{padding:6px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-default);font-size:13.5px;color:var(--text-muted)}
.step.on{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.step.done{background:var(--success-100);border-color:var(--success-100);color:var(--success-600)}
.close-note{margin:0;padding:0 var(--space-6) var(--space-4);font-size:var(--fs-caption);color:var(--text-muted)}
.check-list{list-style:none;margin:0;padding:0 var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.check-list li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);font-size:14px;color:var(--text-body)}
.check-list .status{min-width:72px;text-align:center}

/* สลิปของฉัน: อ่านบนมือถือเป็นหลัก */
.slip-page{max-width:680px;margin-inline:auto}
.slip-card{margin-top:var(--space-4);padding:var(--space-6)}
.slip-card h3{margin:var(--space-5) 0 var(--space-2);font-size:14px;color:var(--text-muted);font-weight:500}
.slip-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.slip-head .status{flex:none;white-space:nowrap}
.slip-head h2{margin:var(--space-1) 0}
.slip-head p{margin:0;font-size:14px;color:var(--text-muted)}
.slip-lines{list-style:none;margin:0;padding:0}
.slip-lines li{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border-default);font-size:14.5px}
.slip-lines li>span:last-child{white-space:nowrap}
.slip-lines small{display:block;font-size:12.5px}
.slip-sum{font-weight:600;border-bottom:0!important}
.slip-net{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--space-4);padding-top:var(--space-4);border-top:2px solid var(--navy-700);color:var(--navy-700)}
.slip-net strong{font-size:24px}
.slip-card .close-note{padding:var(--space-3) 0 0}
@media print{.topbar,header,nav.side,.side,.no-print,.install-bar,#toast{display:none!important}.layout{display:block;min-height:0}body.fit #app{width:auto;zoom:1}.main{padding:0!important}.slip-page{max-width:none}.slip-card{border:0;box-shadow:none;overflow:visible}}

/* หน้าประวัติและแก้ไข: เดือนที่เลือกอยู่ */
table.data tr.is-picked td{background:var(--ivory-50)}
.field-mini.has-error select{border-color:var(--danger-600)}
.set-readonly{padding:var(--space-4) var(--space-6)}

/* หน้าแรก Remède Backoffice */
.home-page{max-width:960px}
.launch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin:var(--space-6) 0 var(--space-4)}
.launch-tile{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card,12px);text-decoration:none;color:var(--text-strong);transition:border-color .15s,box-shadow .15s}
.launch-tile:hover,.launch-tile:focus-visible{border-color:var(--navy-700);box-shadow:0 2px 10px rgba(60,79,128,.12)}
.launch-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--ivory-50);color:var(--navy-700)}
.launch-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.launch-text strong{font-size:16px}
.launch-text small{font-size:13px;color:var(--text-muted)}
.launch-go{color:var(--gold-600)}
@media (max-width:720px){.launch-grid{grid-template-columns:minmax(0,1fr)}}