/* CRM Vendas — design system.
   CSS custom properties, not hardcoded colors, so white-label tenant theming
   (Tenant.PrimaryColor) can override --brand-* per request via an inline
   <style> block in _Layout.cshtml without touching this file. */

:root {
  --brand-primary: #4f46e5;
  --brand-primary-rgb: 79, 70, 229;
  --brand-primary-hover: #4338ca;
  --brand-primary-light: #eef2ff;

  --sidebar-bg: #111827;
  --sidebar-text: #9ca3af;
  --sidebar-text-hover: #f3f4f6;
  --sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --content-bg: #f8f9fc;
  --card-bg: #ffffff;
  --card-border: #e9ebf1;
  --text-primary: #111827;
  --text-muted: #6b7280;
  /* Second-round additions (tema claro/escuro) — each mirrors a literal hex
     value that was scattered across this file with the exact same shade, so
     tokenizing them was a zero-diff change in light mode; see the
     [data-bs-theme="dark"] block near the end of this file for their dark
     counterparts. Deliberately NOT reused inside the template cover,
     proposal cover, template preview, section-row or kb-article-page
     selectors — those render a simulated printed document (a Proposta or
     a knowledge-base artigo), which stays paper-white on purpose regardless
     of the app's own theme. */
  --text-heading: #0f172a;
  --text-strong: #334155;
  --text-muted-alt: #64748b;
  --text-faint: #94a3b8;
  --subtle-surface: #f1f5f9;
  --danger-text: #b91c1c;
  --warn-text: #9a3412;
  --radius-sm: 8px;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  --sidebar-width: 248px;
  --sidebar-width-collapsed: 76px;

  --ok: #0e7c66;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --warn-bg: #fff7ed;
  --warn-line: #fed7aa;
  --row-hover: #f8fafc;
  --track: #eef2f7;
  --info: #0369a1;
  --accent-alt: #7c3aed;
  --kanban-bg: #edf1f6;

  --transition: all 0.18s ease-in-out;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--content-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover {
  color: var(--brand-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.text-muted {
  color: var(--text-muted) !important;
}

/* ---------- App shell: sidebar + main ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: var(--transition);
  /* Firefox: a thin, dark rail instead of the browser's default chunky
     scrollbar — reported "não pode haver barra de rolagem... não fica
     bonita" (a tenant with many modules/sections enabled needs the sidebar
     to actually scroll, so hiding it outright isn't an option — this keeps
     it functional but visually out of the way). */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Chromium/Safari/Edge: same intent via the WebKit-only pseudo-elements —
   a slim track that blends into the dark sidebar and only reads as a
   scrollbar once you actually hover/scroll it. */
.app-sidebar::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Collapsed: icon-only rail — desktop only, toggled by #sidebarToggleBtn and
   persisted in localStorage (see site.js) so it survives a page reload. */
.app-shell.sidebar-collapsed .app-sidebar {
  width: var(--sidebar-width-collapsed);
}

.app-shell.sidebar-collapsed .sidebar-brand-name,
.app-shell.sidebar-collapsed .sidebar-section-label,
.app-shell.sidebar-collapsed .sidebar-subsection-label,
.app-shell.sidebar-collapsed .sidebar-nav-link-text {
  display: none;
}

/* Icon-only rail mode always shows every icon regardless of each section's
   own collapsed/expanded state — there's no long list to shorten once the
   text labels are already hidden, so per-section collapse would just hide
   items without saving any space. */
.app-shell.sidebar-collapsed .sidebar-section-body {
  display: flex !important;
}

.app-shell.sidebar-collapsed .sidebar-brand {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.app-shell.sidebar-collapsed .sidebar-brand-mark {
  max-height: 40px;
}

.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem 1.15rem;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Sized to fit its content (logo or fallback initial), not a fixed square —
   a fixed box + object-fit:cover was cropping/distorting real (non-square)
   tenant logos. min-height/min-width only apply to the no-logo fallback
   letter, so a real logo can be genuinely bigger than the old 34px mark. */
.sidebar-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 64px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: var(--brand-primary);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  padding: 4px;
}

/* A real uploaded logo drops the brand-color fallback square entirely —
   forcing a white (or any other) card behind it fought with logos that are
   light-colored/white themselves (transparent PNG meant to sit on a dark
   background, like the sidebar already is), making them unreadable. No
   background here means the logo's own file — transparent or with its own
   baked-in background color — renders exactly as authored. */
.sidebar-brand-mark-has-logo {
  background: transparent;
  padding: 0;
  min-width: 0;
  min-height: 0;
}

.sidebar-brand-mark img {
  display: block;
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sidebar-brand-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sidebar-nav {
  flex: 1;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: var(--sidebar-nav-font-size, 12.5px);
  font-weight: 500;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar-nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar-nav-link:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-hover);
  text-decoration: none;
}

.sidebar-nav-link.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--brand-primary);
}

.sidebar-nav-link.active svg {
  opacity: 1;
}

.sidebar-nav-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-primary);
  flex-shrink: 0;
}

.sidebar-section-label {
  padding: 1rem 0.85rem 0.35rem;
  font-size: var(--sidebar-section-font-size, 0.7rem);
  font-weight: var(--sidebar-section-weight, 700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-section-color, rgba(var(--brand-primary-rgb), 0.9));
}

.sidebar-section-toggle:hover {
  color: #fff;
}

/* A lighter-weight label nested inside a section (e.g. "Integrações" under
   "Parâmetros do Sistema"), grouping one or more sidebar-nav-link-nested
   items without opening a whole new top-level section. */
.sidebar-subsection-label {
  padding: 0.6rem 0.85rem 0.2rem 1.15rem;
  font-size: var(--sidebar-section-font-size, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sidebar-section-color, rgba(var(--brand-primary-rgb), 0.75));
}

.sidebar-nav-link-nested {
  padding-left: 1.15rem;
}

/* Collapsible sections: each top-level group (CRM, Vendas, CPQ, Parâmetros do
   Sistema) and the nested "Integrações" subsection can be toggled shut so a
   tenant with every module enabled doesn't end up scrolling through a long
   sidebar just to reach the item they actually use. State is per-section,
   persisted in localStorage by site.js. */
.sidebar-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* font-family only — NOT the `font` shorthand. This class is always
     combined with .sidebar-section-label on the same <button> (see
     _Layout.cshtml); `font: inherit` also resets font-size/font-weight,
     which silently discarded --sidebar-section-font-size/-weight (the
     tenant's "Tamanho/realce da letra da seção" settings had zero visible
     effect because of this, since both classes share the same specificity
     and this one is declared later in the stylesheet). */
  font-family: inherit;
}

.sidebar-section-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.sidebar-section.collapsed .sidebar-section-body,
.sidebar-subsection.collapsed .sidebar-section-body {
  display: none;
}

.sidebar-section.collapsed > .sidebar-section-toggle .sidebar-section-chevron,
.sidebar-subsection.collapsed > .sidebar-section-toggle .sidebar-section-chevron {
  transform: rotate(-90deg);
}

.sidebar-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Bulk collapse/expand for every section at once (site.js) — literal
   #2A3446 border color, no equivalent token today, only used here. */
.sidebar-footer-actions {
  display: flex;
  gap: 6px;
  padding: 0.5rem 0.75rem 0.25rem;
}

.sidebar-footer-actions button {
  flex: 1;
  height: 27px;
  border: 1px solid #2a3446;
  background: transparent;
  border-radius: 7px;
  color: var(--sidebar-text);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
}

.sidebar-footer-actions button:hover {
  border-color: var(--brand-primary);
  color: #fff;
}

.app-shell.sidebar-collapsed .sidebar-footer-actions {
  display: none;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.75rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sidebar-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.sidebar-toggle-btn:hover {
  background: var(--content-bg);
  color: var(--text-primary);
}

.sidebar-toggle-btn svg {
  width: 20px;
  height: 20px;
}

.tenant-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  width: auto;
  max-width: 260px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tenant-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.topbar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  background: transparent;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  border-radius: 999px;
  transition: var(--transition);
}

.user-menu-btn:hover {
  background: var(--content-bg);
}

.user-menu-btn::after {
  margin-left: 0.15rem;
}

.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 34px;
  padding: 0 0.6rem;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lang-switcher-btn:hover {
  background: var(--content-bg);
}

.theme-switcher-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
}

.theme-switcher-btn:hover {
  background: var(--content-bg);
}

.theme-switcher-btn svg {
  width: 17px;
  height: 17px;
}

/* Only one of the two glyphs shows at a time, matching the CURRENT resolved
   appearance (not the user's raw "system" choice) — data-bs-theme is always
   either "light" or "dark" by the time this paints, see _Layout.cshtml's
   inline script for the "system" resolution. */
