/* app.css - Single source of truth (Option 1)
   - Common components (container/card/table/buttons/forms)
   - Product page remains scoped under .product-page
   - Adds page scopes: .activity-page .offers-page .diag-page
   - Mobile hardening: prevent sideways page scroll; tables scroll inside wrapper
*/

/* =========================
   Base / Tokens
   ========================= */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:#e6e8ef;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#0f172a;
  --link:#4f46e5;
  --good:#15803d;
  --warn:#b45309;
  --bad:#b91c1c;

  /* Insights sizing token */
  --ins-card-h: 520px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* ✅ Critical: stop sideways “back and forth” on mobile */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-y:auto;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Prevent media from forcing overflow */
img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

/* ✅ Long strings (URLs/SKUs) should not force horizontal page scroll */
.mono, code, pre, td, th, a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Layout containers */
.container,
.container-wide{
  max-width:1400px;
  margin:0 auto;
  padding:18px;
}

/* Typography helpers */
.h1{
  margin:0 0 6px;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.02em;
}
.small{ font-size:12px; }
.tiny{ font-size:12px; }
.muted{ color:var(--muted); }
.strong{ font-weight:900; }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}
.label{
  display:block;
  margin:0 0 6px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.nowrap{ white-space:nowrap; }
.tr{ text-align:right; }
.num{ font-variant-numeric: tabular-nums; white-space:nowrap; }
.breakall{ word-break:break-all; }
.minw0{ min-width:0; }
.ellipsis{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Numeric alignment legacy semantics */
.pos{ color:#b00020; font-weight:900; }
.neg{ color:#137333; font-weight:900; }

/* Images */
.img44{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  flex:0 0 auto;
}
.img44.ph{
  background:#f8fafc;
  border:1px dashed #cbd5e1;
}
.img64{
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid #eee;
  background:#fff;
}
.img64.ph{
  background:#f2f2f6;
  border:1px dashed #ddd;
}

/* =========================
   Buttons / Pills
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{ background:#f3f4f6; text-decoration:none; }

.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn.primary:hover{ opacity:.95; }

.btn.small{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

.btn.active{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(15,23,42,.08);
  font-weight:900;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
}
.pill.ok{
  color:var(--good);
  border-color:rgba(21,128,61,.25);
  background:rgba(21,128,61,.06);
}
.pill.warn{
  color:var(--warn);
  border-color:rgba(180,83,9,.25);
  background:rgba(180,83,9,.06);
}
.pill.bad{
  color:var(--bad);
  border-color:rgba(185,28,28,.25);
  background:rgba(185,28,28,.06);
}
.pill.info{
  border-color:rgba(79,70,229,.22);
  background:rgba(79,70,229,.06);
  color:var(--text);
}

.chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* =========================
   Inputs (global)
   ========================= */
.input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-size:14px;
  color:var(--text);
}

input, select, textarea{
  padding:10px 12px;
  border:1px solid #d8dbe6;
  border-radius:12px;
  font-size:14px;
  background:#fff;
  color:var(--text);
}
textarea{ width:100%; }

input:focus, select:focus, textarea:focus, .input:focus{
  outline:none;
  border-color:#94a3b8;
  box-shadow:0 0 0 4px rgba(148,163,184,.25);
}

/* Forms */
.form-row{ display:flex; gap:10px; flex-wrap:wrap; }
.form-group{ width:100%; }
.form-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.form-actions .btn{ min-width:120px; }

/* =========================
   Cards
   ========================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:16px;
}
.card-pad{ padding:18px; }
.card-tight{ padding:0; }

/* =========================
   Tables (main)
   ========================= */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}

/* Ensure tables never blow up layout even if template forgets wrappers */
table{ max-width:100%; }

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}

.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid #eef0f5;
  font-size:13px;
  vertical-align:top;
}

.table th{
  background:#fbfbfe;
  color:var(--muted);
  font-weight:900;
  text-align:left;
  position: sticky;
  top: 0;
}

