:root{
  /* Base (kept for compatibility) */
  --bg:#0b1220;
  --bg2:#070b14;
  --card:#101a2f;
  --card2:rgba(10,16,30,.65);
  --muted:#93a4c7;
  --text:#e9eefc;
  --line:rgba(255,255,255,.10);

  /* Existing accents (kept) */
  --brand:#3b82f6;
  --brand2:#22c55e;
  --danger:#ef4444;
  --warn:#f59e0b;

  /* Milan Lounge accents (new) */
  --gold:#f5c14b;
  --gold2:#d99a2b;
  --flame:#ff7a18;
  --flame2:#ff3d00;

  /* UI */
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}

html, body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(900px 520px at 15% 5%, rgba(245,193,75,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 15%, rgba(255,122,24,.14), transparent 55%),
    radial-gradient(1200px 700px at 50% 90%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--text);
}

a{color:inherit}

.container{
  max-width:1400px;
  margin:0 auto;
  padding:18px;
}

.spacer{height:12px}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(16,26,47,.70), rgba(10,16,30,.55));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand img{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
}

.brand h1{
  font-size:18px;
  margin:0;
}

.brand small{
  display:block;
  color:var(--muted);
  margin-top:2px;
}

.right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.btn,
.card,
.sidebar,
.topbar,
.pill,
.input,
select{
  transition:
    transform .12s var(--ease),
    filter .12s var(--ease),
    background .12s var(--ease),
    border-color .12s var(--ease),
    box-shadow .12s var(--ease);
}

.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  white-space:nowrap;
}

.btn:hover{background:rgba(255,255,255,.10)}
.btn:active{ transform: translateY(1px) scale(.99); }

.btn.primary{
  background: linear-gradient(135deg, var(--gold), var(--flame));
  border: none;
  color:#0b1220;
  font-weight: 700;
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.primary:active{ transform: translateY(1px) scale(.985); }

.btn.success{background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.45)}
.btn.danger{background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.45)}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  background: rgba(255,255,255,.03);
}

.grid{
  display:grid !important;
  gap:12px;
  min-width:0;
}

.card{
  position:relative;
  z-index:1;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,26,47,.80), rgba(10,16,30,.55));
  border-radius:var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  min-width:0;
}

.card h2,
.card h3{
  margin:0 0 10px 0;
  min-width:0;
}

.muted{color:var(--muted)}

.input,
select{
  width:100%;
  min-width:0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
  position: relative;
  z-index: 200;
}

.btn:focus,
.input:focus,
select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,193,75,.18), var(--shadow2);
  border-color: rgba(245,193,75,.35);
}

label{
  font-size:12px;
  color:var(--muted);
}

/* solid select backgrounds for phone browsers */
select{
  background-color: #0b1220 !important;
  color: #e9eefc !important;
}
select option{
  background-color: #0b1220 !important;
  color: #e9eefc !important;
}

/* Tables */
.table-container{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}

.table th,
.table td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
  word-break:break-word;
}

.table th{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.kpi{
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:var(--radius);
  padding:12px;
}
.kpi b{font-size:20px}

.notice{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  padding:10px 12px;
  border-radius:14px;
  color:var(--muted);
  overflow:auto;
}

.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
}

/* Mini stat cards used in reports */
.mini{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:12px;
  min-width:0;
  box-shadow: var(--shadow2);
}

.mini b{
  display:block;
  color:var(--text);
  font-size:14px;
  margin-bottom:6px;
}

.mini h3{
  margin:0;
  font-size:16px;
  line-height:1.25;
  word-break:break-word;
}

/* Report-specific wrappers */
.report-split{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:12px;
  min-width:0;
}

.report-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.report-card{
  min-width:0;
}

.report-table{
  min-width:0;
}

.report-table > div,
#salesTable,
#purchasesTable,
#expensesTable,
#stockBox,
#kitchenBills,
#kitchenItems,
#barBills,
#barItems{
  min-width:0;
  overflow-x:auto;
}

/* --- Layout with sidebar --- */
.layout{
  display:grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap:12px;
  align-items:start;
}

/* Important: prevent clipping/stack issues */
.card,
.topbar,
.sidebar,
.layout,
.grid{
  overflow: visible !important;
}

