/* =========================================================
   styles.css — RestaurantAssist UI
   Merged + organized (includes former index.html inline styles)
   ========================================================= */

/* =========================================================
   1) GLOBALS / RESET
   ========================================================= */

:root{
  /* Default theme: DARK */
  color-scheme: dark;

  /* Theme tokens */
  --bg: #0f172a;
  --text: #e5e7eb;
  --heading: #ffffff;
  --muted: #94a3b8;
  --muted-2: #cbd5e1;

  --card: #0b1224;
  --card-2: #070b16;
  --input: #0a1020;

  --border: rgba(255,255,255,0.12);
  --border-soft: rgba(255,255,255,0.08);

  --link: #7dd3fc;

  --accent: #38bdf8;
  --accent-weak: rgba(56,189,248,0.12);
}

body{
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin:0;
}

/* Main page wrapper */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:22px;
}

/* Utility: hard-hide anything */
.is-hidden{
  display:none !important;
}

/* Overflow safety (prevents grid children from forcing overflow) */
.card, .container, .nav, .hero{
  min-width:0;
}

/* Links (site default) */
a{ color: var(--link); }

/* =========================================================
   2) TYPOGRAPHY
   ========================================================= */

h1, h2{
  color: var(--heading);
  margin:0;
}

p{
  color: var(--muted-2);
  line-height:1.6;
}

.muted{
  color: var(--muted);
  font-size:12px;
  line-height:1.5;
}

.tiny{
  color: var(--muted);
  font-size:12px;
  margin-top:8px;
}

/* Inline code styling (used in docs/examples) */
code{
  background:rgba(255,255,255,0.06);
  padding:2px 6px;
  border-radius:6px;
}

/* =========================================================
   3) BUTTONS / LINKS
   ========================================================= */

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
}

/* Primary CTA */
.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color:#031018; /* ok to keep, or switch per-theme later */
}

/* “Outline” variant */
.btn-outline{
  background:transparent;
  border:1px solid var(--border-color, #444);
  color:inherit;
}

.btn-outline:hover{
  background:rgba(255,255,255,0.05);
}

/* Active/selected state */
.btn.active{
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--accent-weak);
  color:#c7f9ff;
  box-shadow:0 0 0 1px rgba(56,189,248,0.25);
}

/* Text-only link button */
.linkBtn{
  background:transparent;
  border:0;
  padding:0;
  color:#7dd3fc;
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
}

/* =========================================================
   4) NAVIGATION
   ========================================================= */

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  padding:14px 18px;
  border:1px solid var(--border-soft);
  border-radius:14px;
  background: var(--card);
  box-shadow:0 10px 24px rgba(0,0,0,0.25);

  /* Desktop structure behavior */
  flex-wrap:nowrap;
}

/* Left cluster: brand + (mobile) menu button */
.navTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  flex:1;
}

/* Brand */
.brand{
  font-weight:1000;
  letter-spacing:0.2px;
  font-size:22px;
  color:#ffffff;
  display:flex;
  align-items:center;
  gap:10px;
}

.brand .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 22px rgba(56,189,248,0.75);
}

.brand span{
  background:linear-gradient(90deg, #ffffff, #d9fbff, #9ae6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 22px rgba(56,189,248,0.22);
}

/* Right cluster: nav links */
.navlinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;

  margin-left:auto;
  justify-content:flex-end;
}

/* Mobile menu toggle button (hidden on desktop) */
.navToggle{
  display:none; /* desktop */
  white-space:nowrap;
}

/* ---------- Mobile nav behavior (<= 720px) ---------- */
@media (max-width:720px){
  .nav{
    flex-direction:column;
    align-items:stretch;
    overflow:hidden;
  }

  .navToggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Hide links until menu is opened */
  .navlinks{
    display:none;          /* closed state */
    width:100%;
    margin-top:10px;

    /* Use grid in mobile menu */
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;

    /* Kill old flex settings explicitly */
    flex-direction:unset;
    justify-content:unset;
    align-items:unset;
  }

  /* When menu is opened */
  .nav.open .navlinks{
    display:grid;
  }

  /* Buttons fill their grid cell */
  .navlinks .btn{
    width:100%;
    box-sizing:border-box;
    text-align:center;
    padding:12px 12px;
    border-radius:12px;
    font-size:15px;
  }

  /* If odd number of buttons, last one spans full width */
  .nav.open .navlinks .btn:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}

/* Force-hide mobile menu controls on desktop (>= 721px) */
@media (min-width:721px){
  .navToggle{ display:none !important; }
  .navlinks{ display:flex !important; }
}

/* =========================================================
   5) HERO HEADER (Dashboard title row)
   ========================================================= */

.hero-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hero-header h1{
  margin:0;
}

/* =========================================================
   6) HERO / PAGE SECTIONS
   ========================================================= */

.hero{
  margin-top:18px;
  padding:22px;
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:
    radial-gradient(1200px 420px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    radial-gradient(900px 380px at 90% 10%, rgba(34,197,94,0.14), transparent 55%),
    var(--card);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.hero + .grid{
  margin-top:18px; /* ✅ */
}

/* Index hero h1 sizing (bigger than dashboard) */
.hero h1{
  margin:0;
  font-size:42px;
  line-height:1.1;
  letter-spacing:-0.6px;
  color:#fff;
}

.hero .sub{
  margin-top:10px;
  font-size:16px;
  color:#cbd5e1;
  max-width:900px;
  line-height:1.6;
}

/* Index hero CTA row */
.heroActions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Badge (Index hero) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,0.35);
  background:rgba(34,197,94,0.12);
  color:#bbf7d0;
  font-weight:800;
  font-size:12px;
  margin-bottom:12px;
  width:fit-content;
}

.badge .tick{
  width:10px;
  height:10px;
  border-radius:2px;
  background:#22c55e;
  box-shadow:0 0 16px rgba(34,197,94,0.35);
  display:inline-block;
}

.section{
  margin-top:16px;
}

.sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.sectionHead h2{
  margin:0;
  font-size:18px;
  color:#e2e8f0;
  letter-spacing:-0.2px;
}

/* =========================================================
   7) CARDS + LAYOUT GRIDS
   ========================================================= */

.card{
  padding:18px;
  border-radius:16px;
  border:1px solid var(--border-soft);
  background: var(--card);
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
}

