/* ============================================================
   BẾP SẴN — ERP Dashboard · UI System (mockup preview)
   ============================================================ */
@import "../fonts/fonts.css";
@import "./tokens.css";

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);background:var(--color-bg);color:var(--color-ink);
  font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;line-height:var(--leading-tight);letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
svg{display:block}
::selection{background:var(--color-primary-100)}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:6px}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.sidebar{
  background:var(--color-surface);border-right:1px solid var(--color-border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;z-index:40;
}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid var(--color-border)}
.sb-brand img{height:34px;width:auto}
.sb-nav{flex:1;overflow-y:auto;padding:10px 12px;scrollbar-width:thin}
.sb-nav::-webkit-scrollbar{width:6px}.sb-nav::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:99px}
.sb-group{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-subtle);padding:14px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-md);
  color:var(--color-ink-muted);font-size:14px;font-weight:500;transition:all var(--dur-fast) var(--ease);position:relative;
}
.nav-item svg{width:19px;height:19px;flex:none;stroke-width:2}
.nav-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .np{flex:none;font-size:11px;font-weight:700;background:var(--color-accent-100);color:var(--color-accent-hover);padding:1px 7px;border-radius:99px}
.nav-item:hover{background:var(--color-primary-50);color:var(--color-ink)}
.nav-item.active{background:var(--color-primary-100);color:var(--color-primary-active);font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:99px;background:var(--color-primary)}
.sb-foot{padding:12px 14px;border-top:1px solid var(--color-border);display:flex;align-items:center;gap:10px}
.sb-foot .av{width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;font-family:var(--font-heading)}
.sb-foot .meta{font-size:12.5px;line-height:1.3;overflow:hidden}
.sb-foot .meta b{font-weight:600}.sb-foot .meta span{color:var(--color-ink-subtle);display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

.main{min-width:0;display:flex;flex-direction:column;overflow-x:hidden}

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(250,249,245,.82);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:14px;padding:12px 30px;
}
.hamb{display:none;background:none;border:none;padding:6px;border-radius:8px;color:var(--color-ink)}
.hamb svg{width:22px;height:22px}
.tb-title{font-family:var(--font-heading);font-weight:700;font-size:18px}
.tb-title small{display:block;font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--color-ink-subtle);letter-spacing:0}
.search{margin-left:auto;position:relative;width:min(340px,38vw)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--color-ink-subtle)}
.search input{
  width:100%;padding:9px 14px 9px 38px;border:1px solid var(--color-border);border-radius:var(--radius-pill);
  background:var(--color-surface);font-size:13.5px;color:var(--color-ink);
}
.search input::placeholder{color:var(--color-ink-subtle)}
.search input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-100)}
.tb-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);display:grid;place-items:center;color:var(--color-ink-muted)}
.tb-btn:hover{background:var(--color-primary-50);color:var(--color-primary)}
.tb-btn svg{width:19px;height:19px}
.tb-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-surface)}
.tb-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),#157A44);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-heading);font-size:14px}

/* ---------- PAGE ---------- */
.page{padding:26px 30px;max-width:1360px;width:100%;margin:0 auto;min-width:0;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* footer note flows sau nội dung — không dùng position:fixed để tránh đè hàng thẻ cuối */
.page-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--color-ink-subtle);text-align:center}
.page-foot svg{width:14px;height:14px;color:var(--color-primary)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:26px;font-weight:800}
.page-head p{margin:5px 0 0;color:var(--color-ink-muted);font-size:14px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-md);border:1px solid transparent;font-size:13.5px;font-weight:600;transition:all var(--dur-fast) var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px;stroke-width:2.2}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{background:var(--color-surface);border-color:var(--color-border);color:var(--color-ink)}
.btn-ghost:hover{border-color:var(--color-border-strong);background:var(--color-surface-alt)}
.btn-accent{background:var(--color-accent);color:#fff}.btn-accent:hover{background:var(--color-accent-hover)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:var(--radius-sm)}
.icon-btn{width:34px;height:34px;padding:0;justify-content:center;border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-ink-muted)}
.icon-btn:hover{background:var(--color-surface-alt);color:var(--color-ink)}

