/* =====================================================================
   ผลเอย Ops Hub — ชั้นดีไซน์พรีเมี่ยม มินิมอล สว่าง สะอาด
   คงสีของร้าน (เชอร์รี่ + ครีม + ทอง) เพิ่มมิติด้วยเงาและระยะห่าง
   ===================================================================== */

:root{
  /* โทนสว่างสะอาด — ใช้ทุกเครื่อง ทุกเวลา */
  --bg:#FFFDFA;
  --surface:#FFFFFF;
  --surface-2:#FBF5EE;
  --surface-3:#F5E9DC;
  --border:#EFE2D3;
  --hair:#F1E6DA;
  --text:#2E1A20;
  --text-muted:#8C7076;
  --accent:#B51F45;
  --accent-strong:#8E1636;
  --accent-soft:#FDEFF3;
  --gold:#D9B37C;

  --ring: rgba(181,31,69,.16);
  --glow: 0 14px 30px -18px rgba(181,31,69,.55);
  --lift-1: 0 1px 2px rgba(46,26,32,.04), 0 2px 8px -4px rgba(46,26,32,.08);
  --lift-2: 0 1px 3px rgba(46,26,32,.05), 0 12px 28px -18px rgba(46,26,32,.22);
  --lift-3: 0 2px 6px rgba(46,26,32,.06), 0 26px 56px -30px rgba(46,26,32,.28);
  --ease: cubic-bezier(.2,.7,.3,1);
  --radius-s:10px; --radius-m:16px; --radius-l:20px;
}