.theme-switcher-icon-dark {
  display: none;
}

[data-bs-theme="dark"] .theme-switcher-icon-light {
  display: none;
}

[data-bs-theme="dark"] .theme-switcher-icon-dark {
  display: block;
}

.lang-menu {
  width: 260px;
  padding: 10px 0;
}

.lang-menu-title {
  padding: 2px 14px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lang-menu-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--text-primary);
  text-align: left;
}

.lang-menu-row:hover {
  background: var(--content-bg);
}

.lang-menu-check {
  width: 14px;
  flex-shrink: 0;
  color: var(--brand-primary);
  font-weight: 700;
}

.lang-menu-name {
  flex: 1;
  min-width: 0;
}

.lang-menu-row.selected .lang-menu-name {
  font-weight: 600;
}

.lang-menu-code {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.lang-menu-footer {
  margin-top: 6px;
  padding: 10px 14px 0;
  border-top: 1px solid var(--card-border);
}

.lang-menu-footer-note {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.app-content {
  flex: 1;
  padding: 1.75rem;
  max-width: 1200px;
  width: 100%;
}

/* Opt-in via ViewData["WideContent"] (_Layout.cshtml) — pages whose content
   genuinely needs more than 1200px, e.g. the Kanban board's multi-column
   track, without loosening the cap for every other page (forms/tables were
   designed around it). */
.app-content-wide {
  max-width: none;
}

/* ---------- Cards, tables, badges ---------- */

.card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-body {
  padding: 1.25rem 1.35rem;
}

.card-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.table {
  --bs-table-bg: transparent;
}

.table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-width: 1px;
  padding-bottom: 0.65rem;
}

.table td {
  vertical-align: middle;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.badge {
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.35em 0.65em;
  border-radius: 999px;
}

/* Novidades: badge de tipo (Novo/Melhoria/Corrigido/Observação) por item —
   largura mínima fixa para os rótulos ficarem alinhados entre linhas de
   tamanhos diferentes, e não quebrar do texto ao lado em telas estreitas. */
.release-kind-badge {
  flex: 0 0 auto;
  min-width: 5.5rem;
  text-align: center;
  margin-top: 0.1rem;
}

/* ---------- Buttons ---------- */

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  /* Darken the tenant's own brand color at request time — works for any
     custom --brand-primary without needing a precomputed hover shade. */
  background-color: color-mix(in srgb, var(--brand-primary) 85%, black);
  border-color: color-mix(in srgb, var(--brand-primary) 85%, black);
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.15);
}

.rich-text-editor {
  min-height: 260px;
  overflow-y: auto;
}

/* Used where the editor is one of several repeatable rows (Sequences step
   body) rather than a single full-page field (Proposal Templates) — same
   component, shorter default height. */
.rich-text-editor-compact {
  min-height: 120px;
}

.rich-text-editor ul,
.rich-text-editor ol {
  padding-left: 1.5rem;
}

.rich-text-editor:empty::before {
  content: attr(data-placeholder);
  color: #6c757d;
}

.rich-text-editor img {
  max-width: 100%;
}

.rich-text-editor a {
  color: var(--brand-primary);
}

/* Table inserted via the "Tabela" toolbar button (execCommand insertHTML) —
   visible grid while editing; same look wherever the section's raw HTML is
   dumped read-only (the per-row/document live previews). */
.rich-text-table,
.template-preview-section-body table {
  border-collapse: collapse;
  margin: 4px 0;
}

.rich-text-table td,
.rich-text-table th,
.template-preview-section-body table td,
.template-preview-section-body table th {
  border: 1px solid var(--card-border);
  padding: 4px 8px;
  min-width: 24px;
}

/* Small vertical separator between toolbar button groups (formatting /
   alignment / insert / merge variables). */
.toolbar-divider {
  width: 1px;
  align-self: stretch;
  background: var(--card-border);
  margin: 2px 4px;
}

/* Rich-text section toolbar (Proposal Templates) — flat icon buttons in one
   borderless strip, closer to a Gmail/Docs-style compose toolbar than the
   boxed btn-outline-secondary look this replaced. */
.rich-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  padding: 4px 6px;
  margin-bottom: 6px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}

.rich-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.rich-toolbar-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

.rich-toolbar-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rich-toolbar-select {
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 12.5px;
  padding: 0 4px;
  color: var(--text-primary);
  cursor: pointer;
  max-width: 150px;
}

.rich-toolbar-select:hover {
  background: rgba(15, 23, 42, 0.06);
}

.rich-toolbar-color {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.rich-toolbar-color:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* ---------- Page header ---------- */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  font-size: 1.4rem;
  margin: 0;
}

.agenda-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.agenda-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agenda-day-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  min-width: 220px;
}

/* ---------- Stat cards (dashboard) ---------- */

.stat-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.stat-card-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card-value {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0.35rem 0 0.85rem;
}

/* Proposal total stat card (Details): replaces .stat-card-value with one row
   per billing frequency when a proposal mixes one-time and recurring items —
   see ProposalSummary.Subtotals. */
.proposal-total-breakdown {
  margin: 0.4rem 0 0.7rem;
}

.proposal-total-breakdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.proposal-total-breakdown-row + .proposal-total-breakdown-row {
  margin-top: 2px;
}

.proposal-total-breakdown-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.proposal-total-breakdown-value {
  font-size: 1.3rem;
  font-weight: 700;
}

/* ---------- Auth pages (no sidebar) ---------- */

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
  padding: 1.5rem;
}

.auth-lang-slot {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-column {
  width: 100%;
  max-width: 412px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
}

/* Same fix already applied to .sidebar-brand-mark-has-logo: a real uploaded
   logo drops the brand-color square entirely instead of being force-cropped
   into it — most logos aren't square, and object-fit: cover was cutting
   them off. No background here so a transparent-PNG logo renders as
   authored, same reasoning as the sidebar's own comment. */
.auth-brand-mark-has-logo {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 48px;
  background: transparent;
}

.auth-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-brand-mark-has-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 48px;
  object-fit: contain;
}

.auth-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.auth-brand-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

.auth-brand-domain {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--text-faint);
}

.auth-card {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.auth-card-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted-alt);
}

.auth-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--danger-text);
}

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-field-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.auth-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e4e9f0;
  border-radius: 9px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--card-bg);
}

.auth-input:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.auth-field-hint {
  font-size: 10.5px;
  color: var(--text-faint);
}

.auth-submit {
  width: 100%;
  height: 42px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}

.auth-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
}

.auth-links a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* ---------- Auth pages: split-screen branding panel (tenant block editor
   / fixed ATTO platform shell) — dedicated auth-panel-* classes, never the
   full-page lp-* ones from landing-page.css (that stylesheet resets <body>
   in a way that must never touch the authenticated app shell, and its
   sizing assumes a whole page, not half a viewport). ---------- */

.auth-shell-split {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.auth-panel {
  flex: 1 1 55%;
  min-width: 0;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 48px;
  overflow-y: auto;
}

.auth-shell-split .auth-column {
  flex: 1 1 45%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 24px;
  /* Same literal color .auth-shell itself already uses (no dark-mode
     override exists for the auth pages today — not introduced here). */
  background: #f7f8fa;
}

.auth-panel-block + .auth-panel-block {
  margin-top: 8px;
}

.auth-panel-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.auth-panel-hero p {
  font-size: 1rem;
  opacity: 0.85;
  margin: 0 0 20px;
}

.auth-panel-hero-has-image {
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  padding: 40px;
  position: relative;
}

.auth-panel-hero-has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
  z-index: 0;
}

.auth-panel-hero-has-image h1,
.auth-panel-hero-has-image p,
.auth-panel-hero-has-image .auth-panel-btn {
  position: relative;
  z-index: 1;
}

.auth-panel-btn {
  display: inline-block;
  background: #fff;
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.auth-panel-richtext h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.auth-panel-richtext-body {
  font-size: 0.9rem;
  opacity: 0.9;
}

.auth-panel-image-block {
  text-align: center;
}

.auth-panel-image-block img {
  max-width: 100%;
  border-radius: 10px;
}

.auth-panel-image-caption {
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.75;
}

.auth-panel-cta {
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 28px;
}

.auth-panel-cta h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.auth-panel-cta p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0 0 16px;
}

.auth-panel-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 8px 0;
}

.auth-panel-atto {
  text-align: center;
}

@media (max-width: 860px) {
  .auth-shell-split {
    flex-direction: column;
  }

  .auth-panel {
    flex: 0 0 auto;
    padding: 32px 24px;
  }

  .auth-shell-split .auth-column {
    flex: 1 1 auto;
    max-width: 412px;
    margin: 0 auto;
  }
}

