/* ===== ระบบคำนวณปุ๋ยอินทรีย์เคมี — ธีม "กระดาษบันทึกห้องแล็บดิน" ===== */
:root{
  --paper:#f6f4ec;
  --paper-2:#efece1;
  --grid:rgba(60,72,52,.06);
  --ink:#232722;
  --ink-soft:#5c6157;
  --line:#d9d5c6;
  --leaf:#2f7d4f;       /* คลอโรฟิลล์ */
  --leaf-dark:#245f3c;
  --clay:#b7692c;       /* ดินเผา - เตือน */
  --amber:#c99a17;
  --danger:#b23b3b;
  --ok:#2f7d4f;
  --chip:#e7e3d5;
  --radius:10px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --thai:"Sarabun","Noto Sans Thai","Leelawadee UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--thai);
  color:var(--ink);
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/22px 22px,
    var(--paper);
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--leaf-dark)}
h1,h2,h3{line-height:1.25;margin:0 0 .4em}
h1{font-size:1.5rem;letter-spacing:-.01em}
h2{font-size:1.12rem}
h3{font-size:.98rem}
.mono{font-family:var(--mono)}
small,.muted{color:var(--ink-soft)}

/* ---------- โครงหน้า ---------- */
.topbar{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem 1rem;background:var(--ink);color:#f2efe4;
  position:sticky;top:0;z-index:20;
}
.topbar .brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.topbar .brand .mark{
  width:26px;height:26px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--leaf),var(--leaf-dark));
  display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:.8rem;
}
.topbar .spacer{flex:1}
.topbar a,.topbar button.link{color:#d9e4d3;background:none;border:0;cursor:pointer;font:inherit;text-decoration:none;padding:.3rem .5rem;border-radius:6px}
.topbar a:hover,.topbar button.link:hover{background:rgba(255,255,255,.08)}
.topbar .who{font-family:var(--mono);font-size:.8rem;color:#b9c6b0}

.wrap{max-width:1120px;margin:0 auto;padding:1.1rem 1rem 4rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}

/* ---------- การ์ด ---------- */
.card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.05rem;margin:0 0 1rem;
}
.card > h2{display:flex;align-items:center;gap:.5rem}
.card .hint{margin:.15rem 0 .9rem;color:var(--ink-soft);font-size:.86rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-side{display:grid;grid-template-columns:1.55fr 1fr;gap:1rem;align-items:start}
@media(max-width:820px){.grid2,.grid-side{grid-template-columns:1fr}}

/* ---------- ฟอร์ม ---------- */
label{display:block;font-size:.8rem;color:var(--ink-soft);margin:0 0 .2rem}
input,select,textarea{
  width:100%;font:inherit;color:var(--ink);
  background:#fbfaf4;border:1px solid var(--line);border-radius:8px;padding:.5rem .55rem;
}
input.num{font-family:var(--mono);text-align:right}
input:focus,select:focus,textarea:focus{outline:2px solid var(--leaf);outline-offset:0;border-color:var(--leaf)}
.field{margin:0 0 .7rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.row > *{flex:1;min-width:0}

/* ตารางกริดธาตุอาหาร */
.nutgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media(max-width:560px){.nutgrid{grid-template-columns:repeat(2,1fr)}}
.nutgrid .nut label{font-size:.74rem}
.nutgrid .nut input{padding:.4rem .45rem}

/* ปุ่ม */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;justify-content:center;
  font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:.55rem .95rem;
  border:1px solid var(--leaf-dark);background:var(--leaf);color:#fff;
}
.btn:hover{background:var(--leaf-dark)}
.btn.secondary{background:#fbfaf4;color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:var(--chip)}
.btn.ghost{background:none;border-color:var(--line);color:var(--ink)}
.btn.danger{background:var(--danger);border-color:#8f2f2f}
.btn.sm{padding:.32rem .6rem;font-size:.82rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}

/* ---------- ตาราง ---------- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line)}
th{font-size:.74rem;letter-spacing:.03em;color:var(--ink-soft);text-transform:uppercase;font-weight:600}
td.n,th.n{text-align:right;font-family:var(--mono)}
tbody tr:hover{background:rgba(47,125,79,.05)}
.tag{display:inline-block;font-size:.7rem;font-family:var(--mono);padding:.1rem .4rem;border-radius:5px;background:var(--chip);color:var(--ink-soft)}
.tag.chemical{background:#e3ecf3;color:#33566e}
.tag.organic{background:#e6efdd;color:#3e5f34}
.tag.filler{background:#efe7d8;color:#7a6641}

/* ---------- ป้ายผล / สถานะ ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;padding:.25rem .55rem;border-radius:6px}
.badge.pass{background:#e6efdd;color:var(--leaf-dark)}
.badge.fail{background:#f6e0dd;color:var(--danger)}
.badge.warn{background:#f7eccf;color:#8a6a12}
.dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--amber)}.dot.no{background:var(--danger)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:.2rem 0 1rem}
@media(max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fbfaf4;border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem}
.kpi .v{font-family:var(--mono);font-size:1.35rem;font-weight:700}
.kpi .l{font-size:.72rem;color:var(--ink-soft)}
.kpi.big .v{color:var(--leaf-dark)}

/* แถบสัดส่วนวัตถุดิบ */
.stack{display:flex;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin:.3rem 0 .2rem}
.stack .seg{display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--mono);font-size:.72rem;min-width:0;overflow:hidden;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.78rem;margin:.3rem 0}
.legend .li{display:flex;align-items:center;gap:.35rem}
.legend .sw{width:.8rem;height:.8rem;border-radius:3px;display:inline-block}

/* กล่องเตือน */
.note{border-left:3px solid var(--amber);background:#faf3dd;padding:.55rem .7rem;border-radius:0 8px 8px 0;margin:.4rem 0;font-size:.85rem}
.note.danger{border-color:var(--danger);background:#f8e5e2}
.note.ok{border-color:var(--leaf);background:#e9f1e1}

/* ---------- หน้า login ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:1rem}
.authcard{width:100%;max-width:390px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.4rem;box-shadow:0 12px 40px rgba(35,39,34,.10)}
.authcard .mark{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--leaf),var(--leaf-dark));display:grid;place-items:center;color:#fff;font-family:var(--mono);margin:0 0 .8rem}
.err{color:var(--danger);font-size:.85rem;min-height:1.2em;margin:.3rem 0}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(20,22,18,.45);display:none;place-items:center;z-index:40;padding:1rem}
.modal-bg.open{display:grid}
.modal{background:var(--paper);border:1px solid var(--line);border-radius:12px;max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:1.2rem}
.modal h2{margin-top:0}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin:0 0 1rem;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.5rem .8rem;cursor:pointer;font:inherit;color:var(--ink-soft)}
.tabs button.active{color:var(--ink);border-color:var(--leaf);font-weight:600}
.hidden{display:none!important}
.assign-tag{font-family:var(--mono);font-size:.68rem;background:var(--chip);border-radius:4px;padding:0 .3rem;color:var(--ink-soft);margin-left:.3rem}
.foot{margin-top:2rem;font-size:.78rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:1rem}