.sidebar{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,26,47,.78), rgba(10,16,30,.55));
  border-radius:var(--radius);
  padding:10px;
  height: fit-content;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  min-width:0;
}

.nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--text);
}

.nav a:hover{background:rgba(255,255,255,.06)}

.nav a.active{
  border-color: rgba(245,193,75,.35);
  background: rgba(245,193,75,.10);
}

.nav a.active small{color: rgba(245,193,75,.95)}
.nav small{color:var(--muted); font-size:11px;}
.hr{height:1px;background:rgba(255,255,255,.08); margin:10px 0}

/* Mobile Sidebar Toggle */
.mobileToggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.mobileToggle:hover{ background: rgba(255,255,255,.10); }

.mobileToggle .bars{
  width:18px; height:12px; position:relative; display:inline-block;
}
.mobileToggle .bars::before,
.mobileToggle .bars::after,
.mobileToggle .bars span{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background: rgba(255,255,255,.85);
}
.mobileToggle .bars::before{ top:0; }
.mobileToggle .bars span{ top:5px; }
.mobileToggle .bars::after{ bottom:0; }

.overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 50;
  transition: opacity .2s ease;
}

/* Product cards */
.product-card{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(16,26,47,.75), rgba(10,16,30,.55));
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow2);
  cursor: pointer;
  user-select:none;
}
.product-card:hover{
  transform: translateY(-2px);
  border-color: rgba(245,193,75,.25);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.product-card:active{
  transform: translateY(0) scale(.985);
}
.product-card.disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.25);
}
.product-card.disabled:hover{
  transform:none;
  box-shadow: var(--shadow2);
  border-color: rgba(255,255,255,.10);
}

/* Cart total emphasis */
.cart-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(245,193,75,.22);
  background: linear-gradient(135deg, rgba(245,193,75,.16), rgba(255,122,24,.10));
}
.cart-total b{
  font-size: 18px;
  letter-spacing:.2px;
}

/* Toast notifications */
.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,30,.92);
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  color: var(--text);
  animation: toastIn .18s var(--ease);
}
.toast.success{ border-color: rgba(34,197,94,.30); }
.toast.error{ border-color: rgba(239,68,68,.35); }
.toast.warn{ border-color: rgba(245,158,11,.35); }

@keyframes toastIn{
  from{ transform: translateY(8px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Stock sheet variance colors */
.var-zero{ color: rgba(233,238,252,.75); }
.var-pos{ color: rgba(34,197,94,.95); }
.var-neg{ color: rgba(239,68,68,.95); }

/* Loading skeleton */
.skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.skeleton::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{
  to{ transform: translateX(100%); }
}

/* Login logo */
.login-logo {
  text-align: center;
  margin-bottom: 20px;
}
.login-logo img {
  max-width: 120px;
  border-radius: 8px;
}

/* Responsive */
@media(max-width: 1200px){
  .container{max-width:100%}
}

@media(max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .mobileToggle{ display:inline-flex; }

  .container{ padding: 14px; }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .brand{
    width:100%;
  }
}

@media(max-width: 768px){
  .grid[style*="repeat(4, 1fr)"],
  .grid[style*="repeat(3, 1fr)"],
  .grid[style*="1fr 1fr"],
  .grid[style*="1.2fr .8fr"]{
    grid-template-columns:1fr !important;
  }

  .right{
    width:100%;
    justify-content:flex-start;
  }

  .btn{
    width:auto;
  }

  .table{
    min-width:560px;
  }

  .mini h3,
  .kpi b{
    font-size:15px;
  }
}

@media(max-width: 480px){
  .container{
    padding:10px;
  }

  .card,
  .topbar,
  .sidebar{
    padding:12px;
    border-radius:14px;
  }

  .btn,
  .input,
  select{
    padding:10px;
    font-size:14px;
  }

  .table{
    min-width:520px;
  }
}

/* =========================================================
   SHIFT PAGE POLISH
   Add at bottom of css/style.css
   ========================================================= */

/* Small helper grids used by shift page */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  min-width:0;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  min-width:0;
}

/* Shift header pills */
#shiftModePill{
  background: linear-gradient(135deg, rgba(245,193,75,.18), rgba(255,122,24,.12));
  border-color: rgba(245,193,75,.35);
  color: #ffe3a6;
  font-weight: 700;
  letter-spacing: .4px;
}

#adminOnlyPill{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.28);
  color: #bfdbfe;
  font-weight: 700;
}