/* ---------- Responsive: sidebar becomes an overlay drawer ---------- */

.sidebar-backdrop {
  display: none;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }

  .app-shell.sidebar-mobile-open .app-sidebar {
    transform: translateX(0);
    width: var(--sidebar-width);
  }

  /* On mobile the collapsed/expanded desktop state doesn't apply — the
     drawer is either fully open (above) or fully hidden. */
  .app-shell.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-width);
  }

  .app-shell.sidebar-mobile-open .sidebar-brand-name,
  .app-shell.sidebar-mobile-open .sidebar-section-label,
  .app-shell.sidebar-mobile-open .sidebar-nav-link-text {
    display: block;
  }

  .app-shell.sidebar-mobile-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1025;
  }

  .app-content {
    padding: 1.25rem;
  }

  .tenant-badge span {
    display: none;
  }
}

/* ---------- Shared page header slot (Views/Shared/_PageHeader.cshtml) ----------
   Opt-in via ViewData["PageHeading"]/ViewData["Breadcrumb"] — a view that sets
   neither renders nothing here, so the topbar looks exactly as it did before
   this was added. */

.page-header-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 120px;
  min-width: 0;
}

.page-header-breadcrumb {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Formulários de Edit/Create — mesma linguagem das listas: um cartão só,
   campos em duas colunas (rótulo + dica à esquerda, controle à direita),
   separador entre linhas, ações no pé alinhadas à direita.
   ========================================================================== */

.form-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-width: 860px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--subtle-surface);
}

.form-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.form-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-row-label > label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.form-row-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  text-wrap: pretty;
}

/* Campo que ocupa a linha inteira (textarea longa, editor, tabela de itens). */
.form-row-wide {
  grid-template-columns: minmax(0, 1fr);
}

/* Duas colunas de campo lado a lado (label em cima do input em cada uma),
   diferente de .form-row (um único par label-esquerda/valor-direita). */
.form-row-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--subtle-surface);
}

.form-row-2col:first-child {
  border-top: 0;
  padding-top: 0;
}

.form-row-2col .form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition);
}

.plan-card:hover {
  border-color: #cbd5e1;
}

.plan-card:has(input:checked) {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary);
}

.plan-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-card-detail {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Wider variant of .form-panel for forms with a 2-column body (.form-cols)
   — additive modifier, kept separate so the ~20 other single-column forms
   sharing .form-panel are untouched. */
.form-panel-wide {
  max-width: 1080px;
}

/* Two independent stacks of .form-row side by side (e.g. Activities'
   Tipo/Assunto/Notas/Vencimento on the left, Empresa/Contato/Negócio on the
   right) — each column keeps its own .form-row:first-child border reset
   since it's a separate flex/grid child. */
.form-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0 32px;
}

@media (max-width: 760px) {
  .form-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--subtle-surface);
}

/* Cancel is marked up as .btn-link (bare text, Bootstrap default) so it
   doesn't compete with the primary Save button, but that leaves it looking
   like a stray hyperlink instead of a clickable action — give it real
   button chrome (border + padding) while keeping it visually secondary. */
.form-actions .btn-link {
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
}

.form-actions .btn-link:hover,
.form-actions .btn-link:focus {
  color: var(--text-primary);
  background: var(--row-hover);
  text-decoration: none;
}

/* ---------- Topbar icon buttons (search / notifications) ---------- */

.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 34px;
  width: 34px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.topbar-icon-btn svg {
  width: 18px;
  height: 18px;
}

.topbar-icon-btn:hover:not(:disabled) {
  background: var(--subtle-surface);
  color: var(--text-primary);
}

.topbar-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.topbar-icon-btn.dropdown-toggle::after {
  display: none;
}

.topbar-notification-btn {
  position: relative;
}

.topbar-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.notifications-panel {
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  padding: 0;
}

.notifications-panel-header {
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
}

.notification-item {
  display: block;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--card-border);
  text-decoration: none;
  color: inherit;
}

.notification-item:hover {
  background: var(--row-hover);
  text-decoration: none;
  color: inherit;
}

.notification-item--unread {
  background: var(--subtle-surface);
}

.notification-item-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.notification-item-message {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.notification-item-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Dashboard ---------- */

.dash-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
}

.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: var(--transition);
}

.kpi-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-md);
}

.kpi-card-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.kpi-card-value {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-card-delta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kpi-card-delta {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.kpi-card-delta-positive {
  color: var(--ok);
}

.kpi-card-delta-negative {
  color: var(--danger-text);
}

.kpi-card-delta-label {
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
}

.kpi-card-track {
  height: 4px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}

.kpi-card-track-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--brand-primary);
}

.dash-row-2col {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.dash-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}

.dash-panel-funnel {
  flex: 1.55 1 420px;
  padding: 16px 18px 10px;
}

.dash-panel-goals {
  flex: 1 1 380px;
  padding: 16px 18px;
}

.dash-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.dash-panel-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-panel-title {
  font-size: 13px;
  font-weight: 600;
}

.dash-panel-subtitle {
  font-size: 11px;
  color: var(--text-faint);
}

.dash-panel-highlight {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
  white-space: nowrap;
}

.dash-funnel-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 8px;
}

.dash-funnel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.dash-funnel-row:hover {
  opacity: 0.82;
}

.dash-funnel-label {
  min-width: 84px;
  flex: 0 1 auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-strong);
  white-space: nowrap;
}

.dash-funnel-bar {
  flex: 1 1 auto;
  min-width: 70px;
  height: 22px;
  border-radius: 5px;
  background: var(--track);
  overflow: hidden;
}

.dash-funnel-value {
  width: 84px;
  flex: none;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-funnel-count {
  width: 52px;
  flex: none;
  text-align: right;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.dash-panel-agenda {
  padding: 16px 18px;
}

.dash-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-agenda-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 4px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

.dash-agenda-row:hover {
  background: var(--track);
}

.dash-agenda-time {
  width: 52px;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary);
}

.dash-agenda-subject {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-agenda-with {
  flex: none;
  font-size: 11px;
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-agenda-tag {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dash-agenda-connect {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
}

.dash-goals-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.dash-goal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-goal-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-goal-avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--track);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.dash-goal-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-goal-meta {
  font-size: 11px;
  color: var(--text-muted-alt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-goal-track {
  height: 5px;
  border-radius: 5px;
  background: var(--track);
  overflow: hidden;
}

.dash-goal-fill {
  height: 100%;
  border-radius: 5px;
}

.dash-attention {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.dash-attention-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dash-attention-title {
  font-size: 13px;
  font-weight: 600;
}

.dash-attention-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
}

.dash-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 12px;
}

.dash-alert-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--brand-primary);
  border-radius: 10px;
  background: #fdfcfb;
  cursor: pointer;
  transition: var(--transition);
}

.dash-alert-card:hover {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  border-left-color: var(--brand-primary);
}

.dash-alert-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.dash-alert-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.dash-alert-body {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.dash-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.dash-footer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

.dash-footer-link:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-sm);
  color: inherit;
}

.dash-footer-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-footer-link-value {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dash-footer-link-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.dash-footer-link-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-faint);
}

/* List pattern (Companies/Index and, per the UI redesign roadmap, every
   other list screen going forward): filter pills + a fixed-grid table.
   UI redesign round 3. */

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.filter-pill-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 13px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.filter-pill:hover {
  border-color: #cbd5e1;
  color: var(--text-primary);
}

.filter-pill.active {
  background: #101725;
  border-color: #101725;
  color: #fff;
}

.filter-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  margin-left: 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #eef2f7;
  color: var(--text-muted);
}

.filter-pill.active .filter-pill-count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Footer bar inside a .list-table card: record range + per-page selector +
   prev/next — lives as the last child of .list-table so its own overflow:
   hidden clips the corners into the card, same trick the head row uses. */
.list-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 11px 18px;
  background: var(--row-hover);
  border-top: 1px solid var(--subtle-surface);
}

