/* Instance palettes are defined by the server. These aliases supersede the
   historic CRM theme without changing layout or semantic status colors. */
html[data-crm-theme] body.crm-admin-body,
html[data-crm-theme] body.crm-login-body {
  --crm-blue: var(--brand-primary);
  --crm-blue-2: var(--brand-primary-hover);
  --crm-cyan: var(--brand-accent);
  --crm-primary-rgb: var(--brand-primary-rgb);
  --crm-accent-rgb: var(--brand-accent-rgb);
  --crm-bg: var(--brand-background);
  --crm-bg-2: var(--brand-surface-alt);
  --crm-panel: var(--brand-surface);
  --crm-panel-2: var(--brand-surface-alt);
  --crm-panel-3: var(--brand-surface-alt);
  --crm-text: var(--brand-text);
  --crm-soft: var(--brand-text);
  --crm-muted: var(--brand-muted);
  --crm-border: var(--brand-border);
  --crm-line: var(--brand-border);
  --crm-line-strong: var(--brand-border);
  background: var(--brand-background) !important;
  color: var(--brand-text) !important;
  accent-color: var(--brand-primary);
}
html[data-crm-theme] body .crm-sidebar,
html[data-crm-theme] body .crm-sidebar .sidebar-header {
  background: var(--brand-sidebar) !important;
  border-color: var(--brand-border) !important;
}
html[data-crm-theme] body .crm-sidebar .metismenu a,
html[data-crm-theme] body .crm-sidebar .metismenu a svg,
html[data-crm-theme] body .crm-sidebar .metismenu a i,
html[data-crm-theme] body .crm-sidebar-brand span { color: var(--brand-sidebar-text) !important; }
html[data-crm-theme] body .crm-sidebar .metismenu a.active,
html[data-crm-theme] body .crm-sidebar .metismenu a:hover,
html[data-crm-theme] body .crm-sidebar .metismenu li.mm-active > a {
  background: var(--brand-sidebar-text) !important;
  color: var(--brand-sidebar) !important;
}
html[data-crm-theme] body .crm-sidebar .metismenu a.active svg,
html[data-crm-theme] body .crm-sidebar .metismenu a.active i { color: inherit !important; }
html[data-crm-theme] body .crm-topbar,
html[data-crm-theme] body .crm-login-panel,
html[data-crm-theme] body .crm-login-card,
html[data-crm-theme] body .card,
html[data-crm-theme] body .modal-content,
html[data-crm-theme] body .dropdown-menu { background: var(--brand-surface) !important; color: var(--brand-text) !important; border-color: var(--brand-border) !important; }
html[data-crm-theme] body .btn-primary,
html[data-crm-theme] body .crm-filterbar-action .btn,
html[data-crm-theme] body .crm-avatar {
  background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; border-color: var(--brand-primary) !important;
}
html[data-crm-theme] body .btn-primary:hover,
html[data-crm-theme] body .btn-primary:focus { background: var(--brand-primary-hover) !important; }
html[data-crm-theme] body .form-control,
html[data-crm-theme] body .form-select,
html[data-crm-theme] body .crm-input,
html[data-crm-theme] body .input-group-text { background: var(--brand-surface) !important; color: var(--brand-text) !important; border-color: var(--brand-border) !important; }
html[data-crm-theme] body input::placeholder,
html[data-crm-theme] body textarea::placeholder,
html[data-crm-theme] body .text-muted { color: var(--brand-muted) !important; }
html[data-crm-theme] body .bg-white,
html[data-crm-theme] body .bg-light { background: var(--brand-surface) !important; }
html[data-crm-theme] body .text-dark { color: var(--brand-text) !important; }
html[data-crm-theme] body table { --bs-table-bg: var(--brand-surface); --bs-table-color: var(--brand-text); --bs-table-striped-bg: var(--brand-surface-alt); --bs-table-striped-color: var(--brand-text); --bs-table-hover-bg: var(--brand-surface-alt); --bs-table-hover-color: var(--brand-text); --bs-table-border-color: var(--brand-border); }
html[data-crm-theme] body :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.brand-editor-grid { display: grid; grid-template-columns: minmax(300px,1fr) minmax(320px,1fr); gap: 32px; }
.brand-asset-field { display: grid; gap: 6px; margin-bottom: 18px; }
.brand-palette { margin: 16px 0; padding: 14px; border: 1px solid var(--brand-border); border-radius: 12px; }
.brand-palette summary { font-weight: 600; cursor: pointer; }
.brand-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.brand-color-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.brand-color-field input { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--brand-border); border-radius: 6px; background: var(--brand-surface); }
.brand-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.brand-preview-area { align-self: start; position: sticky; top: 90px; }
.brand-preview { display: grid; grid-template-columns: 110px 1fr; background: var(--preview-background); color: var(--preview-text); border: 1px solid var(--preview-border); border-radius: 14px; overflow: hidden; margin-bottom: 18px; min-height: 310px; font-size: 12px; }
.brand-preview-sidebar { display: flex; flex-direction: column; gap: 18px; padding: 18px 12px; background: var(--preview-sidebar); color: var(--preview-sidebar-text); }
.brand-preview img { max-width: 100%; height: 32px; object-fit: contain; object-position: left; }
.brand-preview-main { padding: 16px; min-width: 0; }
.brand-preview-main > small, .brand-preview-card > small { color: var(--preview-muted); }
.brand-preview-card { border: 1px solid var(--preview-border); background: var(--preview-surface); color: var(--preview-text); padding: 14px; border-radius: 10px; margin-top: 12px; }
.brand-preview-card h6 { color: var(--preview-text); margin: 12px 0; font-size: 14px; }
.brand-preview-input { padding: 8px; border: 1px solid var(--preview-border); border-radius: 5px; color: var(--preview-muted); margin-bottom: 8px; }
.brand-preview button { width: 100%; padding: 8px; border: 0; border-radius: 5px; color: var(--preview-on-primary); background: var(--preview-primary); }
.brand-preview button:hover { background: var(--preview-primary-hover); }
.brand-preview-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--preview-border); margin-bottom: 8px; }
.brand-preview-row span { border-left: 3px solid var(--preview-accent); padding-left: 6px; }
.brand-preview-icons { display: flex; gap: 12px; margin-top: 12px; background: var(--preview-surface-alt); padding: 8px; border-radius: 5px; }
.brand-preview-icons img { width: 24px; height: 24px; }
#brand-contrast-warnings { font-size: 12px; padding: 14px; border: 1px solid var(--brand-border); border-radius: 10px; }
#brand-contrast-warnings p { margin: 8px 0 0; }
@media (max-width: 1100px) { .brand-editor-grid { grid-template-columns: 1fr; } .brand-preview-area { position: static; } }
@media (max-width: 600px) { .brand-color-grid { grid-template-columns: 1fr; } }
html[data-crm-theme] body :is(h1,h2,h3,h4,h5,h6,.card-title,.page-title,.form-label) { color: var(--brand-text) !important; }
html[data-crm-theme] body .brand-preview :is(h1,h2,h3,h4,h5,h6) { color: var(--preview-text) !important; }
@media (min-width: 1101px) { .brand-preview-area { max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 8px; } }
html[data-crm-theme] body .crm-sidebar-brand span { background: transparent !important; border-color: var(--brand-sidebar-text) !important; }
/* Give configurable wordmarks room to remain readable, regardless of brand. */
html[data-crm-theme] body .crm-login-brand img { width: 240px; max-width: calc(100% - 70px); height: auto; max-height: 64px; object-fit: contain; object-position: left; }
html[data-crm-theme] body .crm-sidebar-brand img { width: 164px; max-width: 100%; max-height: 42px; object-fit: contain; object-position: left; }
html[data-crm-theme] body .crm-sidebar-brand span { display: none; }
html[data-crm-theme] body .crm-kicker { color: var(--brand-primary) !important; }
html[data-crm-theme="dark"] body .crm-kpi-value { color: var(--brand-text) !important; }
html[data-crm-theme] body .crm-gauge-svg text { fill: var(--brand-text); }
html[data-crm-theme] body .crm-gauge-svg text:last-of-type { fill: var(--brand-muted); }
html[data-crm-theme] body .crm-gauge-svg path:first-of-type { stroke: var(--brand-border); }
html[data-crm-theme] body .crm-gauge-svg path:last-of-type { stroke: var(--brand-primary); }
html[data-crm-theme="dark"] body .crm-badge-pct { color: #7ee6b3 !important; background: #123f36 !important; }
/* Forms inside dialogs use the selected palette, including segmented controls. */
html[data-crm-theme] body .crm-form-section { background: var(--brand-surface-alt); color: var(--brand-text); border-color: var(--brand-border); }
html[data-crm-theme] body .crm-segmented-control { background: var(--brand-surface); border-color: var(--brand-border); }
html[data-crm-theme] body .crm-segmented-control button { flex: 1; color: var(--brand-text); }
html[data-crm-theme] body .crm-segmented-control button.active { background: var(--brand-primary); color: var(--brand-on-primary); box-shadow: none; }
html[data-crm-theme] body .modal-header,
html[data-crm-theme] body .modal-footer { background: var(--brand-surface); border-color: var(--brand-border); }
html[data-crm-theme] body .btn-close { background: none !important; filter: none; color: var(--brand-text); opacity: 1; display: inline-grid; place-items: center; }
html[data-crm-theme] body .btn-close::before { content: "\00d7"; font: 28px/1 sans-serif; }
@media (max-width: 575px) { .crm-modal .modal-body { padding: 16px; } .crm-form-section { padding: 16px; } }

.crm-theme-control { display: flex; align-items: center; margin-inline: 12px; }
.crm-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--brand-border); border-radius: 10px; background: var(--brand-surface); color: var(--brand-text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.crm-theme-toggle:hover { background: var(--brand-surface-alt); }
[data-theme-icon="dark"], html[data-crm-theme="dark"] [data-theme-icon="light"] { display: none; }
html[data-crm-theme="dark"] [data-theme-icon="dark"] { display: block; }
@media (max-width: 600px) { .crm-theme-control { margin-inline: 6px; } .crm-theme-toggle { padding-inline: 10px; } }

/* The header spans the workspace independently of the content's padding. */
html[data-crm-theme] body.crm-admin-body .crm-topbar {
  position: fixed !important;
  top: 0;
  left: var(--crm-sidebar-w) !important;
  right: 0;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding-inline: 20px;
  border-radius: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.crm-topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.crm-topbar-actions .crm-theme-control { margin: 0; }
@media (max-width: 991px) {
  html[data-crm-theme] body.crm-admin-body .crm-topbar { position: sticky !important; left: 0 !important; right: auto; width: 100%; padding-inline: 14px; }
  .crm-topbar-actions { gap: 8px; }
}