/* =========================================================================
   Pompano Beach QR Code Creator — brand layer on top of Bootstrap 5.3.
   Bootstrap handles scaffolding/grid/responsive; this file only adds brand
   colors and the few custom components Bootstrap doesn't provide.
   ========================================================================= */
:root{
  --pb-green:#009444;
  --pb-green-deep:#00753A;
  --pb-teal:#00A7C4;
  --pb-teal-deep:#0092ab;
  --pb-sun:#FBB040;
  --ink:#231F20;
  --muted:#6b7280;
  --line:#e6eae8;
  --sand:#f5f7f6;
  --pb-logo-h:60px;   /* header logo height — tweak freely */
}

body{ background:var(--sand); color:var(--ink); font-family:'Segoe UI',system-ui,Arial,sans-serif; }

/* ---------- brand buttons (Bootstrap 5.3 CSS-variable theming) ---------- */
.btn-pb-green{--bs-btn-color:#fff;--bs-btn-bg:var(--pb-green);--bs-btn-border-color:var(--pb-green);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--pb-green-deep);--bs-btn-hover-border-color:var(--pb-green-deep);
  --bs-btn-active-bg:var(--pb-green-deep);--bs-btn-active-border-color:var(--pb-green-deep);}
.btn-pb-teal{--bs-btn-color:#fff;--bs-btn-bg:var(--pb-teal);--bs-btn-border-color:var(--pb-teal);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--pb-teal-deep);--bs-btn-hover-border-color:var(--pb-teal-deep);
  --bs-btn-active-bg:var(--pb-teal-deep);--bs-btn-active-border-color:var(--pb-teal-deep);}
.btn-outline-pb{--bs-btn-color:var(--pb-green-deep);--bs-btn-bg:#fff;--bs-btn-border-color:#cfe0d6;
  --bs-btn-hover-color:var(--pb-green-deep);--bs-btn-hover-bg:#eef5f1;--bs-btn-hover-border-color:var(--pb-green-deep);
  --bs-btn-active-bg:#eef5f1;--bs-btn-active-border-color:var(--pb-green-deep);}

/* ---------- navbar ---------- */
.pb-navbar{ border-bottom:4px solid var(--pb-teal); box-shadow:0 2px 10px rgba(0,0,0,.04); }
.pb-logo{ height:var(--pb-logo-h); width:auto; display:block; }
.pb-brand-divider{ height:38px; opacity:.5; align-self:center; }
.pb-tool{ font-size:20px; line-height:1.05; font-weight:800; color:var(--pb-green-deep); }
@media (max-width:575.98px){ :root{ --pb-logo-h:42px; } }

.pb-footer{ background:#fff; border-top:1px solid var(--line); font-size:12px; color:#8a8a8a; }
.pb-footer strong{ color:var(--pb-green-deep); }

/* ---------- dashboard sidebar (responsive offcanvas) ---------- */
/* !important overrides Bootstrap's transparent background on .offcanvas-lg at >=lg */
.pb-sidebar{ background:#2f333a !important; color:#cfd3d8; }
.pb-side-heading{ font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:#8b929c; margin:18px 4px 6px; }
.pb-side-heading:first-child{ margin-top:0; }
.pb-side-link{ display:flex; justify-content:space-between; align-items:center; padding:9px 12px;
  border-radius:6px; color:#cfd3d8; font-size:14px; text-decoration:none; margin-bottom:2px; }
.pb-side-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.pb-side-link.active{ background:rgba(0,167,196,.22); color:#fff; }
.pb-side-link .count{ font-size:12px; color:#9aa1ab; }
.pb-side-link.active .count{ color:#d5f3fb; }

/* ---------- QR cards (whole card clickable) ---------- */
.pb-qr-card{ border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,117,58,.06); transition:box-shadow .15s ease, transform .15s ease; }
.pb-qr-card:hover{ box-shadow:0 10px 26px rgba(0,117,58,.14); transform:translateY(-1px); }
.pb-qr-card .stretched-link::after{ border-radius:var(--bs-card-border-radius); }
.pb-type{ font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.pb-meta{ color:var(--muted); font-size:12.5px; }
.pb-meta .dest{ color:var(--pb-teal); }
.pb-scan-num{ font-size:34px; font-weight:800; line-height:1; color:var(--ink); }
.pb-scan-lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.pb-thumb{ width:74px; height:74px; border:1px solid var(--line); border-radius:8px; padding:5px; background:#fff; }
.pb-thumb img{ width:100%; height:100%; display:block; }

/* badges */
.pb-badge{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
.pb-badge-active{ background:#e3f4ea; color:var(--pb-green-deep); }
.pb-badge-paused{ background:#fdefd6; color:#9a6a12; }

/* ---------- detail / analytics ---------- */
.pb-stat-num{ font-size:32px; font-weight:800; color:var(--ink); }
.pb-stat-lbl{ font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.pb-panel-title{ font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink); font-weight:700; }
.pb-qr-large{ width:170px; height:170px; border:1px solid var(--line); border-radius:8px; padding:8px; background:#fff; }
.pb-short{ font-size:12.5px; color:var(--pb-teal); word-break:break-all; }
.chart-box{ position:relative; height:300px; }

/* day/week/month toggle */
.pb-seg .btn.active{ background:var(--pb-teal); border-color:var(--pb-teal); color:#fff; }

/* OS breakdown bars */
.bars{ display:flex; flex-direction:column; gap:11px; }
.bar-row{ display:grid; grid-template-columns:110px 1fr 60px; gap:12px; align-items:center; font-size:13px; }
.bar-track{ display:block; background:var(--sand); border-radius:5px; height:12px; overflow:hidden; }
.bar-fill{ display:block; height:100%; min-width:2px; background:var(--pb-teal); border-radius:5px; }
.bar-row .pct{ text-align:right; font-weight:600; color:var(--ink); }

.rank-scroll{ max-height:280px; overflow-y:auto; }

/* color swatches (generate/edit) */
.swatches{ display:flex; gap:8px; }
.swatch{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.swatch.active{ border-color:var(--ink); }

/* pagination + link brand colors */
.pagination{ --bs-pagination-color:var(--pb-green-deep); --bs-pagination-hover-color:var(--pb-green-deep);
  --bs-pagination-focus-color:var(--pb-green-deep); --bs-pagination-active-bg:var(--pb-green);
  --bs-pagination-active-border-color:var(--pb-green); }
a{ color:var(--pb-teal); }
a:hover{ color:var(--pb-teal-deep); }

/* login / inactive */
.pb-login-logo{ display:block; max-width:210px; width:100%; height:auto; margin:0 auto 18px; }