.list-table-footer-count {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.list-table-footer-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.list-table-page-size {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.list-table-page-size select {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 3px 22px 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
}

.list-table-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.list-table-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  transition: var(--transition);
}

.list-table-pagination-btn svg {
  width: 15px;
  height: 15px;
}

.list-table-pagination-btn:hover {
  background: var(--row-hover);
}

.list-table-pagination-btn.disabled {
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.5;
}

.list-table-pagination-current {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 4px;
}

/* Header and rows MUST share the exact same grid-template-columns string —
   with a floor (minmax(96px, Xfr)), not minmax(0, Xfr) — or the two drift
   apart and the borders stop lining up (README's "armadilha #1"). */
.list-table {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  /* Sem overflow:hidden de propósito — cortava o menu suspenso "⋮" (Editar/
     Suspender/Renovar/etc.) sempre que ele precisava aparecer perto da borda
     da tabela, em qualquer lista que usa esse componente. O arredondamento
     do topo é feito diretamente no cabeçalho (única parte com fundo
     diferente do card) em vez de depender do clip do container. */
}

.list-table-head,
.list-row {
  display: grid;
  grid-template-columns: 28px minmax(160px, 2.1fr) minmax(96px, 1.1fr) minmax(96px, 1.2fr) minmax(120px, 1.3fr);
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
}

.list-table-head {
  background: var(--row-hover);
  border-radius: var(--radius) var(--radius) 0 0;
}

.list-table-head-cell {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.list-row {
  border-top: 1px solid var(--subtle-surface);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  /* Sem isso, qualquer clique com o menor microarrasto do mouse (comum em
     touchpad) vira uma seleção de texto em vez de um clique — e o navegador
     cancela silenciosamente o evento de clique nesse caso, sem erro nenhum.
     Foi a causa raiz de "⋮ não abre" reportado em produção 2026-08-14: o
     clique nem chegava a disparar o listener do Bootstrap. */
  user-select: none;
}

.list-row:hover {
  background: var(--row-hover);
  color: inherit;
}

.list-cell {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-cell-checkbox {
  min-width: 0;
}

.list-cell-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.list-cell-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.list-cell-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.list-cell-stage-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.list-cell-value {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sort/filter header — Views/Shared/_ListTableHeader.cshtml. Same grid rule
   as .list-table-head/.list-row above: this element's grid-template-columns
   is passed in as a parameter and must match the row grid exactly. */
.list-table-head-cell.sortable a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.list-table-head-cell.sortable a:hover {
  color: var(--text-primary);
}

.list-table-sort-arrow {
  font-size: 8px;
}

.list-table-filter-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 10px;
  background: var(--row-hover);
  border-bottom: 1px solid var(--subtle-surface);
}

.list-table-filter-cell .form-control,
.list-table-filter-cell .form-select {
  font-size: 11.5px;
  padding: 3px 8px;
  height: auto;
}

/* Integrações (IntegrationsHub\Index): grid de cards, um por serviço. */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

.integration-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.integration-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.integration-card-name {
  font-size: 13.5px;
  font-weight: 600;
}

.integration-card-description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.integration-card-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.integration-card-actions {
  margin-top: auto;
  padding-top: 4px;
}

/* Assinatura de e-mail (/PersonalEmail) — mesmo tom visual de .integration-card
   (borda + raio + padding generosos) mas com mais respiro, para não parecer
   um textarea qualquer dentro do hub. */
.signature-editor-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  max-width: 720px;
}

.signature-editor-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.signature-preview {
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--card-bg);
  min-height: 60px;
}

/* Ações por linha nas listas de cadastro de Configurações. As listas
   operacionais (Empresas, Contatos) navegam pela linha inteira; estas têm
   Editar/Excluir explícitos, então a linha não é clicável. */
.list-row-static {
  cursor: default;
}

.list-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.list-row-actions form {
  margin: 0;
}

/* Proposals/Index: up to 6 buttons per row (PDF+link always, plus up to 4
   status actions) read as one crowded cluster with plain flex-wrap. Grouping
   them visually (utility vs. status-changing) plus a divider keeps the row
   scannable even when it wraps on narrower widths. */
.list-row-actions-grouped {
  gap: 10px;
}

.list-row-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.list-row-action-group + .list-row-action-group {
  padding-left: 10px;
  border-left: 1px solid var(--card-border);
}

/* Base color comes in via the inline custom property --stage-color — same
   color-mix() technique .btn-primary already uses for its hover/active
   shades, just mixed toward white instead of black so the pill stays light. */
.stage-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  color: var(--stage-color, var(--text-muted));
  background: color-mix(in srgb, var(--stage-color, var(--text-muted)) 14%, white);
  border: 1px solid color-mix(in srgb, var(--stage-color, var(--text-muted)) 33%, white);
}

/* A ProposalItem's own custom price-tier scale — Proposals/Details' and
   _ProposalDocument.cshtml's (Prévia/link público) products tables both
   give it a dedicated "Faixa/Quantidade mínima" column (same header,
   PriceTierRangeColumnLabel/Hint) instead of stacking it under the product
   name. An earlier version (2026-09-01) collapsed every tier into a single
   row of wrapping pills to fix a run-on-sentence overflow bug — read as
   closed/collapsed; a follow-up (2026-09-11 rodada 1) fixed that in place
   but stacking multi-line scales inside the Produto cell made row heights
   uneven and broke vertical alignment against Frequência/Preço/Qtd/Total —
   moved into its own column (2026-09-11 rodada 2, matching Details.cshtml's
   existing layout) so every column stays aligned regardless of how many
   tiers a row has. */
.price-tier-scale {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.price-tier-row {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
  padding-left: 4px;
}

.price-tier-row-qty {
  font-weight: 700;
  color: var(--text-primary);
}

/* 2026-09-16: one full <tr> per tier in the prévia/PDF products table (see
   _ProposalDocument.cshtml/ProposalPdfDocument.cs) — replaces the earlier
   "stack every tier as text inside the item's own Faixa cell" approach
   (.price-tier-scale/.price-tier-row above), per explicit user request to
   mirror the inline tier editor's row-per-tier layout instead. Muted/
   smaller so it still reads as "how this item's price scales", not as a
   separate charge on top of the item's own real Total. */
.price-tier-row-line td {
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 3px;
  padding-bottom: 3px;
  border-top: none;
}

/* The inline price-tier editor's own rows (Proposals/Details, expanded via
   "Editar" or "Mostrar escalonamento" on a non-bundle item) — real <tr>
   sub-rows of the Itens table (see .tier-row in Details.cshtml), not a
   boxed card-in-a-card. Faixa stayed "A partir de [qty]" per user request
   2026-09-02 (a computed "1 – 4"-style box was tried and reverted). */
.tier-drag-handle {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  user-select: none;
  margin-right: 2px;
}

/* Drag handle for reordering whole Proposta items (2026-09-09) — same glyph
   and muted styling as .tier-drag-handle above, one level up (moves a whole
   .proposal-item-block <tbody>, not just a price tier row within one). */
.proposal-item-drag-cell {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.proposal-item-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  user-select: none;
}

.proposal-item-block.is-dragging {
  opacity: 0.5;
}

.proposal-item-block.is-drop-target > tr:first-child > td {
  border-top: 2px solid var(--bs-primary, #0d6efd);
}

.tier-min {
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2px 6px;
  width: 64px;
  font-size: 12.5px;
  color: var(--text-primary);
}

/* Bordered "R$ [box]" price group — the number itself used to render the
   raw decimal (revenue_proposal_item_price_tiers.unit_price is a fixed
   DECIMAL(18,6) column, so an unformatted value showed as "120,000000" and
   forced this box wide; UnitPrice is now formatted to 2 decimals in
   Details.cshtml, and this box gets a bit more natural width than before
   per "deixar aumentar até a coluna de quantidade", 2026-09-02). */
.tier-price-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  padding: 2px 8px;
}

.tier-price-prefix {
  font-size: 12.5px;
  color: var(--text-muted);
}

.tier-price {
  border: none;
  background: transparent;
  padding: 0;
  width: 90px;
  font-size: 12.5px;
  color: var(--text-primary);
  text-align: right;
}

.tier-price:focus {
  outline: none;
}

.btn-tier-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 45%, white);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--danger, #dc2626);
  cursor: pointer;
}

.btn-tier-remove:hover {
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, white);
}

/* "+ Adicionar faixa de preço" — a full-width dashed trigger inside the
   .tier-anchor row, matching the reference's block-level button under the
   last tier row (moved back inside the table from the Quantidade/Desconto
   panel below it, 2026-09-02 second pass). */
.tier-add-row-cell {
  padding-top: 10px !important;
  padding-bottom: 14px !important;
}

.tier-add-row-btn {
  display: block;
  width: 100%;
  border: 1px dashed var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--primary, #4f46e5);
  font-size: 13px;
  font-weight: 500;
  padding: 8px;
  cursor: pointer;
}

.tier-add-row-btn:hover {
  background: color-mix(in srgb, var(--primary, #4f46e5) 6%, white);
}

/* "Mostrar/Ocultar escalonamento" — sits right under the product name,
   opens the same tier rows + Quantidade/Desconto panel as "Editar" (see
   .item-edit-toggle in Details.cshtml's script section). */
.tier-scale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  text-decoration: none;
}

.tier-scale-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  line-height: 1;
}

