@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: 'Poppins', sans-serif;
  background: #f1f1f1;
  color: #17281e;
  font-size: 14px;
}

/* Layout */
.layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: 200px;
  background: #17281e;
  padding: 24px 0 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: width 0.25s ease, padding 0.25s ease;
  overflow: hidden;
  height: 100%;
  flex-shrink: 0;
}

/* Scrollable nav links area */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

body.nav-collapsed .sidebar {
  width: 0;
  padding: 0;
}

/* Nav section headers */
.nav-section {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #8aaa8a;
  padding: 14px 20px 4px; white-space: nowrap;
}

/* Sidebar toggle button — fixed tab on the right edge of the sidebar */
.sidebar-toggle {
  position: fixed; top: 50%; left: 200px;
  transform: translateY(-50%);
  width: 14px; height: 44px;
  background: #17281e; border: none; cursor: pointer;
  border-radius: 0 6px 6px 0;
  color: #8aa88e; font-size: 9px; padding: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  transition: left 0.25s ease, background 0.15s;
}
.sidebar-toggle:hover { background: #243b2a; color: #fff; }
body.nav-collapsed .sidebar-toggle { left: 0; }

.sidebar-title {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 0 20px 20px;
  border-bottom: 1px solid #243b2a;
  margin-bottom: 8px;
  position: relative;
  display: flex;
  justify-content: center;
}

.ghost-peek {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(calc(-50% - 35px));
  width: 78px;
  height: 78px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 10;
}

body.dark .ghost-peek {
  opacity: 1 !important;
}

body.nav-collapsed .ghost-peek {
  opacity: 0 !important;
}

.nav-link {
  display: block;
  padding: 10px 20px;
  color: #e8e8e8;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}

.nav-link:hover { color: #fff; background: #243b2a; }
.nav-link.active { color: #fff; border-left-color: #649638; background: #243b2a; }
.nav-beta-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f59e0b;
  border: 1px solid #f59e0b44;
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: .85;
}
body.dark .nav-beta-badge { color: #fbbf24; border-color: #fbbf2444; }

.nav-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px 16px;
  flex-shrink: 0;
}
.nav-bottom-spacer { display: none; }
.nav-bottom-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  border: none;
  background: none;
  color: #e8e8e8;
  text-decoration: none;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}
.nav-bottom-item:hover { background: #243b2a; color: #fff; }
.nav-bottom-icon { font-size: 14px; line-height: 1; flex-shrink: 0; width: 18px; text-align: center; }
.nav-bottom-label { font-size: 12px; font-weight: 500; }
body.dark .nav-bottom-item:hover { background: #1e3324; }

.nav-help { display: none; }

/* Content */
.content {
  flex: 1;
  padding: 32px 40px;
  min-width: 0;
  overflow-y: auto;
  overflow-x: auto;
  height: 100%;
}

h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }

.subtitle { color: #666; margin-bottom: 32px; }

/* Home cards */
.card-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.card {
  display: block;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  width: 220px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: #649638; }

.card-icon { font-size: 28px; margin-bottom: 12px; }
.card-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.card-desc { color: #666; font-size: 13px; line-height: 1.5; }

.card-section {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  margin-top: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e8e8e8;
}

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0 16px;
  flex-wrap: wrap;
}

.search-input {
  border: 1px solid #d0d0d8;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  width: 260px;
  outline: none;
  transition: border-color 0.15s;
}

.search-input:focus { border-color: #649638; }

.filter-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.filter-group input[type="radio"] { display: none; }

.filter-group label {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1.5px solid #d0d0d8;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #555;
  background: #fff;
  transition: all 0.15s;
  user-select: none;
}

.filter-group label:hover { border-color: #649638; color: #649638; }

.filter-group label:has(input:checked) {
  background: #649638;
  border-color: #649638;
  color: #fff;
  font-weight: 600;
}

/* Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.data-table th {
  background: #f5f5f5;
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #e0e0e0;
  font-size: 13px;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #f9f9f9; }

.row-inactive td { color: #aaa; }

.mono { font-family: monospace; font-size: 12px; color: #555; }

.editable-cell { cursor: pointer; }
.editable-cell:hover { background: #eef4e8; }

.cell-input {
  width: 100%;
  border: 1px solid #649638;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

/* Detail modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.modal-meta  { font-size: 13px; color: #666; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #888;
  padding: 4px 8px;
  border-radius: 4px;
}
.modal-close:hover { background: #f0f0f0; color: #333; }

.metric-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.metric-tab {
  border: 1px solid #d0d0d8;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  background: #fff;
  cursor: pointer;
  color: #555;
  transition: all 0.15s;
}
.metric-tab:hover  { border-color: #649638; color: #649638; }
.metric-tab.active { background: #649638; border-color: #649638; color: #fff; font-weight: 600; }

.modal-chart-wrap { height: 220px; }

.clickable-row { cursor: pointer; }
.clickable-row:hover { background: #eef4e8 !important; }

/* Range buttons */
.range-btn {
  border: 1px solid #d0d0d8;
  border-radius: 6px;
  padding: 7px 13px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  color: #444;
  transition: all 0.15s;
}
.range-btn:hover  { border-color: #649638; color: #649638; }
.range-btn.active { background: #649638; border-color: #649638; color: #fff; font-weight: 600; }

/* Resolved date range label shown next to preset buttons */
.date-range-label { font-size: 12px; color: #999; white-space: nowrap; align-self: center; }
body.dark .date-range-label { color: #666; }

/* Data availability cell */
.avail-cell { font-size: 12px; color: #888; white-space: nowrap; }

/* Searchable profile picker */
.profile-picker { position: relative; }

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d0d0d8;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
}

.profile-dropdown.open { display: block; }

.picker-item {
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.picker-item:hover { background: #eef4e8; }
.picker-item.selected { background: #dff0cc; font-weight: 600; }

.picker-country {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #6b7280;
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}

.picker-active-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.picker-inactive { color: #aaa; }
.picker-inactive:hover { background: #f9f9f9; }

.picker-inactive-tag {
  font-size: 10px;
  font-weight: 600;
  color: #bbb;
  background: #f1f1f1;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  letter-spacing: 0.03em;
}

/* Summary bar */
.summary-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.summary-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 100px;
}

.summary-item span { font-size: 18px; font-weight: 700; color: #17281e; }
.summary-item small { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }

/* Num alignment */
.num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* Sortable headers */
.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable:hover { background: #eef4e8; }
.sortable::after { content: " ↕"; color: #999; font-size: 11px; }
.sortable.sort-asc::after  { content: " ↑"; color: #649638; }
.sortable.sort-desc::after { content: " ↓"; color: #649638; }

/* Truncated cells */
.cell-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Campaign type badges */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.badge-sp { background: #dff0cc; color: #3d5c22; }
.badge-sb { background: #fef3c7; color: #b45309; }
.badge-sd { background: #d1fae5; color: #065f46; }

.loading { text-align: center; color: #888; padding: 32px !important; }
.error { text-align: center; color: #d9534f; padding: 32px !important; }

/* Status message */
.status-msg {
  min-height: 22px;
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}

.status-msg.success { color: #2e7d32; }
.status-msg.error { color: #d9534f; }

/* Responsive */
@media (max-width: 900px) {
  .sidebar { width: 160px; }
  .content { padding: 20px; }
  .data-table th,
  .data-table td { padding: 8px 10px; font-size: 12px; }
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle input:checked + .slider { background: #649638; }
.toggle input:checked + .slider::before { transform: translateX(18px); }

/* Backfill bar */
.backfill-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
}

.backfill-label { font-size: 13px; color: #555; white-space: nowrap; }

.bf-status { font-size: 13px; color: #888; }
.bf-status.success { color: #2e7d32; }
.bf-status.error   { color: #d9534f; }

/* Recommendations page */
.badge-theme-convert    { background: #d1fae5; color: #065f46; }
.badge-theme-similar    { background: #dff0cc; color: #3d5c22; }
.badge-theme-complement { background: #ede9fe; color: #6d28d9; }
.badge-theme-low        { background: #fef3c7; color: #b45309; }
.badge-theme-other      { background: #f1f5f9; color: #475569; }

.asin-ext-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 3px; }
.asin-ext-link:hover code { text-decoration: underline; }
.ext-icon { font-size: 11px; color: #649638; }

.btn-accept {
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid #d0d0d8;
  border-radius: 5px;
  background: #fff;
  color: #aaa;
  cursor: not-allowed;
}

.btn-accept-all {
  border: 1px solid #d0d0d8;
  border-radius: 6px;
  padding: 7px 13px;
  font-size: 13px;
  background: #fff;
  color: #aaa;
  cursor: not-allowed;
}

/* Product cell: thumbnail + short title + ASIN code */
.product-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
}

.product-thumb {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
  background: #f1f1f1;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.product-title {
  font-size: 11px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 155px;
}

/* Reports page */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.kpi-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi-value {
  font-size: 17px;
  font-weight: 700;
  color: #17281e;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: break-word;
}

.kpi-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: 1.5px solid #d0d0d8;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #555;
  transition: all 0.15s;
}

.profile-chip:hover    { border-color: #649638; color: #649638; }
.profile-chip.selected { background: #649638; border-color: #649638; color: #fff; }

/* ── Account grid (big selector) ─────────────────────────────────────────── */
.account-grid-panel {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.account-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.account-grid-header-left { display: flex; align-items: center; gap: 10px; }
.account-grid-header span { font-weight: 700; font-size: 14px; }
.account-grid-actions { display: flex; gap: 6px; }
.ag-group { margin-bottom: 14px; }
.ag-group:last-child { margin-bottom: 0; }
.ag-group-name {
  font-size: 11px; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 7px;
}
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip-flag { font-size: 14px; }
.ag-chip-cc   { font-size: 13px; }
.ag-chip-cur  { font-size: 10px; opacity: 0.65; }
.ag-status-badge { font-size: 10px; margin-left: 2px; }
.ag-toggle-btn {
  padding: 4px 10px; font-size: 11px; color: #888;
  background: none; border: 1px solid #d0d0d8;
  border-radius: 5px; cursor: pointer;
}
.ag-toggle-btn:hover { color: #555; border-color: #999; }

/* ── Dark mode ────────────────────────────────────────────────────────────── */
/* Page-specific component overrides */

/* Setup page */
body.dark .setup-section { background: #242424; border-color: #2e2e2e; }
body.dark .setup-section h2 { color: #d8d8d8; }
body.dark .setup-section .section-desc { color: #aaa; }
body.dark .setup-toolbar select { background: #242424; border-color: #3a3a3a; color: #ccc; }
body.dark .action-btn { background: #242424; border-color: #3a3a3a; color: #ccc; }
body.dark .action-btn:hover { background: #2e2e2e; }
body.dark .action-btn.primary { background: #17281e; color: #b5d68a; border-color: #17281e; }
body.dark .action-btn.primary:hover { background: #243b2a; }
body.dark .setup-table th { color: #aaa; border-color: #2e2e2e; }
body.dark .setup-table td { border-color: #2a2a2a; }
body.dark .setup-table tr:hover td { background: #2c2c2c; }
body.dark .asin-thumb-ph { background: #2a2a2a; color: #888; }
body.dark .cat-input { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .scraped-badge.done { background: #1e3a1e; color: #7ac44a; }
body.dark .scraped-badge.pending { background: #2a2a2a; color: #aaa; }
body.dark .scraped-badge.loading { background: #2a2a1a; color: #c4a420; }
body.dark .scrape-row-btn { background: #242424; border-color: #3a3a3a; color: #bbb; }
body.dark .scrape-row-btn:hover { background: #2e2e2e; }
body.dark .asin-brand-sm { color: #999; }

/* Client settings page */
body.dark .settings-card { background: #242424; border-color: #2e2e2e; }
body.dark .settings-card h3 { border-color: #2e2e2e; }
body.dark .field-row label { color: #ccc; }
body.dark .field-row label small { color: #aaa; }
body.dark .field-row input[type="number"],
body.dark .field-row input[type="text"],
body.dark .field-row select { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .save-bar { border-color: #2e2e2e; }
body.dark #save-status { color: #bbb; }
body.dark .no-profile-msg { color: #999; }

/* Clusters page */
body.dark .group-card { background: #242424; border-color: #2e2e2e; }
body.dark .group-card.is-expanded { border-color: #649638; }
body.dark .group-header { background: #1e1e1e; }
body.dark .group-card.is-expanded .group-header { background: #1e2e1e; }
body.dark .group-name { color: #d8d8d8; }
body.dark .group-name-input { background: #1a1a1a; color: #d8d8d8; }
body.dark .group-meta { color: #999; }
body.dark .group-chevron { color: #888; }
body.dark .icon-btn { background: #242424; border-color: #3a3a3a; color: #ccc; }
body.dark .icon-btn:hover { background: #2e2e2e; }
body.dark .icon-btn.danger:hover { background: #2a1a1a; }
body.dark .group-body { border-color: #2e2e2e; }
body.dark .defaults-toggle label { color: #ccc; }
body.dark .defaults-badge { background: #1e2e1e; color: #7ac44a; }
body.dark .ag-field-row label { color: #ccc; }
body.dark .ag-field-row label small { color: #999; }
body.dark .ag-field-row input[type="number"],
body.dark .ag-field-row select { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .save-status { color: #aaa; }
body.dark .campaign-tag { background: #1e2e1e; border-color: #2e4e1e; color: #7ac44a; }
body.dark .no-campaigns-msg { color: #999; }
body.dark .add-campaigns-btn { background: #1e1e1e; border-color: #3a3a3a; color: #bbb; }
body.dark .add-campaigns-btn:hover { background: #242424; border-color: #649638; color: #b5d68a; }
body.dark .empty-state { color: #888; }
body.dark .empty-state strong { color: #999; }

/* Clusters — campaign picker modal (the "invisible" second block) */
body.dark .picker-modal { background: #242424; }
body.dark .picker-header { border-color: #2e2e2e; }
body.dark .picker-header h3 { color: #d8d8d8; }
body.dark .picker-close { color: #aaa; }
body.dark .picker-search { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .picker-chip { background: #1e1e1e; border-color: #3a3a3a; color: #bbb; }
body.dark .picker-campaign-row { color: #ccc; }
body.dark .picker-campaign-row:hover { background: #2c2c2c; }
body.dark .picker-campaign-row .camp-name { color: #ccc; }

/* Admin users page */
body.dark .users-table th { background: #17281e; }
body.dark .users-table td { border-color: #2a2a2a; color: #ccc; }
body.dark .users-table tr:hover td { background: #2c2c2c; }
body.dark .btn-sm { background: #242424; border-color: #3a3a3a; color: #ccc; }
body.dark .modal { background: #242424; color: #d8d8d8; }
body.dark .modal h2 { color: #d8d8d8; }
body.dark .form-group label { color: #ccc; }
body.dark .form-group input,
body.dark .form-group select { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .profiles-grid-wrap { border-color: #3a3a3a; }
body.dark .profiles-grid-wrap .ag-group-name { color: #bbb; }
body.dark .profiles-grid-wrap .profile-chip { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .profiles-grid-wrap .profile-chip:hover { background: #2a3a22; border-color: #649638; }
body.dark .profiles-grid-wrap .profile-chip.selected { background: #649638; color: #fff; border-color: #649638; }
body.dark .btn-modal-cancel { background: #242424; border-color: #3a3a3a; color: #ccc; }
body.dark .modal-overlay { background: rgba(0,0,0,.7); }

/* Debug page */
body.dark .debug-card { background: #242424; border-color: #2e2e2e; }
body.dark .sync-status { color: #bbb; }
body.dark .log-controls label { color: #bbb; }
body.dark #log-count { color: #888; }

/* Feedback modal */
.fb-type-chip {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: 20px;
  border: 1.5px solid #d0d0d8; font-size: 12px; font-weight: 500;
  cursor: pointer; color: #555; background: #fff; transition: all .15s;
  user-select: none;
}
.fb-type-chip:hover { border-color: #649638; color: #649638; }
.fb-type-chip-active { background: #649638; border-color: #649638; color: #fff; font-weight: 600; }

body.dark .fb-type-chip { background: #1e1e1e; border-color: #3a3a3a; color: #bbb; }
body.dark .fb-type-chip:hover { border-color: #649638; color: #b5d68a; }
body.dark .fb-type-chip-active { background: #649638; border-color: #649638; color: #fff; }
body.dark #feedback-modal textarea { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }

/* Analyser fast mode toggle */
body.dark .mode-toggle { background: #1e1e1e; border-color: #2e2e2e; }
body.dark .mode-toggle label { color: #ccc; }
body.dark .mode-fast-active { background: #17281e; border-color: #649638; }
body.dark .mode-fast-active label { color: #b5d68a; }

/* Products page inline fast mode label */
.fast-mode-label { color: #444; }
body.dark .fast-mode-label { color: #aaa; }
body.dark {
  background: #1a1a1a;
  color: #d8d8d8;
}

body.dark h1 { color: #e8e8e8; }
body.dark .subtitle { color: #bbb; }
body.dark .card-section { color: #aaa; border-color: #2e2e2e; }

/* Cards */
body.dark .card { background: #242424; border-color: #2e2e2e; color: #d8d8d8; }
body.dark .card:hover { border-color: #649638; }
body.dark .card-desc { color: #bbb; }

/* Tables */
body.dark .data-table { background: #242424; border-color: #2e2e2e; }
body.dark .data-table th { background: #1e1e1e; color: #bbb; border-color: #2e2e2e; }
body.dark .data-table td { color: #ccc; border-color: #2a2a2a; }
body.dark .data-table tbody tr:hover { background: #2c2c2c; }
body.dark .row-inactive td { color: #888; }
body.dark .clickable-row:hover { background: #2c3c2a !important; }
body.dark .editable-cell:hover { background: #2c3c2a; }
body.dark .sortable:hover { background: #2c2c2c; }

/* Inputs & buttons */
body.dark .search-input { background: #242424; border-color: #3a3a3a; color: #d8d8d8; }
body.dark .search-input::placeholder { color: #888; }
body.dark .range-btn { background: #242424; border-color: #3a3a3a; color: #bbb; }
body.dark .range-btn:hover { border-color: #649638; color: #649638; }
body.dark .filter-group label { background: #242424; border-color: #3a3a3a; color: #bbb; }
body.dark .cell-input { background: #1a1a1a; color: #d8d8d8; }

/* Dropdowns */
body.dark .profile-dropdown { background: #242424; border-color: #3a3a3a; }
body.dark .picker-item { color: #ccc; }
body.dark .picker-item:hover { background: #2c3c2a; }
body.dark .picker-item.selected { background: #2c3c2a; }
body.dark .picker-inactive { color: #888; }
body.dark .picker-inactive:hover { background: #242424; }
body.dark .picker-inactive-tag { background: #2a2a2a; color: #888; }

/* Profile chips */
body.dark .profile-chip { background: #242424; border-color: #3a3a3a; color: #bbb; }
body.dark .profile-chip:hover { border-color: #649638; color: #649638; }
body.dark .profile-chip.selected { background: #649638; border-color: #649638; color: #fff; }

/* Summary / KPI */
body.dark .summary-item { background: #242424; border-color: #2e2e2e; }
body.dark .summary-item span { color: #e0e0e0; }
body.dark .summary-item small { color: #aaa; }
body.dark .kpi-card { background: #242424; border-color: #2e2e2e; }
body.dark .kpi-value { color: #e0e0e0; }
body.dark .kpi-label { color: #aaa; }

/* Modal */
body.dark .modal-box { background: #242424; color: #d8d8d8; }
body.dark .modal-meta { color: #bbb; }
body.dark .modal-close { color: #aaa; }
body.dark .modal-close:hover { background: #2e2e2e; color: #ccc; }
body.dark .metric-tab { background: #242424; border-color: #3a3a3a; color: #bbb; }
body.dark .metric-tab:hover { border-color: #649638; color: #649638; }

/* Toolbar / backfill */
body.dark .backfill-bar { background: #1e1e1e; border-color: #2e2e2e; }
body.dark .backfill-label { color: #bbb; }

/* Account grid */
body.dark .account-grid-panel { background: #242424; border-color: #2e2e2e; }
body.dark .ag-group-name { color: #999; }
body.dark .ag-toggle-btn { color: #aaa; border-color: #3a3a3a; }
body.dark .ag-toggle-btn:hover { color: #aaa; border-color: #555; }

/* Misc */
body.dark .mono { color: #bbb; }
body.dark .avail-cell { color: #999; }
body.dark .status-msg { color: #aaa; }

/* Optimization page */
body.dark .col-bid,
body.dark .col-new-bid,
body.dark .col-state,
body.dark .col-cluster,
body.dark .col-target { background: #1e1e1e; }
body.dark .opt-table tbody tr:hover td { background: #2c3428; }
body.dark .opt-table tbody tr:hover .col-bid,
body.dark .opt-table tbody tr:hover .col-new-bid,
body.dark .opt-table tbody tr:hover .col-state,
body.dark .opt-table tbody tr:hover .col-cluster,
body.dark .opt-table tbody tr:hover .col-target { background: #2a3a22; }
body.dark .bid-input { background: #1a1a1a; border-color: #3a3a3a; color: #d8d8d8; }
body.dark .cluster-select { background: #1a1a1a; border-color: #3a3a3a; color: #ccc; }
body.dark .cluster-select.unassigned { background: #1a1a1a; border-color: #2e2e2e; color: #999; }

/* ── Modal (feedback + generic overlays) ─────────────────────────────── */
.modal {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
.modal h2 { font-size: 16px; font-weight: 700; color: #17281e; margin-bottom: 18px; }

/* ── Form groups (modals) ─────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 600;
  color: #555; margin-bottom: 5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid #ddd; border-radius: 5px;
  font-size: 13px; font-family: inherit;
  outline: none; transition: border-color .15s;
  background: #fff; color: #333;
}
.form-group textarea { resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #649638; }

/* ── Modal footer / buttons ──────────────────────────────────────────── */
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-modal-save {
  padding: 8px 20px; background: #649638; color: #fff;
  border: none; border-radius: 5px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.btn-modal-save:hover { background: #7ab845; }
.btn-modal-cancel {
  padding: 8px 20px; background: #fff; color: #555;
  border: 1px solid #ccc; border-radius: 5px; font-size: 13px;
  cursor: pointer; transition: background .15s;
}
.btn-modal-cancel:hover { background: #f5f5f5; }

/* ── Dark mode: range-btn active (fixes invisible selected state) ─────── */
body.dark .range-btn.active { background: #649638; border-color: #649638; color: #fff; }
body.dark .filter-group label:has(input:checked) { background: #649638; border-color: #649638; color: #fff; }

/* ── Dark mode: modal form elements ─────────────────────────────────── */
body.dark .modal h2 { color: #e0e0e0; }
body.dark .form-group textarea { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .btn-modal-cancel { background: #1e1e1e; border-color: #3a3a3a; color: #ccc; }
body.dark .btn-modal-cancel:hover { background: #2a2a2a; }

/* ── Dark mode: optimization table borders + bid-changed ─────────────── */
body.dark .opt-wrap { border-color: #2e2e2e; }
body.dark .opt-table th,
body.dark .opt-table td { border-bottom-color: #2a2a2a; border-right-color: #2a2a2a; }
body.dark .bid-input.bid-changed { border-color: #f59e0b; background: #2a1e08; color: #fcd34d; }

/* ── Dark mode: reports delta colors ─────────────────────────────────── */
body.dark .delta-pos { color: #4ade80; }
body.dark .delta-neg { color: #f87171; }

/* ── Key Insights shared card styles ─────────────────────────────────── */
.ki-grid        { display:flex; flex-wrap:wrap; gap:16px; }
.ki-card        { flex:0 0 340px; background:#fff; border:1px solid #d0e8c8; border-radius:10px; padding:16px 18px; display:flex; flex-direction:column; gap:0; min-width:300px; max-width:400px; }
.ki-card-header { display:flex; align-items:center; gap:6px; margin-bottom:2px; min-width:0; }
.ki-card-flag   { font-size:18px; line-height:1; flex-shrink:0; }
.ki-card-name   { font-size:14px; font-weight:700; color:#17281e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ki-card-sub    { font-size:11px; color:#5a7a5a; margin-bottom:10px; }
.ki-divider     { border:none; border-top:1px solid #d8edd0; margin:6px 0; }
.ki-row         { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; color:#3a5a3a; }
.ki-row-icon    { font-size:14px; flex-shrink:0; width:18px; text-align:center; }
.ki-row-label   { flex:1; }
.ki-row a       { color:#527a2d; text-decoration:none; }
.ki-row a:hover { text-decoration:underline; }
.ki-badge       { font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px; }
.ki-badge-red   { background:#fce8e8; color:#b00000; border:1px solid #f5c6c6; }
.ki-badge-amber { background:#fff8e1; color:#7a5c00; border:1px solid #ffe066; }
.ki-badge-green { background:#e8f5e9; color:#1a5c2a; border:1px solid #a5d6a7; }
.ki-badge-blue  { background:#e3f2fd; color:#1565c0; border:1px solid #90caf9; }
.ki-expand-btn  { font-size:11px; color:#527a2d; background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; }
.ki-detail      { display:none; padding:4px 0 4px 26px; }
.ki-detail.open { display:block; }
.ki-detail-row  { font-size:11px; color:#5a7a5a; padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ki-headline    { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin-bottom:10px; }
.ki-hl-item     { display:flex; flex-direction:column; gap:1px; }
.ki-hl-label    { font-size:10px; color:#5a7a5a; text-transform:uppercase; letter-spacing:.04em; }
.ki-hl-value    { font-size:15px; font-weight:700; color:#17281e; }
.ki-hl-value.acos-ok   { color:#2e7d32; }
.ki-hl-value.acos-warn { color:#b45309; }
.ki-hl-value.acos-bad  { color:#c00000; }
.ki-coverage-bar  { height:4px; border-radius:2px; background:#d0e8c8; margin-top:3px; }
.ki-coverage-fill { height:100%; border-radius:2px; background:#4caf50; transition:width .3s; }
.ki-opt-row     { font-size:12px; color:#5a7a5a; padding:4px 0 8px; }
body.dark .ki-card        { background:#1a2e1a; border-color:#2d4030; }
body.dark .ki-card-name   { color:#e8ede8; }
body.dark .ki-card-sub    { color:#8aaa8a; }
body.dark .ki-divider     { border-color:#263826; }
body.dark .ki-row         { color:#a8b8a8; }
body.dark .ki-row a       { color:#649638; }
body.dark .ki-badge-red   { background:#3a1010; color:#ff6b6b; border-color:#5a2020; }
body.dark .ki-badge-amber { background:#3a2a10; color:#ffc66d; border-color:#5a4020; }
body.dark .ki-badge-green { background:#0a2a1a; color:#5ad68a; border-color:#105a3a; }
body.dark .ki-badge-blue  { background:#10203a; color:#6ab4f0; border-color:#203a5a; }
body.dark .ki-expand-btn  { color:#649638; }
body.dark .ki-detail-row  { color:#8a9e8a; }
body.dark .ki-hl-label    { color:#6a8a6a; }
body.dark .ki-hl-value    { color:#e8ede8; }
body.dark .ki-hl-value.acos-ok   { color:#5ad68a; }
body.dark .ki-hl-value.acos-warn { color:#ffc66d; }
body.dark .ki-hl-value.acos-bad  { color:#ff6b6b; }
body.dark .ki-coverage-bar  { background:#2d4030; }
body.dark .ki-coverage-fill { background:#5ad68a; }
body.dark .ki-opt-row     { color:#8aaa8a; }

/* Lift hardcoded inline muted colors in dark mode */
body.dark [style*="color:#888"],
body.dark [style*="color: #888"] { color: #bbb !important; }
body.dark [style*="color:#aaa"],
body.dark [style*="color: #aaa"] { color: #bbb !important; }