/**
 * PH2 night mode redesign — companion to index-Bq-RjG4C.js
 * Soft slate surfaces, brand blue accent, clearer hierarchy (no purple glow).
 */

/* ── tokens ─────────────────────────────────────────────── */
html[data-theme='dark'] {
  --ph2-ink: #e9edf7;
  --ph2-ink-muted: #a7b0c7;
  --ph2-ink-faint: #7d879e;
  --ph2-bg: #0e1219;
  --ph2-bg-elevated: #161b26;
  --ph2-surface: #1c2330;
  --ph2-surface-2: #242c3b;
  --ph2-surface-3: #2c3547;
  --ph2-line: #2f384c;
  --ph2-line-strong: #45506a;
  --ph2-accent: #5c74e0;
  --ph2-accent-soft: rgba(92, 116, 224, 0.16);
  --ph2-accent-strong: #7b8ff0;
  --ph2-success: #3dba74;
  --ph2-warning: #e6b035;
  --ph2-danger: #e35b52;
  --ph2-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);

  /* map onto app tokens used by Bq CSS */
  --main-background: var(--ph2-bg-elevated);
  --alternative-background: var(--ph2-bg);
  --primary-color: var(--ph2-accent);
  --darkest-variation: var(--ph2-ink);
  --secondary-text: var(--ph2-ink-muted);
  --descorative-borders: var(--ph2-line);
  --nondescorative-borders: var(--ph2-line-strong);
  --error: var(--ph2-danger);
  --success: var(--ph2-success);
  --warning: var(--ph2-warning);
  --shadow-1: var(--ph2-shadow);
  --white-10: rgba(255, 255, 255, 0.08);
  --body-text: var(--ph2-ink);
  --card-background: var(--ph2-surface);
  --muted-surface: var(--ph2-surface-2);
  --surface-muted: var(--ph2-surface-2);

  color-scheme: dark;
}

/* ── base ───────────────────────────────────────────────── */
html[data-theme='dark'] body {
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(92, 116, 224, 0.12), transparent 55%),
    radial-gradient(900px 420px at 0% 100%, rgba(61, 186, 116, 0.06), transparent 50%),
    var(--ph2-bg) !important;
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] #root,
html[data-theme='dark'] main {
  color: var(--ph2-ink);
}

html[data-theme='dark'] p,
html[data-theme='dark'] span,
html[data-theme='dark'] label,
html[data-theme='dark'] li,
html[data-theme='dark'] td,
html[data-theme='dark'] th,
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6 {
  color: inherit;
}

html[data-theme='dark'] a {
  color: var(--ph2-accent-strong);
}

html[data-theme='dark'] .primary-color {
  color: var(--ph2-accent-strong) !important;
}

html[data-theme='dark'] .secondary-color,
html[data-theme='dark'] .grey-txt {
  color: var(--ph2-ink-muted) !important;
}

html[data-theme='dark'] .descorative-color {
  color: var(--ph2-line-strong) !important;
}

html[data-theme='dark'] .descorative-bg {
  background-color: var(--ph2-accent-soft) !important;
  color: var(--ph2-accent-strong) !important;
}

html[data-theme='dark'] .alternative-bg {
  background-color: var(--ph2-surface-2) !important;
}

html[data-theme='dark'] .descorative-border,
html[data-theme='dark'] .nondescorative-border {
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] hr {
  border-color: var(--ph2-line) !important;
  opacity: 1;
}