.example, 
.boxOut, 
.codeBox, 
.statusBox{ 
   background: var(--card-2); 
   border:1px solid var(--border-soft); 
}

/* Generic vertical stack helper */
.stack{
  display:grid;
  gap:16px;
  margin-top:16px;
}

/* Two-column row (Index uses .row2) */
.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}

@media (max-width:900px){
  .row2{ grid-template-columns:1fr; }
}

/* (Existing) Two-column grid used elsewhere */
.grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:16px;
  align-items:stretch;
}

@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
}

.leftMain{
  flex:1;
}

/* =========================================================
   8) LISTS + EXAMPLES (Index)
   ========================================================= */

ul.clean{
  margin:10px 0 0 18px;
  color:#cbd5e1;
}

ul.clean li{
  margin:8px 0;
}

/* Example box used in “What you get” */
.example{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background: var(--card-2);
  color: var(--muted-2);
  font-size:14px;
  line-height:1.6;
}

/* =========================================================
   9) PILLS / BADGES
   ========================================================= */

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#cbd5e1;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}

.pill.ok{
  border-color:rgba(34,197,94,0.35);
  background:rgba(34,197,94,0.10);
  color:#bbf7d0;
}

.pill.bad{
  border-color:rgba(248,113,113,0.35);
  background:rgba(248,113,113,0.08);
  color:#fecaca;
}

.pill.info{
  border-color:rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.10);
  color:#bae6fd;
}

/* Index “Most popular” pill variant (smaller) */
.miniPill{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  margin-left:10px;
  border:1px solid rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.12);
  color:#c7f9ff;
}

/* =========================================================
   10) FORMS (Index trial form)
   ========================================================= */

label{
  display:block;
  font-size:13px;
  color: var(--muted);
  margin:10px 0 6px;
}

input{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background: var(--input);
  color: var(--text);
  outline:none;
}

input:focus{
  border-color: rgba(56,189,248,0.8); /* fallback */
  border-color: color-mix(in srgb, var(--accent) 80%, transparent); /* preferred */
}

/* Form message area */
.msg{
  margin-top:10px;
  font-size:13px;
  color:#cbd5e1;
  min-height:18px;
}

.err{ color:#fca5a5; }
.ok { color:#86efac; }

/* =========================================================
   11) PLAN PICKER (Starter / Pro)
   ========================================================= */

#startTrialBtn{
  margin-top:20px;
}

/* Plan label spacing block (Index) */
.planLabel{
  margin-top:16px;
  margin-bottom:6px;
}

/* Help + tooltip */
.planHelp{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:6px;
}

.planTooltip{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.25);

  /* closed */
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  overflow:hidden;

  transition:max-height 260ms ease, opacity 180ms ease, transform 180ms ease;
}

.planTooltip.open{
  max-height:200px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Plan buttons container */
.planPick{
  margin-top:14px;
  margin-bottom:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Individual plan button */
.planBtn{
  text-align:left;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e5e7eb;
  cursor:pointer;

  width:100%;
  box-sizing:border-box;

  transition:transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.planBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.08);
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
}

.planBtn:active{
  transform:translateY(0);
}

/* Selected plan (accent) */
.planBtn.selected{
  border-color:rgba(56,189,248,0.60);
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.25),
    0 12px 26px rgba(0,0,0,0.22);
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(56,189,248,0.10), transparent 55%),
    rgba(255,255,255,0.04);
}

/* Pro-only premium feel (only when selected) */
.planBtn.selected[data-plan="pro"]{
  border-color:rgba(34,197,94,0.45);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.22),
    0 12px 26px rgba(0,0,0,0.22);
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(34,197,94,0.10), transparent 55%),
    rgba(255,255,255,0.04);
}

/* Text inside plan buttons */
.planName{
  font-weight:900;
  font-size:18px;   /* default (pricing cards) */
  color:#fff;
}

/* Inside planPick buttons we want slightly different sizing */
.planBtn .planName{
  font-size:16px;
  margin-bottom:4px;
}

.planMeta{
  margin-top:4px;
  font-size:12px;
  color:#94a3b8;
}

.planBtn .planMeta{
  font-size:13px;
  opacity:0.85;
}

/* Mobile polish */
@media (max-width:720px){
  .planPick{ grid-template-columns:1fr 1fr; }
  .planBtn{ padding:12px; }
  .planBtn .planMeta{ font-size:12px; }
}

/* =========================================================
   12) PRICING (Index)
   ========================================================= */

.pricingHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.pricingHead h2{ margin:0; }

/* Small helper text in headings */
.hint{
  color:#94a3b8;
  font-size:13px;
  margin-top:4px;
}

.planStack{
  display:grid;
  gap:14px;
  margin-top:12px;
}

.plan{
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
}

.plan.featured{
  border-color:rgba(56,189,248,0.40);
  box-shadow:0 0 0 1px rgba(56,189,248,0.25);
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(56,189,248,0.10), transparent 55%),
    rgba(255,255,255,0.04);
}

.planTop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.price{
  font-weight:900;
  color:#e2e8f0;
}

.price small{
  font-weight:800;
  color:#94a3b8;
}

/* “Most popular” pill used inside pricing card title */
.plan .pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.12);
  color:#c7f9ff;
  margin-left:8px;
}

.plan ul{
  margin:10px 0 0 18px;
  color:#cbd5e1;
}

.plan ul li{
  margin:7px 0;
}

.planActions{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.planNote{
  color:#94a3b8;
  font-size:12px;
}

/* =========================================================
   13) USAGE CARD (dashboard meter + warning)
   ========================================================= */

.usageCard{
  margin-top:16px;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.usageTitle{
  font-weight:700;
  margin-bottom:10px;
}

.usageRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.usageLabel{
  opacity:.85;
}

.usageNums{
  font-variant-numeric:tabular-nums;
  opacity:.9;
}

.usageBar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  margin-top:8px;
}

.usageFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:rgba(66, 153, 225, .9);
  transition:width .25s ease;
}

/* “Limit hit” styling */
.usageCard.limit-hit{
  box-shadow:0 0 0 1px rgba(255, 80, 80, 0.4);
}

