/* ===== styles.css — base styles ===== */

  :root{
    --espresso:#2B1B12;
    --espresso-light:#3E2A1C;
    --espresso-lighter:#523823;
    --cream:#FAF3EA;
    --cream-dark:#F0E4D2;
    --paper:#FFFDF9;
    --caramel:#C17A3D;
    --caramel-dark:#A6632D;
    --caramel-light:#E8B27F;
    --sage:#7C9473;
    --sage-dark:#5F7457;
    --brick:#B3452F;
    --ink:#2B1B12;
    --muted:#8A7A6D;
    --line:#E4D6C3;
    --white:#FFFFFF;
    --shadow: 0 4px 16px rgba(43,27,18,0.10);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:14px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{ font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif; letter-spacing:-0.01em; }
  .mono{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace; font-variant-numeric:tabular-nums; }
  button{ font-family:inherit; cursor:pointer; }
  input,select,textarea{ font-family:inherit; }
  ::selection{ background:var(--caramel-light); }

  /* ---------- APP SHELL ---------- */
  #app{ min-height:100vh; }
  .shell{ display:flex; min-height:100vh; }
  .sidebar{
    width:216px; background:var(--espresso); color:var(--cream);
    display:flex; flex-direction:column; align-items:stretch; padding:18px 14px;
    flex-shrink:0; position:relative; overflow-y:auto;
  }
  .sidebar-brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; position:relative; }
  .sidebar-collapse-btn{
    margin-left:auto; width:24px; height:24px; border-radius:7px; border:none; background:rgba(255,255,255,0.08);
    color:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    opacity:0.6; transition:opacity .15s ease;
  }
  .sidebar-collapse-btn:hover{ opacity:1; background:rgba(255,255,255,0.15); }
  .sidebar.collapsed{ width:72px; padding:18px 10px; }
  .sidebar.collapsed .sidebar-brand-name,
  .sidebar.collapsed .sidebar-profile-text,
  .sidebar.collapsed .sidebar-terminal-chip,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .navbtn span,
  .sidebar.collapsed .navgroup-chevron,
  .sidebar.collapsed .navsubmenu{ display:none; }
  .sidebar.collapsed .sidebar-collapse-btn{ margin-left:0; position:absolute; right:-8px; top:0; background:var(--espresso-lighter); }
  .sidebar.collapsed .sidebar-profile{ justify-content:center; padding:11px 4px; }
  .sidebar.collapsed .navbtn{ justify-content:center; padding:10px 6px; }
  .sidebar .logo{
    width:38px;height:38px;border-radius:10px;
    background:radial-gradient(circle at 35% 30%, var(--caramel-light), var(--caramel) 60%, var(--caramel-dark));
    display:flex;align-items:center;justify-content:center;
    font-family:Georgia,'Iowan Old Style',serif; font-weight:700; font-size:17px; color:var(--espresso);
    box-shadow:0 2px 8px rgba(0,0,0,0.3); flex-shrink:0;
  }
  .sidebar-brand-name{ font-weight:800; font-size:14px; letter-spacing:0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-profile{
    display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:12px;
    background:rgba(255,255,255,0.06); margin-bottom:18px;
  }
  .sidebar-avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0; color:white; font-weight:800; font-size:12.5px;
    display:flex; align-items:center; justify-content:center;
  }
  .sidebar-profile-text{ min-width:0; }
  .sidebar-profile-name{ font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-profile-role{ font-size:10.5px; opacity:0.55; text-transform:capitalize; }
  .sidebar-terminal-chip{
    width:100%; text-align:left; border:none; background:rgba(255,255,255,0.05); color:var(--cream);
    font-size:10.5px; font-weight:600; padding:6px 10px; border-radius:8px; margin-bottom:14px; opacity:0.6;
    cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sidebar-terminal-chip:hover{ opacity:1; background:rgba(255,255,255,0.1); }
  .nav-section-label{
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; opacity:0.4;
    padding:16px 12px 6px;
  }
  .navlist{ display:flex; flex-direction:column; gap:1px; }
  .navbtn{
    width:100%; border:none; background:transparent; color:var(--cream);
    opacity:0.72; border-radius:9px; display:flex; flex-direction:row; align-items:center;
    justify-content:flex-start; gap:11px; padding:10px 12px; margin-bottom:1px; transition:all .15s ease;
    font-size:13px; font-weight:600; letter-spacing:0.01em; text-align:left;
  }
  .navbtn svg{ width:18px; height:18px; flex-shrink:0; }
  .navbtn:hover{ opacity:1; background:var(--espresso-light); }
  .navbtn.active{ opacity:1; background:var(--caramel); color:var(--espresso); font-weight:700; }
  .navbtn.active svg{ color:var(--espresso); }
  .navgroup-chevron{ margin-left:auto; flex-shrink:0; transition:transform .15s ease; opacity:0.6; }
  .navgroup-chevron.open{ transform:rotate(90deg); }
  .navsubmenu{ max-height:0; overflow:hidden; display:flex; flex-direction:column; transition:max-height .2s ease; padding-left:29px; }
  .navsubmenu.open{ max-height:400px; }
  .navsub-btn{
    border:none; background:transparent; color:var(--cream); opacity:0.62; text-align:left;
    padding:8px 10px; font-size:12.5px; font-weight:500; border-radius:7px; margin:1px 0; cursor:pointer;
  }
  .navsub-btn:hover{ opacity:0.9; background:var(--espresso-light); }
  .navsub-btn.active{ opacity:1; color:var(--caramel-light); font-weight:700; }
  .sidebar-bottom{ margin-top:auto; display:flex; flex-direction:column; align-items:center; }

  .main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .topbar{
    height:64px; background:var(--paper); border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex-shrink:0;
  }
  .topbar .title{ font-size:19px; font-weight:600; }
  .topbar .sub{ color:var(--muted); font-size:12.5px; margin-top:1px; }
  .topbar-right{ display:flex; align-items:center; gap:16px; }
  .clock{ color:var(--muted); font-size:12.5px; }
  .userchip{
    display:flex; align-items:center; gap:10px; background:var(--cream-dark);
    padding:6px 14px 6px 6px; border-radius:30px;
  }
  .avatar{
    width:30px;height:30px;border-radius:50%; background:var(--caramel); color:white;
    display:flex;align-items:center;justify-content:center; font-weight:700; font-size:13px;
  }
  .userchip .name{ font-weight:600; font-size:13px; line-height:1.1; }
  .userchip .role{ font-size:11px; color:var(--muted); text-transform:capitalize; }
  .logoutbtn{
    border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:8px;
    padding:8px 14px; font-size:12.5px; font-weight:600;
  }
  .logoutbtn:hover{ background:var(--cream-dark); }
  .shift-start-btn{ background:var(--sage); color:#fff; border:none; padding:9px 16px; border-radius:20px; font-weight:700; font-size:12.5px; }
  .shift-start-btn:hover{ background:var(--sage-dark); }
  .shift-chip{ display:flex; align-items:center; gap:10px; background:var(--cream-dark); padding:6px 8px 6px 14px; border-radius:20px; }
  .shift-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); flex-shrink:0; }
  .shift-chip .info{ font-size:11.5px; line-height:1.2; }
  .shift-chip .info .lbl{ font-weight:700; color:var(--ink); }
  .shift-chip .info .val{ color:var(--muted); }
  .shift-chip-btn{ border:1px solid var(--line); background:var(--white); padding:6px 10px; border-radius:14px; font-size:11.5px; font-weight:700; }
  .shift-chip-btn.end{ background:var(--brick); border-color:var(--brick); color:#fff; }

  .content{ flex:1; overflow-y:auto; overflow-x:auto; padding:22px 24px 40px; }

  /* ---------- LOGIN ---------- */
  .login-wrap{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 15% 20%, rgba(193,122,61,0.18), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(124,148,115,0.15), transparent 45%),
      var(--espresso);
    padding:20px;
  }
  .login-card{
    width:380px; background:var(--paper); border-radius:18px; padding:38px 34px 30px;
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
  }
  .login-logo{
    width:56px;height:56px;border-radius:50%; margin:0 auto 16px;
    background:radial-gradient(circle at 35% 30%, var(--caramel-light), var(--caramel) 60%, var(--caramel-dark));
    display:flex;align-items:center;justify-content:center; font-family:Georgia,'Iowan Old Style',serif;
    font-weight:700; font-size:24px; color:var(--espresso);
  }
  .login-card h1{ text-align:center; font-size:24px; margin:0 0 2px; }
  .login-card .tag{ text-align:center; color:var(--muted); font-size:12.5px; margin-bottom:26px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
  .field input, .field select{
    width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--line); background:var(--white);
    font-size:14.5px; outline:none; transition:border .15s;
  }
  .field input:focus, .field select:focus{ border-color:var(--caramel); }
  .btn-primary{
    width:100%; background:var(--caramel); color:white; border:none; padding:12px; border-radius:9px;
    font-weight:700; font-size:14.5px; margin-top:6px; transition:background .15s;
  }
  .btn-primary:hover{ background:var(--caramel-dark); }
  .login-error{ background:#FBE7E2; color:var(--brick); padding:9px 12px; border-radius:8px; font-size:12.5px; margin-bottom:14px; font-weight:600;}
  .demo-accounts{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--line); }
  .demo-accounts .lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; margin-bottom:9px; }
  .demo-row{ display:flex; gap:7px; }
  .demo-chip{
    flex:1; border:1px solid var(--line); background:var(--cream); border-radius:8px; padding:8px 4px;
    font-size:11.5px; font-weight:600; text-align:center; color:var(--espresso);
  }
  .demo-chip:hover{ background:var(--cream-dark); }

  /* ---------- GENERIC ---------- */
  .card{ background:var(--paper); border-radius:14px; border:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,0.04); }
  .btn{
    border:1px solid var(--line); background:var(--white); padding:9px 15px; border-radius:9px;
    font-weight:600; font-size:13px; color:var(--ink); display:inline-flex; align-items:center; gap:6px;
  }
  .btn:hover{ background:var(--cream-dark); }
  .btn-accent{ background:var(--caramel); border-color:var(--caramel); color:white; }
  .btn-accent:hover{ background:var(--caramel-dark); }
  .btn-sage{ background:var(--sage); border-color:var(--sage); color:white; }
  .btn-sage:hover{ background:var(--sage-dark); }
  .btn-danger{ background:var(--white); border-color:var(--brick); color:var(--brick); }
  .btn-danger:hover{ background:#FBE7E2; }
  .btn-sm{ padding:6px 10px; font-size:12px; border-radius:7px; }
  .pill{ padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
  .pill-new{ background:#FBE7E2; color:var(--brick); }
  .pill-preparing{ background:#FDF1DC; color:#95651C; }
  .pill-ready{ background:#E7EFE4; color:var(--sage-dark); }
  .pill-completed{ background:var(--cream-dark); color:var(--muted); }
  .pill-void{ background:#EDEAE4; color:#8A7A6D; text-decoration:line-through; }
  .pill-transfer{ background:#E4EBF5; color:#3E5C8A; }
  .pill-unpaid{ background:#FDF1DC; color:#95651C; }
  .pill-paid{ background:#E7EFE4; color:var(--sage-dark); }
  .toast{
    position:fixed; bottom:24px; right:24px; background:var(--espresso); color:white; padding:13px 20px;
    border-radius:10px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); z-index:999;
    animation: toastin .2s ease;
  }
  @keyframes toastin{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
  .modal-bg{
    position:fixed; inset:0; background:rgba(43,27,18,0.45); display:flex; align-items:center; justify-content:center;
    z-index:500; padding:20px;
  }
  .modal{
    width:440px; max-width:100%; background:var(--paper); border-radius:16px; padding:26px; max-height:88vh; overflow-y:auto;
  }
  .modal h3{ margin:0 0 18px; font-size:19px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }

  /* ---------- BILLING ---------- */
  .billing-grid{ display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; }
  .cat-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
  .cat-tab{
    padding:8px 16px; border-radius:20px; border:1.5px solid var(--line); background:var(--white);
    font-weight:600; font-size:12.5px; color:var(--ink);
  }
  .cat-tab.active{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); }
  .mobile-order-banner{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    background:var(--caramel); color:white; padding:12px 16px; border-radius:12px;
    margin-bottom:14px; font-weight:700; font-size:13.5px; cursor:pointer;
    animation:pulseBanner 2s ease-in-out infinite;
  }
  @keyframes pulseBanner{ 0%,100%{ opacity:1; } 50%{ opacity:0.85; } }
  .mobile-order-banner-arrow{ flex-shrink:0; }
  .searchbox{
    width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line); margin-bottom:16px;
    font-size:14px; background:var(--white);
  }
  .item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  .item-card{
    background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:14px 12px; text-align:left;
    display:flex; flex-direction:column; gap:8px; transition:transform .1s, box-shadow .1s; position:relative;
  }
  .item-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--caramel-light); }
  .item-popular-badge{
    position:absolute; top:8px; right:8px; background:var(--caramel); color:white; font-size:9.5px; font-weight:800;
    padding:2px 7px; border-radius:9px; letter-spacing:0.01em;
  }
  .item-icon{ font-size:26px; }
  .item-name{ font-weight:600; font-size:13.5px; line-height:1.25; }
  .item-cat{ font-size:11px; color:var(--muted); }
  .item-price{ font-weight:700; color:var(--caramel-dark); font-size:14.5px; margin-top:auto; }

  .cart-panel{ position:sticky; top:0; }
  .cart-panel .card{ padding:18px; }
  .cart-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .cart-header h3{ margin:0; font-size:17px; }
  .cart-items{ max-height:280px; overflow-y:auto; margin-bottom:12px; }
  .cart-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
  .cart-item:last-child{ border-bottom:none; }
  .ci-info{ flex:1; min-width:0; }
  .ci-name{ font-weight:600; font-size:13px; }
  .ci-price{ font-size:11.5px; color:var(--muted); }
  .qty-ctrl{ display:flex; align-items:center; gap:6px; }
  .qty-ctrl button{
    width:22px;height:22px; border-radius:6px; border:1px solid var(--line); background:var(--white); font-weight:700;
    display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
  }
  .qty-ctrl span{ min-width:16px; text-align:center; font-weight:600; font-size:13px; }
  .ci-remove{ color:var(--brick); font-size:16px; border:none; background:none; padding:0 2px; }
  .ci-note{ font-size:11px; font-weight:700; color:var(--brick); margin-top:3px; }
  .cart-empty{ text-align:center; color:var(--muted); padding:30px 0; font-size:13px; }
  .field-inline{ margin-bottom:10px; }
  .field-inline label{ font-size:11.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:4px; }
  .field-inline input, .field-inline select{ width:100%; padding:8px 10px; border-radius:7px; border:1.5px solid var(--line); font-size:13px; }
  .totals-row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--muted); }
  .totals-row.grand{ color:var(--ink); font-weight:800; font-size:16.5px; border-top:1.5px dashed var(--line); margin-top:8px; padding-top:10px; }
  .paymethods{ display:flex; gap:7px; margin-bottom:14px; }
  .cash-tender-row{ display:flex; align-items:flex-end; gap:10px; margin:-6px 0 14px; }
  .cash-change-display{ text-align:right; min-width:90px; padding-bottom:2px; }
  .cash-change-display .lbl{ font-size:10.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.02em; }
  .cash-change-display .val{ font-size:18px; font-weight:800; font-family:Georgia,'Iowan Old Style',serif; }
  .paymethods button{
    flex:1; padding:9px 4px; border-radius:8px; border:1.5px solid var(--line); background:var(--white);
    font-size:12px; font-weight:700;
  }
  .paymethods button.active{ background:var(--caramel); border-color:var(--caramel); color:white; }

  /* ---------- KITCHEN ---------- */
  .kds-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
  .kds-col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:0 2px; }
  .kds-col-head h3{ margin:0; font-size:16px; font-weight:800; }
  .kds-count{ background:var(--espresso); color:var(--cream); font-size:12px; font-weight:800; padding:3px 11px; border-radius:12px; }
  .ticket{
    background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-bottom:16px; padding:0;
    box-shadow:0 3px 10px rgba(43,27,18,0.08); position:relative; overflow:hidden;
  }
  .ticket::before{
    content:""; position:absolute; top:0; left:0; right:0; height:5px;
    background:var(--caramel);
  }
  .ticket-new::before{ background:var(--caramel); }
  .ticket-preparing::before{ background:#3B82C4; }
  .ticket-ready::before{ background:var(--sage); }
  .ticket-body{ padding:18px 17px 16px; }
  .ticket-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:9px; }
  .ticket-order{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace; font-weight:800; font-size:18px; }
  .ticket-token{ background:var(--caramel); color:white; font-family:inherit; font-weight:800; font-size:11px; padding:2px 9px; border-radius:10px; margin-left:4px; }
  .ticket-time{ font-size:11.5px; color:var(--muted); font-weight:600; }
  .ticket-meta{ font-size:12.5px; color:var(--muted); margin-bottom:12px; font-weight:500; }
  .ticket-items{ list-style:none; margin:0 0 14px; padding:0; }
  .ticket-items li{ display:flex; justify-content:space-between; font-size:15px; font-weight:600; padding:5px 0; }
  .ticket-items .q{ font-weight:800; color:var(--caramel-dark); margin-right:7px; }
  .ticket-addon{ font-size:12.5px; color:var(--caramel-dark); font-weight:700; margin:0 0 6px 22px; }
  .ticket-note{ font-size:12.5px; color:var(--brick); font-weight:700; margin:0 0 6px 22px; background:#FBE7E2; display:inline-block; padding:2px 8px; border-radius:6px; }
  .ticket-ingredients{ font-size:11px; color:var(--ink); font-weight:500; margin:0 0 4px 22px; line-height:1.5; opacity:0.75; }
  .ticket-prep{ font-size:11px; color:var(--muted); font-weight:400; margin:0 0 8px 22px; line-height:1.4; }
  .ticket-actions{ display:flex; gap:8px; }
  .ticket-actions button{ flex:1; padding:11px 8px; font-size:13px; font-weight:700; }
  .kds-empty{ text-align:center; color:var(--muted); padding:30px 10px; font-size:13px; border:1.5px dashed var(--line); border-radius:12px; }

  /* ---------- DASHBOARD ---------- */
  .dash-grid{ display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start; }
  .dash-reminder-row{
    display:flex; align-items:center; gap:10px; padding:10px 4px; border-top:1px solid var(--line);
    font-size:13px; cursor:pointer; transition:background .12s ease; border-radius:6px;
  }
  .dash-reminder-row:first-of-type{ border-top:none; }
  .dash-reminder-row:hover{ background:var(--cream); }
  .dash-reminder-count{
    flex-shrink:0; min-width:22px; height:22px; padding:0 5px; border-radius:11px; background:var(--brick);
    color:white; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  }
  .dash-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .dash-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:20px 10px; border-radius:14px; border:none; color:white; font-weight:700; font-size:13px;
    cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
  }
  .dash-tile:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.12); }
  .dash-tile-1{ background:linear-gradient(135deg, var(--caramel), var(--caramel-dark)); }
  .dash-tile-2{ background:linear-gradient(135deg, #6B8E6F, #4C6E4F); }
  .dash-tile-3{ background:linear-gradient(135deg, #C08B5C, #9C6B3E); }
  .dash-tile-4{ background:linear-gradient(135deg, #5B7C99, #3F5A73); }
  .dash-kpi-change{ font-size:11.5px; font-weight:700; margin-top:5px; }
  .dash-trend-bars{ display:flex; justify-content:space-between; gap:8px; align-items:flex-end; height:140px; }
  .dash-trend-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
  .dash-trend-bar-track{ flex:1; width:100%; max-width:34px; display:flex; align-items:flex-end; }
  .dash-trend-bar-fill{ width:100%; background:linear-gradient(180deg, var(--caramel-light), var(--caramel)); border-radius:6px 6px 0 0; min-height:3px; }
  .dash-trend-label{ font-size:11px; color:var(--muted); font-weight:700; margin-top:6px; }
  .dash-trend-value{ font-size:10px; color:var(--muted); }
  .dash-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  .dash-recent-order{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid var(--line); cursor:pointer; }
  .dash-recent-order:first-of-type{ border-top:none; }
  .dash-recent-order:hover{ background:var(--cream); border-radius:6px; }
  
  

  /* ---------- MENU / USERS MGMT ---------- */
  .toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  table{ width:100%; border-collapse:collapse; background:var(--paper); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid var(--line); }
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
    padding:11px 14px; border-bottom:1.5px solid var(--line); background:var(--cream-dark);
  }
  tbody td{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:var(--cream); }
  .tag-role{ padding:2px 9px; border-radius:12px; font-size:11px; font-weight:700; text-transform:capitalize; background:var(--cream-dark); }

  /* ---------- BARCODE ---------- */
  .barcode-grid{ display:grid; grid-template-columns:1fr 320px; gap:20px; }
  .bc-list{ display:flex; flex-direction:column; gap:8px; max-height:70vh; overflow-y:auto; }
  .bc-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
  .bc-row input{ width:16px; height:16px; }
  .bc-row .n{ flex:1; font-weight:600; font-size:13px; }
  .bc-row .p{ font-weight:700; color:var(--caramel-dark); font-size:13px; }
  .label-preview{ background:white; border:1.5px dashed var(--line); border-radius:10px; padding:14px; text-align:center; margin-bottom:10px; }
  .label-shop{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); }
  .label-name{ font-weight:700; font-size:13px; margin:3px 0; }
  .label-price{ font-weight:800; font-size:15px; color:var(--espresso); margin-bottom:4px; }

  /* ---------- REPORTS ---------- */
  .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
  .stat-card{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
  .stat-card .lbl{ font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
  .stat-card .val{ font-family:Georgia,'Iowan Old Style',serif; font-size:clamp(17px,4vw,26px); font-weight:600; margin-top:4px; word-break:break-word; overflow-wrap:break-word; line-height:1.15; }
  .report-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
  .chart-bars{ display:flex; align-items:flex-end; gap:6px; height:160px; }
  .chart-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:6px; }
  .chart-bar{ width:100%; max-width:26px; background:linear-gradient(180deg, var(--caramel-light), var(--caramel)); border-radius:4px 4px 0 0; transition:height .2s ease; }
  .chart-bar-label{ font-size:9.5px; color:var(--muted); margin-top:6px; writing-mode:vertical-rl; transform:rotate(180deg); max-height:44px; }
  .paybar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .paybar-label{ width:64px; font-size:12.5px; font-weight:600; }
  .paybar-track{ flex:1; height:9px; background:var(--cream-dark); border-radius:6px; overflow:hidden; }
  .paybar-fill{ height:100%; background:var(--sage); border-radius:6px; }
  .paybar-val{ width:70px; text-align:right; font-size:12px; color:var(--muted); }

  /* ---------- INVENTORY ---------- */
  .pill-low{ background:#FBE7E2; color:var(--brick); }
  .pill-ok{ background:#E7EFE4; color:var(--sage-dark); }
  .pill-pending{ background:#FDF1DC; color:#95651C; }
  .pill-received{ background:#E7EFE4; color:var(--sage-dark); }
  .inv-lines{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
  .inv-line-row{ display:grid; grid-template-columns:1fr 70px 90px 90px 26px; gap:6px; align-items:center; }
  .inv-line-row select, .inv-line-row input{ padding:7px 8px; border-radius:7px; border:1.5px solid var(--line); font-size:12.5px; width:100%; }
  .inv-line-remove{ border:none; background:none; color:var(--brick); font-size:16px; }
  .inv-line-total{ font-size:11.5px; color:var(--muted); text-align:right; }
  .stock-badge-wrap{ display:flex; align-items:center; gap:8px; }
  .stock-bar{ width:60px; height:6px; border-radius:4px; background:var(--cream-dark); overflow:hidden; }
  .stock-bar-fill{ height:100%; background:var(--sage); }
  .stock-bar-fill.low{ background:var(--brick); }

  /* ---------- CUSTOMERS / LOYALTY ---------- */
  .cust-picker{ position:relative; }
  .cust-results{
    position:absolute; top:100%; left:0; right:0; background:var(--white); border:1.5px solid var(--line);
    border-radius:10px; margin-top:4px; max-height:180px; overflow-y:auto; z-index:20; box-shadow:var(--shadow);
  }
  .cust-result-row{ padding:9px 12px; font-size:13px; border-bottom:1px solid var(--line); cursor:pointer; }
  .cust-result-row:last-child{ border-bottom:none; }
  .cust-result-row:hover{ background:var(--cream); }
  .cust-result-row .sub{ font-size:11px; color:var(--muted); }
  .cust-selected-chip{
    display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--cream-dark);
    border-radius:9px; padding:9px 12px; margin-bottom:10px;
  }
  .cust-selected-chip .cname{ font-weight:700; font-size:13px; }
  .cust-selected-chip .cpoints{ font-size:11.5px; color:var(--sage-dark); font-weight:700; }
  .cust-clear{ border:none; background:none; color:var(--brick); font-size:15px; }
  .loyalty-pill{ background:#F4E9D8; color:#8A5A1E; padding:2px 9px; border-radius:12px; font-size:11px; font-weight:700; }

  /* ---------- ACCOUNTING ---------- */
  .acct-balance-row{ display:flex; align-items:baseline; gap:10px; }
  .acct-balance-row .big{ font-family:Georgia,'Iowan Old Style',serif; font-size:30px; font-weight:600; }
  .txn-income{ color:var(--sage-dark); font-weight:700; }
  .txn-expense{ color:var(--brick); font-weight:700; }
  .pill-income{ background:#E7EFE4; color:var(--sage-dark); }
  .pill-expense{ background:#FBE7E2; color:var(--brick); }

  /* ---------- SETTINGS ---------- */
  .settings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .settings-group-header{
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--caramel-dark);
    margin:26px 0 12px; padding-bottom:7px; border-bottom:2px solid var(--caramel); display:flex; align-items:center; gap:7px;
  }
  .settings-group-header:first-child{ margin-top:0; }
  .settings-group-icon{ font-size:14px; }
  .settings-section{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-bottom:18px; }
  .settings-section h3{ margin:0 0 3px; font-size:15.5px; }
  .settings-section .desc{ color:var(--muted); font-size:12px; margin-bottom:16px; }
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); }
  .toggle-row:first-of-type{ border-top:none; }
  .toggle-row .tlabel{ font-size:13px; font-weight:600; }
  .toggle-row .thint{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .switch{ position:relative; width:40px; height:22px; border-radius:20px; background:var(--line); border:none; flex-shrink:0; }
  .switch.on{ background:var(--sage); }
  .switch::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:white; transition:left .15s; }
  .switch.on::after{ left:20px; }
  .settings-save-bar{ position:sticky; bottom:0; background:var(--cream); padding:14px 0 4px; margin-top:-4px; }
  .theme-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .theme-card{
    border:2px solid var(--line); border-radius:12px; padding:14px; text-align:left; background:var(--paper);
    display:flex; flex-direction:column; gap:10px; position:relative;
  }
  .theme-card.active{ border-color:var(--caramel); box-shadow:0 0 0 3px rgba(193,122,61,0.15); }
  .theme-swatches{ display:flex; gap:6px; }
  .theme-swatch-dot{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,0.08); }
  .theme-name{ font-weight:700; font-size:13.5px; color:var(--ink); }
  .theme-tagline{ font-size:11.5px; color:var(--muted); }
  .theme-check{ position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%; background:var(--caramel); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }

  /* ---------- PRINT ---------- */
  #print-area{ display:none; }
  
  .receipt{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace; width:300px; margin:0 auto; }
  .receipt h2{ text-align:center; font-size:16px; margin:0 0 2px; }
  .receipt .center{ text-align:center; }
  .receipt hr{ border:none; border-top:1px dashed #000; margin:8px 0; }
  .receipt .rline{ display:flex; justify-content:space-between; font-size:12px; margin:2px 0; }
  .print-labels{ display:flex; flex-wrap:wrap; gap:10px; }
  .print-label{ width:200px; border:1px dashed #999; padding:10px; text-align:center; }
  .drink-sticker{ padding:2mm; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; text-align:center; box-sizing:border-box; }
  .drink-sticker .sticker-shop{ font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#555; }
  .drink-sticker .sticker-name{ font-size:13px; font-weight:800; margin:2px 0; line-height:1.15; }
  .drink-sticker .sticker-size{ font-size:11px; font-weight:700; display:inline-block; border:1.5px solid #000; border-radius:4px; padding:0px 6px; margin-bottom:3px; }
  .drink-sticker svg{ display:block; margin:2px auto; max-width:100%; }
  .drink-sticker .sticker-order{ font-size:9px; color:#555; font-family:ui-monospace,Menlo,Consolas,monospace; }
  .drink-sticker .sticker-msg{ font-size:9px; font-weight:700; margin-top:3px; border-top:1px dashed #999; padding-top:3px; }
  .a4-sheet{ width:190mm; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:#111; }
  .a4-sheet table{ width:100%; border-collapse:collapse; margin-bottom:14px; }
  .a4-sheet th, .a4-sheet td{ padding:6px 8px; font-size:11.5px; border-bottom:1px solid #ddd; text-align:left; }
  .a4-sheet thead th{ background:#F0E4D2; font-weight:700; }
  @page{ size:A4; margin:14mm; }

  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

  
  

  /* ---------- CUSTOMER MOBILE ORDERING ---------- */
  .corder-wrap{ max-width:480px; margin:0 auto; padding:20px 16px 100px; min-height:100vh; background:var(--cream); }
  .corder-center{ display:flex; flex-direction:column; align-items:center; padding-top:40px; text-align:center; }
  .corder-logo{ width:64px;height:64px;border-radius:16px; background:radial-gradient(circle at 35% 30%, var(--caramel-light), var(--caramel) 60%, var(--caramel-dark)); display:flex;align-items:center;justify-content:center; font-family:Georgia,'Iowan Old Style',serif; font-weight:700; font-size:28px; color:white; margin-bottom:16px; }
  .corder-logo-img{ width:64px;height:64px;border-radius:16px;object-fit:cover;margin-bottom:16px; }
  .corder-title{ font-family:Georgia,'Iowan Old Style',serif; font-size:26px; margin:0 0 4px; }
  .corder-sub{ color:var(--muted); font-size:14px; margin-bottom:28px; }
  .corder-field{ width:100%; text-align:left; margin-bottom:16px; }
  .corder-field label{ font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; display:block; margin-bottom:6px; }
  .corder-field input{ width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--line); font-size:15px; background:var(--paper); }
  .corder-error{ background:#FBE7E2; color:var(--brick); padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; width:100%; }
  .corder-btn-primary{ width:100%; padding:15px; border-radius:12px; border:none; background:var(--caramel); color:white; font-weight:700; font-size:16px; margin-top:8px; }
  .corder-btn-primary:disabled{ opacity:0.4; }
  .corder-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
  .corder-token{ background:var(--caramel); color:white; font-weight:800; padding:6px 14px; border-radius:20px; font-size:13px; }
  .corder-token-big{ background:var(--caramel); color:white; font-weight:800; padding:12px 28px; border-radius:30px; font-size:20px; margin-bottom:14px; align-self:center; }
  .corder-hi{ font-size:13px; color:var(--muted); font-weight:600; }
  .corder-back{ border:none;background:none;color:var(--ink);font-weight:700;font-size:14px; padding:6px 0; }
  .corder-search{ width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line); margin-bottom:12px; font-size:14px; box-sizing:border-box; }
  .corder-cats{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; }
  .corder-cat{ flex-shrink:0; padding:8px 14px; border-radius:20px; border:1.5px solid var(--line); background:var(--paper); font-size:13px; font-weight:600; white-space:nowrap; }
  .corder-cat.active{ background:var(--espresso); color:white; border-color:var(--espresso); }
  .corder-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .corder-item{ background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:10px; text-align:left; display:flex; flex-direction:column; gap:4px; }
  .corder-item-img{ width:100%; height:80px; object-fit:cover; border-radius:9px; margin-bottom:2px; }
  .corder-item-icon{ font-size:32px; text-align:center; padding:14px 0; }
  .corder-item-name{ font-size:12.5px; font-weight:700; line-height:1.25; }
  .corder-item-name span{ color:var(--muted); font-weight:500; }
  .corder-item-price{ font-size:13px; font-weight:800; color:var(--caramel-dark); }
  .corder-empty{ text-align:center; color:var(--muted); padding:40px 0; grid-column:1/-1; }
  .corder-cartbar{ position:fixed; bottom:0; left:0; right:0; max-width:480px; margin:0 auto; background:var(--espresso); color:white; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14px; border-radius:16px 16px 0 0; cursor:pointer; }
  .corder-h2{ font-family:Georgia,'Iowan Old Style',serif; font-size:20px; margin:0 0 14px; }
  .corder-cartlist{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
  .corder-cartrow{ display:flex; justify-content:space-between; align-items:center; background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; }
  .corder-cartrow-price{ font-size:12px; color:var(--muted); }
  .corder-qty{ display:flex; align-items:center; gap:10px; }
  .corder-qty button{ width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line);background:var(--cream);font-weight:700; }
  .corder-totals{ background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:18px; }
  .corder-totalrow{ display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; }
  .corder-totalrow.grand{ font-weight:800; font-size:16px; border-top:1px dashed var(--line); margin-top:6px; padding-top:10px; }
  .corder-paychoice{ display:flex; gap:10px; }
  .corder-paychoice button{ flex:1; padding:14px; border-radius:12px; border:1.5px solid var(--line); background:var(--paper); font-weight:700; font-size:13.5px; }
  .corder-paychoice button.active{ background:var(--caramel); color:white; border-color:var(--caramel); }
  .corder-note{ font-size:12px; color:var(--brick); margin-top:8px; }