/* ============================================================
   storefront-theme.css — soft "storefront" look for the ERP
   ------------------------------------------------------------
   Mirrors the live flowermarketplace.com storefront aesthetic:
   cream canvas, soft white cards, storefront-green primary/Add
   buttons, Inter typography.

   PRESENTATIONAL ONLY. No JS, no DOM, no logic. Loaded AFTER each
   page's own styles so it overrides them (also uses !important).
   The shared app HEADER (.topbar) + SIDEBAR are intentionally left
   untouched so navigation stays consistent across every page.

   Revert globally by removing the <link> from the pages (or just
   delete this file). Daniel 2026-06-30.
   ============================================================ */
:root{
  --oe-green:#6FA539;        /* storefront primary green   */
  --oe-green-dark:#5e8f31;   /* hover/active               */
  --oe-green-soft:#e8f4dd;   /* "in cart"/added soft fill  */
  --oe-green-line:#bcdd9a;   /* soft green border          */
  --oe-cream:#FAF8F3;        /* page canvas                */
  --oe-plum:#2A1733;         /* headings                   */
}

/* ---- page canvas + typography (content area only) ---- */
.main{ background:var(--oe-cream) !important; }
.main, .main button, .main input, .main select, .main textarea{
  font-family:'Inter','system-ui',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;
}

/* ---- primary actions → storefront green ---- */
.main .btn.btn-primary,
.main button.btn-primary,
.main .btn-primary{
  background:var(--oe-green) !important;
  border-color:var(--oe-green) !important;
  color:#fff !important;
}
.main .btn.btn-primary:hover,
.main button.btn-primary:hover,
.main .btn-primary:hover{
  background:var(--oe-green-dark) !important;
  border-color:var(--oe-green-dark) !important;
}

/* ---- catalog "Add" buttons (only where these classes exist) ---- */
.inline-catalog .add-btn{
  background:var(--oe-green) !important; border-color:var(--oe-green) !important;
  color:#fff !important; font-weight:700 !important; border-radius:10px !important;
}
.inline-catalog .add-btn:hover{ background:var(--oe-green-dark) !important; }
.inline-catalog .add-btn.in-cart{
  background:var(--oe-green-soft) !important; color:#3f7a1e !important;
  border:1px solid var(--oe-green-line) !important;
}

/* ---- active filter chips → green ---- */
.cat-chip.active{
  background:var(--oe-green) !important; border-color:var(--oe-green) !important; color:#fff !important;
}

/* ---- soft white product tiles (catalog pages) ---- */
.inline-catalog .prod-row,
.inline-catalog .prod-card{
  background:#fff !important; border:1px solid #ece9ef !important;
  border-radius:12px !important; box-shadow:0 1px 2px rgba(31,29,43,.05) !important;
}
.inline-catalog .prod-row.in-cart,
.inline-catalog .prod-card.in-cart{
  border-color:var(--oe-green-line) !important; background:#fcfdf9 !important;
  box-shadow:0 1px 3px rgba(111,165,57,.12) !important;
}

/* ---- customer PORTAL shop rows/cards (portal/shop.html etc.) ---- */
.portal-row, .p-card{
  background:#fff !important; border:1px solid #ece9ef !important;
  border-radius:12px !important; box-shadow:0 1px 2px rgba(31,29,43,.05) !important;
}
.portal-row.in-cart, .p-card.in-cart{
  border-color:var(--oe-green-line) !important; background:#fcfdf9 !important;
  box-shadow:0 1px 3px rgba(111,165,57,.12) !important;
}
/* portal Add buttons are .btn-primary (row-add / p-card-add) → already green via the rule above */

/* ---- soften the bold purple "ship date" banner to the light info style
        (matches the dashboard "needs review" banner). Same .ship-banner class
        is used on Order Entry + the customer portal shop, so this covers both. ---- */
.ship-banner{
  background:linear-gradient(135deg,#f3eefb,#eef4ff) !important;
  border:1px solid #e2d9f3 !important;
  color:#2b2540 !important;
  box-shadow:none !important;
}
.ship-banner h3{ color:#2b2540 !important; }
.ship-banner .lbl, .ship-banner .note{ color:#6b6577 !important; opacity:1 !important; }
.ship-banner .note strong{ color:#2b2540 !important; }
/* icon chip → solid purple with a white glyph */
.ship-banner .ico{ background:#6b4ea0 !important; color:#fff !important; }
.ship-banner .ico svg{ color:#fff !important; stroke:#fff !important; }
/* controls readable on the light background */
.ship-banner .dismiss-x{ background:#e7def5 !important; color:#6b4ea0 !important; }
.ship-banner .dismiss-x:hover{ background:#dccef0 !important; }
.ship-banner .change{ background:#6b4ea0 !important; color:#fff !important; }
.ship-banner .change:hover{ background:#5b3d8a !important; }