/* ============================================================
   Roobesh Foods — Brand theme
   Colours pulled from the printed menu cards:
   red header, green + pink price tags, purple "Natural" script
   ============================================================ */
:root{
  --red:#e2231a;          /* menu header red */
  --red-dark:#b81a13;
  --red-wash:#fdeceb;
  --green:#1f9d4d;        /* customer-rate green tag */
  --green-dark:#177a3b;
  --green-wash:#e8f6ee;
  --pink:#e6187f;         /* MRP pink tag */
  --pink-wash:#fce7f2;
  --purple:#7b2c9e;       /* "Natural" script */
  --purple-wash:#f3e9f8;
  --amber:#e0921a; --amber-wash:#fdf3e2;
  --ink:#1f1a24; --ink-soft:#6b6570; --line:#ecdfe0; --line-soft:#f6eeef;
  --bg:#fbf4f4; --card:#ffffff;
  --shadow:0 1px 2px rgba(180,26,19,.05),0 10px 26px rgba(180,26,19,.08);
  --shadow-lg:0 26px 60px rgba(60,10,10,.28);
  --r:16px; --r-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px}

/* ---------- LOGIN (pink brand design) ---------- */
.login-body{background:#fff}
/* scene fills viewport minus the contact bar; card floats over the artwork */
.login-scene{position:relative;min-height:calc(100vh - 56px);overflow:hidden;background:#fff}
/* full artwork, never cropped: fills width, sits at top, wave meets contact bar */
.login-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0}
@media(min-aspect-ratio:16/10){ /* very wide: pin to width so bottom wave shows */
  .login-bg{height:auto;min-height:100%}
}

/* tagline + address, lower-left, on a soft frosted panel for legibility */
.brand-copy{position:absolute;left:44px;bottom:60px;z-index:2;max-width:440px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(4px);border-radius:16px;padding:18px 22px;
  box-shadow:0 8px 26px rgba(180,20,90,.14)}
.brand-copy .tagline{font-family:"Georgia",serif;font-style:italic;font-weight:700;
  font-size:24px;color:#12305a;margin-bottom:14px}
.brand-copy .addr{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;font-weight:700;line-height:1.55;color:#12305a}
.brand-copy .addr .pin{color:var(--pink);font-size:18px;margin-top:1px}

/* welcome card floats top-right */
.welcome-card{position:absolute;top:50%;right:56px;transform:translateY(-50%);z-index:3;
  background:#fff;width:440px;max-width:calc(100% - 32px);border-radius:24px;
  box-shadow:0 30px 70px rgba(180,20,90,.3);padding:34px 42px 30px}
.wc-logo{width:74px;height:74px;margin:0 auto 16px;border-radius:50%;
  background:radial-gradient(circle,#fde6f1,#fff);display:flex;align-items:center;justify-content:center;
  font-size:33px;box-shadow:0 6px 18px rgba(230,24,127,.2)}
.welcome-card h2{text-align:center;font-size:26px;font-weight:800;color:#12305a}
.wc-sub{text-align:center;color:var(--ink-soft);margin:8px 0 24px;font-size:14px}
.welcome-card .field{margin-bottom:16px}
.welcome-card .field label{color:#12305a;font-weight:700;font-size:13.5px;margin-bottom:8px;display:block}
.input-icon{position:relative;display:flex;align-items:center}
.input-icon .ic{position:absolute;left:14px;width:18px;height:18px;color:#d99ab4;pointer-events:none;z-index:1}
.input-icon input.iconed,.welcome-card .input-icon input{width:100%;padding:13px 46px 13px 44px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font-size:14px;transition:.15s}
.welcome-card .input-icon input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-wash)}
.input-icon .eye{position:absolute;right:13px;width:18px;height:18px;color:#d99ab4;cursor:pointer;z-index:1}
.input-icon .eye:hover{color:var(--pink)}
.wc-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px}
.wc-row .rm{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#12305a;cursor:pointer}
.wc-row .rm input{width:18px;height:18px;accent-color:var(--pink)}
.wc-row .fp{color:var(--pink);font-weight:700;font-size:13.5px}
.btn-signin{width:100%;padding:15px;border-radius:14px;color:#fff;font-weight:800;font-size:15.5px;
  background:linear-gradient(90deg,#e6187f,#d81b60);box-shadow:0 10px 24px rgba(230,24,127,.35);
  display:flex;align-items:center;justify-content:center;gap:10px;transition:.15s}
.btn-signin:hover{filter:brightness(1.05);transform:translateY(-1px)}
.wc-or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--ink-soft);font-size:13px}
.wc-or::before,.wc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.premium{display:flex;gap:13px;align-items:center;background:var(--pink-wash);border-radius:16px;padding:14px 16px}
.premium .p-ic{width:50px;height:50px;border-radius:12px;background:#fff;display:flex;align-items:center;
  justify-content:center;font-size:25px;flex-shrink:0}
.premium .p-txt{font-size:12.5px;color:#5a4b52;line-height:1.5}
.premium .p-txt b{color:var(--pink);font-size:14px}
.alert{padding:11px 14px;border-radius:12px;font-size:13px;margin-bottom:16px;font-weight:600}
.alert.err{background:var(--red-wash);color:var(--red-dark)}

/* bottom contact bar */
.login-contact{height:56px;background:linear-gradient(90deg,#e6187f,#c2145f);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:48px;font-size:15px;font-weight:700;flex-wrap:wrap;padding:0 20px}

/* shared .field defaults for the rest of the app */
.field{margin-bottom:17px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:#fdf9f9;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);
  background:#fff;box-shadow:0 0 0 4px var(--red-wash)}
.btn-block{width:100%;padding:14px;background:var(--red);color:#fff;font-weight:800;
  border-radius:var(--r-sm);font-size:15px;transition:.15s;letter-spacing:.02em}
.btn-block:hover{background:var(--red-dark)}
.hint{margin-top:20px;padding:13px;background:var(--purple-wash);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--purple);line-height:1.55}

/* ---------- APP SHELL (dashboard design) ---------- */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:30;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fff 0%,#ffeef5 55%,#fbdcea 100%);border-right:1px solid #f6d6e4;overflow:hidden}
.sb-logo{padding:22px 18px 14px;text-align:center}
.sb-natural{font-family:"Brush Script MT",cursive;font-size:34px;font-weight:700;color:var(--pink);line-height:1}
.sb-badge{font-size:13px;font-weight:800;margin-top:2px}
.sb-badge{color:#127cc4}
.sb-company{font-family:"Arial Black",Arial,sans-serif;font-weight:900;color:var(--red);font-size:19px;margin-top:6px;letter-spacing:.3px}
.sb-nav{flex:1;padding:14px 14px;overflow-y:auto}
.sb-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;
  color:#7a5a66;font-weight:700;font-size:14px;width:100%;text-align:left;transition:.14s;margin-bottom:4px;position:relative}
.sb-item .ic{width:20px;text-align:center;font-size:16px}
.sb-item .arr{position:absolute;right:12px;color:#c99;font-weight:700}
.sb-item:hover{background:#ffe1ee;color:var(--pink)}
.sb-item.active{background:linear-gradient(90deg,var(--pink),#d81b60);color:#fff;box-shadow:0 8px 18px rgba(230,24,127,.32)}
.sb-item.active .arr{color:rgba(255,255,255,.85)}
.sb-bowl{margin-top:auto;line-height:0}
.sb-bowl img{width:100%;display:block}

.main{margin-left:250px;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 26px;gap:14px;position:sticky;top:0;z-index:20}
.topbar .spacer{flex:1}
.tb-branch{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:9px 15px;font-weight:700;font-size:13.5px;color:#5a4b52;cursor:pointer}
.tb-branch span{color:#c99}
.tb-bell{position:relative;font-size:20px;cursor:pointer;padding:4px}
.tb-bell .badge{position:absolute;top:-2px;right:-4px;background:var(--pink);color:#fff;
  font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:100px;display:flex;
  align-items:center;justify-content:center;padding:0 4px}
.tb-user{display:flex;align-items:center;gap:10px;cursor:pointer}
.tb-user .av{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,#fde6f1,#fff);
  display:flex;align-items:center;justify-content:center;font-size:20px;border:1.5px solid #f6d6e4}
.tb-user .who{line-height:1.25}
.tb-user .who b{font-size:14px;color:#12305a;display:block}
.tb-user .who span{font-size:12px;color:var(--ink-soft)}
.tb-user .cx{color:#c99}
.tb-logout{color:var(--ink-soft);font-size:18px;padding:6px;border-radius:8px}
.tb-logout:hover{background:var(--red-wash);color:var(--red)}
.gst-badge{padding:6px 13px;border-radius:100px;font-size:12px;font-weight:800;background:var(--green-wash);color:var(--green-dark)}
.hamburger{display:none;font-size:22px;width:40px;height:40px;border-radius:9px;align-items:center;justify-content:center;color:var(--ink)}
.hamburger:hover{background:var(--red-wash)}
.tb-mobile-brand{display:none;align-items:center;gap:8px;font-weight:800;font-size:16px;color:var(--pink)}
.sb-scrim{display:none;position:fixed;inset:0;background:rgba(60,10,10,.45);z-index:29}
.sb-scrim.show{display:block}

.view{padding:24px 26px 30px;max-width:1320px;flex:1;width:100%}

/* app bottom contact bar */
.app-contact{background:#ffe4ef;color:var(--pink);display:flex;align-items:center;justify-content:center;
  gap:60px;font-size:15px;font-weight:800;padding:18px 20px;flex-wrap:wrap;border-top:1px solid #f8cfe0}

/* grids */
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

/* dashboard welcome */
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.dash-head h1{font-size:26px;font-weight:800;color:#12305a}
.dash-head p{color:var(--ink-soft);margin-top:4px;font-size:14px}
.date-chip{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 16px;font-weight:700;font-size:13.5px;color:#5a4b52}

/* stat cards (dashboard) */
.dstat{border-radius:18px;padding:22px;position:relative;overflow:hidden;border:none}
.dstat .top{display:flex;align-items:center;justify-content:space-between}
.dstat .lbl{font-size:13.5px;color:#7a6b72;font-weight:700}
.dstat .ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.dstat .val{font-size:30px;font-weight:800;margin-top:14px;color:#12305a;letter-spacing:-.02em}
.dstat .sub{font-size:12.5px;font-weight:700;margin-top:6px}
.dstat.pink{background:linear-gradient(135deg,#fde7f0,#fdd5e6)}
.dstat.pink .ic{background:linear-gradient(135deg,var(--pink),#d81b60)}
.dstat.amber{background:linear-gradient(135deg,#fdf0d8,#fce6c0)}
.dstat.amber .ic{background:linear-gradient(135deg,#f5a623,#e0921a)}
.dstat.violet{background:linear-gradient(135deg,#efe6fb,#e5d6f8)}
.dstat.violet .ic{background:linear-gradient(135deg,#9b6ef0,#7c5cff)}
.dstat.green{background:linear-gradient(135deg,#e2f6e6,#d0f0d6)}
.dstat.green .ic{background:linear-gradient(135deg,#39c463,#1f9d4d)}
.dstat .sub a{color:var(--pink);font-weight:800;text-decoration:underline}

/* panel header */
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.panel-h h3{font-size:16px;font-weight:800;color:#12305a;display:flex;align-items:center;gap:8px}
.panel-h .va{color:var(--pink);font-weight:800;font-size:13px}
.mini-select{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:700;font-size:13px;color:#5a4b52;background:#fff}

/* line chart (svg) */
.linechart{padding:0 18px 12px}
.line-foot{display:flex;border-top:1px solid var(--line-soft);margin:0 0 4px}
.line-foot > div{flex:1;padding:16px 22px}
.line-foot .k{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.line-foot .v{font-size:18px;font-weight:800;color:#12305a;margin-top:4px}
.line-foot .v.pink{color:var(--pink)}

/* ranked product list */
.rank-row{display:flex;align-items:center;gap:13px;padding:12px 22px;border-top:1px solid var(--line-soft)}
.rank-row .rk{width:22px;height:22px;border-radius:50%;background:var(--amber);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank-row .rk.r1{background:#f5a623}.rank-row .rk.r2{background:#c9a227}.rank-row .rk.r3{background:#d98a3d}
.rank-row .th{width:40px;height:40px;border-radius:10px;background:var(--pink-wash);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.rank-row .nm{flex:1}.rank-row .nm b{font-size:13.5px;color:#12305a;display:block}
.rank-row .nm span{font-size:11.5px;color:var(--ink-soft)}
.rank-row .pr{text-align:right}.rank-row .pr b{font-size:13.5px;color:#12305a;display:block}
.rank-row .pr span{font-size:11.5px;color:var(--ink-soft)}

/* alert/order rows */
.mini-row{display:flex;align-items:center;gap:12px;padding:12px 22px;border-top:1px solid var(--line-soft)}
.mini-row .th{width:38px;height:38px;border-radius:9px;background:var(--pink-wash);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.mini-row .nm{flex:1}.mini-row .nm b{font-size:13px;color:#12305a;display:block}
.mini-row .nm span{font-size:11.5px;color:var(--ink-soft)}
.tag-left{background:var(--red-wash);color:var(--red);font-weight:800;font-size:12px;padding:5px 11px;border-radius:100px}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:20px;padding:18px 22px;flex-wrap:wrap}
.donut{width:160px;height:160px;border-radius:50%;position:relative;flex-shrink:0}
.donut::after{content:"";position:absolute;inset:30px;background:#fff;border-radius:50%}
.donut .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.donut .ctr small{font-size:11px;color:var(--ink-soft)}
.donut .ctr b{font-size:19px;font-weight:800;color:#12305a}
.donut-legend{flex:1;min-width:160px}
.dl{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px}
.dl i{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.dl .nm{flex:1;font-weight:700;color:#12305a}
.dl .nm small{display:block;font-weight:600;color:var(--ink-soft);font-size:11px}
.dl .amt{text-align:right;font-weight:700;color:#12305a}
.dl .amt small{display:block;color:var(--ink-soft);font-weight:600;font-size:11px}

/* hero */
.hero{background:linear-gradient(120deg,var(--red) 0%,var(--pink) 100%);border-radius:18px;
  padding:24px 26px;color:#fff;position:relative;overflow:hidden;box-shadow:0 16px 36px rgba(226,35,26,.3)}
.hero::after{content:"🍦";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:110px;opacity:.15}
.hero .greet{font-size:13px;opacity:.92;font-weight:600}
.hero h2{font-size:25px;font-weight:800;margin-top:4px}
.hero .hrow{display:flex;gap:38px;margin-top:20px;flex-wrap:wrap}
.hero .hrow .k{font-size:12px;opacity:.9;font-weight:600}
.hero .hrow .v{font-size:23px;font-weight:800;margin-top:3px}
.hero-actions{margin-top:20px;display:flex;gap:10px}
.hero-actions a{padding:10px 18px;border-radius:100px;font-weight:700;font-size:13px;
  background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);transition:.15s}
.hero-actions a:hover{background:#fff;color:var(--red)}

/* stat cards */
.stat{padding:18px 20px}
.stat .lbl{font-size:12.5px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:8px}
.stat .lbl .dot{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:15px}
.stat .val{font-size:25px;font-weight:800;margin-top:12px}
.stat .delta{font-size:12px;font-weight:600;margin-top:5px}
.up{color:var(--green)} .down{color:var(--red)}

/* section head */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:24px 0 14px}
.sec-head h2{font-size:16px;font-weight:800}
.sec-head p{color:var(--ink-soft);margin-top:4px;font-size:13px}

/* tables */
.tbl-card{overflow:hidden}
.tbl-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;
  border-bottom:1px solid var(--line)}
.tbl-head h3{font-size:15px;font-weight:800}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;padding:11px 18px;background:var(--red)}
td{padding:12px 18px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--red-wash)}
.pill{display:inline-flex;padding:3px 10px;border-radius:100px;font-size:11.5px;font-weight:800}
.pill.ok{background:var(--green-wash);color:var(--green-dark)}
.pill.low{background:var(--amber-wash);color:var(--amber)}
.pill.out{background:var(--red-wash);color:var(--red)}
.pill.gst{background:var(--green-wash);color:var(--green-dark)}
.pill.nogst{background:var(--pink-wash);color:var(--pink)}
/* price tags in the menu style */
.tag-green{display:inline-block;background:var(--green);color:#fff;font-weight:800;
  padding:2px 9px;border-radius:5px;font-size:12.5px}
.tag-pink{display:inline-block;background:var(--pink);color:#fff;font-weight:800;
  padding:2px 9px;border-radius:5px;font-size:12.5px}

/* buttons */
.btn{padding:9px 16px;border-radius:9px;font-weight:700;font-size:13px;transition:.12s;display:inline-block}
.btn.pri{background:var(--red);color:#fff}
.btn.pri:hover{background:var(--red-dark)}
.btn.grn{background:var(--green);color:#fff}
.btn.grn:hover{background:var(--green-dark)}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}
.btn.sm{padding:6px 12px;font-size:12px}

/* billing */
.bill-layout{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
.toggle-gst{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:4px}
.toggle-gst button{padding:8px 20px;border-radius:100px;font-weight:800;font-size:13px;color:var(--ink-soft);transition:.15s}
.toggle-gst button.on{background:var(--red);color:#fff}
.add-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.add-row select,.add-row input{padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fdf9f9;width:100%}
.cart-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line-soft)}
.cart-item .qty{background:var(--bg);border:1px solid var(--line);border-radius:8px;display:flex;align-items:center}
.cart-item .qty button{width:28px;height:30px;font-weight:800;color:var(--red);font-size:15px}
.cart-item .qty span{width:36px;text-align:center;font-weight:700;font-size:13px}
.cart-item .nm{flex:1}.cart-item .nm b{font-size:13.5px;display:block}
.cart-item .nm small{color:var(--ink-soft);font-size:11.5px}
.cart-item .ln{font-weight:800;font-size:13.5px;width:84px;text-align:right}
.cart-item .del{color:var(--red);padding:5px;font-size:15px}
.summary{padding:20px}.summary h3{font-size:15px;font-weight:800;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;color:var(--ink-soft)}
.sum-row b{color:var(--ink);font-weight:800}
.sum-total{display:flex;justify-content:space-between;padding:15px 0 6px;margin-top:8px;
  border-top:2px solid var(--ink);font-size:20px;font-weight:800}
.pay-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.pay-modes button{padding:11px 4px;border:1.5px solid var(--line);border-radius:9px;font-weight:700;
  font-size:11.5px;background:#fff;color:var(--ink-soft);transition:.12s}
.pay-modes button.on{border-color:var(--red);background:var(--red-wash);color:var(--red-dark)}
.empty{padding:50px 20px;text-align:center;color:#c39aa0}
.empty .big{font-size:40px;margin-bottom:12px}

/* invoices page */
.iv-stat{padding:16px 20px}
.iv-stat .k{font-size:12px;color:var(--ink-soft);font-weight:600}
.iv-stat .v{font-size:22px;font-weight:800;margin-top:8px}
.iv-stat .s{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:3px}
.iv-toolbar{display:flex;align-items:center;gap:12px;margin:18px 0 16px;flex-wrap:wrap}
.iv-search{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);
  border-radius:100px;padding:9px 16px;width:300px}
.iv-search input{border:none;background:none;outline:none;flex:1;font-size:13px}
.iv-tabs{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px}
.iv-tabs a{padding:7px 16px;border-radius:100px;font-weight:700;font-size:12.5px;color:var(--ink-soft)}
.iv-tabs a.on{background:var(--red);color:#fff}
.iv-toolbar .spacer{flex:1}

/* flavour bars */
.flavour-bar{height:8px;border-radius:100px;background:var(--line);overflow:hidden;margin-top:7px}
.flavour-bar div{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--red),var(--pink))}

/* filter bar */
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.fb-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line);
  border-radius:100px;padding:9px 15px;flex:1;min-width:200px}
.fb-search input{border:none;background:none;outline:none;flex:1;font-size:13px}
.filter-bar select{padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-weight:600;font-size:13px;color:#5a4b52;cursor:pointer}

/* ---- modal ---- */
.modal-scrim{display:none;position:fixed;inset:0;background:rgba(60,10,10,.5);z-index:60;
  align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto;backdrop-filter:blur(2px)}
.modal-scrim.show{display:flex}
.modal{background:#fff;width:600px;max-width:100%;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;
  background:linear-gradient(135deg,var(--red),var(--pink));color:#fff}
.modal-head h3{font-size:17px;font-weight:800}
.modal-x{color:#fff;font-size:22px;line-height:1;padding:2px 6px}
.modal-body{padding:22px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--line);background:#fdf9f9}

/* bars chart */
.bars{display:flex;align-items:flex-end;gap:14px;height:180px;padding:10px 4px 0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:34px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#f2564d,var(--red));transition:.4s}
.bar:hover{background:linear-gradient(180deg,#ef4aa0,var(--pink))}
.bar-col small{font-size:11px;color:var(--ink-soft);font-weight:600}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:100px;font-weight:600;font-size:13.5px;
  box-shadow:var(--shadow-lg);z-index:80;opacity:0;transition:.3s}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ---- print invoice paper ---- */
.paper{background:#fff;color:#000;font-family:"Times New Roman",Georgia,serif}
.paper .brand{display:flex;gap:10px;padding:14px 16px 8px}
.paper .brand .co{flex:1;text-align:center}
.paper .brand .co h1{font-family:"Arial Black",Arial,sans-serif;font-size:26px;font-weight:900;color:var(--red)}
.paper .brand .co .addr{font-size:11px;font-weight:700;margin-top:2px}
.paper .brand .cell{font-size:11px;font-weight:700;text-align:right;line-height:1.5}
.gstpaper .reg{display:flex;justify-content:space-between;padding:4px 16px 8px;border-bottom:2px solid #000;font-size:11px;font-weight:700}
.gstpaper .reg .mid{font-size:14px;font-weight:900}
.gst-meta{display:flex;border-bottom:1.5px solid #000}
.gst-meta .to{flex:1;padding:8px 16px;font-size:12px}
.gst-meta .inv{width:210px;border-left:1.5px solid #000;padding:8px 14px;font-size:12px}
.gst-meta .inv .r{display:flex;justify-content:space-between;padding:3px 0}
table.gsttbl{width:100%;border-collapse:collapse;font-size:12px}
table.gsttbl th,table.gsttbl td{border:1px solid #000;padding:6px 8px;color:#000;background:#fff}
table.gsttbl th{font-weight:700;text-align:center;font-size:11px;text-transform:none;letter-spacing:0}
table.gsttbl td.r{text-align:right}table.gsttbl td.c{text-align:center}
table.gsttbl .totrow td{font-weight:700;border-top:2px solid #000}
.gst-tax{display:flex;border-bottom:1.5px solid #000}
.gst-tax table{flex:1;border-collapse:collapse;font-size:11px}
.gst-tax table th,.gst-tax table td{border:1px solid #000;padding:5px 7px;text-align:center;color:#000;background:#fff;text-transform:none;letter-spacing:0}
.gst-tax .amts{width:250px;border-left:1.5px solid #000}
.gst-tax .amts .r{display:flex;justify-content:space-between;padding:6px 14px;font-size:12px;font-weight:700;border-bottom:1px solid #ccc}
.gst-words{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1.5px solid #000;font-size:12px}
.gst-words .amt{font-size:15px;font-weight:900}
.gst-foot{display:flex;font-size:11px}
.gst-foot .bank{flex:1;padding:10px 16px;line-height:1.7}
.gst-foot .sign1,.gst-foot .sign2{width:190px;border-left:1px solid #000;padding:10px;text-align:center;display:flex;flex-direction:column;justify-content:space-between}
.ngpaper{border:2px solid var(--green-dark)}
.ng-meta{display:flex;border-bottom:1px solid #000}
.ng-meta .to{flex:1;padding:6px 14px;font-size:12.5px;line-height:1.7}
.ng-meta .bn{width:200px;border-left:1px solid #000;padding:6px 14px;font-size:12.5px;line-height:1.7}
table.ngtbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.ngtbl th,table.ngtbl td{border:1px solid #000;padding:6px 10px;color:#000;background:#fff;text-transform:none;letter-spacing:0}
table.ngtbl th{font-weight:700;text-align:center}
table.ngtbl td.r{text-align:right}table.ngtbl td.c{text-align:center}
table.ngtbl .sign-space td{height:130px}
.ng-grand{display:flex;justify-content:flex-end;gap:10px;padding:10px 14px;border-top:1px solid #000;font-size:16px;font-weight:900}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1180px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .bill-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .28s ease;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:flex}.tb-mobile-brand{display:flex}
  .topbar h1,.topbar .path{display:none}
  /* login: stack artwork, then card, then tagline below */
  .login-scene{min-height:auto;overflow:visible}
  .login-bg{position:relative;height:auto;width:100%;object-fit:contain}
  .welcome-card{position:static;transform:none;right:auto;top:auto;margin:-40px auto 20px;width:calc(100% - 32px);max-width:460px}
  .brand-copy{position:static;margin:0 16px 20px;max-width:none;background:var(--pink-wash)}
}
@media(max-width:640px){
  .topbar{padding:0 14px}.tb-mobile-brand{flex:1}
  .g4,.g2{grid-template-columns:1fr}
  .hero::after{display:none}
  .add-row{grid-template-columns:1fr 1fr}
  .add-row select,.add-row button{grid-column:1/-1}
  .tbl-card table{min-width:640px}
  .iv-search{width:100%}.iv-toolbar .spacer{display:none}
  .welcome-card{padding:28px 22px;margin-top:-24px}
  .login-contact{gap:14px;font-size:12.5px;height:auto;padding:12px 16px;flex-direction:column;text-align:center}
  #invBody{overflow-x:auto}#invBody .paper{min-width:560px}
}

/* ================================================================

/* ================================================================
   BILLING PAGE — Quantity strip, category tabs, product grid, cart
   ================================================================ */

/* Quantity control strip */
.bill-qty-strip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 20px;
  background:var(--green-wash);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.bill-qty-btn{
  width:30px;
  height:30px;
  border-radius:7px;
  border:2px solid var(--green);
  background:#fff;
  color:var(--green-dark);
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  line-height:1;
  transition:.12s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bill-qty-btn:active{background:var(--green);color:#fff}
.bill-qty-input{
  width:60px;
  padding:6px 8px;
  border:2px solid var(--green);
  border-radius:7px;
  text-align:center;
  font-weight:800;
  font-size:14px;
  background:#fff;
}

/* Category tabs strip */
.bill-cat-strip{
  display:flex;
  gap:8px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  flex-wrap:nowrap;
}
.bill-cat-btn{
  padding:8px 16px;
  border-radius:100px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  transition:.12s;
  flex-shrink:0;
}
.bill-cat-btn:hover{
  border-color:var(--red);
  color:var(--red);
}
.bill-cat-btn.active{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  box-shadow:0 2px 8px rgba(226,35,26,0.2);
}

/* Products container */
.bill-products{
  padding:12px 20px;
  max-height:320px;
  overflow-y:auto;
}

/* Category panel */
.bill-panel{
  animation:fadeIn .15s;
}
@keyframes fadeIn{from{opacity:.7}to{opacity:1}}

/* Sub-tabs for sizes */
.bill-subs{
  display:flex;
  gap:7px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.bill-sub-btn{
  padding:5px 12px;
  border-radius:8px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  transition:.12s;
}
.bill-sub-btn:hover{
  border-color:var(--red);
  color:var(--red);
}
.bill-sub-btn.active{
  background:var(--red-wash);
  border-color:var(--red);
  color:var(--red-dark);
}

/* Product grid */
.bill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
  gap:8px;
}

/* Product item card */
.bill-item{
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:10px 11px;
  cursor:pointer;
  transition:.12s;
  user-select:none;
}
.bill-item:hover{
  border-color:var(--red);
  background:var(--red-wash);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(226,35,26,0.15);
}
.bill-item-name{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  line-height:1.4;
  min-height:32px;
}
.bill-item-price{
  font-size:13px;
  font-weight:800;
  color:var(--red);
  margin-top:6px;
}

/* Scooping tier display */
.bill-scooping{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Scooping row */
.bill-scoop-row{
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  transition:.12s;
  user-select:none;
}
.bill-scoop-row:hover{
  border-color:var(--red);
  background:var(--red-wash);
  box-shadow:0 4px 12px rgba(226,35,26,0.15);
}
.bill-scoop-name{
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:2px;
}
.bill-scoop-desc{
  font-size:11px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:4px 0;
  max-height:45px;
  overflow:hidden;
}
.bill-scoop-price{
  font-size:13px;
  font-weight:800;
  color:var(--red);
  margin-top:6px;
}

/* Empty state */
.bill-empty{
  text-align:center;
  padding:30px 20px;
  color:var(--ink-soft);
}
.bill-empty .big{
  font-size:48px;
  margin-bottom:8px;
}

/* Cart items */
.bill-cart-items{
  border-top:2px dashed var(--line);
  padding:8px 0;
}

.bill-cart-row{
  display:grid;
  grid-template-columns:70px 1fr 90px 40px;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  margin:0;
}

.bill-cart-row:last-child{
  border-bottom:none;
}

.bill-cart-qty{
  display:flex;
  align-items:center;
  gap:6px;
  justify-self:center;
  background:var(--bg);
  border-radius:8px;
  padding:6px 8px;
}

.bill-cart-qty button{
  width:28px;
  height:28px;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--ink-soft);
  font-weight:800;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  transition:.12s;
}

.bill-cart-qty button:hover{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}

.bill-cart-qty span{
  min-width:24px;
  text-align:center;
  font-weight:800;
  font-size:14px;
  color:var(--ink);
}

.bill-cart-nm{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:0 4px;
}

.bill-cart-name{
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  line-height:1.35;
}

.bill-cart-rate{
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.3;
}

.bill-cart-amt{
  text-align:right;
  font-weight:800;
  font-size:15px;
  color:var(--red);
  line-height:1.4;
  padding-right:4px;
}

.bill-cart-del{
  width:36px;
  height:36px;
  border:1.5px solid var(--red-wash);
  border-radius:8px;
  background:#fff;
  color:var(--red);
  font-size:18px;
  cursor:pointer;
  line-height:1;
  transition:.12s;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  justify-self:end;
}

.bill-cart-del:hover{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  box-shadow:0 2px 8px rgba(226,35,26,0.2);
}

/* ================================================================
   CUSTOMER SEARCH & SELECTION — Professional lookup interface
   ================================================================ */

.bill-cust-search{
  position:relative;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.bill-cust-input{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:14px;
  background:#fff;
  color:var(--ink);
}

.bill-cust-input:focus{
  border-color:var(--red);
  outline:none;
}

.bill-cust-input::placeholder{
  color:var(--ink-soft);
}

.bill-cust-results{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:4px;
  background:#fff;
  border:1.5px solid var(--red-wash);
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
  max-height:200px;
  overflow-y:auto;
  z-index:10;
}

.bill-cust-result{
  padding:11px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--line-soft);
  transition:.12s;
}

.bill-cust-result:last-child{
  border-bottom:none;
}

.bill-cust-result:hover{
  background:var(--red-wash);
  padding-left:18px;
}

.bill-cust-form{
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.bill-cust-form .field{
  margin-bottom:12px;
}

.bill-cust-form .field:last-child{
  margin-bottom:10px;
}

.err{
  display:block;
  font-size:11.5px;
  color:var(--red);
  font-weight:700;
  margin-top:4px;
  min-height:14px;
}

/* ================================================================
   CUSTOMER QUICK SELECT
   ================================================================ */

.cust-quick{
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.cust-quick label{
  display:block;
  font-size:11.5px;
  font-weight:800;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:9px;
}

.cust-pills{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:8px;
}

.cust-pill{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 11px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:.12s;
  text-align:center;
  user-select:none;
}

.cust-pill:hover{
  border-color:var(--red);
  background:var(--red-wash);
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(226,35,26,0.15);
}

.cp-name{
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  line-height:1.3;
  word-break:break-word;
}

.cp-mob{
  font-size:10px;
  color:var(--ink-soft);
  line-height:1.2;
  font-weight:600;
}

.cust-manual{
  margin-bottom:14px;
}

/* ================================================================
   PRODUCTS PAGE — Pagination & Category manager
   ================================================================ */

.pg-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:14px 18px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.pg-btn{
  padding:7px 13px;
  border-radius:8px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  transition:.12s;
  display:inline-block;
}
.pg-btn:hover{
  border-color:var(--red);
  color:var(--red);
}
.pg-btn.on{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
.pg-info{
  margin-left:auto;
  font-size:12.5px;
  color:var(--ink-soft);
  font-weight:600;
}

.cat-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.cat-row:last-child{
  border-bottom:none;
}
.cat-row-name{
  flex:1;
  font-weight:700;
  font-size:13.5px;
  color:var(--ink);
}
.cat-row-acts{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

/* Mobile responsive */
@media(max-width:768px){
  .bill-grid{
    grid-template-columns:repeat(auto-fill,minmax(95px,1fr));
  }
  .bill-item-name{
    min-height:24px;
    font-size:12px;
  }
  .bill-cart-row{
    grid-template-columns:50px 1fr 60px 28px;
    font-size:12px;
  }
}

@media(max-width:480px){
  .bill-qty-strip{
    gap:8px;
    padding:9px 14px;
  }
  .bill-cat-strip{
    padding:10px 14px;
  }
  .bill-grid{
    grid-template-columns:repeat(auto-fill,minmax(85px,1fr));
  }
}

/* ================================================================
   CATEGORY MANAGER MODAL — Polish & UX
   ================================================================ */

#catModal .modal{
  width:500px;
  max-width:95vw;
}

#catModal .modal-head{
  background:var(--red);
  color:#fff;
  border-radius:14px 14px 0 0;
}

#catModal .modal-head h3{
  color:#fff;
  font-size:16px;
}

#newCatName{
  padding:10px 14px !important;
  border:1.5px solid var(--line) !important;
  border-radius:9px !important;
  font-size:14px !important;
}

#newCatName::placeholder{
  color:var(--ink-soft);
}

#catModal .btn.pri{
  padding:10px 22px;
  border-radius:9px;
  font-size:13px;
}

#catList{
  padding:0;
}

.cat-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--line-soft);
}

.cat-row:last-child{
  border-bottom:none;
}

.cat-row-name{
  flex:1;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}

.cat-row-acts{
  display:flex;
  gap:7px;
  flex-shrink:0;
}

.cat-row-acts .btn.ghost{
  padding:6px 12px;
  font-size:12px;
  border-radius:7px;
}

.cat-row-acts .btn.ghost:first-child{
  color:var(--ink);
  border-color:var(--line);
}

.cat-row-acts .btn.ghost:last-child{
  color:var(--red);
  border-color:var(--red-wash);
}

/* ================================================================
   BADGES
   ================================================================ */

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.badge.ok{
  background:#d4edda;
  color:#155724;
}

.badge.warn{
  background:#fff3cd;
  color:#856404;
}

.badge.pri{
  background:#d1ecf1;
  color:#0c5460;
}

.badge.secondary{
  background:#e2e3e5;
  color:#383d41;
}

/* ================================================================
   TABLE STYLES
   ================================================================ */

.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.tbl thead{
  border-bottom:2px solid var(--line);
  background:#f9f9f9;
}

.tbl th{
  padding:12px 14px;
  text-align:left;
  font-weight:800;
  color:var(--ink);
}

.tbl td{
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
}

.tbl tbody tr:hover{
  background:#f9f9f9;
}

.tbl .btn.sm{
  padding:6px 12px;
  font-size:12px;
}

/* ================================================================
   BUTTONS SMALL
   ================================================================ */

.btn.sm{
  padding:7px 14px;
  font-size:12px;
}

/* Logo Styling */
.sb-logo {
  text-align: center;
  padding: 15px 0;
}

.sb-logo-img {
  max-width: 90px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .sb-logo-img {
    max-width: 120px;
  }
}