.list-cell-no-deal {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ==========================================================================
   Ficha 360 (Companies/Edit) — UI redesign round 4
   ========================================================================== */

/* Header card: avatar + name/stage pill + facts row (left), two stacked
   action buttons in a fixed 172px column (right). #101725 is a literal value
   from the design handoff (README 4.3) — it reads close to --sidebar-bg
   (#111827) but is a distinct swatch chosen for this one card, not the same
   token, so it's kept as a literal rather than reused. */
.detail-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.detail-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #101725;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
  flex-shrink: 0;
}

.detail-header-main {
  flex: 1 1 320px;
  min-width: 0;
}

.detail-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.detail-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.detail-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.detail-fact-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.detail-fact-value {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 172px;
  flex-shrink: 0;
}

.detail-actions .btn {
  width: 100%;
}

/* Body: 3 columns (summary / tabs / contacts+next-action), collapsing to a
   single stacked column on narrow viewports. Only used by Companies/Edit —
   fixed-width side columns (unlike the auto-fit/minmax technique used by
   card grids elsewhere) because the left summary specifically needs to stay
   narrow regardless of viewport width. */
.detail-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

@media (max-width: 1300px) {
  .detail-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.detail-summary-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.detail-summary-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.detail-summary-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-summary-field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.detail-summary-field-value {
  font-size: 12.5px;
  color: var(--text-primary);
  word-break: break-word;
}

.detail-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tab strip: nowrap buttons + overflow-x:auto on the container (README 5,
   armadilha #4) so a tenant with a long custom pipeline never breaks the
   layout. Active tab reads #0F172A with an inset bottom border in the brand
   color instead of a background change. */
.detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--card-border);
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--card-border) transparent;
}

.detail-tabs::-webkit-scrollbar {
  height: 5px;
}

.detail-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.detail-tabs::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 999px;
}

.detail-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.detail-tab {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-tab:hover {
  color: var(--text-primary);
}

.detail-tab.active {
  color: var(--text-heading);
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}

.detail-tab-panel {
  display: none;
}

.detail-tab-panel.active {
  display: block;
}

/* Timeline: 22px rail, 9px dot with a soft glow ring via color-mix(), a
   vertical --card-border line connecting items. Dot color comes in via
   --dot-color, same "inline custom property + color-mix()" technique
   .stage-pill already uses for the Companies list's stage pill. */
.timeline-item {
  display: flex;
  gap: 12px;
}

.timeline-rail {
  width: 22px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  background: var(--dot-color, var(--brand-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-color, var(--brand-primary)) 22%, white);
}

.timeline-line {
  flex: 1;
  width: 1px;
  min-height: 18px;
  margin-top: 4px;
  background: var(--card-border);
}

.timeline-item:last-child .timeline-line {
  display: none;
}

.timeline-content {
  flex: 1;
  min-width: 0;
  padding-bottom: 18px;
}

.timeline-item:last-child .timeline-content {
  padding-bottom: 0;
}

.timeline-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-timestamp {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.timeline-body {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}

/* "Próxima ação" — the most important element of the right column
   (README 4.3). #9A3412/#7C2D12 are literal one-off colors used only here,
   on top of the already-existing --warn-bg/--warn-line tokens from round 1 —
   not worth a named token for a combination used exactly once. */
.next-action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  padding: 14px;
}

.next-action-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warn-text);
}

.next-action-subtitle {
  font-size: 11.5px;
  color: #7c2d12;
}

.next-action-card .btn {
  width: 100%;
}

/* Calm, neutral counterpart shown when there's no pending action — must NOT
   look like the urgent orange card above. */
.next-action-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--content-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px;
}

.next-action-empty-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.next-action-empty-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
}

.next-action-empty .btn {
  width: 100%;
}

/* Contacts list under "Próxima ação" — no role pill (Decisor/Influencia/
   Bloqueio from the mockup has no real data source on Contact, same
   "don't fabricate UI" call as every prior round). */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.contact-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.contact-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Kanban de Negócios (Deals/Index) — UI redesign round 5
   ========================================================================== */

.kanban-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.kanban-column {
  width: 288px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header lives outside the column's shaded track background — dot in the
   stage's color (same inline --dot-color + color-mix() technique used by
   .stage-pill/the Ficha 360 timeline dot), name, then the column total. */
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px;
}

.kanban-column-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, var(--text-muted));
}

.kanban-column-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kanban-column-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--track);
  color: var(--text-muted-alt);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.kanban-column-total {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
}

.kanban-column-body {
  background: var(--kanban-bg);
  border-radius: var(--radius);
  padding: 9px;
  min-height: 180px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}

.kanban-load-more {
  display: block;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 8px;
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.kanban-load-more:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Visual highlight while a dragged card is over this column (drop target). */
.kanban-column-body.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--brand-primary);
}

.deal-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: grab;
  transition: var(--transition);
}

.deal-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

/* Reduced opacity on the card being dragged, applied by site.js's dragstart
   handler — the card stays in the DOM (not removed) until the page reloads
   after a successful drop, so a failed/cancelled drag just needs this class
   removed to look exactly like it did before. */
.deal-card.is-dragging {
  opacity: 0.5;
}

.deal-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.deal-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.deal-card-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.deal-card-days {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.deal-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deal-card-owner {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.deal-card-owner-name {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 20px variant of .contact-avatar's same "initials on a tinted circle"
   technique, sized down for the card's tight bottom row. */
.deal-card-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 600;
  flex-shrink: 0;
}

.deadline-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.deadline-pill.is-overdue {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.deadline-pill.is-today {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.deadline-pill.is-ontrack {
  background: var(--subtle-surface);
  color: var(--text-muted-alt);
}

/* Deliberately calmer than .is-ontrack — a deal with no pending activity at
   all isn't "on track" (that would fabricate reassurance the data doesn't
   support), just neutral/unremarkable. */
.deadline-pill.is-none {
  background: var(--row-hover);
  color: var(--text-muted);
}

/* ---------- Roadmap placeholder (Views/Roadmap/Index.cshtml) ----------
   Empty/preview screens for sidebar groups that don't have a real module
   behind them yet (Atendimento/Financeiro/Análise) — shown per the
   mockup's menu structure, but honest that there's no data or
   functionality here. */

.roadmap-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 420px;
  margin: 64px auto;
  padding: 40px 32px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.roadmap-placeholder svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
}

.roadmap-placeholder h2 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0;
}

.roadmap-placeholder p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.roadmap-placeholder-badge {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--subtle-surface);
  color: var(--text-muted-alt);
}

/* Rodada 6 — Configurações (hub mestre-detalhe): _SettingsLayout.cshtml
   wraps the 10 existing settings screens with a fixed left-hand list +
   right-hand content panel, both flowing inside .app-content already
   provided by _Layout.cshtml. */
.settings-shell {
  display: grid;
  grid-template-columns: minmax(200px, 264px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 8px;
  position: sticky;
  top: 16px;
}

.settings-nav-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-nav-item:hover {
  background: var(--row-hover);
}

.settings-nav-item.active {
  background: var(--row-hover);
  color: var(--brand-primary);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand-primary);
}

/* Groups the 18 settings screens by product area instead of one flat list
   (reported as confusing 2026-09-01) — a thin rule + muted uppercase label
   between groups, same visual language .list-table-head-cell already uses
   for column headers elsewhere in the app. */
.settings-nav-group + .settings-nav-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--subtle-surface);
}

.settings-nav-group-label {
  padding: 4px 12px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.settings-detail {
  min-width: 0;
}

@media (max-width: 900px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
  }

  .settings-nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .settings-nav-group + .settings-nav-group {
    margin-top: 6px;
    padding-top: 6px;
  }

  .settings-nav-group-label {
    width: 100%;
    padding: 2px 4px;
  }
}

/* Marca (Branding/Index): curated primary-color swatches next to the
   existing native <input type="color">. */
.color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  cursor: pointer;
  padding: 0;
}

.color-swatch.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-primary);
}

/* Marca (Branding\Index): slots de upload de logo/favicon. */
.upload-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.upload-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 82px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8f9fc;
  padding: 8px 14px;
  cursor: pointer;
  overflow: hidden;
}