/* Shift cards feel more like grouped sections */
#dashboardCard > .card,
#currentShiftBox > .grid-2 > .card,
#summaryCard > .grid-2 > .card,
#printCard,
#historyCard{
  box-shadow: var(--shadow2);
}

/* Current shift admin open box */
#adminControlBox{
  padding:12px;
  border:1px dashed rgba(245,193,75,.22);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(245,193,75,.05), rgba(255,122,24,.03));
  margin-top:10px;
}

/* Inputs on shift page */
#openingCash,
#openNotes,
#closingCash,
#closeNotes,
#histFrom,
#histTo,
#histStatus{
  width:100%;
  min-width:0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
  box-shadow:none;
}

/* Buttons on shift page */
#btnOpenShift{
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(34,197,94,.14));
  border:1px solid rgba(34,197,94,.38);
  font-weight:700;
}

#btnOpenShift:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
}

#btnCloseShift{
  background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(239,68,68,.14));
  border:1px solid rgba(239,68,68,.36);
  font-weight:700;
}

#btnCloseShift:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
}

/* Disabled action buttons */
.btn:disabled{
  opacity:.58;
  cursor:not-allowed;
  filter:grayscale(.15);
  transform:none !important;
}

/* No shift / non-admin info boxes */
#noShiftBox,
#nonAdminHint{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}

#nonAdminHint{
  border-color: rgba(59,130,246,.22);
  background: rgba(59,130,246,.07);
  color:#c7dbff;
}

/* Dashboard value styling */
#dashboardCard h4{
  margin-bottom:10px;
  color:#f8fafc;
}

#dashboardCard .card > div{
  margin-bottom:6px;
}

#dashExpectedCash,
#dashTodayExpectedCash,
#sumExpected{
  color:#fde68a;
  font-weight:700;
}

#dashVariance,
#sumVariance{
  font-weight:700;
}

/* Summary card highlight */
#summaryCard{
  border-color: rgba(245,193,75,.18);
}

#summaryMeta,
#printMeta{
  line-height:1.5;
  word-break:break-word;
}

/* Stock table improvements */
#stockTbody tr:hover,
#dashRecentTbody tr:hover,
#histTbody tr:hover{
  background: rgba(255,255,255,.03);
}

#stockTbody td,
#dashRecentTbody td,
#histTbody td{
  white-space: normal;
}

#stockTbody td:last-child{
  font-weight:700;
}

/* History action buttons */
#histTbody td .btn{
  padding:7px 10px;
  font-size:12px;
  border-radius:10px;
  margin-right:6px;
  margin-bottom:6px;
}

/* Shift detail blocks look slightly elevated */
#currentShiftBox .card,
#summaryCard .card,
#printCard{
  border-color: rgba(255,255,255,.10);
}

/* Better hr inside shift page */
#currentShiftBox + *,
.card hr,
hr{
  border:none;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  margin:16px 0;
}

/* Numeric emphasis inside summary */
#sumBills,
#sumTotalSales,
#sumPaid,
#sumCash,
#sumMpesa,
#sumOther,
#sumMixed,
#sumMixedCash,
#sumMixedMpesa,
#sumOpening,
#sumCashInSales,
#sumExpenses,
#sumSuppliers,
#sumExpected,
#sumClosing,
#sumVariance{
  font-weight:700;
}

/* Print/summary cards hidden blocks should animate nicely when shown */
#summaryCard,
#printCard,
#currentShiftBox,
#noShiftBox,
#nonAdminHint{
  animation: shiftFadeIn .18s ease;
}

