/* ================================================================
   ระบบส่งเวรออนไลน์ — กลุ่มงานเภสัชกรรม โรงพยาบาลลำปาง
   styles.css
================================================================ */

/* ── CSS Variables ── */
:root {
  /* 🌿 ธีมเขียวมะกอก (สีคณะเภสัช) + โทนครีมอบอุ่น */
  --primary:       #6b8e4e;   /* เขียวมะกอก */
  --primary-dk:    #55743b;
  --primary-lt:    #dfe8cb;
  --primary-xlt:   #f3f6ea;
  --secondary:     #b0895f;   /* warm taupe */
  --success:       #4f8a46;
  --success-lt:    #dcecca;
  --warn:          #c68a3e;
  --warn-lt:       #f7e9cf;
  --danger:        #c0574a;   /* terracotta soft red */
  --danger-lt:     #f6ded8;

  --text:          #2f2b25;   /* warm near-black */
  --text-b:        #4d4840;
  --text-m:        #837b6f;
  --text-h:        #aaa294;

  --bg:            #f5f2ea;   /* warm cream */
  --surface:       #ffffff;
  --border:        #e5ddcf;   /* warm border */

  --r-xs:  4px;
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;
  --r-xl:  24px;

  --shadow-sm: 0 1px 3px rgba(74,64,40,.08), 0 1px 2px rgba(74,64,40,.05);
  --shadow:    0 4px 6px -1px rgba(74,64,40,.09), 0 2px 4px -1px rgba(74,64,40,.05);
  --shadow-lg: 0 10px 15px -3px rgba(74,64,40,.11), 0 4px 6px -2px rgba(74,64,40,.05);

  --header-h: 60px;
  --font:     'Prompt', sans-serif;
  --ease:     all .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font-family: var(--font); }