.usageCard.limit-hit .usageFill{
  background:linear-gradient(90deg, #ff6b6b, #ff3b3b);
}

/* =========================================================
   14) INFO BOX + BUTTON ROW (used across pages)
   ========================================================= */

.boxOut{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background: var(--card-2);
  color: var(--muted-2);
  line-height:1.65;
}

.boxOut h3{
  margin:0 0 8px 0;
  color:#e2e8f0;
  font-size:16px;
}

.btnRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

/* =========================================================
   15) ANIMATIONS
   ========================================================= */

.fade-in{
  animation: fadeInUp 200ms ease-out;
}

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

/* =========================================================
   16) FOOTER
   ========================================================= */

.footer{
  margin:18px 0 8px;
  text-align:center;
  color:#94a3b8;
  font-size:12px;
}

.leftFooter{
  margin-top:16px;
}

/* =========================================================
   17) DASHBOARD-SPECIFIC UI
   ========================================================= */

/* Dashboard section heading row (title + pill/status) */
.sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.sectionTitle h2{
  margin:0;
  font-size:18px;
  color:#e2e8f0;
}

/* Dashboard form controls */
input,
select,
textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background: var(--input);
  color: var(--text);
  outline:none;
  font-family:inherit;
}

textarea{
  min-height:150px;
  resize:vertical;
}

/* Focus ring (with fallback) */
input:focus,
select:focus,
textarea:focus{
  border-color: var(--accent); /* fallback */
  border-color: color-mix(in srgb, var(--accent) 80%, transparent); /* preferred */
}

/* “Status pill” used for Not ready / Connected etc. */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#cbd5e1;
}

.pill.ok{
  border-color:rgba(34,197,94,0.35);
  background:rgba(34,197,94,0.10);
  color:#bbf7d0;
}

.pill.bad{
  border-color:rgba(248,113,113,0.35);
  background:rgba(248,113,113,0.08);
  color:#fecaca;
}

/* Mono block for account values */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* Toast notification (Copied!) */
.toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(2,6,23,0.85);
  color:#e5e7eb;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  font-weight:800;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity 160ms ease;
  z-index: 50;
}

.toast.show{
  opacity:1;
}

/* Dashboard grid breakpoint:
   Your merged styles.css currently has .grid defined but no breakpoint.
   This matches what you had inline. */
@media (max-width: 900px){
  .grid{
    grid-template-columns:1fr;
  }
}

/* PostLinksPro "active" highlight */
#postLinks a, #postLinksPro a { opacity: 0.55; text-decoration: none; }
#postLinks a.active, #postLinksPro a.active { opacity: 1; text-decoration: underline; font-weight: 600; }

/* =========================================================
   18) DOCS PAGE (docs.html)
   ========================================================= */

/* Docs page: use smaller hero typography (Dashboard-sized) */
.page-docs .hero h1{
  font-size:34px;
  letter-spacing:-0.3px;
}

.page-docs .hero .sub{
  font-size:14px;
  max-width:980px;
}

/* In docs hero + docs content, links should inherit text color (matches your original intent) */
.page-docs .hero a,
.page-docs .docsWrap a{
  color:inherit;
}

/* Docs layout wrapper */
.docsWrap{
  margin-top:12px;
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:16px;
  align-items:start;
  width:100%;
  max-width:100%;
}

.docsWrap > div,
.docsWrap .card{
  min-width:0;
}

/* Responsive: sidebar becomes horizontal jump bar */
@media (max-width:1200px){
  .docsWrap{ grid-template-columns:1fr; }

  .sideNav{
    position:static !important;
    top:auto !important;
    overflow-x:auto;
    padding-bottom:6px;
  }

  .sideNav .navTitle{ margin-bottom:8px; }

  .sideNav a{
    display:inline-flex !important;
    margin:6px 6px 0 0 !important;
    width:auto !important;
    white-space:nowrap;
    padding:8px 10px;
    margin-bottom:0 !important;
  }
}

/* Left sticky nav */
.sideNav{
  position:sticky;
  top:16px;
}

.sideNav .navTitle{
  font-weight:900;
  color:#e2e8f0;
  margin-bottom:10px;
  font-size:14px;
  letter-spacing:0.2px;
}

.sideNav a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:#cbd5e1;
  text-decoration:none;
  margin-bottom:8px;
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.sideNav a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.05);
  border-color:rgba(56,189,248,0.25);
}

/* Section spacing / anchor offset */
.docSection{ scroll-margin-top:90px; }
.docSection + .docSection{ margin-top:16px; }

/* Endpoint header row */
.endpointHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.endpointHead h2{
  margin:0;
  color:#e2e8f0;
  font-size:18px;
  letter-spacing:-0.2px;
}

/* Method chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#cbd5e1;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}

.chip.get{
  border-color:rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.10);
  color:#bae6fd;
}

.chip.post{
  border-color:rgba(34,197,94,0.35);
  background:rgba(34,197,94,0.10);
  color:#bbf7d0;
}

.chip.webhook{
  border-color:rgba(248,113,113,0.35);
  background:rgba(248,113,113,0.08);
  color:#fecaca;
}

/* Code blocks + copy button */
.codeBox{
  position:relative;
  border:1px solid var(--border-soft);
  background: var(--card-2);
  border-radius:14px;
  padding:12px;
  overflow:hidden;
  color: var(--muted-2);
}

pre{
  margin:0;
  overflow-x:auto;
  padding-right:44px;
  color:#e5e7eb;
  line-height:1.55;
  font-size:13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  white-space:pre;
}

.copyBtn{
  position:absolute;
  top:10px;
  right:10px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#e2e8f0;
  cursor:pointer;
}

.copyBtn:hover{
  border-color:rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.10);
}

/* Key/Value grid */
.kv{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:10px;
  margin-top:10px;
}

@media (max-width:600px){
  .kv{ grid-template-columns:1fr; }
}

.kv .k{
  color:#94a3b8;
  font-size:12px;
}

.kv .v{
  color:#e2e8f0;
  font-size:13px;
}

/* Callout note */
.callout{
  border:1px solid rgba(56,189,248,0.22);
  background:rgba(56,189,248,0.08);
  border-radius:14px;
  padding:12px;
  color:#cbd5e1;
}

