/* =========================
   EVT Time — Base Styles
   Mobile-first, clean, dark-mode friendly
   ========================= */

/* 1) CSS Variables */
:root{
  --bg: #ffffff;
  --fg: #111827;          /* gray-900 */
  --muted: #6b7280;       /* gray-500 */
  --brand: #2563eb;       /* blue-600 */
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --ok: #16a34a;
  --warn: #f59e0b;
  --err: #dc2626;
  --card: #ffffff;
  --border: #e5e7eb;      /* gray-200 */
  --shadow: 0 4px 20px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f17;
    --fg: #e5e7eb;        /* gray-200 */
    --muted: #9ca3af;     /* gray-400 */
    --brand: #60a5fa;     /* blue-400 */
    --brand-600: #3b82f6;
    --brand-700: #2563eb;
    --card: #0f1520;
    --border: #1f2937;    /* gray-800 */
    --shadow: 0 8px 24px rgba(0,0,0,.35);
  }
}

/* 2) Reset-ish */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 3) Layout */
main{
  max-width: 880px;
  padding: 20px clamp(16px, 4vw, 32px);
  margin: 0 auto;
}

h1,h2,h3{ line-height:1.25; margin:0 0 .6rem; }
h1{ font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; }
h2{ font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; }
p{ margin: .25rem 0 .75rem; color: var(--muted); }

/* 4) Cards / Panels */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.grid{
  display: grid;
  gap: 12px;
}
@media (min-width: 720px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
}

/* 5) Buttons */
.btn{
  appearance: none;
  border: 1px solid transparent;
  background: var(--brand-600);
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
}
.btn:hover{ background: var(--brand-700); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.outline{
  background: transparent; color: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}
.btn.ghost{
  background: transparent; color: var(--fg);
  border-color: var(--border);
}

/* 6) Forms */
input,select,textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  outline: none;
}
input:focus,select:focus,textarea:focus{
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* 7) Status text */
#status{
  font-weight:700;
  margin: .25rem 0 .5rem;
  color: var(--muted);
}
.status-ok{ color: var(--ok); }
.status-warn{ color: var(--warn); }
.status-err{ color: var(--err); }

/* 8) Pre / code */
pre{
  overflow:auto;
  border:1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--card) 92%, var(--fg));
}

/* 9) Util */
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:1rem; }
.center{ display:flex; align-items:center; justify-content:center; }

/* 10) Modal (เตรียมไว้สำหรับ confirm check-in/out) */
.modal{
  position: fixed; inset:0;
  display:none;
  background: rgba(0,0,0,.55);
  z-index: 50;
}
.modal.open{ display:flex; align-items:center; justify-content:center; }
.modal .sheet{
  width: min(96vw, 480px);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
}

/* 11) Toast (เผื่อแจ้งเตือนสั้น ๆ) */
.toast{
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--fg); color: var(--bg);
  padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  font-weight: 600;
}