/* ===================== พื้นฐาน ===================== */
:root{
  --brand:#149d8f;
  --brand-dark:#0e7c72;
  --brand-soft:#d7f2ee;
  --brand-tint:#effbf9;
  --ink:#12263a;
  --ink-soft:#6b7c8f;
  --line:#e6edf3;
  --bg:#eef6f7;
  --white:#fff;
  --danger:#e11d48;
  --r-lg:22px;
  --r:16px;
  --r-sm:12px;
  --shadow-sm:0 1px 2px rgba(18,38,58,.05);
  --shadow:0 4px 10px rgba(18,38,58,.05),0 16px 36px rgba(18,38,58,.07);
  --shadow-lg:0 28px 60px rgba(18,38,58,.16);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.65;font-size:14.5px;
  font-family:"Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .35em;letter-spacing:-.015em}
img{max-width:100%;display:block}
::selection{background:var(--brand-soft)}

/* ===================== ปุ่ม ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem 1.2rem;border-radius:11px;border:1px solid var(--line);
  background:var(--white);color:var(--ink);font:inherit;font-weight:600;font-size:.9rem;
  cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s;
}
.btn:hover{border-color:#cfdae4;background:#fbfeff;transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:var(--white);border-color:transparent;
  box-shadow:0 8px 20px rgba(20,157,143,.3)}
.btn-primary:hover{color:var(--white);box-shadow:0 12px 26px rgba(20,157,143,.38)}
.btn-sm{padding:.4rem .9rem;font-size:.84rem;border-radius:10px}
.btn-lg{padding:.72rem 1.6rem;font-size:.96rem;border-radius:13px}
.btn-danger{color:var(--danger);border-color:#fecdd3;background:var(--white)}
.btn-danger:hover{background:#fff1f3;border-color:#fda4af;color:#be123c}

/* ===================== โครงหลัก + แถบเมนูซ้าย ===================== */
.app{display:flex;align-items:flex-start;gap:1.4rem;padding:1.1rem clamp(.9rem,2.2vw,1.6rem)}

.sidebar{
  position:sticky;top:1.1rem;width:238px;flex:0 0 238px;z-index:40;
  background:var(--white);border-radius:24px;box-shadow:var(--shadow);
  padding:1.3rem 1rem 1.1rem;display:flex;flex-direction:column;
  height:calc(100vh - 2.2rem);
}
.sb-brand{display:flex;align-items:center;gap:.7rem;padding:0 .35rem 1.2rem;
  border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.sb-brand img{width:44px;height:44px;border-radius:50%;box-shadow:0 5px 12px rgba(20,157,143,.22)}
.sb-brand span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sb-brand b{font-size:1.06rem;font-weight:800;letter-spacing:-.01em}
.sb-brand small{font-size:.71rem;color:var(--ink-soft);letter-spacing:.04em}

.sb-label{font-size:.68rem;font-weight:800;color:#a8b8c6;letter-spacing:.1em;
  text-transform:uppercase;padding:0 .6rem .5rem}
.sb-nav{display:flex;flex-direction:column;gap:.3rem}
.sb-nav a{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .7rem;border-radius:14px;
  font-size:.94rem;font-weight:600;color:#5b7086;transition:background .16s,color .16s,box-shadow .16s;
}
.sb-nav a i{
  width:34px;height:34px;min-width:34px;display:grid;place-items:center;border-radius:11px;
  background:var(--bg);font-style:normal;font-size:1rem;transition:.16s;
}
.sb-nav a:hover{background:var(--brand-tint);color:var(--ink)}
.sb-nav a.on{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  box-shadow:0 10px 22px rgba(20,157,143,.3);
}
.sb-nav a.on i{background:rgba(255,255,255,.24)}

.sb-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.sb-user{display:flex;align-items:center;gap:.65rem;padding:.55rem .5rem .75rem}
.avatar{
  width:40px;height:40px;min-width:40px;display:grid;place-items:center;border-radius:13px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font-weight:800;font-size:1rem;
}
.sb-user-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sb-user-txt b{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-txt small{font-size:.74rem;color:var(--ink-soft)}
.sb-out{
  display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem;border-radius:13px;
  background:var(--bg);color:#5b7086;font-size:.88rem;font-weight:700;transition:.16s;
}
.sb-out i{font-style:normal}
.sb-out:hover{background:#fff1f3;color:var(--danger)}
.sb-veil{display:none}

/* แถบบนเฉพาะจอเล็ก */
.mtop{display:none}
.menu-btn{display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:.45rem;cursor:pointer}
.menu-btn span{width:20px;height:2px;background:var(--ink);border-radius:2px}

.main{flex:1;min-width:0;padding:.3rem 0 2.5rem}

/* ===================== หัวหน้า / แจ้งเตือน ===================== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.page-head h1{font-size:1.5rem;font-weight:800;margin:0}
.page-head p{margin:.1rem 0 0;color:var(--ink-soft);font-size:.88rem}
.alert{padding:.8rem 1.1rem;border-radius:12px;font-size:.9rem;font-weight:500;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.55rem}
.alert::before{font-weight:800}
.alert-ok{background:#e9fbf5;color:#0b6b53;border:1px solid #a9e9d4}
.alert-ok::before{content:"✓"}
.alert-err{background:#fff1f3;color:#9f1239;border:1px solid #fecdd3}
.alert-err::before{content:"!"}
.req{color:var(--danger)}
.hint{display:block;font-weight:500;color:#9bacbd;font-size:.76rem;margin-top:.15rem;line-height:1.5}

/* ===================== หน้าหลัก: 2 คอลัมน์ ===================== */
.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:1.3rem;align-items:start}

/* --- คอลัมน์รายชื่อ --- */
.listcol{
  background:var(--white);border-radius:var(--r-lg);padding:1.1rem;box-shadow:var(--shadow);
  position:sticky;top:82px;display:flex;flex-direction:column;max-height:calc(100vh - 110px);
}
.listsearch{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.9rem}
.search{position:relative;display:flex;align-items:center}
.search::before{content:"🔍";position:absolute;left:.9rem;font-size:.85rem;opacity:.5}
.listsearch input[type=search]{
  width:100%;padding:.62rem .9rem .62rem 2.4rem;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:.9rem;background:var(--bg);
}
.listsearch input[type=search]:focus{outline:none;border-color:var(--brand);background:var(--white)}
.listsearch select{
  width:100%;padding:.55rem .9rem;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:.88rem;background:var(--bg);cursor:pointer;
}
.listhead{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;
  color:var(--ink-soft);padding:0 .25rem .55rem}
.listhead b{color:var(--ink)}
.listhead a{color:var(--brand);font-weight:600}
.listbox{overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding-right:.2rem;margin-right:-.2rem}
.listbox::-webkit-scrollbar{width:6px}
.listbox::-webkit-scrollbar-thumb{background:#d6e2ea;border-radius:9px}

.mini{
  display:flex;align-items:center;gap:.75rem;padding:.65rem .7rem;border-radius:15px;
  border:1px solid transparent;background:var(--white);transition:.16s;position:relative;
}
.mini:hover{background:var(--brand-tint)}
.mini.on{background:var(--brand-tint);border-color:var(--brand);box-shadow:0 8px 18px rgba(20,157,143,.14)}
.mini.out{opacity:.62}
.mini-photo{
  width:46px;height:46px;min-width:46px;border-radius:50%;overflow:hidden;background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand-dark);font-weight:800;font-size:1.05rem;
}
.mini-photo img{width:100%;height:100%;object-fit:cover}
.mini-photo .ph-logo{padding:4px;object-fit:contain;background:var(--white)}
.mini-body{min-width:0;display:flex;flex-direction:column;line-height:1.35;flex:1}
.mini-body b{font-size:.92rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-body small{font-size:.76rem;color:var(--ink-soft)}
.mini-body em{font-size:.74rem;color:var(--brand-dark);font-style:normal}
.mini-chip{font-size:.68rem;font-weight:700;padding:.12rem .55rem;border-radius:999px;white-space:nowrap}
.chip-in{background:var(--brand-soft);color:var(--brand-dark)}
.chip-out{background:#e9eef3;color:#7b8a99}
.listempty{text-align:center;padding:2.5rem 1rem;color:var(--ink-soft)}
.listempty div{font-size:1.8rem;margin-bottom:.3rem}
.listempty p{margin:0;font-size:.88rem}

/* --- คอลัมน์รายละเอียด --- */
.backlist{display:none}
.dcard{background:var(--white);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--shadow)}
.dhero{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.dphoto{
  width:96px;height:96px;min-width:96px;border-radius:26px;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-soft),#e2f4ff);display:grid;place-items:center;
  font-size:2.1rem;font-weight:800;color:var(--brand-dark);box-shadow:var(--shadow-sm);
}
.dphoto img{width:100%;height:100%;object-fit:cover}
.dphoto .ph-logo{padding:10px;object-fit:contain;background:var(--white)}
.dhero-body{flex:1;min-width:180px}
.pcode{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:.74rem;font-weight:700;
  color:var(--brand-dark);background:var(--brand-soft);padding:.1rem .55rem;border-radius:7px}
.dhero-body h2{font-size:1.45rem;font-weight:800;margin:.3rem 0 .1rem}
.dmeta{margin:0 0 .5rem;color:var(--ink-soft);font-size:.88rem}
.chip{display:inline-block;font-size:.74rem;font-weight:700;padding:.16rem .75rem;border-radius:999px}
.dhero-act{display:flex;gap:.5rem;align-items:center;margin-left:auto}
.dhero-act form{margin:0}

.warnbar{
  display:flex;gap:.8rem;align-items:flex-start;margin-top:1.2rem;padding:.9rem 1.1rem;
  background:#fff5f6;border:1px solid #fecdd3;border-radius:14px;
}
.warnbar span{font-size:1.1rem}
.warnbar b{display:block;font-size:.78rem;color:#9f1239;letter-spacing:.02em}
.warnbar p{margin:0;font-weight:700;color:#be123c;font-size:.95rem}

.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem;margin-top:1.3rem}
.dgroup{background:var(--brand-tint);border:1px solid #ddeff0;border-radius:var(--r);padding:1.1rem 1.2rem}
.dgroup h4{font-size:.82rem;font-weight:800;color:var(--brand-dark);letter-spacing:.03em;
  text-transform:uppercase;margin:0 0 .8rem}
.dfield{margin-bottom:.75rem}
.dfield:last-child{margin-bottom:0}
.dfield dt{font-size:.74rem;color:var(--ink-soft);font-weight:600}
.dfield dd{margin:.1rem 0 0;font-size:.92rem;font-weight:600;word-break:break-word}
.nodata{margin:0;font-size:.86rem;color:var(--ink-soft)}

.dgroup-wide{grid-column:1/-1}
.relwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:.5rem}
.relcard{display:flex;align-items:center;gap:.65rem;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:.6rem .8rem}
.relcard-ico{width:32px;height:32px;min-width:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--brand-soft);font-size:.9rem}
.relcard span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.relcard b{font-size:.88rem;font-weight:700}
.relcard small{font-size:.74rem;color:var(--ink-soft)}
.relcard-tel{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--brand-dark);white-space:nowrap}

.ministat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1.1rem}
.ms{background:var(--white);border-radius:var(--r);padding:.85rem 1.1rem;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:.85rem}
.ms i{width:42px;height:42px;min-width:42px;display:grid;place-items:center;border-radius:13px;
  font-size:1.15rem;font-style:normal}
.ms-1 i{background:var(--brand-soft)}
.ms-2 i{background:#dcecff}
.ms-3 i{background:#fdf0d5}
.ms span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ms b{font-size:1.45rem;font-weight:800;color:var(--ink)}
.ms em{font-style:normal;font-size:.82rem;color:var(--ink-soft)}

.empty{background:var(--white);border-radius:var(--r-lg);padding:3.5rem 1.5rem;text-align:center;box-shadow:var(--shadow)}
.empty-icon{font-size:2.6rem;margin-bottom:.3rem}
.empty h3{font-size:1.08rem;font-weight:800;margin:0 0 .2rem}
.empty p{color:var(--ink-soft);margin:0 0 1.3rem;font-size:.9rem}

/* ===================== ฟอร์มแบบหน้าเดียว 2 ฝั่ง ===================== */
.formwrap{padding-bottom:4.5rem}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.fcol{display:flex;flex-direction:column;gap:1rem;min-width:0}
.fbox{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.fbox-head{display:flex;align-items:center;gap:.65rem;padding:.7rem 1rem;
  background:var(--brand-tint);border-bottom:1px solid #ddeff0}
.fbox-ico{width:30px;height:30px;min-width:30px;display:grid;place-items:center;border-radius:9px;
  background:var(--white);font-size:.9rem;box-shadow:var(--shadow-sm)}
.fbox-head b{display:block;font-size:.9rem;font-weight:800;line-height:1.25}
.fbox-head small{font-size:.72rem;color:var(--ink-soft)}
.fbox-body{padding:1rem}

.photo-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:1rem;align-items:start;margin-bottom:.2rem}
.photo-pick{text-align:center}
.photo-frame{
  width:112px;height:112px;margin:0 auto .5rem;border-radius:18px;overflow:hidden;
  background:var(--brand-tint);display:grid;place-items:center;border:1px dashed #b9dedb;
}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-frame .ph-logo{padding:14px;object-fit:contain;opacity:.45}
.photo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.38rem .85rem;border-radius:10px;
  background:var(--brand);color:#fff;font-weight:700;font-size:.8rem;cursor:pointer;
  box-shadow:0 6px 14px rgba(20,157,143,.26);
}
.photo-btn input{display:none}
.photo-remove{display:block;margin-top:.45rem;font-size:.76rem;color:var(--danger);font-weight:600;cursor:pointer}
.photo-remove input{margin-right:.25rem;accent-color:var(--danger)}

.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 .9rem}
.fgrid.one{grid-template-columns:1fr}
.fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.tight{margin-top:.5rem}
.fgrid > label{margin-bottom:.75rem;display:block;font-size:.8rem;font-weight:700;color:#48607a}
.fgrid .wide{grid-column:1/-1}
.fgrid > label.field-warn{color:#be123c}
.field-warn input{border-color:#fbd0d7;background:#fff8f9}
.field-warn input:focus{border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.12)}
input[type=text],input[type=password],input[type=date],select,textarea{
  width:100%;margin-top:.28rem;padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-weight:400;font-size:.88rem;background:#fbfdfe;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);background:var(--white);
  box-shadow:0 0 0 3px rgba(20,157,143,.13)}
input::placeholder,textarea::placeholder{color:#b3c3d1;font-size:.85rem}
textarea{resize:vertical}

.segment{display:flex;gap:.45rem;margin-top:.28rem}
.seg{flex:1;margin:0;position:relative}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:block;text-align:center;padding:.5rem;border:1px solid var(--line);border-radius:10px;
  background:#fbfdfe;font-weight:700;font-size:.84rem;cursor:pointer;transition:.15s}
.seg input:checked + span{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  border-color:transparent;box-shadow:0 5px 12px rgba(20,157,143,.24)}

.relrow{display:flex;gap:.7rem;align-items:flex-start;background:var(--brand-tint);
  border:1px solid #ddeff0;border-radius:12px;padding:.8rem .85rem .05rem;margin-bottom:.6rem}
.relno{width:24px;height:24px;min-width:24px;display:grid;place-items:center;border-radius:50%;margin-top:1.35rem;
  background:var(--white);font-weight:800;font-size:.76rem;color:var(--ink-soft)}
.relrow .fgrid{flex:1;min-width:0}
.relrow input{background:var(--white)}

.formbar{
  position:fixed;left:calc(238px + 2.4rem);right:1.4rem;bottom:0;z-index:25;
  border-radius:16px 16px 0 0;display:flex;align-items:center;gap:.6rem;
  padding:.7rem clamp(1rem,3vw,2.2rem);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.formbar-note{font-size:.83rem;color:var(--ink-soft);margin-right:auto}

/* ===================== หน้าเข้าสู่ระบบ ===================== */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem;
  background:radial-gradient(900px 460px at 15% 0%,#d9f2f0,transparent),
             radial-gradient(820px 460px at 90% 100%,#cfeaf7,transparent),var(--bg)}
.login-card{width:min(415px,100%);background:var(--white);border-radius:26px;padding:2.4rem 2.2rem;box-shadow:var(--shadow-lg)}
.login-brand{text-align:center;margin-bottom:1.7rem}
.login-brand .mark{width:118px;height:118px;margin:0 auto .7rem;border-radius:50%;box-shadow:0 12px 30px rgba(20,157,143,.28)}
.login-brand p{margin:0;color:var(--ink-soft);font-size:.92rem}
.login-card label{display:block;font-size:.85rem;font-weight:700;color:#3d5468;margin-bottom:1rem}
.login-card .btn{width:100%;margin-top:.3rem}
.login-foot{text-align:center;margin-top:1.3rem;font-size:.78rem;color:#9bacbd}

/* ===================== จอกลาง / จอเล็ก ===================== */
@media (max-width:1180px){
  .workspace{grid-template-columns:300px minmax(0,1fr)}
  .formgrid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .mtop{
    display:flex;align-items:center;gap:.7rem;position:sticky;top:0;z-index:45;
    padding:.6rem 1rem;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .mtop-brand{display:flex;align-items:center;gap:.55rem;font-size:1rem;font-weight:800}
  .mtop-brand img{width:32px;height:32px;border-radius:50%}
  .app{display:block;padding:1rem}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;height:100vh;width:250px;border-radius:0 24px 24px 0;
    transform:translateX(-100%);transition:transform .22s;z-index:60;box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:none}
  .sb-veil{display:block;position:fixed;inset:0;background:rgba(18,38,58,.45);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .2s}
  .sb-veil.show{opacity:1;pointer-events:auto}
  .main{padding:.6rem 0 2.5rem}
  .formbar{left:0;right:0;border-radius:0}

  .workspace{grid-template-columns:1fr}
  .ministat{grid-template-columns:1fr}
  .listcol{position:static;max-height:none}
  .workspace.has-detail .listcol{display:none}
  .workspace:not(.has-detail) .detailcol{display:none}
  .backlist{display:inline-flex;align-items:center;margin-bottom:.8rem;font-weight:700;color:var(--brand-dark);font-size:.9rem}
  .dhero-act{margin-left:0;width:100%}
  .relrow{display:block;padding-bottom:.05rem}
  .relno{margin:0 0 .5rem}
  .formgrid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .page-head .btn{width:100%}
  .photo-row{grid-template-columns:1fr;justify-items:center;text-align:center}
  .photo-row .fgrid{width:100%;text-align:left}
  .dphoto{width:78px;height:78px;min-width:78px;border-radius:20px;font-size:1.7rem}
  .dhero-body h2{font-size:1.2rem}
  .formbar .btn-lg{flex:1}
  .formbar-note{display:none}
}

/* ===================== บันทึกข้อมูลประจำวัน ===================== */
.panel{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.1rem;overflow:hidden}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;background:var(--white);border-radius:var(--r);
  padding:.7rem;margin-bottom:1.1rem;box-shadow:var(--shadow-sm)}
.toolbar select,.toolbar input[type=month]{
  width:auto;min-width:170px;margin-top:0;padding:.55rem .85rem;border:1px solid var(--line);
  border-radius:11px;font:inherit;font-size:.88rem;background:var(--bg);cursor:pointer;
}
.toolbar select{flex:1;min-width:220px;max-width:420px}
.toolbar .btn{flex:0 0 auto}

.tablewrap{overflow-x:auto;margin:-.2rem}
.tablewrap::-webkit-scrollbar{height:8px}
.tablewrap::-webkit-scrollbar-thumb{background:#d6e2ea;border-radius:9px}
.dtable{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem;min-width:900px}
.dtable th{background:var(--brand-tint);color:var(--brand-dark);font-weight:800;font-size:.78rem;
  padding:.6rem .7rem;text-align:center;white-space:nowrap;border-bottom:1px solid #d5eceb}
.dtable th.grp{border-left:1px solid #cfe8e6;border-right:1px solid #cfe8e6}
.dtable tr.sub th{font-size:.74rem;font-weight:700;background:#e8f7f5;padding:.35rem .7rem}
.dtable td{padding:.6rem .7rem;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable tbody tr:hover td{background:#f7fcfb}
.dtable th:first-child,.dtable td:first-child{text-align:left}
.dtable td:nth-child(2){text-align:left}
.sticky-col{position:sticky;left:0;background:var(--white);z-index:2}
.dtable thead .sticky-col{background:var(--brand-tint);z-index:3}

/* ตารางกว้าง: ตรึงคอลัมน์วันที่กับชื่อผู้ป่วยไว้ */
.wide-dtable{min-width:2400px}
.stick1{position:sticky;left:0;width:118px;min-width:118px;max-width:118px;
  background:var(--white);z-index:2}
.stick2{position:sticky;left:118px;width:210px;min-width:210px;max-width:210px;
  background:var(--white);z-index:2;box-shadow:3px 0 6px rgba(18,38,58,.07)}
.stick1 b{font-size:.84rem}
.stick2 span.tcode{margin-right:.15rem}
.dtable thead .stick1,.dtable thead .stick2{background:var(--brand-tint);z-index:4}
.dtable tbody tr:hover .stick1,.dtable tbody tr:hover .stick2{background:#f7fcfb}
.dtable td.txt{text-align:left;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.dtable td.note-cell{max-width:240px;color:#7a6a3c}
.tablehint{margin:.7rem 0 0;font-size:.8rem;color:var(--ink-soft);text-align:right}
.tcode{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;font-weight:700;color:var(--brand-dark);
  background:var(--brand-soft);padding:.05rem .45rem;border-radius:6px}
.noterow td{background:#fffdf5;border-bottom:1px solid var(--line);text-align:left;
  white-space:normal;font-size:.84rem;color:#7a6a3c}
.notetag{background:#fdf0d5;color:#8a6d1f;font-weight:700;font-size:.72rem;padding:.05rem .5rem;border-radius:6px;margin-right:.3rem}
.rowacts{display:flex;gap:.35rem;justify-content:center}
.rowacts form{margin:0}

/* ตารางกรอกสัญญาณชีพ */
.vitalgrid{display:grid;grid-template-columns:118px repeat(3,minmax(0,1fr));gap:.55rem;align-items:center}
.vhead{font-size:.8rem;font-weight:800;color:var(--brand-dark);text-align:center;padding-bottom:.15rem}
.vhead small{display:block;font-size:.7rem;font-weight:600;color:var(--ink-soft)}
.vslot{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.9rem;color:#48607a;
  background:var(--brand-tint);border-radius:11px;padding:.55rem .7rem}
.vslot span{font-size:1rem}
.vcell input{margin-top:0;text-align:center;font-weight:600}

@media (max-width:700px){
  .vitalgrid{grid-template-columns:82px repeat(3,minmax(0,1fr));gap:.4rem}
  .vhead{font-size:.72rem}
  .vslot{font-size:.8rem;padding:.5rem .4rem;justify-content:center}
  .vslot span{display:none}
  .vcell input{padding:.5rem .3rem;font-size:.85rem}
  .toolbar select{min-width:100%;max-width:none}
  .toolbar input[type=month]{flex:1}
}

/* กล่องบันทึกประจำวันในหน้ารายละเอียดผู้ป่วย */
.dailybox{margin-top:1.1rem;background:var(--brand-tint);border:1px solid #ddeff0;border-radius:var(--r);padding:1.1rem 1.2rem}
.dailybox-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem}
.dailybox-head h4{font-size:.86rem;font-weight:800;color:var(--brand-dark);letter-spacing:.02em;margin:0}
.dailybox-act{display:flex;gap:.4rem}
.mini-dtable{min-width:760px;font-size:.84rem;background:var(--white);border-radius:12px}
.mini-dtable th{background:var(--white);border-bottom:1px solid var(--line)}
.mini-dtable tr.sub th{background:#f7fbfb}
.tool-field{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.tool-field input{margin-top:0}

/* ตารางกรอกสัญญาณชีพแบบ 4 ค่า */
.vitalgrid.v4{grid-template-columns:110px repeat(4,minmax(0,1fr))}
@media (max-width:820px){
  .vitalgrid.v4{grid-template-columns:70px repeat(4,minmax(0,1fr));gap:.35rem}
  .vitalgrid.v4 .vhead{font-size:.68rem}
  .vitalgrid.v4 .vcell input{padding:.45rem .2rem;font-size:.82rem}
}

/* ===================== ปฏิทินนัดหมาย ===================== */
.calwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.3rem;align-items:start}
.calcol{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.2rem}
.calhead{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.calhead h2{font-size:1.15rem;font-weight:800;margin:0;min-width:170px;text-align:center}
.calnav{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--bg);
  font-size:1.2rem;font-weight:800;color:var(--ink-soft);transition:.15s}
.calnav:hover{background:var(--brand-soft);color:var(--brand-dark)}
.calhead .btn{margin-left:auto}

.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
.cal-dow{text-align:center;font-size:.76rem;font-weight:800;color:var(--ink-soft);padding:.2rem 0 .4rem}
.cal-dow.weekend{color:#e11d48}
.cal-cell{min-height:104px;border:1px solid var(--line);border-radius:12px;padding:.35rem;
  background:var(--white);display:flex;flex-direction:column;gap:.2rem;transition:.15s}
.cal-cell.empty{border:0;background:none}
.cal-cell.weekend{background:#fbfcfd}
.cal-cell.today{border-color:var(--brand);box-shadow:0 0 0 2px rgba(20,157,143,.16)}
.cal-cell:hover .cal-add{opacity:1}
.cal-daynum{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:700;color:#5b7086}
.cal-cell.today .cal-daynum span{background:var(--brand);color:#fff;width:22px;height:22px;
  display:grid;place-items:center;border-radius:50%;font-size:.75rem}
.cal-add{opacity:0;width:20px;height:20px;display:grid;place-items:center;border-radius:6px;
  background:var(--bg);color:var(--brand-dark);font-weight:800;font-size:.8rem;transition:.15s}
.cal-add:hover{background:var(--brand);color:#fff}
.cal-items{display:flex;flex-direction:column;gap:.18rem;overflow:hidden}
.cal-item{display:block;font-size:.7rem;line-height:1.3;padding:.16rem .35rem;border-radius:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid}
.cal-item b{font-weight:800;margin-right:.15rem}
.cal-item.done{opacity:.5;text-decoration:line-through}
.cal-more{font-size:.66rem;color:var(--ink-soft);padding-left:.35rem}

/* สีตามประเภทนัด */
.k-med{background:#dcfce7;border-color:#16a34a;color:#14532d}
.k-phy{background:#dbeafe;border-color:#2563eb;color:#1e3a8a}
.k-fam{background:#fce7f3;border-color:#db2777;color:#831843}
.k-team{background:#ede9fe;border-color:#7c3aed;color:#4c1d95}
.k-act{background:#fef3c7;border-color:#d97706;color:#78350f}
.k-drug{background:#ccfbf1;border-color:#0d9488;color:#134e4a}
.k-staff{background:#e2e8f0;border-color:#64748b;color:#1e293b}
.k-other{background:#f1f5f9;border-color:#94a3b8;color:#334155}

.callegend{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.callegend .lg{font-size:.7rem;font-weight:700;padding:.15rem .6rem;border-radius:999px;border-left:3px solid}

.upcol{display:flex;flex-direction:column;gap:1rem;position:sticky;top:1.1rem}
.upbox{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.1rem}
.upbox h3{font-size:.88rem;font-weight:800;margin:0 0 .8rem;color:var(--brand-dark)}
.upitem{display:flex;align-items:center;gap:.7rem;padding:.55rem .5rem;border-radius:12px;transition:.15s}
.upitem:hover{background:var(--brand-tint)}
.update{width:42px;min-width:42px;text-align:center;background:var(--bg);border-radius:10px;padding:.25rem 0;
  display:flex;flex-direction:column;line-height:1.1}
.update b{font-size:1.05rem;font-weight:800;color:var(--brand-dark)}
.update small{font-size:.64rem;color:var(--ink-soft)}
.uptxt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.uptxt b{font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uptxt small{font-size:.74rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upkind{width:8px;height:8px;min-width:8px;border-radius:50%;border:0!important}

.todayitem{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:11px;
  margin-bottom:.45rem;border-left:3px solid}
.todayitem:last-child{margin-bottom:0}
.todayitem.done{opacity:.55}
.ti-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ti-body b{font-size:.85rem;font-weight:700}
.ti-body small{font-size:.73rem;opacity:.85}
.ti-check{background:none;border:0;cursor:pointer;font-size:1rem;padding:.1rem}
.todayitem form{margin:0}

.formwrap.narrow{max-width:820px}
.chkline{display:flex;align-items:center;gap:.5rem;padding:.5rem 0}
.chkline input{width:18px;height:18px;margin:0;accent-color:var(--brand)}

@media (max-width:1100px){
  .calwrap{grid-template-columns:1fr}
  .upcol{position:static;flex-direction:row;flex-wrap:wrap}
  .upbox{flex:1;min-width:280px}
}
@media (max-width:700px){
  .calgrid{gap:.25rem}
  .cal-cell{min-height:72px;padding:.25rem;border-radius:9px}
  .cal-item{font-size:.6rem;padding:.1rem .2rem}
  .cal-add{display:none}
  .callegend{display:none}
  .calhead h2{font-size:1rem;min-width:120px}
}

/* ===================== หน้าต่างซ้อน (modal) ===================== */
.modal-veil{position:fixed;inset:0;background:rgba(15,32,44,.5);backdrop-filter:blur(3px);z-index:80;
  animation:fadeIn .16s ease}
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;pointer-events:none}
.modal-card{
  width:min(620px,100%);max-height:88vh;overflow-y:auto;background:var(--white);border-radius:22px;
  box-shadow:0 40px 90px rgba(15,32,44,.3);pointer-events:auto;animation:popIn .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:.7rem;padding:1rem 1.3rem;border-bottom:1px solid var(--line)}
.modal-head b{font-size:1.02rem;font-weight:800}
.modal-kind{font-size:.76rem;font-weight:800;padding:.22rem .8rem;border-radius:999px;border-left:3px solid}
.modal-x{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:10px;
  background:var(--bg);color:var(--ink-soft);font-size:.95rem;cursor:pointer;transition:.15s}
.modal-x:hover{background:#fff1f3;color:var(--danger)}
.modal-body{padding:1.3rem}
.modal-body h3{font-size:1.3rem;font-weight:800;margin:0 0 1rem}
.mrow{display:flex;gap:.8rem;align-items:flex-start;padding:.55rem 0;border-top:1px solid #f1f5f9}
.mrow:first-of-type{border-top:0;padding-top:0}
.mico{width:26px;min-width:26px;text-align:center;font-size:.95rem;opacity:.8}
.mrow div{min-width:0}
.mrow small{display:block;font-size:.74rem;color:var(--ink-soft);font-weight:600}
.mrow b{font-size:.95rem;font-weight:600;word-break:break-word}
.mstate{margin-top:.9rem;background:#e9fbf5;color:#0b6b53;border:1px solid #a9e9d4;
  border-radius:11px;padding:.55rem .9rem;font-size:.88rem;font-weight:700}
.modal-foot{display:flex;align-items:center;gap:.5rem;padding:.9rem 1.3rem;
  border-top:1px solid var(--line);background:#fbfdfe;border-radius:0 0 22px 22px;flex-wrap:wrap}
.modal-foot .mf{margin:0}
.mspace{margin-left:auto}
.modal-card .fgrid{gap:0 1rem}
.modal-card .fgrid > label{margin-bottom:.85rem}

/* รายการที่กดเปิด modal ได้ ต้องดูเป็นปุ่มแต่ไม่เป็นกรอบ */
button.cal-item,button.upitem,button.ti-body{border:0;font:inherit;cursor:pointer;text-align:left;width:100%}
button.cal-item{border-left:3px solid;box-shadow:none}
button.upitem{background:none;padding:.55rem .5rem}
button.ti-body{background:none;padding:0}
.cal-add{border:0;font:inherit;cursor:pointer}

@media (max-width:600px){
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-height:92vh;border-radius:22px 22px 0 0;width:100%}
  .modal-foot{border-radius:0}
}