/* Brite Bird Dealer Portal — shared styles
   Inlines the brand tokens, then a portal-specific shell + primitives. */

@font-face { font-family:"Pacaembu"; src:url("../fonts/Pacaembu-Thin.woff2") format("woff2"); font-weight:100; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../fonts/Pacaembu-Light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../fonts/Pacaembu-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../fonts/Pacaembu-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../fonts/Pacaembu-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../fonts/Pacaembu-Black.woff2") format("woff2"); font-weight:800; font-display:swap; }

:root {
  --bb-pink:#EF2AC1; --bb-orange:#F26924; --bb-plum:#340E30; --bb-black:#000;
  --bb-magenta:#CC27B0; --bb-tangerine:#F7901E; --bb-bubblegum:#F76ADA; --bb-yellow:#FDB71A;
  --bb-white:#FFFFFF; --bb-cream:#FFF8EC;
  --bb-ink-60:color-mix(in srgb,var(--bb-plum) 60%,white);
  --bb-ink-40:color-mix(in srgb,var(--bb-plum) 40%,white);
  --bb-ink-20:color-mix(in srgb,var(--bb-plum) 20%,white);
  --bb-ink-10:color-mix(in srgb,var(--bb-plum) 10%,white);
  --bb-ink-05:color-mix(in srgb,var(--bb-plum) 5%,white);
  --bb-grad-sunrise:linear-gradient(90deg,var(--bb-orange) 0%,var(--bb-pink) 100%);
  --bb-grad-dusk:linear-gradient(90deg,var(--bb-orange) 0%,var(--bb-pink) 55%,var(--bb-plum) 100%);
  --bb-grad-honey:linear-gradient(90deg,var(--bb-yellow) 0%,var(--bb-orange) 100%);
  --bb-grad-night:linear-gradient(90deg,var(--bb-orange) 0%,var(--bb-plum) 100%);

  --shadow-sm:0 1px 2px rgba(52,14,48,.08);
  --shadow-md:0 6px 16px -4px rgba(52,14,48,.14);
  --shadow-lg:0 20px 40px -12px rgba(52,14,48,.22);
  --shadow-pop:0 6px 0 0 var(--bb-plum);
  --shadow-pop-sm:0 4px 0 0 var(--bb-plum);

  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --font:"Pacaembu","Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --d-row: 18px;
  --d-card: 24px;
  --d-gap: 20px;

  --lead: var(--bb-pink);
  --lead-grad: var(--bb-grad-sunrise);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bb-cream);font-family:var(--font);color:var(--bb-plum);-webkit-font-smoothing:antialiased;}
body{font-weight:100;line-height:1.45;font-size:15px;}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-0.015em;font-weight:700;line-height:1.05;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:var(--font);}
img{display:block;max-width:100%;}

/* ===== APP SHELL ============================================== */
.app {
  display:grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas: "side top" "side main";
  min-height: 100vh;
}
.app .topbar{ grid-area: top; }
.app .sidebar{ grid-area: side; }
.app .main { grid-area: main; padding: 32px 40px 80px; max-width: 1280px; width:100%; }

/* ===== SIDEBAR ================================================= */
.sidebar{
  background: var(--bb-plum);
  color: var(--bb-cream);
  padding: 22px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow:auto;
}
.sidebar .brand{
  display:flex; align-items:baseline; gap:2px;
  padding: 8px 12px 22px;
  font-weight:800; font-size:22px; letter-spacing:-0.025em;
  color: var(--bb-cream);
}
.sidebar .brand .dot{
  color: var(--bb-pink);
  font-size: 22px;
  line-height: 1;
}
.sidebar .group-label{
  font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color: rgba(255,248,236,0.4);
  padding: 18px 10px 8px;
}
.sidebar a.nav{
  display:flex; align-items:center; gap:12px;
  padding: 11px 12px; border-radius:12px;
  font-size:14px; font-weight:500;
  color: rgba(255,248,236,0.78);
  transition: background .15s ease, color .15s ease;
}
.sidebar a.nav:hover{ background: rgba(255,255,255,0.06); color: var(--bb-cream); }
.sidebar a.nav.active{
  background: rgba(255,255,255,0.10);
  color: var(--bb-cream);
  box-shadow: inset 3px 0 0 var(--lead);
}
.sidebar a.nav svg{ width:18px;height:18px; opacity:.9; flex-shrink:0; }
.sidebar a.nav .badge{
  margin-left:auto; font-size:10px; font-weight:700; letter-spacing:0.05em;
  background: var(--lead); color:white; padding:2px 7px; border-radius:999px;
}
.sidebar .rep{
  margin-top:auto;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
  display:flex; gap:12px; align-items:center;
}
.sidebar .rep .ava{
  width:38px;height:38px;border-radius:999px; background:var(--lead-grad);
  display:grid;place-items:center;color:white;font-weight:700;font-size:15px;flex-shrink:0;
}
.sidebar .rep .name{ font-size:13px; font-weight:700; color:var(--bb-cream); }
.sidebar .rep .role{ font-size:11px; color: rgba(255,248,236,0.55); margin-top:1px;}
.sidebar .rep .call{
  margin-left:auto; width:32px;height:32px;border-radius:10px;
  background: rgba(255,255,255,0.08);
  display:grid;place-items:center; color:var(--bb-cream); cursor:pointer;
  border:0; transition: background .15s;
}
.sidebar .rep .call:hover{ background: var(--lead); }