/* ── Container ── */
.container { width: 100%; max-width: 740px; margin: 0 auto; padding: 0 1rem; }

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.app-header {
  background: linear-gradient(140deg, #43602c 0%, #6b8e4e 55%, #83a15c 100%);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 16px rgba(67,96,44,.30);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
}
.header-brand {
  display: flex; align-items: center; gap: .75rem;
}
.header-logo {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.header-title { font-size: .95rem; font-weight: 600; color: #fff; line-height: 1.2; }
.header-sub   { font-size: .72rem; color: rgba(255,255,255,.65); }
.header-right { display: flex; align-items: center; gap: .75rem; }
.live-time    { text-align: right; }
.clock        { font-size: 1.05rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.date-lbl     { font-size: .68rem; color: rgba(255,255,255,.62); margin-top: 2px; }
.nav-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.16); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 1rem; transition: var(--ease);
}
.nav-btn:hover { background: rgba(255,255,255,.28); }

/* ════════════════════════════════════════
   MAIN LAYOUT
════════════════════════════════════════ */
.main { padding: 1.25rem 1rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Summary Card ── */
.summary-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: fadeIn .4s ease;
}
.summary-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.summary-lbl { font-size: .875rem; font-weight: 600; color: var(--primary); }
#summaryBody { padding: .875rem 1.25rem; min-height: 56px; }

/* Summary render helpers */
.s-row     { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .625rem; }
.s-badge   { padding: .2rem .6rem; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.s-dept    { padding: .2rem .6rem; border-radius: 99px; font-size: .75rem; font-weight: 600;
             background: var(--primary); color: #fff; }
.s-badge.morning   { background: #f7e6c6; color: #9a6a1e; }
.s-badge.afternoon { background: var(--primary-lt); color: var(--primary-dk); }
.s-badge.night     { background: #e0dcc4; color: #6a6142; }
.s-date, .s-rep    { font-size: .82rem; color: var(--text-m); }
.s-rep             { font-weight: 500; color: var(--text-b); }
.s-issue-title     { font-size: .78rem; font-weight: 600; color: var(--warn); margin-bottom: .25rem; }
.s-issue-item      { display: flex; align-items: flex-start; gap: .375rem; font-size: .8rem; padding: .15rem 0; }
.s-issue-tag       { background: var(--primary-xlt); color: var(--primary); border-radius: var(--r-xs); padding: .05rem .35rem; font-size: .72rem; white-space: nowrap; flex-shrink: 0; }
.s-issue-det       { color: var(--text-m); font-size: .76rem; }
.s-ok   { font-size: .82rem; color: var(--success); margin-bottom: .375rem; }
.s-narc-ok   { font-size: .78rem; color: var(--success); margin-top: .25rem; }
.s-narc-ng   { font-size: .78rem; color: var(--danger); font-weight: 500; margin-top: .25rem; }
.s-notes     { font-size: .77rem; color: var(--text-m); margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border); }

/* ════════════════════════════════════════
   FORM SECTIONS
════════════════════════════════════════ */
.shift-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-section {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  animation: slideUp .35s ease both;
}
.form-section:nth-child(1) { animation-delay: .05s; }
.form-section:nth-child(2) { animation-delay: .10s; }
.form-section:nth-child(3) { animation-delay: .15s; }
.form-section:nth-child(4) { animation-delay: .20s; }
.form-section:nth-child(5) { animation-delay: .25s; }

.sec-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .975rem; font-weight: 600; color: var(--text);
  margin-bottom: 1.1rem; padding-bottom: .75rem;
  border-bottom: 2px solid var(--border);
}
.sec-title > span:first-child { font-size: 1.2rem; }
.sec-badge {
  margin-left: auto; font-size: .68rem; font-weight: 400;
  background: var(--primary-xlt); color: var(--primary);
  padding: .15rem .5rem; border-radius: 99px;
}

/* ── Fields ── */
.field-row   { display: flex; gap: .875rem; margin-bottom: .875rem; }
.field-group { display: flex; flex-direction: column; gap: .3rem; flex: 1; margin-bottom: .875rem; }
.field-group:last-child { margin-bottom: 0; }
.field-lbl   { font-size: .845rem; font-weight: 500; color: var(--text-b); }
.req         { color: var(--danger); }
.field-input {
  width: 100%; padding: .625rem .875rem;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: .9rem; color: var(--text);
  background: #fbfaf4; transition: var(--ease); outline: none;
}
.field-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(107,142,78,.16);
  background: #fff;
}
.field-input::placeholder { color: var(--text-h); }
.field-ta   { resize: vertical; min-height: 76px; line-height: 1.6; }
.field-sm   { font-size: .84rem; padding: .5rem .75rem; }
.field-hint { font-size: .74rem; color: var(--text-m); margin-top: .25rem; line-height: 1.55; }

/* ── Shift Type Cards ── */
.shift-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.shift-card  { display: block; cursor: pointer; }
.shift-card input { display: none; }
.shift-card-body {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .875rem .5rem;
  background: #fff; border: 2px solid var(--border); border-radius: var(--r);
  transition: var(--ease); text-align: center;
}
.shift-emoji         { font-size: 1.6rem; }
.shift-card-body strong { font-size: .9rem; color: var(--text); }
.shift-card-body small  { font-size: .68rem; color: var(--text-m); }
.shift-card:hover .shift-card-body         { border-color: var(--primary-lt); background: var(--primary-xlt); }
.shift-card.active  .shift-card-body       { border-color: var(--primary); background: var(--primary-xlt); }
.shift-card.active  .shift-card-body strong { color: var(--primary); }

/* ════════════════════════════════════════
   ISSUE CARDS
════════════════════════════════════════ */
.issues-list { display: flex; flex-direction: column; gap: .5rem; }
.issue-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.issue-card.active {
  border-color: var(--ic, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic) 12%, transparent);
}

.issue-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; cursor: pointer; user-select: none;
  border-radius: var(--r);
  transition: background .18s;
}
.issue-toggle:hover { background: rgba(0,0,0,.025); }
.issue-toggle-left  { display: flex; align-items: center; gap: .75rem; }

/* Custom checkbox visual */
.chk-box {
  width: 22px; height: 22px;
  border: 2px solid var(--text-h); border-radius: var(--r-xs);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; transition: var(--ease);
}
.chk-box.on {
  background: var(--ic, var(--primary));
  border-color: var(--ic, var(--primary));
}
.chk-box.on::after {
  content: ''; width: 6px; height: 11px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.issue-emoji-ic  { font-size: 1.2rem; }
.issue-lbl       { font-size: .875rem; font-weight: 500; color: var(--text); transition: color .2s; }
.issue-card.active .issue-lbl { color: var(--ic, var(--primary)); font-weight: 600; }
.issue-chevron   { font-size: 1.3rem; color: var(--text-h); transition: transform .25s; line-height: 1; }

/* Expandable */
.expandable {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.expandable.open { max-height: 640px; opacity: 1; }
.issue-inner {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: .875rem;
}
/* tint background of expanded detail */
.issue-card.active .issue-inner { background: var(--icl, var(--primary-xlt)); }

/* ── Image upload ── */
.img-area { margin-top: .625rem; }
.img-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .45rem .875rem;
  background: #fff; border: 1.5px dashed var(--border); border-radius: var(--r-sm);
  font-size: .8rem; font-family: var(--font); color: var(--text-m); cursor: pointer;
  transition: var(--ease);
}
.img-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-xlt); }
.img-btn.busy  { opacity: .55; cursor: wait; }
.img-hint      { color: var(--text-h); font-size: .74rem; }
.img-preview   {
  display: flex; align-items: center; gap: .75rem; margin-top: .5rem;
  padding: .5rem .625rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
}
.img-thumb     { width: 54px; height: 54px; object-fit: cover; border-radius: var(--r-xs); flex-shrink: 0; }
.img-meta      { flex: 1; font-size: .75rem; color: var(--text-m); line-height: 1.5; }
.img-remove {
  width: 26px; height: 26px; border: none; border-radius: 50%;
  background: var(--danger-lt); color: var(--danger); cursor: pointer; font-size: .75rem;
  display: flex; align-items: center; justify-content: center; transition: var(--ease);
  flex-shrink: 0;
}
.img-remove:hover { background: var(--danger); color: #fff; }

/* ════════════════════════════════════════
   NARCOTICS
════════════════════════════════════════ */
.narc-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.narc-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1rem;
  background: #fff; border: 2px solid var(--border); border-radius: var(--r);
  font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: var(--ease); user-select: none;
}
.narc-btn input { display: none; }
.narc-btn:hover                         { background: var(--bg); }
#narcOkLbl.selected, #narcOkLbl:has(input:checked)
                                        { border-color: var(--success); background: var(--success-lt); color: var(--success); }
