/* ════════════════════════════════════════════════════════════════
   โปรแกรมยาไก่ไข่ — ไฟล์เดียวจบ ไม่พึ่ง CDN ใด ๆ
   เปิดใช้งานที่ฟาร์มได้แม้ไม่มีอินเทอร์เน็ต
   ════════════════════════════════════════════════════════════════ */

/* ── โทเคนสี : ใช้ธีมสว่างอย่างเดียว ── */
:root{
  --paper:#e8e4d6;            /* พื้นหลังหน้า — สีทรายอ่อน ตัดกับช่องปฏิทินสีขาว */
  --surface:#ffffff; --sunken:#dcd7c5;
  --ink:#1e2420; --muted:#6b7669; --line:#cec8b4;
  --accent:#0d6153; --on-accent:#ffffff;
  --dawn:#e09a2e; --dawn-ink:#8a5410;
  --dusk:#5b6bb5; --dusk-ink:#3c4a90;
  --alert:#b2452f;
  --band:#f8dfb5;             /* แถบวันที่ */
  --blank:#fdeeeb;            /* วันที่ยังไม่มีโปรแกรม — แดงอ่อน */
  --blank-line:#f0cdc5;
  --shadow:0 1px 2px rgba(30,36,32,.06), 0 12px 28px -20px rgba(30,36,32,.5);
}
html{ color-scheme:light only }
:root{ forced-color-adjust:none }

*{ box-sizing:border-box }
html{ color-scheme:light dark }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Sarabun",-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{ font-family:"Bai Jamjuree","Sarabun",sans-serif; text-wrap:balance; margin:0; font-weight:600 }
p{ margin:0 }
img{ max-width:100% }
.num{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums }
.eyebrow{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.muted{ color:var(--muted) } .accent{ color:var(--accent) }
.t13{ font-size:13px } .t12{ font-size:12px } .t11{ font-size:11px }
.bold{ font-weight:600 }

/* ── โครงหน้า ── */
.wrap{ max-width:1240px; margin:0 auto; padding-inline:16px }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.row-top{ align-items:flex-start } .row-end{ align-items:flex-end }
.spread{ justify-content:space-between }
.col{ display:flex; flex-direction:column; gap:6px }
.grow{ flex:1; min-width:0 } .push{ margin-left:auto }
.vline{ align-self:stretch; width:1px; background:var(--line) }
.cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.cards-sm{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.two{ display:grid; gap:8px; grid-template-columns:1fr 1fr }
.mt1{margin-top:6px}.mt2{margin-top:12px}.mt3{margin-top:18px}.mt4{margin-top:24px}
.mb2{margin-bottom:12px}.mb3{margin-bottom:18px}

/* ── ส่วนประกอบ ── */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:16px }
.pad{ padding:16px }
.btn{ display:inline-flex; align-items:center; gap:6px; border-radius:10px; padding:8px 14px;
      font-family:inherit; font-weight:600; font-size:14px; border:1px solid var(--line);
      background:var(--surface); color:var(--ink); cursor:pointer; transition:background .15s,border-color .15s }
.btn:hover{ background:var(--sunken) }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.btn-primary:hover{ background:var(--accent); filter:brightness(1.08) }
.btn-ghost{ border-color:transparent; background:transparent }
.btn-ghost:hover{ background:var(--sunken) }
.btn-danger{ color:var(--alert) }
.btn[disabled]{ opacity:.45; cursor:not-allowed }
.btn-sm{ padding:6px 11px; font-size:13px }
.btn-xs{ padding:3px 8px; font-size:12px; border-radius:8px }
.inp{ background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:7px 10px;
      color:var(--ink); font-family:inherit; font-size:14px; width:100%; min-width:0 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.tabs{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--sunken); width:fit-content; max-width:100%; flex-wrap:wrap }
.tabbtn{ padding:9px 16px; border-radius:999px; font-family:inherit; font-weight:600; font-size:14px;
         cursor:pointer; border:1px solid transparent; color:var(--muted); background:transparent }
.tabbtn[aria-selected="true"]{ background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow) }
.farm-input{ background:transparent; border:0; padding:0; color:inherit; font:inherit;
             width:100%; max-width:420px; border-bottom:1px dashed transparent }