.upload-slot-preview {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.upload-slot-placeholder {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

/* Marca (Branding\Index): pré-visualização ao vivo reagindo à cor/nome
   antes de publicar — puramente client-side, sem novo campo no tenant. */
.branding-preview {
  display: flex;
  height: 172px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.branding-preview-sidebar {
  width: 96px;
  flex-shrink: 0;
  background: #111827;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 16px;
}

.branding-preview-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.branding-preview-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.branding-preview-name {
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  padding: 0 6px;
}

.branding-preview-section-label {
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  padding: 0 6px;
}

.branding-preview-nav-item {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  padding: 0 6px;
}

.branding-preview-content {
  flex: 1;
  background: #f4f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px;
}

.branding-preview-button {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* Papéis (Roles/Index): permission matrix — 5 real PermissionCatalog codes
   + MaxDiscountPercent, not the fabricated categories from the original
   design mockup. */
.role-matrix {
  display: grid;
  min-width: 640px;
}

.role-matrix-header {
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
}

.role-matrix-cell {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--card-border);
}

.role-matrix-cell.text-center {
  justify-content: center;
}

.role-matrix-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-matrix-clickable {
  cursor: pointer;
}

.role-matrix-clickable:hover {
  background: var(--row-hover);
}

.role-matrix-check {
  color: var(--ok);
  font-weight: 700;
  font-size: 15px;
}

.role-matrix-dot {
  color: var(--text-muted);
  font-size: 18px;
}

/* Roles Index — one summary card per role (replaces the old hardcoded
   5-column matrix, which doesn't scale to ~86 granular permissions). */
.role-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.role-summary-card {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--card-bg, #fff);
}

.role-summary-card-clickable {
  cursor: pointer;
}

.role-summary-card-clickable:hover {
  background: var(--row-hover);
}

.role-summary-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.role-summary-card-name {
  font-weight: 700;
  font-size: 14.5px;
}

.role-summary-card-total {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-muted);
}

.role-summary-card-delete {
  margin: 0;
}

.role-summary-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.role-summary-module-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-subtle, #F1F5F9);
  color: var(--text-default);
  font-variant-numeric: tabular-nums;
}

.role-summary-module-badge-empty {
  color: var(--text-muted);
}

.role-summary-module-badge-discount {
  background: transparent;
  border: 1px dashed var(--card-border);
}

/* Grouped module/resource/action checkbox matrix (Roles Create/Edit) — see
   _RolePermissionMatrix.cshtml. Chips per resource instead of a rigid
   fixed-column grid, since resources have varying action sets (2-4). */
.role-permission-standalone {
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--surface-subtle, #F8FAFC);
}

.role-permission-module {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.role-permission-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-subtle, #F8FAFC);
  border-bottom: 1px solid var(--card-border);
}

.role-permission-module-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.role-permission-select-all {
  padding: 0;
  font-size: 12px;
}

.role-permission-resource-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--card-border);
}

.role-permission-resource-row:last-child {
  border-bottom: none;
}

.role-permission-resource-name {
  min-width: 160px;
  font-size: 13.5px;
  font-weight: 600;
}

.role-permission-resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* Command palette (Ctrl+K / Cmd+K) — global overlay, see site.js. */
.topbar-shortcut-hint {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: -4px;
}

.command-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  padding-top: 14vh;
}

.command-palette-panel {
  width: 520px;
  max-width: calc(100% - 32px);
  max-height: 60vh;
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: command-palette-pop 180ms ease-out;
}

@keyframes command-palette-pop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.command-palette-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.command-palette-input-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.command-palette-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14.5px;
  color: var(--text-primary);
  background: transparent;
}

.command-palette-esc-hint {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 1px 6px;
  font-family: inherit;
}

.command-palette-results {
  overflow-y: auto;
  padding: 8px;
}