@keyframes shiftFadeIn{
  from{
    opacity:0;
    transform: translateY(6px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* Mobile */
@media (max-width: 900px){
  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }

  #dashboardCard .row,
  #historyCard .row,
  #summaryCard .row,
  #printCard .row{
    flex-wrap:wrap;
  }
}

@media (max-width: 640px){
  #btnOpenShift,
  #btnCloseShift,
  #btnSummary,
  #btnStockSheet,
  #btnPrintSummary,
  #btnHideSummary,
  #btnPrintNow,
  #btnHidePrint,
  #btnHistorySearch,
  #btnRefresh{
    width:100%;
  }

  #histTbody td .btn{
    width:100%;
    margin-right:0;
  }

  #dashboardCard .card,
  #currentShiftBox .card,
  #summaryCard .card,
  #printCard,
  #historyCard{
    padding:12px;
  }
}

/* =========================================================
   UMBRELLA GUEST HOUSE - FINAL POS UI
   Horizontal nav + compact products + clean cart
   ========================================================= */

:root{
  --umbrella-red:#d62839;
  --umbrella-green:#16a34a;
  --umbrella-gold:#f5c14b;
  --umbrella-ink:#081120;
  --umbrella-ink-2:#0c172b;
  --umbrella-panel:rgba(10,16,30,.88);
  --umbrella-panel-2:rgba(16,26,47,.88);
  --umbrella-line:rgba(255,255,255,.10);
  --umbrella-line-strong:rgba(245,193,75,.24);
  --umbrella-text:#eef3ff;
  --umbrella-muted:#a9b6d3;
  --umbrella-shadow:0 20px 55px rgba(0,0,0,.45);
  --umbrella-shadow-2:0 12px 32px rgba(0,0,0,.35);
  --tablet-radius:18px;
  --tablet-radius-sm:14px;
}

/* =========================================================
   PAGE / POS LAYOUT
   ========================================================= */

body{
  background:
    radial-gradient(900px 500px at 12% 4%, rgba(245,193,75,.12), transparent 55%),
    radial-gradient(850px 460px at 88% 12%, rgba(214,40,57,.10), transparent 55%),
    radial-gradient(1200px 720px at 50% 100%, rgba(22,163,74,.08), transparent 60%),
    linear-gradient(180deg, #050912, #091223 55%, #081120);
}

.grid[style*="1.2fr .8fr"]{
  grid-template-columns:minmax(0, 1.55fr) minmax(360px, .85fr) !important;
  gap:18px !important;
  align-items:start !important;
}

#products,
#cart{
  min-width:0;
}

/* POS page no longer uses left sidebar layout */
.layout{
  display:block !important;
}

/* =========================================================
   POS HEADINGS
   ========================================================= */

.card h2{
  font-size:clamp(24px, 2vw, 34px);
  letter-spacing:-.3px;
}

.card small.muted{
  font-size:14px;
  color:var(--umbrella-muted);
}

/* =========================================================
   HORIZONTAL NAV
   ========================================================= */

.nav.nav-horizontal{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
}

.nav.nav-horizontal .navlink{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--umbrella-text);
  font-weight:700;
  box-shadow:var(--umbrella-shadow-2);
}

.nav.nav-horizontal .navlink:hover{
  transform:translateY(-1px);
  border-color:rgba(245,193,75,.28);
  background:rgba(255,255,255,.08);
}

.nav.nav-horizontal .navlink.active{
  background:linear-gradient(135deg, var(--umbrella-gold), #ff7a18);
  color:#0b1220 !important;
  border:none;
}

/* =========================================================
   INPUTS / FILTERS
   ========================================================= */

#products input,
#products select,
#cart input,
#cart select{
  min-height:56px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:linear-gradient(180deg, rgba(8,17,32,.98), rgba(7,12,24,.95)) !important;
  color:var(--umbrella-text) !important;
  font-size:18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

#products input::placeholder,
#cart input::placeholder{
  color:#95a3c7 !important;
}

#products input:focus,
#products select:focus,
#cart input:focus,
#cart select:focus{
  border-color:rgba(245,193,75,.40) !important;
  box-shadow:
    0 0 0 3px rgba(245,193,75,.12),
    0 10px 28px rgba(0,0,0,.22) !important;
}

/* =========================================================
   SECTION BUTTONS
   ========================================================= */

.pos-section-btn{
  min-height:50px !important;
  padding:12px 18px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:linear-gradient(180deg, rgba(10,16,30,.95), rgba(13,22,40,.92)) !important;
  color:var(--umbrella-text) !important;
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:-.1px;
  box-shadow:var(--umbrella-shadow-2);
}