#narcNgLbl.selected, #narcNgLbl:has(input:checked)
                                        { border-color: var(--danger);  background: var(--danger-lt);  color: var(--danger); }

/* ════════════════════════════════════════
   HEEMS INPUT + ADDON
════════════════════════════════════════ */
.input-addon-wrap {
  display: flex; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; transition: var(--ease);
}
.input-addon-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107,142,78,.16); }
.input-addon-wrap .field-input  { border: none; border-radius: 0; box-shadow: none !important; }
.btn-addon {
  display: flex; align-items: center; white-space: nowrap;
  padding: 0 .875rem; background: var(--primary); color: #fff;
  font-size: .8rem; font-weight: 600; text-decoration: none; transition: var(--ease);
}
.btn-addon:hover { background: var(--primary-dk); }

/* ════════════════════════════════════════
   BUTTONS (shared)
════════════════════════════════════════ */
.btn-ghost {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3rem .75rem; background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-family: var(--font); font-size: .78rem;
  font-weight: 500; color: var(--text-b); cursor: pointer; text-decoration: none;
  transition: var(--ease);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-xlt); }
.btn-sm { font-size: .74rem; padding: .25rem .625rem; }

/* ── Submit ── */
.submit-zone { padding-bottom: 1.5rem; }
.form-error {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .75rem 1rem; margin-bottom: .875rem;
  background: var(--danger-lt); border: 1px solid #fca5a5; border-radius: var(--r-sm);
  color: var(--danger); font-size: .84rem; white-space: pre-line;
}
.form-error.hidden { display: none !important; }

