@import "tailwindcss";

/* Tailwind v4 source detection */
@source "../../../app/views/**/*.erb";
@source "../../../app/helpers/**/*.rb";
@source "../../../app/javascript/**/*.js";
@source "../../../app/controllers/**/*.rb";

@theme {
  /* LawIs Theme Variables */
  --color-sidebar-bg: #0F1117;
  --color-sidebar-hover: #1a1d26;
  --color-sidebar-active: #1e2230;
  --color-sidebar-text: #9CA3AF;
  --color-sidebar-text-active: #F9FAFB;
  --color-page-bg: #F8F9FB;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  /* Arco da tinta: sky -> azure -> violeta. Mesmo arco declarado em
     landing/src/app.css — as duas identidades convergem (ver plano de
     design "Tinta e Prazo"). O violeta fica reservado a esse arco e não
     vira cor de superfície em lugar nenhum do app. */
  --color-accent-from: #7DD3FC;
  --color-accent-to: #7C3AED;
  --color-accent-mid: #3B82F6;
  --color-topbar-bg: #ffffff;
  --color-surface: #ffffff;
  --color-border-main: #E5E7EB;
  --color-border-light: #F3F4F6;

  /* Fonte global: Inter */
  --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-mono: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

  --sidebar-w: 256px;
  --sidebar-collapsed: 56px;
  --topbar-h: 52px;

  /* Toast animations */
  --animate-slide-in: slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-shrink-bar: shrink-bar 4s linear forwards;
}

