/* ==========================================================================
   Pricemaster App — Design System v1
   Tokens from: colors_and_type.css (design-system package)
   Components from: ui_kits/app/dashboard.css (design-system package)
   Replaces the inline <style> block in views/layout/head.php.
   Applies to all app views via html[data-app-scope] attribute set by head.php.
   ========================================================================== */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Brand sky-blue */
  --pm-sky-300: #77d5f7;
  --pm-sky-400: #3eb1ff;
  --pm-sky-500: #2477ff;
  --pm-sky-100: #e3f4fd;
  --pm-sky-50:  #f4f9fc;

  /* Brand pink */
  --pm-pink-500: #ff3d87;
  --pm-pink-400: #ff4fa0;
  --pm-pink-300: #fc59a3;

  /* Gradients (CTA only) */
  --pm-grad-blue: linear-gradient(135deg, #3ea8ff, #2477ff);
  --pm-grad-pink: linear-gradient(135deg, #ff4fa0, #ff3d87);

  /* Semantic up/down (report palette) */
  --pm-rep-cyan:  #77d6f7;
  --pm-rep-pink:  #fc59a3;
  --pm-rep-amber: #fdae29;
  --pm-up:   #77d6f7;
  --pm-down: #fc59a3;

  /* Type families */
  --pm-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --pm-font-body:    'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pm-font-ui:      'Inter', system-ui, sans-serif;
  --pm-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- DARK THEME (default) ---------- */
:root,
html[data-theme="dark"] {
  --app-bg:        #0b0f1a;
  --app-bg-soft:   #11172a;
  --card-bg:       #141b2c;
  --card-bg-2:     #1b2238;
  --card-border:   rgba(255,255,255,0.06);
  --card-border-2: rgba(255,255,255,0.10);
  --side-bg:       #0a0e18;
  --side-fg:       rgba(255,255,255,0.78);
  --side-fg-mute:  rgba(255,255,255,0.45);
  --side-active:   rgba(62,177,255,0.14);
  --side-active-fg:#77d6f7;
  --topbar-bg:     #0e1424;
  --topbar-border: rgba(255,255,255,0.06);
  --fg:            #f3f6fb;
  --fg-strong:     #ffffff;
  --fg-mute:       rgba(255,255,255,0.62);
  --fg-subtle:     rgba(255,255,255,0.45);
  --fg-faint:      rgba(255,255,255,0.30);
  --grid-line:     rgba(255,255,255,0.06);
  --tbl-row-hover: rgba(255,255,255,0.04);
  --input-bg:      rgba(255,255,255,0.05);
  --input-border:  rgba(255,255,255,0.10);
  --btn-ghost-bg:  rgba(255,255,255,0.06);
  --btn-ghost-fg:  rgba(255,255,255,0.85);
  --btn-ghost-bd:  rgba(255,255,255,0.10);
  --shadow-card:   0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.55);
  --banner-bg:     linear-gradient(95deg, rgba(253,174,41,0.18), rgba(253,174,41,0.08));
  --banner-bd:     rgba(253,174,41,0.30);
  --banner-fg:     #fde7b3;
  --banner-ic-bg:  rgba(253,174,41,0.22);
  --banner-ic-fg:  #fdae29;
}

/* ---------- LIGHT THEME ---------- */
html[data-theme="light"] {
  --app-bg:        #f3f4f6;
  --app-bg-soft:   #ffffff;
  --card-bg:       #ffffff;
  --card-bg-2:     #ffffff;
  --card-border:   #e5e7eb;
  --card-border-2: #d1d5db;
  --side-bg:       #0d1322;    /* sidebar always stays dark */
  --side-fg:       rgba(255,255,255,0.78);
  --side-fg-mute:  rgba(255,255,255,0.45);
  --side-active:   rgba(62,177,255,0.14);
  --side-active-fg:#77d6f7;
  --topbar-bg:     #ffffff;
  --topbar-border: #e5e7eb;
  --fg:            #0f172a;
  --fg-strong:     #0b1220;
  --fg-mute:       #475569;
  --fg-subtle:     #64748b;
  --fg-faint:      #94a3b8;
  --grid-line:     #e5e7eb;
  --tbl-row-hover: #f8fafc;
  --input-bg:      #f8fafc;
  --input-border:  #e2e8f0;
  --btn-ghost-bg:  #ffffff;
  --btn-ghost-fg:  #0f172a;
  --btn-ghost-bd:  #e2e8f0;
  --shadow-card:   0 1px 2px rgba(15,23,42,0.04), 0 4px 16px -8px rgba(15,23,42,0.10);
  --banner-bg:     linear-gradient(95deg, #fff7e1, #fffaf0);
  --banner-bd:     #fde68a;
  --banner-fg:     #78350f;
  --banner-ic-bg:  #fef3c7;
  --banner-ic-fg:  #b45309;
}

/* ==========================================================================
   BASE — body, font, background
   ========================================================================== */
html[data-app-scope] body {
  background: var(--app-bg) !important;
  font-family: var(--pm-font-ui) !important;
  color: var(--fg);
  min-height: 100vh;
  transition: background-color 240ms ease;
}

html[data-app-scope] body.bg-gray-200 {
  background: var(--app-bg) !important;
}

html[data-app-scope] #main-content.bg-gray-50 {
  background: var(--app-bg) !important;
}

/* Page entry animation */
html[data-app-scope] #main-content {
  animation: pm-fade-slide 360ms ease-out;
}