.farm-input:hover{ border-bottom-color:var(--line) }

/* ── โลโก้ฟาร์ม ── */
.logo{ position:relative; flex:none; width:86px; height:86px; border-radius:18px; background:#fff;
       border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; cursor:pointer }
.logo img{ width:76px; height:76px; object-fit:contain }
.logo input{ display:none }
.logo .hint{ position:absolute; inset:auto 0 0 0; font-size:8.5px; text-align:center; padding:2px 0;
             background:rgba(0,0,0,.55); color:#fff; opacity:0; transition:opacity .15s }
.logo:hover .hint{ opacity:1 }

/* ── แถบตัวเลข ── */
.stat-v{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:26px; font-weight:600; line-height:1.1 }
.stat-u{ font-size:14px; font-weight:500; color:var(--muted); font-family:"Sarabun",sans-serif }

/* ── ปฏิทิน ── */
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px }
.dow{ text-align:center; font-size:12.5px; font-weight:700; padding:6px 0; color:var(--muted);
      background:var(--sunken); border-radius:8px }
.dow.sun{ color:var(--alert) }
.day{ text-align:left; font-family:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line);
      border-radius:14px; padding:0; overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
      min-height:120px; transition:border-color .15s, box-shadow .15s }
.day:hover{ border-color:var(--accent); box-shadow:var(--shadow) }
.day.empty{ background:transparent; border-color:transparent; cursor:default; min-height:0 }
.day.blank{ background:var(--blank); border-color:var(--blank-line) }
.day.noted{ background:#fdf2dd; border-color:#e0b268; box-shadow:inset 0 0 0 1px #e9c88f }
.day.noted .dhead{ background:#f2cf92; border-bottom-color:#e0b268 }
.day.blank .dhead{ background:#f6d3c9; border-bottom-color:var(--blank-line) }
.day.today{ border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent) }
.dhead{ display:flex; align-items:center; justify-content:space-between; gap:4px;
        padding:4px 8px; background:var(--band); border-bottom:1px solid var(--line) }
.daynum{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums }
.day.sun .daynum{ color:var(--alert) }
.badge-today{ font-size:9px; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--accent); color:var(--on-accent) }
.sess{ display:flex; gap:6px; padding:5px 6px; flex:1 }
.sess + .sess{ border-top:1px dashed var(--line) }
.sess-am{ background:color-mix(in srgb, var(--dawn) 11%, transparent) }
.sess-pm{ background:color-mix(in srgb, var(--dusk) 11%, transparent) }
.sess-tag{ font-size:10px; font-weight:700; flex:none; width:26px; padding-top:2px; opacity:.9 }
.sess-am .sess-tag{ color:var(--dawn-ink) } .sess-pm .sess-tag{ color:var(--dusk-ink) }
.sess-items{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0 }
.item{ display:flex; align-items:center; gap:6px; min-width:0 }
.item .txt{ flex:1; min-width:0; line-height:1.25 }
.item .nm{ font-size:12.5px; font-weight:700; color:var(--ink); overflow-wrap:anywhere }
.item .ds{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted) }
.item .ds.manual{ color:var(--dawn-ink); font-weight:600 }
.item img{ width:46px; height:46px; object-fit:contain; flex:none;
           filter:drop-shadow(0 2px 3px rgba(0,0,0,.22)) }
.cal-grid.compact .item img{ width:26px; height:26px }
.cal-grid.compact .item .ds{ font-size:10px }
.cal-grid.compact .day{ min-height:84px }

.daynote{ padding:4px 7px; font-size:11px; color:var(--dawn-ink); background:color-mix(in srgb, var(--dawn) 16%, transparent);
           border-top:1px dashed var(--line); overflow-wrap:anywhere }
.daynote b{ font-weight:700 }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:12px;
       background:var(--surface); border:1px solid var(--line) }
.pill img{ width:34px; height:34px; object-fit:contain }
.swatch{ display:inline-block; width:12px; height:12px; border-radius:3px }