/* ===== TOPBAR ================================================== */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding: 0 32px;
  background: var(--bb-cream);
  border-bottom: 1px solid var(--bb-ink-10);
  position:sticky; top:0; z-index:30;
}
.search{
  flex:1; max-width:560px;
  position:relative;
}
.search input{
  width:100%; padding: 11px 14px 11px 42px;
  border: 1px solid var(--bb-ink-10);
  background: var(--bb-white);
  border-radius: var(--radius-pill);
  font-size: 14px; color: var(--bb-plum);
  outline: none; transition: border .15s, box-shadow .15s;
}
.search input:focus{ border-color: var(--lead); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lead) 18%, transparent); }
.search input::placeholder{ color: var(--bb-ink-40); }
.search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px;height:18px; color:var(--bb-ink-40); }
.search .kbd{ position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--bb-ink-40); border:1px solid var(--bb-ink-10); background:var(--bb-cream); padding:2px 6px; border-radius:6px; }

.topbar .right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.icon-btn{
  width:40px;height:40px;border-radius:12px; border:0; cursor:pointer;
  background:transparent; color:var(--bb-plum);
  display:grid;place-items:center; position:relative;
  transition: background .15s;
}
.icon-btn:hover{ background:var(--bb-ink-05); }
.icon-btn .dot{ position:absolute; top:9px; right:9px; width:8px;height:8px; background:var(--bb-pink); border-radius:999px; box-shadow: 0 0 0 2px var(--bb-cream); }

.cart-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px 8px 10px;
  background: var(--bb-plum); color:white;
  border-radius: var(--radius-pill);
  cursor:pointer; border:0;
  font-family: var(--font); font-weight:700; font-size:14px;
  box-shadow: var(--shadow-pop-sm);
  transition: transform .12s, box-shadow .12s;
}
.cart-pill:hover{ transform: translateY(2px); box-shadow: 0 2px 0 0 var(--bb-plum); }
.cart-pill .icon{ width:28px;height:28px;border-radius:999px;background:var(--lead);display:grid;place-items:center; color:white;}
.cart-pill .count{ background: var(--bb-cream); color: var(--bb-plum); padding: 1px 9px; border-radius:999px; font-size:12px; }
.cart-pill .amt{ opacity:.85; font-weight:500; }

.who-pill{
  display:flex; align-items:center; gap:10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-pill);
  background: var(--bb-white); border: 1px solid var(--bb-ink-10);
  font-size:13px; cursor:pointer; font-weight:500;
}
.who-pill .ava{ width:28px;height:28px;border-radius:999px;background:var(--bb-grad-sunrise); display:grid;place-items:center;color:white;font-weight:700;font-size:13px;}
.who-pill .co{ font-weight:700; }
.who-pill .tier{ font-size:10px; color:var(--bb-ink-40); letter-spacing:0.1em; text-transform:uppercase; }