@keyframes pm-fade-slide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */
html[data-app-scope] h1,
html[data-app-scope] h2,
html[data-app-scope] h3,
html[data-app-scope] h4,
html[data-app-scope] h5,
html[data-app-scope] h6 {
  font-family: var(--pm-font-display) !important;
  color: var(--fg-strong) !important;
}

html[data-app-scope] strong,
html[data-app-scope] th {
  color: var(--fg-strong) !important;
}

/* ==========================================================================
   SIDEBAR — always dark, no glass effect
   ========================================================================== */
html[data-app-scope] #sidebar {
  background: var(--side-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.04) !important;
  border: none !important;
}

html[data-app-scope] #sidebar a {
  color: var(--side-fg) !important;
  box-shadow: none !important;
}

html[data-app-scope] #sidebar a:hover,
html[data-app-scope] #sidebar button:hover,
html[data-app-scope] #sidebar .hover\:bg-gray-700:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

html[data-app-scope] #sidebar a.bg-gray-800,
html[data-app-scope] #sidebar a.bg-gray-900 {
  background: var(--side-active) !important;
  box-shadow: inset 3px 0 0 var(--side-active-fg) !important;
  color: var(--side-active-fg) !important;
  border-color: transparent !important;
}

/* Sidebar group labels */
html[data-app-scope] #sidebar .text-gray-400,
html[data-app-scope] #sidebar .text-gray-500 {
  color: var(--side-fg-mute) !important;
}

/* ==========================================================================
   TOPBAR / NAV
   ========================================================================== */
html[data-app-scope] #main-content nav {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   CARDS / PANELS — flat, no blur
   ========================================================================== */
