/**
 * Light theme fixes loaded after page content so they win over inline <style> blocks
 * that assume dark backgrounds (summary grids, dashboard metrics, stat cards, etc.).
 */
:root[data-theme="light"] .dashboard-wrapper {
  color: #1f2133;
}

/* Dashboard metrics & stats grid */
:root[data-theme="light"] .metric-box,
:root[data-theme="light"] .stat-box,
:root[data-theme="light"] .transaction-row,
:root[data-theme="light"] .reminder-item,
:root[data-theme="light"] .product-row {
  background: #ffffff !important;
  border-color: rgba(17, 19, 34, 0.12) !important;
}

:root[data-theme="light"] .metric-box:hover,
:root[data-theme="light"] .transaction-row:hover,
:root[data-theme="light"] .reminder-item:hover {
  background: #ffffff !important;
  border-color: rgba(17, 19, 34, 0.18) !important;
}

:root[data-theme="light"] .metric-box.highlight {
  background: linear-gradient(135deg, rgba(245, 0, 135, 0.08), rgba(245, 0, 135, 0.04)) !important;
  border-color: rgba(136, 14, 79, 0.2) !important;
}

:root[data-theme="light"] .metric-icon-box {
  background: rgba(245, 0, 135, 0.08) !important;
  color: var(--pink-700) !important;
}

:root[data-theme="light"] .metric-box.highlight .metric-icon-box {
  background: rgba(245, 0, 135, 0.15) !important;
}

:root[data-theme="light"] .metric-label-text,
:root[data-theme="light"] .stat-label {
  color: #6c708d !important;
}

:root[data-theme="light"] .metric-value-text,
:root[data-theme="light"] .stat-value,
:root[data-theme="light"] .transaction-id,
:root[data-theme="light"] .transaction-amount,
:root[data-theme="light"] .product-name,
:root[data-theme="light"] .reminder-title-text {
  color: #1f2133 !important;
}

:root[data-theme="light"] .metric-info-text,
:root[data-theme="light"] .transaction-details,
:root[data-theme="light"] .product-quantity,
:root[data-theme="light"] .reminder-description-text,
:root[data-theme="light"] .reminder-footer-text {
  color: #7a7f9a !important;
}

:root[data-theme="light"] .separator {
  color: #9da3c0 !important;
}

:root[data-theme="light"] .panel {
  background: #ffffff !important;
  border-color: rgba(17, 19, 34, 0.12) !important;
}

:root[data-theme="light"] .panel-header {
  border-bottom-color: rgba(17, 19, 34, 0.08) !important;
}

:root[data-theme="light"] .panel-title {
  color: #1f2133 !important;
}

:root[data-theme="light"] .panel-subtitle {
  color: #6c708d !important;
}

:root[data-theme="light"] .panel-link {
  color: var(--pink-700) !important;
}

:root[data-theme="light"] .panel-link:hover {
  color: var(--pink-900) !important;
}

:root[data-theme="light"] .chart-controls {
  background: rgba(17, 19, 34, 0.06) !important;
}

:root[data-theme="light"] .control-btn {
  color: #6c708d !important;
}

:root[data-theme="light"] .control-btn:hover:not(.active) {
  background: rgba(17, 19, 34, 0.08) !important;
  color: #1f2133 !important;
}

:root[data-theme="light"] .control-btn.active {
  background: var(--pink-700, #c2185b) !important;
  color: #ffffff !important;
}

:root[data-theme="light"] .empty-chart,
:root[data-theme="light"] .dashboard-wrapper .empty-state {
  color: #9da3c0 !important;
}

:root[data-theme="light"] .reminder-tag {
  background: rgba(17, 19, 34, 0.06) !important;
  color: #6c708d !important;
}

/* List page summary grids (invoices, inventory, payments, etc.) */
:root[data-theme="light"] .summary-card {
  background: #ffffff !important;
  border-color: rgba(17, 19, 34, 0.12) !important;
  box-shadow: 0 4px 20px rgba(17, 19, 34, 0.08), 0 0 0 1px rgba(245, 0, 135, 0.06) !important;
  color: #1f2133 !important;
}

:root[data-theme="light"] .summary-card:hover {
  border-color: rgba(136, 14, 79, 0.2) !important;
  box-shadow: 0 8px 32px rgba(17, 19, 34, 0.12), 0 0 0 1px rgba(245, 0, 135, 0.12) !important;
}

:root[data-theme="light"] .summary-card--warning {
  border-color: rgba(245, 158, 11, 0.35) !important;
  background: linear-gradient(135deg, #fffbeb, #ffffff) !important;
}

:root[data-theme="light"] .summary-label {
  color: #6c708d !important;
}

:root[data-theme="light"] .summary-value {
  color: #1f2133 !important;
}

:root[data-theme="light"] .summary-value--paid {
  color: #059669 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .summary-value--unpaid {
  color: #dc2626 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .summary-value--warning {
  color: #d97706 !important;
  text-shadow: none !important;
}

/* Stats grids on returns / debit notes pages */
:root[data-theme="light"] .stats-grid .stat-card,
:root[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(17, 19, 34, 0.12) !important;
  box-shadow: 0 4px 20px rgba(17, 19, 34, 0.08) !important;
  color: #1f2133 !important;
}

:root[data-theme="light"] .stat-card .stat-label {
  color: #6c708d !important;
}

:root[data-theme="light"] .stat-card .stat-value {
  color: #1f2133 !important;
}

:root[data-theme="light"] .stat-grid article {
  background: #ffffff !important;
  border-color: rgba(17, 19, 34, 0.12) !important;
}

:root[data-theme="light"] .stat-grid strong {
  color: #1f2133 !important;
}

/* Product import summary grid */
:root[data-theme="light"] .import-summary-card {
  background: #ffffff !important;
  border-color: rgba(17, 19, 34, 0.12) !important;
}

:root[data-theme="light"] .import-summary-card span {
  color: #6c708d !important;
}

:root[data-theme="light"] .import-summary-card strong {
  color: #1f2133 !important;
}

/* POS product grid */
:root[data-theme="light"] .product-card {
  background: #ffffff !important;
  border: 1px solid rgba(17, 19, 34, 0.1) !important;
  color: #1f2133 !important;
  box-shadow: 0 2px 8px rgba(17, 19, 34, 0.06) !important;
}

:root[data-theme="light"] .product-card:hover,
:root[data-theme="light"] .product-card:focus-visible {
  background: rgba(245, 0, 135, 0.06) !important;
  border-color: rgba(245, 0, 135, 0.25) !important;
}

:root[data-theme="light"] .product-card .sku {
  color: #7a7f9a !important;
}
