/* ธีมสีเขียว สไตล์ iOS */
:root {
  --bg: #f2f2f7;             /* systemGroupedBackground */
  --card: #ffffff;
  --fill: #f2f2f7;           /* ช่องกรอก */
  --fill-2: #e9e9ee;
  --text: #1c1c1e;
  --muted: #8a8a8e;          /* secondaryLabel */
  --sep: rgba(60, 60, 67, .14);
  --green: #30b455;          /* พื้นปุ่ม/สวิตช์ */
  --green-strong: #1f8a3f;   /* ตัวอักษร/ลิงก์ (อ่านง่ายบนพื้นขาว) */
  --green-tint: rgba(48, 180, 85, .12);
  --red: #e5383b;
  --orange: #f59f0a;
  --hol: #fdecec;
  --sh1: #e6defa;            /* ด / N */
  --sh2: #fff3c2;            /* ช / D */
  --sh3: #ffe1c7;            /* บ */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Sarabun", "Leelawadee UI", "Segoe UI", system-ui, sans-serif;
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  accent-color: var(--green);
}
a { color: var(--green-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 650; margin: 0 0 .9rem; }
.muted { color: var(--muted); font-size: .9em; font-weight: normal; }
.center { text-align: center; }

/* ---------- แถบด้านบน (โปร่งแสงแบบ iOS) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem; padding: .55rem 1.2rem;
  background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--sep);
}
.brand { font-weight: 700; font-size: 1.05rem; color: var(--text); display: flex; align-items: center; gap: .45rem; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(180deg, #4cd471, #28a84b); color: #fff; font-size: 16px;
}
.brand:hover { text-decoration: none; }
.segmented { display: inline-flex; background: var(--fill-2); border-radius: 9px; padding: 2px; }
.segmented a {
  padding: .3rem .9rem; border-radius: 7px; color: var(--text); font-size: .92em; font-weight: 500;
}
.segmented a:hover { text-decoration: none; }
.segmented a.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.topbar .spacer { flex: 1; }
.dept-switch select { font-weight: 600; background: var(--green-tint); color: var(--green-strong); }
.user-menu { display: flex; align-items: center; gap: .5rem; font-size: .9em; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-strong); font-weight: 700;
}
.linklike { background: none; border: none; color: var(--green-strong); font: inherit; cursor: pointer; padding: 0; }

/* ---------- โครงหน้า ---------- */
.page { max-width: 1200px; margin: 1.4rem auto; padding: 0 1rem; }
.page.wide { max-width: none; }
.card {
  background: var(--card); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; } }
.head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.actions { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.actions form { display: inline; }
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 .4rem .3rem; }