.table tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:#fafafe; }

/* Fallback: <table> without class="table" but inside .table-wrap */
.table-wrap > table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.table-wrap > table th,
.table-wrap > table td{
  padding:12px 12px;
  border-bottom:1px solid #eef0f5;
  font-size:13px;
  vertical-align:top;
}
.table-wrap > table th{
  background:#fbfbfe;
  color:var(--muted);
  font-weight:900;
  text-align:left;
  position: sticky;
  top: 0;
}
.table-wrap > table tr:last-child td{ border-bottom:0; }
.table-wrap > table tbody tr:hover{ background:#fafafe; }

/* Media row helper (thumbnail + text) */
.media{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

/* =========================
   Top Nav
   ========================= */
.topnav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,247,251,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}

.topnav-inner{
  max-width:1400px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--text);
}
.brand .dot{
  width:28px;height:28px;border-radius:10px;
  background:var(--accent);
  display:inline-block;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Dropdown via <details> */
.dd{ position:relative; }
.dd summary{ list-style:none; cursor:pointer; }
.dd summary::-webkit-details-marker{ display:none; }
.dd-menu{
  position:absolute;
  right:0;
  top:40px;
  min-width:220px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:8px;
}
.dd-menu a{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
  color:var(--text);
  font-weight:700;
}
.dd-menu a:hover{ background:#f3f4f6; text-decoration:none; }
.dd-sep{ height:1px; background:var(--border); margin:6px 0; }

/* =========================
   Auth Page
   ========================= */
.auth-wrap{
  min-height:calc(100vh - 60px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.auth-col{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auth-card{ width:100%; max-width:420px; }
.auth-card .btn.primary{
  width:100%;
  padding:11px 14px;
  border-radius:12px;
}

/* Alerts */
.alert{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  margin:10px 0 0;
  background:#fff;
}
.alert.error{
  border-color:rgba(185,28,28,.25);
  background:rgba(185,28,28,.06);
  color:var(--bad);
  font-weight:800;
}
.alert.info{
  border-color:rgba(79,70,229,.25);
  background:rgba(79,70,229,.06);
  color:var(--text);
  font-weight:700;
}

/* =========================
   Dashboard shared
   ========================= */
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 14px;
  flex-wrap:wrap;
}
.head-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.grid{ display:grid; gap:12px; }

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

.big{
  font-size:22px;
  font-weight:900;
  margin-top:4px;
  font-variant-numeric: tabular-nums;
}

/* =========================
   Filter card (re-usable)
   ========================= */
.filter-card{ padding:14px; }

.filters-basic{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}
.filters-basic .span-2{ grid-column: span 2; }

@media (max-width: 1000px){
  .filters-basic{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-basic .span-2{ grid-column: span 2; }
}
@media (max-width: 560px){
  .filters-basic{ grid-template-columns: 1fr; }
  .filters-basic .span-2{ grid-column: span 1; }
}

/* =========================
   Insights page (kept)
   ========================= */
.ins-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
  grid-auto-rows: 1fr;
}
@media (max-width: 1100px){
  .ins-grid{ grid-template-columns: 1fr; }
}

.ins-card{
  padding:14px;
  height: var(--ins-card-h);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.ins-card-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}
.ins-title{ font-weight:900; font-size:18px; }
.ins-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 1 1 auto;
  overflow:auto;
  padding-right: 4px;
}
.ins-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  text-decoration:none;
  color:inherit;
}
.ins-item:hover{ background:#fbfbfe; }
.ins-left{
  display:flex;
  gap:10px;
  min-width:0;
  align-items:center;
}
.ins-thumb{
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  object-fit:cover;
  flex:0 0 auto;
}
.ins-thumb.ph{
  display:block;
  background:#f1f5f9;
  border-style:dashed;
}
.ins-meta{ min-width:0; }
.ins-name{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:360px;
}
.ins-right{ text-align:right; flex:0 0 auto; }
.ins-money{ font-weight:900; font-variant-numeric:tabular-nums; }
.ins-money.pos{ color:var(--good); }
.ins-money.neg{ color:var(--bad); }

.ins-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  font-size:12px;
}

.ins-feed{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.ins-feed-top{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:6px;
}
.ins-feed-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--accent);
  flex:0 0 auto;
}
.ins-feed-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.ins-feed-link{
  font-weight:900;
  text-decoration:none;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}
.ins-feed-link:hover{ text-decoration:underline; }
.ins-more{
  flex:0 0 auto;
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  background:#fff;
  color:var(--text);
  white-space:nowrap;
}
.ins-more:hover{ background:#f6f7fb; text-decoration:none; }

.ins-strong{ font-weight:900; }

/* =========================
   Admin pages (scoped)
   ========================= */
.wrap{
  max-width:1200px;
  margin:22px auto;
  padding:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 26px rgba(15,23,42,0.06);
}
.msg{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#f1f5f9;
}
.msg.ok{ background:#dcfce7; border-color:#86efac; }
.msg.bad{ background:#fee2e2; border-color:#fca5a5; }

.admin-table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.admin-table th, .admin-table td{
  border-bottom:1px solid #eef0f6;
  padding:10px;
  text-align:left;
  font-size:14px;
  vertical-align:middle;
}
.admin-table th{
  background:#fafbff;
  font-weight:800;
  color:var(--text);
}
.admin-table tbody tr:hover{ background:#fafafe; }
.admin-table tr:last-child td{ border-bottom:0; }

/* =========================
   Option 1 Page Scopes
   ========================= */

/* Quick range bar */
.quick-range{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0 14px;
}

/* Details component */
.details summary{
  cursor:pointer;
  user-select:none;
}
.details-body{
  margin-top:8px;
  white-space:pre-wrap;
}

/* Pager */
.pager{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.pager-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Diagnostics debug block */
.debug-details{
  margin: 10px 0 0;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.debug-details summary{
  cursor:pointer;
  font-weight:900;
}
.debug-pre{
  margin-top:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  overflow:auto;
  white-space:pre-wrap;
}

/* Offers URL form */
.offers-urlform{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
}
.offers-urlform .input{ min-width: 320px; }
.offers-urlform .btn{ white-space:nowrap; }

/* Offers toggle links row */
.offers-toplinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

/* Table min-width tuning per page (mobile scroll, no squashing) */
.activity-page .table-wrap table{ min-width: 980px; }
.offers-page  .table-wrap table{ min-width: 1150px; }
.diag-page    .table-wrap table{ min-width: 1100px; }

/* =========================
   PRODUCT PAGE (scoped) - kept from your file
   ========================= */
.product-page{ padding:24px 0; }

.product-page .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.product-page .back a{ font-weight:900; }

.product-page .hero{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:18px;
}

.product-page .hero-grid{
  display:grid;
  grid-template-columns:220px 1fr 320px;
  grid-template-rows:auto auto;
  gap:18px;
  align-items:start;
}

.product-page .img{
  width:220px;
  height:auto;
  min-height:220px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  grid-row:1;
}
.product-page .img img{
  max-width:100%;
  max-height:100%;
  display:block;
}

.product-page h1{
  font-size:24px;
  margin:2px 0 10px;
  line-height:1.2;
}

.product-page .meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:10px;
}

.product-page .kv{
  display:grid;
  grid-template-columns:160px 1fr;
  row-gap:6px;
  column-gap:10px;
  font-size:14px;
}

.product-page .k{ color:var(--muted); }
.product-page .v{ font-weight:900; }

.product-page .side{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:#fff;
  grid-row:1;
  grid-column:3;
}
.product-page .side h3{
  font-size:12px;
  margin:0 0 10px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.product-page .side .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  padding:7px 0;
  border-bottom:1px dashed var(--border);
}
.product-page .side .row:last-child{ border-bottom:0; }
.product-page .side .row b{ font-weight:900; }

.product-page .form-row{
  display:flex;
  gap:10px;
  align-items:end;
  margin-top:12px;
  flex-wrap:wrap;
}
.product-page .form-row label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
  font-weight:800;
}

.product-page input,
.product-page select{
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:14px;
  background:#fff;
  min-width:180px;
}

.product-page button{
  padding:10px 14px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  font-weight:900;
}
.product-page button:hover{ opacity:.95; }

.product-page .section-title{
  font-size:16px;
  margin:18px 0 10px;
  font-weight:900;
}

/* Product page table (scoped) */
.product-page table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.product-page th,
.product-page td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  vertical-align:top;
}
.product-page th{
  background:#fbfbfe;
  color:var(--muted);
  text-align:left;
  font-weight:900;
}
.product-page tr:last-child td{ border-bottom:0; }
.product-page tbody tr:hover{ background:#fafafe; }

.product-page .c-row{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}
.product-page .thumb{
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid var(--border);
  object-fit:cover;
  flex:0 0 auto;
}
.product-page .thumb-ph{
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px dashed #cbd5e1;
  background:#f8fafc;
  flex:0 0 auto;
}
.product-page .c-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.product-page .c-name{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:420px;
}
.product-page .c-url{
  font-size:12px;
  word-break:break-all;
}

/* Strategy / Add competitor rows */
.product-page .strategy-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.product-page .strategy-select{
  flex:0 0 320px;
  min-width:320px;
}
.product-page .strategy-row select{
  width:100%;
  min-width:0;
}
.product-page .strategy-value{
  flex:0 0 auto;
  margin-left:6px;
  margin-right:14px;
}
.product-page .strategy-row input[name="strategy_value"]{
  width:90px;
  min-width:90px;
  text-align:center;
}
.product-page .strategy-row button{ white-space:nowrap; }

.product-page .add-comp-row{
  display:flex;
  gap:10px;
  align-items:end;
  flex-wrap:nowrap;
}
.product-page .add-comp-row input[name="competitor_name"]{
  min-width:180px;
  width:180px;
}
.product-page .add-comp-row input[name="product_url"]{
  min-width:320px;
  width:320px;
}
.product-page .add-comp-row button{ white-space:nowrap; }

/* Bottom forms container */
.product-page .bottom-forms-container{
  grid-row:2;
  grid-column:1 / span 3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:12px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.product-page .section-label{
  font-size:12px;
  color:var(--muted);
  margin:0 0 8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.product-page .form-section{
  display:flex;
  flex-direction:column;
}
.product-page .form-section .form-row{ margin-top:0; }

/* Mobile table scroll wrappers */
.product-page .table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}
.product-page .table-wrap table{ min-width:760px; }

/* Price History block */
.product-page .ph-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}
.product-page .ph-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.product-page .ph-title{
  font-weight:900;
  font-size:14px;
}
.product-page .ph-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.product-page .ph-btn{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  color:var(--muted);
}
.product-page .ph-btn.active{
  background:rgba(15,23,42,.08);
  color:var(--text);
}

.product-page .ph-chart-wrap{
  position:relative;
  width:100%;
  height:240px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.product-page canvas#phChart{
  width:100%;
  height:240px;
  display:block;
}
.product-page .ph-tooltip{
  position:absolute;
  pointer-events:none;
  background:var(--accent);
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  opacity:0;
  transform:translate(-50%,-110%);
  white-space:nowrap;
}
.product-page .ph-legend{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.product-page .ph-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.product-page .ph-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--accent);
}
.product-page details.ph-debug{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
}

.ph-chip.active { outline: 2px solid rgba(15,23,42,.25); }
.ph-chip.dim { opacity: .45; }

/* =========================
   Media Queries
   ========================= */
@media (max-width: 980px){
  .product-page .hero-grid{
    grid-template-columns:140px 1fr;
    grid-template-rows:auto auto auto;
  }
  .product-page .side{
    grid-row:2;
    grid-column:1 / -1;
    margin-top:12px;
  }
  .product-page .bottom-forms-container{
    grid-row:3;
    grid-column:1 / -1;
    grid-template-columns:1fr;
    gap:12px;
  }
  .product-page .img{
    width:140px;
    min-height:140px;
  }
  .product-page .c-name{ max-width:240px; }
  .product-page .strategy-row{ flex-wrap:wrap; }
  .product-page .add-comp-row{ flex-wrap:wrap; }
  .product-page .add-comp-row input[name="product_url"]{
    min-width:240px;
    width:auto;
  }
}

/* All mobile rules consolidated at 768px breakpoint */
@media (max-width: 768px){
  .container,
  .container-wide{
    padding:12px;
  }

  .topnav-inner{
    padding:10px 12px;
    flex-direction:column;
    align-items:flex-start;
  }
  .navlinks{
    width:100%;
    flex-wrap:wrap;
    gap:6px;
  }
  .nav-right{
    width:100%;
    justify-content:flex-start;
  }

  .kpis{ grid-template-columns:1fr !important; }
  .grid{ grid-template-columns:1fr !important; }

  .form-row{
    flex-direction:column;
    align-items:stretch;
  }
  .form-row input,
  .form-row select,
  .form-row textarea{
    width:100%;
  }
  .form-row button,
  .form-actions .btn{
    width:100%;
    min-width:0;
  }

  .card{
    padding:12px;
    border-radius:12px;
  }

  /* ✅ Tables: scroll inside wrapper */
  .table-wrap{ overflow-x:auto; }
  .table-wrap table{ min-width:720px; }

  /* Offers URL form should stack nicely */
  .offers-urlform .input{ min-width:0; }
  .offers-urlform{ align-items:stretch; }
  .offers-urlform .btn{ width:100%; }

  /* Product page polish */
  .product-page h1{ font-size:18px; }
  .product-page .kv{ grid-template-columns:1fr; }

  .product-page .hero-grid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .product-page .img{
    width: 100% !important;
    min-height: 160px;
  }

  .product-page .side{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100%;
  }

  .product-page input,
  .product-page select{
    min-width: 0 !important;
    width: 100%;
  }

  .product-page .strategy-row{
    flex-wrap: wrap !important;
    align-items: stretch;
  }
  .product-page .strategy-row > *{ width: 100%; }
  .product-page .strategy-select{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .product-page .strategy-value{
    margin: 0 !important;
    flex: 1 1 auto;
  }
  .product-page .strategy-row input[name="strategy_value"]{
    width: 100% !important;
    min-width: 0 !important;
  }
  .product-page .strategy-row button{ width: 100%; }

  .product-page .add-comp-row{
    flex-wrap: wrap !important;
    align-items: stretch;
  }
  .product-page .add-comp-row input[name="competitor_name"],
  .product-page .add-comp-row input[name="product_url"]{
    width: 100% !important;
    min-width: 0 !important;
  }
  .product-page .add-comp-row button{ width: 100%; }

  .product-page .bottom-forms-container{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* =========================
   Sticky horizontal scrollbar controller (desktop)
   ========================= */
.xscroll-wrap{
  position: sticky;
  bottom: 14px;
  z-index: 60;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  display: none;
}
.xscroll-wrap.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}
.xscroll-bar{
  pointer-events: auto;
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
}
.xscroll-inner{ height: 1px; }

@media (min-width: 1024px){
  .xscroll-wrap{ display:block; }
}

.xscroll-bar::-webkit-scrollbar{ height: 12px; }
.xscroll-bar::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.22);
  border-radius: 999px;
}
.xscroll-bar::-webkit-scrollbar-track{ background: transparent; }


/* =========================
   Dashboard (fully class-based)
   ========================= */

.dashboard-page{ width:100%; }

/* Main 3-column grid */
.dash-grid-3{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:14px;
  align-items:stretch;
}

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

/* Minor page head tweaks */
.dash-page-head{ margin-bottom: 4px; }

/* Trends pie */
.dash-pie{ width:110px; height:110px; }
.dash-pie-bg{ stroke:#eee; stroke-width:8; }
.dash-pie-lower{ stroke:#2ecc71; stroke-width:8; }
.dash-pie-notlower{ stroke:#f1c40f; stroke-width:8; }
.dash-pie-text{ font-size:6px; fill:#444; }
.dash-pie-sub{ font-size:3.5px; fill:#777; }

.dash-trends-links{
  margin-top:10px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.dash-trends-link{
  color:inherit;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dash-trends-link:hover{ text-decoration:underline; }

.dash-swatch{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
}
.swatch-lower{ background:#2ecc71; }
.swatch-notlower{ background:#f1c40f; }

/* Most active list */
.dash-scroll{
  margin-top:10px;
  max-height:320px;
  overflow:auto;
  padding-right:6px;
}
.dash-item{
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #f0f0f6;
  align-items:center;
}
.dash-item:last-child{ border-bottom:0; }
.dash-item-meta{ min-width:0; }
.dash-item-title{
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:420px;
}
.dash-empty{ margin-top:10px; }

/* Competition list */
.dash-competition-list{ margin-top:10px; }
.dash-competition-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
}
.dash-competition-row:hover{ background:#fbfbfe; }
.dash-competition-label{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-tip{ margin-top:10px; }

/* Wide cards */
.dash-wide{ margin-top:14px; }
.dash-wide-head{ gap:12px; flex-wrap:wrap; }
.dash-wide-foot{ margin-top:10px; }

.dash-link-muted{
  color:inherit;
  text-decoration:none;
}
.dash-link-muted:hover{ text-decoration:underline; }

/* Table sizing (wrapper handles scroll on mobile) */
.dash-table-wrap{ margin-top:12px; }
.dash-users-table{ min-width:720px; }

/* =========================
   Dashboard: History strip (compact)
   ========================= */

.dash-history-card{ margin-top:14px; }

.dash-history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.dash-history-h{
  font-weight:900;
  font-size:14px;
  margin:0;
}

.dash-history-sub{ margin-top:4px; max-width:860px; }

.dash-history-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.dash-history-link{
  text-decoration:none;
  font-weight:800;
  color:inherit;
}
.dash-history-link:hover{ text-decoration:underline; }

/* The horizontal strip */
.dash-history-strip{
  margin-top:10px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:6px 6px 4px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

/* Each day */
.dash-history-item{
  flex:0 0 auto;
  width:44px;
  text-align:center;
}

/* Bar container */
.dash-history-barwrap{
  height:44px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

/* Bar itself */
.dash-history-bar{
  width:100%;
  border-radius:10px;
  background: var(--accent);
  opacity: .85;
}

.dash-history-label{
  margin-top:6px;
  font-size:11px;
  opacity:.9;
  white-space:nowrap;
}
.dash-history-val{
  margin-top:2px;
  font-size:11px;
  white-space:nowrap;
}

.dash-history-foot{ margin-top:10px; }

/* Mobile polish */
@media (max-width: 768px){
  .dash-item-title{ max-width: 260px; }
}


/* =========================
   Products page (layout + remove inline styles)
   ========================= */

.products-page .filter-card{ padding:14px; }

/* Filter layout */
.filters-pro{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:end;
}

.filters-pro .fp-search{ grid-column: 1 / span 1; }
.filters-pro .fp-actions{
  grid-column: 2 / span 1;
  display:flex;
  gap:8px;
  align-items:end;
  justify-content:flex-end;
}

.filters-pro .fp-grid{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}

/* Responsive */
@media (max-width: 1100px){
  .filters-pro{
    grid-template-columns: 1fr;
  }
  .filters-pro .fp-actions{
    grid-column: 1 / -1;
    justify-content:flex-start;
  }
  .filters-pro .fp-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .filters-pro .fp-grid{ grid-template-columns: 1fr; }
  .filters-pro .fp-actions .btn{ width:100%; }
}

/* Pager: moved from inline */
.pager.pager-top{ margin:12px 0 6px; }
.pager.pager-bottom{ margin:10px 0 0; }

.pager-actions-right{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.btn.disabled{
  opacity:.5;
  pointer-events:none;
}

/* Products table spacing */
.products-table-wrap{ margin-top:8px; }

/* Tag spacing + dim */
.tag-gap{ margin-left:8px; }
.tag-dim{ opacity:.75; }

/* Keep columns readable without inline th styles */
.products-table th:nth-child(1),
.products-table td:nth-child(1){ min-width:420px; }

.products-table th:nth-child(2),
.products-table td:nth-child(2){ min-width:140px; }

.products-table th:nth-child(3),
.products-table td:nth-child(3){ min-width:120px; }

.products-table th:nth-child(4),
.products-table td:nth-child(4){ min-width:130px; }

.products-table th:nth-child(5),
.products-table td:nth-child(5){ min-width:130px; }

.products-table th:nth-child(6),
.products-table td:nth-child(6){ min-width:160px; }

.products-table th:nth-child(7),
.products-table td:nth-child(7){ min-width:160px; }

.products-table th:nth-child(8),
.products-table td:nth-child(8){ min-width:120px; }

/* Product row (thumbnail + meta) */
.prow{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  text-decoration:none;
  color:inherit;
}
.pmeta{ min-width:0; }
.ptitle{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 560px;
}
@media (max-width: 768px){
  .ptitle{ max-width: 320px; }
}


/* =========================
   Diagnostics (Competitors) — filter top card
   ========================= */

.diag-page .diag-meta{
  text-align:right;
  white-space:nowrap;
}

.filters-diag{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}

/* allow "Search" to be wider */
.filters-diag .span-2{ grid-column: span 2; }

/* tighten card spacing slightly */
.diag-page .filter-card{
  padding:14px;
}

/* actions aligned right, not creating extra perceived height */
.diag-page .filter-card .form-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 1000px){
  .filters-diag{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-diag .span-2{ grid-column: span 2; }
}

@media (max-width: 560px){
  .filters-diag{ grid-template-columns: 1fr; }
  .filters-diag .span-2{ grid-column: span 1; }
  .diag-page .diag-meta{ text-align:left; }
}


/* ===== Dashboard small missing utilities ===== */

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

.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  font-size:12px;
  color:var(--text);
}

/* tighter Trends spacing (override existing) */
.dash-trends-links{
  margin-top:8px;
  gap:12px;
}
.dash-trends-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}


/* Trends card layout */
.dash-trends-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Prevent text block from stretching */
.dash-trends-metrics{
  flex:0 0 auto;
}

/* Keep pie from drifting */
.dash-pie{
  flex:0 0 auto;
}


@media (max-width: 768px){

  /* keep top bar as a row so brand (left) + gear (right) sit on same line */
  .topnav-inner{
    padding:10px 12px;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
  }

  /* Brand stays first (left) */
  .brand{ order:1; }

  /* Gear/user area becomes top-right */
  .nav-right{
    order:2;
    width:auto;
    margin-left:auto;
    justify-content:flex-end;
    gap:8px;
  }

  /* Hide email/role pill on mobile */
  .user-pill{ display:none !important; }

  /* Nav buttons go to next line, full width */
  .navlinks{
    order:3;
    width:100%;
    flex-wrap:wrap;
    gap:6px;
  }
}


@media (max-width: 768px){
  .nav-right .dd summary.btn.small{
    font-size: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    border-radius: 999px;
  }
}


@media (max-width: 768px){
  .nav-right .dd summary.btn.small{
    font-size: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}


@media (min-width: 769px){
  .nav-right .dd summary.btn.small{
    font-size: 16px;
    padding: 7px 11px;
    line-height: 1;
  }
}