/* Features carried over from the Marketing Performance Platform. Uses theme tokens only. */
.kpi-strip { grid-template-columns:repeat(6,minmax(0,1fr)); margin:0 0 22px; }
.kpi-strip>div { background:var(--surface); }
.kpi-strip strong { font-size:17px; }
.ga4-strip { grid-template-columns:repeat(5,minmax(0,1fr)); }
.ga4-strip strong { font-size:16px; }

.error-banner { display:flex; gap:10px; align-items:center; padding:12px 16px; margin-bottom:18px; border-radius:8px; font-size:11px; line-height:1.7;
  background:#fdecec; border:1px solid #f1c6c6; color:#9f2f2f; }
.error-banner .lucide { width:16px; height:16px; flex:none; }
.error-banner span { flex:1; }
.error-banner .button { flex:none; }
html[data-theme="midnight"] .error-banner { background:#3a2424; border-color:#5c3434; color:#f0b4b4; }

.chart-controls { flex-wrap:wrap; justify-content:flex-end; }
.chart-divider { width:1px; height:18px; background:var(--line); margin:0 4px; align-self:center; }

.best-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:26px; }
.best-card { padding:16px; display:flex; flex-direction:column; gap:8px; }
.best-card h3 { font-size:12px; margin:0 0 2px; }
.best-row { display:grid; grid-template-columns:1fr auto; gap:2px 10px; text-align:start; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:inherit; font:inherit; cursor:pointer; }
div.best-row { cursor:default; }
.best-row small { grid-column:1/-1; font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.best-row strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.best-row span { grid-column:1; font-size:9.5px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.best-row b { grid-column:2; grid-row:2/4; align-self:center; font-size:12px; color:var(--accent-text); }
.best-row:hover:not(div) { background:var(--surface-soft); }

.campaign-filter, #glossary-category { max-width:220px; height:34px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:inherit; font:inherit; font-size:10.5px; padding:0 10px; }
.totals-row td { font-weight:700; background:var(--surface-soft); border-top:2px solid var(--line); }

.platform-card-split { display:flex; gap:6px; align-items:center; font-size:9.5px; color:var(--accent-text); background:var(--accent-soft); border-radius:6px; padding:5px 8px; margin-top:8px; }
.platform-card-split .lucide { width:12px; height:12px; }

.stacked-section { display:grid; grid-template-columns:1fr; gap:20px; }
.compact-table { width:100%; border-collapse:collapse; font-size:10.5px; }
.compact-table th, .compact-table td { padding:8px 10px; text-align:start; border-bottom:1px solid var(--line); white-space:nowrap; }
.compact-table th { font-size:9.5px; color:var(--text-muted); font-weight:600; }
.ga4-subhead, .admin-subhead { font-size:11.5px; margin:20px 0 8px; }
.ga4-daily { display:flex; align-items:flex-end; gap:2px; height:64px; padding:2px 0; border-bottom:1px solid var(--line); }
.ga4-daily span { flex:1; min-width:2px; background:var(--chart-primary); border-radius:2px 2px 0 0; opacity:.85; }

.term-category { display:inline-block; font-size:8.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent-text); background:var(--accent-soft); border-radius:20px; padding:2px 8px; margin-bottom:8px; }
.live-platform-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:10px; }
.live-platform-values span { display:flex; justify-content:space-between; gap:6px; font-size:9.5px; border:1px solid var(--line); border-radius:6px; padding:5px 8px; }
.live-platform-values small { color:var(--text-muted); }

.admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.admin-tile { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:10px; padding:14px; }
.admin-tile small { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.admin-tile strong { font-size:13px; }
.admin-tile span { font-size:10px; color:var(--text-muted); }
.admin-tile .button { align-self:flex-start; margin-top:4px; }
.admin-list { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow:auto; }
.admin-file { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; color:inherit; text-decoration:none; }
.admin-file span { flex:1; display:flex; flex-direction:column; }
.admin-file small, .activity-row small { font-size:9px; color:var(--text-muted); }
.activity-row { display:grid; grid-template-columns:160px 1fr auto; gap:10px; font-size:10px; padding:7px 4px; border-bottom:1px solid var(--line); }

@media (max-width:1200px) { .kpi-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } .best-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:800px) { .ga4-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-grid { grid-template-columns:1fr; } .activity-row { grid-template-columns:1fr; gap:2px; } }
@media (max-width:640px) { .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .best-grid { grid-template-columns:1fr; } .error-banner { flex-wrap:wrap; } .live-platform-values { grid-template-columns:1fr; } .campaign-filter { max-width:100%; } }

/* Creative Lab: clickable thumbnails and the creative preview dialog. */
button.creative-thumbnail { position:relative; border:0; padding:0; cursor:zoom-in; flex-shrink:0; }
button.creative-thumbnail:focus-visible { outline:2px solid var(--accent-text); outline-offset:2px; }
.thumb-zoom { position:absolute; inset-inline-end:2px; bottom:2px; display:grid; place-items:center; width:15px; height:15px; border-radius:4px; background:#0009; color:#fff; opacity:.85; }
.thumb-zoom .lucide { width:9px; height:9px; }
button.creative-thumbnail:hover .thumb-zoom { opacity:1; }
.creative-preview-media { display:grid; place-items:center; margin:14px 0; background:var(--surface-soft); border:1px solid var(--line); border-radius:12px; overflow:hidden; min-height:120px; }
.creative-preview-media a { display:block; width:100%; }
.creative-preview-media [hidden] { display:none !important; }
.creative-preview-media img { display:block; width:100%; max-height:min(60vh,520px); object-fit:contain; background:#0000; }
.creative-preview-media .small-note { padding:16px; text-align:center; }
.creative-preview-links { flex-wrap:wrap; justify-content:flex-start; }
.creative-preview-links .button { text-decoration:none; }
@media (max-width:640px) {
  button.creative-thumbnail { width:48px; height:54px; }
  .creative-preview-links { grid-template-columns:1fr; }
}

/* Top bar Force refresh: always visible, with the time of the latest pull. */
.topbar-refresh { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:6px 12px; font-size:11px; }
.topbar-refresh .lucide { width:15px; height:15px; flex-shrink:0; }
.topbar-refresh-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.topbar-refresh-text small { font-size:9px; color:var(--text-muted); font-weight:400; }
.topbar-refresh-text small:empty { display:none; }
.topbar-refresh:disabled { opacity:.75; cursor:progress; }
@media (max-width:900px) { .topbar-refresh-text small { display:none; } }
@media (max-width:640px) {
  .topbar-refresh { min-width:40px; min-height:40px; padding:8px; justify-content:center; }
  .topbar-refresh-text, .topbar-refresh > span:not(.spinner) { display:none; }
}

/* Creative Lab: Google search terms and keywords that return sales. */
.terms-card { margin-top:22px; }
.terms-header { flex-wrap:wrap; gap:12px; }
.terms-body { padding:0 20px 18px; }
.terms-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }
.terms-strip strong .muted { font-size:12px; font-weight:500; }
.terms-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 12px; }
.terms-toolbar .search-field { flex:1 1 220px; }
.terms-toolbar select { height:34px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:inherit; font:inherit; font-size:11px; padding:0 10px; }
.terms-only { display:inline-flex; align-items:center; gap:6px; font-size:11px; white-space:nowrap; }
.terms-table td { vertical-align:top; }
.term-cell { white-space:normal !important; min-width:220px; }
.term-cell strong { display:block; font-size:12px; }
.term-cell small { display:block; font-size:9.5px; color:var(--text-muted); margin-top:2px; }
@media (max-width:640px) {
  .terms-body { padding:0 12px 14px; }
  .terms-strip { grid-template-columns:1fr 1fr; }
  .terms-toolbar { display:grid; grid-template-columns:1fr; }
  .terms-toolbar select, .terms-toolbar .button, .terms-toolbar .search-field { min-height:44px; width:100%; font-size:16px; }
  .terms-only { font-size:13px; min-height:36px; }
  .terms-table thead { display:none; }
  .terms-table, .terms-table tbody { display:block; }
  .terms-table tr { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; padding:12px 2px; border-bottom:1px solid var(--line); }
  .terms-table td { display:flex; flex-direction:column; padding:0; border:0; font-size:13px; white-space:normal; }
  .terms-table td[data-label]::before { content:attr(data-label); font-size:10.5px; color:var(--text-muted); }
  .terms-table .term-cell { grid-column:1 / -1; min-width:0; }
  .term-cell strong { font-size:14px; }
  .term-cell small { font-size:11px; }
}

/* Trend chart type switch: area, line, bars, stacked by platform. */
.chart-type-control { display:inline-flex; gap:2px; padding:3px; margin:0 0 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); }
.chart-type-button { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:0; border-radius:7px; background:transparent; color:var(--text-secondary, #5d6f63); font:inherit; font-size:12px; cursor:pointer; }
.chart-type-button .lucide { width:15px; height:15px; }
.chart-type-button:hover { color:var(--accent-text); }
.chart-type-button.active { background:var(--surface); color:var(--accent-text); box-shadow:0 1px 3px #1730241a; font-weight:600; }
.chart-type-button:focus-visible { outline:2px solid var(--accent-text); outline-offset:1px; }
.chart-bar { transition:opacity .15s; }
.trend-wrap[data-chart-type="bar"] .chart-hover-target.active, .trend-wrap[data-chart-type="stacked"] .chart-hover-target.active { fill:var(--chart-fill, #c3e4c7); fill-opacity:.25; }
.chart-tooltip .tooltip-row { display:flex; align-items:center; gap:6px; margin-top:3px; white-space:nowrap; }
.chart-tooltip .tooltip-row .legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
@media (max-width:640px) {
  .chart-type-control { display:flex; width:100%; }
  .chart-type-button { flex:1; justify-content:center; min-height:40px; padding:8px; }
  .chart-type-button span { display:none; }
  .chart-type-button .lucide { width:18px; height:18px; }
}
/* Line the switch up with the card header's padding (21px desktop, 17px phone). */
.chart-card .chart-type-control { margin-inline: 21px; }
@media (max-width:640px) { .chart-card .chart-type-control { margin-inline: 17px; width: auto; } }

/* Platform budgets: one plan per store; All stores is their sum. */
.budget-store-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px; }
.budget-store-tab { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:8px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text-secondary, #5d6f63); font:inherit; font-size:13px; cursor:pointer; }
.budget-store-tab .lucide { width:15px; height:15px; }
.budget-store-tab:hover { border-color:var(--accent-text); color:var(--accent-text); }
.budget-store-tab.active { background:var(--accent-soft); border-color:var(--accent-text); color:var(--accent-text); font-weight:600; }
.budget-store-link { display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:0; color:var(--accent-text); font:inherit; font-weight:600; cursor:pointer; }
.budget-store-link .lucide { width:12px; height:12px; opacity:.7; }
.budget-overview-table td, .budget-overview-table th { text-align:end; }
.budget-overview-table td:first-child, .budget-overview-table th:first-child { text-align:start; }
.budget-overview-table .budget-total { font-weight:700; }
.budget-overview-table .budget-empty { color:var(--text-muted); }
.budget-overview-table .over-budget, .budget-summary .over-budget { color:#b94444; }
.budget-planner > .table-scroll { margin-top:14px; }
.budget-planner > .small-note .lucide { width:13px; height:13px; vertical-align:-2px; }
@media (max-width:640px) {
  .budget-store-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-4px; padding-inline:4px; }
  .budget-store-tab { flex:0 0 auto; min-height:44px; }
  .budget-overview-table thead { display:none; }
  .budget-overview-table, .budget-overview-table tbody, .budget-overview-table tfoot { display:block; }
  .budget-overview-table tr { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; padding:12px 2px; border-bottom:1px solid var(--line); }
  .budget-overview-table td { display:flex; flex-direction:column; text-align:start !important; padding:0; border:0; font-size:13px; }
  .budget-overview-table td::before { content:attr(data-label); font-size:11px; color:var(--text-muted); }
  .budget-overview-table td:first-child { grid-column:1 / -1; }
  .budget-overview-table td:first-child::before { content:none; }
}



/* Actual spend still being pulled from the ad platforms. */
.budget-pending { color: var(--text-secondary, #5d6f63); font-style: italic; animation: budget-pulse 1.4s ease-in-out infinite; }
@keyframes budget-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .budget-pending { animation: none; } }


/* Overview: spend and sales share by platform */
.share-card { display:flex; flex-direction:column; }
.share-card .card-header { gap:10px; flex-wrap:wrap; }
.share-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.share-toggle button { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border:0; background:var(--surface); color:var(--text-secondary, #5d6f63); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.share-toggle button + button { border-inline-start:1px solid var(--line); }
.share-toggle button.active { background:var(--accent-soft); color:var(--accent-text); }
.share-toggle .lucide { width:14px; height:14px; }
.share-table { width:100%; border-collapse:collapse; }
.share-table th { text-align:start; font-size:12px; font-weight:600; color:var(--text-secondary, #5d6f63); padding:8px 6px; border-bottom:1px solid var(--line); }
.share-table th:not(:first-child), .share-table td:not(:first-child) { text-align:end; }
.share-table td { padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.share-table td strong { font-size:15px; }
.share-table td small { display:block; font-size:12px; color:var(--text-secondary, #5d6f63); margin-top:2px; }
.share-table tfoot td { border-bottom:0; font-weight:700; background:var(--surface-soft, #f4f8f3); }
.share-name { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; }
.share-name i { width:9px; height:9px; border-radius:50%; flex:none; }
.share-bars { display:grid; gap:14px; padding:4px 0; }
.share-bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; }
.share-bar-head small { font-size:12px; color:var(--text-secondary, #5d6f63); }
.share-bar { display:grid; grid-template-columns:44px 1fr 52px; align-items:center; gap:8px; margin-top:4px; }
.share-bar-label { font-size:12px; color:var(--text-secondary, #5d6f63); }
.share-track { height:12px; border-radius:6px; background:var(--surface-soft, #eef2ef); overflow:hidden; }
.share-fill { display:block; height:100%; border-radius:6px; }
.share-fill.is-spend { opacity:.45; }
.share-bar b { font-size:13px; text-align:end; }
.share-card .small-note { margin-top:auto; padding-top:10px; }
.share-card > *:not(.card-header) { margin-inline:20px; }
.share-card .table-scroll { margin-inline:14px !important; }
@media (max-width:700px) { .share-card > *:not(.card-header) { margin-inline:14px; } .share-card .table-scroll { margin-inline:8px !important; } }
.share-table th, .share-table td { white-space:normal; } .share-table td:first-child small { max-width:150px; }

/* Overview: budget split preview (in-page only) */
.pv { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.pv > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; font-weight:700; color:var(--accent-text); list-style:none; }
.pv > summary::-webkit-details-marker { display:none; }
.pv > summary .lucide { width:15px; height:15px; }
.pv-body { margin-top:10px; display:grid; gap:10px; }
.pv-budget { display:grid; grid-template-columns:1fr minmax(150px, 55%); align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--text-secondary, #5d6f63); }
.pv-field { display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden; }
.pv-field:focus-within { border-color:var(--accent-text); box-shadow:0 0 0 2px var(--accent-soft); }
.pv-field input { flex:1; min-width:0; width:100%; height:34px; border:0; padding:0 8px; background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:600; outline:none; text-align:end; }
.pv-field em { font-style:normal; font-size:12px; padding:0 8px; color:var(--text-secondary, #5d6f63); border-inline-start:1px solid var(--line); line-height:34px; background:var(--surface-soft, #f4f8f3); }
.pv-table .pv-input-cell { width:76px; }
.pv-pct { width:68px; height:32px; border:1px solid var(--line); border-radius:7px; padding:0 6px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; font-weight:600; text-align:end; }
.pv-pct:focus { outline:none; border-color:var(--accent-text); box-shadow:0 0 0 2px var(--accent-soft); }
.pv-table th, .pv-table td { padding:7px 4px; font-size:13px; }
.pv-table td strong { font-size:14px; }
.pv-table td b { font-size:13px; }
.pv-table th:first-child, .pv-table td:first-child { padding-inline-start:6px; }
.pv-table td { vertical-align:middle; }
.pv-warn { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; margin:0; font-size:12px; color:#9a5b12; }
.pv-warn .lucide { width:14px; height:14px; flex:none; margin-top:1px; }
.pv-actions { display:flex; justify-content:flex-end; }
.pv-actions .button { font-size:12px; padding:6px 10px; }
@media (max-width:700px) { .pv-budget { grid-template-columns:1fr; } .pv-field input { height:42px; font-size:16px; } .pv-field em { line-height:42px; } }
@media (max-width:700px) { .pv-pct { height:40px; font-size:16px; width:72px; } }