/* Tema inspirado no work management da monday.com: plataforma cinza-azulada,
   área de trabalho branca e arredondada, controles de 4px e status em blocos coloridos.
   Carregado por último para prevalecer sobre as camadas anteriores. */
:root {
  color-scheme: light;
  --platform: #f5f6f8;
  --background: #f6f7fb;
  --foreground: #323338;
  --muted: #676879;
  --primary: #0073ea;
  --primary-hover: #0060b9;
  --primary-soft: #cce5ff;
  --primary-highlight: #e5f4ff;
  --border: #d0d4e4;
  --border-subtle: #e6e9ef;
  --ui-border: #c3c6d4;
  --hover: #dcdfec;
  --hover-light: rgb(103 104 121 / 10%);
  --surface: #fff;
  --sidebar: var(--platform);
  --sidebar-accent: var(--hover);
  --sidebar-text: var(--foreground);
  --sidebar-muted: var(--muted);
  --sidebar-border: transparent;
  --accent: #ffcb00;
  --success: #00854d;
  --warning: #fdab3d;
  --danger: #d83a52;
  --danger-hover: #b63546;
  --on-danger: #fff;
  --color-primary-600: #0073ea;
  --color-primary-300: #66ccff;
  --color-danger-500: #e2445c;
  --font: Figtree, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --title-font: Poppins, Figtree, Inter, system-ui, sans-serif;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-big: 16px;
  --shadow-xs: 0 4px 6px -4px rgb(0 0 0 / 10%);
  --shadow-small: 0 4px 8px rgb(0 0 0 / 12%);
  --shadow-medium: 0 6px 20px rgb(0 0 0 / 20%);
  --topbar-height: 56px;
  --translucent-surface: rgb(255 255 255 / 94%);
  --badge-neutral: #c3c6d4;
  --link: var(--primary);
  --backdrop: rgb(41 47 76 / 70%);
  --alert-danger-bg: #fff1f2; --alert-danger-border: #fda4af; --alert-danger-text: #9f1239; --alert-danger-soft: #ffe4e6;
  --alert-success-bg: #f0fdf4; --alert-success-border: #86efac; --alert-success-text: #166534; --alert-success-soft: #dcfce7;
  --alert-warning-bg: #fffbeb; --alert-warning-border: #fcd34d; --alert-warning-text: #92400e; --alert-warning-soft: #fef3c7;
  --alert-info-bg: var(--primary-highlight); --alert-info-border: var(--primary-soft); --alert-info-text: var(--primary-hover); --alert-info-soft: var(--primary-soft);
}
/* Modo escuro na paleta "dark" da monday: azul-marinho profundo com superfícies elevadas. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --platform: #181b34;
  --background: #393b53;
  --foreground: #d5d8df;
  --muted: #9699a6;
  --primary: #0073ea;
  --primary-hover: #3d97f5;
  --primary-soft: #133774;
  --primary-highlight: #1d2e55;
  --border: #4b4e69;
  --border-subtle: #3d405b;
  --ui-border: #797e93;
  --hover: #4b4e69;
  --hover-light: rgb(255 255 255 / 8%);
  --surface: #30324e;
  --success: #00854d;
  --danger: #e2445c;
  --danger-hover: #c93a50;
  --color-primary-300: #4d9bd6;
  --shadow-xs: 0 4px 6px -4px rgb(0 0 0 / 50%);
  --shadow-small: 0 4px 8px rgb(0 0 0 / 40%);
  --shadow-medium: 0 6px 20px rgb(0 0 0 / 50%);
  --translucent-surface: rgb(48 50 78 / 94%);
  --badge-neutral: #4b4e69;
  --link: #6cb2ff;
  --backdrop: rgb(0 0 0 / 60%);
  --alert-danger-bg: #3d2436; --alert-danger-border: #8c3b4c; --alert-danger-text: #ffb3c0; --alert-danger-soft: #5a2a3d;
  --alert-success-bg: #1e3a35; --alert-success-border: #2e7a5a; --alert-success-text: #8ce0b8; --alert-success-soft: #255042;
  --alert-warning-bg: #3d3424; --alert-warning-border: #8a6a2e; --alert-warning-text: #ffd48a; --alert-warning-soft: #54452a;
  --alert-info-text: #9cc9ff;
}
body { background: var(--platform); color: var(--foreground); font-family: var(--font); font-size: 14px; }
h1 { font-family: var(--title-font); font-size: 26px; font-weight: 500; letter-spacing: -.01em; color: var(--foreground); }
h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
p { color: var(--muted); }
a { color: var(--link); }

/* Estrutura: menu e barra superior sobre a plataforma, conteúdo em painel branco. */
.app-layout { background: var(--platform); }
.sidebar { width: 256px; background: var(--platform); border-right: 0; }
.brand { min-height: var(--topbar-height); padding: 8px 20px; gap: 10px; border-bottom: 0; }
.brand-logo { width: 32px; height: 32px; }
.brand strong { font-family: var(--title-font); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.brand small { margin-top: 0; color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
.sidebar nav { padding: 8px 12px 16px; scrollbar-color: var(--ui-border) transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: var(--ui-border); }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.nav-label { padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; }
.nav-label:not(:first-child) { margin-top: 14px; }
.nav-link { min-height: 36px; gap: 10px; padding: 6px 12px; margin-bottom: 2px; border-radius: var(--radius-small); color: var(--foreground); font-size: 14px; font-weight: 400; }
.nav-link .icon { width: 18px; height: 18px; color: var(--muted); }
.nav-link:hover { background: var(--hover); color: var(--foreground); }
.nav-link.active { background: var(--primary-soft); color: var(--foreground); font-weight: 500; }
.nav-link.active .icon { color: var(--primary); }
.sidebar-footer, .sidebar-controls.sidebar-footer { background: transparent; border-top: 0; }
.sidebar-controls.sidebar-footer { padding: 12px; }
.sidebar-action { min-height: 36px; border-radius: var(--radius-small); color: var(--foreground); font-size: 14px; font-weight: 400; }
.sidebar-action .icon { color: var(--muted); }
.sidebar-action:hover { background: var(--hover); }
.workspace { display: flex; flex-direction: column; min-height: 100dvh; }
.topbar { height: var(--topbar-height); min-height: var(--topbar-height); padding: 0 24px 0 8px; background: var(--platform); border-bottom: 0; }
.navbar-context { font-size: 14px; color: var(--muted); }
.navbar-context a { color: var(--muted); }
.navbar-context > span { color: var(--ui-border); }
.navbar-context strong { color: var(--foreground); font-weight: 500; }
main#conteudo { flex: 1; width: auto; max-width: none; min-height: calc(100dvh - var(--topbar-height)); margin: 0 12px 0 0; padding: 28px 32px 24px; background: var(--surface); border-radius: var(--radius-big) var(--radius-big) 0 0; box-shadow: var(--shadow-xs); }

/* Alternância de tema: mostra a lua no claro e o sol no escuro. */
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle:hover { background: var(--hover); color: var(--foreground); }
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-icon-light, :root[data-theme="dark"] .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: contents; }
.theme-icon-dark { display: contents; }

/* Conta do usuário */
.user-menu summary { min-height: 44px; gap: 10px; padding: 4px 8px; border: 0; border-radius: var(--radius-small); }
.user-menu summary:hover, .user-menu[open] summary { background: var(--hover); border-color: transparent; }
.user-menu .avatar, .avatar { border-radius: 50%; background: var(--primary); color: #fff; font-weight: 600; }
.user-menu .avatar { width: 32px; height: 32px; font-size: 13px; }
.user-description strong { font-size: 14px; font-weight: 500; }
.user-description small { color: var(--muted); font-size: 12px; }
.user-chevron { border: 0; background: transparent; }
.user-dropdown { top: 50px; border: 0; border-radius: var(--radius-medium); box-shadow: var(--shadow-medium); }
.user-email { border-bottom-color: var(--border-subtle); }
.user-dropdown .logout-button { border-radius: var(--radius-small); font-size: 14px; }
.user-dropdown .logout-button:hover { background: var(--hover-light); color: var(--danger); }

/* Botões */
.button { min-height: 40px; gap: 8px; padding: 8px 16px; border-radius: var(--radius-small); font-size: 14px; font-weight: 500; }
.button-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button-secondary { background: transparent; border-color: var(--ui-border); color: var(--foreground); }
.button-secondary:hover { background: var(--hover-light); border-color: var(--ui-border); }
.button-danger { background: var(--danger); border-color: var(--danger); }
.button-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
a.button:hover { text-decoration: none; }

/* Cartões e cabeçalhos */
.card { border-color: var(--border); border-radius: var(--radius-medium); box-shadow: none; }
.card-heading { border-bottom-color: var(--border-subtle); }
.page-heading p, .card-heading p { color: var(--muted); font-size: 14px; }
.stat-card, .quick-grid a { transition: box-shadow .15s, border-color .15s, background-color .15s; }
.stat-card:hover { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-small); }
.stat-icon, .pending-icon { background: var(--primary-highlight); color: var(--primary); border-radius: var(--radius-medium); }
.stat-card > strong, .commerce-number, .integration-metrics strong { font-family: var(--title-font); font-weight: 500; letter-spacing: -.01em; }
.quick-grid a { background: var(--surface); border-color: var(--border); border-radius: var(--radius-medium); }
.quick-grid a:hover { background: var(--surface); box-shadow: var(--shadow-small); }
.quick-grid .quick-icon { background: var(--primary-highlight); border: 0; }
.catalog-summary { background: var(--primary); border-radius: var(--radius-medium); }
.catalog-summary p { color: #e5f4ff; }
.catalog-summary a { border-top-color: rgb(255 255 255 / 25%); color: #fff; }
.summary-top .icon { color: #fff; }
.notice { border-color: var(--primary-soft); background: var(--primary-highlight); border-radius: var(--radius-medium); }

/* Tabelas no formato de board: colunas divididas e faixa colorida do grupo. */
th { background: var(--surface); color: var(--muted); font-weight: 400; }
.data-table th { background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 400; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 8px 16px; height: 44px; font-size: 14px; border-bottom: 1px solid var(--border); }
.data-table :is(th, td) + :is(th, td) { border-left: 1px solid var(--border); }
.data-table tr > :first-child { box-shadow: inset 6px 0 0 var(--primary); padding-left: 22px; }
.data-table tbody tr:nth-child(even) { background: var(--surface); }
.data-table tbody tr:hover { background: var(--background); }
.card > .table-scroll, .editable-formset > .table-scroll { border-color: var(--border); border-radius: var(--radius-medium); }
.table-toolbar, .table-filters, .table-bottom, .local-table-filter { border-color: var(--border-subtle); }
.table-record-link, .order-number-link { color: var(--foreground); font-weight: 500; }
.table-record-link:hover, .order-number-link:hover { color: var(--primary); text-decoration: none; }
.price-cell { color: var(--foreground); }

/* Status: blocos sólidos como as colunas de status da monday, mantendo contraste legível. */
.badge { padding: 4px 10px; border-radius: var(--radius-small); background: var(--badge-neutral); color: var(--foreground); font-size: 12px; font-weight: 500; }
.badge-success { background: var(--success); color: #fff; }
.badge-inactive { background: var(--danger); color: #fff; }
.badge-warning { background: var(--warning); color: #323338; }
.data-table td:has(> .badge:only-child) { padding: 4px; }
.data-table td > .badge:only-child { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 96px; min-height: 36px; border-radius: 0; font-size: 13px; }
.integration-badge { border-radius: var(--radius-small); border-color: var(--ui-border); background: var(--surface); }
.integration-badge-active { border-color: var(--primary-soft); background: var(--primary-soft); color: var(--foreground); }
.commerce-period-badge { background: var(--primary-highlight); color: var(--link); }
.price-promotional, .commerce-change-up { color: var(--success); }
.commerce-change-down { color: var(--danger); }

/* Campos */
.admin-field :is(input:not([type=checkbox]), select, textarea),
.filter-field :is(input, select),
.formset-cell :is(input:not([type=checkbox]):not([type=hidden]), select),
.local-table-filter input, .search-controls input, .form-field input,
.filter-search, .filter-period,
.select2-container--isis .select2-selection { border-color: var(--ui-border); border-radius: var(--radius-small); background: var(--surface); }
.admin-field :is(input:not([type=checkbox]), select, textarea):hover:not(:disabled),
.filter-field :is(input, select):hover,
.formset-cell :is(input:not([type=checkbox]):not([type=hidden]), select):hover,
.local-table-filter input:hover, .form-field input:hover,
.filter-search:hover, .filter-period:hover,
.select2-container--isis .select2-selection:hover { border-color: var(--foreground); }
.form-field input:focus, .filter-field :is(input, select):focus { background: var(--surface); }
.admin-field :disabled { background: var(--background); color: var(--muted); }
.filter-period, .filter-period select { background: var(--surface); }
.select2-container--isis .select2-dropdown { border: 0; border-radius: var(--radius-medium); box-shadow: var(--shadow-medium); }
.select2-container--isis .select2-results__option { border-radius: var(--radius-small); margin: 2px 6px; }
.select2-container--isis .select2-results__option[aria-selected=true] { background: var(--primary-soft); color: var(--foreground); }
.select2-container--isis .select2-results__option--highlighted[aria-selected] { background: var(--hover); color: var(--foreground); }
.select2-container--isis .select2-selection__choice { background: var(--primary-soft); color: var(--foreground); }
.select2-container--isis .select2-selection__choice__remove { color: var(--foreground); }
.form-section > legend { font-family: var(--title-font); font-weight: 500; border-bottom-color: var(--border-subtle); }
.sticky-form-actions { background: var(--translucent-surface); border-color: var(--border); border-radius: var(--radius-medium); box-shadow: var(--shadow-xs); }

/* Abas: sublinhado azul fino e texto escuro, como as views de um board. */
.content-tabs, .company-tabs { border-color: var(--border-subtle); }
.content-tabs a, .profile-tabs a, .company-tabs a { color: var(--muted); font-weight: 400; border-bottom-width: 2px; }
.content-tabs a:hover, .profile-tabs a:hover, .company-tabs a:hover { background: var(--hover-light); color: var(--foreground); }
.content-tabs a[aria-selected="true"], .profile-tabs a[aria-selected="true"], .company-tabs a[aria-selected="true"] { color: var(--foreground); font-weight: 500; border-bottom-color: var(--primary); }

/* Gaveta de filtros, alertas e indicadores */
.filter-dialog { border: 0; border-radius: var(--radius-medium); box-shadow: var(--shadow-medium); }
.filter-dialog::backdrop { background: var(--backdrop); backdrop-filter: none; }
.filter-dialog-header, .filter-dialog-footer { border-color: var(--border-subtle); }
.filter-dialog-header h2 { font-family: var(--title-font); font-size: 18px; font-weight: 500; }
.filter-close { border: 0; border-radius: var(--radius-small); background: transparent; }
.filter-close:hover { background: var(--hover-light); }
.filter-open-button.has-filters { background: var(--primary-soft); color: var(--foreground); border-color: var(--primary-soft); }
.form-alert, .panel-progress, .panel-error { border-radius: var(--radius-medium); box-shadow: var(--shadow-medium); }
.commerce-filter-bar { border-color: var(--border); border-radius: var(--radius-medium); }
.commerce-key-sales { background: var(--color-primary-600); }
.commerce-key-canceled { background: var(--color-danger-500); }
.commerce-key-previous { background: var(--color-primary-300); }
.commerce-progress, .commerce-ranking-item > div:first-child > span:last-child { background: var(--border-subtle); }
.commerce-kpi footer { border-top-color: var(--border-subtle); }

/* Páginas de perfil e empresa passam a usar a mesma paleta. */
.company-page { --company-blue: var(--primary); --company-blue-hover: var(--primary-hover); --company-ink: var(--foreground); --company-muted: var(--muted); --company-border: var(--border); --company-cover: var(--primary-highlight); }
.company-page .card { border-radius: var(--radius-medium); }
.company-cover::before { background: var(--primary-soft); }
.company-cover-shape { background: #99ccff; }
.company-cover > span { color: var(--primary-hover); }
.company-mark { border-radius: var(--radius-medium); }
.company-title h1, .profile-name h1 { font-family: var(--title-font); font-weight: 500; letter-spacing: -.01em; }
.company-page .company-primary, .company-page .company-secondary { border-radius: var(--radius-small); }
.company-page .company-secondary:hover { background: var(--primary-highlight); }
.profile-page { --profile-blue: var(--primary); --profile-ink: var(--foreground); --profile-cover: var(--primary-highlight); --profile-border: var(--border); --profile-muted: var(--muted); }
.profile-header { border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
.profile-tabs { border-radius: 0 0 var(--radius-medium) var(--radius-medium); }
.profile-cover::after { border-color: var(--primary-soft); }
.profile-cover > span { color: var(--primary-hover); }
.profile-actions .button-primary { background: var(--primary); border-color: var(--primary); }
.profile-actions .button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.profile-page a:focus-visible, .profile-panel:focus-visible { outline-color: var(--primary); }

.password-toggle:hover { background: var(--primary-highlight); }

/* Cores que as camadas anteriores fixaram em tons claros passam a seguir os tokens. */
.profile-tabs, .filter-dialog-footer, .filter-search, .filter-period select,
.select2-container--isis .select2-dropdown, .select2-container--isis .select2-search--dropdown .select2-search__field { background: var(--surface); color: var(--foreground); }
.select2-container--isis .select2-selection--single .select2-selection__rendered { color: var(--foreground); }
.select2-container--isis.select2-container--disabled .select2-selection { background: var(--background); }
tbody tr:hover { background: var(--background); }
.info-list > div { border-bottom-color: var(--border-subtle); }
.product-symbol, .collaborator-avatar, .profile-edit-avatar, .company-empty-icon { background: var(--primary-highlight); color: var(--primary); }
.profile-avatar { border-color: var(--surface); background: var(--primary-highlight); }
.profile-photo-action { border-color: var(--surface); background: var(--background); color: var(--foreground); }
.profile-photo-action:hover { background: var(--hover); }
.profile-avatar-placeholder, .profile-edit-avatar span { color: var(--primary); }
.profile-tabs a:hover, .company-tabs a:hover { background: var(--hover-light); }
.company-status { background: var(--alert-success-bg); color: var(--alert-success-text); }
.company-status-inactive { background: var(--alert-danger-bg); color: var(--alert-danger-text); }
.profile-state { color: var(--alert-success-text); }
.profile-state-inactive { color: var(--alert-danger-text); }
.form-alert { border-color: var(--alert-danger-border); background: var(--alert-danger-bg); color: var(--alert-danger-text); }
.form-alert-icon, .form-alert-close:hover { background: var(--alert-danger-soft); }
.form-alert-content p, .form-alert-close { color: var(--alert-danger-text); }
.form-alert[data-level~="success"] { border-color: var(--alert-success-border); background: var(--alert-success-bg); color: var(--alert-success-text); }
.form-alert[data-level~="success"] .form-alert-icon, .form-alert[data-level~="success"] .form-alert-close:hover { background: var(--alert-success-soft); }
.form-alert[data-level~="success"] .form-alert-content p, .form-alert[data-level~="success"] .form-alert-close { color: var(--alert-success-text); }
.form-alert[data-level~="warning"] { border-color: var(--alert-warning-border); background: var(--alert-warning-bg); color: var(--alert-warning-text); }
.form-alert[data-level~="warning"] .form-alert-icon, .form-alert[data-level~="warning"] .form-alert-close:hover { background: var(--alert-warning-soft); }
.form-alert[data-level~="warning"] .form-alert-content p, .form-alert[data-level~="warning"] .form-alert-close { color: var(--alert-warning-text); }
.form-alert[data-level~="info"] { border-color: var(--alert-info-border); background: var(--alert-info-bg); color: var(--alert-info-text); }
.form-alert[data-level~="info"] .form-alert-icon, .form-alert[data-level~="info"] .form-alert-close:hover { background: var(--alert-info-soft); }
.form-alert[data-level~="info"] .form-alert-content p, .form-alert[data-level~="info"] .form-alert-close { color: var(--alert-info-text); }
.form-errors, .logout-button:hover { border-color: var(--alert-danger-border); background: var(--alert-danger-bg); color: var(--alert-danger-text); }
.inline-note { border-color: var(--alert-warning-border); background: var(--alert-warning-bg); color: var(--alert-warning-text); }
.field-error, .formset-error, .filter-error, .danger-check .checkbox-label, .sync-card-summary .sync-error-text, .profile-photo-remove { color: var(--alert-danger-text); }
.notice { color: var(--foreground); }
.price-promotional, .commerce-change-up { color: var(--alert-success-text); }
:root[data-theme="dark"] .company-cover-shape { background: #1f4a8a; }
:root[data-theme="dark"] .company-cover > span, :root[data-theme="dark"] .profile-cover > span { color: var(--alert-info-text); }
:root[data-theme="dark"] .brand-logo { filter: drop-shadow(0 0 1px rgb(255 255 255 / 30%)); }

@media (max-width: 768px) {
  .workspace { display: contents; }
  .sidebar { width: 100%; background: var(--platform); }
  .topbar { padding: 0 16px; }
  main#conteudo { margin: 0; padding: 20px 16px; border-radius: var(--radius-big) var(--radius-big) 0 0; }
  .button, .nav-link, .sidebar-action { min-height: 44px; }
  .theme-toggle { width: 44px; height: 44px; }
  .data-table tr > :first-child { padding-left: 18px; }
}
@media (max-width: 480px) {
  .header-start, .header-actions { gap: 4px; }
  .user-description { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-card, .quick-grid a { transition: none; }
}