.callout strong{ color:#e2e8f0; }

/* =========================================================
   19) SUPPORT PAGE (support.html)
   ========================================================= */

/* Support page: use smaller hero typography (Dashboard-sized) */
.page-support .hero h1{
  font-size:34px;
  letter-spacing:-0.3px;
}

.page-support .hero .sub{
  font-size:14px;
  max-width:980px;
}

/* Support: slightly tighter pills (optional; matches your original support.html) */
.page-support .pill{
  padding:7px 10px;
  font-weight:900;
}

/* Support layout */
.supportWrap{
  margin-top:16px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:16px;
  align-items:start;
}

@media (max-width:980px){
  .supportWrap{ grid-template-columns:1fr; }
}

/* Support section headers (title + pill) */
.sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.sectionHead h2{
  margin:0;
  color:#e2e8f0;
  font-size:18px;
  letter-spacing:-0.2px;
}

/* FAQ accordion */
details{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,0.03);
  margin-top:10px;
}

summary{
  cursor:pointer;
  list-style:none;
  font-weight:900;
  color:#e2e8f0;
}

summary::-webkit-details-marker{ display:none; }

details p{
  margin:10px 0 0;
  color:#cbd5e1;
  line-height:1.7;
}

details ul{
  margin:10px 0 0 18px;
  color:#cbd5e1;
  line-height:1.7;
}

/* =========================================================
   20) CHECKOUT RESULT PAGES (success.html / cancel.html)
   ========================================================= */

/* Shared “hero box” used by success/cancel pages */
.heroBox{
  margin-top:18px;
  padding:22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}

/* Title sizing for these pages */
.heroBox h1{
  margin:0;
  color:#fff;
  font-size:34px;
  letter-spacing:-0.3px;
}

/* In these pages, .sub is a normal paragraph block (not the hero .sub) */
.heroBox .sub{
  margin-top:10px;
  color:#cbd5e1;
  line-height:1.6;
  max-width:900px;
}

/* Success background (green accent) */
.page-success .heroBox{
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(56,189,248,0.18), transparent 55%),
    radial-gradient(900px 380px at 90% 10%, rgba(34,197,94,0.16), transparent 55%),
    #0b1224;
}

/* Cancel background (red accent) */
.page-cancel .heroBox{
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(56,189,248,0.18), transparent 55%),
    radial-gradient(900px 380px at 90% 10%, rgba(244,63,94,0.16), transparent 55%),
    #0b1224;
}

.heroLinks{
   margin-top:14px; 
}

/* Success page: green notice box */
.notice{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(46,204,113,0.45);
  background:rgba(46,204,113,0.12);
  color:#eafff5;
}

.notice strong{ color:#fff; }

/* Success page: steps list spacing */
.steps li{
  margin:8px 0;
  color:#cbd5e1;
}

/* Success page: status box (matches your boxOut vibe but custom) */
.statusBox{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background: var(--card-2);
  color: var(--muted-2);
}

/* Success page uses .grid and needs the same breakpoint as dashboard */
@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================================================
   21) Control Grid Drop Down Menus
   ========================================================= */

.controlGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.control label {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.control .muted {
  font-size: 11px;
  margin-top: 4px;
}

/* Mobile: stack cleanly */
@media (max-width: 720px) {
  .controlGrid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Dashboard Monetization Add-ons
   ========================================================= */
.bannerSuccess{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,0.25);
  background:rgba(34,197,94,0.10);
  font-weight:700;
}

/* =========================================================
   Subscription / Upgrade banners
   ========================================================= */

.bannerWarn{
  margin-top:16px; /* more breathing room */
  margin-bottom:16px; /* space before Today row */
  padding:14px 16px;

  border-radius:16px;

  border:1px solid rgba(56,189,248,0.35); /* same blue tone as theme */
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(56,189,248,0.12), transparent),
    rgba(56,189,248,0.06);

  backdrop-filter: blur(6px);

  font-weight:600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.bannerWarn .muted{
  font-weight:500;
  opacity:0.85;
  margin-top:6px;
}

#upgradeBanner{
  /* uses .bannerSuccess base look */
}

#subBlocked .btn{
  padding:8px 14px;
}

#subBlocked{
  margin-bottom: 14px;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.usageTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:-2px 0 10px 0;
}

/* When subscription is blocked, dim the normal usage UI */
.usageLocked #usageMain{
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.15);
}

.planBadge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.10);
  font-weight:800;
  font-size:12px;
}

.resetText{
  font-size:12px;
  opacity:0.8;
}

.creditsBox{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.creditsBoxTitle{ font-weight:900; }
.creditsBoxSub{ font-size:12px; opacity:0.78; margin-top:2px; }

.creditsBoxBtns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.linkBtn{
  background:transparent;
  border:0;
  color:var(--accent);
  padding:0;
  font-weight:800;
  cursor:pointer;
}

.linkBtn:hover{ text-decoration:underline; }

/* Modal */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999;
}

.modalCard{
  width:min(860px, 96vw);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:#0b1224;
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
  padding:16px;
}

.modalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.modalTitle{ font-size:18px; font-weight:900; }

.modalClose{
  background:transparent;
  border:0;
  color:rgba(255,255,255,0.85);
  font-size:18px;
  cursor:pointer;
}

.modalGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.modalCol{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  padding:14px;
}

.modalCol.highlight{
  border:1px solid rgba(56,189,248,0.35);
  background:rgba(56,189,248,0.08);
}

.modalPlanTag{ font-weight:900; margin-bottom:8px; }
.modalList{ margin:0; padding-left:18px; opacity:0.9; }
.modalList li{ margin:8px 0; }
.modalBtns{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

.modalFoot{ margin-top:10px; }

@media (max-width:720px){
  .creditsBox{ flex-direction:column; align-items:stretch; }
  .creditsBoxBtns{ width:100%; }
  .creditsBoxBtns .btn{ width:100%; text-align:center; }
  .modalGrid{ grid-template-columns:1fr; }
  .modalBtns .btn{ width:100%; }
}

/* Usage header: Left title, centered pill, right reset */
.usageHeader{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:12px; /* slightly more breathing room */
}

.usageHeader .usageTitle{
  justify-self:start;
  font-weight:600;
}

.usageHeader #planBadge{
  justify-self:center;
  transform: translateY(1px); /* subtle optical alignment fix */
}

.usageHeader #resetText{
  justify-self:end;
  font-size:13px;
  opacity:0.8;
}

/* Smaller, tighter badge for header */
.planBadge--compact{
  padding:3px 9px;
  font-size:11px;
  font-weight:600;
  border-radius:999px;
}

.planBadge.isPro{
  border-color: rgba(56,189,248,0.6);
  background: rgba(56,189,248,0.15);
}