/* ===== BUTTONS ================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer;
  font-family:var(--font); font-weight:700;
  border-radius: var(--radius-pill);
  transition: transform .12s, box-shadow .12s, background .15s, color .15s;
  letter-spacing: 0.005em; white-space:nowrap;
}
.btn.sm{ padding: 7px 14px; font-size:13px; }
.btn.md{ padding: 11px 20px; font-size:14px; }
.btn.lg{ padding: 14px 26px; font-size:16px; }
.btn.primary{ background: var(--lead); color:white; box-shadow: var(--shadow-pop-sm); }
.btn.primary:hover{ transform: translateY(2px); box-shadow: 0 2px 0 0 var(--bb-plum); }
.btn.plum{ background: var(--bb-plum); color: var(--bb-cream); box-shadow: var(--shadow-pop-sm); }
.btn.plum:hover{ transform: translateY(2px); box-shadow: 0 2px 0 0 var(--bb-pink); }
.btn.ghost{ background: transparent; color: var(--bb-plum); border:1.5px solid var(--bb-ink-20); }
.btn.ghost:hover{ border-color: var(--bb-plum); }
.btn.soft{ background: var(--bb-ink-05); color: var(--bb-plum); }
.btn.soft:hover{ background: var(--bb-ink-10); }
.btn.link{ background: transparent; color: var(--bb-plum); padding:6px 0; border-radius:0; }
.btn.link:hover{ color: var(--lead); }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ===== CARDS =================================================== */
.card{
  background: var(--bb-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--d-card);
}
.card.bordered{ box-shadow:none; border:1px solid var(--bb-ink-10); }
.card.plum{ background: var(--bb-plum); color: var(--bb-cream); }
.card.cream{ background: var(--bb-cream); }
.card.yellow{ background: var(--bb-yellow); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color: var(--lead);
}
.eyebrow .dot{ width:7px;height:7px;background:var(--lead);border-radius:999px; }
.eyebrow.invert{ color: var(--bb-yellow); }
.eyebrow.invert .dot{ background: var(--bb-yellow); }

.h-page{ font-size: 40px; letter-spacing:-0.02em; font-weight:700; line-height:1.05; }
.h-section{ font-size: 22px; letter-spacing:-0.01em; font-weight:700; }
.h-card{ font-size: 18px; font-weight:700; }
.muted{ color: var(--bb-ink-60); font-weight:100; }
.faint{ color: var(--bb-ink-40); }

.row{ display:flex; align-items:center; gap:12px; }
.row.between{ justify-content: space-between; }
.row.wrap{ flex-wrap:wrap; }
.spacer{ flex:1; }

.divider{ height:1px; background: var(--bb-ink-10); margin: 16px 0; border:0;}

/* ===== BADGES ================================================== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  background: var(--bb-ink-05); color: var(--bb-plum);
}
.badge.pink{ background: color-mix(in srgb, var(--bb-pink) 12%, white); color: var(--bb-pink); }
.badge.orange{ background: color-mix(in srgb, var(--bb-orange) 14%, white); color: #B85016; }
.badge.plum{ background: var(--bb-plum); color: white; }
.badge.yellow{ background: var(--bb-yellow); color: var(--bb-plum); }
.badge.green{ background:#E3F4DC; color:#2D6B1F;}
.badge.dot::before{ content:""; width:6px;height:6px; border-radius:999px; background:currentColor;}

/* ===== PRODUCT BLOCK PLACEHOLDER ============================== */
.prod-img{
  position:relative;
  background:
    repeating-linear-gradient(135deg, var(--bb-ink-05) 0 8px, transparent 8px 16px),
    var(--bb-cream);
  border-radius: var(--radius-md);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding: 14px;
  overflow:hidden;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bb-ink-40);
}
.prod-img.dark{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px),
    var(--bb-plum);
  color: rgba(255,248,236,0.55);
}
.prod-img .label{ background: var(--bb-cream); padding: 3px 8px; border-radius: 6px; }
.prod-img.dark .label{ background: rgba(0,0,0,0.3); color: var(--bb-cream); }

/* ===== QTY STEPPER ============================================ */
.qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--bb-ink-10); border-radius: var(--radius-pill);
  background: var(--bb-white); overflow:hidden;
}
.qty button{
  width:34px;height:34px; border:0; background:transparent; cursor:pointer;
  font-size:18px; font-weight:700; color: var(--bb-plum);
  display:grid; place-items:center;
  transition: background .12s;
}
.qty button:hover{ background: var(--bb-ink-05); }
.qty input{
  width:42px; text-align:center; border:0; background:transparent;
  font-weight:700; font-size:14px; color: var(--bb-plum); outline:none;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; }

/* ===== PRODUCT CARD PICTURE =================================== */
.card-pic{
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3;
  background: var(--bb-cream);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card-pic img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14px;
  background: var(--bb-white);
}