.flash { padding: .7rem 1rem; border-radius: 12px; margin-bottom: .8rem; font-weight: 500; box-shadow: var(--shadow); }
.flash.ok { background: #e7f7ec; color: #17602d; }
.flash.warn { background: #fff5dc; color: #7a5200; }
.flash.error { background: #fdebeb; color: #9b1c1f; }

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .3rem; padding: .5rem 1rem; border: none; border-radius: 10px;
  background: var(--green-tint); color: var(--green-strong); font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(.96); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--green); color: #fff; }
.btn.danger { background: rgba(229,56,59,.1); color: var(--red); }
.btn.plain { background: var(--fill); color: var(--text); }
.btn.small { padding: .28rem .7rem; font-size: .88em; border-radius: 8px; }
.btn.block { width: 100%; justify-content: center; padding: .7rem; }
.icon { border: none; background: none; cursor: pointer; color: var(--muted); padding: 0 .15rem; font-size: .8em; }
.icon:hover { color: var(--green-strong); }

/* ---------- ฟอร์ม ---------- */
.form { display: flex; flex-direction: column; gap: .8rem; }
.form label, .settings label { display: flex; flex-direction: column; gap: .25rem; font-size: .88em; color: var(--muted); font-weight: 500; }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.row .grow { flex: 1; min-width: 180px; }
input, select, textarea {
  font: inherit; color: var(--text); padding: .5rem .7rem; border: 1px solid transparent; border-radius: 10px;
  background: var(--fill); outline: none; transition: border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus { background: #fff; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
input[type=checkbox] { width: 1rem; height: 1rem; padding: 0; }
input[type=file] { padding: .4rem; }
.form .checks label, .inline label { flex-direction: row; align-items: center; color: var(--text); }
fieldset { border: none; background: var(--fill); border-radius: 12px; padding: .6rem .8rem; margin: 0; }
legend { font-size: .85em; color: var(--muted); padding: 0 .2rem; font-weight: 500; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .35rem; max-height: 260px; overflow: auto; }
.checks label { display: flex; gap: .45rem; align-items: center; font-size: .95em; color: var(--text); font-weight: normal; }
.inline { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.w-num { width: 4.5rem; }
.w-year { width: 6rem; }
.w-seed { width: 5.5rem; }

/* ช่องรหัสผ่าน + ปุ่มรูปตา (สร้างโดย password.js) */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; width: 100%; padding-right: 2.6rem; }
.pw-toggle {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; display: grid; place-items: center; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.pw-toggle:hover { color: var(--green-strong); background: var(--green-tint); }
.pw-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-tint); }

/* สวิตช์แบบ iOS: <input type="checkbox" class="switch"> */
input.switch {
  appearance: none; -webkit-appearance: none; width: 42px; height: 25px; border-radius: 25px; flex: none;
  background: #e3e3e8; position: relative; cursor: pointer; transition: background .2s; border: none; margin: 0;
}
input.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s;
}
input.switch:checked { background: var(--green); }
input.switch:checked::after { transform: translateX(17px); }
input.switch:focus { box-shadow: 0 0 0 3px var(--green-tint); }
.switch-label { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .45rem; color: var(--text) !important; font-size: .92em; }

/* ---------- รายการแบบ inset grouped ---------- */
table.list { width: 100%; border-collapse: collapse; }
table.list th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
table.list th, table.list td { padding: .6rem .45rem; border-bottom: .5px solid var(--sep); text-align: left; vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tr.inactive { opacity: .5; }
.badge {
  display: inline-block; padding: .08rem .5rem; border-radius: 99px; font-size: .78em; font-weight: 600;
  background: var(--fill-2); color: var(--muted); margin: .1rem .15rem .1rem 0;
}
.badge.green { background: var(--green-tint); color: var(--green-strong); }
.badge.red { background: rgba(229,56,59,.1); color: var(--red); }
details.edit > summary { cursor: pointer; list-style: none; display: inline-block; }
details.edit > summary::-webkit-details-marker { display: none; }
details.edit[open] { background: var(--fill); border-radius: 12px; padding: .7rem; margin-top: .4rem; }
details.edit[open] > summary { margin-bottom: .6rem; }

/* ---------- หน้า login ---------- */
.auth-wrap { min-height: calc(100vh - 9rem); display: grid; place-items: center; }
.auth-card { width: min(380px, 92vw); text-align: center; padding: 2rem 1.6rem; }
.auth-card .logo-big {
  width: 64px; height: 64px; margin: 0 auto .8rem; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(180deg, #4cd471, #28a84b); color: #fff; font-size: 32px;
  box-shadow: 0 6px 18px rgba(48,180,85,.35);
}
.auth-card .form { text-align: left; margin-top: 1.2rem; }

/* ---------- หน้าแก้ไขตาราง ---------- */
.settings summary { cursor: pointer; font-weight: 600; }
.settings-body { margin-top: .9rem; }
table.staffing { border-collapse: separate; border-spacing: .4rem .3rem; margin-top: .8rem; }
table.staffing th, table.staffing td { text-align: center; font-size: .92em; }
table.staffing input { width: 4.2rem; text-align: center; }

.toolbar {
  position: sticky; top: 52px; z-index: 20; display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--radius); padding: .55rem .8rem; margin-bottom: .7rem; box-shadow: var(--shadow);
}
.tools, .buttons, .group { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.group { padding: .2rem .45rem; background: var(--fill); border-radius: 12px; }
.group label, .tools label { display: flex; gap: .3rem; align-items: center; font-size: .88em; }
.tools .label { font-size: .88em; color: var(--muted); }
.tool {
  min-width: 2.4rem; padding: .35rem .55rem; border: none; border-radius: 9px; background: var(--fill);
  font: inherit; font-weight: 600; cursor: pointer; transition: transform .05s;
}
.tool:active { transform: scale(.95); }
.tool.on { box-shadow: 0 0 0 2.5px var(--green); }
.dirty { color: var(--orange); font-size: .88em; font-weight: 600; }

.table-wrap {
  overflow: auto; max-height: calc(100vh - 220px); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow);
}
table.grid { border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.grid th, table.grid td { border-right: .5px solid var(--sep); border-bottom: .5px solid var(--sep); text-align: center; padding: 0; }
table.grid thead th { position: sticky; background: #f7f7fa; z-index: 5; padding: 2px 3px; font-weight: 600; }
table.grid thead tr:nth-child(1) th { top: 0; height: 38px; }
table.grid thead tr:nth-child(2) th { top: 38px; height: 24px; }
table.grid thead tr:nth-child(3) th { top: 62px; height: 22px; }
table.grid thead tr:nth-child(4) th { top: 84px; height: 22px; }
table.grid th.day small { display: block; font-weight: normal; color: var(--muted); font-size: 11px; }
table.grid th.hol, table.grid td.hol { background: var(--hol); }
table.grid th.count.short { color: #fff; background: var(--red); font-weight: bold; }
table.grid .dayend { border-right: 1.5px solid #c9c9d0; }
table.grid .sticky { position: sticky; background: #fff; z-index: 6; }
table.grid thead .sticky { z-index: 10; background: #f7f7fa; }
table.grid .s0 { left: 0; width: 34px; min-width: 34px; }
table.grid .s1 { left: 34px; border-right: 1.5px solid #c9c9d0; }
.name-col { min-width: 160px; max-width: 200px; text-align: left !important; padding: 3px 8px !important; }
.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.member-tools { display: flex; gap: .15rem; align-items: center; font-size: 11px; white-space: nowrap; }
.member-tools .muted { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.member-tools .morning { display: flex; align-items: center; gap: 2px; color: #b7791f; }
.member-tools .morning input { width: .8rem; height: .8rem; margin: 0; }
table.grid td.sum, table.grid th.sum { min-width: 30px; padding: 0 3px; background: #fafafc; }
table.grid td.c { width: 27px; min-width: 27px; height: 36px; cursor: default; user-select: none; }
table.grid.painting td.c { cursor: crosshair; }
table.grid.painting td.c:hover { box-shadow: inset 0 0 0 2px var(--green); }
table.grid tr.off td { color: #a8a8ad; }
table.grid tr.off td.c { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,.035) 4px 8px); }

/* สีตามรหัส ใช้ทั้งในตาราง ปุ่ม และคำอธิบาย */
[data-v="ด"], [data-v="N"] { background: var(--sh1) !important; }
[data-v="ช"], [data-v="D"] { background: var(--sh2) !important; }
[data-v="บ"] { background: var(--sh3) !important; }
[data-v="x"], [data-v="X"] { background: #e5e5ea !important; color: #555; }
[data-v="v"], [data-v="V"] { background: #d8f2df !important; }
[data-v="อ"] { background: #d6e8fb !important; }
[data-v="o"], [data-v="O"] { color: #a8a8ad; }
[data-v="📍"] { background: #fbd9d9 !important; }
/* หน้าที่ในเวร (กลุ่มการพยาบาล) */
[data-r] { position: relative; }
[data-r="R"]::after {             /* 🚑 refer: ป้าย R มุมขวาบน */
  content: "R"; position: absolute; top: 1px; right: 1px; font-size: 8px; font-weight: 800; line-height: 1;
  padding: 1px 2px; border-radius: 3px; background: #0a84ff; color: #fff;
}
[data-r="S"], [data-r="O"] {       /* ⭕ วงกลมแดง */
  background-image: radial-gradient(circle at center, transparent 9px, #e5383b 9.5px, #e5383b 11px, transparent 11.5px) !important;
  font-weight: 700;
}
[data-r="O"] { color: #b3b3b8 !important; text-decoration: line-through; text-decoration-color: #e5383b; }
[data-r="O"]::after {
  content: "หยุด"; position: absolute; bottom: 0; left: 0; right: 0; font-size: 7.5px; color: #e5383b;
  text-decoration: none; line-height: 1.1;
}
/* คิวในเวร (กลุ่มยานพาหนะ): ตัวเลขคิวมุมขวาล่าง, คิว 3 = on-call สีส้ม */
[data-r="Q1"]::after, [data-r="Q2"]::after, [data-r="Q3"]::after {
  position: absolute; right: 1px; bottom: 1px; font-size: 9px; font-weight: 800; line-height: 1;
  padding: 1px 3px; border-radius: 4px; color: #fff; background: var(--green-strong);
}
[data-r="Q1"]::after { content: "1"; }
[data-r="Q2"]::after { content: "2"; background: #5e8f6c; }
[data-r="Q3"]::after { content: "3"; background: var(--orange); }
[data-r="Q3"] { box-shadow: inset 0 0 0 2px var(--orange); }
table.grid th.q-sum { font-size: 11px; }
table.grid th.q-sum.oncall { color: #b86e00; }
.legend span[data-r] { min-width: 1.9rem; height: 1.6rem; line-height: 1.6rem; }

/* เวรที่ผู้จัดเวรจองไว้ */
[data-b="1"] { box-shadow: inset 0 0 0 2px var(--green-strong); font-weight: 800; }
.book-tools .tool { min-width: 2.1rem; }
.legend { font-size: .9em; color: var(--muted); }
.legend span[data-v], .legend .hol-demo { display: inline-block; min-width: 1.5rem; text-align: center; border-radius: 6px; padding: 0 .25rem; color: var(--text); }
.legend .hol-demo { background: var(--hol); }
.add-member { margin-top: 1rem; }

/* ---------- รายงาน ---------- */
table.report { border-collapse: collapse; width: 100%; font-size: 13px; }
table.report th, table.report td { border: .5px solid #d1d1d6; padding: 3px 4px; text-align: center; white-space: nowrap; }
table.report th { background: #f7f7fa; }
table.report .hol { background: var(--hol); }
table.report .name-col, table.report .left { text-align: left; }
.sign { margin-top: 2.5rem; text-align: right; }
.rp { display: inline-block; min-width: 1.1em; }
.rp-R::after { content: "R"; font-size: .65em; font-weight: 800; color: #0a84ff; vertical-align: super; }
.rp-S, .rp-O { border: 1.5px solid #e5383b; border-radius: 50%; padding: 0 .2em; font-weight: 700; }
.rp-O { color: #b3b3b8; text-decoration: line-through; text-decoration-color: #e5383b; }
.rp-Q1::after { content: "1"; }
.rp-Q2::after { content: "2"; }
.rp-Q3::after { content: "3"; }
.rp-Q3 { color: #b86e00; font-weight: 700; }
.rp-R, .rp-S, .rp-O, .rp-Q3 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* =====================================================================
   มิติ 3D — แสงจากด้านบน: ขอบบนสว่าง ขอบล่างเข้ม เงาซ้อนหลายชั้น
   (ตารางเวรคงแบนไว้ เพื่อให้คลิก/ลากลงเวรได้แม่นยำ)
   ===================================================================== */
:root {
  --green-edge: #1d7f3c;     /* ขอบล่างของปุ่มเขียว (ความหนาของปุ่ม) */
  --lift: 0 1px 0 rgba(255,255,255,.95) inset,
          0 1px 2px rgba(16,40,24,.06),
          0 8px 16px -4px rgba(16,40,24,.08),
          0 22px 40px -16px rgba(16,40,24,.20);
  --lift-hover: 0 1px 0 rgba(255,255,255,.95) inset,
          0 2px 4px rgba(16,40,24,.06),
          0 14px 24px -6px rgba(16,40,24,.12),
          0 32px 56px -20px rgba(16,40,24,.28);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(76, 212, 113, .20), transparent 60%),
    radial-gradient(900px 480px at 108% 6%, rgba(48, 180, 85, .13), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(48, 180, 85, .08), transparent 60%),
    linear-gradient(180deg, #f3f7f4 0%, #e9eeeb 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* การ์ดลอย */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #fafdfb 100%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--lift);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.grid-2 .card:hover { transform: translateY(-3px); box-shadow: var(--lift-hover); }

/* หน้า login / แจ้งเตือน: การ์ดเอียงเล็กน้อยแบบมีมุมมอง */
.auth-wrap { perspective: 1400px; }
.auth-card { transform: rotateX(5deg) translateY(0); transform-origin: 50% 100%; }
.auth-card:hover { transform: rotateX(0) translateY(-4px); box-shadow: var(--lift-hover); }

/* แถบบนแบบกระจก + เงาลอย */
.topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -18px rgba(16, 40, 24, .35);
}
.toolbar, .table-wrap { box-shadow: var(--lift); border: 1px solid rgba(255,255,255,.8); }

/* โลโก้นูน */
.brand .logo, .auth-card .logo-big, .credit-logo {
  background: linear-gradient(160deg, #6fe08f 0%, #34c05c 45%, #22964a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12),
              0 3px 0 var(--green-edge), 0 8px 16px -6px rgba(31, 138, 63, .6);
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.auth-card .logo-big {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.12),
              0 5px 0 var(--green-edge), 0 18px 28px -10px rgba(31, 138, 63, .7);
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-6px); } }

/* ปุ่มนูน: มีความหนาด้านล่าง กดแล้วยุบลง */
.btn, .tool {
  background: linear-gradient(180deg, #f4fbf6 0%, #e1f3e6 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c4e3cd, 0 5px 10px -5px rgba(31, 138, 63, .35);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn.primary {
  background: linear-gradient(180deg, #56d87b 0%, #31b557 55%, #27994b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.10),
              0 3px 0 var(--green-edge), 0 8px 16px -6px rgba(31, 138, 63, .6);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.btn.danger {
  background: linear-gradient(180deg, #fff6f6 0%, #fde2e2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #f0c2c3, 0 5px 10px -5px rgba(229, 56, 59, .35);
}
.btn.plain, .tool {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f3 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #d3d8dd, 0 5px 10px -6px rgba(0, 0, 0, .25);
}
.btn:hover, .tool:hover { filter: brightness(1.03); }
.btn:active, .tool:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12), 0 0 0 transparent;
}
.btn.primary:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.22), 0 1px 0 var(--green-edge); }
/* ปุ่มเครื่องมือที่เลือกอยู่ = ถูกกดค้างไว้ */
.tool.on {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.18), 0 0 0 2.5px var(--green);
}

/* segmented control: ร่องลึก + ชิปนูน */
.segmented { box-shadow: inset 0 1px 3px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.9); }
.segmented a.on {
  background: linear-gradient(180deg, #ffffff, #f4f6f8);
  box-shadow: 0 1px 0 #fff inset, 0 2px 0 #d3d8dd, 0 4px 8px -3px rgba(0,0,0,.18);
}

/* ช่องกรอกแบบเว้าลงไป */
input:not([type=checkbox]):not([type=file]), select, textarea {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08), 0 1px 0 rgba(255,255,255,.9);
}
input:focus, select:focus, textarea:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,.05), 0 0 0 3px var(--green-tint); }
fieldset { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06); }

/* สวิตช์: รางเว้า + ปุ่มกลมนูน */
input.switch { box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
input.switch:checked { background: linear-gradient(180deg, #2fa653, #3fc566); }
input.switch::after { background: linear-gradient(180deg, #fff, #eef0f2); box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.1); }

/* แถบแจ้งเตือน / ป้าย */
.flash { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -8px rgba(0,0,0,.25); }
.badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 1px rgba(0,0,0,.08); }
.avatar { box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c4e3cd, 0 4px 8px -4px rgba(31,138,63,.4); }

/* ---------- เครดิตผู้พัฒนา ---------- */
.credit { display: flex; justify-content: center; padding: 1.2rem 1rem 2rem; }
.credit-card {
  display: flex; align-items: center; gap: .75rem; padding: .7rem 1.2rem .7rem .8rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.8); box-shadow: var(--lift); font-size: .88em; line-height: 1.35;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.credit-card:hover { transform: translateY(-2px); box-shadow: var(--lift-hover); }
.credit-logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; flex: none; }

/* =====================================================================
   โทนเข้ม + เงาลึก (ลบส่วนนี้ทั้งก้อน = กลับเป็นโทนอ่อนเดิม)
   ===================================================================== */
:root {
  --green: #1e9a47;
  --green-strong: #136b31;
  --green-edge: #0c4f22;
  --green-tint: rgba(30, 154, 71, .16);
  --text: #111a14;
  --muted: #5f6f65;
  --sep: rgba(20, 60, 35, .18);
  --lift: 0 1px 0 rgba(255,255,255,.9) inset,
          0 2px 3px rgba(8, 40, 20, .10),
          0 12px 24px -6px rgba(8, 40, 20, .22),
          0 30px 56px -18px rgba(8, 40, 20, .45);
  --lift-hover: 0 1px 0 rgba(255,255,255,.9) inset,
          0 4px 6px rgba(8, 40, 20, .12),
          0 18px 32px -8px rgba(8, 40, 20, .28),
          0 44px 72px -22px rgba(8, 40, 20, .55);
}
body {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(30, 154, 71, .34), transparent 60%),
    radial-gradient(900px 480px at 108% 6%, rgba(19, 107, 49, .26), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(19, 107, 49, .20), transparent 60%),
    linear-gradient(180deg, #dfe9e2 0%, #cfdcd3 100%);
  background-attachment: fixed;
}

/* แถบบนเขียวเข้ม ตัวอักษรขาว */
.topbar {
  background: linear-gradient(180deg, rgba(22, 120, 55, .96), rgba(13, 84, 37, .96));
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 30px -10px rgba(5, 35, 15, .6);
  color: #fff;
}
.topbar .brand, .topbar .user-menu, .topbar .user-menu a { color: #fff !important; }
.topbar .muted { color: rgba(255, 255, 255, .72); }
.topbar .segmented { background: rgba(0, 0, 0, .25); box-shadow: inset 0 1px 3px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.15); }
.topbar .segmented a { color: rgba(255, 255, 255, .88); }
.topbar .segmented a.on { color: var(--green-strong); }
.topbar .dept-switch select {
  background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255,255,255,.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.topbar .dept-switch select option { color: var(--text); }
.topbar .avatar { background: rgba(255,255,255,.2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.25); }
.topbar .brand .logo { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #073a18, 0 8px 16px -4px rgba(0,0,0,.5); }

/* การ์ด / แถบเครื่องมือ / ตาราง ลอยเด่นขึ้น */
.card, .toolbar, .table-wrap, .credit-card { border-color: rgba(255, 255, 255, .6); }
.toolbar { top: 56px; }
h1 { color: #0e3d1d; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.head .muted { color: #3f5747; }

/* ปุ่มหนาและเข้มขึ้น */
.btn, .tool { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #a9d3b5, 0 8px 14px -6px rgba(8, 60, 25, .45); }
.btn { color: var(--green-strong); }
.btn.primary {
  background: linear-gradient(180deg, #34b95e 0%, #1e9a47 50%, #157d38 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.15),
              0 4px 0 var(--green-edge), 0 12px 22px -8px rgba(8, 70, 30, .75);
}
.btn.primary:active { box-shadow: inset 0 3px 6px rgba(0,0,0,.3), 0 1px 0 var(--green-edge); transform: translateY(3px); }
.btn.danger { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e6a9aa, 0 8px 14px -6px rgba(160, 30, 30, .4); }
.btn.plain, .tool { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b9c3bd, 0 8px 14px -6px rgba(0, 0, 0, .35); }
.btn:active, .tool:active { transform: translateY(3px); }

/* หัวตารางเวรเข้มขึ้นเล็กน้อย */
table.grid thead th, table.grid thead .sticky { background: #e7efe9; }
table.grid td.sum, table.grid th.sum { background: #f1f6f2; }
table.report th { background: #e7efe9; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .auth-card, .auth-card:hover, .grid-2 .card:hover, .credit-card:hover { transform: none; }
}

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background: #fff !important; font-size: 11px; }
  .no-print, .topbar { display: none !important; }
  .page { margin: 0; padding: 0; }
  .card { box-shadow: none; padding: 0; border-radius: 0; border: none; background: #fff; transform: none; }
  .print-page { page-break-after: always; }
  .table-wrap { overflow: visible; max-height: none; box-shadow: none; }
  table.report { font-size: 10px; }
  table.report th, table.report td { padding: 1px 2px; border-color: #999; }
  th.hol, td.hol { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}