/* ── shell: nav / sidebar ───────────────────────────────── */
html[data-theme='dark'] .side-nav {
  background: linear-gradient(180deg, #141925 0%, #10151e 100%) !important;
  color: var(--ph2-ink-muted) !important;
  border-color: var(--ph2-line) !important;
  box-shadow: inset -1px 0 0 var(--ph2-line);
}

html[data-theme='dark'] .side-nav .fw-bold.primary-color,
html[data-theme='dark'] .side-nav .fs-4 {
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .side-nav-tab {
  color: var(--ph2-ink-muted) !important;
  border-radius: 10px;
  margin-inline: 0.35rem;
}

html[data-theme='dark'] .side-nav-tab.active,
html[data-theme='dark'] .side-nav-tab:hover {
  background: var(--ph2-accent-soft) !important;
  color: var(--ph2-accent-strong) !important;
}

html[data-theme='dark'] .side-nav-tab.active[data-tab-color='red'],
html[data-theme='dark'] .side-nav-tab[data-tab-color='red']:hover {
  background: rgba(227, 91, 82, 0.16) !important;
  color: #ff8f88 !important;
}

html[data-theme='dark'] .nav-bar {
  background: rgba(22, 27, 38, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ph2-line) !important;
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .nav-bar-user {
  background: var(--ph2-surface-2) !important;
  color: var(--ph2-ink) !important;
  border: 1px solid var(--ph2-line);
}

html[data-theme='dark'] .nav-bar-noti {
  border-color: var(--ph2-line-strong) !important;
}

html[data-theme='dark'] .nav-bar-2 {
  background: linear-gradient(90deg, #2a3a8f, var(--ph2-accent)) !important;
  border-bottom-color: transparent !important;
}

/* ── cards / popups / login ─────────────────────────────── */
html[data-theme='dark'] .main-card,
html[data-theme='dark'] .popup-style,
html[data-theme='dark'] .login-card,
html[data-theme='dark'] .table-pagination-card {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border: 1px solid var(--ph2-line) !important;
  box-shadow: var(--ph2-shadow) !important;
}

html[data-theme='dark'] .login {
  background: transparent;
}

html[data-theme='dark'] .popup-overlay {
  background-color: rgba(6, 8, 14, 0.72) !important;
  backdrop-filter: blur(2px);
}

/* ── buttons ────────────────────────────────────────────── */
html[data-theme='dark'] .main-btn {
  box-shadow: none;
}

html[data-theme='dark'] .main-btn.primary-color-bg,
html[data-theme='dark'] button.main-btn:not(.bg-transparent):not(.descorative-bg) {
  filter: saturate(1.05);
}

html[data-theme='dark'] .btn-light,
html[data-theme='dark'] .btn-outline-secondary {
  background: var(--ph2-surface-2) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.7;
}

/* ── forms ──────────────────────────────────────────────── */
html[data-theme='dark'] .main-input,
html[data-theme='dark'] .main-input-wrapper,
html[data-theme='dark'] .main-select-wrapper,
html[data-theme='dark'] .input-style-1,
html[data-theme='dark'] .input-style-2,
html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select,
html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='range']),
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
  background-color: var(--ph2-surface-2) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .main-input:hover,
html[data-theme='dark'] .main-input-focus,
html[data-theme='dark'] .form-control:focus,
html[data-theme='dark'] .form-select:focus,
html[data-theme='dark'] input:focus,
html[data-theme='dark'] select:focus,
html[data-theme='dark'] textarea:focus {
  border-color: var(--ph2-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ph2-accent-soft) !important;
}

html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder,
html[data-theme='dark'] .main-input input::placeholder {
  color: var(--ph2-ink-faint) !important;
}

html[data-theme='dark'] .main-input:has(*:disabled),
html[data-theme='dark'] input:disabled,
html[data-theme='dark'] select:disabled,
html[data-theme='dark'] textarea:disabled {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--ph2-ink-faint) !important;
}

html[data-theme='dark'] .form-check-input {
  background-color: var(--ph2-surface-2);
  border-color: var(--ph2-line-strong);
}

html[data-theme='dark'] .form-check-input:checked {
  background-color: var(--ph2-accent);
  border-color: var(--ph2-accent);
}

/* ── tables ─────────────────────────────────────────────── */
html[data-theme='dark'] .main-table table,
html[data-theme='dark'] table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ph2-ink);
  --bs-table-border-color: var(--ph2-line);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: var(--ph2-accent-soft);
  --bs-table-striped-color: var(--ph2-ink);
  --bs-table-hover-color: var(--ph2-ink);
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .main-table thead th,
html[data-theme='dark'] table thead th {
  background: var(--ph2-surface-2) !important;
  color: var(--ph2-ink-muted) !important;
  border-bottom: 1px solid var(--ph2-line) !important;
  font-weight: 600;
}