html[data-app-scope] .bg-white,
html[data-app-scope] .bg-gray-700,
html[data-app-scope] .bg-gray-800,
html[data-app-scope] .bg-gray-900 {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-app-scope] .shadow:not(button):not(a):not(input):not([role="button"]) {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   TEXT COLOURS
   ========================================================================== */
html[data-app-scope] .text-gray-900,
html[data-app-scope] .text-gray-800,
html[data-app-scope] .text-gray-700,
html[data-app-scope] .text-gray-600 {
  color: var(--fg) !important;
}

html[data-app-scope] .text-gray-500,
html[data-app-scope] .text-gray-400,
html[data-app-scope] .text-gray-300,
html[data-app-scope] .text-gray-200 {
  color: var(--fg-mute) !important;
}

html[data-app-scope] .text-white {
  color: var(--fg-strong) !important;
}

html[data-app-scope] .text-slate-400,
html[data-app-scope] .text-slate-500 {
  color: var(--fg-mute) !important;
}

/* Semantic colours — preserved */
html[data-app-scope][data-theme="light"] .text-green-300,
html[data-app-scope][data-theme="light"] .text-green-400,
html[data-app-scope][data-theme="light"] .text-green-500,
html[data-app-scope][data-theme="light"] .text-green-600,
html[data-app-scope][data-theme="light"] .text-green-700 { color: #16a34a !important; }

html[data-app-scope][data-theme="light"] .text-red-300,
html[data-app-scope][data-theme="light"] .text-red-400,
html[data-app-scope][data-theme="light"] .text-red-500,
html[data-app-scope][data-theme="light"] .text-red-600,
html[data-app-scope][data-theme="light"] .text-red-700 { color: #dc2626 !important; }

html[data-app-scope][data-theme="dark"] .text-green-300,
html[data-app-scope][data-theme="dark"] .text-green-400,
html[data-app-scope][data-theme="dark"] .text-green-500,
html[data-app-scope][data-theme="dark"] .text-green-600,
html[data-app-scope][data-theme="dark"] .text-green-700 { color: #4ade80 !important; }

html[data-app-scope][data-theme="dark"] .text-red-300,
html[data-app-scope][data-theme="dark"] .text-red-400,
html[data-app-scope][data-theme="dark"] .text-red-500,
html[data-app-scope][data-theme="dark"] .text-red-600,
html[data-app-scope][data-theme="dark"] .text-red-700 { color: #fb7185 !important; }

/* ==========================================================================
   LABELS
   ========================================================================== */
html[data-app-scope] label {
  color: var(--fg) !important;
}

/* ==========================================================================
   FORM INPUTS — flat, no blur
   ========================================================================== */
html[data-app-scope] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
html[data-app-scope] select,
html[data-app-scope] textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--fg) !important;
}

html[data-app-scope] input::placeholder,
html[data-app-scope] textarea::placeholder {
  color: var(--fg-subtle) !important;
}

html[data-app-scope] input[type="checkbox"]:not(.sr-only) {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.2rem;
  border: 1px solid var(--input-border);
  accent-color: var(--pm-sky-400);
  cursor: pointer;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
html[data-app-scope] a[class*="bg-blue-"],
html[data-app-scope] button[class*="bg-blue-"] {
  background: var(--pm-grad-blue) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   TABLES — DataTables dark / light
   ========================================================================== */
html[data-app-scope][data-theme="dark"] thead,
html[data-app-scope][data-theme="dark"] table thead,
html[data-app-scope][data-theme="dark"] .dataTable thead,
html[data-app-scope][data-theme="dark"] #competitor-table thead,
html[data-app-scope][data-theme="dark"] #data-table thead {
  background: rgba(30,41,59,0.88) !important;
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="dark"] tbody,
html[data-app-scope][data-theme="dark"] table tbody,
html[data-app-scope][data-theme="dark"] .dataTable tbody {
  background: var(--card-bg) !important;
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="dark"] table tbody tr:nth-child(odd),
html[data-app-scope][data-theme="dark"] .dataTable tbody tr:nth-child(odd) {
  background: rgba(30,41,59,0.52) !important;
}

html[data-app-scope][data-theme="dark"] table tbody tr:nth-child(even),
html[data-app-scope][data-theme="dark"] .dataTable tbody tr:nth-child(even) {
  background: var(--card-bg) !important;
}

html[data-app-scope][data-theme="dark"] table th,
html[data-app-scope][data-theme="dark"] table td,
html[data-app-scope][data-theme="dark"] .dataTable th,
html[data-app-scope][data-theme="dark"] .dataTable td {
  color: var(--fg) !important;
  border-color: var(--card-border) !important;
}

html[data-app-scope][data-theme="light"] table,
html[data-app-scope][data-theme="light"] table th,
html[data-app-scope][data-theme="light"] table td {
  color: var(--fg) !important;
  border-color: rgba(148,163,184,0.3) !important;
}

html[data-app-scope][data-theme="light"] thead,
html[data-app-scope][data-theme="light"] table thead,
html[data-app-scope][data-theme="light"] .dataTable thead,
html[data-app-scope][data-theme="light"] #competitor-table thead,
html[data-app-scope][data-theme="light"] #data-table thead {
  background: rgba(226,240,255,0.94) !important;
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] table thead.bg-slate-800,
html[data-app-scope][data-theme="light"] table .bg-slate-800 {
  background: rgba(226,240,255,0.94) !important;
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] tbody,
html[data-app-scope][data-theme="light"] table tbody,
html[data-app-scope][data-theme="light"] .dataTable tbody {
  background: rgba(255,255,255,0.85) !important;
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] .dataTable tbody tr:nth-child(even),
html[data-app-scope][data-theme="light"] .dataTable tbody tr:nth-child(odd) {
  background: rgba(248,250,252,0.78) !important;
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] table tbody tr:nth-child(odd) {
  background-color: rgba(255,255,255,0.78) !important;
}

html[data-app-scope][data-theme="light"] table tbody tr:nth-child(even) {
  background-color: rgba(248,250,252,0.72) !important;
}

html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_filter input,
html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(148,163,184,0.45) !important;
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_info,
html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_length label,
html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_filter label {
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--fg) !important;
  border-color: rgba(148,163,184,0.4) !important;
  background: rgba(255,255,255,0.8) !important;
}

html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-app-scope][data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--fg) !important;
  border-color: rgba(62,177,255,0.45) !important;
  background: rgba(203,232,255,0.92) !important;
}

