:root { --bd:#e6e6ee; --bg:#fff; --sb:#f7f7f9; --muted:#667085; }

* { box-sizing: border-box; }
body {
  margin:0; background:#fafafa; color:#111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, "Helvetica Neue";
}
a { color:#0b66d6; text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color: var(--muted); }
.hr { border:none; border-top:1px solid var(--bd); margin:16px 0; }

/* top bar */
.topbar { height:56px; border-bottom:1px solid var(--bd); background:#fff; display:flex; align-items:center; }
.topbar-inner { width:100%; max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; padding:0 16px; }
.brand { font-weight:700; }
.topnav { display:flex; gap:14px; align-items:center; }
.topnav a { color:#0b66d6; }
.topnav span { color:#333; }

/* admin layout (grid to prevent wrapping sidebar to the top) */
.layout {
  width:100%; max-width:1200px; margin:0 auto;
  padding:16px;
  display:grid; grid-template-columns: 260px minmax(0,1fr);
  gap:20px; align-items:start;
}
.side {
  background:var(--sb); border:1px solid var(--bd); border-radius:10px; padding:14px;
  position:sticky; top:72px; height:fit-content;
}
.menu { display:flex; flex-direction:column; gap:8px; }
.menu a { color:#111; background:#fff; border:1px solid var(--bd); border-radius:8px; padding:8px 10px; text-decoration:none; }
.menu a:hover { background:#f5f7ff; }
.content { min-width:0; }

/* cards */
.card { background:#fff; border:1px solid var(--bd); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.card-h { padding:12px 14px; font-weight:600; border-bottom:1px solid var(--bd); background:#f9f9fb; }
.card-b { padding:14px; }
.cards-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:980px) { .cards-grid { grid-template-columns:1fr 1fr 1fr; } }
.card-big { font-size:1.8rem; font-weight:700; }

/* rows */
.row-card { display:flex; gap:12px; background:#fff; border:1px solid var(--bd); border-radius:12px; padding:14px; }

/* buttons */
.btn, .btn-ghost {
  display:inline-block; padding:10px 14px; border-radius:8px; text-decoration:none;
}
.btn { background:#111; color:#fff; border:1px solid #111; }
.btn:hover { background:#000; }
.btn-ghost { border:1px solid var(--bd); background:#fff; color:#111; }
.btn-ghost:hover { background:#f9f9fb; }

/* pills & badges */
.pill { display:inline-block; padding:3px 8px; border:1px solid var(--bd); border-radius:999px; font-size:.85rem; background:#f8f9ff; }
.pill--faint { background:#fff; }
.pill--code { background:#eef6ff; border-color:#d5e9ff; }

/* forms */
.submit-footer { margin-top:12px; display:flex; justify-content:flex-start; align-items:center; gap:8px; }
.grid-3 { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns:1fr 1fr 1fr; } }

/* tables */
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; color:#333; font-weight:600; background:#f9f9fb; border-bottom:1px solid var(--bd); padding:10px 8px; }
tbody td { border-bottom:1px solid var(--bd); padding:10px 8px; vertical-align:top; }
tbody tr:hover { background:#f7faff; }
td > .muted { color:#667085; }
th[style*="right"], td[style*="right"], td[style*="text-align:right"] { text-align:right !important; }

/* customer page helper */
.content-narrow { width:100%; max-width:900px; margin:0 auto; padding:16px; }

/* utils */
.mb-4 { margin-bottom:1rem; }
.text-2xl { font-size:1.5rem; }
.font-semibold { font-weight:600; }
.font-medium { font-weight:500; }
.border { border:1px solid var(--bd); }
.rounded { border-radius:8px; }
.w-24 { width:6rem; }
.px-2 { padding-left:.5rem; padding-right:.5rem; }
.py-1 { padding-top:.25rem; padding-bottom:.25rem; }
.align-top { vertical-align:top; }
/* === Admin dashboard bubble overflow fix (safe + additive) === */
.admin-body .cards-grid,
.admin-body .row-card { min-width: 0; }             /* allow grid children to shrink */
.admin-body .card,
.admin-body .row-card { overflow: hidden; }         /* clip any stray overflow */

.admin-body .card-b,
.admin-body .row-card { padding: 16px 18px; }       /* a bit more inner space */

.admin-body .card-b,
.admin-body .card-b * {
  white-space: normal;                               /* no forced single-line text */
  overflow-wrap: anywhere;                           /* break long words/IDs */
  word-break: break-word;                            /* fallback for older engines */
}

.admin-body .card-big { line-height: 1.1; }          /* large numbers don’t touch edges */

/* optional: slightly larger gap between bubbles */
.admin-body .cards-grid { gap: 14px; }
/* shared utilities for both portals */
.no-underline { text-decoration: none; }
.nowrap { white-space: nowrap; }
.tc { text-align: center; }
.tr { text-align: right; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.flex-gap-10 { display: flex; gap: 10px; align-items: center; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.qty-input { width: 80px; }
.align-center { align-self: center; }
.px-6 { padding-left: 6px; padding-right: 6px; }
.inline-gap-6 { display: inline-flex; align-items: center; gap: 6px; }
/* === Utility classes (added to remove inline styles) === */
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.flex-wrap { flex-wrap: wrap; }
.ml-auto { margin-left: auto; }
.inline { display: inline; }
.form-grid { display: grid; gap: 8px; padding: 12px; }
.metric-lg { font-size: 22px; font-weight: 700; }
/* === Utilities to replace old inline styles (admin + customer) === */

/* spacing */
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }

/* typography for dashboard metrics (replaces font-size:22px;font-weight:700) */
.metric-lg { font-size: 22px; font-weight: 700; }

/* layout helpers */
.flex-1 { flex: 1 1 0; min-width: 0; }       /* replaces style="flex:1" */
.flex-wrap { flex-wrap: wrap; }              /* replaces style="flex-wrap:wrap" */
.ml-auto { margin-left: auto; }              /* replaces style="margin-left:auto" */
.inline { display: inline; }                 /* replaces style="display:inline" */

/* simple grid helpers used on admin form dashboard */
.grid { display: grid; gap: 10px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* small form “card” area (replaces gap/padding inline on forms list) */
.form-grid { display: grid; gap: 8px; padding: 12px; }

/* right-align utility already exists as .tr; keep here for completeness */
/* .tr { text-align: right; } */
/* ===== Topbar normalization (site-wide) =====
   Ensures the header spans the full width and isn't styled like a card. */
.topbar {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--topbar-bg, #fff);
  box-shadow: none;
}

/* Inner container: centers content and aligns brand + nav like admin */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;          /* tweak if you use a different layout width */
  margin: 0 auto;
  padding: 12px 20px;
}

/* Nav links in the header */
.topnav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.topnav a {
  text-decoration: none;
}
.topnav a:hover {
  text-decoration: underline;
}

/* Brand link */
.brand a {
  text-decoration: none;
  font-weight: 700;
}
/* === TOPBAR SITEWIDE HARD RESET === */
header.topbar {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--topbar-bg, #fff) !important;
}

/* centered inner row (brand left, nav right) */
header.topbar .topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  max-width: 1200px !important; /* adjust if your layout uses a different max */
  margin: 0 auto !important;
  padding: 12px 20px !important;
}

/* nav links */
header.topbar .topnav {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
header.topbar .topnav a,
header.topbar .brand a {
  text-decoration: none;
}
header.topbar .brand a { font-weight: 700; }
/* ===== Public/Customer content shell (no effect on Admin) =====
   Admin pages use .layout for width + grid. Public/Customer pages use
   <main class="content"><div class="container">...</div></main>.
   These rules center and constrain that container. */
.content > .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
@media (max-width: 900px) {
  .content > .container { padding: 20px; }
}
@media (max-width: 640px) {
  .content > .container { padding: 16px; }
}

/* ===== Cards grid (landing/home hubs) ===== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1200px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: 1fr; }
}

/* Optional smoothing for the hub tiles (matches admin card spacing) */
.card .card-b { padding: 16px; }
.no-underline { text-decoration: none; }
.nowrap { white-space: nowrap; }

/* Keep: admin-only grid remains unchanged, because we target only .content > .container */
/* Responsive helpers (Tier 5 mobile polish) */
.auth-card { max-width: 420px; margin: 2rem auto; padding: 1rem; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.08); }
form label { display:block; margin:.5rem 0 .25rem; }
input, select, button { width:100%; padding:.6rem; margin:.25rem 0 1rem; border-radius:8px; border:1px solid #ddd; }
@media (max-width: 768px) {
  .table { display:block; overflow-x:auto; }
  .grid { display:grid; gap:1rem; grid-template-columns: 1fr; }
  nav .right { display:none; }
}