/* =====================================================================
   The WOW Clinic — Desktop Web App Theme (app.css)
   สไตล์โปรแกรมคลินิก/POS · sidebar พับได้ · การ์ดเมนูแยกสี · rose gold
   ===================================================================== */

:root {
  --bg:          #F4F1EC;
  --surface:     #FFFFFF;
  --surface-2:   #F6F2ED;
  --surface-3:   #EFEAE3;
  --ink:         #2A2521;
  --ink-soft:    #4E463F;
  --muted:       #8B8279;
  --line:        #E9E2DA;
  --line-2:      #DED6CC;

  --rose:        #B76E79;
  --rose-deep:   #8E5563;
  --rose-soft:   #F7EBEC;

  /* สีหมวดเมนู */
  --c-rose:#B76E79;   --c-rose-bg:#F7EBEC;
  --c-amber:#C7913B;  --c-amber-bg:#F8EFDD;
  --c-sage:#6E9877;   --c-sage-bg:#E9F1EA;
  --c-teal:#3C8F8F;   --c-teal-bg:#E0F0EF;
  --c-blue:#4A79B0;   --c-blue-bg:#E6EEF7;
  --c-purple:#8A6BA6; --c-purple-bg:#F0EAF6;
  --c-gold:#B58A2E;   --c-gold-bg:#F6EFD9;
  --c-slate:#5E6A78;  --c-slate-bg:#EAEDF1;

  --danger:#C15B5B;   --danger-soft:#F7E7E7;
  --sage:#6E9877;     --sage-soft:#E9F1EA;
  --amber:#C7913B;    --amber-soft:#F8EFDD;

  --radius:14px; --radius-sm:10px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(42,37,33,.05), 0 1px 6px rgba(42,37,33,.04);
  --shadow-md:0 6px 22px rgba(42,37,33,.09);
  --shadow-lg:0 20px 50px rgba(42,37,33,.16);

  --sb-w:262px; --sb-w-collapsed:76px; --tb-h:64px;
  --font-body:'Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-head:'Kanit',var(--font-body);
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink);
  font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:.1px;
}
h1,h2,h3,h4,h5 { font-family:var(--font-head); font-weight:600; color:var(--ink); margin:0; }
a { color:var(--rose-deep); text-decoration:none; }
a:hover { color:var(--rose); }
::selection { background:var(--rose-soft); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; font-family:var(--font-body);
  font-weight:500; font-size:14px; border-radius:var(--radius-sm); padding:9px 16px; border:1px solid transparent;
  cursor:pointer; transition:.15s; text-decoration:none; line-height:1.2; }