html[data-theme='dark'] .main-table tbody td,
html[data-theme='dark'] table tbody td {
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
  background: transparent !important;
}

html[data-theme='dark'] .main-table tbody tr:hover td {
  background: var(--ph2-accent-soft) !important;
}

/* ── bootstrap / utilities often left white ─────────────── */
html[data-theme='dark'] .bg-white,
html[data-theme='dark'] .bg-light,
html[data-theme='dark'] .bg-body,
html[data-theme='dark'] .bg-body-tertiary,
html[data-theme='dark'] .card,
html[data-theme='dark'] .list-group-item,
html[data-theme='dark'] .modal-content,
html[data-theme='dark'] .dropdown-menu,
html[data-theme='dark'] .offcanvas,
html[data-theme='dark'] .accordion-item,
html[data-theme='dark'] .accordion-button,
html[data-theme='dark'] .popover,
html[data-theme='dark'] .toast {
  background-color: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .accordion-button:not(.collapsed) {
  background: var(--ph2-accent-soft) !important;
  color: var(--ph2-accent-strong) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .dropdown-item {
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .dropdown-item:hover,
html[data-theme='dark'] .dropdown-item:focus {
  background: var(--ph2-accent-soft) !important;
  color: var(--ph2-accent-strong) !important;
}

html[data-theme='dark'] .text-dark,
html[data-theme='dark'] .text-black,
html[data-theme='dark'] .text-body,
html[data-theme='dark'] .text-muted {
  color: var(--ph2-ink-muted) !important;
}

html[data-theme='dark'] .text-dark,
html[data-theme='dark'] .text-black {
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .border,
html[data-theme='dark'] .border-top,
html[data-theme='dark'] .border-bottom,
html[data-theme='dark'] .border-start,
html[data-theme='dark'] .border-end {
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .shadow,
html[data-theme='dark'] .shadow-sm,
html[data-theme='dark'] .shadow-lg {
  box-shadow: var(--ph2-shadow) !important;
}

/* status chips */
html[data-theme='dark'] .card-success {
  color: #8fe0b0 !important;
  background-color: rgba(61, 186, 116, 0.16) !important;
}

html[data-theme='dark'] .card-warning {
  color: #f0cf7a !important;
  background-color: rgba(230, 176, 53, 0.16) !important;
}

html[data-theme='dark'] .card-danger {
  color: #ff9b94 !important;
  background-color: rgba(227, 91, 82, 0.16) !important;
}

/* react-datepicker / misc white panels */
html[data-theme='dark'] .react-datepicker,
html[data-theme='dark'] .react-datepicker__header,
html[data-theme='dark'] .react-datepicker__month-container,
html[data-theme='dark'] .pvtUi,
html[data-theme='dark'] .pvtTable {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] ::-webkit-scrollbar-track {
  background: var(--ph2-surface-2);
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--ph2-line-strong);
  border-radius: 8px;
}

html[data-theme='dark'] ::selection {
  background: var(--ph2-accent-soft);
  color: var(--ph2-ink);
}

/* ── theme toggle (redesigned) ──────────────────────────── */
.ph2-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: #eef1f8;
  border: 1px solid #d5dbed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

html[data-theme='dark'] .ph2-theme-switch,
html[data-theme='dark'] .language-switch {
  background: var(--ph2-surface-2) !important;
  border-color: var(--ph2-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ph2-theme-switch__btn {
  border: 0;
  background: transparent;
  color: #6b738c;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: Cairo, sans-serif;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ph2-theme-switch__btn:hover {
  color: #3d55cc;
}

.ph2-theme-switch__btn.is-active {
  background: linear-gradient(180deg, #4a63d8, #3d55cc);
  color: #fff;
  box-shadow: 0 4px 12px rgba(61, 85, 204, 0.35);
}

html[data-theme='dark'] .ph2-theme-switch__btn {
  color: var(--ph2-ink-muted);
}

html[data-theme='dark'] .ph2-theme-switch__btn:hover {
  color: var(--ph2-accent-strong);
}

html[data-theme='dark'] .ph2-theme-switch__btn.is-active {
  background: linear-gradient(180deg, #6d83ea, #5c74e0);
  color: #fff;
  box-shadow: 0 4px 14px rgba(92, 116, 224, 0.4);
}

html[data-theme='dark'] .language-switch__btn.is-active {
  background: var(--ph2-accent) !important;
}

.ph2-theme-switch-host {
  display: inline-flex;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   Reports / لوحة التقارير / التقارير / تحليلات (odoo + analytics)
   These pages hardcode #fff — force dark surfaces here.
   ══════════════════════════════════════════════════════════ */

html[data-theme='dark'] .odoo-report,
html[data-theme='dark'] .home-insights.odoo-report,
html[data-theme='dark'] .reports-tables,
html[data-theme='dark'] .analytics-dash {
  --odoo-surface: var(--ph2-surface) !important;
  --odoo-bg: var(--ph2-bg) !important;
  --odoo-ink: var(--ph2-ink) !important;
  --odoo-muted: var(--ph2-ink-muted) !important;
  --odoo-border: var(--ph2-line) !important;
  --odoo-border-strong: var(--ph2-line-strong) !important;
  --odoo-accent: var(--ph2-accent) !important;
  --odoo-accent-strong: var(--ph2-accent-strong) !important;
  --odoo-accent-soft: var(--ph2-accent-soft) !important;
  background: var(--ph2-bg) !important;
  border-color: var(--ph2-line) !important;
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .odoo-report-header,
html[data-theme='dark'] .odoo-control-panel,
html[data-theme='dark'] .odoo-period-chips,
html[data-theme='dark'] .odoo-report-view-switch,
html[data-theme='dark'] .odoo-insight-card,
html[data-theme='dark'] .odoo-insight-banner,
html[data-theme='dark'] .odoo-kpi-strip,
html[data-theme='dark'] .odoo-menu,
html[data-theme='dark'] .odoo-anchored-menu,
html[data-theme='dark'] .odoo-add-menu-pop,
html[data-theme='dark'] .odoo-measures-menu,
html[data-theme='dark'] .odoo-dropdown,
html[data-theme='dark'] .odoo-pivot-shell,
html[data-theme='dark'] .odoo-pivot-grid-wrap,
html[data-theme='dark'] .odoo-empty,
html[data-theme='dark'] .reports-tables__toolbar,
html[data-theme='dark'] .reports-export-modal,
html[data-theme='dark'] .reports-hub__view,
html[data-theme='dark'] .reports-hub__ai-seed {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .odoo-report-path,
html[data-theme='dark'] .odoo-report-hint,
html[data-theme='dark'] .odoo-menu-hint,
html[data-theme='dark'] .odoo-kpi-meta,
html[data-theme='dark'] .odoo-axis-mini-label {
  color: var(--ph2-ink-muted) !important;
}

html[data-theme='dark'] .odoo-report-title,
html[data-theme='dark'] .odoo-menu-title,
html[data-theme='dark'] .odoo-row-head,
html[data-theme='dark'] .odoo-measure-head,
html[data-theme='dark'] .odoo-val {
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .odoo-period-chips button,
html[data-theme='dark'] .odoo-period-chips--compact button,
html[data-theme='dark'] .odoo-report-view-switch button,
html[data-theme='dark'] .reports-hub__view button,
html[data-theme='dark'] .odoo-btn-ghost,
html[data-theme='dark'] .odoo-cp-btn,
html[data-theme='dark'] .odoo-plus-btn,
html[data-theme='dark'] .odoo-tree-toggle,
html[data-theme='dark'] .reports-tables__pager button,
html[data-theme='dark'] .reports-hub__special-link,
html[data-theme='dark'] .reports-export-source__col-actions button {
  background: var(--ph2-surface-2) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .odoo-period-chips button.active,
html[data-theme='dark'] .odoo-report-view-switch button.active,
html[data-theme='dark'] .reports-hub__view button.active,
html[data-theme='dark'] .odoo-cp-btn.primary,
html[data-theme='dark'] .odoo-cp-btn.primary.active,
html[data-theme='dark'] .reports-export-source.is-on {
  background: var(--ph2-accent) !important;
  color: #fff !important;
  border-color: var(--ph2-accent) !important;
}

html[data-theme='dark'] .odoo-menu-item:hover,
html[data-theme='dark'] .odoo-menu-check,
html[data-theme='dark'] .odoo-axis-chip {
  background: var(--ph2-accent-soft) !important;
  color: var(--ph2-accent-strong) !important;
}

html[data-theme='dark'] .odoo-insight-table-wrap,
html[data-theme='dark'] .odoo-insight-table,
html[data-theme='dark'] .odoo-pivot-grid {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .odoo-insight-table th,
html[data-theme='dark'] .odoo-pivot-corner,
html[data-theme='dark'] .odoo-pivot-corner-inner {
  background: var(--ph2-surface-2) !important;
  color: var(--ph2-ink-muted) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .odoo-insight-table td,
html[data-theme='dark'] .odoo-pivot-grid td,
html[data-theme='dark'] .odoo-pivot-grid th {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .odoo-insight-table tr:hover td,
html[data-theme='dark'] .odoo-pivot-grid tr:hover td {
  background: var(--ph2-accent-soft) !important;
}

html[data-theme='dark'] .odoo-sum-chip {
  background: var(--ph2-surface-2) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .odoo-sum-chip--warn,
html[data-theme='dark'] .odoo-insight-banner.warn {
  background: rgba(230, 176, 53, 0.14) !important;
  color: #f0cf7a !important;
  border-color: rgba(230, 176, 53, 0.35) !important;
}

html[data-theme='dark'] .reports-tables__total-row td {
  background: var(--ph2-surface-2) !important;
  color: var(--ph2-ink) !important;
  border-top-color: var(--ph2-line-strong) !important;
}

/* Analytics dashboard cards / KPIs */
html[data-theme='dark'] .analytics-dash__kpi-item,
html[data-theme='dark'] .analytics-dash__card,
html[data-theme='dark'] .analytics-dash__chart-card,
html[data-theme='dark'] .analytics-dash__period {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .analytics-dash__section-head h2,
html[data-theme='dark'] .analytics-dash__period-label p:first-child,
html[data-theme='dark'] .analytics-dash__kpi-item dd,
html[data-theme='dark'] .analytics-dash__split-row {
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .analytics-dash__section-head p,
html[data-theme='dark'] .analytics-dash__kpi-item dt,
html[data-theme='dark'] .analytics-dash__split-note,
html[data-theme='dark'] .analytics-dash__split-meta {
  color: var(--ph2-ink-muted) !important;
}

html[data-theme='dark'] .analytics-dash__link {
  color: var(--ph2-accent-strong) !important;
}

html[data-theme='dark'] .analytics-dash__bar {
  background: var(--ph2-surface-3) !important;
}

html[data-theme='dark'] .analytics-dash__kpi--skeleton .analytics-dash__kpi-skel {
  background: linear-gradient(90deg, #1c2330 25%, #2c3547 50%, #1c2330 75%) !important;
  background-size: 200% 100% !important;
}

/* Pivot / plotly host */
html[data-theme='dark'] .pivot-dashboard .pvtUi,
html[data-theme='dark'] .pvtUi,
html[data-theme='dark'] .pvtTable,
html[data-theme='dark'] .pvtDropdownMenu,
html[data-theme='dark'] .pvtDropdownCurrentOpen,
html[data-theme='dark'] .odoo-pivot-shell .plotly,
html[data-theme='dark'] .js-plotly-plot .plotly {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .pvtAxisContainer,
html[data-theme='dark'] .pvtVals,
html[data-theme='dark'] .pvtRows,
html[data-theme='dark'] .pvtCols {
  background: var(--ph2-surface-2) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .pvtTable th,
html[data-theme='dark'] .pvtTable td {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

/* AI insights / تحليلات */
html[data-theme='dark'] .ai-insights-page,
html[data-theme='dark'] .ai-insight-card,
html[data-theme='dark'] .ai-insights-link-btn,
html[data-theme='dark'] .ai-insights-chip {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .ai-insight-card.is-unread {
  background:
    linear-gradient(135deg, rgba(92, 116, 224, 0.1), transparent 55%),
    var(--ph2-surface) !important;
}

html[data-theme='dark'] .ai-insights-chip.active {
  background: var(--ph2-accent-soft) !important;
  color: var(--ph2-accent-strong) !important;
  border-color: var(--ph2-accent) !important;
}

html[data-theme='dark'] .ai-insights-toast-success {
  background: rgba(61, 186, 116, 0.16) !important;
  color: #8fe0b0 !important;
  border-color: rgba(61, 186, 116, 0.35) !important;
}

html[data-theme='dark'] .ai-insights-toast-danger {
  background: rgba(227, 91, 82, 0.16) !important;
  color: #ff9b94 !important;
  border-color: rgba(227, 91, 82, 0.35) !important;
}

html[data-theme='dark'] .ai-insights-empty {
  color: var(--ph2-ink-muted) !important;
}

/* Datepicker portals used heavily on report filters */
html[data-theme='dark'] .react-datepicker,
html[data-theme='dark'] .react-datepicker__header,
html[data-theme='dark'] .react-datepicker__month-container,
html[data-theme='dark'] .react-datepicker__portal .react-datepicker,
html[data-theme='dark'] .react-datepicker__day-name,
html[data-theme='dark'] .react-datepicker__current-month,
html[data-theme='dark'] .react-datepicker__day {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .react-datepicker__day:hover {
  background: var(--ph2-accent-soft) !important;
}

html[data-theme='dark'] .react-datepicker__day--selected,
html[data-theme='dark'] .react-datepicker__day--keyboard-selected {
  background: var(--ph2-accent) !important;
  color: #fff !important;
}

/* Catch remaining white panels inside report shells */
html[data-theme='dark'] .odoo-report .bg-white,
html[data-theme='dark'] .odoo-report .bg-light,
html[data-theme='dark'] .analytics-dash .bg-white,
html[data-theme='dark'] .analytics-dash .bg-light,
html[data-theme='dark'] .reports-tables .bg-white,
html[data-theme='dark'] .ai-insights-page .bg-white {
  background: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
}

/* ── white bars that still beat earlier rules ───────────── */
html[data-theme='dark'] .nav-bar {
  background: #161b26 !important;
  background-color: #161b26 !important;
}

html[data-theme='dark'] .nav-bar-user,
html[data-theme='dark'] .side-nav-logo-wrap,
html[data-theme='dark'] .side-nav-logo-wrap.light,
html[data-theme='dark'] .side-nav-tab-icon {
  background: var(--ph2-surface-2) !important;
  background-color: var(--ph2-surface-2) !important;
}

html[data-theme='dark'] .reports-tables__toolbar,
html[data-theme='dark'] .pivot-toolbar,
html[data-theme='dark'] .odoo-control-panel,
html[data-theme='dark'] .odoo-report-header,
html[data-theme='dark'] .reports-hub__tabs,
html[data-theme='dark'] .reports-hub__view,
html[data-theme='dark'] .odoo-breadcrumb {
  background: var(--ph2-surface) !important;
  background-color: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .odoo-val,
html[data-theme='dark'] .odoo-val.is-total,
html[data-theme='dark'] .odoo-total-row .odoo-val,
html[data-theme='dark'] .odoo-insight-table th,
html[data-theme='dark'] .odoo-insight-table td,
html[data-theme='dark'] .odoo-period-chips--compact button,
html[data-theme='dark'] .odoo-plus-btn,
html[data-theme='dark'] .odoo-btn-ghost,
html[data-theme='dark'] .odoo-check-mark,
html[data-theme='dark'] .odoo-sum-chip,
html[data-theme='dark'] .pivot-ghost-btn,
html[data-theme='dark'] .pivot-kpi,
html[data-theme='dark'] .pivot-workspace,
html[data-theme='dark'] .pivot-view-btn.active,
html[data-theme='dark'] .pivot-dataset-tab.active,
html[data-theme='dark'] .stk-mov-kpi {
  background: var(--ph2-surface) !important;
  background-color: var(--ph2-surface) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

html[data-theme='dark'] .pivot-workspace .pvtAxisContainer li span.pvtAttr,
html[data-theme='dark'] .pivot-workspace .pvtVals li span.pvtAttr,
html[data-theme='dark'] .pivot-workspace .pvtDropdownMenu,
html[data-theme='dark'] .pvtDropdownMenu,
html[data-theme='dark'] .odoo-pivot-shell .js-plotly-plot,
html[data-theme='dark'] .odoo-pivot-shell .plotly {
  background: var(--ph2-surface-2) !important;
  background-color: var(--ph2-surface-2) !important;
  color: var(--ph2-ink) !important;
  border-color: var(--ph2-line) !important;
}

/* main content column often stays white from page wrappers */
html[data-theme='dark'] main,
html[data-theme='dark'] main > .row,
html[data-theme='dark'] .col,
html[data-theme='dark'] [class*='col-'] {
  background-color: transparent !important;
}

html[data-theme='dark'] .odoo-report,
html[data-theme='dark'] .analytics-dash.odoo-report {
  background: var(--ph2-bg) !important;
  background-color: var(--ph2-bg) !important;
}

/* Ranking summaries / insight card headers (the light bar) */
html[data-theme='dark'] .odoo-insight-card-head,
html[data-theme='dark'] .home-insights .odoo-insight-card-head,
html[data-theme='dark'] .odoo-insights .odoo-insight-card-head,
html[data-theme='dark'] .analytics-dash .odoo-insight-card-head {
  background: var(--ph2-surface-2) !important;
  background-color: var(--ph2-surface-2) !important;
  border-bottom-color: var(--ph2-line) !important;
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .odoo-insight-card-head h3,
html[data-theme='dark'] .odoo-insight-card-head h2,
html[data-theme='dark'] .odoo-insight-card-head h4 {
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .odoo-insight-card-head p,
html[data-theme='dark'] .odoo-insight-card-head span,
html[data-theme='dark'] .odoo-insight-card-head small {
  color: var(--ph2-ink-muted) !important;
}

html[data-theme='dark'] .odoo-sum-strip,
html[data-theme='dark'] .odoo-breadcrumb,
html[data-theme='dark'] .home-insights.odoo-report {
  background: var(--ph2-surface) !important;
  background-color: var(--ph2-surface) !important;
  border-color: var(--ph2-line) !important;
  color: var(--ph2-ink) !important;
}

html[data-theme='dark'] .odoo-insights-grid {
  background: transparent !important;
}