/* Component Styles from New Frontend */
@layer components {
  /* Dot base */
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 99px;
  }
  .dot-green  { background: #10B981; }
  .dot-amber  { background: #F59E0B; }
  .dot-orange { background: #F97316; }
  .dot-blue   { background: #3B82F6; }
  .dot-purple { background: #8B5CF6; }
  .dot-gray   { background: #9CA3AF; }
  .dot-red    { background: #EF4444; }

  .grad-text {
    background: linear-gradient(135deg, var(--color-accent-from), var(--color-accent-to));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    border: none;
  }

  .btn-primary-new {
    background: linear-gradient(135deg, var(--color-accent-from), var(--color-accent-to));
    color: white;
    box-shadow: 0 2px 8px rgba(99,102,241,.35);
  }
  .btn-primary-new:hover {
    opacity: .9;
    transform: translateY(-1px);
  }

  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-main) !important;
    box-shadow: var(--shadow-sm);
    transition: background .15s, transform .1s;
  }
  .btn-secondary:hover {
    background: var(--color-border-light);
  }
  .btn-secondary:active {
    transform: scale(.97);
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
  }
  .btn-ghost:hover {
    background: var(--color-border-light);
    color: var(--color-text-primary);
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-md);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: #2563EB; /* azure — mesma cor que .form-input:focus já usa; ver plano "Tinta e Prazo" */
    cursor: pointer;
    transition: background .15s, transform .1s;
  }
  .btn-primary:hover { background: #1D4ED8; transform: translateY(-1px); } /* azure-deep */
  .btn-primary:active { transform: scale(.97); }
  .btn-primary:disabled { opacity: .6; cursor: not-allowed; }

  .btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-md);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #B91C1C;
    background: transparent;
    border: 1px solid #B91C1C;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .btn-danger:hover { background: #FEF2F2; }

  /* Formulários — os 17 partials _form.html.erb copiavam esta mesma string à mão,
     com pequenas divergências silenciosas entre eles. Aplicadas automaticamente
     pelo LawisFormBuilder (app/helpers/lawis_form_builder.rb); as classes aqui
     existem também para quem precisar de um campo fora de um form_with. */
  .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
  }
  .form-label .required-mark {
    color: #B91C1C;
    margin-left: 2px;
  }
  /* Para o par checkbox + label lado a lado — .form-label é display:block de
     propósito (rótulo em cima de campo), o que quebraria essa linha. */
  .form-label-inline {
    font-size: 13px;
    color: var(--color-text-secondary);
  }
  .form-input,
  .form-select,
  .form-textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 14px;
    color: var(--color-text-primary);
    background: white;
    transition: border-color .15s, box-shadow .15s;
  }
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 2px rgba(37,99,235,.2);
  }
  .form-input.field_with_errors,
  .form-select.field_with_errors,
  .form-textarea.field_with_errors,
  .form-input.form-input-invalid {
    border-color: #B91C1C;
  }
  .form-textarea { resize: vertical; }
  .form-checkbox {
    height: 16px;
    width: 16px;
    border-radius: 4px;
    border: 1px solid var(--color-border-main);
    color: #1e40af;
  }
  .form-help {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
  }
  .form-error {
    margin-top: 4px;
    font-size: 12px;
    color: #B91C1C;
  }

  /* Wizard de passos (cadastro em 3 passos e onboarding pós-cadastro) — cada
     passo é uma navegação de página inteira, então a "transição" entre eles
     é só o conteúdo novo entrando com um leve fade+subida, e a barra de
     progresso preenchendo com uma cor que anima em vez de trocar de estado
     seca. Sem isso os passos pareciam crus, sem nenhuma fluidez entre um e
     outro. */
  @keyframes wizard-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Toasts (bottom-right) e banners de notificação (top-right/top-left) — os
     tokens --animate-slide-in/--animate-shrink-bar já existiam mas sem
     @keyframes correspondente, então entravam sem animação nenhuma. */
  @keyframes slide-in {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-1rem); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes shrink-bar {
    from { width: 100%; }
    to   { width: 0%; }
  }
  .animate-slide-in-left {
    animation: slide-in-left 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .wizard-step {
    animation: wizard-in .3s ease-out;
  }
  .wizard-progress-seg {
    transition: background-color .35s ease;
  }

  /* Pílulas de escolha curta (ex.: tratamento no cadastro/perfil,
     app/views/shared/_pill_radio.html.erb). Toda a aparência de "selecionado"
     vem de :has(input:checked) — nunca uma classe estática — porque foi
     justamente uma classe "sel" hardcoded competindo com o estado real do
     radio que causou o bug relatado no artefato de validação (clicar em
     outra opção não tirava o azul da primeira). */
  .pill-op {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--color-border-main);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12.5px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .1s;
  }
  .pill-op:active { transform: scale(.96); }
  .pill-op input { accent-color: #2563EB; width: 13px; height: 13px; }
  .pill-op:has(input:checked) {
    border-color: #2563EB;
    background: #EAF0FE;
    color: #1D4ED8;
    font-weight: 600;
  }

  /* Card de plano (passo 3 do cadastro, app/views/users/registrations/_plan_card.html.erb).
     Mesmo princípio do .pill-op: o detalhe do plano só expande via
     :has(input:checked), sem classe estática. */
  .plano-card {
    display: block;
    position: relative;
    border: 1.5px solid var(--color-border-main);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
  }
  .plano-card:active { transform: scale(.985); }
  .plano-card:last-of-type { margin-bottom: 0; }
  .plano-card input { position: absolute; opacity: 0; }
  .plano-card:has(input:checked) { border-color: #2563EB; background: #EAF0FE; }
  .plano-card-fita {
    position: absolute;
    top: -9px;
    right: 14px;
    background: #2563EB;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 9px;
    border-radius: 999px;
  }
  .plano-card-cab { display: flex; align-items: baseline; justify-content: space-between; }
  .plano-card-nome { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
  .plano-card-preco { font-size: 14px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
  .plano-card-preco span { font-weight: 500; font-size: 11px; color: var(--color-text-muted); }
  .plano-card-para { font-size: 11.5px; color: var(--color-text-secondary); margin: 3px 0 0; }
  .plano-card-detalhe { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
  .plano-card:has(input:checked) .plano-card-detalhe {
    max-height: 120px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid rgba(37,99,235,.18);
  }
  .plano-card-detalhe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
  .plano-card-detalhe li { font-size: 11.5px; color: var(--color-text-primary); }
  .plano-card-detalhe li::before { content: "✓ "; color: #15803D; font-weight: 700; }

  .sidebar-nav-item-new {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-sidebar-text);
    font-size: 13px;
    font-weight: 450;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    position: relative;
  }
  .sidebar-nav-item-new:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
  }
  .sidebar-nav-item-new.active {
    background: var(--color-sidebar-active);
    color: var(--color-sidebar-text-active);
  }
  .sidebar-nav-item-new.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom, var(--color-accent-from), var(--color-accent-to));
  }

  /* Sidebar collapsible group */
  details.group\/drive > summary::-webkit-details-marker { display: none; }
  details.group\/drive > summary { list-style: none; }

  /* Sidebar collapse (icon-only mode) */
  .app-sidebar {
    width: var(--sidebar-w);
    transition: width .2s ease;
  }
  .app-content {
    margin-left: var(--sidebar-w);
    transition: margin-left .2s ease;
  }
  /* #prazo-banners é `position: fixed` (não fica no fluxo do documento, então não
     empurra o conteúdo pra baixo como .app-content faz), mas por isso precisa
     acompanhar manualmente o mesmo deslocamento horizontal da sidebar. */
  #prazo-banners {
    left: var(--sidebar-w);
    transition: left .2s ease;
  }
  /* O modo "recolhido" (só ícones) é um conceito de desktop — abaixo de "lg" a
     sidebar é um overlay de tela cheia (ver media query mais abaixo), então essas
     regras não fazem sentido e ficam restritas a telas grandes. */
  @media (min-width: 1024px) {
    body.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed); }
    body.sidebar-collapsed .app-content { margin-left: var(--sidebar-collapsed); }
    body.sidebar-collapsed #prazo-banners { left: var(--sidebar-collapsed); }
    body.sidebar-collapsed .sidebar-label { display: none; }
    body.sidebar-collapsed .app-sidebar .sidebar-nav-item-new {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }
    body.sidebar-collapsed .app-sidebar .sidebar-badge {
      position: absolute;
      top: -2px;
      right: 4px;
      min-width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--color-sidebar-bg);
      box-sizing: border-box;
      margin: 0 !important;
      padding: 0 3px !important;
      font-size: 9px !important;
      line-height: 1 !important;
    }
  }

  .sidebar-toggle-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .sidebar-toggle-btn:hover {
    background: var(--color-sidebar-hover);
    color: #fff;
  }
  .sidebar-toggle-icon { transition: transform .2s ease; }

  @media (min-width: 1024px) {
    body.sidebar-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
    body.sidebar-collapsed .sidebar-header { justify-content: center; }

    /* Drive submenu flyout when sidebar is collapsed */
    /* nav's overflow-x-hidden/overflow-y-auto utility classes would otherwise clip the flyout
       and always win over this rule (Tailwind's utilities layer outranks @layer components),
       so !important is needed here. Item heights don't change on collapse, so this doesn't
       introduce new vertical overflow. */
    body.sidebar-collapsed .app-sidebar nav { overflow: visible !important; }

    /* .sidebar-nav-item-new tem overflow:hidden para truncar o texto no modo expandido —
       isso também cortava o flyout abaixo, que precisa "vazar" para fora do ícone. */
    body.sidebar-collapsed .app-sidebar a.sidebar-nav-item-new:hover {
      overflow: visible;
    }

    /* Name flyout for every other item (single-link items, not the Drive submenu).
       left:100% (em vez de calc(sidebar-collapsed + 8px)) ancora no próprio elemento,
       não no valor fixo da sidebar — evita reintroduzir a folga que quebrava o hover
       do submenu do Drive logo abaixo. Aqui não afeta clique (pointer-events: none),
       mas mantém as duas regras consistentes. */
    body.sidebar-collapsed .app-sidebar a.sidebar-nav-item-new:hover .sidebar-label {
      display: block;
      position: absolute;
      left: 100%;
      margin-left: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--color-sidebar-bg);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-sm);
      padding: 6px 10px;
      box-shadow: var(--shadow-lg);
      white-space: nowrap;
      font-size: 12px;
      font-weight: 500;
      color: var(--color-sidebar-text-active);
      z-index: 42;
      pointer-events: none;
    }

    /* Bug reportado: ao mover o mouse do ícone do Drive até o submenu, o cursor
       passava por uma faixa "morta" (sem hover em nada) entre os dois — o :hover do
       <details> caía antes de chegar no menu, fechando-o no meio do caminho. Duas
       correções: o submenu agora começa exatamente na borda do <details>
       (left: 100%, sem folga) e o próprio <details> ganha um respiro de padding-right
       que também conta como área de hover, criando uma ponte contínua até o menu. */
    body.sidebar-collapsed .app-sidebar details { position: relative; padding-right: 8px; }
    body.sidebar-collapsed .app-sidebar details > div { display: none; }
    body.sidebar-collapsed .app-sidebar details:hover > div {
      display: block;
      position: absolute;
      left: 100%;
      top: 0;
      background: var(--color-sidebar-bg);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-md);
      padding: 6px;
      box-shadow: var(--shadow-lg);
      width: 180px;
      z-index: 42;
    }
    body.sidebar-collapsed .app-sidebar details:hover > div .sidebar-nav-item-new {
      justify-content: flex-start;
      padding-left: 10px;
      padding-right: 10px;
    }
    body.sidebar-collapsed .app-sidebar details:hover > div .sidebar-label { display: inline; }
  }

  /* Sidebar em modo overlay abaixo de "lg" — some da tela por padrão e desliza
     por cima do conteúdo (com backdrop) em vez de empurrar/ocupar espaço fixo. */
  @media (max-width: 1023px) {
    .app-sidebar {
      width: var(--sidebar-w) !important;
      transform: translateX(-100%);
      transition: transform .25s ease;
    }
    body.mobile-sidebar-open .app-sidebar { transform: translateX(0); }
    body.mobile-sidebar-open .mobile-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .app-content { margin-left: 0 !important; }
    #prazo-banners { left: 0 !important; }
  }

  /* Metric cards */
  .metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    transition: all .15s;
  }
  .metric-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
  }
  .metric-value {
    font-size: 28px;
    font-weight: 700;
    margin: 6px 0 4px;
    color: var(--color-text-primary);
    line-height: 1;
  }
  .metric-link {
    font-size: 12px;
    color: var(--color-accent-mid);
    cursor: pointer;
    text-decoration: none;
  }
  .metric-link:hover {
    text-decoration: underline;
  }

  /* Badge base */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
  }
  .badge-blue   { background:#EFF6FF; color:#1D4ED8; }
  .badge-green  { background:#F0FDF4; color:#15803D; }
  .badge-amber  { background:#FFFBEB; color:#B45309; }
  .badge-red    { background:#FEF2F2; color:#B91C1C; }
  .badge-purple { background:#F5F3FF; color:#6D28D9; }
  .badge-gray   { background:#F3F4F6; color:#374151; }
  .badge-orange { background:#FFF7ED; color:#C2410C; }

  /* Page headers */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-title {
    font-size: 20px;
    font-weight: 650;
    color: var(--color-text-primary);
  }
  .page-subtitle {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  /* Modal shell (conteúdo do turbo-frame "modal", ver layouts/_modal.html.erb).
     Classes referenciadas em document_templates/{new,show} e prazo_sugestoes/show
     nunca tiveram CSS de verdade — renderizavam com o default do navegador (por isso
     título/subtítulo saíam desalinhados, sem separação do corpo). */
  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-main);
    flex-shrink: 0;
  }
  .modal-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--color-text-primary);
  }
  .modal-subtitle {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 2px;
  }
  .modal-close-btn {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    padding: 6px;
    color: var(--color-text-muted);
    transition: background .15s, color .15s;
  }
  .modal-close-btn:hover {
    background: var(--color-border-light);
    color: var(--color-text-secondary);
  }
  .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  /* Dashboard cards */
  .dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-light);
  }
  .dashboard-card-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--color-text-secondary);
  }
  .dashboard-card-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-accent-mid);
    text-decoration: none;
  }
  .dashboard-card-link:hover { text-decoration: underline; }
  .dashboard-list-item {
    display: flex;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-light);
    align-items: flex-start;
  }
  .dashboard-list-item:hover { background: var(--color-bg-hover); }
  .dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 0;
  }

  /* Table styles */
  .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-main);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  /* Colunas secundárias escondidas em telas pequenas (o conteúdo essencial
     continua acessível; o resto fica disponível rolando a tabela horizontalmente
     graças ao overflow-x: auto de .table-wrap acima). */
  @media (max-width: 767px) {
    .hide-mobile { display: none; }
  }
  table thead tr {
    background: #FAFAFA;
    border-bottom: 1px solid var(--color-border-main);
  }
  table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
  }
  table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background .1s;
  }
  table tbody td {
    padding: 11px 14px;
    color: var(--color-text-primary);
    vertical-align: middle;
    font-size: 13px;
  }

  /* Filter row */
  .filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .filter-select {
    padding: 7px 10px;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
    background: white;
    cursor: pointer;
    color: var(--color-text-primary);
  }

  /* Native select estilizado — para campos com JS dinâmico (team-responsible, crm-form) */
  .select-native {
    padding: 7px 32px 7px 12px;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    color: var(--color-text-primary);
  }
  .select-native:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }
  .search-bar {
    display: flex;
    align-items: center;
    background: var(--color-border-light);
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    gap: 8px;
  }

  /* Kanban / CRM */
  .kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
  }
  .kanban-col {
    flex-shrink: 0;
    width: 256px;
    display: flex;
    flex-direction: column;
  }
  .kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
  }
  .kanban-col-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .kanban-col-count {
    font-size: 11px;
    background: var(--color-border-light);
    color: var(--color-text-muted);
    border-radius: 99px;
    padding: 1px 8px;
  }
  .kanban-cards {
    background: #F3F4F6;
    border-radius: var(--radius-md);
    padding: 8px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .kanban-card {
    background: white;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: grab;
    box-shadow: var(--shadow-sm);
    transition: all .15s;
  }
  .kanban-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .kanban-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    line-height: 1.35;
  }
  .kanban-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .kanban-card-tag {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  /* Abas / Tabs */
  .tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all .15s;
    border-bottom: 2px solid transparent;
    text-decoration: none;
  }
  .tab:hover {
    color: var(--color-text-primary);
    background: var(--color-border-light);
  }
  .tab.active {
    color: var(--color-accent-mid);
    border-bottom-color: var(--color-accent-mid);
    background: transparent !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}