/* ═══════════════════════════════════════════════════════════════
   STELLA MARIS MEDIA ADMIN — Dark mode (Felipe 2026-10-24)
   Switched on by the moon/sun button in the top bar; remembered per device
   (localStorage "smAdminTheme"), applied in <head> before the page paints.
   The writing areas (article + newsletter editors, previews) stay white on
   purpose: they show the website / email as readers will see them.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #7c7aff;
  --primary-hover: #6866f0;
  --primary-light: #24234d;
  --gold-light: #2b2616;
  --grey-50: #1e1f27;
  --grey-100: #15161c;
  --grey-200: #2d2e38;
  --grey-300: #3b3c48;
  --grey-400: #6e6f7d;
  --grey-500: #9d9eab;
  --grey-600: #b7b8c3;
  --grey-700: #d0d1d9;
  --grey-800: #e3e4ea;
  --grey-900: #f2f2f6;
  --sidebar-bg: #0b0b3d;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,.55);
  --dk-surface: #1b1c24;
  --dk-surface-2: #22232d;
  --dk-input: #14151b;
}
html[data-theme="dark"] body { background: var(--grey-100); color: var(--grey-800); }

/* surfaces */
html[data-theme="dark"] :is(.card, .stat-card, .admin-header, .modal, .toolbar, .nb-panel, .nbs-modal, .man-doc, .man-float,
  .db-card, .db-kpi, .db-period, .np-list, .cf-list, .cf-item, .cf-detail, .et-card, .et-pill, .mk-card, .sp-card, .sp-row,
  .sp-tiers, .com-note-wrap, .nb-bell, .nb-mark, .action-bar, .sidebar-stack .card, .related-item, .art-pager .pagination a,
  .pagination button, .pagination a, .header-btn, .ro-pill, .yt-note, .man-top, .man-tip, .cf-tools, .sp-empty, .db-error) {
  background-color: var(--dk-surface) !important;
  border-color: var(--grey-200) !important;
  color: var(--grey-800);
}
html[data-theme="dark"] :is(.card-header, .modal-header, .modal-footer, th, .nb-head, .nbs-head) {
  background-color: var(--dk-surface-2) !important;
  border-color: var(--grey-200) !important;
  color: var(--grey-700);
}
html[data-theme="dark"] td { border-color: var(--grey-200) !important; }
html[data-theme="dark"] tr:hover td { background-color: rgba(255,255,255,.02); }

/* inline white backgrounds written into pages */
html[data-theme="dark"] :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"],
  [style*="background:white"], [style*="background: white"], [style*="background-color:#fff"], [style*="background-color: #fff"],
  [style*="background:#f5f5f4"], [style*="background: #f5f5f4"], [style*="background:#FAFAF9"], [style*="background:#fafaf9"], [style*="background:#f4f1ec"]) {
  background: var(--dk-surface) !important;
  color: var(--grey-800);
}

