/* ==========================================================================
   Econtrol — tokens da identidade Bitelli
   Tema claro (padrão) e escuro. Troque com <html data-theme="econtrol-dark">.
   Ordem de carga: econtrol-tokens.css → Tailwind/DaisyUI → econtrol-bootstrap-bridge.css → econtrol-vendor.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Primitivas da marca — não use direto nos componentes, use os papéis (§2)
   -------------------------------------------------------------------------- */
:root {
  --bit-verde:  #17A67E;
  --bit-teal:   #0F7FA8;
  --bit-azul:   #1A4FD6;
  --bit-tinta:  #0B0F1A;
  --bit-gelo:   #F5F7FB;
  --bit-nevoa:  #DBE7FF;
  --bit-branco: #FFFFFF;
}

/* --------------------------------------------------------------------------
   2. Papéis — TEMA CLARO
   -------------------------------------------------------------------------- */
:root,
[data-theme="econtrol-light"] {
  color-scheme: light;

  /* fundo e superfícies */
  --ec-bg:            #F5F7FB;
  --ec-surface:       #FFFFFF;
  --ec-surface-2:     #F5F7FB;   /* cabeçalho de tabela, zebra, campo */
  --ec-surface-3:     #EAF0FB;   /* hover de linha, chip neutro */
  --ec-rail:          #0B0F1A;   /* menu lateral (escuro nos dois temas) */
  --ec-rail-ink:      #8C97B4;
  --ec-rail-ink-on:   #FFFFFF;
  --ec-rail-line:     #1D2438;
  --ec-overlay:       rgba(11,15,26,.45);

  /* linhas */
  --ec-border:        #DBE7FF;
  --ec-border-strong: #C9D3E6;
  --ec-border-subtle: #EAF0FB;

  /* texto */
  --ec-text:          #0B0F1A;   /* 16.1:1 sobre surface */
  --ec-text-2:        #4B5673;   /*  7.6:1 */
  --ec-text-3:        #7B85A2;   /*  4.0:1 — só rótulo/meta ≥12px semibold */
  --ec-text-on-fill:  #FFFFFF;

  /* primária (azul Bitelli) */
  --ec-primary-100:   #E6EDFC;
  --ec-primary-500:   #1A4FD6;
  --ec-primary-600:   #1642B8;   /* hover */
  --ec-primary-700:   #123A9E;   /* texto sobre claro — 7.0:1 */
  --ec-primary-800:   #0E2E7D;   /* active */
  --ec-primary-content: #FFFFFF;

  /* secundária (teal) */
  --ec-secondary-100: #E3F2F7;
  --ec-secondary-500: #0F7FA8;
  --ec-secondary-600: #0C6B8E;
  --ec-secondary-700: #0A5772;
  --ec-secondary-content: #FFFFFF;

  /* destaque (verde) */
  --ec-accent-100:    #E4F6EF;
  --ec-accent-500:    #17A67E;
  --ec-accent-600:    #128A68;
  --ec-accent-700:    #0B6B50;   /* texto — 5.2:1 */
  --ec-accent-content: #FFFFFF;

  /* neutra */
  --ec-neutral-100:   #EAF0FB;
  --ec-neutral-500:   #4B5673;
  --ec-neutral-700:   #333C54;
  --ec-neutral-content: #FFFFFF;

  /* estados */
  --ec-success-100:   #E4F6EF;
  --ec-success-500:   #17A67E;
  --ec-success-700:   #0B6B50;
  --ec-success-content: #FFFFFF;

  --ec-warning-100:   #FBF0DC;
  --ec-warning-500:   #D2A04A;
  --ec-warning-700:   #8A5B0B;   /* texto — 4.9:1 */
  --ec-warning-content: #0B0F1A;

  --ec-error-100:     #FBE7E6;
  --ec-error-500:     #C2352F;
  --ec-error-700:     #9E241F;   /* texto — 6.1:1 */
  --ec-error-content: #FFFFFF;

  --ec-info-100:      #E6EDFC;
  --ec-info-500:      #1A4FD6;
  --ec-info-700:      #123A9E;
  --ec-info-content:  #FFFFFF;

  /* gráficos — série categórica, nesta ordem */
  --ec-chart-1: #1A4FD6;
  --ec-chart-2: #17A67E;
  --ec-chart-3: #0F7FA8;
  --ec-chart-4: #D2A04A;
  --ec-chart-5: #7B5BD6;
  --ec-chart-6: #C2352F;
  --ec-chart-7: #4B5673;
  --ec-chart-8: #57B8E8;
  --ec-chart-grid:  #DBE7FF;
  --ec-chart-axis:  #7B85A2;
  --ec-chart-label: #4B5673;

  /* sombras */
  --ec-shadow-sm:      0 1px 2px rgba(11,15,26,.06);
  --ec-shadow-md:      0 4px 12px rgba(11,15,26,.08);
  --ec-shadow-lg:      0 18px 50px rgba(11,15,26,.10);
  --ec-shadow-overlay: 0 20px 50px rgba(11,15,26,.22);
  --ec-focus-ring:     0 0 0 3px rgba(26,79,214,.28);
}