.command-palette-section-label {
  padding: 8px 8px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.command-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.command-palette-item:hover {
  background: var(--row-hover);
}

.command-palette-item-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--subtle-surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.command-palette-item-text {
  min-width: 0;
  flex: 1;
}

.command-palette-item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette-item-sublabel {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette-item-type {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.command-palette-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   Editor de Modelo de Proposta — layout de 2 colunas (formulário + preview
   ao vivo do documento, com dados fictícios no lugar das {{variáveis}}).
   ========================================================================== */

/* Mock da capa real do PDF (ProposalPdfDocument.ComposeCoverPage) — sempre
   presente, nunca editável aqui (dado vem de Marca + do Negócio, nunca
   digitado no modelo). Existe pra fechar a lacuna de "não consigo gerar
   capa": antes disso, nada no editor sequer mencionava que uma capa existe. */
.template-cover-block {
  position: relative;
  background: var(--cover-color);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 20px;
  overflow: hidden;
  max-width: 860px;
}

.template-cover-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.template-cover-hint a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.template-cover-logo {
  max-width: 140px;
  max-height: 60px;
  object-fit: contain;
  margin-bottom: 16px;
}

.template-cover-title {
  font-size: 22px;
  font-weight: 700;
}

.template-cover-formal-number {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 14px;
}

.template-cover-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.template-cover-meta-value {
  font-size: 13px;
}

.template-cover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin: 16px 0;
}

.template-cover-issuer-name {
  font-size: 13px;
  font-weight: 700;
}

.template-cover-issuer-line {
  font-size: 11.5px;
  opacity: 0.92;
}

.template-cover-recipient-company {
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}

.template-cover-recipient-name {
  font-size: 12px;
  opacity: 0.92;
}

/* Cover color picker — reuses the same .color-swatch/.color-swatch.selected
   classes Marca (Branding/Index) defines, so both screens share one visual
   language for "pick a brand color". Sits inside .template-cover-block, on
   top of whatever color is currently chosen, so contrast is deliberately
   loose (works acceptably against light and dark swatch colors alike). */
.template-cover-color-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.template-cover-color-picker-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  margin-right: 2px;
}

.template-cover-color-hex {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

.template-cover-color-reset {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
}

.template-cover-color-reset.is-active {
  color: #ffffff;
  font-weight: 700;
}

/* Controls panel (hint + color picker + theme picker) now sits OUTSIDE the
   colored .template-cover-block, since a theme can put a white area right
   where the picker text is (SideBand/Centered) — a neutral card avoids
   fighting the mockup's own contrast. Reuses the app's card tokens rather
   than the white-on-color palette the picker rules above were written for. */
.template-cover-controls {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  max-width: 860px;
}

.template-cover-controls .template-cover-hint {
  color: var(--text-secondary, #6b7280);
  border-bottom: 1px solid var(--card-border);
}

.template-cover-controls .template-cover-hint a {
  color: var(--accent, #4f46e5);
}

.template-cover-controls .template-cover-color-picker-label {
  color: var(--text-secondary, #6b7280);
}

.template-cover-controls .template-cover-color-hex {
  color: var(--text-secondary, #6b7280);
}

.template-cover-controls .template-cover-color-reset {
  color: var(--text-secondary, #6b7280);
}

.template-cover-controls .template-cover-color-reset.is-active {
  color: var(--text-primary, #23252f);
}

.template-cover-theme-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--card-border);
}

.template-cover-theme-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: none;
  padding: 4px;
  cursor: pointer;
}

.template-cover-theme-thumb-swatch {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: linear-gradient(135deg, currentColor 0 40%, #fff 40% 100%);
  color: var(--accent, #4f46e5);
}

.template-cover-theme-thumb--sideband .template-cover-theme-thumb-swatch {
  background: linear-gradient(90deg, currentColor 0 32%, #fff 32% 100%);
}

.template-cover-theme-thumb--centered .template-cover-theme-thumb-swatch {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--card-border), inset 0 -10px 0 -6px currentColor;
}

.template-cover-theme-thumb-label {
  font-size: 10px;
  color: var(--text-secondary, #6b7280);
  text-align: center;
  line-height: 1.2;
}

.template-cover-theme-thumb.selected {
  border-color: var(--accent, #4f46e5);
}

.template-cover-theme-thumb.selected .template-cover-theme-thumb-label {
  color: var(--text-primary, #23252f);
  font-weight: 700;
}

/* The visual mockup itself: 3 variants live in the DOM at once, only one
   shown at a time via [data-theme] on the wrapper — see applyTheme() in
   _ProposalTemplateCoverBlock.cshtml. Mirrors ComposeCoverPage*'s dispatch
   in ProposalPdfDocument.cs one-to-one, same 3 keys. */
.template-cover-variant {
  display: none;
}

.template-cover-block[data-theme="classic"] .template-cover-variant--classic,
.template-cover-block[data-theme="sideband"] .template-cover-variant--sideband,
.template-cover-block[data-theme="centered"] .template-cover-variant--centered {
  display: block;
}

.template-cover-block[data-theme="sideband"] {
  padding: 0;
}

/* display:flex must stay scoped to the active theme — an unscoped rule here
   would beat the .template-cover-variant{display:none} default (same
   specificity, later in the cascade) and leave SideBand visibly stacked on
   top of whichever theme is actually selected. */
.template-cover-block[data-theme="sideband"] .template-cover-variant--sideband {
  display: flex;
  min-height: 300px;
}

.template-cover-variant--sideband .cover-band {
  flex: 0 0 180px;
  background: var(--cover-color);
  color: #ffffff;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
}

.template-cover-variant--sideband .cover-band .template-cover-formal-number {
  margin-bottom: 0;
}

.template-cover-variant--sideband .cover-main {
  flex: 1 1 auto;
  background: #ffffff;
  color: #23252f;
  padding: 24px 22px;
}

.template-cover-variant--sideband .cover-main .template-cover-meta-label,
.template-cover-variant--sideband .cover-main .template-cover-issuer-line,
.template-cover-variant--sideband .cover-main .template-cover-recipient-name {
  opacity: 0.72;
}

.template-cover-variant--sideband .cover-main .template-cover-divider {
  background: var(--cover-color);
  opacity: 0.3;
}

.template-cover-block[data-theme="centered"] {
  background: #ffffff !important;
  color: #23252f;
  text-align: center;
}

.template-cover-variant--centered .template-cover-logo {
  margin-left: auto;
  margin-right: auto;
}

.template-cover-variant--centered .template-cover-title {
  color: #23252f;
}

.template-cover-variant--centered .template-cover-formal-number {
  color: var(--cover-color);
  font-weight: 700;
}

.template-cover-variant--centered .template-cover-meta-label,
.template-cover-variant--centered .template-cover-issuer-line,
.template-cover-variant--centered .template-cover-recipient-name {
  opacity: 0.68;
}

.template-cover-variant--centered .cover-centered-rule {
  width: 56px;
  height: 2px;
  background: var(--cover-color);
  margin: 14px auto;
}

.template-cover-variant--centered .cover-centered-recipient-box {
  display: inline-block;
  text-align: left;
  background: #f8f9fb;
  border-left: 3px solid var(--cover-color);
  padding: 10px 16px;
  margin-top: 4px;
}

/* Editor de Modelo de Proposta — formulário à esquerda, prévia do documento
   montado à direita (lado antes livre). Ordem visual fixada via `order`
   (não pela ordem no DOM — ver _ProposalTemplateDocumentPreview.cshtml). */
.template-editor-doc {
  display: grid;
  grid-template-columns: minmax(0, 860px) minmax(380px, 620px);
  gap: 24px;
  align-items: start;
}

.template-editor-doc .form-panel {
  order: 1;
}

.template-editor-doc .template-preview-panel {
  order: 2;
}

@media (max-width: 1320px) {
  .template-editor-doc {
    grid-template-columns: minmax(0, 860px);
  }

  .template-editor-doc .template-preview-panel {
    position: static;
    max-height: none;
  }
}

/* Proposals/Details' Prévia went back to a collapsible full-width panel
   (button in the page header) instead of a permanent side-by-side column —
   .proposal-detail-doc's split briefly lived here but squeezed Itens into
   too narrow a column once it gained the Faixa column and inline tier
   editor (2026-09-02: "layout desalinhado"). See the "+/− Prévia" button
   and #proposalPreviewPanel in Details.cshtml.
.template-preview-panel {
  position: sticky;
  top: 84px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.template-preview-panel-header h2 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}

.template-preview-panel-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.template-preview-page {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 20px 18px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}

.template-preview-section {
  min-width: 0;
}

.template-preview-section + .template-preview-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.template-preview-page-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 8px;
}

/* One .section-row per template section — renders as a card that's either
   showing its final rendered form (".section-row-preview", the default —
   this IS the live preview now, not a separate synced copy) or its edit
   form (".section-row-form", shown only while ".is-editing"). Reuses the
   same white-paper look the old separate preview panel had
   (.template-preview-page), just per-row instead of one big scrolling
   panel. */
.section-row {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
  margin-bottom: 12px;
  overflow: hidden;
}

.section-row.is-dragging {
  opacity: 0.5;
}

/* Landing Pages' block builder (_LandingPageSectionEditor.cshtml) reuses
   .section-row's whole toolbar/preview/form/drag-reorder plumbing — but
   unlike a Proposal Template's sections (which literally render the
   document, so staying paper-white regardless of theme is correct), a
   landing page's ADMIN editor row is plain app chrome and must re-theme
   like everything else. .lp-row overrides just the one hardcoded declaration
   above (double class for guaranteed specificity over the single-class
   .section-row rule, regardless of source order). */
.section-row.lp-row {
  background: var(--card-bg);
}

.section-row-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  font-size: 11px;
}

.section-row-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  user-select: none;
}

.section-row-kind-badge {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.section-row-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.section-row-preview {
  padding: 16px 18px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-primary);
  min-height: 24px;
}

.section-row-preview:hover {
  background: var(--card-bg);
}

.section-row-form {
  display: none;
  padding: 14px 16px 16px;
}

.section-row.is-editing .section-row-preview {
  display: none;
}

.section-row.is-editing .section-row-form {
  display: block;
}

.section-row-form-actions {
  margin-top: 10px;
}

/* Portal Home Settings — cards are plain checkbox rows (not a big card
   surface like .section-row above), so only the drag/dragging essentials
   are reused, not the full card visual treatment. */
.portal-card-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  user-select: none;
}

.portal-card-row.is-dragging {
  opacity: 0.5;
}

/* Live HTML cover for _ProposalDocument.cshtml (public link + seller
   preview) — 3 structural themes matching ProposalPdfDocument.ComposeCoverPage*
   one-to-one (see that file's dispatcher for the canonical layout spec).
   --cover-color is set inline per-instance from Model.BrandColor (the
   tenant's white-label color, resolved live from the template/Marca — NOT
   the CRM app's own --brand-primary, which belongs to Platform.Web's own UI
   chrome, not the customer-facing document). */
.proposal-cover {
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 860px;
}

.proposal-cover--classic {
  background: var(--cover-color);
  color: #ffffff;
  padding: 32px 28px;
}

.proposal-cover-logo {
  max-width: 150px;
  max-height: 64px;
  object-fit: contain;
  margin-bottom: 14px;
  display: block;
}

.proposal-cover-title {
  font-size: 24px;
  font-weight: 700;
}

.proposal-cover-formal-number {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 14px;
}

.proposal-cover-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.proposal-cover-meta-value {
  font-size: 13px;
}

.proposal-cover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin: 18px 0;
}

.proposal-cover-issuer-name {
  font-size: 13px;
  font-weight: 700;
}

.proposal-cover-issuer-line {
  font-size: 11.5px;
  opacity: 0.92;
}

.proposal-cover-recipient-company {
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}

.proposal-cover-recipient-name {
  font-size: 12px;
  opacity: 0.92;
}

.proposal-cover--sideband {
  display: flex;
  min-height: 260px;
}

.proposal-cover--sideband .proposal-cover-band {
  flex: 0 0 200px;
  background: var(--cover-color);
  color: #ffffff;
  padding: 28px 22px;
}

.proposal-cover--sideband .proposal-cover-main {
  flex: 1 1 auto;
  background: #ffffff;
  color: #23252f;
  padding: 28px 26px;
}

.proposal-cover--sideband .proposal-cover-main .proposal-cover-meta-label,
.proposal-cover--sideband .proposal-cover-main .proposal-cover-issuer-line,
.proposal-cover--sideband .proposal-cover-main .proposal-cover-recipient-name {
  opacity: 0.68;
  color: #4b4f5a;
}

.proposal-cover--sideband .proposal-cover-main .proposal-cover-divider {
  background: var(--cover-color);
  opacity: 0.3;
}

.proposal-cover--centered {
  background: #ffffff;
  color: #23252f;
  text-align: center;
  padding: 36px 28px;
}

.proposal-cover--centered .proposal-cover-logo {
  margin-left: auto;
  margin-right: auto;
}

.proposal-cover--centered .proposal-cover-formal-number {
  color: var(--cover-color);
  font-weight: 700;
  opacity: 1;
}

.proposal-cover--centered .proposal-cover-meta-label,
.proposal-cover--centered .proposal-cover-issuer-line,
.proposal-cover--centered .proposal-cover-recipient-name {
  opacity: 0.68;
}

.proposal-cover-rule {
  width: 56px;
  height: 2px;
  background: var(--cover-color);
  margin: 16px auto;
}

.proposal-cover-recipient-box {
  display: inline-block;
  text-align: left;
  background: #f8f9fb;
  border-left: 3px solid var(--cover-color);
  padding: 12px 18px;
  margin-top: 4px;
}

.template-preview-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0 0 6px;
}

.template-preview-section-body p {
  margin: 0 0 6px;
}

.template-preview-section-body ul,
.template-preview-section-body ol {
  margin: 0 0 6px;
  padding-left: 18px;
}

/* Lets a wide pricing table scroll on its own inside a narrow container
   (the new right-side document preview panel, ~300-400px) instead of
   squeezing cell text onto 2-3 lines or pushing the whole page sideways —
   the per-row accordion preview (much wider, up to 860px) rarely needs the
   scrollbar at all, so this is purely additive there. */
.template-preview-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.template-preview-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 11.5px;
}

.template-preview-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
  padding: 4px 6px;
  white-space: nowrap;
}

.template-preview-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #f5f5f7;
  white-space: nowrap;
}

.template-preview-table th:last-child,
.template-preview-table td:last-child {
  text-align: right;
}

/* FreeTable columns are arbitrary plain text (not "last column = numeric
   total", the assumption the rule above makes for ProductsTable) — keep the
   last column left-aligned like every other one. */
.template-preview-table--freetable th:last-child,
.template-preview-table--freetable td:last-child {
  text-align: left;
}

/* Editor's live-editable FreeTable grid (_ProposalTemplateSectionEditor) —
   compact inputs, a slim "x" remove button per column/row. */
.freetable-grid th,
.freetable-grid td {
  vertical-align: middle;
  padding: 4px;
}

.freetable-grid th {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
}

.freetable-grid .ft-header,
.freetable-grid .ft-cell {
  min-width: 90px;
}

.freetable-remove-col,
.freetable-remove-row {
  width: 14px;
  height: 14px;
  padding: 0;
  flex: 0 0 auto;
}

.template-preview-auto-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* One bold line per billing frequency in the products-table mock — mirrors
   ComposeProductsTableWithTotal's real rule (never a combined grand total
   when one-time and recurring amounts are both present). */
.template-preview-totals {
  text-align: right;
  margin-top: 6px;
}

.template-preview-totals div {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.template-preview-tl-item {
  margin-bottom: 6px;
}

.template-preview-tl-item:last-child {
  margin-bottom: 0;
}

.owner-filter-menu {
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
}

.template-preview-section-empty {
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

/* ---------- Entity picker (search-as-you-type Contact/Company/Deal field) ---------- */

.entity-picker {
  position: relative;
}

.entity-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 2px;
}

.entity-picker-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

/* ---------- Projetos: Gantt Nível 2/3 (setas de dependência + arrastar) ---------- */

.gantt-ruler-row {
  font-size: 0.7rem;
  color: var(--text-muted, #8896a6);
}

.gantt-ruler-track {
  height: 16px;
}

.gantt-week-mark {
  position: absolute;
  top: 0;
  transform: translateX(-1px);
  border-left: 1px solid #e5e9f2;
  padding-left: 3px;
  white-space: nowrap;
}

.gantt-rows {
  /* Anchor for .gantt-arrows-overlay — every row's bar position is read via
     getBoundingClientRect() relative to this container's own rect. */
}

.gantt-arrows-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.gantt-arrow {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.4;
}

.gantt-bar-draggable {
  cursor: grab;
  touch-action: none;
}

.gantt-bar-draggable.is-dragging {
  cursor: grabbing;
  opacity: 0.85;
  box-shadow: 0 2px 6px rgba(20, 28, 48, 0.25);
}

/* Critical-path marker (CriticalPathCalculator.IsCritical) — deliberately a
   dark double-ring rather than the .deadline-pill/DeadlineRiskColor red
   family: "on the critical path" and "eating into the deadline" are
   different concepts (a critical task can be nowhere near its deadline),
   and reusing the same red would make a bar look alarming for the wrong
   reason. Works for both the normal bar and the rotated milestone diamond. */
.gantt-bar-critical {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1e293b;
}

.gantt-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #4f46e5;
  flex-shrink: 0;
}

.gantt-legend-swatch-critical {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1e293b;
}

/* ---------- Base de Conhecimento: artigo com cara de página web real ----
   Usado nos 3 lugares onde o conteúdo de um artigo é mostrado: a prévia
   ao vivo do editor interno, o preview interno somente-leitura, e a página
   real do Portal do Cliente — sempre a mesma classe, para nunca existirem
   duas respostas diferentes de "como isso vai parecer". Tipografia mais
   generosa que .template-preview-section-body (uma Proposta é um documento
   denso; um artigo de Base de Conhecimento é pra ser lido como uma página
   de ajuda de verdade). */
.kb-article-page {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
  padding: 32px 40px;
  max-width: 760px;
  margin: 0 auto;
}

.kb-article-page-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
}

.kb-article-page-category {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-primary);
}

