/*
 * NAIA Agents: atomic theme modes and restrained product chrome.
 * Loaded after app.css. Tenant palettes own accent tokens; themes own surfaces.
 */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070a0f;
  --panel: #0c111a;
  --panel-2: #111824;
  --raised: #161f2e;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.12);
  --text: #eef2f8;
  --dim: #9aa6b8;
  --mute: #8591a5;
  --bg-primary: #070a0f;
  --bg-secondary: #0b0f17;
  --bg-card: rgba(255,255,255,0.035);
  --bg-card-solid: #0c111a;
  --text-primary: #eef2f8;
  --text-secondary: #9aa6b8;
  --text-dim: #9aa6b8;
  --text-muted: #8591a5;
  --border-color: rgba(255,255,255,0.07);
  --border-hover: rgba(34,224,214,0.30);
  --sidebar-chrome: rgba(8,11,17,0.82);
  --sidebar-chrome-border: rgba(255,255,255,0.06);
  --sidebar-chrome-text: #eef2f8;
  --sidebar-chrome-muted: #9aa6b8;
  --sidebar-bg: var(--sidebar-chrome);
  --sidebar-border: var(--sidebar-chrome-border);
  --input-bg: rgba(255,255,255,0.025);
  --modal-bg: #0b0f17;
  --table-hover: rgba(34,224,214,0.045);
  --scrollbar-bg: #070a0f;
  --scrollbar-thumb: rgba(255,255,255,0.10);
  --theme-canvas: #070a0f;
  --theme-surface: #0c111a;
  --theme-raised: #161f2e;
  --theme-sidebar: var(--sidebar-chrome);
  --theme-sidebar-text: var(--sidebar-chrome-text);
  --theme-sidebar-muted: var(--sidebar-chrome-muted);
  --theme-sidebar-hover: rgba(255,255,255,0.045);
  --theme-overlay: rgba(7, 10, 15, 0.82);
  --theme-focus-offset: #070a0f;
  --theme-card-shadow: none;
  --toast-success-bg: #34e89e;
  --toast-success-fg: #05241a;
  --toast-error-bg: #ff5d6c;
  --toast-error-fg: #2b060a;
  --toast-neutral-bg: #0f172a;
  --toast-neutral-fg: #f8fafc;
  --toast-border: rgba(255,255,255,0.14);
}

/*
 * Light content palette — soft blue-gray, owner-approved 2026-07-15.
 * SHARED by light and hybrid: hybrid composes by REFERENCE (this block is the
 * single source of light content tokens; hybrid adds only the dark chrome).
 */
:root:is([data-theme="light"],[data-theme="hybrid"]) {
  color-scheme: light;
  --bg: #f4f6fb;
  --panel: #fbfcfe;
  --panel-2: #f1f4f9;
  --raised: #e9edf4;
  --line: #dbe2ec;
  --line-strong: #b8c5d6;
  --text: #0f172a;
  --dim: #475569;
  --mute: #5f6b7c;
  --bg-primary: #f4f6fb;
  --bg-secondary: #f8f9fc;
  --bg-card: #fbfcfe;
  --bg-card-solid: #fbfcfe;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-dim: #475569;
  --text-muted: #5f6b7c;
  --border-color: #dbe2ec;
  --border-hover: #94a3b8;
  --input-bg: #fbfcfe;
  --modal-bg: #fbfcfe;
  --table-hover: #e9edf4;
  --scrollbar-bg: #f4f6fb;
  --scrollbar-thumb: #b8c5d6;
  --theme-canvas: #f4f6fb;
  --theme-surface: #fbfcfe;
  --theme-raised: #e9edf4;
  --theme-overlay: rgba(15, 23, 42, 0.62);
  --theme-focus-offset: #f4f6fb;
  --theme-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.035);
  --legacy-foreground-strong: #0f172a;
  --legacy-foreground-muted: #475569;
  --legacy-on-accent: #f8fafc;
  --toast-success-bg: #15803d;
  --toast-success-fg: #f8fafc;
  --toast-error-bg: #dc2626;
  --toast-error-fg: #f8fafc;
  --toast-neutral-bg: #0f172a;
  --toast-neutral-fg: #f8fafc;
  --toast-border: rgba(15,23,42,0.16);
}

