body {
    font-family: Arial, sans-serif;
    background: #0f172a;
    color: #e2e8f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  /* Shared across every portal (Shop/Admin/Agent) page that has a
     hamburger/sidebar-toggle button — was previously duplicated only in
     billing.html and dashboard.html's own <style> blocks (harmless if a
     page still carries its own local copy too). Wraps the toggle+heading
     row so it sticks to the very top of the viewport instead of
     scrolling away with the rest of the page content. */
  .sticky-header-wrap { position: sticky; top: 0; z-index: 200; background: #0f172a; }
  .login-box {
    background: #1e293b;
    padding: 40px;
    border-radius: 8px;
    width: 280px;
    text-align: center;
  }
  input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 4px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #e2e8f0;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .error { color: #f87171; min-height: 20px; }

  .topbar { display:flex; justify-content:space-between; align-items:center; background:#1e293b; padding:14px 24px; border-bottom:1px solid #334155; }
  .logout-btn { background:#334155; color:#e2e8f0; border:none; padding:8px 14px; border-radius:4px; cursor:pointer; margin-left:12px; width:auto; }
  .pos-body { display:block; height:auto; }
  .pos-layout { display:flex; gap:16px; padding:16px; height:calc(100vh - 70px); box-sizing:border-box; }
  /* min-width:0 on BOTH panels matters here, not just style. A flex
     item's default automatic minimum width is its content's min-content
     size (flex's "min-width:auto"), not zero — .catalog-panel already
     got an effective min-width of ~0 for free because overflow-y:auto
     is an exception the spec carves out, but .invoice-panel had no such
     exception and was resisting compression down to its cart table's
     own natural content width. On a narrow window that meant the two
     panels stopped shrinking in their intended 1.3:1 ratio: invoice-panel
     held its ground and catalog-panel absorbed the entire deficit,
     getting crushed far harder than the ratio alone would suggest.
     Setting it explicitly on both makes the ratio (catalog:invoice)
     actually hold at every window size, instead of only when there's
     enough room for invoice-panel's content to fit without shrinking.

     Ratio was 1.3:1 (catalog ~56.5%, invoice ~43.5%); catalog's share is
     now cut by 20% (1.3 -> 1.04) and everything freed up goes to invoice
     (1 -> 1.26), same total flex (2.3) so the combined width of the two
     panels together is unchanged — just redistributed toward the cart. */
  .catalog-panel { flex:1.04; min-width:0; background:#1e293b; border-radius:8px; padding:16px; overflow-y:auto; }
  .invoice-panel { flex:1.26; min-width:0; background:#1e293b; border-radius:8px; padding:16px; display:flex; flex-direction:column; }
  #search { width:100%; padding:10px; margin-bottom:12px; border-radius:4px; border:1px solid #334155; background:#0f172a; color:#e2e8f0; box-sizing:border-box; }
  .category-group { margin-bottom:14px; }
  .category-title { font-weight:bold; color:#93c5fd; margin-bottom:8px; cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; }
  .arrow { font-size:11px; }
  .products-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
  .products-grid.collapsed { display:none; }
  .product-row { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:6px 8px; border:1px solid #334155; border-radius:6px; }
  .product-row span { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .add-btn { background:#2563eb; color:white; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px; width:auto; margin:0; flex-shrink:0; }
  .invoice-header { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
  .invoice-header input { width:100%; padding:8px; border-radius:4px; border:1px solid #334155; background:#0f172a; color:#e2e8f0; box-sizing:border-box; margin:0; }
  .type-toggle { display:flex; gap:16px; align-items:center; }
  .type-toggle label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
  .cart-table { width:100%; border-collapse:collapse; flex:1; }
  .cart-table th, .cart-table td { padding:6px; text-align:left; border-bottom:1px solid #334155; font-size:14px; }
  .cart-table input, .cart-table select { width:60px; background:#0f172a; color:#e2e8f0; border:1px solid #334155; border-radius:4px; padding:4px; margin:0; }
  .remove-btn { background:#7f1d1d; color:white; border:none; border-radius:4px; padding:4px 8px; cursor:pointer; width:auto; margin:0; }
  .totals { margin-top:12px; border-top:1px solid #334155; padding-top:10px; }
  .totals-row { display:flex; justify-content:space-between; margin:6px 0; }
  .totals-row.final { font-weight:bold; font-size:18px; color:#4ade80; }
  .invoice-actions { display:flex; gap:10px; margin-top:12px; }
  .save-btn { flex:1; background:#16a34a; color:white; border:none; padding:10px; border-radius:4px; cursor:pointer; width:auto; margin:0; }
  .cancel-btn { flex:1; background:#7f1d1d; color:white; border:none; padding:10px; border-radius:4px; cursor:pointer; width:auto; margin:0; }
  #paymentMethod { margin-top:10px; padding:8px; background:#0f172a; color:#e2e8f0; border:1px solid #334155; border-radius:4px; width:auto; }

  .nav-link { color:#93c5fd; text-decoration:none; margin-right:14px; font-size:14px; }
.nav-link:hover { text-decoration:underline; }
.stock-layout { display:flex; flex-direction:column; gap:16px; padding:16px; max-width:900px; margin:0 auto; }
.panel { background:#1e293b; border-radius:8px; padding:16px; }
.panel h3 { margin-top:0; color:#93c5fd; }
.stacked-form { display:flex; flex-direction:column; gap:8px; max-width:400px; }
.stacked-form input, .stacked-form select, .stacked-form textarea { padding:8px; border-radius:4px; border:1px solid #334155; background:#0f172a; color:#e2e8f0; box-sizing:border-box; width:100%; margin:0; }
.stacked-form textarea { resize:vertical; min-height:60px; font-family:inherit; }
.stacked-form button { width:auto; align-self:flex-start; margin:0; padding:8px 16px; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { padding:8px; text-align:left; border-bottom:1px solid #334155; font-size:14px; }
.qty-row { display:flex; align-items:center; gap:8px; }
.unit-label { background:#0f172a; border:1px solid #334155; border-radius:4px; padding:8px 12px; font-size:13px; min-width:40px; text-align:center; }
.danger-btn { background:#b45309; }

.tab-nav { display:flex; gap:8px; padding:0 24px; background:#1e293b; border-bottom:1px solid #334155; }
.tab-btn { background:none; border:none; color:#94a3b8; padding:14px 16px; cursor:pointer; font-size:14px; width:auto; margin:0; border-bottom:3px solid transparent; }
.tab-btn.active { color:#93c5fd; border-bottom-color:#2563eb; }
.dash-content { max-width:900px; margin:0 auto; padding:20px; }
/* !important is required here: several pages put class="hidden" on an
   element that ALSO carries an inline style="...display:flex..." for its
   own layout (e.g. dashboard.html's subscription-renewal banner,
   stock.html's label-size field group). A plain class rule loses to any
   inline style regardless of source order, so without !important those
   elements render permanently visible no matter what JS does with the
   "hidden" class — which is exactly what caused the subscription banner
   to always show, empty, even for a LOCAL_DEV shop far from expiry. */
.hidden { display:none !important; }
.period-select { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.period-select select { padding:6px; background:#0f172a; color:#e2e8f0; border:1px solid #334155; border-radius:4px; }
.period-select button { width:auto; margin:0; padding:8px 16px; }
.metric-cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-bottom:24px; }
.metric-card { background:#0f172a; border:1px solid #334155; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.metric-card.highlight { border-color:#2563eb; }
.metric-label { font-size:12px; color:#94a3b8; }
.metric-value { font-size:20px; font-weight:bold; }
.hint { color:#94a3b8; font-size:13px; }

.row-spoilage { background: rgba(180,83,9,0.15); }

.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:20px; }

.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.inline-form input, .inline-form select { padding:8px; border-radius:4px; border:1px solid #334155; background:#0f172a; color:#e2e8f0; box-sizing:border-box; margin:0; }
.inline-form input[type="text"], .inline-form input[type="number"] { width:160px; }
.inline-form button { width:auto; margin:0; padding:8px 14px; }

.revenue-badge { background:#16a34a; color:white; padding:6px 12px; border-radius:4px; font-size:13px; font-weight:bold; margin-right:12px; }
.stat-row { display:flex; gap:20px; background:#0f172a; border:1px solid #334155; border-radius:6px; padding:10px 14px; margin-bottom:12px; font-size:13px; }

/* Notifications nav-item unread badge (Owner-only) */
.nav-item { position: relative; }
.notif-badge { background:#ef4444; color:#fff; font-size:11px; font-weight:bold; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; margin-left:auto; text-transform:none; letter-spacing:normal; }
.notif-badge.hidden { display:none; }