/* ============================================================
   Comunidade Fiscal - Design Tokens (fonte unica de verdade)
   Ver DESIGNSYSTEM.md e .ai/decisions.md (D-004).

   Como usar em uma pagina:
     <link rel="stylesheet" href="assets/theme/tokens.css">        (raiz)
     <link rel="stylesheet" href="../assets/theme/tokens.css">     (subpasta)

   Custom properties herdam atraves do Shadow DOM (sidebar) e para
   os modulos (#<modulo>-app). Componentes devem consumir via
   var(--cf-*, fallback). O fallback garante o visual atual mesmo
   se este arquivo nao carregar (ex.: contexto externo/Bubble).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  /* Marca / acao principal (identidade Shell + Sidebar) */
  --cf-primary: #0046ad;
  --cf-primary-strong: #003a9d;
  --cf-primary-soft: #eaf1ff;
  --cf-primary-bright: #5b8def;   /* topo de gradiente / realce claro de marca */

  /* Apoio */
  --cf-secondary: #2f5d62;   /* teal */
  --cf-green: #6baa30;
  --cf-accent: #b38a3d;      /* dourado */

  /* Tinta / texto */
  --cf-ink: #011544;         /* titulos / marinho */
  --cf-text: #1b2430;        /* texto base */
  --cf-text-soft: #5a6573;
  --cf-muted: #526172;

  /* Superficies */
  --cf-surface: #ffffff;
  --cf-surface-soft: #f6f8fb;
  --cf-chip: #f1f5f9;        /* chip/slate claro (consolidado de modulos legados) */
  --cf-bg: #eff1f4;          /* fundo de modulo */
  --cf-bg-hub: #f7fafc;      /* fundo do Shell */

  /* Linhas / bordas */
  --cf-line: rgba(1, 21, 68, 0.12);
  --cf-border: #d2d6de;
  --cf-border-strong: #b8c0cc;

  /* Semanticos */
  --cf-ok: #2e7d57;
  --cf-warn: #9a6b1e;
  --cf-err: #b42318;
  --cf-info: #1e4f9a;
  --cf-focus: #4c7ae6;

  /* Raio */
  --cf-radius-xs: 8px;
  --cf-radius-sm: 10px;
  --cf-radius-md: 13px;
  --cf-radius-lg: 18px;
  --cf-radius-xl: 24px;
  --cf-radius-pill: 999px;

  /* Espacamento (escala base) */
  --cf-space-1: 4px;
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-4: 16px;
  --cf-space-5: 20px;
  --cf-space-6: 28px;
  --cf-space-7: 40px;

  /* Largura do container de pagina.
     O Sidebar ja reserva sua propria coluna; o conteudo usa todo o restante. */
  --cf-page-max: 100%;

  /* Sombra */
  --cf-shadow-sm: 0 1px 0 rgba(16, 35, 56, 0.03);
  --cf-shadow-md: 0 12px 34px rgba(13, 40, 71, 0.07);
  --cf-shadow-lg: 0 18px 48px rgba(1, 21, 68, 0.08);

  /* Gradientes de marca */
  --cf-gradient-primary: linear-gradient(180deg, var(--cf-primary-bright) 0%, var(--cf-primary) 100%); /* botoes */
  --cf-gradient-bar: linear-gradient(90deg, var(--cf-primary) 0%, var(--cf-primary-bright) 100%);       /* barras de progresso */

  /* Tipografia */
  --cf-font-title: "Manrope", "Segoe UI", sans-serif;
  --cf-font-ui: "Source Sans 3", "Segoe UI", sans-serif;
  --cf-font-mono: ui-monospace, Menlo, Consolas, monospace;
}

html[data-cf-theme="dark"] {
  color-scheme: dark;
  --cf-ink: #dce9fa;
  --cf-text: #e5edf7;
  --cf-text-soft: #a9b9cc;
  --cf-muted: #9fb1c5;
  --cf-surface: #131c27;
  --cf-surface-soft: #1a2634;
  --cf-chip: #203247;
  --cf-bg: #0f1722;
  --cf-bg-hub: #0b121b;
  --cf-line: rgba(205, 224, 247, 0.16);
  --cf-border: #34485f;
  --cf-border-strong: #4b6684;
  --cf-primary-soft: #17345c;
}

/* ============================================================
   Tratamento premium de pagina (paginas com Sidebar)
   Propaga a identidade do Shell (index.html) aos modulos via
   override de alta especificidade sobre o body de cada pagina.
   ============================================================ */