/* --------------------------------------------------------------------------
   3. Papéis — TEMA ESCURO
   -------------------------------------------------------------------------- */
[data-theme="econtrol-dark"] {
  color-scheme: dark;

  --ec-bg:            #0B0F1A;
  --ec-surface:       #141B2D;
  --ec-surface-2:     #101728;
  --ec-surface-3:     #1B2338;
  --ec-rail:          #05070E;
  --ec-rail-ink:      #8C97B4;
  --ec-rail-ink-on:   #FFFFFF;
  --ec-rail-line:     #1A2135;
  --ec-overlay:       rgba(0,0,0,.62);

  --ec-border:        #243052;
  --ec-border-strong: #3B456B;
  --ec-border-subtle: #1B2338;

  --ec-text:          #F5F7FB;   /* 14.8:1 sobre surface */
  --ec-text-2:        #AEB8D2;   /*  7.5:1 */
  --ec-text-3:        #7E89A6;   /*  4.1:1 */
  --ec-text-on-fill:  #FFFFFF;

  --ec-primary-100:   #12203F;
  --ec-primary-500:   #2F63F0;
  --ec-primary-600:   #4A79F5;   /* hover clareia no escuro */
  --ec-primary-700:   #7FA0F8;   /* texto — 7.2:1 */
  --ec-primary-800:   #1E4AC4;
  --ec-primary-content: #FFFFFF;

  --ec-secondary-100: #0D2430;
  --ec-secondary-500: #189CC4;
  --ec-secondary-600: #3FB4D8;
  --ec-secondary-700: #74CDE6;
  --ec-secondary-content: #05070E;

  --ec-accent-100:    #0E2B22;
  --ec-accent-500:    #25C79A;
  --ec-accent-600:    #45D6AF;
  --ec-accent-700:    #5FE0BA;   /* texto — 9.8:1 */
  --ec-accent-content: #05070E;

  --ec-neutral-100:   #1B2338;
  --ec-neutral-500:   #AEB8D2;
  --ec-neutral-700:   #D3DAEA;
  --ec-neutral-content: #05070E;

  --ec-success-100:   #0E2B22;
  --ec-success-500:   #25C79A;
  --ec-success-700:   #5FE0BA;
  --ec-success-content: #05070E;

  --ec-warning-100:   #2E2410;
  --ec-warning-500:   #D2A04A;
  --ec-warning-700:   #E8C078;
  --ec-warning-content: #05070E;

  --ec-error-100:     #2E1514;
  --ec-error-500:     #E4665F;
  --ec-error-700:     #F09A94;
  --ec-error-content: #05070E;

  --ec-info-100:      #12203F;
  --ec-info-500:      #2F63F0;
  --ec-info-700:      #7FA0F8;
  --ec-info-content:  #FFFFFF;

  --ec-chart-1: #4A79F5;
  --ec-chart-2: #25C79A;
  --ec-chart-3: #189CC4;
  --ec-chart-4: #E8B45C;
  --ec-chart-5: #A78BF0;
  --ec-chart-6: #E4665F;
  --ec-chart-7: #AEB8D2;
  --ec-chart-8: #6FD0F5;
  --ec-chart-grid:  #243052;
  --ec-chart-axis:  #7E89A6;
  --ec-chart-label: #AEB8D2;

  --ec-shadow-sm:      0 1px 2px rgba(0,0,0,.40);
  --ec-shadow-md:      0 4px 12px rgba(0,0,0,.45);
  --ec-shadow-lg:      0 18px 50px rgba(0,0,0,.55);
  --ec-shadow-overlay: 0 20px 50px rgba(0,0,0,.65);
  --ec-focus-ring:     0 0 0 3px rgba(74,121,245,.40);
}

/* --------------------------------------------------------------------------
   4. Tipografia, espaçamento, raios, larguras — iguais nos dois temas
   -------------------------------------------------------------------------- */