/* ==========================================================================
   AG GRID (light mode)
   ========================================================================== */
html[data-app-scope][data-theme="light"] .ag-root-wrapper {
  --ag-background-color: rgba(255,255,255,0.9) !important;
  --ag-foreground-color: var(--fg) !important;
  --ag-header-background-color: rgba(224,242,254,0.9) !important;
  --ag-header-foreground-color: var(--fg) !important;
  --ag-border-color: var(--card-border) !important;
  --ag-row-border-color: rgba(148,163,184,0.22) !important;
  --ag-odd-row-background-color: rgba(248,250,252,0.9) !important;
  --ag-selected-row-background-color: rgba(191,219,254,0.35) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

html[data-app-scope][data-theme="light"] .ag-root-wrapper,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-header,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-row,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-cell,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-paging-panel,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-status-bar {
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-picker-field-wrapper,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-picker-field-display,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-input-field-input,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-select select,
html[data-app-scope][data-theme="light"] .ag-root-wrapper .ag-paging-page-size {
  background: rgba(255,255,255,0.92) !important;
  color: var(--fg) !important;
  border-color: rgba(148,163,184,0.45) !important;
}

html[data-app-scope][data-theme="light"] .ag-theme-quartz .ag-picker-field-wrapper,
html[data-app-scope][data-theme="light"] .ag-theme-alpine .ag-picker-field-wrapper,
html[data-app-scope][data-theme="light"] .ag-theme-alpine-dark .ag-picker-field-wrapper,
html[data-app-scope][data-theme="light"] .ag-menu,
html[data-app-scope][data-theme="light"] .ag-popup .ag-list-item,
html[data-app-scope][data-theme="light"] .ag-popup .ag-virtual-list-container,
html[data-app-scope][data-theme="light"] .ag-popup .ag-select-list {
  background: #ffffff !important;
  color: var(--fg) !important;
  border-color: rgba(148,163,184,0.45) !important;
}

html[data-app-scope][data-theme="light"] .ag-popup .ag-list-item.ag-active-item,
html[data-app-scope][data-theme="light"] .ag-popup .ag-list-item:hover {
  background: rgba(203,232,255,0.92) !important;
  color: var(--fg) !important;
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */
html[data-app-scope] #dropdownMenu {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-app-scope][data-theme="dark"] #dropdownMenu {
  background: var(--app-bg) !important;
  border-color: var(--card-border-2) !important;
}

html[data-app-scope] #dropdownMenu a {
  color: var(--fg) !important;
}

html[data-app-scope] #dropdownMenu a:hover {
  background: var(--tbl-row-hover) !important;
}

/* ==========================================================================
   FILTER PILLS / MISC UI
   ========================================================================== */
html[data-app-scope] .pm-filter-pill:not([style]) {
  color: var(--fg) !important;
}

html[data-app-scope] .pm-popup-cancel-btn {
  background: var(--input-bg) !important;
  color: var(--fg) !important;
}

/* Hide breadcrumbs globally */
.breadcrumb,
.breadcrumbs,
[aria-label="breadcrumb"] {
  display: none !important;
}

/* ==========================================================================
   APEXCHARTS
   ========================================================================== */
html[data-app-scope][data-theme="dark"] .apexcharts-tooltip,
html[data-app-scope][data-theme="dark"] .apexcharts-xaxistooltip,
html[data-app-scope][data-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--card-bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 10px 30px rgba(2,6,23,0.45) !important;
}