/* Light chrome: the sidebar is the only token family the two modes disagree on. */
:root[data-theme="light"] {
  --sidebar-bg: #eef2f7;
  --sidebar-border: #d7deea;
  --theme-sidebar: #eef2f7;
  --theme-sidebar-text: #0f172a;
  --theme-sidebar-muted: #526075;
  --theme-sidebar-hover: #e3e9f2;
}

/*
 * Hybrid chrome: the dark sidebar rendered OPAQUE.
 * Dark uses --sidebar-chrome: rgba(8,11,17,0.82). Over the dark canvas #070a0f
 * that resolves to the solid #080b11 and looks solid. In hybrid the sidebar sits
 * over LIGHT content (#eef1f7), so the 18% transparency lets the light bleed
 * through and washes the sidebar a shade lighter than the dark theme. We point
 * the intermediary chrome tokens at the PRE-COMPOSITED solids, so the hybrid
 * sidebar is pixel-identical to the dark one regardless of the content behind it.
 * The dark theme keeps its alpha (untouched). Text/muted are already opaque and
 * inherited from :root. Border #171a1f = rgba(255,255,255,0.06) over #080b11,
 * exactly how the dark sidebar border appears.
 */
:root[data-theme="hybrid"] {
  --sidebar-chrome: #080b11;
  --sidebar-chrome-border: #171a1f;
  --sidebar-bg: var(--sidebar-chrome);
  --sidebar-border: var(--sidebar-chrome-border);
  --theme-sidebar: var(--sidebar-chrome);
  --theme-sidebar-text: var(--sidebar-chrome-text);
  --theme-sidebar-muted: var(--sidebar-chrome-muted);
  --theme-sidebar-hover: #111824;
}

/* Hybrid uses the light content canvas, therefore accent text must use the
 * contrast-safe light variants too. This keeps tenant palettes at WCAG AA on
 * both the owner eyebrow and raised avatar surface. */
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="ciano"]{
  --accent:#0e7490; --accent-deep:#155e75; --accent-glow:rgba(14,116,144,0.10); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="azul"]{
  --accent:#2450a4; --accent-deep:#183d86; --accent-glow:rgba(36,80,164,0.07); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="azul_pastel"]{
  --accent:#3d5f8f; --accent-deep:#2e4a74; --accent-glow:rgba(61,95,143,0.07); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="lavanda"]{
  --accent:#675384; --accent-deep:#503e6d; --accent-glow:rgba(103,83,132,0.07); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="salvia"]{
  --accent:#3f6847; --accent-deep:#315439; --accent-glow:rgba(63,104,71,0.07); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="areia"]{
  --accent:#76572e; --accent-deep:#5f4524; --accent-glow:rgba(118,87,46,0.07); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="rose"]{
  --accent:#834656; --accent-deep:#6b3544; --accent-glow:rgba(131,70,86,0.07); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="roxo"]{
  --accent:#7c3aed; --accent-deep:#6d28d9; --accent-glow:rgba(124,58,237,0.14); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="ambar"]{
  --accent:#92400e; --accent-deep:#78350f; --accent-glow:rgba(146,64,14,0.12); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="esmeralda"]{
  --accent:#047857; --accent-deep:#065f46; --accent-glow:rgba(4,120,87,0.12); --on-accent:#fff;
}
:root:is([data-theme="light"],[data-theme="hybrid"])[data-palette="magenta"]{
  --accent:#be185d; --accent-deep:#9d174d; --accent-glow:rgba(190,24,93,0.12); --on-accent:#fff;
}

/* Static compatibility is deliberately scoped to application content. */
:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area :where(
  [class~="text-white"],
  [class*="text-white/"],
  [style*="color:#fff" i],
  [style*="color: #fff" i],
  [style*="color:white" i],
  [style*="color: white" i]
) {
  color: var(--legacy-foreground-muted) !important;
}

:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area :where(h1,h2,h3,h4,[class~="text-white"]) {
  color: var(--legacy-foreground-strong) !important;
}

:root[data-theme="hybrid"] .sidebar :where(
  [class~="text-white"],
  [class*="text-white/"],
  [style*="color:#fff" i],
  [style*="color: #fff" i],
  [style*="color:white" i],
  [style*="color: white" i]
) {
  color: var(--theme-sidebar-muted) !important;
}

:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area :where(
  .theme-on-accent,
  .btn-primary,
  .bill-btn,
  .ctxp-btn.primary,
  .crm-btn-primary
),
:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area :where(
  .theme-on-accent,
  .btn-primary,
  .bill-btn,
  .ctxp-btn.primary,
  .crm-btn-primary
) :where(svg,path,span) {
  color: var(--legacy-on-accent) !important;
}

:root:is([data-theme="light"],[data-theme="hybrid"]) .main-area .theme-on-accent :where(svg,path) {
  stroke: currentColor;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  animation: none !important;
  transition: none !important;
}

html,
body,
#app-wrapper,
.main-area {
  background-color: var(--theme-canvas) !important;
  background-image: none !important;
  color: var(--text) !important;
}

.main-area .page {
  color: var(--text) !important;
}

:root[data-theme] .sidebar,
:root:not([data-theme]) .sidebar {
  background: var(--theme-sidebar) !important;
  border-color: var(--sidebar-border) !important;
  box-shadow: none !important;
}

:root[data-theme] .sidebar .sidebar-logo,
:root[data-theme] .sidebar .sidebar-label,
:root[data-theme] .sidebar .nav-item,
:root[data-theme] .sidebar .logout-btn,
:root[data-theme] .sidebar #ctx-switcher,
:root:not([data-theme]) .sidebar .sidebar-logo,
:root:not([data-theme]) .sidebar .sidebar-label,
:root:not([data-theme]) .sidebar .nav-item,
:root:not([data-theme]) .sidebar .logout-btn,
:root:not([data-theme]) .sidebar #ctx-switcher {
  color: var(--theme-sidebar-muted) !important;
}

:root[data-theme] .sidebar .sidebar-logo,
:root[data-theme] .sidebar .sidebar-logo .sidebar-label,
:root[data-theme] .sidebar .nav-item:hover,
:root[data-theme] .sidebar .logout-btn:hover,
:root[data-theme] .sidebar #ctx-switcher:hover,
:root:not([data-theme]) .sidebar .sidebar-logo,
:root:not([data-theme]) .sidebar .sidebar-logo .sidebar-label,
:root:not([data-theme]) .sidebar .nav-item:hover,
:root:not([data-theme]) .sidebar .logout-btn:hover,
:root:not([data-theme]) .sidebar #ctx-switcher:hover {
  color: var(--theme-sidebar-text) !important;
}

:root[data-theme] .sidebar .nav-item:hover,
:root[data-theme] .sidebar .logout-btn:hover,
:root[data-theme] .sidebar #ctx-switcher:hover,
:root:not([data-theme]) .sidebar .nav-item:hover,
:root:not([data-theme]) .sidebar .logout-btn:hover,
:root:not([data-theme]) .sidebar #ctx-switcher:hover {
  background-color: var(--theme-sidebar-hover) !important;
}

:root[data-theme] .sidebar .nav-item.active,
:root:not([data-theme]) .sidebar .nav-item.active {
  background-color: var(--accent-glow) !important;
  color: var(--theme-sidebar-text) !important;
  outline: 1px solid var(--accent-deep);
  outline-offset: -1px;
}

:root[data-theme] .sidebar .nav-item .nav-icon,
:root[data-theme] .sidebar .nav-item[data-page] .nav-icon,
:root:not([data-theme]) .sidebar .nav-item .nav-icon,
:root:not([data-theme]) .sidebar .nav-item[data-page] .nav-icon {
  color: currentColor !important;
}

:root[data-theme] .sidebar .nav-item.active .nav-icon,
:root:not([data-theme]) .sidebar .nav-item.active .nav-icon {
  color: var(--accent) !important;
}