:root {
  --ec-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ec-fw-regular: 400;
  --ec-fw-medium: 500;
  --ec-fw-semibold: 600;
  --ec-fw-bold: 700;
  --ec-fw-extrabold: 800;

  /* tamanho / entrelinha */
  --ec-display:    40px;  --ec-display-lh:    1.10;  /* -0.03em */
  --ec-h1:         30px;  --ec-h1-lh:         1.20;  /* -0.03em */
  --ec-h2:         23px;  --ec-h2-lh:         1.25;  /* -0.02em */
  --ec-h3:         19px;  --ec-h3-lh:         1.30;  /* -0.01em */
  --ec-h4:         17px;  --ec-h4-lh:         1.35;  /* -0.01em */
  --ec-body-lg:    15px;  --ec-body-lg-lh:    1.70;
  --ec-body:       14px;  --ec-body-lh:       1.60;
  --ec-body-sm:    13px;  --ec-body-sm-lh:    1.55;
  --ec-caption:    12px;  --ec-caption-lh:    1.50;
  --ec-label:      10px;  --ec-label-lh:      1.20;  /* 700, .22em, caixa alta */
  --ec-table:      13px;  --ec-table-lh:      1.40;
  --ec-table-head: 10px;  --ec-table-head-lh: 1.20;  /* 700, .14em, caixa alta */
  --ec-kpi:        34px;  --ec-kpi-lh:        1.05;  /* -0.03em */
  --ec-kpi-sm:     26px;  --ec-kpi-sm-lh:     1.10;  /* -0.02em */

  --ec-tracking-tight: -0.03em;
  --ec-tracking-label:  0.22em;
  --ec-tracking-head:   0.14em;

  /* espaçamento (base 2px) */
  --ec-space-1:  2px;
  --ec-space-2:  4px;
  --ec-space-3:  6px;
  --ec-space-4:  8px;
  --ec-space-5:  12px;
  --ec-space-6:  14px;
  --ec-space-7:  16px;
  --ec-space-8:  18px;
  --ec-space-9:  22px;
  --ec-space-10: 26px;
  --ec-space-11: 32px;
  --ec-space-12: 40px;
  --ec-space-13: 56px;
  --ec-space-14: 72px;

  /* raios — o sistema é de cantos discretos, nada de pílula em cartão */
  --ec-radius-sm:   3px;   /* badge, chip */
  --ec-radius-md:   4px;   /* botão, campo, select */
  --ec-radius-lg:   5px;   /* cartão, modal, tabela */
  --ec-radius-full: 999px; /* avatar, contador */

  --ec-border-width: 1px;
  --ec-border-width-strong: 2px;

  /* larguras e alturas de chassi */
  --ec-rail-expanded:  248px;
  --ec-rail-collapsed:  96px;  /* ícone + legenda */
  --ec-rail-drawer:    288px;  /* gaveta no celular */
  --ec-topbar-h:        76px;
  --ec-tabs-h:          54px;
  --ec-content-max:   1600px;
  --ec-filter-panel:   320px;
  --ec-control-h:       40px;
  --ec-control-h-sm:    34px;
  --ec-row-h:           50px;
  --ec-row-h-dense:     45px;
  --ec-touch-min:       44px;

  --ec-transition: 140ms cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   5. Tailwind 4 — expõe os papéis como utilitários (bg-surface, text-ink…)
   -------------------------------------------------------------------------- */
@theme inline {
  --font-sans: var(--ec-font);

  --color-bg:            var(--ec-bg);
  --color-surface:       var(--ec-surface);
  --color-surface-2:     var(--ec-surface-2);
  --color-surface-3:     var(--ec-surface-3);
  --color-rail:          var(--ec-rail);
  --color-line:          var(--ec-border);
  --color-line-strong:   var(--ec-border-strong);
  --color-line-subtle:   var(--ec-border-subtle);
  --color-ink:           var(--ec-text);
  --color-ink-2:         var(--ec-text-2);
  --color-ink-3:         var(--ec-text-3);

  --color-brand:         var(--ec-primary-500);
  --color-brand-hover:   var(--ec-primary-600);
  --color-brand-text:    var(--ec-primary-700);
  --color-brand-tint:    var(--ec-primary-100);
  --color-teal:          var(--ec-secondary-500);
  --color-green:         var(--ec-accent-500);

  --color-success:       var(--ec-success-500);
  --color-success-text:  var(--ec-success-700);
  --color-warning:       var(--ec-warning-500);
  --color-warning-text:  var(--ec-warning-700);
  --color-error:         var(--ec-error-500);
  --color-error-text:    var(--ec-error-700);
  --color-info:          var(--ec-info-500);

  --radius-sm:   var(--ec-radius-sm);
  --radius-md:   var(--ec-radius-md);
  --radius-lg:   var(--ec-radius-lg);

  --shadow-sm:   var(--ec-shadow-sm);
  --shadow-md:   var(--ec-shadow-md);
  --shadow-lg:   var(--ec-shadow-lg);

  --spacing-rail:      var(--ec-rail-expanded);
  --spacing-rail-icon: var(--ec-rail-collapsed);
  --spacing-topbar:    var(--ec-topbar-h);
}

/* --------------------------------------------------------------------------
   6. DaisyUI 5 — os dois temas. Requer @plugin "daisyui" antes.
   Uso: <html data-theme="econtrol-light"> | "econtrol-dark"
   -------------------------------------------------------------------------- */
@plugin "daisyui/theme" {
  name: "econtrol-light";
  default: true;
  prefersdark: false;
  color-scheme: light;

  --color-base-100: #FFFFFF;
  --color-base-200: #F5F7FB;
  --color-base-300: #EAF0FB;
  --color-base-content: #0B0F1A;

  --color-primary: #1A4FD6;
  --color-primary-content: #FFFFFF;
  --color-secondary: #0F7FA8;
  --color-secondary-content: #FFFFFF;
  --color-accent: #17A67E;
  --color-accent-content: #FFFFFF;
  --color-neutral: #4B5673;
  --color-neutral-content: #FFFFFF;

  --color-info: #1A4FD6;
  --color-info-content: #FFFFFF;
  --color-success: #17A67E;
  --color-success-content: #FFFFFF;
  --color-warning: #D2A04A;
  --color-warning-content: #0B0F1A;
  --color-error: #C2352F;
  --color-error-content: #FFFFFF;

  --radius-selector: 999px;  /* toggle, radio, avatar */
  --radius-field: 4px;       /* botão, input, select */
  --radius-box: 5px;         /* cartão, modal */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@plugin "daisyui/theme" {
  name: "econtrol-dark";
  default: false;
  prefersdark: true;
  color-scheme: dark;

  --color-base-100: #141B2D;
  --color-base-200: #101728;
  --color-base-300: #1B2338;
  --color-base-content: #F5F7FB;

  --color-primary: #2F63F0;
  --color-primary-content: #FFFFFF;
  --color-secondary: #189CC4;
  --color-secondary-content: #05070E;
  --color-accent: #25C79A;
  --color-accent-content: #05070E;
  --color-neutral: #AEB8D2;
  --color-neutral-content: #05070E;

  --color-info: #2F63F0;
  --color-info-content: #FFFFFF;
  --color-success: #25C79A;
  --color-success-content: #05070E;
  --color-warning: #D2A04A;
  --color-warning-content: #05070E;
  --color-error: #E4665F;
  --color-error-content: #05070E;

  --radius-selector: 999px;
  --radius-field: 4px;
  --radius-box: 5px;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* --------------------------------------------------------------------------
   7. Base do documento
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ec-bg);
  color: var(--ec-text);
  font-family: var(--ec-font);
  font-size: var(--ec-body);
  line-height: var(--ec-body-lh);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--ec-font); font-weight: var(--ec-fw-bold); margin: 0; }