/* ===== PRODUCT CARD =========================================== */
.product-card{
  background: var(--bb-white);
  border-radius: var(--radius-lg);
  padding: 18px;
  display:flex; flex-direction:column; gap:14px;
  transition: transform .15s, box-shadow .15s;
  border: 1px solid transparent;
  cursor:pointer;
}
.product-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--bb-ink-10); }
.product-card .prod-img{ aspect-ratio: 4/3; }
.product-card .meta{ display:flex; gap:8px; align-items:center; font-size:11px; color:var(--bb-ink-40); font-family:var(--mono); }
.product-card .name{ font-size:17px; font-weight:700; letter-spacing:-0.005em; }
.product-card .desc{ font-size:13px; color: var(--bb-ink-60); font-weight:100; }
.product-card .price-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px solid var(--bb-ink-10); }
.product-card .price{ font-size:20px; font-weight:700; letter-spacing:-0.01em; }
.product-card .per{ font-size:12px; color:var(--bb-ink-40); font-weight:500; }
.product-card .stock{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#2D6B1F;}
.product-card .stock.low{ color:#A35C0E; }
.product-card .stock.out{ color:#9A1F1F; }
.product-card .stock::before{ content:"●"; margin-right:5px; }

/* ===== TABLE =================================================== */
table.t{ width:100%; border-collapse: collapse; font-size:14px; }
table.t th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--bb-ink-40); padding: 12px 14px; border-bottom:1px solid var(--bb-ink-10); }
table.t td{ padding: var(--d-row) 14px; border-bottom:1px solid var(--bb-ink-10); vertical-align: middle; }
table.t tr:last-child td{ border-bottom:0; }
table.t tr:hover td{ background: var(--bb-ink-05); }

/* ===== INPUTS ================================================== */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--bb-ink-40); }
.field input, .field select, .field textarea{
  padding: 12px 14px;
  border:1px solid var(--bb-ink-10);
  border-radius: var(--radius-md);
  background: var(--bb-white);
  font-size: 14px; color: var(--bb-plum);
  outline:none; transition: border .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--lead);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lead) 18%, transparent);
}
.field .hint{ font-size:12px; color: var(--bb-ink-40); }

/* ===== CART DRAWER ============================================ */
.drawer-scrim{
  position:fixed; inset:0; background: rgba(52,14,48,0.4);
  backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition: opacity .2s;
  z-index: 80;
}
.drawer-scrim.on{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; right:0; top:0; bottom:0; width: 440px; max-width:100vw;
  background: var(--bb-cream);
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.7,.2,1);
  z-index: 90;
  display:flex; flex-direction:column;
  box-shadow: -20px 0 40px -12px rgba(52,14,48,0.22);
}
.drawer.on{ transform: translateX(0); }
.drawer .head{ padding: 22px 24px 14px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--bb-ink-10); }
.drawer .head h3{ font-size:20px; }
.drawer .body{ flex:1; overflow:auto; padding: 14px 24px; }
.drawer .foot{ padding: 18px 24px 22px; border-top:1px solid var(--bb-ink-10); background:var(--bb-white); }

.cart-line{ display:grid; grid-template-columns: 60px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid var(--bb-ink-10); align-items:center;}
.cart-line:last-child{ border-bottom:0; }
.cart-line .pic{ width:60px;height:60px; border-radius:12px; }
.cart-line .name{ font-weight:700; font-size:14px; }
.cart-line .sku{ font-family:var(--mono); font-size:11px; color:var(--bb-ink-40); }
.cart-line .qrow{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.cart-line .price{ font-weight:700; font-size:15px; text-align:right; }

/* ===== BREADCRUMB ============================================== */
.crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--bb-ink-60); margin-bottom:14px;}
.crumb a:hover{ color: var(--lead); }
.crumb svg{ width:14px; height:14px; opacity:.5; }

/* ===== UTILITY ================================================= */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--d-gap); }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--d-gap); }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--d-gap); }
.stack{ display:flex; flex-direction:column; gap: var(--d-gap); }
.stack-sm{ display:flex; flex-direction:column; gap:8px; }
.stack-lg{ display:flex; flex-direction:column; gap:36px; }

/* density variants */
body.density-compact { --d-row:10px; --d-card:18px; --d-gap:14px; }
body.density-roomy   { --d-row:24px; --d-card:32px; --d-gap:28px; }

/* color theme variants */
body.theme-orange { --lead: var(--bb-orange); --lead-grad: var(--bb-grad-honey); }
body.theme-plum   { --lead: var(--bb-plum);   --lead-grad: var(--bb-grad-night); }

/* responsive */
@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .sidebar{ display:none; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .h-page{ font-size: 30px; }
}

/* ===== TOAST =================================================== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--bb-plum); color: var(--bb-cream);
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight:600;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 200;
}
.toast.on{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events:auto; }