@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap');

/* ปรับสีทั้งเว็บได้ที่นี่ */
:root {
  --bg:#f4f1ea; --card:#fffdf8; --ink:#22201c; --mute:#7a746a; --line:#d9d3c7;
  --accent:#c2410c; --accent-d:#9a3412; --free:#2f6b3f; --busy:#b3261e;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#191714; --card:#221f1b; --ink:#ece6da; --mute:#9a9385; --line:#39342d; --accent:#ea6a2e; --accent-d:#f08650; --free:#6fbf84; --busy:#f0776e; }
}
* { box-sizing:border-box; }
body { margin:0; font-family:'IBM Plex Sans Thai','Sarabun',sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; }
a { color:var(--accent); }

header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 24px; background:#22201c; color:#f4f1ea; border-bottom:4px solid var(--accent); }
header h1 { margin:0; font-size:1.2rem; font-weight:600; letter-spacing:.02em; flex:1; }
#hello { font-size:.9rem; color:#cfc8ba; }
header button { background:transparent; color:#f4f1ea; border:1px solid #6b655a; }
header button:hover { background:#f4f1ea; color:#22201c; }

main { max-width:920px; margin:28px auto 48px; padding:0 16px; }
.box { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:24px; margin-bottom:20px; }
h2 { margin:0 0 12px; font-size:1.05rem; font-weight:600; padding-left:10px; border-left:4px solid var(--accent); }
.box h2:not(:first-child) { margin-top:28px; }
h3 { font-weight:600; }
.mute { color:var(--mute); }

form { display:flex; flex-direction:column; gap:10px; max-width:380px; margin-top:12px; }
input, select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--bg); color:var(--ink); }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
input[type=date] { width:auto; margin:4px 0 8px; }

button { padding:10px 16px; border:0; border-radius:6px; font:inherit; font-weight:500; color:#fff; background:var(--accent); cursor:pointer; }
button:hover:not(:disabled) { background:var(--accent-d); }
button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { opacity:.4; cursor:not-allowed; }

/* แท็บ: แบบขีดเส้นใต้ */
.tabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:20px; border-bottom:1px solid var(--line); }
.tabs button { background:transparent; color:var(--mute); border-radius:0; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tabs button:hover:not(:disabled) { background:transparent; color:var(--ink); }
.tabs button.on { color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:12px; }

/* เครื่องซักผ้า */
.card { position:relative; display:flex; flex-direction:column; gap:10px; padding:16px; background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--free); border-radius:6px; }
.card.busy { border-left-color:var(--busy); }
.card h3 { margin:0; font-size:.98rem; }
.card::after { content:'● ว่าง'; position:absolute; top:16px; right:14px; font-size:.78rem; font-weight:500; color:var(--free); }
.card.busy::after { content:'● ใช้งานอยู่'; color:var(--busy); }
.card p { margin:0; color:var(--mute); font-size:.9rem; }
.card .t { color:var(--busy); font-weight:500; font-variant-numeric:tabular-nums; }

/* ปุ่มรอบจอง */
#slots .slot { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; text-align:left; font-weight:500; color:var(--ink); background:var(--card); border:1px solid var(--line); }
#slots .slot small { font-weight:400; color:var(--mute); }
#slots .slot:hover:not(:disabled) { background:var(--card); border-color:var(--ink); }
#slots .slot.mine { background:var(--accent); border-color:var(--accent); color:#fff; }
#slots .slot.mine small { color:#fff; }
#slots .slot.full { background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 6px,var(--line) 6px,var(--line) 7px); color:var(--mute); }

.item { padding:10px 0; border-bottom:1px solid var(--line); }
.item:last-child { border-bottom:0; }
.item p { margin:2px 0 0; }
.badge { display:inline-block; margin-left:6px; padding:0 8px; font-size:.75rem; border:1px solid currentColor; border-radius:4px; }
.badge.ok { color:var(--free); } .badge.no { color:var(--busy); }

table { width:100%; border-collapse:collapse; font-size:.86rem; margin-top:10px; }
th { text-align:left; padding:8px; color:var(--mute); font-weight:500; border-bottom:2px solid var(--ink); }
td { padding:8px; border-bottom:1px solid var(--line); }
td button, td select { width:auto; padding:5px 10px; font-size:.8rem; }
.inline { flex-direction:row; flex-wrap:wrap; max-width:none; }
.inline input { width:auto; flex:1; min-width:120px; }

#toast { position:fixed; left:20px; bottom:20px; max-width:calc(100% - 40px); padding:11px 18px; background:#22201c; color:#f4f1ea; border-left:4px solid var(--accent); border-radius:4px; transform:translateY(90px); transition:transform .25s; z-index:9; }
#toast.show { transform:translateY(0); }

@media (max-width:520px) { .grid { grid-template-columns:1fr 1fr; } .box { padding:18px; } }