.kb-article-page-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin: 6px 0 8px;
  color: var(--text-primary);
}

.kb-article-page-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.kb-article-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
}

.kb-article-body p {
  margin: 0 0 14px;
}

.kb-article-body h1,
.kb-article-body h2,
.kb-article-body h3 {
  font-weight: 700;
  line-height: 1.3;
  margin: 24px 0 10px;
}

.kb-article-body h1:first-child,
.kb-article-body h2:first-child,
.kb-article-body h3:first-child {
  margin-top: 0;
}

.kb-article-body ul,
.kb-article-body ol {
  margin: 0 0 14px;
  padding-left: 24px;
}

.kb-article-body a {
  color: var(--brand-primary);
  text-decoration: underline;
}

.kb-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 8px 0;
}

.kb-article-body table.rich-text-table,
.kb-article-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0 16px;
}

.kb-article-body table td,
.kb-article-body table th {
  border: 1px solid var(--card-border);
  padding: 8px 10px;
  font-size: 14px;
}

.kb-article-body:empty::before,
.kb-article-body-empty {
  content: "";
}

.kb-article-empty-hint {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  padding: 12px 0;
}

/* Editor interno: toolbar + contenteditable à esquerda, prévia .kb-article-page
   real à direita — a mesma ideia de "editor e documento lado a lado" que
   _ProposalTemplateSectionEditor.cshtml já usa, só que aqui é 1 campo só
   (o corpo do artigo), não uma lista de seções. */
.kb-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 991px) {
  .kb-editor-layout {
    grid-template-columns: 1fr;
  }
}

.kb-start-choice {
  background: var(--brand-primary-light);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px;
}

.kb-start-choice-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.kb-start-choice-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 767px) {
  .kb-start-choice-options {
    grid-template-columns: 1fr;
  }
}

.kb-start-choice-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: var(--transition);
}

.kb-start-choice-option:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

.kb-start-choice-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 1.4;
  margin-top: 1px;
}

.kb-start-choice-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-start-choice-option strong {
  font-size: 13.5px;
  color: var(--text-primary);
}

.kb-start-choice-option small {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.kb-editor-preview-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kb-status-badge-draft {
  background: var(--idle-bg, #eef1f6);
  color: var(--idle, #52607a);
}

.kb-status-badge-published {
  background: var(--good-bg, #e7f5ec);
  color: var(--good, #15803d);
}

/* ==========================================================================
   Tema escuro — data-bs-theme="dark" is set server-side on <html> in
   _Layout.cshtml (from User.PreferredTheme, mirroring how PreferredCulture
   already works) or client-side by the tiny inline script there when the
   user's choice is "system" and the OS is in dark mode. Bootstrap 5.3's own
   components (buttons, forms, modals, dropdowns, tables, badges) already
   re-theme themselves from this same attribute — this block only redefines
   THIS file's own custom properties, so every rule above that already reads
   var(--card-bg), var(--text-muted) etc. re-themes for free. Deliberately
   does NOT touch the brand or sidebar tenant-color tokens (those stay as
   the tenant picked them) or anything under the template cover, proposal
   cover, template preview, section-row or kb-article-page selectors (those
   render a simulated printed document and stay paper-white on purpose).
   NOTE: this comment avoids writing a literal asterisk immediately before a
   slash (it prematurely closes a CSS comment and silently eats every rule
   until the next one) — learned the hard way once already, don't reintroduce
   it here. */
[data-bs-theme="dark"] {
  --content-bg: #0f1420;
  --card-bg: #171d2b;
  --card-border: #2a3244;
  --text-primary: #e5e9f0;
  --text-muted: #94a3b8;

  --text-heading: #f8fafc;
  --text-strong: #cbd5e1;
  --text-muted-alt: #94a3b8;
  --text-faint: #7c8ba1;
  --subtle-surface: #1f2635;

  --danger-bg: #3f1d1d;
  --danger-text: #f87171;
  --warn-bg: #3a2a14;
  --warn-line: #6b4a1f;
  --warn-text: #fb923c;
  --row-hover: #1c2333;
  --track: #232b3d;
  --kanban-bg: #141a27;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

[data-bs-theme="dark"] body {
  background-color: var(--content-bg);
}

/* Handful of spots that read a color a plain CSS variable redefinition can't
   reach — either an inline SVG box-shadow "ring" or a rgba() literal tuned
   for the light background it sits on. */
[data-bs-theme="dark"] .command-palette-overlay {
  background: rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .auth-alert {
  background: #3f1d1d;
  border-color: #6b2c2c;
  color: #fca5a5;
}

[data-bs-theme="dark"] .next-action-subtitle {
  color: #fdba8c;
}