h1 { font-size: var(--ec-h1); line-height: var(--ec-h1-lh); letter-spacing: var(--ec-tracking-tight); }
h2 { font-size: var(--ec-h2); line-height: var(--ec-h2-lh); letter-spacing: -.02em; }
h3 { font-size: var(--ec-h3); line-height: var(--ec-h3-lh); letter-spacing: -.01em; }
h4 { font-size: var(--ec-h4); line-height: var(--ec-h4-lh); letter-spacing: -.01em; }

a { color: var(--ec-primary-700); text-decoration: none; }
a:hover { color: var(--ec-primary-600); text-decoration: underline; }

/* Todo número de tabela, KPI, valor e data usa algarismo tabular. */
.ec-num,
td.ec-num,
.ec-kpi-value,
.table td.text-end { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* rótulo de seção / cabeçalho de grupo */
.ec-label {
  font-size: var(--ec-label);
  line-height: var(--ec-label-lh);
  font-weight: var(--ec-fw-bold);
  letter-spacing: var(--ec-tracking-label);
  text-transform: uppercase;
  color: var(--ec-text-3);
}

/* foco visível — nunca o anel azul padrão do navegador */
:focus-visible {
  outline: 2px solid var(--ec-primary-500);
  outline-offset: 2px;
  border-radius: var(--ec-radius-sm);
}

::selection { background: var(--ec-primary-100); color: var(--ec-text); }

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