html.cf-sidebar-mounted body {
  box-sizing: border-box;            /* reforca o fix de overflow (ver sidebar.js) */
  margin: 0;
  min-width: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 70, 173, 0.08), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(107, 170, 48, 0.08), transparent 28%),
    linear-gradient(rgba(1, 21, 68, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 21, 68, 0.045) 1px, transparent 1px),
    var(--cf-bg-hub, #f7fafc);
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
  -webkit-font-smoothing: antialiased;        /* polish premium: render de fonte */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-width: thin;                       /* Firefox: scrollbar fina */
  scrollbar-color: var(--cf-border-strong, #b8c0cc) transparent;
}

html[data-cf-theme="dark"].cf-sidebar-mounted body {
  background:
    radial-gradient(circle at 12% 0%, rgba(91, 141, 239, 0.16), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(107, 170, 48, 0.10), transparent 28%),
    linear-gradient(rgba(205, 224, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205, 224, 247, 0.045) 1px, transparent 1px),
    var(--cf-bg-hub, #0b121b);
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
  color: var(--cf-text, #e5edf7);
}

html[data-cf-theme="dark"].cf-sidebar-mounted body :is(
  .card,
  .panel,
  .screen,
  .result-panel,
  .summary-card,
  .metric-card,
  .modeBox,
  .modo-box,
  .table-wrap,
  .tableWrap,
  .table-shell,
  .sheet-wrap
) {
  background: var(--cf-surface, #131c27) !important;
  border-color: var(--cf-border, #34485f) !important;
  color: var(--cf-text, #e5edf7) !important;
}

html[data-cf-theme="dark"].cf-sidebar-mounted body :is(input, select, textarea) {
  background: var(--cf-surface-soft, #1a2634) !important;
  border-color: var(--cf-border-strong, #4b6684) !important;
  color: var(--cf-text, #e5edf7) !important;
}

html[data-cf-theme="dark"].cf-sidebar-mounted body :is(th, thead) {
  background: #1d2d40 !important;
  color: var(--cf-ink, #dce9fa) !important;
}

html[data-cf-theme="dark"].cf-sidebar-mounted body td {
  border-color: var(--cf-line, rgba(205,224,247,.16)) !important;
  color: var(--cf-text, #e5edf7);
}

html.cf-sidebar-mounted body > *:not(sidebar-menu) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* Containers estruturais legados ainda declaravam 1120/1240/1360px em cada
   modulo. Somente o primeiro nivel da pagina e ampliado: cards, formularios,
   textos e modais continuam com suas larguras de leitura intencionais. */
html.cf-sidebar-mounted body > :is(.page, .page-shell, .wrap, .shell) {
  width: calc(100% - clamp(24px, 2.4vw, 40px)) !important;
  max-width: none !important;
}

html.cf-sidebar-mounted body > [id$="-app"],
html.cf-sidebar-mounted body > [id$="-app"] > :is(.page, .page-shell, .wrap, .shell),
html.cf-sidebar-mounted body > main > :is(.page, .page-shell, .wrap, .shell),
html.cf-sidebar-mounted body > main[id$="-app"] > :is(.page, .page-shell, .wrap, .shell) {
  width: 100% !important;
  max-width: none !important;
}

/* Barras de contexto presentes no NCM e nos simuladores: preserva todo o
   conteudo, mas devolve altura util para o modulo. */
html.cf-sidebar-mounted body > :is(.page, .page-shell) > .topbar,
html.cf-sidebar-mounted body > main:is(.page, .page-shell) > .topbar {
  min-height: 48px !important;
  margin-bottom: 14px !important;
}

html.cf-sidebar-mounted :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cf-focus, #4c7ae6) 78%, #fff);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cf-focus, #4c7ae6) 18%, transparent);
}

html.cf-sidebar-mounted [role="region"][tabindex="0"]:focus-visible {
  outline-offset: 4px;
}

/* Polish premium global: scrollbars finos e selecao de texto na cor da marca.
   Pseudo-elementos/selecao nao conflitam com componentes escopados (#<modulo>-app)
   e aplicam a todas as paginas com Sidebar (inclui o Shell). */
html.cf-sidebar-mounted ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.cf-sidebar-mounted ::-webkit-scrollbar-track {
  background: transparent;
}
html.cf-sidebar-mounted ::-webkit-scrollbar-thumb {
  background: var(--cf-border-strong, #b8c0cc);
  border: 2px solid transparent;
  border-radius: var(--cf-radius-pill, 999px);
  background-clip: padding-box;
}
html.cf-sidebar-mounted ::-webkit-scrollbar-thumb:hover {
  background: var(--cf-primary, #0046ad);
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.cf-sidebar-mounted ::selection {
  background: var(--cf-primary, #0046ad);
  color: #fff;
}

/* Acento de marca antes do titulo da pagina (nao aplica ao Shell/index). */
html.cf-sidebar-mounted body h1:not(#titulo-index)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 0.85em;
  margin-right: 12px;
  vertical-align: -0.08em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--cf-primary, #0046ad), var(--cf-secondary, #2f5d62));
}

/* ============================================================
   Profundidade e raios compartilhados
   Mantem o vocabulario visual consistente sem exigir que cada
   modulo redeclare a mesma combinacao de radius/shadow.
   ============================================================ */
html.cf-sidebar-mounted body :is(
  .card,
  .panel,
  .screen,
  .result-panel,
  .summary-card,
  .metric-card,
  .modeBox,
  .modo-box
) {
  border-radius: var(--cf-radius-lg, 18px) !important;
  box-shadow:
    var(--cf-shadow-sm, 0 1px 0 rgba(16, 35, 56, 0.03)),
    var(--cf-shadow-md, 0 12px 34px rgba(13, 40, 71, 0.07)) !important;
}

/* Estados operacionais compartilhados. As classes legadas mais usadas sao
   absorvidas aqui para que loading, vazio, sucesso e erro tenham a mesma voz. */
html.cf-sidebar-mounted body :is(
  .cf-state,
  .empty,
  .empty-state,
  .status-text,
  .status,
  .hint,
  .alert
) {
  border: 1px solid var(--cf-border, #d2d6de);
  border-radius: var(--cf-radius-md, 13px) !important;
  background: color-mix(in srgb, var(--cf-surface, #fff) 92%, var(--cf-primary-soft, #eaf1ff));
  color: var(--cf-text-soft, #5a6573);
  line-height: 1.45;
}

html.cf-sidebar-mounted body :is(.empty, .empty-state, .cf-state--empty) {
  padding: var(--cf-space-5, 20px);
  text-align: center;
  border-style: dashed;
}

html.cf-sidebar-mounted body :is(.alert.err, .cf-state--error, [role="alert"]) {
  border-color: color-mix(in srgb, var(--cf-err, #b42318) 35%, transparent);
  background: color-mix(in srgb, var(--cf-err, #b42318) 8%, #fff);
  color: var(--cf-err, #b42318);
}

html.cf-sidebar-mounted body :is(.alert.ok, .cf-state--success) {
  border-color: color-mix(in srgb, var(--cf-ok, #2e7d57) 35%, transparent);
  background: color-mix(in srgb, var(--cf-ok, #2e7d57) 8%, #fff);
  color: var(--cf-ok, #2e7d57);
}

html.cf-sidebar-mounted body :is(.loading, .loader, .cf-state--loading, [aria-busy="true"]) {
  cursor: progress;
}

html.cf-sidebar-mounted body :is(.loading, .cf-state--loading)::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: var(--cf-space-2, 8px);
  border: 2px solid color-mix(in srgb, var(--cf-primary, #0046ad) 25%, transparent);
  border-top-color: var(--cf-primary, #0046ad);
  border-radius: 50%;
  vertical-align: -0.12em;
  animation: cf-spin 0.8s linear infinite;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

/* Tabelas mantem largura util para leitura, mas o overflow fica sempre dentro
   do componente em vez de cortar a pagina. */
html.cf-sidebar-mounted body :is(
  .table-wrap,
  .tableWrap,
  .table-shell,
  .table-wrap-report,
  .sheet-wrap,
  #grid-scroll,
  [id$="-table-wrap"]
) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

html.cf-sidebar-mounted body :is(.row, .toolbar, .filters, .controls) > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px) {
  html.cf-sidebar-mounted body :is(
    .wrap,
    .page,
    .screen,
    [id$="-app"]
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }

  html.cf-sidebar-mounted body :is(.grid2, .grid-2, .two-col, .cols-2) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.cf-sidebar-mounted body :is(.row, .toolbar, .filters, .controls) {
    flex-wrap: wrap !important;
  }

  html.cf-sidebar-mounted body :is(.row, .toolbar, .filters, .controls) > * {
    flex-basis: 100% !important;
    min-width: 0 !important;
    width: 100%;
  }

  html.cf-sidebar-mounted body :is(.card, .panel, .screen) {
    padding-left: var(--cf-space-3, 12px) !important;
    padding-right: var(--cf-space-3, 12px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cf-sidebar-mounted *,
  html.cf-sidebar-mounted *::before,
  html.cf-sidebar-mounted *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html.cf-sidebar-mounted body :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .table-wrap,
  .tableWrap,
  .table-shell,
  .sheet-wrap,
  #grid-scroll
) {
  border-radius: var(--cf-radius-md, 13px) !important;
}

html.cf-sidebar-mounted body :is(
  .badge,
  .pill,
  .tag,
  .chip,
  .progress-track,
  .progress-wrap,
  .btn:not(.icon-only)
) {
  border-radius: var(--cf-radius-pill, 999px) !important;
}

html.cf-sidebar-mounted body :is(
  .modal .content,
  .modal .box,
  .modal-content,
  .modal-box,
  .danfe-box,
  [class$="-modal-content"]
) {
  border-radius: var(--cf-radius-lg, 18px) !important;
  box-shadow: var(--cf-shadow-lg, 0 18px 48px rgba(1, 21, 68, 0.08)) !important;
}

@media print {
  html.cf-sidebar-mounted body :is(
    .card,
    .panel,
    .screen,
    .modal .content,
    .modal .box,
    .modal-content,
    .modal-box,
    .danfe-box
  ) {
    box-shadow: none !important;
  }
}