/* User theme options (Settings -> Theme), loaded after crm.css / crm-admin.css in both portals.
   <html data-crm-theme="dark|light" data-crm-sidebar="dark|light" style="--crm-accent:...">
   Dark is the base design; this file only adds the light page and the light/dark sidebar variants. */

/* ===== Light page ===== */
html[data-crm-theme="light"] {
  color-scheme: light;
  --crm-bg: #f4f6fa;
  --crm-surface: #ffffff;
  --crm-surface-2: #f3f4f6;
  --crm-border: #e5e7eb;
  --crm-text: #111827;
  --crm-muted: #6b7280;
  --crm-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
  /* Django admin variables */
  --body-fg: #1f2937;
  --body-bg: #f4f6fa;
  --body-quiet-color: #6b7280;
  --body-medium-color: #374151;
  --body-loud-color: #111827;
  --header-color: #1f2937;
  --header-branding-color: #111827;
  --header-bg: #ffffff;
  --breadcrumbs-bg: #f4f6fa;
  --breadcrumbs-fg: #6b7280;
  --hairline-color: #e5e7eb;
  --border-color: #d1d5db;
  --darkened-bg: #f9fafb;
  --selected-bg: color-mix(in srgb, var(--crm-accent) 10%, white);
  --selected-row: color-mix(in srgb, var(--crm-accent) 10%, white);
  --message-success-bg: #dcfce7;
  --message-warning-bg: #fef9c3;
  --message-error-bg: #fee2e2;
  --close-button-bg: #9ca3af;
  --close-button-hover-bg: #6b7280;
}

