/* theme.css — NORMS Platform Design System v1
   ระบบดีไซน์กลาง · ทุกหน้าโหลดไฟล์นี้ → หน้าตาเป็นเอกภาพ
   แก้สี/ฟอนต์/ระยะที่นี่ที่เดียว มีผลทั้งแพลตฟอร์ม */

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

:root{
  /* palette */
  --bg:#0a0c11; --bg-grad:#0d1017;
  --surface:#13161e; --surface-2:#191d27; --surface-3:#1f2430;
  --border:#232936; --border-2:#2d3442;
  --text:#e9ebef; --text-dim:#98a0ad; --text-mute:#646c7a;
  --accent:#f4a64d; --accent-soft:rgba(244,166,77,.14); --accent-dim:#c07f37;
  --up:#2ebd85; --up-soft:rgba(46,189,133,.14);
  --down:#e5484d; --down-soft:rgba(229,72,77,.14);
  --blue:#5b9dd9; --blue-soft:rgba(91,157,217,.14);
  /* 8px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px; --s7:40px;
  --r:10px; --r-lg:14px; --r-pill:99px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.22);
  --font:'Inter','Noto Sans Thai',-apple-system,'Sukhumvit Set',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --tap:.16s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:radial-gradient(120% 80% at 50% -10%,var(--bg-grad),var(--bg));
  background-attachment:fixed; color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.6;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .mut{color:var(--text-dim)} .accent{color:var(--accent)}

/* ── Top bar (แบรนด์ + เมนู) ── */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(10,12,17,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.topbar-inner{max-width:1180px; margin:0 auto; padding:0 var(--s5); display:flex; align-items:center; gap:var(--s5); height:56px}
.brand{display:flex; align-items:center; gap:var(--s3); font-weight:700; font-size:16px; letter-spacing:-.02em; white-space:nowrap}
.brand .logo{
  width:30px; height:30px; border-radius:8px; flex:none;
  background:linear-gradient(135deg,var(--accent),#e0612f);
  display:grid; place-items:center; font-size:17px;
  box-shadow:0 0 0 1px rgba(244,166,77,.3), 0 4px 14px rgba(244,166,77,.25);
}
.brand small{color:var(--text-mute); font-weight:500; font-size:11px; letter-spacing:.04em; text-transform:uppercase}
.nav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{
  padding:7px 13px; border-radius:8px; font-size:13px; font-weight:500;
  color:var(--text-dim); white-space:nowrap; transition:var(--tap); display:flex; align-items:center; gap:6px;
}
.nav a:hover{color:var(--text); background:var(--surface-2)}
.nav a.on{color:var(--accent); background:var(--accent-soft)}

/* ── Layout ── */
.container{max-width:1180px; margin:0 auto; padding:var(--s6) var(--s5) var(--s7)}
.page-head{margin-bottom:var(--s5)}
.page-head h1{font-size:24px; font-weight:700; letter-spacing:-.025em; margin:0 0 var(--s1)}
.page-head .desc{color:var(--text-dim); font-size:13.5px}
.section{margin-top:var(--s6)}
.section-title{
  display:flex; align-items:center; gap:var(--s2); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); margin-bottom:var(--s3);
}
.section-title::after{content:''; flex:1; height:1px; background:var(--border)}

/* ── Cards ── */
.grid{display:grid; gap:var(--s3)}
.grid.cols{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface) 60%,#11141b);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s4) var(--s5);
  transition:var(--tap);
}
.card.hover:hover{border-color:var(--border-2); transform:translateY(-1px); box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3); font-size:14px; font-weight:600}
.card-head .more{font-size:12px; font-weight:500; color:var(--blue)}
.card-head .more:hover{text-decoration:underline}

/* ── Stat rows (label : value) ── */
.stat{display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid rgba(35,41,54,.6)}
.stat:last-child{border-bottom:0}
.stat .k{color:var(--text-dim)}
.stat .v{font-weight:600; font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ── KPI big numbers ── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--s3)}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:var(--s4); text-align:center}
.kpi .label{color:var(--text-mute); font-size:11.5px; font-weight:500; margin-bottom:var(--s1)}
.kpi .num{font-size:23px; font-weight:700; font-family:var(--mono); letter-spacing:-.02em}

/* ── Badges / pills ── */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; line-height:1.4}
.badge.up{background:var(--up-soft); color:var(--up)}
.badge.down{background:var(--down-soft); color:var(--down)}
.badge.warn{background:var(--accent-soft); color:var(--accent)}
.badge.neutral{background:var(--surface-3); color:var(--text-dim)}
.dot{width:7px; height:7px; border-radius:50%; flex:none}

/* ── Alert banner ── */
.alert{display:flex; align-items:flex-start; gap:var(--s3); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r); padding:11px var(--s4); margin-bottom:var(--s2); font-size:13.5px}
.alert.danger{border-left-color:var(--down); background:linear-gradient(90deg,rgba(229,72,77,.07),var(--surface))}
.alert.ok{border-left-color:var(--up)}

/* ── Tables ── */
.data-table{width:100%; border-collapse:collapse; font-size:13px}
.data-table th{text-align:left; color:var(--text-mute); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--border)}
.data-table td{padding:9px 10px; border-bottom:1px solid rgba(35,41,54,.5); font-variant-numeric:tabular-nums}
.data-table tr:hover td{background:var(--surface)}
.data-table .num{font-family:var(--mono)}

/* ── Gauge / bar ── */
.gauge{background:#0c0f15; border-radius:var(--r-pill); height:8px; overflow:hidden}
.gauge i{display:block; height:100%; border-radius:var(--r-pill); transition:width .5s ease}

/* ── Rooms grid (ลิงก์ห้อง) ── */
.rooms{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s2)}
.room{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:13px var(--s4); transition:var(--tap)}
.room:hover{border-color:var(--accent); background:var(--surface-2); transform:translateY(-1px)}
.room .t{font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px}
.room .d{color:var(--text-mute); font-size:11.5px; margin-top:3px}
.room.soon{opacity:.5} .room.soon:hover{transform:none; border-color:var(--border); cursor:default}

/* ── Footer ── */
.foot{color:var(--text-mute); font-size:12px; margin-top:var(--s7); border-top:1px solid var(--border); padding-top:var(--s4); line-height:1.8}

@media(max-width:680px){
  .container{padding:var(--s5) var(--s4) var(--s6)}
  .topbar-inner{padding:0 var(--s4); gap:var(--s3)}
  .brand small{display:none}
  .page-head h1{font-size:21px}
}