.planBadge:not(.isPro){
  border-color: rgba(148,163,184,0.4);
  background: rgba(148,163,184,0.12);
}

/* =========================================================
   ADMIN PAGE (admin.html) – Scoped styles
   Requires: <body class="adminPage">
   ========================================================= */

/* ---------------------------
   0) Base page theme
   --------------------------- */
html, body{ height: 100%; }

.adminPage{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(900px 480px at 90% 20%, rgba(34,197,94,.08), transparent 55%),
    #071021;
  color:#e5e7eb;
}

/* ---------------------------
   1) Shell / layout rhythm
   --------------------------- */
.adminPage .adminShell{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 44px;
}

/* Ensure cards stack (if you still have adminTopGrid wrapper) */
.adminPage .adminShell .adminTopGrid{
  display: grid;
  grid-template-columns: 1fr; /* stacked */
  gap: 14px;
}

/* Card spacing */
.adminPage .adminShell > .card{
  margin-top: 16px;
}

/* ---------------------------
   2) Header “hero”
   --------------------------- */
.adminPage .adminHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;

  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background:
    radial-gradient(900px 280px at 15% 0%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(700px 240px at 85% 20%, rgba(34,197,94,.10), transparent 55%),
    rgba(255,255,255,.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  margin-bottom: 18px;
}

.adminPage .adminHeaderTitle{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.05;
}

.adminPage .adminHeaderSub{
  margin-top: 6px;
  font-size: 14px;
  max-width: 70ch;
}

/* ---------------------------
   3) Card styling + typography
   --------------------------- */
.adminPage .card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.adminPage .card h3{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 750;
}

.adminPage .muted{
  color: rgba(229,231,235,.65);
}

/* Light card variant ONLY for the Businesses section (must beat .adminPage .card) */
.adminPage .card.adminBusinessesCard{
  background: rgba(255,255,255,0.92);
  color: #0b1224;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.adminPage .card.adminBusinessesCard .muted{
  color: rgba(15,23,42,0.60);
}

.adminPage .card.adminBusinessesCard input{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.10);
  color: #0b1224;
}

/* Table inside light card */
.adminPage .card.adminBusinessesCard .adminTableWrap{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
}

.adminPage .card.adminBusinessesCard thead th{
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.80);
}

.adminPage .card.adminBusinessesCard td,
.adminPage .card.adminBusinessesCard th{
  border-bottom: 1px solid rgba(15,23,42,0.08);
  color: #0b1224;
}

/* ---------------------------
   4) Inputs / buttons
   --------------------------- */
.adminPage input,
.adminPage select,
.adminPage button{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#e5e7eb;
  border-radius:12px;
  padding:10px 14px;
  height: 42px;
}

.adminPage input{
  width: 100%;
  min-width: 0; /* prevents weird shrinking */
}

.adminPage button{
  cursor:pointer;
  font-weight: 650;
}

.adminPage button:hover{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.10);
}

/* Accent primary buttons for key actions */
.adminPage #loadBtn,
.adminPage #rotateBtn{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.12);
}
.adminPage #loadBtn:hover,
.adminPage #rotateBtn:hover{
  background: rgba(56,189,248,.18);
}

/* ---------------------------
   5) Simple row layout helpers
   --------------------------- */
.adminPage .row{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------------------------
   6) Businesses section / table polish
   --------------------------- */
.adminPage #searchBiz{
  width: 100%;
  max-width: none;
}

.adminPage table{
  width:100%;
  border-collapse:collapse;
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.adminPage thead th{
  background: rgba(255,255,255,.03);
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: .3px;
  color: rgba(229,231,235,.85);
  font-weight: 650;
}

.adminPage td,
.adminPage th{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  font-size: 14px;
}

.adminPage td code{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Smaller, pill-like Manage button in table */
.adminPage .manageBtn{
  padding: 8px 12px;
  border-radius: 999px;
  height: 38px;
  white-space: nowrap;
}

/* Inline manage row spacing */
.adminPage .manageRow td{
  padding: 0;
  border-bottom: none;
}

/* ---------------------------
   7) Manage panel (the good stuff)
   --------------------------- */
.adminPage .adminManageHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.adminPage .adminManageTitle{
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
}

.adminPage .adminManageSub code{
  display:inline-block;
  margin-top:6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 4px 8px;
  border-radius: 999px;
}

/* Optional “Current plan/status” line */
.adminPage .adminCurrentMeta{
  display:inline-block;
  margin-left:10px;
  font-size:12px;
  color: rgba(229,231,235,.65);
}
@media (max-width: 620px){
  .adminPage .adminCurrentMeta{
    display:block;
    margin-left:0;
    margin-top:6px;
  }
}

.adminPage .adminManageGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
@media (max-width: 860px){
  .adminPage .adminManageGrid{
    grid-template-columns: 1fr;
  }
}

.adminPage .adminPanel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.02);
}

.adminPage .adminPanelHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.adminPage .adminPanelTitle{ font-weight:700; }
.adminPage .adminPanelHint{
  font-size:12px;
  color: rgba(229,231,235,.6);
}

.adminPage .adminFormRow{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
@media (max-width: 560px){
  .adminPage .adminFormRow{
    grid-template-columns: 1fr;
  }
}

.adminPage .adminLabel{
  font-size:12px;
  color: rgba(229,231,235,.7);
}

.adminPage .adminInline{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.adminPage .adminSplit{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 860px){
  .adminPage .adminSplit{
    grid-template-columns: 1fr;
  }
}

.adminPage .adminButtonRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.adminPage .adminActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

.adminPage .adminPanelNote{
  margin-top:10px;
  font-size:12px;
}

/* ---------------------------
   8) Button variants (used inside Manage panel)
   --------------------------- */
.adminPage .btn{ padding:10px 12px; border-radius:12px; }

.adminPage .btn-primary{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.14);
}
.adminPage .btn-primary:hover{ background: rgba(56,189,248,.22); }

.adminPage .btn-ghost{ background: transparent; }

.adminPage .btn-warn{
  border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.12);
}
.adminPage .btn-warn:hover{ background: rgba(251,191,36,.18); }

.adminPage .btn-danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}
.adminPage .btn-danger:hover{ background: rgba(239,68,68,.18); }

.adminDanger{
  border-color: rgba(239,68,68,.22);
}

/* ---------------------------
   9) Small spacing fixes
   --------------------------- */