html[data-app-scope][data-theme="dark"] .apexcharts-tooltip-title {
  background: var(--card-bg-2) !important;
  color: var(--fg-strong) !important;
  border-bottom: 1px solid var(--card-border) !important;
}

html[data-app-scope][data-theme="dark"] .apexcharts-tooltip-text,
html[data-app-scope][data-theme="dark"] .apexcharts-tooltip-series-group,
html[data-app-scope][data-theme="dark"] .apexcharts-tooltip-y-group,
html[data-app-scope][data-theme="dark"] .apexcharts-tooltip-z-group {
  color: var(--fg) !important;
}

html[data-app-scope][data-theme="light"] .apexcharts-tooltip,
html[data-app-scope][data-theme="light"] .apexcharts-xaxistooltip,
html[data-app-scope][data-theme="light"] .apexcharts-yaxistooltip {
  background: #ffffff !important;
  color: var(--fg) !important;
  border: 1px solid var(--card-border) !important;
}

html[data-app-scope][data-theme="light"] .apexcharts-tooltip-title {
  background: var(--input-bg) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--card-border) !important;
}

/* ==========================================================================
   DARK MODE IMAGES
   ========================================================================== */
html[data-app-scope][data-theme="dark"] img {
  filter: saturate(1.05);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  html[data-app-scope] #main-content {
    margin-left: 0 !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  html[data-app-scope] #main-content nav {
    position: sticky;
    top: 0;
    z-index: 120;
  }

  html[data-app-scope] #sidebar {
    width: min(86vw, 340px) !important;
    height: 100vh;
    z-index: 220 !important;
    border-radius: 0;
    overflow-y: auto;
  }

  html[data-app-scope] #sidebarMainLogo {
    max-width: 170px;
    height: auto;
    margin-bottom: 1rem !important;
  }

  html[data-app-scope] .apexcharts-canvas,
  html[data-app-scope] .apexcharts-svg {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-app-scope] .apexcharts-legend,
  html[data-app-scope] .apexcharts-toolbar {
    max-width: 100% !important;
  }

  html[data-app-scope] .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   ACTION ICON BUTTONS — pm-action-btn (replaces coloured text pill buttons)
   Use everywhere an actions column appears in DataTables or AG Grid.
   Variants: .danger (delete), .warn (run/simulate), .success (apply/save)
   ========================================================================== */
html[data-app-scope] .pm-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
html[data-app-scope] .pm-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--card-border-2);
  background: var(--input-bg);
  color: var(--fg-mute);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  cursor: pointer;
}
html[data-app-scope] .pm-action-btn:hover {
  background: var(--side-active);
  border-color: var(--side-active-fg);
  color: var(--side-active-fg);
}
html[data-app-scope] .pm-action-btn.danger {
  color: var(--pm-down);
  border-color: rgba(252,89,163,0.30);
}
html[data-app-scope] .pm-action-btn.danger:hover {
  background: rgba(252,89,163,0.12);
  border-color: rgba(252,89,163,0.55);
  color: var(--pm-down);
}
html[data-app-scope] .pm-action-btn.warn {
  color: var(--pm-rep-amber);
  border-color: rgba(253,174,41,0.30);
}
html[data-app-scope] .pm-action-btn.warn:hover {
  background: rgba(253,174,41,0.12);
  border-color: rgba(253,174,41,0.55);
  color: var(--pm-rep-amber);
}
html[data-app-scope] .pm-action-btn.success {
  color: #4ade80;
  border-color: rgba(74,222,128,0.30);
}
html[data-app-scope] .pm-action-btn.success:hover {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.55);
  color: #4ade80;
}

/* ==========================================================================
   PAGE HEAD — title + subtitle + action row
   ========================================================================== */
html[data-app-scope] .page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
html[data-app-scope] .page-head h1 {
  font-family: var(--pm-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fg-strong) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
html[data-app-scope] .page-head .sub {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--fg-mute);
}
html[data-app-scope] .page-head .actions {
  display: flex; gap: 8px; flex-shrink: 0;
}

/* ==========================================================================
   BANNER — onboarding / warning (prevents .shadow override from wiping amber)
   ========================================================================== */