/* ---------- CARD / SURFACE ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--color-border)}
.card-head h3{font-size:15.5px;font-weight:700}
.card-head .sub{font-size:12.5px;color:var(--color-ink-subtle);font-weight:400}

.grid{display:grid;gap:18px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.mt{margin-top:18px}

/* ---------- STAT CARD ---------- */
.stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat .ic{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;margin-bottom:12px}
.stat .ic svg{width:21px;height:21px}
.stat .lbl{font-size:13px;color:var(--color-ink-muted);font-weight:500}
.stat .val{font-family:var(--font-heading);font-size:26px;font-weight:800;margin:3px 0 6px;letter-spacing:-.02em}
.stat .trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px}
.stat .trend svg{width:13px;height:13px}
.trend.up{color:var(--color-success);background:var(--color-success-bg)}
.trend.down{color:var(--color-danger);background:var(--color-danger-bg)}
.trend.flat{color:var(--color-ink-muted);background:var(--color-surface-alt)}
.ic-green{background:var(--color-primary-100);color:var(--color-primary)}
.ic-orange{background:var(--color-accent-100);color:var(--color-accent-hover)}
.ic-blue{background:var(--color-info-bg);color:var(--color-info)}
.ic-amber{background:var(--color-warning-bg);color:var(--color-warning)}
.ic-red{background:var(--color-danger-bg);color:var(--color-danger)}