.btn-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .95rem 1.5rem;
  background: linear-gradient(135deg, #6b8e4e, #83a15c);
  color: #fff; border: none; border-radius: var(--r);
  font-family: var(--font); font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: var(--ease);
  box-shadow: 0 4px 14px rgba(107,142,78,.30);
}
.btn-submit:hover   { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107,142,78,.42); }
.btn-submit:active  { transform: translateY(0); }
.btn-submit:disabled{ opacity: .68; cursor: not-allowed; transform: none; }
.btn-submit.busy    { animation: pulse 1.4s infinite; }

/* ════════════════════════════════════════
   MODALS
════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,.58);
  display: flex;
  opacity: 0; transition: opacity .25s ease;
  backdrop-filter: blur(2px);
}
.modal-overlay.visible { opacity: 1; }
.modal-overlay.hidden  { display: none !important; }

/* Bottom-sheet (history) */
.modal--bottom { align-items: flex-end; justify-content: center; }
.modal--bottom .modal-box {
  width: 100%; max-width: 740px; max-height: 86vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: translateY(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden; background: #fff;
}
.modal--bottom.visible .modal-box { transform: translateY(0); }

/* Centered (success) */
.modal--center { align-items: center; justify-content: center; }
.modal--center .modal-box {
  background: #fff; border-radius: var(--r-xl);
  max-width: 360px; width: 90%;
  transform: scale(.9) translateY(12px);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1);
  padding: 2rem 1.75rem; text-align: center;
}
.modal--center.visible .modal-box { transform: scale(1) translateY(0); }

.modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-hdr h3 { font-size: .95rem; font-weight: 600; }
.modal-close {
  width: 30px; height: 30px; border: none; background: var(--bg); border-radius: 50%;
  cursor: pointer; font-size: .85rem; display: flex; align-items: center;
  justify-content: center; color: var(--text-m); transition: var(--ease);
}
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-body { overflow-y: auto; padding: 1.25rem 1.5rem; flex: 1; }

/* Success Modal content */
.success-mark  { font-size: 3.5rem; margin-bottom: .5rem; }
.success-title { font-size: 1.2rem; margin-bottom: .375rem; }
.success-sub   { font-size: .875rem; color: var(--text-m); margin-bottom: 1.25rem; }

/* ════════════════════════════════════════
   HISTORY ITEMS
════════════════════════════════════════ */
.hist-item {
  padding: .875rem; border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: .625rem; background: #fff;
}
.hist-hdr    { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.hist-date   { font-size: .8rem; color: var(--text-m); }
.hist-rep    { font-size: .8rem; font-weight: 500; color: var(--text-b); }
.hist-time   { margin-left: auto; font-size: .74rem; color: var(--text-h); font-variant-numeric: tabular-nums; }
.hist-issues { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .4rem; }
.hist-issue  { padding: .3rem .6rem; background: var(--bg); border-radius: var(--r-xs); }
.hist-iss-hdr{ font-size: .78rem; font-weight: 500; color: var(--text-b); }
.hist-iss-det{ font-size: .74rem; color: var(--text-m); }
.hist-img-lk { font-size: .74rem; color: var(--primary); text-decoration: none; }
.hist-img-lk:hover { text-decoration: underline; }
.hist-no-iss { font-size: .8rem; color: var(--success); margin-bottom: .3rem; }
.hist-footer { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.narc-ok     { font-size: .75rem; color: var(--success); }
.narc-ng     { font-size: .75rem; color: var(--danger); font-weight: 500; }
.heems-lk    { font-size: .73rem; color: var(--primary); text-decoration: none; }
.heems-lk:hover { text-decoration: underline; }
.hist-notes  { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--border); font-size: .76rem; color: var(--text-m); }

/* ════════════════════════════════════════
   STATES
════════════════════════════════════════ */
.state-loading { text-align: center; padding: 1rem; color: var(--text-m); font-size: .84rem; }
.state-empty   { text-align: center; padding: .875rem; color: var(--text-m); font-size: .84rem; }
.state-empty-hint { font-size: .74rem; margin-top: .25rem; color: var(--text-h); }
.hidden        { display: none !important; }
.sr-only       { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════ */
@keyframes fadeIn  { from { opacity: 0; }                to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: .7; } }

/* ════════════════════════════════════════
   DASHBOARD — additional styles
════════════════════════════════════════ */
.dash-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: .25rem;
}
.dash-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.dash-sub   { font-size: .8rem; color: var(--text-m); margin-top: .125rem; }
.dash-filters { display: flex; align-items: center; gap: .625rem; }
.filter-select {
  padding: .4rem .75rem; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: .82rem; background: #fff; color: var(--text-b);
  outline: none; cursor: pointer; transition: var(--ease);
}
.filter-select:focus { border-color: var(--primary); }

.stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
@media (min-width: 560px) { .stats-grid { grid-template-columns: repeat(4,1fr); } }

.stat-card {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 1rem; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  display: flex; flex-direction: column; gap: .25rem;
  animation: slideUp .35s ease both;
}
.stat-card.sw  { border-top-color: var(--warn); }
.stat-card.sd  { border-top-color: var(--danger); }
.stat-card.ss  { border-top-color: var(--success); }
.stat-icon     { font-size: 1.5rem; }
.stat-value    { font-size: 1.75rem; font-weight: 700; color: var(--text); }
.stat-label    { font-size: .75rem; color: var(--text-m); }

.dash-card {
  background: var(--surface); border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.dash-card-title { font-size: .925rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); }
.chart-wrap  { height: 220px; position: relative; }
.table-wrap  { overflow-x: auto; }

.shifts-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.shifts-table th {
  background: var(--bg); text-align: left; padding: .625rem .75rem;
  font-weight: 600; color: var(--text-m); border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.shifts-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.shifts-table tr:last-child td { border-bottom: none; }
.shifts-table tr:hover td { background: var(--bg); }

.chip      { display: inline-block; padding: .125rem .375rem; border-radius: var(--r-xs); font-size: .72rem; margin: .1rem .1rem .1rem 0; }
.chip-issue{ background: var(--primary-xlt); color: var(--primary); }
.chip-none { background: var(--success-lt); color: var(--success); }
.text-ok   { color: var(--success); }
.text-ng   { color: var(--danger); font-weight: 500; }
.table-link { color: var(--primary); text-decoration: none; }
.table-link:hover { text-decoration: underline; }
.td-dept { white-space: nowrap; font-weight: 500; color: var(--primary-dk); }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 520px) {
  /* Header — กันหัวข้อ/นาฬิกาล้นบรรทัด */
  .header-sub         { display: none; }
  .header-brand       { gap: .5rem; min-width: 0; }
  .header-logo        { width: 38px; height: 38px; }
  .header-title       { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-right       { gap: .5rem; }
  .clock              { font-size: .95rem; }
  .date-lbl           { font-size: .62rem; white-space: nowrap; }
  .nav-btn            { width: 32px; height: 32px; font-size: .95rem; }

  /* Spacing — แน่นขึ้นให้พอดีจอ */
  .main               { padding: 1rem .75rem 2.5rem; gap: 1rem; }
  .form-section       { padding: 1rem; }
  .sec-title          { font-size: .925rem; margin-bottom: .9rem; }

  /* Summary card — กันข้อความล้น */
  .summary-top        { padding: .7rem .9rem; gap: .5rem; }
  .summary-lbl        { font-size: .8rem; }
  #summaryBody        { padding: .8rem .9rem; }
  .btn-ghost.btn-sm   { font-size: .68rem; padding: .3rem .55rem; white-space: nowrap; }

  .field-row          { flex-direction: column; gap: 0; }
  .shift-card-body    { padding: .75rem .3rem; }
  .shift-card-body strong { font-size: .82rem; }
  .shift-card-body small  { display: none; }
  .sec-badge          { display: none; }
}
@media (min-width: 601px) {
  .modal--bottom { align-items: flex-end; }
}