.btn-brand { background:linear-gradient(135deg,var(--rose),var(--rose-deep)); color:#fff; box-shadow:0 5px 14px rgba(142,85,99,.28); }
.btn-brand:hover { color:#fff; transform:translateY(-1px); box-shadow:0 9px 20px rgba(142,85,99,.34); }
.btn-ghost { background:var(--surface); border-color:var(--line-2); color:var(--ink-soft); }
.btn-ghost:hover { background:var(--surface-2); color:var(--ink); }
.btn-sm { padding:6px 11px; font-size:13px; }

/* ============================= LOGIN ================================= */
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-brand { position:relative; overflow:hidden; padding:56px; display:flex; flex-direction:column; justify-content:space-between; color:#fff;
  background:radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.22), transparent 55%),
            radial-gradient(90% 80% at 95% 100%, rgba(42,37,33,.35), transparent 60%),
            linear-gradient(150deg,#C98795 0%,#A25E6C 42%,#6E4550 100%); }
.login-brand::before { content:""; position:absolute; inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:82px 82px; -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(120% 90% at 20% 0%,#000 30%,transparent 75%); opacity:.7; }
.login-brand>* { position:relative; z-index:1; }
.brand-mark { display:inline-flex; align-items:center; gap:12px; font-family:var(--font-head); font-weight:600; font-size:20px; }
.brand-mark .dot { width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:18px; }
.login-brand h1 { color:#fff; font-size:40px; line-height:1.18; margin:0 0 16px; max-width:15ch; }
.login-brand p { color:rgba(255,255,255,.86); max-width:40ch; margin:0; }
.brand-points { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; }
.brand-points li { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.92); }
.brand-points .tick { width:26px; height:26px; border-radius:8px; flex:0 0 26px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:13px; }
.brand-foot { font-size:13px; color:rgba(255,255,255,.7); }
.login-form-side { display:flex; align-items:center; justify-content:center; padding:40px 24px; background:radial-gradient(90% 60% at 100% 0%,var(--rose-soft),transparent 60%),var(--bg); }
.login-card { width:100%; max-width:400px; }
.login-card .eyebrow { font-family:var(--font-head); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--rose); margin-bottom:8px; }
.login-card h2 { font-size:27px; margin:0 0 6px; }
.login-card .sub { color:var(--muted); margin:0 0 30px; }
.field { margin-bottom:18px; }
.field label { font-size:13.5px; font-weight:500; color:var(--ink-soft); margin-bottom:7px; display:block; }
.input-wrap { position:relative; }
.input-wrap .ic { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; pointer-events:none; }
.form-control-loft { width:100%; height:50px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); padding:0 44px; font-family:var(--font-body); font-size:15px; color:var(--ink); transition:.18s; }
.form-control-loft::placeholder { color:#b9afa6; }
.form-control-loft:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 4px var(--rose-soft); }
.toggle-eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:transparent; color:var(--muted); width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:15px; }
.toggle-eye:hover { color:var(--rose-deep); background:var(--surface-2); }
.login-row { display:flex; align-items:center; justify-content:space-between; margin:4px 0 24px; }
.check-loft { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:14px; color:var(--ink-soft); }
.check-loft input { position:absolute; opacity:0; }
.check-loft .box { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-2); background:#fff; display:grid; place-items:center; transition:.16s; color:#fff; font-size:12px; }
.check-loft input:checked + .box { background:var(--rose); border-color:var(--rose); }
.link-muted { font-size:14px; color:var(--muted); }
.link-muted:hover { color:var(--rose-deep); }
.btn-login { width:100%; height:50px; font-size:15.5px; }
.btn-login:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.login-alert { border-radius:var(--radius-sm); padding:12px 15px; font-size:14px; background:var(--danger-soft); color:var(--danger); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.spinner-dot { width:16px; height:16px; border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================= APP SHELL ============================= */
.app { display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar { width:var(--sb-w); flex:0 0 var(--sb-w); background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:60; transition:width .22s ease, transform .25s ease; }
.sb-head { height:var(--tb-h); display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid var(--line); flex:0 0 var(--tb-h); }
.sb-logo { width:40px; height:40px; border-radius:12px; flex:0 0 40px; background:linear-gradient(135deg,var(--rose),var(--rose-deep)); display:grid; place-items:center; color:#fff; font-size:19px; box-shadow:0 5px 12px rgba(142,85,99,.3); }
.sb-title { min-width:0; }
.sb-title .n { font-family:var(--font-head); font-weight:600; font-size:15px; line-height:1.15; white-space:nowrap; }
.sb-title .s { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sb-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 12px 18px; }
.sb-nav::-webkit-scrollbar { width:6px; }
.sb-nav::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:3px; }
.sb-sec { font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); font-weight:600; padding:14px 10px 7px; white-space:nowrap; }
.sb-sec:first-child { padding-top:2px; }

.nav-item { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--radius-sm); color:var(--ink-soft);
  font-size:14px; font-weight:500; margin-bottom:3px; position:relative; transition:background .14s,color .14s; white-space:nowrap; }
.nav-item .ni-chip { width:34px; height:34px; border-radius:10px; flex:0 0 34px; display:grid; place-items:center; font-size:16px; transition:.14s; }
.nav-item:hover { background:var(--surface-2); color:var(--ink); }
.nav-item.active { background:var(--rose-soft); color:var(--rose-deep); font-weight:600; }
.nav-item.active::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:4px; height:24px; border-radius:0 4px 4px 0; background:var(--rose); }
.nav-item .ni-badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:600; color:#fff; display:grid; place-items:center; }

/* chip colors */
.chip-rose{background:var(--c-rose-bg);color:var(--c-rose);} .chip-amber{background:var(--c-amber-bg);color:var(--c-amber);}
.chip-sage{background:var(--c-sage-bg);color:var(--c-sage);} .chip-teal{background:var(--c-teal-bg);color:var(--c-teal);}
.chip-blue{background:var(--c-blue-bg);color:var(--c-blue);} .chip-purple{background:var(--c-purple-bg);color:var(--c-purple);}
.chip-gold{background:var(--c-gold-bg);color:var(--c-gold);} .chip-slate{background:var(--c-slate-bg);color:var(--c-slate);}
.bg-rose{background:var(--c-rose);} .bg-amber{background:var(--c-amber);} .bg-sage{background:var(--c-sage);} .bg-teal{background:var(--c-teal);}

.sb-foot { padding:12px; border-top:1px solid var(--line); }
.sb-user { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--radius-sm); }
.sb-user .av { width:38px; height:38px; border-radius:11px; flex:0 0 38px; background:linear-gradient(135deg,var(--sage),#54755c); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:600; }
.sb-user .m { min-width:0; }
.sb-user .m .n { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user .m .r { font-size:11.5px; color:var(--muted); }

/* collapsed */
.app.collapsed .sidebar { width:var(--sb-w-collapsed); flex-basis:var(--sb-w-collapsed); }
.app.collapsed .sb-title, .app.collapsed .sb-sec, .app.collapsed .nav-item span.lbl,
.app.collapsed .nav-item .ni-badge, .app.collapsed .sb-user .m { display:none; }
.app.collapsed .nav-item { justify-content:center; padding:9px 0; }
.app.collapsed .sb-head { justify-content:center; padding:0; }
.app.collapsed .sb-user { justify-content:center; padding:8px 0; }
.app.collapsed .nav-item.active::before { left:0; }
/* tooltip when collapsed */
.app.collapsed .nav-item::after { content:attr(data-label); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--ink); color:#fff; font-size:12.5px; padding:5px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .12s; z-index:80; box-shadow:var(--shadow-md); }
.app.collapsed .nav-item:hover::after { opacity:1; }

/* ---------- Main / Topbar ---------- */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height:var(--tb-h); flex:0 0 var(--tb-h); background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 20px; position:sticky; top:0; z-index:50; }
.icon-btn { width:40px; height:40px; border-radius:11px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-soft);
  cursor:pointer; display:grid; place-items:center; font-size:16px; position:relative; transition:.14s; text-decoration:none; }
.icon-btn:hover { border-color:var(--rose); color:var(--rose-deep); }
.icon-btn .ping { position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--rose); border:2px solid var(--surface); }
.tb-search { flex:1; max-width:420px; position:relative; }
.tb-search .ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.tb-search input { width:100%; height:40px; border:1px solid var(--line-2); border-radius:var(--radius-pill); background:var(--surface); padding:0 16px 0 40px; font-family:var(--font-body); font-size:14px; transition:.15s; }
.tb-search input:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 4px var(--rose-soft); }
.tb-spacer { flex:1; }
.tb-clock { text-align:right; line-height:1.2; }
.tb-clock .t { font-family:var(--font-head); font-weight:600; font-size:15px; }
.tb-clock .d { font-size:11.5px; color:var(--muted); }
.tb-user { display:flex; align-items:center; gap:10px; padding-left:6px; border-left:1px solid var(--line); padding-left:14px; }
.tb-user .av { width:38px; height:38px; border-radius:11px; flex:0 0 38px; background:linear-gradient(135deg,var(--sage),#54755c); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:600; }
.tb-user .m .n { font-size:13.5px; font-weight:600; line-height:1.2; }
.tb-user .m .r { font-size:11.5px; color:var(--muted); }

/* ---------- Content ---------- */
.content { padding:24px 24px 40px; flex:1; width:100%; max-width:1500px; margin:0 auto; }
.page-head { margin-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-head .eyebrow { font-family:var(--font-head); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--rose); }
.page-head h1 { font-size:25px; margin:3px 0 3px; }
.page-head p { color:var(--muted); margin:0; }

/* ---------- Stat cards ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; right:-24px; top:-24px; width:90px; height:90px; border-radius:50%; opacity:.5; }
.stat.s-rose::after{background:var(--c-rose-bg);} .stat.s-sage::after{background:var(--c-sage-bg);} .stat.s-amber::after{background:var(--c-amber-bg);} .stat.s-teal::after{background:var(--c-teal-bg);}
.stat .ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:20px; margin-bottom:13px; position:relative; z-index:1; }
.stat .k { font-size:12.5px; color:var(--muted); position:relative; z-index:1; }
.stat .v { font-family:var(--font-head); font-size:27px; font-weight:600; line-height:1.1; margin-top:2px; position:relative; z-index:1; }

/* ---------- Menu cards (colored) ---------- */
.menu-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.menu-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 12px 15px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; transition:transform .13s,box-shadow .13s,border-color .13s; }
.menu-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.menu-card .mi { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:23px; }
.menu-card .ml { font-size:13.5px; font-weight:500; color:var(--ink-soft); line-height:1.25; }
.menu-card .mbadge { position:absolute; top:9px; right:9px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; }

/* ---------- Panels / widgets ---------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.panel.wide { grid-column:span 2; }
.p-hd { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.p-hd h3 { font-size:15px; }
.p-hd a { font-size:12.5px; color:var(--muted); }
.p-hd a:hover { color:var(--rose-deep); }
.p-body { padding:6px 18px; }
.panel.alert { border-color:var(--danger); }
.panel.alert .p-hd { background:var(--danger-soft); }
.panel.alert .p-hd h3 { color:var(--danger); }
.empty-mini { text-align:center; color:var(--muted); font-size:13px; padding:26px 10px; }

.li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.li:last-child { border-bottom:none; }
.li .time { font-family:var(--font-head); font-weight:600; font-size:13.5px; color:var(--rose-deep); flex:0 0 48px; }
.li .ic-sq { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:15px; flex:0 0 36px; }
.li .bd { flex:1; min-width:0; }
.li .bd .n { font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li .bd .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li .end { margin-left:auto; text-align:right; white-space:nowrap; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:500; }
.pill.in{background:var(--rose-soft);color:var(--rose-deep);} .pill.wait{background:var(--amber-soft);color:var(--amber);}
.pill.done{background:var(--sage-soft);color:var(--sage);} .pill.paid{background:var(--sage-soft);color:var(--sage);}
.pill.partial{background:var(--amber-soft);color:var(--amber);} .pill.void{background:var(--danger-soft);color:var(--danger);}
.al-txt { font-size:12px; color:var(--danger); font-weight:500; }

.nvr { padding:16px 18px; }
.nvr .row { margin-bottom:14px; } .nvr .row:last-child { margin-bottom:0; }
.nvr .lbl { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--ink-soft); }
.nvr .lbl b { font-family:var(--font-head); }
.nvr .bar { height:10px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.nvr .bar>span { display:block; height:100%; border-radius:999px; }
.nvr .bar.newc>span { background:var(--rose); } .nvr .bar.retc>span { background:var(--sage); }
.nvr .cap { font-size:11.5px; color:var(--muted); margin-top:12px; text-align:center; }
.exp-badge { font-size:11px; font-weight:500; padding:3px 9px; border-radius:999px; background:var(--amber-soft); color:var(--amber); white-space:nowrap; }
.exp-badge.soon { background:var(--danger-soft); color:var(--danger); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover { background:var(--surface-2); }
.cell-user { display:flex; align-items:center; gap:11px; }
.cell-user .av { width:36px; height:36px; border-radius:10px; background:var(--rose-soft); color:var(--rose-deep); display:grid; place-items:center; font-family:var(--font-head); font-weight:600; font-size:14px; flex:0 0 36px; }
.badge-soft { background:var(--surface-3); color:var(--ink-soft); border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:500; }

/* ---------- Customer record (form + photo) ---------- */
.rec-grid { display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }
.rec-photo { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px; text-align:center; }
.rec-photo .ph { width:100%; aspect-ratio:3/4; border-radius:12px; background:var(--surface-3); display:grid; place-items:center; color:var(--muted); font-size:40px; overflow:hidden; margin-bottom:14px; border:1px dashed var(--line-2); }
.rec-photo .ph img { width:100%; height:100%; object-fit:cover; }
.rec-name { font-family:var(--font-head); font-size:18px; font-weight:600; }
.rec-code { font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.rec-allergy { background:var(--danger-soft); color:var(--danger); border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:500; display:flex; gap:8px; align-items:center; text-align:left; margin-top:6px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.fg { display:flex; flex-direction:column; gap:6px; }
.fg.full { grid-column:span 2; }
.fg label { font-size:12.5px; color:var(--muted); font-weight:500; }
.fg input,.fg select,.fg textarea { height:42px; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); padding:0 13px; font-family:var(--font-body); font-size:14px; color:var(--ink); transition:.15s; }
.fg textarea { height:auto; padding:10px 13px; resize:vertical; }
.fg input:focus,.fg select:focus,.fg textarea:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-soft); }