/* ---------- BADGES ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;line-height:1.4}
.badge svg{width:12px;height:12px}
.badge .bd{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{background:var(--color-success-bg);color:var(--color-primary-active)}
.b-amber{background:var(--color-warning-bg);color:#8a6100}
.b-red{background:var(--color-danger-bg);color:var(--color-danger)}
.b-blue{background:var(--color-info-bg);color:var(--color-info)}
.b-orange{background:var(--color-accent-100);color:var(--color-accent-hover)}
.b-gray{background:var(--color-surface-alt);color:var(--color-ink-muted)}
.b-purple{background:#F1EBFB;color:#7A4FD1}

/* ---------- TABLE ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-weight:600;color:var(--color-ink-subtle);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:11px 16px;border-bottom:1px solid var(--color-border);white-space:nowrap;background:var(--color-surface)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--color-border);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background var(--dur-fast)}
.tbl tbody tr:hover{background:var(--color-primary-50)}
.tbl td .strong{font-weight:600;color:var(--color-ink)}
.tbl td .muted{color:var(--color-ink-subtle);font-size:12.5px}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.tbl .center{text-align:center}
.cell-prod{display:flex;align-items:center;gap:11px;min-width:0}
.cell-prod>div{min-width:0}
.cell-prod .strong{overflow-wrap:anywhere}

/* food thumb */
.thumb{width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:22px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.thumb.lg{width:56px;height:56px;border-radius:14px;font-size:28px}
.thumb.xl{width:100%;aspect-ratio:4/3;height:auto;border-radius:16px;font-size:64px}

/* ---------- MENU GRID ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.dish{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--dur-base) var(--ease);cursor:pointer}
.dish:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-border-strong)}
.dish .ph{aspect-ratio:16/10;display:grid;place-items:center;font-size:52px;position:relative}
.dish .ph .tag{position:absolute;top:10px;left:10px}
.dish .ph .fav{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.9);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--color-ink-muted)}
.dish .bd{padding:13px 14px}
.dish .bd h4{font-size:14.5px;font-weight:700;margin-bottom:2px}
.dish .bd .desc{font-size:12px;color:var(--color-ink-subtle);margin-bottom:10px}
.dish .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dish .price{font-family:var(--font-heading);font-weight:800;font-size:17px;color:var(--color-primary-active)}
.dish .foot{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border);font-size:11.5px;color:var(--color-ink-muted)}
.dish .foot b{color:var(--color-ink)}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:4px;background:var(--color-surface-alt);padding:4px;border-radius:var(--radius-md);width:fit-content;flex-wrap:wrap}
.tab{padding:7px 15px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--color-ink-muted);border:none;background:transparent}
.tab.active{background:var(--color-surface);color:var(--color-primary-active);box-shadow:var(--shadow-sm)}
.tab .ct{margin-left:6px;font-size:11px;opacity:.7}

/* segmented filter chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{padding:6px 13px;border-radius:99px;border:1px solid var(--color-border);background:var(--color-surface);font-size:12.5px;font-weight:500;color:var(--color-ink-muted)}
.chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.chip .ct{opacity:.75;margin-left:4px}

/* ---------- ALERT LIST ---------- */
.alert{display:flex;gap:12px;padding:12px 14px;border-radius:var(--radius-md);align-items:flex-start}
.alert+.alert{margin-top:8px}
.alert .ai{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.alert .ai svg{width:17px;height:17px}
.alert .at{flex:1;min-width:0;font-size:13px}
.alert .at b{font-weight:600}
.alert .at .s{color:var(--color-ink-muted);font-size:12px}
.alert.warn{background:var(--color-warning-bg)}.alert.warn .ai{background:#fff;color:var(--color-warning)}
.alert.red{background:var(--color-danger-bg)}.alert.red .ai{background:#fff;color:var(--color-danger)}
.alert.info{background:var(--color-info-bg)}.alert.info .ai{background:#fff;color:var(--color-info)}

/* ---------- PROGRESS / BARS ---------- */
.pbar{height:7px;border-radius:99px;background:var(--color-surface-alt);overflow:hidden}
.pbar>i{display:block;height:100%;border-radius:99px;background:var(--color-primary)}
.pbar.amber>i{background:var(--color-warning)}.pbar.red>i{background:var(--color-danger)}

/* ---------- KV / detail ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--color-border);font-size:13.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--color-ink-muted)}
.kv .v{font-weight:600;text-align:right}

/* timeline */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--color-border)}
.tl-item{position:relative;padding-bottom:18px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-22px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--color-surface);border:2.5px solid var(--color-primary)}
.tl-item.done::before{background:var(--color-primary)}
.tl-item.pend::before{border-color:var(--color-border-strong)}
.tl-item h5{font-size:13.5px;font-weight:600;margin:0}
.tl-item .t{font-size:12px;color:var(--color-ink-subtle)}

/* mini list */
.rank li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--color-border);list-style:none}
.rank{margin:0;padding:0}.rank li:last-child{border-bottom:none}
.rank .r{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--color-surface-alt);color:var(--color-ink-muted);flex:none}
.rank li:nth-child(1) .r{background:var(--color-primary);color:#fff}
.rank .nm{flex:1;min-width:0;font-size:13.5px;font-weight:500}
.rank .nm span{display:block;font-size:11.5px;color:var(--color-ink-subtle);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .vv{font-weight:700;font-size:13.5px;font-family:var(--font-heading);white-space:nowrap;flex:none}

/* referral tree */
.tree{--w:2px}
.tree ul{list-style:none;margin:0;padding-left:26px;position:relative}
.tree>li>.node{margin-bottom:6px}
.tree li{position:relative;padding:5px 0}
.tree ul li::before{content:"";position:absolute;left:-14px;top:0;bottom:50%;width:14px;border-left:var(--w) solid var(--color-border);border-bottom:var(--w) solid var(--color-border);border-bottom-left-radius:8px}
.tree ul li:not(:last-child)::after{content:"";position:absolute;left:-14px;top:0;bottom:0;border-left:var(--w) solid var(--color-border)}
.node{display:inline-flex;align-items:center;gap:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:6px 14px 6px 6px;box-shadow:var(--shadow-sm)}
.node .av{width:30px;height:30px;border-radius:50%;background:var(--color-primary-100);color:var(--color-primary-active);display:grid;place-items:center;font-weight:700;font-size:12px}
.node b{font-size:13px}.node .tier{font-size:11px;color:var(--color-ink-subtle)}
.node .cm{margin-left:6px;font-size:12px;font-weight:700;color:var(--color-primary)}

/* matrix */
.matrix{width:100%;border-collapse:collapse;font-size:12.5px}
.matrix th,.matrix td{padding:9px 8px;text-align:center;border:1px solid var(--color-border)}
.matrix th:first-child,.matrix td:first-child{text-align:left;font-weight:600;position:sticky;left:0;background:var(--color-surface)}
.matrix thead th{background:var(--color-surface-alt);font-size:11px}
.matrix .yes{color:var(--color-primary)}.matrix .no{color:var(--color-border-strong)}
.matrix .part{color:var(--color-warning)}

/* toggle */
.tg{width:38px;height:22px;border-radius:99px;background:var(--color-border-strong);position:relative;transition:var(--dur-base);flex:none}
.tg.on{background:var(--color-primary)}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:var(--dur-base);box-shadow:var(--shadow-sm)}
.tg.on::after{left:18px}

/* form */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:9px 13px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:14px;background:var(--color-surface);color:var(--color-ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-100)}
.field .hint{font-size:12px;color:var(--color-ink-subtle);margin-top:5px}
.lang-tabs{display:flex;gap:6px;margin-bottom:12px}
.lang-tabs .lt{padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink-muted)}
.lang-tabs .lt.active{background:var(--color-primary-100);border-color:var(--color-primary);color:var(--color-primary-active)}