.adminPage #msg,
.adminPage #rotateOut{
  margin-top: 10px;
}

/* =========================================================
   ADMIN – Dark dropdown (select + options)
   ========================================================= */

.adminPage select{
  background: rgba(255,255,255,.04);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.10);
  color-scheme: dark;
}

/* The dropdown list items */
.adminPage select option{
  background: #0b1224;     /* dark */
  color: #e5e7eb;          /* light text */
}

/* Optional: make hovered/selected option readable */
.adminPage select option:checked{
  background: rgba(56,189,248,.22);
  color: #e5e7eb;
}

/* =========================================================
   Locked UI state (subscription blocked)
   ========================================================= */

.appLocked #reviewCard{
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.15);
}

.appLocked #reviewCard .muted{
  opacity: 0.85;
}

.adminbadge{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  text-transform:capitalize;
}

.adminbadge-green  { background:#0f5132; color:#4cffb3; }
.adminbadge-blue   { background:#0c3b5e; color:#5ecbff; }
.adminbadge-orange { background:#5a3d00; color:#ffc85e; }
.adminbadge-red    { background:#4a1b1b; color:#ff6b6b; }
.adminbadge-gray   { background:#2a2f38; color:#aaa; }

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

@media (max-width: 980px){
  .adminStatsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.adminStat{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(11,18,36,0.6);
}

.adminStatLabel{ font-size:12px; }
.adminStatValue{
  margin-top:6px;
  font-size:20px;
  font-weight:800;
  letter-spacing:0.2px;
}

.adminTableWrap{
  width: 100%;
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);

  /* IMPORTANT: allow horizontal scroll */
  overflow-x: auto;
  overflow-y: hidden;

  /* makes scroll feel nicer on iOS/mac */
  -webkit-overflow-scrolling: touch;
}

.adminTableWrap table{
  width: 100%;
  border-collapse: collapse;

  /* IMPORTANT: forces a minimum width so columns don’t crush */
  min-width: 900px;
}

/* ============================
   Half-screen / narrow layouts
   ============================ */
@media (max-width: 1100px){
  /* Let the table shrink to fit the card */
  .adminTableWrap table{
    min-width: 0;          /* overrides the 900px rule */
    table-layout: fixed;   /* prevents columns from pushing width */
  }

  /* Keep cells from forcing giant widths */
  .adminTableWrap th,
  .adminTableWrap td{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Make the “Actions” column always usable */
  .adminTableWrap th:last-child,
  .adminTableWrap td:last-child{
    position: sticky;
    right: 0;
    background: inherit;
  }
}

.adminTableWrap thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:0.3px;
  text-transform:uppercase;
  padding:12px 14px;
  background: rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
}

.adminTableWrap tbody td{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,0.06);
  vertical-align:middle;
}

.adminTableWrap tbody tr:hover{
  background: rgba(255,255,255,0.02);
}

tr.manageRow td { padding: 14px 0; }
#manageCard { width: 100%; margin-top: 10px; }

.adminBusinessesHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.adminSearch{
  min-width: 320px;
  max-width: 420px;
  width: 100%;
}

@media (max-width: 820px){
  .adminBusinessesHead{ flex-direction: column; align-items: stretch; }
  .adminSearch{ max-width: none; }
}

.bizName{
  font-weight: 700;
  letter-spacing: .1px;
}

.bizId code{
  display:inline-block;
  margin-top:6px;
  font-size: 12px;
  opacity: .85;
}

/* Light card variant only for the Businesses section */
.adminBusinessesCard{
  background: rgba(255,255,255,0.92);
  color: #0b1224;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.adminBusinessesCard .muted{
  color: rgba(15,23,42,0.60);
}

.adminBusinessesCard input{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.10);
  color: #0b1224;
}

/* Table inside light card */
.adminBusinessesCard .adminTableWrap{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
}

.adminBusinessesCard table{
  background: transparent;
  border: none;
}

.adminBusinessesCard thead th{
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.80);
}

.adminBusinessesCard td,
.adminBusinessesCard th{
  border-bottom: 1px solid rgba(15,23,42,0.08);
  color: #0b1224;
}

/* Make buttons readable inside the LIGHT Businesses section */
.adminBusinessesCard button,
.adminBusinessesCard .manageBtn{
  background: rgba(255,255,255,0.9);
  color: #0b1224; /* ✅ readable */
  border: 1px solid rgba(15,23,42,0.14);
}

.adminBusinessesCard button:hover,
.adminBusinessesCard .manageBtn:hover{
  background: rgba(56,189,248,0.14);
  border-color: rgba(56,189,248,0.35);
}

/* ---------------------------------------------------------
   Keep the Manage panel DARK even though it is moved
   inside the LIGHT Businesses card (table row)
   --------------------------------------------------------- */
.adminBusinessesCard #manageCard{
  background: linear-gradient(180deg, rgba(11,18,36,0.92), rgba(11,18,36,0.78));
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}

/* Make Manage panel typography + muted text correct */
.adminBusinessesCard #manageCard .muted{
  color: rgba(229,231,235,0.65);
}

/* Inputs/selects/buttons inside Manage must stay DARK */
.adminBusinessesCard #manageCard input,
.adminBusinessesCard #manageCard select,
.adminBusinessesCard #manageCard button{
  background: rgba(255,255,255,0.04);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.10);
}

/* Dropdown options should remain dark */
.adminBusinessesCard #manageCard select option{
  background: #0b1224;
  color: #e5e7eb;
}

/* Softer badges ONLY inside the light Businesses table */
.adminBusinessesCard .adminbadge{
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
}

