@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4f8ff;
  --panel:#fff;
  --ink:#183653;
  --muted:#667b93;
  --green:#2563eb;
  --green-light:#eaf3ff;
  --border:#dce8f8;
  --accent:#dbeafe;
  --red:#a83e36;
  --amber:#ae701d;
  --shadow:0 8px 26px #233c2b05;
  --font-sans:'Plus Jakarta Sans',Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--font-sans);
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  line-height:1.5;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-sans);
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;font-family:inherit}
button,a,input,select{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #60a5fa;outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1{font-size:30px;font-weight:800;letter-spacing:-0.8px;line-height:1.2;margin-bottom:10px}
h2{font-size:18px;font-weight:750;margin:0}
h3{font-size:16px;font-weight:700}
p{line-height:1.6}
small{font-size:12px;font-weight:600}

.sidebar{
  width:245px;
  background:#153e75;
  color:#fff;
  position:fixed;
  inset:0 auto 0 0;
  padding:32px 18px 20px;
  display:flex;
  flex-direction:column;
  z-index:20;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:12px;margin:0 10px 36px;font-size:24px;font-weight:800;letter-spacing:-0.5px}
.brand-mark{width:38px;height:40px;background:#93c5fd;color:#163c73;display:grid;place-items:center;border-radius:11px;font:italic 800 25px Georgia}
.brand small{display:block;font-size:9px;font-weight:750;letter-spacing:1.8px;color:#a5c8f1;margin-top:4px}
.nav-group{margin-bottom:24px}
.nav-group>small{font-size:11px;font-weight:800;color:#9fc2ec;letter-spacing:1.5px;padding-left:15px;display:block;margin-bottom:10px}
.nav-link{display:flex;gap:12px;align-items:center;border-radius:8px;padding:11px 14px;color:#cde0f7;font-size:13.5px;font-weight:600;margin-bottom:4px;position:relative}
.nav-link>span{width:20px;font-size:20px;line-height:1;color:#b3d2f5}
.nav-link:hover{background:#ffffff15;color:#fff}
.nav-link.active{background:var(--accent);color:#123a72;font-weight:800}
.nav-link.active>span{color:#123a72}
.nav-link i{width:6px;height:6px;background:#235abb;border-radius:100%;margin-left:auto}
.sidebar-bottom{margin-top:auto;font-size:12px;padding:14px 12px 0;border-top:1px solid #ffffff18;color:#d0e4ff}
.sidebar-bottom>small{display:block;margin:7px 0 12px;color:#a3c5ee;font-size:11px;font-weight:600}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#60a5fa;margin-right:6px}

.workspace{margin-left:245px}
.topbar{height:76px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:20px}
.breadcrumb{font-size:13.5px;font-weight:600;color:var(--muted)}
.breadcrumb span{margin:0 10px;color:#cbd5e1}
.breadcrumb .crumb-module{color:#476587;font-weight:600;margin:0}
.breadcrumb strong{color:var(--ink);font-weight:750}
.top-controls{display:flex;align-items:center;gap:12px}
.top-controls select{font-size:13px;font-weight:600;padding:8px 12px;max-width:210px;border:1px solid var(--border);border-radius:8px;background:#fff;color:#243d57}
.icon-button{position:relative;display:inline-grid;place-items:center;min-width:34px;height:34px;background:transparent;border:0;border-radius:7px;font-size:20px;color:var(--ink)}
.icon-button:hover{background:var(--bg)}
#notification-dot{position:absolute;width:5px;height:5px;background:#c99242;right:6px;top:5px;border-radius:50%}
.demo-strip{font-size:12px;font-weight:600;color:#5a738f;display:flex;align-items:center;gap:10px;padding:10px 34px;background:#edf5ff;border-bottom:1px solid #e1edfc}
.demo-strip>span{font-size:10px;background:#d7e9ff;padding:3px 6px;border-radius:4px;letter-spacing:1px;color:#23589b;font-weight:800}
.demo-strip time{margin-left:auto}

main{max-width:1700px;margin:auto;padding:30px 34px;min-height:calc(100vh - 180px)}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#5c81a8;margin-bottom:10px}
.page-heading p{margin:0;color:var(--muted);font-size:13.5px;font-weight:500}
.heading-actions{display:flex;gap:10px;align-items:center}
.outlet-chip{font-size:12.5px;font-weight:700;white-space:nowrap;border:1px solid var(--border);padding:9px 14px;border-radius:20px;background:#fff}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.stat{border:1px solid var(--border);border-radius:12px;background:#fff;padding:22px 24px;box-shadow:var(--shadow)}
.stat>div{font-size:12.5px;font-weight:700;color:#5a7698;margin-bottom:14px}
.stat strong{display:block;font-size:28px;letter-spacing:-0.8px;font-weight:800;margin-bottom:10px}
.stat small{color:#778ea9;font-size:12px;font-weight:600}
.stat.accent{background:#e5f1ff;border-color:#c9dffc}

.panel{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);margin-bottom:22px;min-width:0;overflow:hidden}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-2.wide-left{grid-template-columns:1.65fr 1fr}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent;
  border-radius:7px;
  padding:9px 14px;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  transition:background .15s,box-shadow .15s;
}
.btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}
.btn.primary:hover{background:#1d4ed8}
.btn.secondary{background:#fff;color:#285686;border-color:#d0e0f3}
.btn.secondary:hover{background:#edf5ff}
.btn.subtle{background:#f1f5fa;color:#496b8f;border-color:#e2ecf7}
.btn.subtle:hover{background:#e5effa}
.btn.link{padding:5px 6px;background:transparent;color:#2563eb;font-weight:700}
.btn.danger{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.btn.danger:hover{background:#fee2e2}
.subtle.light{border:0;border-radius:6px;background:#ffffff15;color:#e2eaf5;padding:8px;font-size:11px;font-weight:700}
.full{width:100%}
.center{text-align:center}
.muted{color:var(--muted);font-size:12px;font-weight:500}

.badge{display:inline-block;font-size:11px;font-weight:750;border-radius:6px;padding:4px 9px;white-space:nowrap;line-height:1.25}
.badge.green{background:#dcfce7;color:#166534}
.badge.amber{background:#fef3c7;color:#92400e}
.badge.red{background:#fee2e2;color:#991b1b}
.badge.gray{background:#f1f5f9;color:#475569}
.badge.blue{background:#dbeafe;color:#1e40af}
.badge.sky{background:#e0f2fe;color:#0369a1}
.badge.purple{background:#ede9fe;color:#5b21b6}

.table-tools{display:flex;align-items:center;gap:12px;padding:0 22px 14px}
.search-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:7px;padding:0 12px;background:#fff;max-width:260px}
.search-wrap>span{font-size:22px;color:#7e98b7}
.search-wrap input{border:0;outline:0;min-width:0;width:100%;font-size:13px;font-weight:500;padding:9px 0;background:transparent}
.search-wrap.large{max-width:none;height:46px;margin-bottom:16px}
.search-wrap.large input{font-size:14px;font-weight:500}
.table-summary{font-size:12px;font-weight:600;color:#6b85a3;margin-left:auto}
.table-scroll{overflow:auto;width:100%}
table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
th{background:#f8faff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:#5d7897;font-size:11.5px;white-space:nowrap;font-weight:750;padding:13px 18px}
th:first-child,td:first-child{padding-left:22px}
th button{background:transparent;border:0;color:inherit;padding:0;font-size:inherit;text-align:left;font-weight:inherit}
th button span{margin-left:5px;color:#9bb4d1}
td{padding:14px 18px;border-bottom:1px solid #edf3fc;line-height:1.5;vertical-align:middle;font-weight:500}
td strong{font-weight:700}
td .btn+ .btn{margin-left:6px}
td>small{display:block;font-size:11px;font-weight:600;color:#7993af}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f8fbff}
.table-bottom{border-top:1px solid var(--border);padding:12px 22px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--muted)}
.table-bottom .btn{padding:5px 12px;margin-left:6px}

.chart-summary{display:flex;align-items:baseline;gap:14px;padding:0 24px}
.chart-summary strong{font-size:26px;letter-spacing:-.6px;font-weight:750}
.chart-summary span{font-size:11.5px;font-weight:600;color:var(--muted)}
.bar-chart{height:226px;padding:24px 28px 20px;display:flex;gap:26px;align-items:stretch;background:repeating-linear-gradient(to top,transparent 0,transparent 44px,#edf4fd 45px,transparent 46px);background-clip:content-box}
.bar-group{flex:1;display:flex;flex-direction:column;text-align:center;min-width:0}
.bar-value{font-size:10px;font-weight:700;color:#6784a3;height:20px}
.bar-track{flex:1;display:flex;align-items:flex-end;justify-content:center}
.bar{width:100%;max-width:38px;background:#c2dfff;border-radius:6px 6px 0 0}
.bar.today{background:#3b82f6}
.bar-group small{font-size:11px;font-weight:600;color:#6e8cae;margin-top:12px}

.operation-row{display:flex;align-items:center;gap:14px;margin:0 22px;padding:14px 0;border-bottom:1px solid #eef4fc}
.op-icon{height:38px;width:38px;border-radius:10px;display:grid;place-items:center;background:#eef5ff;color:#2563eb;font-size:20px}
.amber-bg{background:#fff4df;color:#b39457}
.blue-bg{background:#eaf2ff;color:#2563eb}
.operation-row strong{font-size:13px;font-weight:700}
.operation-row small{display:block;color:#768ea9;font-size:11px;font-weight:500;margin-top:4px}
.operation-row b{margin-left:auto;font-size:20px;font-weight:700}

.callout{background:#edf5ff;border-radius:8px;padding:16px 20px;font-size:12.5px;color:#2f5379;line-height:1.7;margin:18px 0}
.panel>.callout{margin:16px 22px}
.callout p{font-size:12px;margin:6px 0 0}

.activity-list{padding:0 22px 8px}
.activity-list>div{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid #edf4fc}
.activity-list>div:last-child{border-bottom:0}
.activity-dot{width:8px;height:8px;background:#3b82f6;border-radius:50%;margin-top:5px;flex-shrink:0}
.activity-list strong{font-size:13px;font-weight:700}
.activity-list p{font-size:12px;color:#607996;margin:3px 0}
.activity-list small{font-size:11px;color:#859bb4}

.app-footer{display:flex;justify-content:space-between;padding:12px 34px 24px;font-size:11.5px;font-weight:500;color:#8ba0b9}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;min-width:0}
.field>span{font-size:12.5px;font-weight:750;color:#355373}
.field small{font-size:11.5px;font-weight:500;color:var(--muted)}
input:not([type=checkbox]),select,textarea{
  border:1px solid #d4e2f3;
  padding:10px 12px;
  border-radius:7px;
  background:#fff;
  color:#1c3752;
  font-size:13.5px;
  font-weight:500;
  min-width:0;
  max-width:100%;
}
input:not([type=checkbox]):focus,select:focus,textarea:focus{border-color:#3b82f6;outline:none}
input[type=checkbox]{accent-color:#2563eb}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

.tabs{display:flex;gap:24px;overflow:auto;border-bottom:1px solid #dce7f5;margin-bottom:24px}
.tab{border:0;background:none;padding:0 0 14px;white-space:nowrap;font-size:13.5px;font-weight:600;color:#6d87a4;border-bottom:2px solid transparent}
.tab.active{color:#2563eb;font-weight:800;border-color:#2563eb}

.filter-bar{display:flex;align-items:flex-end;gap:12px;margin-bottom:22px}
.filter-bar .field{margin:0}
.filter-bar .field>span{font-size:11px;font-weight:750}
.filter-bar input{font-size:13px;padding:8px 10px}
.filter-bar .btn{height:38px}
.report-picker{max-width:310px}

.warning{padding:14px 20px;border:1px solid #eed8b4;background:#fff4df;color:#876930;font-size:12.5px;font-weight:600;line-height:1.7;margin-bottom:18px;border-radius:8px}
.callout{padding:12px 16px;border:1px solid #bfdbfe;background:#eff6ff;color:#1e40af;font-size:13px;font-weight:600;line-height:1.6;margin-top:14px;border-radius:8px}
.workspace>#storage-warning{margin:0;border-radius:0;background:#fff0df;font-size:13px}

.empty{text-align:center;padding:45px 20px;color:#7993af}
.empty>span{font-size:32px;color:#b2cbe6;display:block;margin-bottom:12px}
.empty h3{font-size:15px;font-weight:750;color:#355373;margin-bottom:6px}
.empty p{font-size:13px;margin:0}
.empty-row td{text-align:center;padding:40px;color:#7993af}

/* Base POS Layout */
.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:16px;align-items:start}
.category-tabs{display:flex;gap:6px;margin-bottom:12px;overflow:auto}
.category-tabs .btn{padding:7px 14px;font-size:12.5px}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:12px}
.menu-card{display:flex;flex-direction:column;width:100%;min-height:0;height:auto;padding:0;text-align:left;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;box-shadow:0 1px 3px rgba(27,68,120,.05);cursor:pointer;position:relative}
.menu-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(27,68,120,.12);border-color:#9dc5ff}
.menu-art{height:78px;min-height:78px;max-height:78px;width:100%;background:#eef4fc;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0}
.menu-art:before{content:'';position:absolute;width:90px;height:90px;background:#ffffff45;border-radius:50%;top:10px;left:-15px;pointer-events:none}
.color-0{background:#eaf2fd}
.color-1{background:#e8f4f8}
.color-2{background:#f0eef9}
.color-3{background:#fdf2e9}
.color-4{background:#e9f6ef}
.food-illustration{width:auto;height:auto;max-width:72px;max-height:50px;object-fit:contain;display:block;margin:auto;filter:drop-shadow(0 3px 6px rgba(20,45,80,.1));transition:transform .2s cubic-bezier(.16,1,.3,1);pointer-events:none;position:relative;z-index:2}
.menu-card:hover .food-illustration{transform:scale(1.08)}
.fallback-glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;opacity:.35;z-index:1;pointer-events:none}
.plate{width:58px;height:58px;border-radius:50%;background:#ffffffe6;border:3px solid #ffffff9c;box-shadow:2px 4px 10px #264a7715;display:grid;place-items:center}
.plate i{font-style:normal;font-size:26px}
.add-round{position:absolute;right:7px;bottom:7px;background:#2563eb;color:#fff;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:15px;font-weight:700;box-shadow:0 2px 5px rgba(37,99,235,.35);transition:transform .15s,background-color .15s;z-index:3}
.menu-card:hover .add-round{transform:scale(1.15);background:#1d4ed8}

.menu-info{padding:8px 10px 10px;display:flex;flex-direction:column;flex:1;justify-content:space-between}
.menu-info small{display:block;font-size:9.5px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;color:#728ca8;margin-bottom:3px}
.menu-info strong{display:block;font-size:12.5px;font-weight:750;min-height:30px;line-height:1.25;color:var(--ink);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.menu-info b{font-size:13.5px;font-weight:800;display:block;color:#2563eb;margin-top:auto}

/* Customer & Membership UI */
.customer-field-wrap{margin-bottom:12px}
.customer-label-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.customer-label-bar span{font-size:12px;font-weight:750;color:var(--ink)}
.customer-label-bar .btn.link{font-size:12px;font-weight:700;color:#2563eb;padding:0;background:none;border:none;cursor:pointer}
.customer-label-bar .btn.link:hover{text-decoration:underline}
.customer-field-wrap select{width:100%;font-size:13px;font-weight:600;padding:8px 10px}
.member-chip{margin-top:8px;padding:8px 12px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12px;transition:all .2s ease}
.member-chip.active{background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);border:1px solid #bbf7d0;box-shadow:0 2px 6px rgba(34,197,94,.08)}
.member-chip-main{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.member-chip-main strong{font-size:13px;font-weight:750;color:#1e293b}
.member-chip-perks{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:#166534}
.member-disc-tag strong{color:#15803d;font-weight:800}
.member-points-tag{background:#dcfce7;color:#14532d;padding:2px 7px;border-radius:12px;font-weight:750;font-size:11px}

.cart-panel{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto}
.cart-panel>.panel-heading{padding:18px 20px}
.cart-panel>.panel-heading h2{font-size:17px;font-weight:800}
.cart-items{max-height:260px;overflow-y:auto}
.cart-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 20px;border-bottom:1px solid #edf4fc}
.cart-row strong{font-size:13.5px;font-weight:750}
.cart-row small{display:block;font-size:12px;font-weight:600;color:#6b86a4;margin-top:4px}
.quantity{display:flex;align-items:center;gap:8px}
.quantity .btn{padding:4px 8px;font-size:14px;font-weight:700}
.quantity b{font-size:13.5px;font-weight:750}
.cart-form{padding:18px 20px}
.cart-form .field>span{font-size:12px;font-weight:750}
.cart-form input,.cart-form select{font-size:13px;font-weight:600;padding:8px 10px}
.cart-form .field{margin-bottom:12px}
.cart-form .form-grid{gap:10px}
.totals{border-top:1px dashed #cfdfef;margin:15px 0;padding-top:10px}
.totals>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;font-weight:600}
.totals b{font-weight:750}
.totals .grand-total{border-top:1px solid #dce8f8;margin-top:8px;padding:12px 0 6px;font-size:16px;font-weight:800}
.cart-form button[type=submit]{font-size:14px;font-weight:800;padding:12px}
.cart-form .center{display:block;font-size:11px;font-weight:600;margin-top:10px}

/* Dedicated POS Mode Desktop Layout: Independent scrolls for catalog and cart */

@media (min-width: 961px) {
  body.pos-page {
    overflow: hidden;
  }
  body.pos-page .sidebar {
    width: 215px;
    padding: 24px 14px 16px;
  }
  .pos-page .workspace {
    margin-left: 215px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .pos-page .topbar {
    flex-shrink: 0;
  }
  .pos-page .demo-strip {
    flex-shrink: 0;
  }
  .pos-page #storage-warning {
    flex-shrink: 0;
  }
  .pos-page main {
    max-width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 20px 16px;
    overflow: hidden;
  }
  .pos-page .page-heading {
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .pos-page .page-heading h1 {
    font-size: 22px;
    margin-bottom: 2px;
  }
  .pos-page .eyebrow {
    margin-bottom: 2px;
  }
  .pos-page .app-footer {
    display: none;
  }
  .pos-page .pos-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 345px;
    gap: 16px;
    align-items: stretch;
  }
  .pos-page .pos-catalog {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  .pos-page .pos-catalog .search-wrap.large {
    margin-bottom: 10px;
    flex-shrink: 0;
    height: 40px;
  }
  .pos-page .pos-catalog .category-tabs {
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .pos-page .pos-catalog #menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 6px;
    padding-bottom: 24px;
    overscroll-behavior: contain;
  }
  .pos-page .cart-panel {
    position: static;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .pos-page .cart-panel > .panel-heading {
    flex-shrink: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
  }
  .pos-page .cart-panel #cart-items {
    max-height: 200px;
    overflow-y: auto;
    flex-shrink: 0;
    border-bottom: 1px solid #edf4fc;
  }
  .pos-page .cart-panel #cart-items .empty {
    padding: 22px 16px;
  }
  .pos-page .cart-panel #pos-form {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .pos-page .cart-panel .cart-form {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
  }
  .pos-page .cart-panel .cart-form .field {
    margin-bottom: 10px;
  }
  .pos-page .cart-panel .cart-form .form-grid {
    gap: 10px;
  }
  .pos-page .cart-panel .totals {
    margin: 10px 0 12px;
    padding-top: 8px;
  }
  .pos-page .cart-panel .totals>div {
    padding: 4px 0;
  }
  .pos-page .cart-panel .totals .grand-total {
    padding: 8px 0 6px;
  }
  .pos-page #menu-grid::-webkit-scrollbar,
  .pos-page #cart-items::-webkit-scrollbar,
  .pos-page #pos-form::-webkit-scrollbar {
    width: 6px;
  }
  .pos-page #menu-grid::-webkit-scrollbar-thumb,
  .pos-page #cart-items::-webkit-scrollbar-thumb,
  .pos-page #pos-form::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }
  .pos-page #menu-grid::-webkit-scrollbar-thumb:hover,
  .pos-page #cart-items::-webkit-scrollbar-thumb:hover,
  .pos-page #pos-form::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.kanban-column{background:#eef4fc;border-radius:12px;padding:14px;min-height:420px}
.kanban-column>h2{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px;font-size:14px;font-weight:750}
.kanban-column>h2>span:last-child{background:#fff;border-radius:6px;font-size:11px;font-weight:700;padding:4px 7px;color:#5c7897}
.kitchen-card{background:#fff;border:1px solid #dce8f8;border-radius:10px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.kitchen-id{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
.kitchen-id b{font-size:13px;font-weight:750}
.kitchen-id small{font-size:11px;font-weight:600;color:#7e97b4}
.kitchen-card>p{font-size:11px;color:#7e97b4;margin:7px 0 12px}
.kitchen-lines{font-size:13px;line-height:1.7}
.kitchen-lines>div{margin-bottom:6px}
.kitchen-lines b{color:#2563eb;margin-right:6px}
.kitchen-note{background:#faf4e8;padding:9px;font-size:11px;font-weight:600;margin-top:12px;color:#967d4b;border-radius:6px}
.kitchen-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;border-top:1px solid #edf4fc;margin-top:14px;padding-top:12px}
.kitchen-actions .btn{font-size:11px;font-weight:700;padding:7px 10px}

.master-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px}
.master-nav{display:flex;flex-direction:column;gap:5px}
.master-nav button{background:transparent;border:0;border-radius:7px;text-align:left;padding:12px 14px;font-size:13px;font-weight:600;color:#577493;display:flex;justify-content:space-between;align-items:center}
.master-nav button.active{background:#dbeafe;color:#1d4ed8;font-weight:800}
.master-nav small{font-size:11px;font-weight:600}

.detail-summary{display:flex;gap:15px;align-items:center;font-size:12.5px;font-weight:600;margin-bottom:18px;flex-wrap:wrap}
.details{display:grid;grid-template-columns:160px 1fr;gap:14px;font-size:13.5px}
.details dt{color:#6b86a4;font-weight:600}
.details dd{margin:0;font-weight:600}

.line-editor{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.line-editor select{flex:2;width:40%;font-size:13px}
.line-editor input{flex:1;width:20%;font-size:13px}

.receipt-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #e2edfa}
.receipt-line strong{display:block;font-size:13.5px;font-weight:750}
.receipt-line small{display:block;color:#738ea9;font-size:11.5px;font-weight:500;margin-top:6px}
.receipt-line input{max-width:150px}

.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;font-weight:600;margin:20px 0}
.check-grid label{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f3f7fd;border-radius:7px}
.check-grid small{margin-left:auto;font-size:11px;color:#7893af}

.count-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.count-grid>div{background:#f3f7fd;border-radius:8px;padding:16px}
.count-grid strong{font-size:13.5px;font-weight:750}
.count-grid small{display:block;margin:5px 0 15px;font-size:11.5px;color:#718ca8}
.count-grid .field{margin-bottom:8px}

dialog{border:1px solid #d0e1f7;border-radius:14px;width:min(580px,calc(100vw - 32px));max-height:90vh;padding:0;color:var(--ink);box-shadow:0 24px 100px #132d2450}
dialog.wide{width:min(880px,calc(100vw - 32px))}
dialog::backdrop{background:#112a4577;backdrop-filter:blur(3px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--border)}
.modal-head .eyebrow{font-size:10px;margin-bottom:6px}
.modal-head h2{font-size:20px;font-weight:800}
.modal-body{padding:24px 26px}
.modal-body>p{font-size:13.5px;line-height:1.6}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px;border-top:1px solid var(--border)}
.modal-body>.modal-foot{padding:16px 0 0;margin-top:20px}
.modal-body .table-tools{padding:10px 0}
.modal-body .table-scroll{border:1px solid var(--border);border-radius:7px}

#toast-container{position:fixed;right:24px;bottom:24px;z-index:10000;max-width:400px}
.toast{padding:14px 20px;background:#1d4ed8;color:#fff;font-size:13px;font-weight:600;border-radius:9px;box-shadow:0 8px 26px #152d2633;margin-top:9px;line-height:1.5}
.toast.error{background:#b91c1c}

.skip{position:absolute;top:-100px;left:20px;background:#fff;padding:10px;z-index:100}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mobile-menu{display:none}
.loading{padding:80px;text-align:center;color:#6f8aa9;font-size:15px;font-weight:600}
#print-area{display:none}
[hidden]{display:none!important}

@media(min-width:1600px){
  .menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1200px){
  .sidebar{width:215px;padding-left:14px;padding-right:14px}
  .workspace{margin-left:215px}
  main{padding:20px}
  .topbar{padding:0 20px}
  .brand{font-size:22px}
  .breadcrumb{display:none}
  .top-controls{margin-left:auto}
  .stats{gap:12px}
  .stat{padding:18px}
  .stat strong{font-size:24px}
  .pos-layout{grid-template-columns:1fr 340px;gap:14px}
  .menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kanban{gap:12px}
  .kanban-column{padding:10px}
  .kitchen-card{padding:12px}
  .grid-2.wide-left{grid-template-columns:1.25fr 1fr}
}
@media(max-width:960px){
  .sidebar{transform:translateX(-100%);width:245px;transition:transform .22s cubic-bezier(0.16,1,0.3,1);z-index:99;box-shadow:4px 0 24px rgba(0,0,0,0.25)}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vw rgba(15,34,58,0.45)}
  .workspace{margin-left:0}
  .mobile-menu{display:inline-grid}
  .brand{font-size:20px;margin-left:5px}
  .nav-link{font-size:12px;padding:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-2.wide-left{grid-template-columns:1fr}
  .kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-heading{align-items:flex-start}
  .page-heading h1{font-size:26px}
  .pos-layout{grid-template-columns:1fr}
  .cart-panel{position:static;max-height:none}
  .menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .master-layout{grid-template-columns:1fr}
  .master-nav{flex-direction:row;overflow:auto;gap:6px}
  .master-nav button{white-space:nowrap;gap:9px}
  .demo-strip time{display:none}
  .app-footer>span{display:none}
  .heading-actions{flex-wrap:wrap}
  .bar-chart{gap:18px}
}
@media(max-width:700px){
  .topbar{height:66px;padding:0 15px;gap:8px;position:relative;z-index:21}
  .top-controls{gap:6px;max-width:calc(100% - 40px)}
  .top-controls select{max-width:42vw;font-size:11px;padding:8px 6px}
  .top-controls .icon-button{display:none}
  .demo-strip{padding:9px 15px;font-size:10px}
  .page-heading{display:block}
  .heading-actions{margin-top:16px}
  main{padding:22px 16px}
  .stats{gap:10px}
  .stat{padding:16px}
  .stat strong{font-size:22px}
  .stat small{font-size:11px}
  .stat>div{font-size:11.5px}
  .panel-heading{padding:16px}
  .panel-heading h2{font-size:16px}
  .table-tools{padding-left:16px;padding-right:16px}
  .menu-grid{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-info{padding:8px}
  .menu-art{height:72px}
  .kanban{grid-template-columns:1fr 1fr;gap:8px}
  .kitchen-id{flex-direction:column}
  .filter-bar{flex-wrap:wrap;gap:8px}
  .filter-bar .field{flex:1;min-width:120px}
  .filter-bar .btn{flex:1}
  .form-grid,.count-grid{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
  .modal-body{padding:20px}
  .modal-head{padding:20px}
  .line-editor{gap:5px}
  .line-editor input,.line-editor select{padding:9px 6px;font-size:11px}
  .journal-line{flex-wrap:wrap}
  .journal-line select{flex-basis:100%}
  .journal-line input{flex:1}
  .receipt-line{gap:10px}
  .receipt-line input{max-width:110px}
  .app-footer{padding:10px 16px 22px}
  .toast{font-size:12px}
  #toast-container{right:12px;bottom:12px;left:12px;max-width:none}
  .details{grid-template-columns:110px 1fr}
  .tabs{gap:18px}
  .bar-chart{gap:14px}
  .chart-summary{display:block}
  .chart-summary span{display:block;margin-top:7px}
  .table-summary{display:none}
}
@media print{
  body>*{display:none!important}
  #print-area{display:block!important;color:#000;font:12px monospace;max-width:80mm;margin:0 auto;padding:10px}
  #print-area table{font-size:11px}
  #print-area td{padding:5px 0}
  #print-area h2{text-align:center;margin:8px 0}
  #print-area .print-note{font-size:9px;border-top:1px dashed #000;padding-top:10px}
  dialog{display:none!important}
  @page{margin:10mm}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.food-illustration{width:100%;height:100%;object-fit:contain;position:relative;filter:drop-shadow(0 3px 2px #1e45770c)}

.receipt-paper{box-sizing:border-box;background:#fff;color:#000;font-family:monospace;line-height:1.4;overflow-wrap:anywhere;text-align:left;margin:0 auto;max-width:100%}
.receipt-paper header{text-align:center;border-bottom:1px dashed #000;padding-bottom:8px;margin-bottom:8px}
.receipt-paper h2{font-size:1.3em;letter-spacing:0;margin:5px 0}
.receipt-paper h3{font-size:1.1em;margin:8px 0}
.receipt-paper p{font-size:inherit;line-height:inherit;margin:8px 0}
.receipt-paper .receipt-logo{display:block;max-width:65%;max-height:20mm;margin:0 auto 5px;object-fit:contain}
.receipt-multiline{white-space:pre-wrap}
.receipt-footer{text-align:center}
.receipt-paper table{font-size:inherit;width:100%;table-layout:fixed}
.receipt-paper td,.receipt-paper td:first-child{padding:4px 0;border:0;color:#000;vertical-align:top}
.receipt-paper td:last-child{text-align:right;width:37%;padding-left:5px}
.receipt-paper tr:hover{background:transparent}
.receipt-paper .print-note{font-size:.75em;border-top:1px dashed #000;padding-top:6px}
.printer-editor{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.printer-preview-wrap{background:#eef4fc;border-radius:10px;padding:16px;overflow:auto}
.printer-preview-wrap>h3{font-size:14px;font-weight:750}
.printer-preview-wrap>.btn{margin-top:16px}
#receipt-preview{overflow:auto;max-height:560px}
.printer-editor textarea{width:100%}
.printer-editor .check-grid{grid-template-columns:1fr}
@media(max-width:700px){
  .printer-editor{grid-template-columns:1fr}
  #printer-settings-button{font-size:11px;padding:8px 6px}
  .top-controls select{max-width:32vw}
}
@media print{
  #print-area{max-width:none!important;width:auto!important;margin:0!important;padding:0!important}
  #print-area .receipt-paper{max-width:none!important;margin:0!important}
  #print-area .receipt-paper h2,#print-area .receipt-paper h3,#print-area .receipt-paper p,#print-area .receipt-paper table,#print-area .receipt-paper td{font-family:inherit}
  #print-area .receipt-paper table{font-size:inherit}
  #print-area .receipt-paper td{padding:4px 0}
  #print-area .receipt-paper td:last-child{padding-left:5px}
  @page{size:auto;margin:0}
}

.printer-connection{background:#edf5ff;border:1px solid #d4e3f5;border-radius:10px;padding:18px;margin-bottom:22px}
.printer-connection summary{cursor:pointer;font-size:13px;font-weight:700;margin:8px 0 16px}
.printer-connection>p{font-size:12.5px}

/* Thermal Printer Bluetooth & Serial UI (Tangkasir Concept) */
.bt-status-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:9px;background:#fff;border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--ink);transition:all .2s}
.bt-status-bar.connected{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.bt-status-bar.connecting{background:#fffbeb;border-color:#fde68a;color:#92400e}
.bt-status-bar.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.bt-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8;flex-shrink:0}
.bt-dot.connected{background:#10b981;box-shadow:0 0 0 3px #d1fae5}
.bt-dot.connecting{background:#f59e0b;box-shadow:0 0 0 3px #fef3c7;animation:btPulse 1.2s infinite}
@keyframes btPulse{0%,100%{opacity:1}50%{opacity:.4}}
.preset-w-btn{padding:8px 14px;border-radius:8px;border:1.5px solid #d4e3f5;background:#fff;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.preset-w-btn:hover{border-color:#93c5fd;background:#f0f7ff}
.preset-w-btn.active{border-color:#2563eb;background:#eff6ff;color:#2563eb}
#ruler-preview{font-family:monospace;font-size:12px;color:#183653;white-space:pre;line-height:1.4}
.btn.warning{background:#f59e0b;color:#fff;border-color:#f59e0b}
.btn.warning:hover{background:#d97706}


/* Module Launcher Mode */
.launcher-mode .sidebar{display:none}
.launcher-mode .workspace{margin-left:0}
.launcher-mode main{max-width:1280px;padding:42px 40px 55px}
.launcher-mode .topbar{background:#ffffffc9}
.launcher-hero{text-align:center;padding:25px 0 42px}
.launcher-hero .eyebrow{color:#3b7ab8;font-size:11px;font-weight:800;letter-spacing:1.8px}
.launcher-hero h1{font-size:42px;font-weight:850;letter-spacing:-1.3px;color:#163a65;line-height:1.2}
.launcher-hero p{color:#6c84a0;font-size:14.5px;font-weight:500;margin:16px 0 24px}
.launcher-mode{background:radial-gradient(ellipse at 50% 0,#dfedff 0,#f4f8ff 55%)}
.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.module-card{display:block;background:#fff;border:1px solid #dfeafb;border-radius:16px;padding:26px;box-shadow:0 4px 20px #16447a05;transition:transform .16s,box-shadow .16s,border-color .16s}
.module-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #296ac41a;border-color:#9ac5ff}
.module-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#e6f1ff;color:#2563eb;font-size:30px;font-weight:700;margin-bottom:20px}
.module-icon.indigo{background:#eef0ff;color:#6366f1}
.module-icon.cyan{background:#e4f7ff;color:#0284c7}
.module-icon.teal{background:#e7f9f5;color:#0d9488}
.module-icon.orange{background:#fff1e2;color:#ea8b33}
.module-icon.violet{background:#f1eaff;color:#8b5cf6}
.module-icon.sky{background:#e8f5ff;color:#0ea5e9}
.module-card h2{font-size:17px;font-weight:750;margin-bottom:9px;color:var(--ink)}
.module-card p{font-size:13px;font-weight:500;color:#798ea6;min-height:36px;margin-bottom:22px;line-height:1.5}
.module-open{font-size:12px;font-weight:750;color:#2563eb;display:flex;justify-content:space-between;align-items:center}
.module-open b{font-size:17px}
.launcher-note{text-align:center;font-size:12.5px;font-weight:600;color:#849ab3;margin-top:36px}
.launcher-note span{margin:0 10px;color:#5f9de0}

/* Costing & Material flow */
.material-flow{display:flex;align-items:center;gap:18px;padding:20px;border:1px solid #d6e6fa;background:linear-gradient(90deg,#e8f3ff,#f7fbff);border-radius:12px;margin-bottom:24px}
.material-flow span{flex:1;font-size:13px;font-weight:600;color:#2f5f96}
.material-flow b{background:#d0e5ff;color:#1d58a3;font-size:11px;font-weight:750;padding:7px 10px;border-radius:7px;margin-right:8px}
.material-flow i{font-style:normal;color:#6b9cd2}
.material-badge{display:inline-block;font-size:11px;font-weight:750;padding:6px 9px;border-radius:6px;background:#eef5ff;color:#2963a1}
.material-badge.process{background:#edf0ff;color:#5d5dc0}
.material-badge.finished{background:#e8f6ff;color:#187399}

.costing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.step-card{background:#fff;border:1px solid #dbe7f6;border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)}
.step-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1px;background:#e2edfb;color:#1e589c;padding:4px 8px;border-radius:6px;margin-bottom:8px}
.step-card strong{display:block;font-size:14px;font-weight:750;color:#18385e;margin-bottom:4px}
.step-card small{color:#6c87a5;font-size:12px;font-weight:500;line-height:1.4}

.costing-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr);gap:24px;align-items:start}
.cost-form{padding:10px 24px 24px}
.costing-menu-picker{width:100%;font-size:15px;font-weight:700;color:#193f6b;padding:12px 14px;border:1.5px solid #bdd3ee;border-radius:10px;background:#f9fbfe}

.bom-summary-card{background:#f8fbff;border:1.5px solid #cfe0f5;border-radius:12px;padding:18px 20px;margin-bottom:22px}
.bom-summary-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bom-summary-header h3{font-size:17px;font-weight:800;color:#17467a}
.bom-details-collapse{margin-top:16px;border-top:1px solid #d4e4f7;padding-top:14px}
.bom-details-collapse table{background:#fff;border-radius:8px;overflow:hidden}

.cost-card-section{background:#fff;border:1px solid #e1ecf8;border-radius:12px;padding:20px;margin-bottom:22px}
.section-badge-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-badge-header h3{font-size:15px;font-weight:750;color:#1d416b;margin:0}

.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.channel-card{border-radius:12px;padding:18px;border:1.5px solid #dce8f8}
.channel-card.offline{background:#f9fbff;border-color:#cce0f8}
.channel-card.online{background:#faf8ff;border-color:#ddd6fe}
.channel-card-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.channel-icon{font-size:22px}
.channel-card-header h4{margin:0;font-size:14.5px;font-weight:800;color:#1e3e68}
.channel-card.online .channel-card-header h4{color:#4338ca}
.channel-card-header small{font-size:11.5px;font-weight:500;color:#6b84a2}
.channel-subtext{font-size:11px;font-weight:600;color:#64748b;margin-top:12px;line-height:1.4;background:rgba(255,255,255,0.7);padding:8px 10px;border-radius:6px}

.cost-result{position:sticky;top:20px}
.cost-summary{background:#fff;border:1px solid #dbe7f8;border-radius:14px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.hpp-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;font-weight:600;color:#476587;border-bottom:1px solid #f1f5fa}
.hpp-row strong{font-weight:750;color:#1b395d}
.cost-summary .hpp-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:2px dashed #cfe1f7;font-size:14px;font-weight:800;color:#1d4ed8}
.cost-summary .hpp-total b{font-size:19px;color:#1e40af}

.price-result{border-radius:14px;padding:22px;margin-bottom:16px;color:#fff;box-shadow:0 6px 18px rgba(37,99,235,0.18)}
.price-result.offline{background:linear-gradient(135deg,#1d4ed8,#3b82f6)}
.price-result.online{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 6px 18px rgba(79,70,229,0.18)}
.price-badge-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.price-badge-header small{font-size:10.5px;font-weight:800;letter-spacing:1px;opacity:.9}
.channel-pill{background:rgba(255,255,255,0.22);font-size:10px;font-weight:750;padding:3px 8px;border-radius:12px}
.price-figure{display:block;font-size:32px;font-weight:850;letter-spacing:-1px;margin:8px 0 16px}
.price-stat-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12.5px;font-weight:600;border-top:1px solid rgba(255,255,255,0.2)}
.price-stat-row b{font-weight:800}

.cost-action-box{margin-bottom:16px}
.large-btn{padding:14px;font-size:14.5px;border-radius:10px;box-shadow:0 4px 14px rgba(37,99,235,0.3)}
.callout.compact{padding:14px 16px;border-radius:10px;margin-bottom:16px;background:#eef6ff;border:1px solid #d4e5f9;color:#204b78}

@media(max-width:1100px){
  .module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .costing-steps{grid-template-columns:1fr}
  .costing-layout{grid-template-columns:1fr}
  .channel-grid{grid-template-columns:1fr}
  .cost-result{position:static}
}
@media(max-width:700px){
  .launcher-mode main{padding:24px 16px}
  .launcher-hero{padding:20px 0 30px}
  .launcher-hero h1{font-size:30px}
  .launcher-hero p{font-size:12px}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .module-card{padding:18px}
  .module-card h2{font-size:14px}
  .module-card p{font-size:11px}
  .module-icon{width:46px;height:46px;font-size:24px}
  .material-flow{gap:8px;padding:15px 10px}
  .material-flow span{font-size:10px}
  .material-flow b{display:block;width:max-content;margin-bottom:8px;font-size:10px}
  .cost-form{padding:8px 16px 20px}
  .cost-result{display:block}
  .cost-result #cost-results{display:block}
  .cost-result .price-result,.cost-result .cost-summary{margin-bottom:15px}
  .launcher-note{font-size:10px;line-height:2}
  .launcher-note span{margin:0 3px}
}

/* Custom Driver.js Tour Styling */
.tour-btn{font-weight:700;display:inline-flex;align-items:center;gap:5px}
.driver-popover{font-family:var(--font-sans)!important;border-radius:14px!important;padding:18px 20px!important;box-shadow:0 16px 36px rgba(15,34,58,.22)!important;border:1px solid #dce8f8!important;color:var(--ink)!important;max-width:340px!important}
.driver-popover-title{font-size:15.5px!important;font-weight:800!important;color:#153e75!important;margin-bottom:8px!important;line-height:1.3!important}
.driver-popover-description{font-size:13px!important;font-weight:500!important;color:#475569!important;line-height:1.6!important;margin-bottom:14px!important}
.driver-popover-footer{margin-top:10px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.driver-popover-progress-text{font-size:11.5px!important;font-weight:700!important;color:#64748b!important}
.driver-popover-next-btn{background:#2563eb!important;color:#fff!important;border:none!important;border-radius:8px!important;padding:7px 14px!important;font-size:12.5px!important;font-weight:750!important;cursor:pointer!important;box-shadow:0 2px 6px rgba(37,99,235,.3)!important;transition:background .15s ease!important}
.driver-popover-next-btn:hover{background:#1d4ed8!important}
.driver-popover-prev-btn{background:#f1f5f9!important;color:#334155!important;border:1px solid #cbd5e1!important;border-radius:8px!important;padding:6px 12px!important;font-size:12.5px!important;font-weight:700!important;cursor:pointer!important}
.driver-popover-prev-btn:hover{background:#e2e8f0!important}
.driver-popover-close-btn{color:#64748b!important;font-size:18px!important}

/* Period Pills Filter Bar */
.period-pills{display:inline-flex;align-items:center;background:#e9f2fd;padding:4px;border-radius:10px;gap:4px;margin-bottom:20px;border:1px solid #d4e5f9}
.pill-btn{border:none;background:transparent;padding:7px 14px;border-radius:7px;font-size:12.5px;font-weight:700;color:#355982;cursor:pointer;transition:all .15s ease}
.pill-btn:hover{background:#dbeafe;color:#1d4ed8}
.pill-btn.active{background:#2563eb;color:#fff;box-shadow:0 2px 6px rgba(37,99,235,0.25)}

/* Fast Moving & Low Moving Analytics */
.moving-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px}
.velocity-card{background:#fff;border-radius:14px;border:1.5px solid var(--border);padding:22px;box-shadow:var(--shadow)}
.velocity-card.fast{border-color:#bbf7d0;background:linear-gradient(180deg,#f0fdf4 0%,#fff 85px)}
.velocity-card.slow{border-color:#fed7aa;background:linear-gradient(180deg,#fffbeb 0%,#fff 85px)}
.velocity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.velocity-header h3{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.velocity-header.fast h3{color:#15803d}
.velocity-header.slow h3{color:#b45309}
.velocity-list{display:flex;flex-direction:column;gap:12px}
.velocity-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid #edf2f9;border-radius:10px;transition:transform .12s ease}
.velocity-item:hover{transform:translateX(3px);border-color:#cbd5e1}
.velocity-rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;background:#f1f5f9;color:#475569;flex-shrink:0}
.velocity-rank.gold{background:#fef08a;color:#854d0e}
.velocity-rank.silver{background:#e2e8f0;color:#334155}
.velocity-rank.bronze{background:#fed7aa;color:#9a3412}
.velocity-name{flex:1;min-width:0}
.velocity-name strong{display:block;font-size:13.5px;font-weight:750;color:#1e3a5f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.velocity-name small{font-size:11.5px;color:#64748b;font-weight:600}
.velocity-metrics{text-align:right;flex-shrink:0}
.velocity-metrics b{display:block;font-size:14px;font-weight:800;color:#1e293b}
.velocity-metrics small{font-size:11px;font-weight:600}
.velocity-bar-track{width:100%;height:5px;background:#f1f5f9;border-radius:3px;margin-top:5px;overflow:hidden}
.velocity-bar-fill{height:100%;border-radius:3px}
.velocity-bar-fill.green{background:#22c55e}
.velocity-bar-fill.amber{background:#f59e0b}

/* Kitchen Stock Runout Badges */
.runout-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;font-size:11.5px;font-weight:750}
.runout-badge.safe{background:#dcfce7;color:#15803d}
.runout-badge.warning{background:#fef3c7;color:#b45309}
.runout-badge.danger{background:#fee2e2;color:#b91c1c}

/* Urgency Badges */
.urgency-badge{font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px}
.urgency-badge.normal{background:#e0f2fe;color:#0369a1}
.urgency-badge.tinggi{background:#fef3c7;color:#b45309}
.urgency-badge.mendesak{background:#fee2e2;color:#b91c1c;animation:pulseUrgency 1.5s infinite}
@keyframes pulseUrgency{0%,100%{opacity:1}50%{opacity:.6}}

@media(max-width:960px){
  .moving-grid{grid-template-columns:1fr}
  .period-pills{flex-wrap:wrap}
}

/* ============================================================
   KDS & BAR KANBAN BOARD SYSTEM
   ============================================================ */
.kanban-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.kanban-filter-group{display:inline-flex;align-items:center;background:#f1f5f9;padding:3px;border-radius:9px;gap:3px;border:1px solid #cbd5e1}
.kanban-filter-btn{border:none;background:transparent;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:700;color:#475569;cursor:pointer;transition:all .15s}
.kanban-filter-btn:hover{background:#e2e8f0;color:#0f172a}
.kanban-filter-btn.active{background:#2563eb;color:#fff;box-shadow:0 1px 3px rgba(37,99,235,.3)}
.kanban-search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #cbd5e1;border-radius:8px;padding:6px 12px;min-width:240px}
.kanban-search-box input{border:none;outline:none;font-size:12.5px;width:100%;color:#1e293b}
.kanban-stats-bar{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;color:#475569}

.kanban{display:grid;grid-template-columns:repeat(4, minmax(270px, 1fr));gap:16px;align-items:start;overflow-x:auto;padding-bottom:14px}
.kanban-column{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px;min-height:500px;display:flex;flex-direction:column;gap:12px;transition:all .2s ease;position:relative}
.kanban-column.drag-over{background:#eff6ff;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.3);transform:scale(1.008)}

.kanban-column-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:2px solid #e2e8f0}
.kanban-column-header h2{margin:0;font-size:14px;font-weight:800;display:flex;align-items:center;gap:7px;letter-spacing:0.2px}
.kanban-column.col-new .kanban-column-header{border-bottom-color:#93c5fd}
.kanban-column.col-cooking .kanban-column-header{border-bottom-color:#fcd34d}
.kanban-column.col-ready .kanban-column-header{border-bottom-color:#86efac}
.kanban-column.col-completed .kanban-column-header{border-bottom-color:#cbd5e1}

.kanban-count-pill{background:#fff;border:1px solid #cbd5e1;padding:2px 8px;border-radius:12px;font-size:11.5px;font-weight:800;color:#475569}
.kanban-cards-list{display:flex;flex-direction:column;gap:12px;flex:1}

.kitchen-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:13px;box-shadow:0 2px 6px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:9px;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;cursor:grab;position:relative}
.kitchen-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.07);border-color:#cbd5e1}
.kitchen-card:active{cursor:grabbing}
.kitchen-card.dragging{opacity:0.35;transform:scale(0.96)}

.kitchen-card.card-new{border-left:4.5px solid #2563eb}
.kitchen-card.card-cooking{border-left:4.5px solid #d97706}
.kitchen-card.card-ready{border-left:4.5px solid #16a34a}
.kitchen-card.card-completed{border-left:4.5px solid #94a3b8;opacity:0.88}

.kitchen-id{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.kitchen-id b{font-size:13px;font-weight:800;color:#0f172a;letter-spacing:0.3px}

.kds-timer{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;font-size:11px;font-weight:750}
.kds-timer.safe{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.kds-timer.warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.kds-timer.danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;animation:pulseTimer 1.2s infinite}
@keyframes pulseTimer{0%,100%{opacity:1}50%{opacity:.65}}

.kds-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#475569}
.kds-badge-type{padding:2px 7px;border-radius:4px;font-weight:750;font-size:11px}
.kds-badge-type.dine-in{background:#e0f2fe;color:#0369a1}
.kds-badge-type.takeaway{background:#fef3c7;color:#92400e}
.kds-badge-type.delivery{background:#f3e8ff;color:#6b21a8}

.kitchen-lines{background:#f8fafc;border-radius:7px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;border:1px solid #f1f5f9}
.kds-item-row{display:flex;align-items:flex-start;gap:7px;cursor:pointer;line-height:1.4}
.kds-item-row input[type=checkbox]{accent-color:#2563eb;cursor:pointer;margin-top:2px}
.kds-item-row.checked{text-decoration:line-through;color:#94a3b8}

.kitchen-note{background:#fffbeb;border:1px dashed #fde68a;border-radius:6px;padding:5px 8px;font-size:11.5px;color:#92400e;line-height:1.35}
.kitchen-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.kitchen-actions .btn{padding:5px 10px;font-size:11.5px;border-radius:6px}

@media(max-width:1200px){
  .kanban{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:720px){
  .kanban{grid-template-columns:1fr}
}

/* CRM & KPI Styling */
.voucher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:14px;}
.voucher-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:10px;transition:transform .15s ease,box-shadow .15s ease;}
.voucher-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.06);}
.voucher-points{font-size:18px;font-weight:800;color:#0284c7;}
.grade-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;font-weight:800;font-size:13px;}
.grade-badge.grade-s{background:#fef3c7;color:#b45309;border:1px solid #fcd34d;}
.grade-badge.grade-a{background:#dcfce7;color:#15803d;border:1px solid #86efac;}
.grade-badge.grade-b{background:#e0f2fe;color:#0369a1;border:1px solid #7dd3fc;}
.grade-badge.grade-c{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;}
.score-pill{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:12px;font-weight:700;}
.shift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px;}
.shift-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px;}