html[data-app-scope] .banner {
  background: var(--banner-bg) !important;
  border: 1px solid var(--banner-bd) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-app-scope] .banner.hidden {
  display: none !important;
}
html[data-app-scope] .banner .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--banner-ic-bg);
  color: var(--banner-ic-fg);
  display: grid; place-items: center; flex: none;
}
html[data-app-scope] .banner .txt { flex: 1; min-width: 0; }
html[data-app-scope] .banner .txt b {
  font-size: 14px; color: var(--banner-fg); font-weight: 700; display: block; margin-bottom: 2px;
}
html[data-app-scope] .banner .txt span { font-size: 12.5px; color: var(--fg-mute); }
html[data-app-scope] .banner .b {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  background: var(--banner-ic-fg); color: #fff;
  border: none; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}

/* ==========================================================================
   STAT TILES — KPI cards matching dashboard.css pattern
   ========================================================================== */
html[data-app-scope] .stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
html[data-app-scope] .stat .lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  color: var(--fg-mute);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
html[data-app-scope] .stat .lbl svg { color: var(--fg-subtle); flex-shrink: 0; }
html[data-app-scope] .stat .num {
  font-family: var(--pm-font-display);
  font-size: 28px; font-weight: 700;
  color: var(--fg-strong);
  line-height: 1.1; letter-spacing: -0.015em;
}
html[data-app-scope] .stat .num small {
  font-size: 13px; font-weight: 500;
  color: var(--fg-mute); margin-left: 4px;
}
html[data-app-scope] .stat .sub { font-size: 12px; color: var(--fg-subtle); margin-top: 4px; }
html[data-app-scope] .stat .delta {
  font-size: 11.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
}
html[data-app-scope] .stat .delta.up   { background: rgba(119,214,247,0.18); color: var(--pm-rep-cyan); }
html[data-app-scope] .stat .delta.down { background: rgba(252,89,163,0.18);  color: var(--pm-rep-pink); }

/* ==========================================================================
   CARD HEADER UTILITY — used in dashboard cards with title + action
   ========================================================================== */
html[data-app-scope] .card-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}

/* ==========================================================================
   REPORT PILL BUTTON — "View Report" CTA on dashboard cards
   ========================================================================== */
html[data-app-scope] .b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px;
  font-weight: 600; font-size: 12.5px;
  cursor: pointer; transition: all 200ms ease;
  border: 1px solid transparent; text-decoration: none;
  white-space: nowrap; font-family: var(--pm-font-ui);
}
html[data-app-scope] .b--primary {
  background: var(--pm-grad-blue);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(36,119,255,0.55);
}
html[data-app-scope] .b--primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
html[data-app-scope] .b--ghost {
  background: var(--btn-ghost-bg); color: var(--btn-ghost-fg);
  border-color: var(--btn-ghost-bd);
}
html[data-app-scope] .b--ghost:hover { border-color: var(--card-border-2); }
html[data-app-scope] .b--pill {
  background: rgba(119,214,247,0.15);
  color: var(--pm-rep-cyan);
  border: 1px solid rgba(119,214,247,0.3);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
}
html[data-app-scope] .b--pill:hover { background: rgba(119,214,247,0.25); }

/* ==========================================================================
   MOVERS TABLE — daily changes mini-table in dashboard cards
   ========================================================================== */