/* ---------- พื้นหลัง: สว่าง สะอาด มีมิติบาง ๆ ---------- */
body{
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(181,31,69,.05), transparent 60%),
    radial-gradient(760px 430px at 96% 0%, rgba(217,179,124,.10), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- แถบบน ---------- */
.topbar{
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 1px 0 rgba(46,26,32,.03);
}
.topbar .logo{ filter: drop-shadow(0 3px 8px rgba(46,26,32,.14)); }
.brand h1{ letter-spacing:.2px; }
.userchip{ border:1px solid var(--hair); background:var(--surface); box-shadow:var(--lift-1); }

/* ---------- เมนูแถวเดียว แบ่งหมวดด้วยเส้นคั่น ---------- */
.brand-row{ padding-block:8px !important; }
.brand h1{ font-size:19px !important; margin:0; }
.brand .tag{ font-size:11.5px; }
.topbar .logo{ height:30px !important; width:auto; }
.userchip{ font-size:12.5px; padding:5px 10px !important; }
.userchip button{ font-size:12px; padding:4px 10px; }

.navwrap{ padding-bottom:8px; }
.navwrap .tabs{
  display:flex; align-items:center; gap:6px;
  overflow-x:auto; padding:1px 2px 3px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.navwrap .tabs::-webkit-scrollbar{ display:none; }
.navsep{
  flex:0 0 auto; white-space:nowrap;
  font-size:10px; font-weight:700; letter-spacing:.5px;
  color:var(--text-muted); text-transform:uppercase;
  padding-left:11px; margin-left:4px; border-left:1px solid var(--border);
}
.navsep.first{ border-left:none; padding-left:0; margin-left:0; }
.tab{
  flex:0 0 auto;
  border:1px solid var(--hair); background:var(--surface);
  border-radius:999px; padding:7px 14px;
  font-family:'Sarabun',sans-serif; font-size:13.5px; font-weight:600; color:var(--text);
  cursor:pointer; white-space:nowrap;
  transition: background .16s var(--ease), color .16s var(--ease),
              box-shadow .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover{ transform:translateY(-1px); box-shadow:var(--lift-1); border-color:var(--border); }
.tab[aria-selected="true"]{
  background: linear-gradient(180deg, #C42A51, var(--accent-strong));
  color:#fff; border-color:transparent;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- บล็อกหมวดในหน้า ---------- */
.sect{ margin-top:26px; }
.sect-h{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:11px;
  padding-bottom:9px; border-bottom:1px solid var(--hair);
}
.sect-h h3, .sect-h h4{ margin:0; letter-spacing:-.2px; }
.sub{ color:var(--text-muted); font-size:12.5px; }
.mono{ font-family:'JetBrains Mono',monospace; }

.pg-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.pg-head h2{ margin:0; letter-spacing:-.3px; }
.pg-head .lede{ margin:5px 0 0; }

/* ---------- การ์ด ---------- */
.card{
  border:1px solid var(--hair); border-radius:var(--radius-l);
  background:var(--surface); box-shadow:var(--lift-2);
  padding:18px; position:relative; overflow:hidden;
  transition: box-shadow .2s var(--ease);
}
.card:hover{ box-shadow:var(--lift-3); }

/* ---------- ตัวเลขสถิติ ---------- */
.stat-row{ display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.stat{
  border:1px solid var(--hair); border-radius:var(--radius-m);
  background:var(--surface); box-shadow:var(--lift-1);
  padding:14px 15px; position:relative; overflow:hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.stat::after{
  content:""; position:absolute; right:-30px; top:-30px; width:84px; height:84px;
  border-radius:50%; background:radial-gradient(circle at 32% 32%, rgba(217,179,124,.28), transparent 70%);
  pointer-events:none;
}
.stat:hover{ transform:translateY(-2px); box-shadow:var(--lift-2); }
.stat .k{ font-size:12.5px; color:var(--text-muted); font-weight:600; }
.stat .v{ font-family:'JetBrains Mono',monospace; font-size:27px; font-weight:700; letter-spacing:-1px; margin-top:3px; }

/* ---------- ปุ่ม ---------- */
.btn, button.btn{
  border:none; border-radius:13px; cursor:pointer;
  padding:11px 18px; font-family:'Sarabun',sans-serif; font-size:15px; font-weight:700;
  color:#fff; background:linear-gradient(180deg,#C42A51,var(--accent-strong));
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.26);
  transition: transform .13s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); filter:saturate(110%); }
.btn:active{ transform:translateY(1px) scale(.995); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.btn:focus-visible, .tab:focus-visible, .chip:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; box-shadow:0 0 0 4px var(--ring);
}

/* ---------- ตาราง ---------- */
.tbl-wrap{
  border:1px solid var(--hair); border-radius:var(--radius-m);
  box-shadow:var(--lift-1); overflow:auto; background:var(--surface);
}
table{ width:100%; border-collapse:collapse; font-size:14px; }
table th, table td{ padding:10px 13px; text-align:left; border-bottom:1px solid var(--hair); white-space:nowrap; }
table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-2); color:var(--text-muted);
  font-size:12px; font-weight:700; letter-spacing:.3px;
  border-bottom:1px solid var(--border);
}
table tbody tr:last-child td{ border-bottom:none; }
table tbody tr{ transition:background .14s var(--ease); }
table tbody tr:hover{ background:var(--accent-soft); }
table .num{ text-align:right; }
tr.rowbad{ background:#FDF0EC; }
tr.rowbad:hover{ background:#FBE5DF; }

/* ---------- ช่องกรอก ---------- */
input, select, textarea{
  border-radius:12px !important; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
  font-family:'Sarabun',sans-serif;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); }
.fld{ display:block; }
.fld > span{ display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:5px; }
.fld input, .fld select, .fld textarea{ width:100%; padding:11px 13px; font-size:15px; }
.grid2{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* ---------- หน้าล็อกอิน ---------- */
#login[hidden]{ display:none !important; }
#login:not([hidden]){
  min-height:100dvh; display:grid; place-items:center; padding:24px 16px;
  background:
    radial-gradient(700px 480px at 50% -12%, rgba(181,31,69,.12), transparent 62%),
    var(--bg);
}
.login-card{
  border-radius:26px; border:1px solid var(--hair);
  background:var(--surface); box-shadow:var(--lift-3);
  padding:30px 26px; max-width:390px; width:100%;
  position:relative; overflow:hidden;
}
.login-card::after{
  content:""; position:absolute; left:-40%; top:-70%; width:180%; height:130%;
  background:radial-gradient(closest-side, rgba(217,179,124,.22), transparent);
  pointer-events:none;
}
.login-card > *{ position:relative; z-index:1; }
.login-card .logo{ filter:drop-shadow(0 6px 16px rgba(46,26,32,.16)); }

/* =====================================================================
   ส่วนประกอบของฟีเจอร์
   ===================================================================== */

/* นาฬิกาลงเวลา */
.clock-hero{
  border-radius:24px; padding:26px 22px; text-align:center;
  border:1px solid var(--hair);
  background:
    radial-gradient(480px 240px at 50% -35%, rgba(217,179,124,.26), transparent 70%),
    var(--surface);
  box-shadow:var(--lift-3);
}
.clock-now{
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:clamp(42px,13vw,64px); line-height:1;
  letter-spacing:-2px; color:var(--accent-strong);
}
.clock-date{ margin-top:6px; color:var(--text-muted); font-weight:600; font-size:14px; }
.clock-status{ margin-top:15px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

.bigbtn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:16px; padding:19px 18px;
  border:none; border-radius:18px; cursor:pointer;
  font-family:'Sarabun',sans-serif; font-size:18px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#C42A51,var(--accent-strong));
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .13s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.bigbtn:hover{ transform:translateY(-2px); }
.bigbtn:active{ transform:translateY(1px) scale(.995); }
.bigbtn[disabled]{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:var(--lift-1); }
.bigbtn.out{ background:linear-gradient(180deg,#6B5058,#4A353C); }
.bigbtn .em{ font-size:22px; line-height:1; }

/* ป้ายสถานะ */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px;
  font-size:12.5px; font-weight:700; line-height:1.35;
  border:1px solid transparent; white-space:nowrap;
}
.pill.ok{ background:#E8F5EC; color:#2F7A4C; border-color:#CBE7D6; }
.pill.warn{ background:#FCF2DF; color:#9A6410; border-color:#F0DEBB; }
.pill.bad{ background:#FCEBE7; color:#B33A28; border-color:#F5D6CE; }
.pill.mute{ background:var(--surface-2); color:var(--text-muted); border-color:var(--hair); }
.pill.gold{ background:#FBF0DC; color:#8A6420; border-color:#EEDCB8; }

/* รูปลงเวลา */
.shot{ width:100%; border-radius:16px; border:1px solid var(--hair); box-shadow:var(--lift-2); display:block; object-fit:cover; cursor:zoom-in; }
.shot-sm{ width:46px; height:46px; border-radius:11px; object-fit:cover; border:1px solid var(--hair); box-shadow:var(--lift-1); cursor:zoom-in; margin-right:5px; vertical-align:middle; }
.shot-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.shot-box{ position:relative; }
.shot-box .cap{
  position:absolute; left:10px; bottom:10px;
  padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(4px);
}
.lightbox{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:rgba(30,16,20,.8); backdrop-filter:blur(6px); padding:20px; cursor:zoom-out;
}
.lightbox img{ max-width:min(620px,92vw); max-height:86dvh; border-radius:18px; box-shadow:var(--lift-3); }

/* การ์ดคน */
.people{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
.person{
  border:1px solid var(--hair); border-radius:18px; padding:15px;
  background:var(--surface); box-shadow:var(--lift-1);
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
.person:hover{ box-shadow:var(--lift-2); transform:translateY(-2px); }
.person .top{ display:flex; align-items:center; gap:11px; }
.person .nm{ font-weight:700; }
.person .ro{ color:var(--text-muted); font-size:12.5px; }
.avatar{
  width:42px; height:42px; flex:0 0 42px; border-radius:13px;
  display:grid; place-items:center; font-weight:700; font-size:16px; color:#fff;
  background:linear-gradient(145deg,#C42A51,var(--accent-strong));
  box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.22);
}

/* วงคะแนน */
.score-ring{
  --pct:100; --ring-col:var(--good,#3F8F5F);
  width:64px; height:64px; flex:0 0 64px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--ring-col) calc(var(--pct)*1%), #EFE4E7 0);
  box-shadow:var(--lift-1);
}
.score-ring::after{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface); box-shadow:inset 0 1px 3px rgba(46,26,32,.08); }
.score-ring b{ position:relative; z-index:1; font-family:'JetBrains Mono',monospace; font-size:18px; letter-spacing:-1px; }
.score-ring.big{ width:120px; height:120px; flex:0 0 120px; }
.score-ring.big::after{ inset:10px; }
.score-ring.big b{ font-size:34px; }

/* ชิป */
.chipbar{ display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 14px; }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--hair); background:var(--surface);
  font-family:'Sarabun',sans-serif; font-size:13.5px; font-weight:600; color:var(--text);
  box-shadow:var(--lift-1);
  transition:transform .13s var(--ease), background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.chip:hover{ transform:translateY(-1px); box-shadow:var(--lift-2); }
.chip.minus:hover{ background:#FCEBE7; color:#B33A28; border-color:#F0CDC4; }
.chip.plus:hover{ background:#E8F5EC; color:#2F7A4C; border-color:#CAE6D5; }
.chip.on{ background:linear-gradient(180deg,#C42A51,var(--accent-strong)); color:#fff; border-color:transparent; box-shadow:var(--glow); }
.chip[disabled]{ opacity:.5; cursor:not-allowed; }

/* ตารางกะแบบกริด */
.sched{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); }
.day{ border:1px solid var(--hair); border-radius:16px; padding:12px; background:var(--surface); box-shadow:var(--lift-1); }
.day.today{ border-color:rgba(181,31,69,.4); box-shadow:var(--glow); }
.day .dh{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.day .dn{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:20px; letter-spacing:-1px; }
.day .dw{ color:var(--text-muted); font-size:12px; font-weight:600; }
.day ul{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.day li{ display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.day li .t{ font-family:'JetBrains Mono',monospace; color:var(--text-muted); font-size:12px; }
.day li.off .n{ color:var(--text-muted); text-decoration:line-through; }

/* แถวรายการ */
.rows{ display:grid; gap:9px; }
.rowcard{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  border:1px solid var(--hair); border-radius:15px; padding:12px 14px;
  background:var(--surface); box-shadow:var(--lift-1);
}
.rowcard.hot{ border-color:rgba(181,31,69,.35); background:linear-gradient(180deg,#FFF7F9,var(--surface)); }
.rowcard .grow{ flex:1 1 170px; min-width:0; }
.rowcard .nm{ font-weight:700; }

/* กล่องข้อความ */
.note{
  border-radius:15px; padding:13px 15px; border:1px solid var(--hair);
  background:var(--surface-2); font-size:14px; box-shadow:var(--lift-1);
}
.note.good{ background:#EDF7F1; border-color:#CFE8DA; }
.note.warn{ background:#FDF5E6; border-color:#F0E0C0; }

/* การ์ดกติกา KPI */
.grid-cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); }
.rulecard{ border:1px solid var(--hair); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--lift-1); }
.rulecard .rh{ padding:11px 15px; font-weight:700; font-size:14.5px; border-bottom:1px solid var(--hair); }
.rulecard.good .rh{ background:#EDF7F1; color:#2F7A4C; }
.rulecard.warn .rh{ background:#FDF5E6; color:#9A6410; }
.rulecard.bad  .rh{ background:#FCEBE7; color:#B33A28; }
.rulecard ul{ list-style:none; margin:0; padding:8px 15px 13px; display:grid; gap:7px; }
.rulecard li{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; align-items:baseline; }
.rulecard li b{ flex:0 0 auto; font-size:13px; }
.rulecard.good li b{ color:#2F7A4C; }
.rulecard.warn li b{ color:#9A6410; }
.rulecard.bad  li b{ color:#B33A28; }

/* การ์ดสูตร */
.menugrid{ display:grid; gap:13px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.menucard{ border:1px solid var(--hair); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--lift-1); transition:box-shadow .18s var(--ease), transform .18s var(--ease); }
.menucard:hover{ box-shadow:var(--lift-2); transform:translateY(-2px); }
.menucard .mh{ padding:12px 15px; border-bottom:1px solid var(--hair); background:var(--surface-2); display:flex; flex-direction:column; gap:2px; }
.menucard .mh b{ font-size:15px; }
table.rcp{ font-size:13.5px; }
table.rcp th, table.rcp td{ padding:8px 15px; }
table.rcp thead th{ background:transparent; border-bottom:1px solid var(--hair); }
table.rcp .u{ color:var(--text-muted); font-size:11px; margin-left:3px; font-family:'Sarabun',sans-serif; }

/* แบบทดสอบ */
.qz{ border:1px solid var(--hair); border-radius:15px; padding:14px; background:var(--surface); box-shadow:var(--lift-1); }
.qz-q{ font-weight:600; font-size:14.5px; margin-bottom:10px; display:flex; gap:9px; align-items:flex-start; }
.qz-n{
  flex:0 0 24px; width:24px; height:24px; border-radius:8px;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--accent-soft); color:var(--accent-strong);
}

/* แถบชวนติดตั้งแอป */
.installbar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:80;
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:13px 15px; border-radius:18px;
  border:1px solid var(--hair); background:var(--surface);
  box-shadow:var(--lift-3);
  animation:ibIn .35s var(--ease);
}
@keyframes ibIn{ from{ transform:translateY(18px); opacity:0 } to{ transform:none; opacity:1 } }
.installbar .ib-t{ flex:1 1 190px; min-width:0; display:grid; gap:2px; }
.installbar .ib-t b{ font-size:14.5px; }
.installbar .ib-t span{ font-size:12.5px; color:var(--text-muted); }
.installbar .btn{ padding:9px 16px; font-size:14px; }
.installbar .chip{ padding:7px 12px; font-size:12.5px; box-shadow:none; }

/* มือถือ */
@media (max-width:620px){
  .shot-pair{ grid-template-columns:1fr; }
  .clock-hero{ padding:22px 15px; }
  .sched{ grid-template-columns:1fr 1fr; }
  .navwrap{ padding-bottom:6px; }
  .navsep{ font-size:9px; padding-left:8px; margin-left:2px; }
  .tab{ padding:6px 12px; font-size:13px; }
  .brand h1{ font-size:17px !important; }
  .topbar .logo{ height:26px !important; }
  .pg-head h2{ font-size:22px; }
  .stat .v{ font-size:23px; }
  table th, table td{ padding:9px 11px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}