/* style.css — ธีมกลางของ survey.sirirak.com (design token ตามมาตรฐาน C:\dev) */

:root {
  /* สี — แก้ --brand ตัวเดียวเปลี่ยนธีมทั้งเว็บ */
  --brand:#2563eb; --brand-dark:#1e40af; --brand-soft:#eff6ff;
  --ink:#1f2937; --ink-soft:#6b7280; --line:#e5e7eb; --bg:#f9fafb; --card:#fff;
  --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  /* ระยะห่าง — คูณ 4 เสมอ */
  --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:'Sarabun',system-ui,sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font); font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--bg);
}

.wrap { max-width:640px; margin:0 auto; padding:var(--s4); }
.wrap-wide { max-width:960px; margin:0 auto; padding:var(--s4); }

/* ---- หัวหน้าเว็บ ---- */
.page-head { padding:var(--s5) 0 var(--s4); }
.page-head h1 { font-size:24px; line-height:1.35; margin-bottom:var(--s2); }
.page-head .sub { color:var(--ink-soft); font-size:15px; }

/* ---- การ์ด ---- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:var(--s5); margin-bottom:var(--s4);
}
.card h2 { font-size:18px; margin-bottom:var(--s4); }
.section-label {
  display:inline-block; background:var(--brand-soft); color:var(--brand-dark);
  font-size:14px; font-weight:700; border-radius:var(--r);
  padding:var(--s1) var(--s3); margin-bottom:var(--s3);
}

/* ---- ฟอร์ม ---- */
.field { margin-bottom:var(--s5); }
.field label { display:block; font-weight:700; margin-bottom:var(--s2); }
.field .hint { font-size:14px; color:var(--ink-soft); margin-bottom:var(--s2); }
.field .req { color:var(--danger); }
input[type=text], input[type=number], input[type=password], select, textarea {
  width:100%; min-height:48px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s3) var(--s4);
}
textarea { min-height:96px; resize:vertical; }
input:focus, select:focus, textarea:focus, button:focus {
  outline:2px solid var(--brand); outline-offset:1px;
}

/* แถวงานประจำวัน: ชื่องาน + นาที */
.task-row { display:flex; gap:var(--s2); margin-bottom:var(--s2); }
.task-row .t-name { flex:1; }
.task-row .t-min { width:104px; }

/* ---- ปุ่ม ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:var(--s3) var(--s5); font:inherit; font-size:16px;
  font-weight:700; border:none; border-radius:var(--r); cursor:pointer;
  background:var(--brand); color:#fff; text-decoration:none;
}
.btn:hover { background:var(--brand-dark); }
.btn:active { transform:translateY(1px); }
.btn-block { width:100%; }
.btn-ghost { background:var(--card); color:var(--brand); border:1px solid var(--line); }
.btn-ghost:hover { background:var(--brand-soft); }
.btn[disabled] { opacity:.5; cursor:default; }

/* ---- ข้อความสถานะ ---- */
.flash { border-radius:var(--r); padding:var(--s3) var(--s4); margin-bottom:var(--s4); font-weight:700; }
.flash-ok { background:#f0fdf4; color:var(--ok); border:1px solid #bbf7d0; }
.flash-error { background:#fef2f2; color:var(--danger); border:1px solid #fecaca; }
.empty { color:var(--ink-soft); text-align:center; padding:var(--s5) var(--s4); }
.loading { color:var(--ink-soft); }
.loading::after { content:'…'; animation:dots 1.2s infinite; }
@keyframes dots { 50% { opacity:.3; } }

/* ---- dashboard ---- */
.dash-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; padding:var(--s5) 0 var(--s4); }
.dash-top h1 { font-size:22px; }
.dash-top select { width:auto; min-width:180px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-bottom:var(--s4); }
@media (max-width:520px){ .stat-grid { grid-template-columns:1fr; } }
.stat-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:var(--s5); }
.stat-card .num { font-size:32px; font-weight:800; color:var(--brand); line-height:1.2; }
.stat-card .lbl { color:var(--ink-soft); font-size:14px; }

/* กราฟแท่งแนวนอน */
.bar-row { margin-bottom:var(--s3); }
.bar-row .bar-label { display:flex; justify-content:space-between; gap:var(--s2); font-size:15px; margin-bottom:var(--s1); }
.bar-row .bar-val { color:var(--ink-soft); white-space:nowrap; }
.bar-track { background:var(--brand-soft); border-radius:6px; height:20px; overflow:hidden; }
.bar-fill { background:var(--brand); height:100%; border-radius:6px; min-width:3px; }
.bar-fill.alt { background:var(--ok); }

/* อันดับ */
.rank-item { display:flex; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.rank-item:last-child { border-bottom:none; }
.rank-no {
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.rank-item .rank-note { font-size:14px; color:var(--ink-soft); }
.rank-score { margin-left:auto; flex:none; font-weight:800; color:var(--brand-dark); }

/* รายการคำตอบล่าสุด */
.resp-item { border-bottom:1px solid var(--line); }
.resp-item:last-child { border-bottom:none; }
.resp-item summary {
  list-style:none; cursor:pointer; padding:var(--s3) 0;
  display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline;
}
.resp-item summary::-webkit-details-marker { display:none; }
.resp-item summary .who { font-weight:700; }
.resp-item summary .when { color:var(--ink-soft); font-size:14px; white-space:nowrap; }
.resp-detail { padding:0 0 var(--s4); }
.resp-detail dt { font-weight:700; font-size:14px; color:var(--ink-soft); margin-top:var(--s3); }
.resp-detail dd { margin:0; white-space:pre-wrap; }

.ai-summary { white-space:pre-wrap; margin-bottom:var(--s4); }
.muted { color:var(--ink-soft); font-size:14px; }
.footer-note { text-align:center; color:var(--ink-soft); font-size:14px; padding:var(--s5) 0 var(--s8); }