/* ---------- Empty state (module pages) ---------- */
.empty-state { text-align:center; padding:54px 24px; }
.empty-state .es-ic { width:72px; height:72px; border-radius:20px; margin:0 auto 16px; background:var(--rose-soft); color:var(--rose-deep); display:grid; place-items:center; font-size:29px; }
.empty-state h3 { font-size:19px; margin-bottom:8px; }
.empty-state p { color:var(--muted); max-width:44ch; margin:0 auto 20px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:24px; text-align:left; }
.feature-grid .f { border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px; background:var(--surface); }
.feature-grid .f .fi { font-size:17px; color:var(--rose); margin-bottom:7px; }
.feature-grid .f .ft { font-weight:600; font-size:13.5px; margin-bottom:3px; }
.feature-grid .f .fd { font-size:12.5px; color:var(--muted); }

/* ---------- Overlay (mobile off-canvas) ---------- */
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(42,37,33,.42); z-index:55; }
.burger { display:none; }

/* ============================= RESPONSIVE =========================== */
@media (max-width:1200px){ .menu-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:1100px){ .stat-grid{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr 1fr;} .panel.wide{grid-column:span 2;} }
@media (max-width:900px){
  .rec-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;} .panel.wide{grid-column:span 1;}
}
@media (max-width:820px){
  .sidebar{ position:fixed; left:0; top:0; height:100vh; transform:translateX(-100%); box-shadow:var(--shadow-lg); width:var(--sb-w); flex-basis:var(--sb-w); }
  .app.mobile-open .sidebar{ transform:translateX(0); }
  .app.mobile-open .sb-overlay{ display:block; }
  .app.collapsed .sidebar{ width:var(--sb-w); flex-basis:var(--sb-w); }
  .app.collapsed .sb-title,.app.collapsed .sb-sec,.app.collapsed .nav-item span.lbl,.app.collapsed .nav-item .ni-badge,.app.collapsed .sb-user .m{ display:block; }
  .app.collapsed .nav-item{ justify-content:flex-start; padding:9px 10px; }
  .burger{ display:grid; place-items:center; }
  .tb-clock{ display:none; }
  .tb-user .m{ display:none; }
}
@media (max-width:640px){
  .menu-grid{grid-template-columns:repeat(3,1fr);} .stat-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;} .fg.full{grid-column:span 1;}
  .content{padding:18px 14px 36px;}
  .feature-grid{grid-template-columns:1fr;}
}
@media (max-width:420px){ .menu-grid{grid-template-columns:repeat(2,1fr);} }

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} }

/* ---------- Aliases (รองรับหน้าโมดูลที่ยังใช้คลาสเดิม) ---------- */
.card-loft { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-loft .card-hd { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-loft .card-hd h3 { font-size:15px; }
.card-loft .card-pad { padding:20px; }
.table-loft { width:100%; border-collapse:collapse; }
.table-loft th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line); }
.table-loft td { padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.table-loft tbody tr:last-child td { border-bottom:none; }
.table-loft tbody tr:hover { background:var(--surface-2); }