html[data-app-scope] .movers {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
html[data-app-scope] .movers th {
  text-align: left; padding: 6px 8px;
  font-size: 10px; font-weight: 700;
  color: var(--fg-subtle);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--card-border);
}
html[data-app-scope] .movers th.r,
html[data-app-scope] .movers td.r { text-align: right; }
html[data-app-scope] .movers td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--card-border);
  color: var(--fg);
}
html[data-app-scope] .movers tr:last-child td { border-bottom: none; }
html[data-app-scope] .movers tr:hover td { background: var(--tbl-row-hover); }
html[data-app-scope] .movers .tag { font-weight: 700; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
html[data-app-scope] .movers .tag.up   { color: var(--pm-up); }
html[data-app-scope] .movers .tag.down { color: var(--pm-down); }
html[data-app-scope] .movers .sku-link {
  color: var(--pm-sky-400); font-family: var(--pm-font-mono);
  font-size: 11.5px; font-weight: 600; text-decoration: none;
}
html[data-app-scope] .movers .sku-link:hover { text-decoration: underline; }
html[data-app-scope] .movers .ext { color: var(--pm-sky-400); margin-left: 2px; opacity: 0.65; font-size: 10px; }
html[data-app-scope] .movers .delta-up   { color: var(--pm-up);   font-weight: 700; }
html[data-app-scope] .movers .delta-down { color: var(--pm-down); font-weight: 700; }
html[data-app-scope] .movers .pct { font-size: 10px; opacity: 0.7; font-weight: 500; margin-left: 2px; }

/* ==========================================================================
   WIDER TABLE (tbl) — Top Retailers / Top Products on dashboard
   ========================================================================== */
html[data-app-scope] .tbl { width: 100%; border-collapse: collapse; }
html[data-app-scope] .tbl th,
html[data-app-scope] .tbl td {
  padding: 10px 16px; text-align: left;
  font-size: 12.5px;
  border-bottom: 1px solid var(--card-border);
  color: var(--fg);
}
html[data-app-scope] .tbl th {
  background: var(--input-bg);
  color: var(--fg-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 10.5px; font-weight: 700;
}
html[data-app-scope] .tbl td.num,
html[data-app-scope] .tbl th.num { text-align: right; }
html[data-app-scope] .tbl tr:last-child td { border-bottom: none; }
html[data-app-scope] .tbl tr:hover td { background: var(--tbl-row-hover); }
html[data-app-scope] .tbl .name { font-weight: 500; color: var(--fg-strong); }
html[data-app-scope] .tbl .sku-link {
  color: var(--pm-sky-400); font-family: var(--pm-font-mono);
  font-size: 12px; font-weight: 600; text-decoration: none;
}
html[data-app-scope] .tbl .sku-link:hover { text-decoration: underline; }
html[data-app-scope] .tbl .ext { color: var(--pm-sky-400); margin-left: 2px; opacity: 0.65; }

/* ==========================================================================
   TOPBAR COMPONENTS — workspace label, theme toggle, icon buttons
   ========================================================================== */

/* Workspace label — dropdown trigger */
.pm-ws-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  height: 34px;
  border-radius: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--pm-font-ui);
  flex-shrink: 0;
}
.pm-ws-label:hover {
  border-color: var(--card-border-2);
  background: var(--card-bg);
}
.pm-ws-label strong {
  font-weight: 600;
  color: var(--fg-strong);
}

/* Theme toggle button */
.pm-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  height: 34px;
  border-radius: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
  font-family: var(--pm-font-ui);
  flex-shrink: 0;
}
.pm-theme-toggle:hover {
  border-color: var(--card-border-2);
  background: var(--card-bg);
}

/* Generic topbar icon button */
.pm-nav-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  cursor: pointer;
  transition: background 200ms ease;
  flex-shrink: 0;
}
.pm-nav-ic:hover {
  background: var(--card-bg);
  border-color: var(--card-border-2);
}

/* ==========================================================================
   WORKSPACE DROPDOWN MENU
   ========================================================================== */
.pm-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--card-border-2);
  border-radius: 12px;
  box-shadow: 0 8px 30px -4px rgba(0,0,0,0.35);
  overflow: hidden;
  z-index: 200;
}

.pm-dropdown-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--card-border);
}
.pm-dropdown-ws-name {
  font-family: var(--pm-font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-dropdown-ws-type {
  font-size: 10.5px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 1px;
}

.pm-dropdown-section-label {
  font-size: 10.5px;
  color: var(--fg-subtle);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 14px 4px;
}

.pm-dropdown-divider {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: 4px 0;
}

.pm-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  transition: background 150ms ease;
  cursor: pointer;
  font-family: var(--pm-font-ui);
}
.pm-dropdown-item:hover {
  background: var(--tbl-row-hover);
  color: var(--fg-strong);
}
.pm-dropdown-item svg {
  color: var(--fg-subtle);
  flex-shrink: 0;
}

.pm-dropdown-item--ws {
  gap: 8px;
}
.pm-dropdown-ws-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

.pm-dropdown-item--danger {
  color: var(--fg-mute);
}
.pm-dropdown-item--danger:hover {
  color: #fb7185;
}
.pm-dropdown-item--danger svg {
  color: inherit;
}