/* ============================================================
   template.css (ก๊อปจาก C:\dev\shared\ui-template) + สไตล์เฉพาะ todo ต่อท้าย
   หน้าตามาตรฐานบ้าน sirirak: พื้นขาว · น้ำเงิน · IBM Plex Sans Thai · กระชับ
   ============================================================ */
:root {
  --brand:#2563eb; --brand-dark:#1e40af; --brand-soft:#eff6ff; --brand-line:#bfdbfe;
  --ink:#1f2937; --ink-soft:#64748b; --ink-faint:#94a3b8;
  --line:#e5e9ef; --bg:#ffffff; --tint:#f3f5f8; --card:#ffffff; --field:#ffffff;
  --ok:#16a34a; --ok-soft:#f0fdf4; --warn:#d97706; --warn-soft:#fffbeb;
  --danger:#dc2626; --danger-soft:#fef2f2;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s8:48px;
  --r:10px; --r-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --font:'IBM Plex Sans Thai','Sarabun','Leelawadee UI',system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums; }
h1,h2,h3,h4 { margin:0; line-height:1.3; }
p { margin:0; }
button { font-family:inherit; font-size:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; font-size:14px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ปุ่ม */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:36px; padding:0 var(--s4); border-radius:8px; border:1px solid transparent; font-weight:600; font-size:14px; transition:background .15s, border-color .15s; text-decoration:none; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-secondary { background:var(--card); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover { border-color:var(--ink-faint); background:var(--tint); }
.btn-ghost { background:transparent; color:var(--brand); }
.btn-ghost:hover { background:var(--brand-soft); }
.btn-sm { min-height:30px; padding:0 var(--s3); font-size:13px; border-radius:6px; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ฟอร์ม */
.field { display:flex; flex-direction:column; gap:var(--s1); }
.field label { font-weight:600; font-size:13px; }
.input, .select, textarea.input { min-height:36px; padding:6px var(--s3); border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); width:100%; }
.input:focus, .select:focus, textarea.input:focus { border-color:var(--brand); outline:2px solid var(--brand); outline-offset:0; }

/* การ์ด */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }

/* flash */
.flash { display:flex; gap:var(--s3); align-items:center; padding:var(--s2) var(--s3); border-radius:8px; border:1px solid; font-size:13px; }
.flash-ok { color:var(--ok); background:var(--ok-soft); border-color:var(--ok); }
.flash-danger { color:var(--danger); background:var(--danger-soft); border-color:var(--danger); }

/* login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--s6) var(--s4); }
.login-card { width:100%; max-width:360px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.login-brand { background:var(--brand); color:#fff; padding:var(--s5); }
.login-brand .org { font-size:12px; opacity:.85; letter-spacing:.06em; }
.login-brand h2 { font-size:18px; margin-top:2px; }
.login-form { padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.login-foot { padding:0 var(--s4) var(--s4); font-size:12px; color:var(--ink-soft); text-align:center; }

/* โครงแอป */
.app-top { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.app-top-inner { max-width:820px; margin:0 auto; padding:var(--s2) var(--s4); display:flex; align-items:center; gap:var(--s3); }
.app-logo { display:flex; align-items:center; gap:var(--s2); font-weight:700; }
.app-logo .mark { width:26px; height:26px; border-radius:6px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.user-chip { margin-left:auto; display:flex; align-items:center; gap:var(--s2); font-size:13px; color:var(--ink-soft); }
.page { max-width:820px; margin:0 auto; padding:var(--s4); display:flex; flex-direction:column; gap:var(--s4); }

/* สถานะ 4 แบบ */
.state-box { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); padding:var(--s6) var(--s4); text-align:center; color:var(--ink-soft); }
.state-box .big { font-size:30px; }
.state-box b { color:var(--ink); }
.spinner { width:22px; height:22px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--brand); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   สไตล์เฉพาะ todo
   ============================================================ */
.add-card { padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.add-row { display:flex; gap:var(--s2); flex-wrap:wrap; }
.add-row .grow { flex:1; min-width:180px; }
.add-row .select { max-width:150px; }
@media (max-width:560px) { .add-row .select { max-width:none; flex:1; } }

.kpi-row { display:flex; gap:var(--s2); flex-wrap:wrap; }
.kpi { flex:1; min-width:100px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:var(--s2) var(--s3); }
.kpi .k-label { font-size:11px; font-weight:600; color:var(--ink-soft); }
.kpi .k-value { font-size:22px; font-weight:700; }

.cat { display:flex; flex-direction:column; }
.cat-head { font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:.02em; padding:var(--s3) var(--s1) var(--s1); }

.task { display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s3); border:1px solid var(--line); border-radius:10px; background:var(--card); margin-bottom:var(--s2); }
.task.done { opacity:.6; }
.task .check { width:24px; height:24px; flex-shrink:0; border-radius:6px; border:2px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; margin-top:1px; }
.task.done .check { background:var(--ok); border-color:var(--ok); }
.task .body { flex:1; min-width:0; }
.task .title { font-size:14px; word-break:break-word; }
.task.done .title { text-decoration:line-through; }
.task .meta { font-size:11px; color:var(--ink-faint); margin-top:2px; display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }
.task .note { font-size:12px; color:var(--ink-soft); margin-top:4px; white-space:pre-wrap; }
.task .row-actions { display:flex; gap:var(--s1); flex-shrink:0; }
.icon-btn { width:30px; height:30px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:14px; line-height:1; }
.icon-btn:hover { background:var(--tint); color:var(--ink); }

/* จุดสีความสำคัญ */
.prio { display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.prio::before { content:''; width:8px; height:8px; border-radius:50%; }
.prio.p1 { color:var(--danger); } .prio.p1::before { background:var(--danger); }
.prio.p2 { color:var(--warn); }   .prio.p2::before { background:var(--warn); }
.prio.p3 { color:var(--brand); }  .prio.p3::before { background:var(--brand); }
.prio.p4 { color:var(--ink-faint); } .prio.p4::before { background:var(--ink-faint); }

.done-toggle { background:none; border:0; color:var(--ink-soft); font-weight:600; font-size:13px; padding:var(--s2); display:flex; align-items:center; gap:var(--s2); }
.flash-fixed { position:fixed; left:50%; bottom:var(--s5); transform:translateX(-50%); z-index:20; box-shadow:var(--shadow); }