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

:root{
  --navy:#1B3A5C;
  --navy-dark:#122843;
  --navy-soft:#274A6E;
  --gold:#C9A227;
  --gold-soft:#E4C566;
  --cream:#F7F5F1;
  --card:#FFFFFF;
  --ink:#1F2937;
  --slate:#64748B;
  --border:#E7E2D6;
  --not-started:#94A3B8;
  --in-progress:#FFC107;
  --completed:#2F7D5A;
  --danger:#B4433A;
  --font-body:'Noto Sans Thai', sans-serif;
  --font-display:'Noto Serif Thai', serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--cream); font-family:var(--font-body); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); color:var(--navy); margin:0; }

.container{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px; flex-shrink:0; background:var(--navy-dark); color:#fff;
  display:flex; flex-direction:column;
}
.sidebar .brand{ padding:22px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar .brand .eyebrow{ font-family:var(--font-mono); font-size:10.5px; color:var(--gold-soft); letter-spacing:.12em; }
.sidebar .brand .name{ font-family:var(--font-display); font-size:16px; margin-top:4px; line-height:1.4; }
.sidebar nav{ padding:14px 10px; flex:1; }
.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:#E4E9EF; font-weight:500; font-size:14px; margin-bottom:4px; border-left:3px solid transparent;
}
.sidebar nav a:hover{ background:rgba(255,255,255,.08); }
.sidebar nav a.active{
  background:rgba(201,162,39,.18); color:var(--gold-soft); font-weight:700; border-left:3px solid var(--gold);
}
.sidebar .user-box{ padding:14px; border-top:1px solid rgba(255,255,255,.1); }
.sidebar .user-box .uname{ font-size:12.5px; color:#B9C6D4; }
.sidebar .user-box .urole{ font-size:11.5px; color:#7F93A8; margin-bottom:10px; }
.sidebar .user-box button{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:none; color:#fff;
  border-radius:8px; padding:8px 10px; font-size:13px; cursor:pointer; width:100%; font-family:var(--font-body);
}

/* ---------- Main ---------- */
.main{ flex:1; padding:28px; max-width:1300px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.page-head h2{ font-size:22px; }
.page-head p{ font-size:13px; color:var(--slate); margin:4px 0 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:none; border-radius:8px; padding:10px 16px;
  font-weight:600; font-size:14px; cursor:pointer; font-family:var(--font-body); transition:filter .15s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-outline{ background:#fff; border:1px solid var(--border); color:var(--slate); }
.btn-danger-ghost{ background:none; border:none; color:var(--danger); cursor:pointer; }
.btn-icon{ background:none; border:none; cursor:pointer; color:var(--navy); }

/* ---------- Cards / KPI ---------- */
.kpi-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.kpi-card{
  background:var(--card); border-radius:12px; padding:18px 20px; flex:1 1 180px;
  border:1px solid var(--border); border-top:3px solid var(--gold);
}
.kpi-card .label{ font-size:12.5px; color:var(--slate); font-weight:600; }
.kpi-card .value{ font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--navy); margin-top:6px; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; }

/* ---------- Table ---------- */
.table-wrap{ background:var(--card); border-radius:12px; border:1px solid var(--border); overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:820px; }
thead tr{ background:var(--cream); text-align:left; }
th{ padding:11px 14px; font-weight:700; color:var(--navy); font-size:12.5px; border-bottom:1px solid var(--border); }
td{ padding:11px 14px; border-bottom:1px solid var(--border); }
tbody tr:hover{ background:#FBFAF7; }
.mono{ font-family:var(--font-mono); }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:999px; display:inline-block; }
.badge-stamp{
  padding:3px 12px; border:2px solid var(--completed); border-radius:4px; color:var(--completed);
  font-weight:700; font-size:11px; letter-spacing:.04em; transform:rotate(-3deg); font-family:var(--font-display);
  background:rgba(47,125,90,.05);
}

/* ---------- Forms ---------- */
.field{ display:block; margin-bottom:14px; }
.field .lbl{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.field .req{ color:var(--danger); }
.input, select.input, textarea.input{
  width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--border);
  font-family:var(--font-body); font-size:14px; color:var(--ink); background:#fff;
}
.input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.row-2{ display:flex; gap:12px; }
.row-2 > *{ flex:1; }
.status-toggle{ display:flex; gap:8px; flex-wrap:wrap; }
.status-toggle label{
  padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600;
  border:1.5px solid var(--border); color:var(--slate); background:#fff;
}
.status-toggle input{ display:none; }
.status-toggle input:checked + span{ font-weight:700; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
.filters .input{ min-width:140px; width:auto; font-size:13px; padding:8px 10px; }
.search-wrap{ position:relative; flex:1 1 200px; }
.search-wrap .input{ padding-left:32px; }
.search-wrap svg{ position:absolute; left:10px; top:10px; color:var(--slate); }

.err-msg{ color:var(--danger); font-size:13px; margin:6px 0 12px; }
.hint-box{
  margin-top:22px; font-size:12px; color:var(--slate); background:#fff; border:1px solid var(--border);
  border-radius:8px; padding:12px; line-height:1.7;
}

/* ---------- Auth pages ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.auth-box{
  display:flex; flex-wrap:wrap; width:900px; max-width:100%; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 40px rgba(18,40,67,0.15);
}
.auth-left{
  flex:1 1 300px; background:linear-gradient(160deg, var(--navy-dark), var(--navy)); color:#fff;
  padding:48px 40px; position:relative; overflow:hidden; min-height:320px;
}
.auth-left .stripe{
  position:absolute; top:0; left:0; right:0; height:6px;
  background:repeating-linear-gradient(115deg, var(--gold), var(--gold) 10px, var(--gold-soft) 10px, var(--gold-soft) 20px);
}
.auth-left .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; color:var(--gold-soft); margin-top:24px; }
.auth-left h1{ font-family:var(--font-display); font-size:32px; line-height:1.3; margin:14px 0 8px; color:#fff; }
.auth-left p{ color:#C9D6E4; font-size:14.5px; line-height:1.7; max-width:380px; }
.auth-right{
  flex:1 1 300px; background:var(--cream); padding:48px 40px; display:flex; flex-direction:column; justify-content:center;
}
.auth-right h2{ font-size:22px; margin-bottom:4px; }
.auth-right > p{ font-size:13px; color:var(--slate); margin-bottom:24px; }

/* ---------- Modal-ish form page ---------- */
.form-page{ max-width:600px; }

/* ---------- Utility ---------- */
.flex-between{ display:flex; justify-content:space-between; align-items:center; }
.mt-8{ margin-top:8px; } .mb-0{ margin-bottom:0; }
.charts-row{ display:flex; gap:16px; flex-wrap:wrap; }
.chart-card{ flex:1 1 320px; }
.chart-card.wide{ flex:2 1 380px; }
.chart-card .title{ font-weight:700; color:var(--navy); font-size:14.5px; margin-bottom:12px; }

@media (max-width:720px){
  .container{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; }
  .sidebar nav{ display:flex; padding:8px; }
  .sidebar .user-box{ display:none; }
  .main{ padding:16px; }
}