.adminBusinessesCard .adminbadge-green  { background: rgba(16,185,129,0.18); color: #065f46; }
.adminBusinessesCard .adminbadge-blue   { background: rgba(56,189,248,0.18); color: #075985; }
.adminBusinessesCard .adminbadge-orange { background: rgba(251,191,36,0.22); color: #92400e; }
.adminBusinessesCard .adminbadge-red    { background: rgba(239,68,68,0.18); color: #991b1b; }
.adminBusinessesCard .adminbadge-gray   { background: rgba(100,116,139,0.18); color: #334155; }

/* ===========================
   FIX: Manage panel overflow
   =========================== */
/* Make Manage panel always fit the available width */
#manageCard{
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* prevents Close button from getting clipped */
}

/* Allow header to wrap on narrow widths so Close stays visible */
.adminManageHeader{
  flex-wrap: wrap;
}

/* Make the Manage card not grow wider than the viewport */
.adminBusinessesCard #manageCard{
  width: min(980px, 96vw);
  max-width: 96vw;
  margin: 12px auto;           /* center it */
  overflow-x: auto;            /* if something still goes wide, scroll inside the panel */
}

/* Make the 2-col manage grid not force overflow */
.adminPage .adminManageGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Critical: allow grid children to shrink instead of expanding the page */
.adminPage .adminManageGrid > *{
  min-width: 0;
}

.adminPage .adminPanel,
.adminPage .adminSplit > *,
.adminPage .adminInline > *{
  min-width: 0;
}

/* Long IDs/Stripe values should wrap instead of forcing width */
.adminBusinessesCard #manageCard code,
.adminBusinessesCard #manageCard .mono{
  white-space: normal;
  word-break: break-word;
}

/* ==========================================
   Best half-screen behavior (Admin Businesses)
   ========================================== */
@media (max-width: 980px){

  /* Hide wide columns that force horizontal scrolling */
  .adminPage .adminBusinessesCard .adminTableWrap th:nth-child(6),
  .adminPage .adminBusinessesCard .adminTableWrap td:nth-child(6){
    display: none;
  }

  /* Let the table fit the viewport without needing horizontal scroll */
  .adminPage .adminBusinessesCard .adminTableWrap table{
    min-width: 0 !important; /* override your min-width:900 */
    width: 100%;
    table-layout: fixed;     /* prevents layout blowouts */
  }

  /* Prevent long text from blowing out the row */
  .adminPage .adminBusinessesCard .adminTableWrap td,
  .adminPage .adminBusinessesCard .adminTableWrap th{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* But allow the business name block to wrap nicely if needed */
  .adminPage .adminBusinessesCard .adminTableWrap .bizName{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Make Actions column compact and always visible */
  .adminPage .adminBusinessesCard .adminTableWrap th:nth-child(7),
  .adminPage .adminBusinessesCard .adminTableWrap td:nth-child(7){
    width: 96px;
    text-align: right;
  }

  /* Keep Manage button usable */
  .adminPage .adminBusinessesCard .manageBtn{
    padding: 8px 10px;
    height: 36px;
  }
}

@media (max-width: 980px){
  .adminPage .adminManageHeader{
    flex-wrap: wrap;
    gap: 10px;
  }

  /* put the close button on its own line to the right, if needed */
  .adminPage .adminManageHeader button:last-child{
    margin-left: auto;
  }
   
  /* Make the manage row/card stretch full width */
  .adminBusinessesCard #manageCard,
  .adminBusinessesCard .manageCard,
  .adminBusinessesCard .adminManageCard,
  .adminBusinessesCard .adminManageWrap{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If Manage is inside a table row, ensure the cell spans full width */
  .adminBusinessesCard .manageRow td{
    width: 100%;
  }
}

@media (max-width: 980px){
  /* Ensure manage card truly fills the available width */
  .adminBusinessesCard #manageCard{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 980px){
  /* The top action button row inside Manage */
  .adminPage .adminButtonRow{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* Keep all buttons the same height and prevent overflow fights */
  .adminPage .adminButtonRow button{
    height: 38px;
  }

  /* Hard cancel should not be pushed into a weird “floating” spot */
  .adminPage .adminButtonRow button:last-child{
    margin-left: 0 !important;
  }
}

@media (max-width: 980px){
  .adminPage .adminButtonRow button{
    flex: 0 1 auto;
  }
}

@media (max-width: 980px){

  /* Make sure the table itself does not create phantom width */
  .adminPage .adminBusinessesCard .adminTableWrap table{
    width: 100% !important;
    table-layout: fixed;
  }

  /* Force the manage row cell to actually take full table width */
  .adminPage .adminBusinessesCard .manageRow td{
    width: 100% !important;
    padding: 0;              /* optional: remove inset */
  }

  /* Ensure the manage card fills the cell */
  .adminPage .adminBusinessesCard #manageCard{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 980px){

  /* Make sure the table itself does not create phantom width */
  .adminPage .adminBusinessesCard .adminTableWrap table{
    width: 100% !important;
    table-layout: fixed;
  }

  /* Force the manage row cell to actually take full table width */
  .adminPage .adminBusinessesCard .manageRow td{
    width: 100% !important;
    padding: 0;              /* optional: remove inset */
  }

  /* Ensure the manage card fills the cell */
  .adminPage .adminBusinessesCard #manageCard{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   ADMIN — Manage row: force full-width panel when injected
   into the Businesses table (best half-screen behavior)
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

/* When Manage is rendered inside the table row, it must span the full row */
.adminBusinessesCard tr.manageRow td #manageCard{
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 0 !important;     /* remove centered "auto" margins */
}

/* Give the injected row normal padding so it looks intentional */
.adminBusinessesCard tr.manageRow td{
  padding: 12px 0 0 !important;
}

/* Keep Close visible and prevent header layout weirdness on half screen */
@media (max-width: 1100px){
  .adminManageHeader{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .adminManageHeaderActions{
    align-self: flex-start; /* puts Close under header on narrow widths */
  }

  /* Keep the top action buttons usable without forcing layout overflow */
  .adminManageHeader .row{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .adminManageHeader .row::-webkit-scrollbar{
    height: 8px;
  }
}

/* =========================================================
   ADMIN — Half-screen: NO horizontal scroll in Manage panel
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

@media (max-width: 1200px){

  /* 1) Make Manage panel ALWAYS fit the viewport width */
  .adminBusinessesCard tr.manageRow td #manageCard{
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    overflow-x: hidden !important;   /* critical: kill horizontal scroll inside manage */
  }

  /* 2) Collapse ALL 2-col layouts inside Manage into 1 column earlier */
  .adminPage .adminManageGrid{
    grid-template-columns: 1fr !important;
  }
  .adminPage .adminSplit{
    grid-template-columns: 1fr !important;
  }

  /* Allow grid children to actually shrink (prevents hidden overflow) */
  .adminPage .adminManageGrid > *,
  .adminPage .adminSplit > *,
  .adminPage .adminPanel{
    min-width: 0 !important;
  }

  /* 3) Top action buttons: WRAP to multiple lines (no sideways scrolling) */
  .adminPage .adminButtonRow{
    display: flex;
    flex-wrap: wrap !important;
    gap: 10px;
    overflow: visible !important;
  }

  /* Let buttons wrap if needed instead of forcing width */
  .adminPage .adminButtonRow button{
    white-space: normal !important;
  }

  /* Keep "Hard cancel now" from getting weird alignment */
  .adminPage .adminButtonRow button:last-child{
    margin-left: 0 !important;
  }

  /* 4) Any long code / IDs must wrap */
  .adminPage #manageCard code{
    white-space: normal !important;
    word-break: break-word;
  }

  /* 5) Ensure inputs/selects don’t cause overflow */
  .adminPage #manageCard input,
  .adminPage #manageCard select{
    max-width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   ADMIN — Final half-screen squeeze (no right cut-off)
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

@media (max-width: 1200px){

  /* 1) Absolute rule: nothing inside manage can force horizontal overflow */
  .adminBusinessesCard tr.manageRow td #manageCard,
  .adminBusinessesCard tr.manageRow td #manageCard *{
    box-sizing: border-box;
    min-width: 0;
  }

  .adminBusinessesCard tr.manageRow td #manageCard{
    overflow-x: hidden !important;  /* kill any internal horizontal scroll/cutoff */
  }

  /* 2) Panel headers: allow the right-side hint text to wrap instead of clipping */
  .adminPage #manageCard .adminPanelHead{
    flex-wrap: wrap;
    justify-content: flex-start;  /* stop space-between from pushing text offscreen */
    gap: 8px 12px;
  }

  .adminPage #manageCard .adminPanelHint{
    white-space: normal;          /* allow wrapping */
    word-break: break-word;
  }

  /* 3) Form rows: stack label+field so selects don't overflow */
  .adminPage #manageCard .adminFormRow{
    grid-template-columns: 1fr !important;
  }

  /* 4) Inputs/selects: never exceed container */
  .adminPage #manageCard input,
  .adminPage #manageCard select{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* 5) Top action buttons: make them share space so "Hard cancel now" doesn't orphan */
  .adminPage #manageCard .adminButtonRow{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .adminPage #manageCard .adminButtonRow button{
    flex: 1 1 170px;        /* equal-ish widths, wraps cleanly */
    white-space: nowrap;    /* keep labels on one line */
    padding: 8px 10px;
    font-size: 13px;
    height: 38px;
  }
}