/* Staff portal */
html[data-crm-theme="light"] .crm-topbar { background: var(--crm-surface); border-bottom-color: var(--crm-border); }
html[data-crm-theme="light"] .crm h3, html[data-crm-theme="light"] .crm h6,
html[data-crm-theme="light"] .stat .num, html[data-crm-theme="light"] .big-num,
html[data-crm-theme="light"] .pipe-box .n { color: var(--crm-text); }
html[data-crm-theme="light"] .crm-main .text-white { color: var(--crm-text) !important; }
html[data-crm-theme="light"] .stat .label { color: #374151; }
html[data-crm-theme="light"] .crm-icon-btn, html[data-crm-theme="light"] a.crm-icon-btn,
html[data-crm-theme="light"] .crm-collapse-btn { color: #374151 !important; background: var(--crm-surface); }
html[data-crm-theme="light"] .crm .table { --bs-table-hover-bg: #f9fafb; --bs-table-hover-color: var(--crm-text); --bs-table-striped-bg: #f9fafb; }
html[data-crm-theme="light"] .crm .form-control, html[data-crm-theme="light"] .crm .form-select,
html[data-crm-theme="light"] .crm .input-group-text { background-color: #fff; border-color: #d1d5db; color: var(--crm-text); }
html[data-crm-theme="light"] .crm .form-control:focus, html[data-crm-theme="light"] .crm .form-select:focus { background-color: #fff; color: var(--crm-text); }
html[data-crm-theme="light"] .crm .form-control::placeholder { color: #9ca3af; }
html[data-crm-theme="light"] .crm .form-check-input { background-color: #fff; border-color: #9ca3af; }
html[data-crm-theme="light"] .crm .form-check-input:checked { background-color: var(--crm-accent); border-color: var(--crm-accent); }
html[data-crm-theme="light"] .crm .btn-outline-secondary { color: #374151; border-color: #d1d5db; }
html[data-crm-theme="light"] .crm .btn-outline-secondary:hover { background: #f3f4f6; color: #111827; border-color: #9ca3af; }
html[data-crm-theme="light"] .crm .btn-light { color: var(--crm-text); }
html[data-crm-theme="light"] .crm .bg-secondary { background-color: #6b7280 !important; }
html[data-crm-theme="light"] .crm .progress { background: #e5e7eb; }

/* Admin portal content */
html[data-crm-theme="light"] body.crm-admin #header { background: #fff; border-bottom-color: var(--crm-border); }
html[data-crm-theme="light"] body.crm-admin #site-name a { color: var(--crm-text) !important; }
html[data-crm-theme="light"] body.crm-admin #user-tools strong,
html[data-crm-theme="light"] body.crm-admin #content h1, html[data-crm-theme="light"] body.crm-admin #content h2,
html[data-crm-theme="light"] body.crm-admin #content .module h2, html[data-crm-theme="light"] body.crm-admin #content .module caption,
html[data-crm-theme="light"] body.crm-admin #content .module caption a, html[data-crm-theme="light"] body.crm-admin #content .module h2 a,
html[data-crm-theme="light"] body.crm-admin .inline-group h2, html[data-crm-theme="light"] body.crm-admin #changelist-filter h2,
html[data-crm-theme="light"] body.crm-admin #changelist-filter summary, html[data-crm-theme="light"] body.crm-admin #changelist-filter h3,
html[data-crm-theme="light"] body.crm-admin .aligned label.required,
html[data-crm-theme="light"] body.crm-admin .selector-chosen h2, html[data-crm-theme="light"] body.crm-admin .selector-available h2 { color: var(--crm-text); }
html[data-crm-theme="light"] body.crm-admin .aligned label,
html[data-crm-theme="light"] body.crm-admin #changelist-filter a, html[data-crm-theme="light"] body.crm-admin #changelist-filter li a,
html[data-crm-theme="light"] body.crm-admin #changelist table#result_list tbody td,
html[data-crm-theme="light"] body.crm-admin #changelist table#result_list tbody th { color: #374151; }
html[data-crm-theme="light"] body.crm-admin #content tbody tr:hover,
html[data-crm-theme="light"] body.crm-admin #changelist table#result_list tbody tr:hover th,
html[data-crm-theme="light"] body.crm-admin #changelist table#result_list tbody tr:hover td,
html[data-crm-theme="light"] body.crm-admin #changelist-filter li a:hover { background: #f9fafb; color: var(--crm-text); }
html[data-crm-theme="light"] body.crm-admin input[type=text], html[data-crm-theme="light"] body.crm-admin input[type=password],
html[data-crm-theme="light"] body.crm-admin input[type=email], html[data-crm-theme="light"] body.crm-admin input[type=number],
html[data-crm-theme="light"] body.crm-admin input[type=url], html[data-crm-theme="light"] body.crm-admin input[type=tel],
html[data-crm-theme="light"] body.crm-admin input[type=date], html[data-crm-theme="light"] body.crm-admin input[type=search],
html[data-crm-theme="light"] body.crm-admin select, html[data-crm-theme="light"] body.crm-admin textarea,
html[data-crm-theme="light"] body.crm-admin .vTextField { background: #fff; color: var(--crm-text); border-color: #d1d5db; }
html[data-crm-theme="light"] body.crm-admin #changelist #toolbar input[type=submit],
html[data-crm-theme="light"] body.crm-admin #changelist .actions .button { color: var(--crm-text); }
html[data-crm-theme="light"] body.crm-admin ul.messagelist li { color: var(--crm-text); }

/* ===== Sidebar: pin its own palette so it reads right on either page colour ===== */
html:not([data-crm-sidebar="light"]) .crm-sidebar,
html:not([data-crm-sidebar="light"]) body.crm-admin #nav-sidebar,
html:not([data-crm-sidebar="light"]) body.crm-admin .toggle-nav-sidebar {
  --crm-surface-2: #1a1a1c; --crm-border: #26262a; --crm-text: #f4f4f5; --crm-muted: #9ca3af;
  background: #0b0b0c;
}

html[data-crm-sidebar="light"] .crm-sidebar,
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar {
  --crm-surface-2: #f3f4f6; --crm-border: #e5e7eb; --crm-text: #111827; --crm-muted: #6b7280;
  background: #ffffff; border-right: 1px solid #e5e7eb;
}
html[data-crm-sidebar="light"] .crm-brand .name,
html[data-crm-sidebar="light"] .crm-inst .val { color: #111827; }
html[data-crm-sidebar="light"] .crm-nav-title { color: #9ca3af; }
html[data-crm-sidebar="light"] .crm-sidebar a.nav-item,
html[data-crm-sidebar="light"] .crm-sidebar button.nav-item { color: #374151; }
html[data-crm-sidebar="light"] .crm-sidebar a.nav-item:hover,
html[data-crm-sidebar="light"] .crm-sidebar button.nav-item:hover { color: #111827; background: #f3f4f6; }
html[data-crm-sidebar="light"] .crm-sidebar a.nav-item.active { color: var(--crm-accent); }
/* admin sidebar, light */
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar #nav-filter { background: #f3f4f6; border-color: #e5e7eb; color: #111827; }
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-side-link,
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group summary { color: #374151; }
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group[open] summary { color: #111827; }
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group summary.current,
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-side-link.current { color: var(--crm-accent); }
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-side-link:hover,
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group summary:hover,
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group tr:hover th,
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group tr:hover td { background: #f3f4f6; color: #111827; }
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group th a { color: #4b5563; }
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group tr:hover th a { color: #111827; }
html[data-crm-sidebar="light"] body.crm-admin #nav-sidebar .crm-group tr.current-model th a { color: var(--crm-accent); }

/* ===== Theme settings page ===== */
.theme-swatch {
  width: 44px; height: 44px; border-radius: 12px; border: 3px solid transparent; cursor: pointer;
  display: inline-grid; place-items: center; color: #fff; font-size: 1.1rem; box-shadow: var(--crm-shadow);
}
.theme-swatch.selected { border-color: var(--crm-text); }
.theme-option {
  border: 2px solid var(--crm-border); border-radius: 12px; padding: .7rem; cursor: pointer; text-align: center;
  background: var(--crm-surface-2); transition: border-color .15s; display: block;
}
.theme-option:hover { border-color: var(--crm-muted); }
.theme-option.selected { border-color: var(--crm-accent); }
.theme-option input { display: none; }
.theme-mini { height: 70px; border-radius: 8px; display: flex; overflow: hidden; margin-bottom: .5rem; border: 1px solid rgba(127, 127, 127, .25); }
.theme-mini .s { width: 30%; }
.theme-mini .m { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.theme-mini .bar { height: 8px; border-radius: 4px; }