.pos-section-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(245,193,75,.32) !important;
  filter:brightness(1.04);
}

.pos-section-btn:active{
  transform:translateY(0) scale(.985);
}

.pos-section-btn.active{
  background:linear-gradient(135deg, var(--umbrella-red), var(--umbrella-green)) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 12px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.05) inset !important;
}

/* =========================================================
   OPEN BILLS AREA
   ========================================================= */

#openBillsWrap{
  margin-top:12px;
  background:linear-gradient(180deg, rgba(9,15,28,.92), rgba(12,20,36,.88)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  box-shadow:var(--umbrella-shadow-2);
  padding:14px !important;
}

#openBillsWrap h3{
  font-size:20px;
  color:var(--umbrella-text);
}

#openBillsWrap table{
  width:100%;
  border-collapse:collapse;
}

#openBillsWrap th,
#openBillsWrap td{
  padding:12px 10px !important;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--umbrella-text);
}

#openBillsWrap th{
  color:var(--umbrella-muted);
  font-weight:700;
}

/* =========================================================
   PRODUCT AREA - COMPACT LIST
   ========================================================= */

#products > div:first-child{
  margin-bottom:14px !important;
}

#plist{
  display:flex !important;
  flex-direction:column;
  gap:10px !important;
  margin-top:14px;
}

.product-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(17,27,49,.94), rgba(10,16,30,.94));
  color:var(--umbrella-text);
  box-shadow:var(--umbrella-shadow-2);
}

.product-row:hover{
  transform:translateY(-1px);
  border-color:rgba(245,193,75,.24);
  box-shadow:0 16px 42px rgba(0,0,0,.42);
}

.product-row-main{
  min-width:0;
  flex:1;
}

.product-row-name{
  font-size:19px;
  font-weight:800;
  color:#f7f9ff;
  line-height:1.2;
  word-break:break-word;
}

.product-row-meta{
  margin-top:4px;
  font-size:13px;
  color:var(--umbrella-muted);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.product-row-side{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.product-row-price{
  font-size:20px;
  font-weight:800;
  color:#fff7dd;
  white-space:nowrap;
}

.product-row .add-btn,
#plist button[data-id]{
  min-height:46px !important;
  padding:10px 16px !important;
  border-radius:14px !important;
  border:none !important;
  background:linear-gradient(135deg, var(--umbrella-red), #8f1530 55%, var(--umbrella-green)) !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:-.1px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.product-row .add-btn:hover,
#plist button[data-id]:hover{
  filter:brightness(1.06);
}

.product-row .add-btn:active,
#plist button[data-id]:active{
  transform:scale(.985);
}

/* keep old product card styles harmless if some page still uses them */
.product-card{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(16,26,47,.75), rgba(10,16,30,.55));
  border-radius:14px;
  padding:10px;
  box-shadow:var(--shadow2);
}

/* =========================================================
   CART PANEL
   ========================================================= */

#cart > div{
  position:sticky;
  top:12px;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg, rgba(17,27,49,.92), rgba(10,16,30,.94)) !important;
  box-shadow:var(--umbrella-shadow);
  padding:16px !important;
}

#cart h3{
  font-size:30px !important;
  color:#fff !important;
}

#cart p{
  color:var(--umbrella-muted);
  font-size:16px;
}

#cart [data-minus],
#cart [data-plus],
#cart [data-rm]{
  min-height:48px !important;
  min-width:48px !important;
  border-radius:14px !important;
  font-size:20px !important;
  font-weight:800 !important;
}

#cart [data-minus],
#cart [data-plus]{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

#cart [data-rm]{
  background:rgba(214,40,57,.14) !important;
  border:1px solid rgba(214,40,57,.28) !important;
  color:#ffd6db !important;
  font-size:14px !important;
}

#cart input[data-qty]{
  min-height:48px !important;
  width:84px !important;
  text-align:center !important;
  font-size:18px !important;
  border-radius:14px !important;
}

#cart input[data-notes]{
  margin-top:10px !important;
  min-height:48px !important;
  font-size:15px !important;
}

.cart-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(245,193,75,.22);
  background:linear-gradient(135deg, rgba(245,193,75,.16), rgba(255,122,24,.10));
}