/* forms */
html[data-theme="dark"] :is(input, select, textarea, .form-input, .form-select, .form-textarea, .search-input, .filter-select) {
  background-color: var(--dk-input) !important;
  color: var(--grey-800) !important;
  border-color: var(--grey-300) !important;
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--grey-400) !important; }
html[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--primary); }
html[data-theme="dark"] .btn-outline { background: transparent !important; color: var(--grey-700) !important; border-color: var(--grey-300) !important; }
html[data-theme="dark"] .btn-outline:hover { background: var(--dk-surface-2) !important; color: var(--grey-900) !important; }
html[data-theme="dark"] .btn-primary { background: #3d3bd6; border-color: #3d3bd6; color: #fff; }
html[data-theme="dark"] .btn-primary:hover { background: #4e4cea; }

/* text that was dark-on-light */
html[data-theme="dark"] :is(h1, h2, h3, h4, .page-title, .db-kpi-value, .nbs-name, .art-day, strong) { color: var(--grey-900); }
html[data-theme="dark"] .art-cat { color: var(--grey-800) !important; }
html[data-theme="dark"] [style*="color:var(--grey-900)"], html[data-theme="dark"] [style*="color: var(--grey-900)"] { color: var(--grey-900) !important; }

/* badges stay readable */
html[data-theme="dark"] .badge-success { background: #123d24 !important; color: #6ee79b !important; }
html[data-theme="dark"] .badge-warning { background: #3d2f0b !important; color: #fbd36b !important; }
html[data-theme="dark"] .badge-danger { background: #43161a !important; color: #ff9aa2 !important; }
html[data-theme="dark"] .badge-primary { background: #24234d !important; color: #b9b8ff !important; }
html[data-theme="dark"] .badge-secondary { background: #2d2e38 !important; color: #c5c6d0 !important; }
html[data-theme="dark"] .ro-pill { color: #fbd36b !important; background: #3d2f0b !important; }
html[data-theme="dark"] .nb-item.unread { background: #1f1f3d !important; }
html[data-theme="dark"] .nb-item:hover { background: var(--dk-surface-2) !important; }
html[data-theme="dark"] .nl-hl > td { background: #3a3110 !important; }
html[data-theme="dark"] .man-tip { background: #2b2616 !important; }
html[data-theme="dark"] .yt-note { background: #2b2616 !important; color: #f3d98a !important; border-color: #5a4a1a !important; }
html[data-theme="dark"] .toast { box-shadow: 0 6px 18px rgba(0,0,0,.6); }

/* writing areas and previews keep their real (white) colours */
html[data-theme="dark"] :is(.tiptap, .ProseMirror, .nl-editor-area, #nlPreview, #etPreview, .nl-preview-wrap iframe) {
  background: #ffffff !important;
  color: #1C1917 !important;
  color-scheme: light;
}
html[data-theme="dark"] .tiptap :is(p, li, span, td) { color: inherit; }
html[data-theme="dark"] .tiptap :is(h1, h2, h3) { color: #0504AA; }
html[data-theme="dark"] .tiptap strong { color: inherit; }

/* theme toggle button (top bar) */
.theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--grey-200); background: #fff; color: var(--grey-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s, color .15s; }
.theme-toggle:hover { color: var(--primary); border-color: var(--grey-300); }
html[data-theme="dark"] .theme-toggle { background: var(--dk-surface); color: #f3d98a; border-color: var(--grey-300); }
.theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* editor toolbars (article, newsletter, email templates) + their drop-downs */
html[data-theme="dark"] :is(#articleCompose, #nlCompose, #etCompose) .nl-tb { background: var(--dk-surface-2) !important; border-color: var(--grey-200) !important; }
html[data-theme="dark"] :is(#articleCompose, #nlCompose, #etCompose) .nl-tb select { background: var(--dk-input) !important; color: var(--grey-800) !important; border-color: var(--grey-300) !important; }
html[data-theme="dark"] :is(#articleCompose, #nlCompose, #etCompose) .nl-tb button[data-cmd],
html[data-theme="dark"] :is(#articleCompose, #nlCompose, #etCompose) .nl-tb .nl-color-btn { background: transparent !important; color: var(--grey-700) !important; }
html[data-theme="dark"] :is(#articleCompose, #nlCompose, #etCompose) .nl-tb button[data-cmd]:hover { background: var(--grey-200) !important; color: var(--grey-900) !important; }
html[data-theme="dark"] :is(#articleCompose, #nlCompose, #etCompose) .nl-tb button[data-cmd].active { background: #3d3bd6 !important; color: #fff !important; }
html[data-theme="dark"] :is(#articleCompose, #nlCompose, #etCompose) .nl-tb .nl-tb-sep { background: var(--grey-300) !important; }
html[data-theme="dark"] .nl-color-popover { background: var(--dk-surface-2) !important; border-color: var(--grey-300) !important; }
/* article editor side panels */
html[data-theme="dark"] :is(#articleCompose .related-picker, #articleCompose .drop-zone, .drop-zone, .com-empty, #etPlaceholders, .et-ph) { background: var(--dk-surface) !important; border-color: var(--grey-300) !important; color: var(--grey-700) !important; }
html[data-theme="dark"] #articleCompose .related-item { background: var(--dk-surface-2) !important; }
html[data-theme="dark"] #articleCompose .related-item.selected { background: #24234d !important; border-color: var(--primary) !important; }
/* newsletter composer */
html[data-theme="dark"] #nlCompose .nl-type-btn:not(.active) { background: var(--dk-surface) !important; color: var(--grey-700) !important; border-color: var(--grey-300) !important; }
html[data-theme="dark"] #nlCompose .nl-type-btn.active { background: #3d3bd6 !important; color: #fff !important; }
html[data-theme="dark"] #nlCompose .nl-preview-wrap { background: var(--dk-surface) !important; border-color: var(--grey-300) !important; }
html[data-theme="dark"] #nlCompose .nl-approval--top { background: var(--dk-surface-2) !important; border-color: var(--grey-200) !important; }
html[data-theme="dark"] #nlCompose .nl-approval-lead { color: var(--grey-600) !important; }
html[data-theme="dark"] #nlCompose .nl-approval-check { background: var(--dk-surface) !important; border-color: var(--grey-300) !important; color: var(--grey-700) !important; }
html[data-theme="dark"] #nlCompose .nl-approval-check.approved { background: #123d24 !important; border-color: #22c55e !important; color: #6ee79b !important; }
html[data-theme="dark"] #nlCompose .nl-article-item { background: var(--dk-surface-2) !important; border-color: var(--grey-300) !important; }
html[data-theme="dark"] #nlCompose .nl-article-item.selected { background: #24234d !important; border-color: var(--primary) !important; }
html[data-theme="dark"] #etCompose .nl-preview-wrap { background: var(--dk-surface) !important; border-color: var(--grey-300) !important; }
/* labels that were hard-coded dark */
html[data-theme="dark"] :is(.et-card__label, .sp-pill, .nl-article-title) { color: var(--grey-800) !important; }
html[data-theme="dark"] .sp-pill { background: var(--dk-surface-2) !important; }