/* section title */
.sec-t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-subtle);margin:0 0 12px}

.flex{display:flex}.between{justify-content:space-between}.center-y{align-items:center}.gap{gap:12px}.gap-s{gap:8px}.wrap{flex-wrap:wrap}
.muted{color:var(--color-ink-muted)}.subtle{color:var(--color-ink-subtle)}.right{text-align:right}
.mono{font-variant-numeric:tabular-nums}
.hl{color:var(--color-primary-active);font-weight:700}
.pill-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--color-primary-50);border:1px solid var(--color-primary-100);color:var(--color-primary-active);padding:4px 11px;border-radius:99px;font-weight:500}

/* KPI donut legend */
.legend{display:flex;flex-direction:column;gap:8px}
.legend .li{display:flex;align-items:center;gap:9px;font-size:13px}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:none}
.legend .li .v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}

/* toast (demo) */
.demo-note{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;background:var(--color-ink);color:#fff;font-size:12.5px;padding:9px 16px;border-radius:99px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity var(--dur-base)}
.demo-note.show{opacity:1}
.demo-note svg{width:15px;height:15px;color:var(--color-primary)}

/* scrim for mobile drawer */
.scrim{display:none;position:fixed;inset:0;background:rgba(20,35,26,.4);z-index:35}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-2-1,.g-1-2,.g-2{grid-template-columns:1fr}
}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:270px;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease);box-shadow:var(--shadow-lg)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block}
  .hamb{display:grid}
  .search{width:auto;flex:1}
  .page{padding:18px 16px 32px}
  .topbar{padding:12px 16px}
}
@media(max-width:560px){
  .g-4,.g-3{grid-template-columns:1fr}
  .tb-title{display:none}
  .search{display:none}
  .menu-grid{grid-template-columns:1fr 1fr}
  .page-head h1{font-size:22px}
}

/* ---------- MODAL ---------- */
#modal{position:fixed;inset:0;z-index:50;background:rgba(20,35,26,.44);backdrop-filter:blur(3px);display:none;padding:28px;overflow-y:auto}
#modal.show{display:flex;align-items:flex-start;justify-content:center}
.modal-box{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:960px;margin:auto;padding:26px;animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){#modal{padding:12px}.modal-box{padding:18px}}