.cart-total b{
  color:var(--umbrella-gold) !important;
  font-size:30px !important;
  letter-spacing:-.3px;
}

/* =========================================================
   SHIFT NOTICE
   ========================================================= */

#shiftNotice > div{
  border-radius:18px !important;
  padding:14px !important;
  font-size:15px !important;
}

/* =========================================================
   POS ACTION BUTTONS
   ========================================================= */

#btnPrintCustomerBill,
#btnHoldBill,
#btnCompletePay,
#btnReload,
#btnOpenBills,
#btnHideOpenBills,
#clearCart,
#btnCancelEdit{
  min-height:56px !important;
  padding:14px 18px !important;
  border-radius:16px !important;
  font-size:20px !important;
  font-weight:800 !important;
  letter-spacing:-.2px;
}

#btnPrintCustomerBill{
  background:linear-gradient(135deg, rgba(245,193,75,.22), rgba(217,154,43,.16)) !important;
  color:#fff7dd !important;
  border:1px solid rgba(245,193,75,.34) !important;
}

#btnHoldBill{
  background:linear-gradient(135deg, rgba(22,163,74,.18), rgba(34,197,94,.14)) !important;
  color:#d9ffe7 !important;
  border:1px solid rgba(22,163,74,.30) !important;
}

#btnCompletePay{
  min-height:66px !important;
  font-size:24px !important;
  background:linear-gradient(135deg, var(--umbrella-red), #8f1530 55%, var(--umbrella-green)) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}

#btnReload,
#btnOpenBills,
#btnHideOpenBills,
#clearCart,
#btnCancelEdit{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

#btnPrintCustomerBill:hover,
#btnHoldBill:hover,
#btnCompletePay:hover,
#btnReload:hover,
#btnOpenBills:hover,
#btnHideOpenBills:hover,
#clearCart:hover,
#btnCancelEdit:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

#btnPrintCustomerBill:active,
#btnHoldBill:active,
#btnCompletePay:active,
#btnReload:active,
#btnOpenBills:active,
#btnHideOpenBills:active,
#clearCart:active,
#btnCancelEdit:active{
  transform:scale(.988);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px){
  .grid[style*="1.2fr .8fr"]{
    grid-template-columns:minmax(0, 1fr) 340px !important;
  }
}

@media (max-width: 980px){
  .grid[style*="1.2fr .8fr"]{
    grid-template-columns:1fr !important;
  }

  #cart > div{
    position:static;
  }

  .nav.nav-horizontal{
    gap:8px;
  }

  .nav.nav-horizontal .navlink{
    padding:9px 12px;
  }
}

@media (max-width: 640px){
  #products input,
  #products select,
  #cart input,
  #cart select{
    min-height:52px !important;
    font-size:16px !important;
  }

  .pos-section-btn{
    font-size:15px !important;
    min-height:46px !important;
    padding:10px 14px !important;
  }

  .product-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .product-row-side{
    width:100%;
    justify-content:space-between;
  }

  #btnPrintCustomerBill,
  #btnHoldBill,
  #btnCompletePay{
    font-size:18px !important;
  }
}

@media (max-width: 480px){
  .nav.nav-horizontal .navlink{
    width:100%;
    justify-content:center;
  }

  #btnCompletePay{
    font-size:20px !important;
  }
}

/* =========================================================
   UNICENTA STYLE PRODUCT GRID
   ========================================================= */

.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
}

/* tile */
.product-tile{
  background:rgba(10,16,30,.6);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:8px;
  text-align:center;
  cursor:pointer;
}

/* hover */
.product-tile:hover{
  transform:translateY(-2px);
  border-color:#f5c14b;
}

/* image */
.product-img{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}

.product-img img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
}

/* title */
.product-title{
  font-size:13px;
  font-weight:600;
  color:#fff;
  height:32px;
  overflow:hidden;
}

/* price */
.product-price{
  font-size:12px;
  color:#f5c14b;
  font-weight:700;
  margin-top:4px;
}

/* =========================================================
   CART POLISH PATCH
   ========================================================= */

.cart-panel-wrap{
  min-width:0;
}

.cart-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.cart-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.cart-editing-note{
  margin-top:6px;
  font-size:13px;
  color:#86efac;
}