/* =========================================================
   ADMIN — Final layout polish (half-screen)
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

/* 1) Businesses table should span full card width (no “inset” header bar) */
.adminPage .adminBusinessesCard .adminTableWrap{
  width: 100% !important;
}

.adminPage .adminBusinessesCard .adminTableWrap table{
  width: 100% !important;
}

/* Remove any rounding/overflow clipping that makes the header look “shorter” */
.adminPage .adminBusinessesCard .adminTableWrap{
  overflow: hidden; /* keeps header flush */
}
.adminPage .adminBusinessesCard .adminTableWrap{
  overflow-x: auto;           /* but still allow table scroll if needed */
  overflow-y: hidden;
}

/* 2) Make the TOP action buttons bar wrap cleanly and span full width */
@media (max-width: 1200px){
  /* Ensure the bar uses the full manage width */
  .adminPage #manageCard .adminButtonRow{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* Make each button share space so it forms clean rows */
  .adminPage #manageCard .adminButtonRow button{
    flex: 1 1 210px;          /* target ~3 per row at this width, 2 per row if tighter */
    max-width: 100%;
    white-space: nowrap;
  }

  /* Keep “Hard cancel now” from floating off by itself if it’s last */
  .adminPage #manageCard .adminButtonRow button:last-child{
    flex: 1 1 210px;
  }
}

/* 3) Close button back to top-right now that we aren’t horizontally overflowing */
.adminPage #manageCard .adminManageHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap; /* keep close on the same top row */
}

/* If your Close button has an id/class, this will pin it to the top-right */
.adminPage #manageCard #closeManageBtn,
.adminPage #manageCard .closeManageBtn{
  margin-left: auto;
}

/* =========================================================
   ADMIN — Half-screen polish (full width header, clean button rows, close top-right)
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

@media (max-width: 1200px){

  /* 1) Make the Businesses table/header span the full card width */
  .adminPage .adminBusinessesCard .adminTableWrap table{
    width: 100% !important;
    min-width: 100% !important;   /* key: prevents “short header bar + empty space” */
    table-layout: fixed;
  }

  /* 2) Manage action buttons: turn the inline-flex row into a responsive grid */
  /* NOTE: admin.html uses an inline style on this .row, so we must use !important */
  .adminPage #manageCard .adminManageHeader .row > button{
    width: 100%;
    white-space: nowrap;          /* keeps labels tidy */
  }

  /* 3) Close button back to the top-right */
  .adminPage #manageCard .adminManageHeader{
    position: relative;
    padding-right: 120px;         /* leaves room so title/meta don’t sit under Close */
  }

  .adminPage #manageCard .adminManageHeaderActions{
    position: absolute;
    top: 0;
    right: 0;
  }

  .adminPage #manageCard #closeManageBtn{
    margin: 0 !important;
  }
}

/* =========================================================
   ADMIN — Manage header buttons: clean wrapped grid + close top-right
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

@media (max-width: 1200px){

  /* Close stays top-right without breaking layout */
  .adminPage #manageCard .adminManageHeader{
    position: relative;
  }
  .adminPage #manageCard .adminManageHeaderActions{
    position: absolute;
    top: 0;
    right: 0;
  }

  /* Give space so the action grid doesn't sit under Close */
  .adminPage #manageCard .adminManageHeader{
    padding-right: 110px;
  }

  /* The action buttons container is a .row with inline display:flex.
     Force it to use FULL width and become a responsive 2-col grid. */
  .adminPage #manageCard .adminManageHeader .row{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 columns */
    gap: 10px !important;
    margin-top: 12px !important;
    align-items: stretch;
  }

  /* Buttons should fill their grid cells */
  .adminPage #manageCard .adminManageHeader .row > button{
    width: 100% !important;
    justify-content: center;
    white-space: nowrap;
  }

  /* If screen gets REALLY narrow, drop to 1 column */
  @media (max-width: 700px){
    .adminPage #manageCard .adminManageHeader .row{
      grid-template-columns: 1fr !important;
    }
  }
}