/* ── โมดัล ── */
.overlay{ position:fixed; inset:0; background:rgba(10,14,10,.55); display:flex; align-items:flex-start;
          justify-content:center; padding:20px 12px; overflow:auto; z-index:50 }
.modal{ background:var(--surface); border:1px solid var(--line); border-radius:18px; width:100%;
        max-width:600px; padding:20px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55) }
.sess-box{ border-radius:14px; padding:12px; margin-top:12px }
.sess-box.am{ background:color-mix(in srgb, var(--dawn) 12%, transparent) }
.sess-box.pm{ background:color-mix(in srgb, var(--dusk) 12%, transparent) }
.sess-box h4{ margin:0 0 8px; font-size:13.5px; font-weight:700 }
.sess-box.am h4{ color:var(--dawn-ink) } .sess-box.pm h4{ color:var(--dusk-ink) }
.slot{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:nowrap }
.slot img{ width:40px; height:40px; object-fit:contain; flex:none }
.slot .dosewrap{ display:flex; align-items:center; gap:4px; flex:none }
.slot .dosein{ width:76px; text-align:right; padding:6px 8px }
.slot .unit{ font-size:12px; color:var(--muted); width:52px; line-height:1.25 }
details.repeat{ margin-top:16px; border-radius:14px; padding:12px; background:var(--sunken) }
details.repeat summary{ cursor:pointer; font-size:13px; font-weight:600 }
.dowbox{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--line);
         border-radius:9px; font-size:13px; cursor:pointer; color:var(--ink); background:var(--surface) }
textarea.inp{ resize:vertical }
button, input, select, textarea{ color:var(--ink) }        /* กันเบราว์เซอร์ที่ตั้งโหมดมืดไว้ ทำตัวอักษรเป็นสีขาว */

/* ── ตาราง ── */
.scroll-x{ overflow-x:auto }
table{ border-collapse:collapse; width:100%; font-size:14px }
th,td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line) }
th{ font-weight:600; white-space:nowrap }
td.r,th.r{ text-align:right }
tbody tr:last-child td{ border-bottom:0 }

/* ── การ์ดยา ── */
.med-photo{ position:relative; flex:none; cursor:pointer; display:grid; place-items:center;
            width:88px; height:88px; border-radius:14px; background:var(--sunken); border:1px solid var(--line) }
.med-photo img{ width:74px; height:74px; object-fit:contain }
.med-photo span{ position:absolute; left:0; right:0; bottom:0; font-size:9px; text-align:center;
                 padding:2px 0; border-radius:0 0 13px 13px; background:rgba(0,0,0,.55); color:#fff }
.med-photo input{ display:none }
.med-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px;
           padding-top:10px; border-top:1px solid var(--line) }
.a4modal{ background:var(--surface); border:1px solid var(--line); border-radius:18px; width:100%;
           max-width:1180px; padding:18px; box-shadow:0 24px 60px -20px rgba(0,0,0,.45) }
.a4modal img{ width:100%; border:1px solid var(--line); border-radius:10px; display:block; background:#fff }
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
        padding:9px 16px; border-radius:12px; font-size:14px; font-weight:600;
        background:var(--ink); color:var(--paper); box-shadow:var(--shadow) }

/* ── จอเล็ก ── */
@media (max-width:760px){
  .cal-grid{ gap:4px }
  .day{ min-height:70px; border-radius:10px }
  .dhead{ padding:2px 5px }
  .daynum{ font-size:13px }
  .sess{ padding:3px }
  .sess-tag{ display:none }
  .item .nm, .item .ds{ display:none }
  .item img{ width:30px; height:30px }
  .item{ justify-content:center }
  .sess-items{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px }
  .vline{ display:none }
  .two{ grid-template-columns:1fr }
  .stat-v{ font-size:22px }
  .modal{ padding:14px }
  .slot .dosein{ width:64px }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important } }

/* ── สั่งพิมพ์ (A4 แนวนอน) ── */
@media print{
  .no-print{ display:none !important }
  body{ background:#fff; font-size:11px }
  .card{ box-shadow:none }
  .day{ min-height:96px; break-inside:avoid }
  .item img{ width:38px; height:38px }
  @page{ size:A4 landscape; margin:8mm }
}