.cart-empty-note{
  opacity:.75;
  margin-top:14px;
}

.cart-items-wrap{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cart-item-box{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.03);
}

.cart-item-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.cart-item-main{
  flex:1;
  min-width:0;
}

.cart-item-name{
  font-size:15px;
  font-weight:800;
  line-height:1.15;
  word-break:break-word;
}

.cart-item-tag{
  font-size:11px;
  opacity:.7;
}

.cart-item-unit-price{
  margin-top:5px;
  opacity:.85;
  font-size:13px;
}

.cart-notes-input{
  margin-top:8px !important;
  min-height:40px !important;
  font-size:14px !important;
}

.cart-item-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:140px;
}

.cart-item-line-total{
  font-size:15px;
  font-weight:800;
  color:#fff7dd;
  white-space:nowrap;
}

.cart-qty-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.cart-qty-row button{
  min-height:38px !important;
  min-width:38px !important;
  border-radius:12px !important;
  font-size:18px !important;
}

.cart-qty-row input{
  width:58px !important;
  min-height:38px !important;
  padding:8px !important;
  text-align:center !important;
  font-size:16px !important;
  border-radius:12px !important;
}

.cart-item-side button[data-rm]{
  min-height:38px !important;
  min-width:auto !important;
  padding:8px 12px !important;
  font-size:13px !important;
  border-radius:12px !important;
}

.cart-form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  margin-top:16px;
  align-items:end;
}

.cart-form-field{
  min-width:0;
}

.cart-form-field-full{
  grid-column:1 / -1;
}

.cart-form-grid label{
  display:block;
  margin-bottom:6px;
}

.cart-form-grid input,
.cart-form-grid select{
  width:100%;
  min-width:0;
  max-width:100%;
}

#tableNo,
#discount,
#waiterName,
#orderType,
#payMethod{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

.cart-bottom-line{
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.cart-kitchen-flag{
  opacity:.8;
  font-size:15px;
}

.cart-action-grid-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px;
}

.cart-action-grid-one{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}

/* reduce item card size more on narrow right panel */
@media (max-width: 1200px){
  .cart-item-box{
    padding:10px;
  }

  .cart-item-name{
    font-size:14px;
  }

  .cart-item-unit-price,
  .cart-item-line-total{
    font-size:13px;
  }
}

@media (max-width: 640px){
  .cart-item-top{
    flex-direction:column;
  }

  .cart-item-side{
    width:100%;
    min-width:0;
    align-items:stretch;
  }

  .cart-qty-row{
    justify-content:flex-start;
  }

  .cart-form-grid{
    grid-template-columns:1fr;
  }

  .cart-form-field-full{
    grid-column:auto;
  }

  .cart-action-grid-two{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   REPORTS PAGE PATCH
   keeps everything above, only improves reports + free bills
   ========================================================= */

#summaryCards{
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap:10px;
}

#summaryCards .mini,
#freeBillCount,
#freeBillTotal{
  min-width:0;
}

#freeBillsTable,
#taxTable,
#salesTable,
#purchasesTable,
#expensesTable,
#stockBox,
#kitchenBills,
#kitchenItems,
#barBills,
#barItems{
  min-width:0;
  overflow-x:auto;
}

#freeBillsTable .table,
#taxTable .table,
#salesTable .table,
#purchasesTable .table,
#expensesTable .table,
#kitchenBills .table,
#kitchenItems .table,
#barBills .table,
#barItems .table{
  min-width:720px;
}

@media (max-width: 1200px){
  #summaryCards{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px){
  #summaryCards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px){
  #summaryCards{
    grid-template-columns: 1fr !important;
  }
}

/* MOBILE DRAWER */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: -260px;
  width: 240px;
  height: 100%;
  background: #0b1220;
  z-index: 1000;
  padding: 14px;
  transition: left 0.3s ease;
  will-change: left;
  overflow-y: auto;
}

.mobile-drawer.open {
  left: 0;
}

.overlay.show {
  display: block;
}

/* hide mobile menu on desktop */
@media(min-width: 768px){
  .mobile-drawer,
  .mobileToggle,
  .overlay {
    display: none !important;
  }
}