/* ฟอนต์/สี/พื้นฐาน */
:root{
  --bg:#f8fafc;
  --text:#1e293b;
  --muted:#64748b;
  --primary:#16a34a;
  --primary-600:#15803d;
  --card:#ffffff;
  --border:#e2e8f0;
}

*{ box-sizing:border-box; }

html { height:100%; }

body{
  min-height:100vh;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Prompt', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.45;

  /* กันไม่ให้เนื้อหาโดน footer fixed ทับ */
  padding-bottom:56px; 
}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

/* Header / Nav */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.site-header .brand{
  font-weight:600;
  font-size:20px;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav a{
  color:var(--text); text-decoration:none; margin-left:12px;
}
.nav a:hover{ text-decoration:underline; }

/* Main */
.site-main{ 
  padding:24px 16px; 
}

/* Card/Table */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  padding:16px;
}
.table{
  width:100%; border-collapse:collapse; background:#fff;
}
.table th,.table td{
  padding:10px; border-bottom:1px solid var(--border); text-align:left;
}
.table thead th{
  background:var(--primary); color:#fff; position:sticky; top:0;
}
.tr-today{ background:#dbfceb; }

/* Form / Input / Button */
.form-label{
  display:block;
  margin-bottom:6px;
  font-weight:500;
}

.form-control,
input[type="text"], input[type="password"], input[type="date"],
input[type="time"], input[type="number"], input[type="url"],
select, textarea{
  width:100%;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  font:inherit;
  background:#fff;
}

.btn{
  display:inline-block; padding:8px 12px; border-radius:8px;
  text-decoration:none; border:1px solid transparent; cursor:pointer; font:inherit;
}
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-600); }
.btn-outline{ background:#fff; border-color:var(--border); color:var(--text); }
.btn-danger{ background:#e11d48; color:#fff; }
.btn-info{ background:#0ea5e9; color:#fff; }

/* Alert/ข้อความ */
.alert{
  padding:12px;
  border-radius:8px;
  margin-bottom:12px;
}
.alert-danger{ background:#fee2e2; border:1px solid #fecaca; color:#b91c1c; }
.alert-success{ background:#dcfce7; border:1px solid #86efac; color:#166534; }

/* Footer (Fixed) */
.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background:#f3f4f6; /* หรือ #e5e7eb */
  color:#1e293b; /* ดำ/เทาเข้ม */
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:0 12px;
  border-top:1px solid var(--border);
}

/* Utilities */
.text-center{ text-align:center; }
.text-muted{ color:var(--muted); }
.mb-2{ margin-bottom:8px; }
.mb-3{ margin-bottom:12px; }
.mt-2{ margin-top:8px; }
.mt-3{ margin-top:12px; }

/* Responsive */
@media (max-width:768px){
  .site-header .nav{ display:flex; gap:8px; flex-wrap:wrap; }
  .table th,.table td{ font-size:14px; }
}