/* Stable per-route icon identity. Text and menu containers keep theme colors. */
.sidebar-nav .nav-item[data-page="own-agencias"] { --nav-icon-color: #60a5fa; }
.sidebar-nav .nav-item[data-page="contas"] { --nav-icon-color: #22d3ee; }
.sidebar-nav .nav-item[data-page="own-faturamento"] { --nav-icon-color: #34d399; }
.sidebar-nav .nav-item[data-page="cdkey"] { --nav-icon-color: #fdba74; }
.sidebar-nav .nav-item[data-page="agents"] { --nav-icon-color: #a78bfa; }
.sidebar-nav .nav-item[data-page="own-config"] { --nav-icon-color: #f0abfc; }
.sidebar-nav .nav-item[data-page="own-manual"] { --nav-icon-color: #fda4af; }
.sidebar-nav .nav-item[data-page="agc-subcontas"] { --nav-icon-color: #2dd4bf; }
.sidebar-nav .nav-item[data-page="agc-faturamento"] { --nav-icon-color: #4ade80; }
.sidebar-nav .nav-item[data-page="agc-config"] { --nav-icon-color: #c084fc; }
.sidebar-nav .nav-item[data-page="dashboard"] { --nav-icon-color: #38bdf8; }
.sidebar-nav .nav-item[data-page="ig-metrics"] { --nav-icon-color: #e879f9; }
.sidebar-nav .nav-item[data-page="prospeccao"] { --nav-icon-color: #fb923c; }
.sidebar-nav .nav-item[data-page="crm"] { --nav-icon-color: #818cf8; }
.sidebar-nav .nav-item[data-page="conversas"] { --nav-icon-color: #10b981; }
.sidebar-nav .nav-item[data-page="contatos"] { --nav-icon-color: #f43f5e; }
.sidebar-nav .nav-item[data-page="campanhas"] { --nav-icon-color: #f87171; }
.sidebar-nav .nav-item[data-page="automacoes"] { --nav-icon-color: #a3e635; }
.sidebar-nav .nav-item[data-page="agendamento"] { --nav-icon-color: #fde047; }
.sidebar-nav .nav-item[data-page="vendas"] { --nav-icon-color: #14b8a6; }
.sidebar-nav .nav-item[data-page="meta-ads"] { --nav-icon-color: #fb7185; }
.sidebar-nav .nav-item[data-page="channels"] { --nav-icon-color: #67e8f9; }
.sidebar-nav .nav-item[data-page="products"] { --nav-icon-color: #c4b5fd; }
.sidebar-nav .nav-item[data-page="minha-conta"] { --nav-icon-color: #bef264; }
.sidebar-nav .nav-item[data-page="configuracoes"] { --nav-icon-color: #94a3b8; }
.sidebar-nav .nav-item[data-page="manual"] { --nav-icon-color: #5eead4; }

:root[data-theme="light"] .sidebar-nav .nav-item[data-page="own-agencias"] { --nav-icon-color: #2563eb; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="contas"] { --nav-icon-color: #0891b2; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="own-faturamento"] { --nav-icon-color: #059669; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="cdkey"] { --nav-icon-color: #ea580c; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="agents"] { --nav-icon-color: #7c3aed; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="own-config"] { --nav-icon-color: #be185d; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="own-manual"] { --nav-icon-color: #9f1239; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="agc-subcontas"] { --nav-icon-color: #0f766e; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="agc-faturamento"] { --nav-icon-color: #15803d; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="agc-config"] { --nav-icon-color: #9333ea; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="dashboard"] { --nav-icon-color: #0369a1; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="ig-metrics"] { --nav-icon-color: #c026d3; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="prospeccao"] { --nav-icon-color: #c2410c; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="crm"] { --nav-icon-color: #4f46e5; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="conversas"] { --nav-icon-color: #047857; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="contatos"] { --nav-icon-color: #be123c; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="campanhas"] { --nav-icon-color: #dc2626; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="automacoes"] { --nav-icon-color: #4d7c0f; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="agendamento"] { --nav-icon-color: #ca8a04; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="vendas"] { --nav-icon-color: #0d9488; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="meta-ads"] { --nav-icon-color: #e11d48; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="channels"] { --nav-icon-color: #0e7490; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="products"] { --nav-icon-color: #6d28d9; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="minha-conta"] { --nav-icon-color: #65a30d; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="configuracoes"] { --nav-icon-color: #475569; }
:root[data-theme="light"] .sidebar-nav .nav-item[data-page="manual"] { --nav-icon-color: #115e59; }

:root[data-theme] .sidebar .sidebar-nav .nav-item[data-page] > .nav-icon,
:root[data-theme] .sidebar .sidebar-nav .nav-item[data-page] > .nav-icon > svg,
:root:not([data-theme]) .sidebar .sidebar-nav .nav-item[data-page] > .nav-icon,
:root:not([data-theme]) .sidebar .sidebar-nav .nav-item[data-page] > .nav-icon > svg {
  color: var(--nav-icon-color) !important;
}

:root[data-theme="light"] .sidebar-logo .icon {
  background: #e7ecf4 !important;
  border-color: #b8c5d6 !important;
  color: var(--accent-deep) !important;
  box-shadow: none !important;
}

/* Hybrid logo chip shares the dark chrome rule below (composition, no own colors). */
:root[data-theme="hybrid"] .sidebar-logo .icon,
:root[data-theme="dark"] .sidebar-logo .icon,
:root:not([data-theme]) .sidebar-logo .icon {
  background: #0c111a !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.main-area :where(
  .glass,
  .glass-strong,
  .glass-card,
  .glass-card-inner,
  .card,
  .panel,
  .detail-section,
  .agent-card,
  .channel-card,
  .ctxp-card,
  .modal,
  .crm-modal,
  .crm-popover,
  [role="dialog"],
  [role="menu"],
  [role="listbox"]
) {
  background-color: var(--theme-surface) !important;
  background-image: none !important;
  border-color: var(--line) !important;
  backdrop-filter: none !important;
  box-shadow: var(--theme-card-shadow, none) !important;
  color: var(--text) !important;
}

.main-area :where(.modal-overlay,.crm-modal-overlay,.drawer-overlay) {
  background: var(--theme-overlay) !important;
  backdrop-filter: none !important;
}

.main-area :where(
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .input,
  .crm-input,
  .crm-textarea
) {
  background-color: var(--input-bg) !important;
  background-image: none !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

.main-area :where(input,textarea)::placeholder {
  color: var(--mute) !important;
  opacity: 1;
}

.main-area :where(button,input,textarea,select,[aria-disabled="true"]):disabled,
.main-area [aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
}

:where(.sidebar,.main-area,.theme-mode-menu) :where(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline: 3px solid var(--accent-deep) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--theme-focus-offset) !important;
}

.main-area :where(table,thead,tbody,tr,th,td) {
  background-color: var(--theme-surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.main-area tbody tr:hover td {
  background-color: var(--table-hover) !important;
}

/* Accessible three-way theme chooser injected by theme-crm-clean.js. */
.theme-mode-menu {
  position: fixed;
  z-index: 10000;
  display: grid;
  gap: 4px;
  width: min(224px, calc(100vw - 24px));
  padding: 6px;
  background: var(--theme-surface) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28) !important;
}

.theme-mode-menu[hidden] {
  display: none !important;
}

.theme-mode-option {
  display: grid;
  grid-template-columns: 20px 1fr 16px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  color: var(--text) !important;
  text-align: left;
  cursor: pointer;
}

.theme-mode-option:hover {
  background: var(--theme-raised) !important;
  border-color: var(--line) !important;
}

.theme-mode-option[aria-checked="true"] {
  background: var(--accent-glow) !important;
  border-color: var(--accent-deep) !important;
}

.theme-mode-option__label {
  display: grid;
  gap: 1px;
  font-size: 13px;
  font-weight: 650;
}

.theme-mode-option__label small {
  color: var(--dim);
  font-size: 11px;
  font-weight: 450;
}

.theme-mode-option__check {
  color: var(--accent-deep);
  font-weight: 800;
}

/* CRM Kanban: one surface, one icon color, no decorative stage color. */
#page-crm .crm-board-wrap,
#page-crm .crm-column,
#page-crm .crm-col-head,
#page-crm .crm-col-cards,
#page-crm .crm-card,
#page-crm .crm-card-body {
  background-color: var(--theme-surface) !important;
  background-image: none !important;
}

#page-crm .crm-column {
  background-color: #000000 !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

#page-crm .crm-column > .crm-col-head,
#page-crm .crm-column > .crm-col-cards {
  background-color: #000000 !important;
  background-image: none !important;
}

#page-crm .crm-column::before,
#page-crm .crm-card-cover,
#page-crm .crm-modal-cover {
  display: none !important;
  content: none !important;
}

#page-crm .crm-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  transform: none !important;
  min-width: 0;
}

#page-crm .crm-card-body,
#page-crm .crm-card-toprow,
#page-crm .crm-card-titlerow,
#page-crm .crm-card-titlecol {
  min-width: 0;
}

#page-crm .crm-card-toprow {
  align-items: flex-start;
}

#page-crm .crm-card-titlerow {
  flex: 1 1 auto;
  max-width: 100%;
}

#page-crm .crm-card-titlecol {
  overflow: hidden;
}

#page-crm .crm-card-title {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#page-crm .crm-card-badges-right {
  flex: 0 1 46%;
  min-width: 0;
  max-width: 46%;
  align-items: stretch;
}

#page-crm .crm-card-badges-right .crm-card-tag {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-crm .crm-card-sale,
#page-crm .crm-card-sale-text,
#page-crm .crm-card-meta {
  min-width: 0;
}

#page-crm .crm-card-meta {
  flex-wrap: wrap;
}

#page-crm .crm-card:hover {
  background-color: var(--theme-raised) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

#page-crm .crm-card-selected {
  border-color: var(--accent-deep) !important;
  outline: 2px solid var(--accent-glow) !important;
  outline-offset: 1px !important;
}

#page-crm .crm-card-avatar,
#page-crm .crm-ch,
#page-crm .crm-card-tag,
#page-crm .crm-card-tag.client,
#page-crm .crm-card-tag.user,
#page-crm .crm-card-tag.won,
#page-crm .crm-card-tag.lost,
#page-crm .crm-card-tag.overdue,
#page-crm .crm-ig-followers,
#page-crm .crm-card-sale,
#page-crm .crm-card-stage-age,
#page-crm .crm-card-stage-age.stale {
  background-color: var(--theme-raised) !important;
  border-color: var(--line) !important;
  color: var(--dim) !important;
  box-shadow: none !important;
}

#page-crm .crm-card-title,
#page-crm .crm-card-sale-value,
#page-crm .crm-card-value {
  color: var(--text) !important;
}

#page-crm .crm-card-source,
#page-crm .crm-card-bio,
#page-crm .crm-card-sale-prod,
#page-crm .crm-card-due,
#page-crm .crm-card-due.overdue,
#page-crm .crm-card-meta,
#page-crm .crm-card-meta .crm-card-due.overdue,
#page-crm .crm-card-stage-age,
#page-crm .crm-card-stage-age.stale {
  color: var(--mute) !important;
}

#page-crm .crm-ch,
#page-crm .crm-ch.email,
#page-crm .crm-ch.wa,
#page-crm .crm-ch.ig,
#page-crm .crm-ig-verified,
#page-crm .crm-card-meta svg,
#page-crm .crm-card-source svg {
  color: var(--dim) !important;
}

#page-crm .crm-ch svg,
#page-crm .crm-ig-verified,
#page-crm .crm-card-meta svg,
#page-crm .crm-card-source svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

#page-crm .crm-ch svg [fill]:not([fill="none"]),
#page-crm .crm-ig-verified [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

#page-crm .crm-ch svg [fill="none"],
#page-crm .crm-card-meta svg[fill="none"],
#page-crm .crm-card-source svg[fill="none"] {
  fill: none !important;
}

#page-crm .crm-ch:hover,
#page-crm .crm-col-add:hover,
#page-crm .crm-add-column:hover,
#page-crm .crm-col-more:hover {
  background-color: var(--theme-raised) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

#page-crm .crm-col-head input.col-name,
#page-crm .crm-col-count,
#page-crm .crm-col-winprob,
#page-crm .crm-col-selall,
#page-crm .crm-col-menu,
#page-crm .crm-col-add,
#page-crm .crm-add-column,
#page-crm .crm-col-more,
#page-crm .crm-col-more-rest {
  color: var(--dim) !important;
}

#page-crm .crm-col-head input.col-name:focus,
#page-crm .crm-col-selall:hover,
#page-crm .crm-col-menu:hover {
  color: var(--text) !important;
}

@media (max-width: 900px) {
  .theme-mode-menu {
    right: 12px !important;
    left: auto !important;
  }

  #page-crm .crm-board-wrap {
    padding: 14px !important;
    gap: 12px !important;
    scroll-padding-inline: 14px;
  }

  #page-crm .crm-column {
    flex-basis: min(88vw, 320px) !important;
    width: min(88vw, 320px) !important;
    min-width: min(88vw, 320px) !important;
    max-width: min(88vw, 320px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-mode-menu,
  .theme-mode-option,
  #page-crm .crm-card,
  #page-crm .crm-ch {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
/* Credential control belongs only to an owner/admin operating a subaccount. */
.nav-item[data-credential-account]{display:none!important}
body[data-ctx="operating"][data-context-account-admin="1"] .nav-item[data-credential-account]{display:flex!important}