/**
 * mad-ui.css — Mini design system (shadcn + Tailwind inspired)
 * Versão : 1.0
 * Prefixo: mad-  →  zero conflito com Bootstrap / front-end legado
 *
 * USO
 *   Envolva qualquer tela livre com <div class="mad-ui"> para ativar os tokens.
 *   Todas as classes funcionam globalmente graças ao prefixo mad-.
 *
 * TOKENS
 *   Sobrescreva variáveis em .mad-ui para tematizar por instância.
 *
 * COMPONENTES
 *   mad-btn      mad-card      mad-input / mad-select / mad-textarea
 *   mad-badge    mad-alert     mad-toggle    mad-avatar
 *   mad-tabs     mad-table     mad-spinner   mad-skeleton
 *   mad-drawer   mad-field     mad-section   mad-select-card
 *   mad-navbar   mad-rail      mad-megamenu  mad-submenu
 *
 * LAYOUT
 *   mad-flex  mad-grid  mad-stack-{n}  mad-cluster
 *
 * UTILITÁRIOS
 *   mad-p-{0-8}  mad-m-{0-8}  mad-gap-{0-8}
 *   mad-text-{xs|sm|base|lg|xl|2xl|3xl}
 *   mad-font-{normal|medium|semibold|bold}
 *   mad-rounded-{sm|md|lg|xl|full}
 *   mad-shadow-{sm|md|lg}
 *   mad-bg-*  mad-text-*  mad-border-*
 */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */

:root,
.mad-ui {
  /* ── Backgrounds (zinc palette — Notch) ── */
  --mad-bg:           #ffffff;
  --mad-bg-subtle:    #fafafa;
  --mad-bg-muted:     #f4f4f5;   /* zinc-100 */

  /* ── Borders ── */
  --mad-border:       #e5e7eb;
  --mad-border-strong:#d4d4d8;   /* zinc-300 */

  /* ── Text ── */
  --mad-text:         #18181b;   /* zinc-900 */
  --mad-text-muted:   #52525b;   /* zinc-600 */
  --mad-text-subtle:  #a1a1aa;   /* zinc-400 */

  /* ── Primary (dark — padrão Notch) ── */
  --mad-primary:        #18181b;
  --mad-primary-hover:  #27272a;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #f4f4f5;

  /* ── Accent (herda --main-color do Builder legado)
     Usado em estados ativos de menu/nav.
     Fallback = primary (zinc-900).                    ── */
  --mad-accent:        var(--main-color, #18181b);
  --mad-accent-subtle: color-mix(in srgb, var(--main-color, #18181b) 6%, white);
  --mad-accent-border: color-mix(in srgb, var(--main-color, #18181b) 25%, transparent);
  --mad-accent-ring:   color-mix(in srgb, var(--main-color, #18181b) 18%, transparent);

  /* ── Info / Blue (badges, alertas informativos) ── */
  --mad-info:           #4A90D9;
  --mad-info-fg:        #ffffff;
  --mad-info-subtle:    #eff8ff;

  /* ── Secondary ── */
  --mad-secondary:        #71717a;   /* zinc-500 */
  --mad-secondary-hover:  #52525b;
  --mad-secondary-fg:     #ffffff;
  --mad-secondary-subtle: #f4f4f5;

  /* ── Semantic ── */
  --mad-success:        #16a34a;
  --mad-success-fg:     #ffffff;
  --mad-success-subtle: #f0fdf4;

  --mad-warning:        #d97706;
  --mad-warning-fg:     #ffffff;
  --mad-warning-subtle: #fffbeb;

  --mad-danger:         #dc2626;
  --mad-danger-fg:      #ffffff;
  --mad-danger-subtle:  #fef2f2;

  /* ── Radius ── */
  --mad-radius-sm:   6px;
  --mad-radius:      8px;
  --mad-radius-md:   8px;
  --mad-radius-lg:   12px;
  --mad-radius-xl:   16px;
  --mad-radius-full: 9999px;

  /* ── Shadows ── */
  --mad-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --mad-shadow:    0 1px 3px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05);
  --mad-shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --mad-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06);
  --mad-shadow-xl: 0 20px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);

  /* ── Focus rings: halo na cor primária em volta do campo com foco (o
     contorno de teclado, mais forte, é o --mad-focus-ring) ── */
  --mad-ring:        color-mix(in srgb, var(--mad-primary) 20%, transparent);
  --mad-ring-danger: rgba(220,38,38,.15);

  /* ── Tooltip ── */
  --mad-tooltip-bg: #18181b;
  --mad-tooltip-fg: #ffffff;

  /* ── Typography ── */
  --mad-text-xs:   11px;
  --mad-text-sm:   13px;
  --mad-text-base: 14px;
  --mad-text-md:   15px;
  --mad-text-lg:   17px;
  --mad-text-xl:   20px;
  --mad-text-2xl:  24px;
  --mad-text-3xl:  30px;

  /* ── Spacing scale ── */
  --mad-s1: 4px;
  --mad-s2: 8px;
  --mad-s3: 12px;
  --mad-s4: 16px;
  --mad-s5: 20px;
  --mad-s6: 24px;
  --mad-s8: 32px;
  --mad-s10: 40px;
  --mad-s12: 48px;

  /* ── Dashboard layout (gap por padrão) ──
     Consumidos por .mad-dashboard (stack de linhas/seções) e .mad-stat-grid
     (grid de metric-cards). Override por página via style inline no wrapper. */
  --mad-dash-gap:      var(--mad-s6);  /* 24px — entre linhas/seções */
  --mad-dash-card-gap: var(--mad-s4);  /* 16px — entre cards no grid  */
  --mad-stat-grid-min: 220px;          /* largura min do card (auto-fit) */

  /* ── Fonts ── */
  /* Segue a fonte do tema (--font-family: Inter no padrão, IBM Plex no ERP);
     sem tema, a pilha do sistema. */
  --mad-font:      var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  --mad-font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* ── Transition ── */
  --mad-t: 150ms ease;
}

/* ═══════════════════════════════════════════════════════════════════
   1.1 ESCALA DE CAMADAS (z-index)

   Toda camada que ESCAPA pro <body> (x-teleport / appendChild) sai do
   stacking context do pai e passa a disputar z-index no nível raiz.
   Antes essas camadas tinham `9999` cravado — várias INLINE, via JS.
   Inline vence qualquer regra CSS sem !important, então quando um
   overlay mais alto abria (quick-form popover = 10050) o dropdown do
   dbcombo renderizava ATRÁS dele: o combo abria e a lista não aparecia.

   Agora a camada flutuante lê `--mad-z-float`. Um overlay que precise
   ficar acima dela apenas REBASEIA a var no <body> enquanto está
   aberto (ver `body.mad-quick-popover-open`) — a herança faz o resto,
   sem !important e sem tocar em cada componente.

   ATENÇÃO: estas vars NÃO entram no bloco `:root, .mad-ui` acima. Os
   floats carregam a classe `.mad-ui` (ex.: `.mad-sel-dropdown.mad-ui`);
   se `.mad-ui` redeclarasse `--mad-z-float`, o valor local venceria a
   herança do body e o rebase morreria.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --mad-z-overlay: 1010;      /* modal / drawer — o JS empilha +10 por nível */
  --mad-z-float:   9999;      /* dropdown/popover ancorado, teleportado pro body */
  --mad-z-quick:   10050;     /* quick-form popover (acima de modal/drawer)     */
  --mad-z-picker:  10100;     /* colorpicker (pickr)                            */
  --mad-z-loader:  99999;     /* Mad.wait                                       */
}
/* Quick-form aberto → floats sobem acima dele (combo interno abre por cima). */
body.mad-quick-popover-open { --mad-z-float: 10060; }

/* Controles nativos herdam a fonte da tela: sem isto o navegador usa a dele
   (Arial no Chrome) em <button>/<select> sem classe, e a mesma tela mostrava
   duas fontes. Especificidade zero: qualquer regra de componente vence. */
:where(.mad-ui) :where(button, select, input, textarea) { font-family: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   COLOR THEMES — Estilo shadcn/ui
   Ativado por .mad-theme-{name} no body. Combinável com layout
   variants e dark mode:
     <body class="mad-theme-blue mad-layout-float">
     <body class="mad-theme-blue mad-dark mad-layout-glass">

   Cada tema sobrescreve primary + accent + derivados.
   O default (sem classe) usa zinc (escuro — padrão Notch).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Aliases de compatibilidade ─────────────────────────────────────────
   Nomes que componentes do framework (pdv, notify, wf-map, period-monthyear,
   chart, pivot, badge…) já usavam sem que existissem aqui: cada `var()` caía
   no fallback CLARO hardcoded e a tela ficava branca — ou sem cor nenhuma —
   no tema escuro.

   Cada alias é um `var()` puro de propósito: custom property é substituída no
   valor computado do PRÓPRIO elemento, então o alias re-resolve em cada
   portador de tema e herda dark/tema sem bloco por componente. Por isso o
   seletor repete todo elemento que redefine os tokens-base (raiz, .mad-ui,
   .mad-dark no body, .mad-theme-*, [data-theme]) — declarar só em :root
   deixaria o alias preso ao valor da raiz quando o tema vira no body.
   ───────────────────────────────────────────────────────────────────────── */
:root,
.mad-ui,
.mad-dark,
[data-theme],
[class*="mad-theme-"] {
  --mad-surface:        var(--mad-bg);
  --mad-surface-2:      var(--mad-bg-subtle);
  --mad-hover:          var(--mad-bg-muted);
  --mad-border-soft:    var(--mad-border);
  --mad-text-dim:       var(--mad-text-subtle);
  --mad-muted:          var(--mad-text-muted);
  --mad-muted-fg:       var(--mad-text-muted);
  --mad-error:          var(--mad-danger);
  --mad-error-fg:       var(--mad-danger-fg);
  --mad-primary-soft:   var(--mad-accent-subtle);
  --mad-warning-soft:   var(--mad-warning-subtle);
  --mad-warning-border: var(--mad-warning);
}

/* ── Theme: Blue ── */
.mad-theme-blue,
.mad-theme-blue .mad-ui {
  --mad-primary:        #2563eb;
  --mad-primary-hover:  #1d4ed8;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #eff6ff;
  --mad-accent:         #2563eb;
  --mad-accent-subtle:  #eff6ff;
  --mad-accent-border:  rgba(37,99,235,.25);
  --mad-accent-ring:    rgba(37,99,235,.18);
  --mad-ring:           rgba(37,99,235,.12);
  --main-color:              #2563eb;
  --mad-theme-accent:      #2563eb;
  --mad-theme-rail:        #1e3a5f;
  --mad-theme-accent-dark: #1e40af;
  --menu-background-color:   #1e3a5f;
  --menu-background-check:   #2563eb;
  --menu-user-splash-background: #1e3a5f;
  --menu-border-right:       #1d4ed8;
  --field-check-color:       #2563eb;
  --modal-header-background: #1e40af;
  --top-menu-background-check: #2563eb;
  --top-menu-check-color:    #ffffff;
}
.mad-dark.mad-theme-blue,
.mad-dark.mad-theme-blue .mad-ui,
.mad-dark .mad-theme-blue .mad-ui {
  --mad-primary:        #3b82f6;
  --mad-primary-hover:  #60a5fa;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #1e3a5f;
  --mad-accent:         #3b82f6;
  --mad-accent-subtle:  color-mix(in srgb, #3b82f6 12%, #0a0a0b);
}

/* ── Theme: Violet ── */
.mad-theme-violet,
.mad-theme-violet .mad-ui {
  --mad-primary:        #7c3aed;
  --mad-primary-hover:  #6d28d9;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #f5f3ff;
  --mad-accent:         #7c3aed;
  --mad-accent-subtle:  #f5f3ff;
  --mad-accent-border:  rgba(124,58,237,.25);
  --mad-accent-ring:    rgba(124,58,237,.18);
  --mad-ring:           rgba(124,58,237,.12);
  --main-color:              #7c3aed;
  --mad-theme-accent:      #7c3aed;
  --mad-theme-rail:        #3b1a6e;
  --mad-theme-accent-dark: #5b21b6;
  --menu-background-color:   #3b1a6e;
  --menu-background-check:   #7c3aed;
  --menu-user-splash-background: #3b1a6e;
  --menu-border-right:       #6d28d9;
  --field-check-color:       #7c3aed;
  --modal-header-background: #5b21b6;
  --top-menu-background-check: #7c3aed;
  --top-menu-check-color:    #ffffff;
}
.mad-dark.mad-theme-violet,
.mad-dark.mad-theme-violet .mad-ui,
.mad-dark .mad-theme-violet .mad-ui {
  --mad-primary:        #8b5cf6;
  --mad-primary-hover:  #a78bfa;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #2e1065;
  --mad-accent:         #8b5cf6;
  --mad-accent-subtle:  color-mix(in srgb, #8b5cf6 12%, #0a0a0b);
}

/* ── Theme: Green ── */
.mad-theme-green,
.mad-theme-green .mad-ui {
  --mad-primary:        #16a34a;
  --mad-primary-hover:  #15803d;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #f0fdf4;
  --mad-accent:         #16a34a;
  --mad-accent-subtle:  #f0fdf4;
  --mad-accent-border:  rgba(22,163,74,.25);
  --mad-accent-ring:    rgba(22,163,74,.18);
  --mad-ring:           rgba(22,163,74,.12);
  --main-color:              #16a34a;
  --mad-theme-accent:      #16a34a;
  --mad-theme-rail:        #14532d;
  --mad-theme-accent-dark: #166534;
  --menu-background-color:   #14532d;
  --menu-background-check:   #16a34a;
  --menu-user-splash-background: #14532d;
  --menu-border-right:       #15803d;
  --field-check-color:       #16a34a;
  --modal-header-background: #166534;
  --top-menu-background-check: #16a34a;
  --top-menu-check-color:    #ffffff;
}
.mad-dark.mad-theme-green,
.mad-dark.mad-theme-green .mad-ui,
.mad-dark .mad-theme-green .mad-ui {
  --mad-primary:        #22c55e;
  --mad-primary-hover:  #4ade80;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #052e16;
  --mad-accent:         #22c55e;
  --mad-accent-subtle:  color-mix(in srgb, #22c55e 12%, #0a0a0b);
}

/* ── Theme: Orange ── */
.mad-theme-orange,
.mad-theme-orange .mad-ui {
  --mad-primary:        #ea580c;
  --mad-primary-hover:  #c2410c;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #fff7ed;
  --mad-accent:         #ea580c;
  --mad-accent-subtle:  #fff7ed;
  --mad-accent-border:  rgba(234,88,12,.25);
  --mad-accent-ring:    rgba(234,88,12,.18);
  --mad-ring:           rgba(234,88,12,.12);
  --main-color:              #ea580c;
  --mad-theme-accent:      #ea580c;
  --mad-theme-rail:        #7c2d12;
  --mad-theme-accent-dark: #9a3412;
  --menu-background-color:   #7c2d12;
  --menu-background-check:   #ea580c;
  --menu-user-splash-background: #7c2d12;
  --menu-border-right:       #c2410c;
  --field-check-color:       #ea580c;
  --modal-header-background: #9a3412;
  --top-menu-background-check: #ea580c;
  --top-menu-check-color:    #ffffff;
}
.mad-dark.mad-theme-orange,
.mad-dark.mad-theme-orange .mad-ui,
.mad-dark .mad-theme-orange .mad-ui {
  --mad-primary:        #f97316;
  --mad-primary-hover:  #fb923c;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #431407;
  --mad-accent:         #f97316;
  --mad-accent-subtle:  color-mix(in srgb, #f97316 12%, #0a0a0b);
}

/* ── Theme: Rose ── */
.mad-theme-rose,
.mad-theme-rose .mad-ui {
  --mad-primary:        #e11d48;
  --mad-primary-hover:  #be123c;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #fff1f2;
  --mad-accent:         #e11d48;
  --mad-accent-subtle:  #fff1f2;
  --mad-accent-border:  rgba(225,29,72,.25);
  --mad-accent-ring:    rgba(225,29,72,.18);
  --mad-ring:           rgba(225,29,72,.12);
  --main-color:              #e11d48;
  --mad-theme-accent:      #e11d48;
  --mad-theme-rail:        #881337;
  --mad-theme-accent-dark: #9f1239;
  --menu-background-color:   #881337;
  --menu-background-check:   #e11d48;
  --menu-user-splash-background: #881337;
  --menu-border-right:       #be123c;
  --field-check-color:       #e11d48;
  --modal-header-background: #9f1239;
  --top-menu-background-check: #e11d48;
  --top-menu-check-color:    #ffffff;
}
.mad-dark.mad-theme-rose,
.mad-dark.mad-theme-rose .mad-ui,
.mad-dark .mad-theme-rose .mad-ui {
  --mad-primary:        #fb7185;
  --mad-primary-hover:  #fda4af;
  --mad-primary-fg:     #1c1017;
  --mad-primary-subtle: #4c0519;
  --mad-accent:         #fb7185;
  --mad-accent-subtle:  color-mix(in srgb, #fb7185 12%, #0a0a0b);
}

/* ── Theme: Amber ── */
.mad-theme-amber,
.mad-theme-amber .mad-ui {
  --mad-primary:        #d97706;
  --mad-primary-hover:  #b45309;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #fffbeb;
  --mad-accent:         #d97706;
  --mad-accent-subtle:  #fffbeb;
  --mad-accent-border:  rgba(217,119,6,.25);
  --mad-accent-ring:    rgba(217,119,6,.18);
  --mad-ring:           rgba(217,119,6,.12);
  --main-color:              #d97706;
  --mad-theme-accent:      #d97706;
  --mad-theme-rail:        #78350f;
  --mad-theme-accent-dark: #92400e;
  --menu-background-color:   #78350f;
  --menu-background-check:   #d97706;
  --menu-user-splash-background: #78350f;
  --menu-border-right:       #b45309;
  --field-check-color:       #d97706;
  --modal-header-background: #92400e;
  --top-menu-background-check: #d97706;
  --top-menu-check-color:    #ffffff;
}
.mad-dark.mad-theme-amber,
.mad-dark.mad-theme-amber .mad-ui,
.mad-dark .mad-theme-amber .mad-ui {
  --mad-primary:        #f59e0b;
  --mad-primary-hover:  #fbbf24;
  --mad-primary-fg:     #1c1302;
  --mad-primary-subtle: #451a03;
  --mad-accent:         #f59e0b;
  --mad-accent-subtle:  color-mix(in srgb, #f59e0b 12%, #0a0a0b);
}

/* ── Theme: Slate (neutral frio) ── */
.mad-theme-slate,
.mad-theme-slate .mad-ui {
  --mad-bg:             #ffffff;
  --mad-bg-subtle:      #f8fafc;
  --mad-bg-muted:       #f1f5f9;
  --mad-border:         #e2e8f0;
  --mad-border-strong:  #cbd5e1;
  --mad-text:           #0f172a;
  --mad-text-muted:     #475569;
  --mad-text-subtle:    #94a3b8;
  --mad-primary:        #0f172a;
  --mad-primary-hover:  #1e293b;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #f1f5f9;
  --mad-accent:         #0f172a;
  --mad-accent-subtle:  #f1f5f9;
  --mad-secondary:      #64748b;
  --mad-secondary-hover:#475569;
  --main-color:              #0f172a;
  --mad-theme-accent:      #0f172a;
  --mad-theme-rail:        #0f172a;
  --mad-theme-accent-dark: #1e293b;
  --menu-background-color:   #0f172a;
  --menu-background-check:   #334155;
  --menu-user-splash-background: #0f172a;
  --menu-border-right:       #1e293b;
  --modal-header-background: #0f172a;
}
.mad-dark.mad-theme-slate,
.mad-dark.mad-theme-slate .mad-ui,
.mad-dark .mad-theme-slate .mad-ui {
  --mad-bg:             #020617;
  --mad-bg-subtle:      #0f172a;
  --mad-bg-muted:       #1e293b;
  --mad-border:         #334155;
  --mad-border-strong:  #475569;
  --mad-text:           #f8fafc;
  --mad-text-muted:     #94a3b8;
  --mad-text-subtle:    #64748b;
  --mad-primary:        #f8fafc;
  --mad-primary-hover:  #e2e8f0;
  --mad-primary-fg:     #020617;
  --mad-primary-subtle: #1e293b;
}

/* ── Theme: Stone (neutral quente) ── */
.mad-theme-stone,
.mad-theme-stone .mad-ui {
  --mad-bg:             #ffffff;
  --mad-bg-subtle:      #fafaf9;
  --mad-bg-muted:       #f5f5f4;
  --mad-border:         #e7e5e4;
  --mad-border-strong:  #d6d3d1;
  --mad-text:           #1c1917;
  --mad-text-muted:     #57534e;
  --mad-text-subtle:    #a8a29e;
  --mad-primary:        #1c1917;
  --mad-primary-hover:  #292524;
  --mad-primary-fg:     #ffffff;
  --mad-primary-subtle: #f5f5f4;
  --mad-accent:         #1c1917;
  --mad-accent-subtle:  #f5f5f4;
  --mad-secondary:      #78716c;
  --mad-secondary-hover:#57534e;
  --main-color:              #1c1917;
  --mad-theme-accent:      #1c1917;
  --mad-theme-rail:        #1c1917;
  --mad-theme-accent-dark: #292524;
  --menu-background-color:   #1c1917;
  --menu-background-check:   #44403c;
  --menu-user-splash-background: #1c1917;
  --menu-border-right:       #292524;
  --modal-header-background: #1c1917;
}
.mad-dark.mad-theme-stone,
.mad-dark.mad-theme-stone .mad-ui,
.mad-dark .mad-theme-stone .mad-ui {
  --mad-bg:             #0c0a09;
  --mad-bg-subtle:      #1c1917;
  --mad-bg-muted:       #292524;
  --mad-border:         #44403c;
  --mad-border-strong:  #57534e;
  --mad-text:           #fafaf9;
  --mad-text-muted:     #a8a29e;
  --mad-text-subtle:    #78716c;
  --mad-primary:        #fafaf9;
  --mad-primary-hover:  #e7e5e4;
  --mad-primary-fg:     #0c0a09;
  --mad-primary-subtle: #292524;
}

/* ── Dark Mode Tokens ──
   Ativado por .mad-dark no body (ou qualquer ancestral).
   Combinável com qualquer layout variant:
     <body class="mad-dark mad-layout-float">
   ────────────────────────────────────────── */

.mad-dark,
.mad-dark .mad-ui {
  --mad-bg:             #0a0a0b;
  --mad-bg-subtle:      #111113;
  --mad-bg-muted:       #18181b;

  --mad-border:         #27272a;
  --mad-border-strong:  #3f3f46;

  --mad-text:           #fafafa;
  --mad-text-muted:     #a1a1aa;
  --mad-text-subtle:    #71717a;

  --mad-primary:        #fafafa;
  --mad-primary-hover:  #e4e4e7;
  --mad-primary-fg:     #09090b;
  --mad-primary-subtle: #27272a;

  --mad-accent-subtle:  color-mix(in srgb, var(--main-color, #fafafa) 10%, #0a0a0b);
  --mad-accent-border:  color-mix(in srgb, var(--main-color, #fafafa) 20%, transparent);
  --mad-accent-ring:    color-mix(in srgb, var(--main-color, #fafafa) 14%, transparent);

  --mad-secondary:        #a1a1aa;
  --mad-secondary-hover:  #d4d4d8;
  --mad-secondary-fg:     #09090b;
  --mad-secondary-subtle: #27272a;

  --mad-info-subtle:    #0c2d48;
  --mad-success-subtle: #052e16;
  --mad-warning-subtle: #451a03;
  --mad-danger-subtle:  #450a0a;

  /* alias: texto sobre warning-subtle escuro (ver bloco de aliases no :root) */
  --mad-warning-text:   #fbbf24;
  /* texto de erro (aviso do campo): o --mad-danger fica em 3,5:1 no fundo escuro */
  --mad-danger-text:    #f87171;
  /* texto dos avisos e destaques (alert/callout) sobre o fundo *-subtle escuro */
  --mad-alert-info-text:    #93c5fd;
  --mad-alert-success-text: #86efac;
  --mad-alert-warning-text: #fcd34d;
  --mad-alert-danger-text:  #fca5a5;
  /* tinta dos selos (.mad-badge-*) sobre o fundo *-subtle escuro */
  --mad-badge-success-fg: #86efac;
  --mad-badge-warning-fg: #fcd34d;
  --mad-badge-danger-fg:  #fca5a5;
  --mad-badge-info-fg:    #93c5fd;
  /* filtro ativo da barra: o azul do destaque clareia em vez de escurecer */
  --mad-dashf-ink: #fff;

  --mad-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3);
  --mad-shadow:    0 1px 3px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --mad-shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --mad-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4);

  --mad-ring:        color-mix(in srgb, var(--mad-primary-ink, var(--mad-primary)) 30%, transparent);
  --mad-ring-danger: rgba(239,68,68,.25);

  color-scheme: dark;
  /* fundo do destaque por condição (célula da grade, opção do select) */
  --mad-hl-tone-mix: 28%;
  /* fundo da linha destacada inteira (tem a barra de acento ao lado) */
  --mad-hl-row-mix: 12%;
}

/* Tema escuro do app gerado (html[data-theme="dark"], tema Notch): tem
   tokens próprios, mas o vermelho de erro é o mesmo #dc2626 — 3,5:1 sobre o
   fundo do formulário. O texto de erro usa o vermelho claro (fw#297). */
html[data-theme="dark"],
html[data-theme="dark"] .mad-ui {
  --mad-danger-text: #f87171;
  /* Avisos e destaques: o texto escuro fixo dava 1,3–1,7:1 no fundo escuro (fw#299). */
  --mad-alert-info-text:    #93c5fd;
  --mad-alert-success-text: #86efac;
  --mad-alert-warning-text: #fcd34d;
  --mad-alert-danger-text:  #fca5a5;
  /* Selos: a cor cheia dava 3,3:1 (vermelho) no fundo escuro (fw#295). */
  --mad-badge-success-fg: #86efac;
  --mad-badge-warning-fg: #fcd34d;
  --mad-badge-danger-fg:  #fca5a5;
  --mad-badge-info-fg:    #93c5fd;
  /* Filtro ativo da barra: o azul puro dava 2,7:1 no fundo escuro (fw#310). */
  --mad-dashf-ink: #fff;
  /* fundo do destaque por condição (célula da grade, opção do select) */
  --mad-hl-tone-mix: 28%;
  /* fundo da linha destacada inteira (tem a barra de acento ao lado) */
  --mad-hl-row-mix: 12%;
  /* halo do foco: a primária do tema costuma ser escura; a tinta clareia */
  --mad-ring: color-mix(in srgb, var(--mad-primary-ink, var(--mad-primary)) 30%, transparent);
}

/* Tinta da cor primária no escuro (fw#322). `--mad-primary` é PREENCHIMENTO
   (botão, com `--mad-primary-fg` por cima): um tema de marca o mantém escuro
   também no tema escuro, e usado como tinta — aba ativa, "clique para
   enviar" — ficava em 2,3–2,9:1. A tinta é a cor de link do tema; sem ela, a
   própria cor clareada (40% dela passa de 4,5:1 até com primária preta). No
   claro o token não existe e cada regra cai em `--mad-primary`. Declarada em
   todo lugar onde um tema declara a primária do escuro, para resolver com a
   cor daquele escopo. */
.mad-dark,
.mad-dark .mad-ui,
html[data-theme="dark"],
html[data-theme="dark"] .mad-ui {
  --mad-primary-ink: var(--mad-link, color-mix(in srgb, var(--mad-primary) 40%, #fff));
}

/* Trilha e cabeçalho da grade no escuro do app: o cinza #71717a (fixo na trilha;
   no cabeçalho, vindo do tema do app com !important) dava 3,4–3,5:1 (fw#295).
   A regra do cabeçalho vence a do tema já instalado nos apps, que só muda
   quando o app é gerado de novo. */
html[data-theme="dark"] .mad-page-breadcrumb {
  color: var(--mad-text-muted);
}
html[data-theme="dark"] .mad-dg-table thead th.mad-dg-th,
html[data-theme="dark"] .mad-dt > thead > tr > th {
  color: var(--mad-dg-head-color, var(--mad-text-muted)) !important;
  /* O mesmo tema do app pinta toda borda do cabeçalho de #2e2e38 com
     !important: sem isto a cor das linhas escolhida no tema (fórum #126) não
     valia no escuro. Sem tema, fica o #2e2e38 de sempre. */
  border-bottom-color: var(--mad-dg-head-border-color, #2e2e38) !important;
  border-right-color: var(--mad-dg-col-border-color, var(--mad-border)) !important;
}

/* Aviso de erro e borda do campo com erro no escuro do app: o tema do app
   pinta toda dica de campo de cinza e a borda de todo campo, com !important,
   e o "O campo X é obrigatório." saía cinza num campo sem borda (fw#305). */
html[data-theme="dark"] .mad-field-hint.mad-error {
  color: var(--mad-danger-text) !important;
}
/* Dica sem erro: o tema do app a pinta com #71717a !important (3,5:1) (fw#295).
   O `body` no seletor vence também o tema da 5.157 (#a1a1aa !important, mesma
   especificidade e carregado depois), para `--mad-hint-color` valer em app já
   publicado (fw#293). */
html[data-theme="dark"] body .mad-field-hint:not(.mad-error) {
  color: var(--mad-hint-color, var(--mad-text-muted)) !important;
}
/* Caixa de seleção e opção (radio) sem classe, dentro do app: o tema dá a todo
   `input` o padding de campo de texto, e a caixa de 15 px que ele mesmo desenha
   saía com 32 px e sem a marca; no escuro a marca usava o #111 do tema claro
   (fw#276). O tema novo já corrige as duas coisas: estas regras valem para o
   app que atualiza o framework e continua com o tema que tinha. */
input[type="checkbox"],
input[type="radio"] { padding: 0; }
html[data-theme="dark"] { --field-check-color: var(--main-color, #fafafa); }
html[data-theme="dark"] .mad-input.mad-input-error,
html[data-theme="dark"] .mad-select.mad-input-error,
html[data-theme="dark"] .mad-textarea.mad-input-error,
html[data-theme="dark"] .mad-input.mad-input-error:focus,
html[data-theme="dark"] .mad-select.mad-input-error:focus,
html[data-theme="dark"] .mad-textarea.mad-input-error:focus {
  border-color: var(--mad-danger-text) !important;
}

/* ── Dark: Default page layout ── */
.mad-dark .mad-page-container {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  box-shadow: var(--mad-shadow);
}
.mad-dark .mad-page-header {
  border-bottom-color: var(--mad-border);
}
.mad-dark .mad-page-header-icon {
  color: var(--mad-text-muted);
}
.mad-dark .mad-page-header-vsep {
  background: var(--mad-border);
}
.mad-dark .mad-page-breadcrumb {
  color: var(--mad-text-muted);
}
.mad-dark .mad-page-title {
  color: var(--mad-text);
}

/* ── Dark: STRIPE ── */
.mad-dark.mad-layout-stripe .mad-page-container,
.mad-dark .mad-layout-stripe .mad-page-container {
  background: var(--mad-bg);
  box-shadow: var(--mad-shadow);
}
.mad-dark.mad-layout-stripe .mad-page-header,
.mad-dark .mad-layout-stripe .mad-page-header {
  border-bottom-color: var(--mad-border);
}
.mad-dark.mad-layout-stripe .mad-page-header-icon,
.mad-dark .mad-layout-stripe .mad-page-header-icon {
  background: color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 15%, transparent);
}

/* ── Dark: DOCK ── */
.mad-dark.mad-layout-dock .mad-page-container,
.mad-dark .mad-layout-dock .mad-page-container {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  box-shadow: var(--mad-shadow);
}
.mad-dark.mad-layout-dock .mad-page-header,
.mad-dark .mad-layout-dock .mad-page-header {
  background: var(--mad-bg-muted);
}

/* ── Dark: GLASS ── */
.mad-dark.mad-layout-glass .mad-page-container,
.mad-dark .mad-layout-glass .mad-page-container {
  background:
    linear-gradient(135deg, rgba(17,17,19,.92) 0%, rgba(17,17,19,.78) 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 4px 24px rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.mad-dark.mad-layout-glass .mad-page-header,
.mad-dark .mad-layout-glass .mad-page-header {
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(255,255,255,.06);
}
.mad-dark.mad-layout-glass .mad-page-header-icon,
.mad-dark .mad-layout-glass .mad-page-header-icon {
  background: color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 12%, transparent);
  border-color: color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 25%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 10%, transparent);
}
.mad-dark.mad-layout-glass .mad-page-header-vsep,
.mad-dark .mad-layout-glass .mad-page-header-vsep {
  background: rgba(255,255,255,.08);
}
.mad-dark.mad-layout-glass .mad-page-header-actions .mad-btn-outline,
.mad-dark .mad-layout-glass .mad-page-header-actions .mad-btn-outline {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.mad-dark.mad-layout-glass .mad-page-header-actions .mad-btn-outline:hover,
.mad-dark .mad-layout-glass .mad-page-header-actions .mad-btn-outline:hover {
  background: rgba(255,255,255,.12);
}

/* ── Dark: BORDER ── */
.mad-dark.mad-layout-border .mad-page-container,
.mad-dark .mad-layout-border .mad-page-container {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  border-left-color: var(--mad-accent, var(--mad-primary));
}
.mad-dark.mad-layout-border .mad-page-header,
.mad-dark .mad-layout-border .mad-page-header {
  border-bottom-color: var(--mad-border);
}

/* ── Dark: INSET ── */
.mad-dark.mad-layout-inset .mad-page-container,
.mad-dark .mad-layout-inset .mad-page-container {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  box-shadow: var(--mad-shadow);
}
.mad-dark.mad-layout-inset .mad-page-header,
.mad-dark .mad-layout-inset .mad-page-header {
  background:
    color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 8%, var(--mad-bg));
  border-bottom-color:
    color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 15%, transparent);
}
.mad-dark.mad-layout-inset .mad-page-content,
.mad-dark .mad-layout-inset .mad-page-content {
  background: var(--mad-bg-subtle);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
}

/* ── Dark: FLOAT ── */
.mad-dark.mad-layout-float .mad-page-header,
.mad-dark .mad-layout-float .mad-page-header {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  box-shadow: var(--mad-shadow);
}
.mad-dark.mad-layout-float .mad-page-content,
.mad-dark .mad-layout-float .mad-page-content {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  box-shadow: var(--mad-shadow);
}

/* ═══════════════════════════════════════════════════════════════════
   2. BASE (escopo seguro dentro de .mad-ui)
   ═══════════════════════════════════════════════════════════════════ */

.mad-ui *,
.mad-ui *::before,
.mad-ui *::after { box-sizing: border-box; }

.mad-ui {
  font-family: var(--mad-font);
  font-size: var(--mad-text-base);
  color: var(--mad-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Alpine: esconde conteúdo até inicializar */
[x-cloak] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   3. LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.mad-flex         { display: flex; }
.mad-flex-col     { display: flex; flex-direction: column; }
.mad-flex-row     { display: flex; flex-direction: row; }
.mad-flex-wrap    { flex-wrap: wrap; }
.mad-flex-nowrap  { flex-wrap: nowrap; }
.mad-flex-1       { flex: 1 1 0%; }
.mad-flex-auto    { flex: 1 1 auto; }
.mad-flex-none    { flex: none; }
.mad-shrink-0     { flex-shrink: 0; }
.mad-grow         { flex-grow: 1; }
.mad-grow-0       { flex-grow: 0; }

.mad-items-start    { align-items: flex-start; }
.mad-items-center   { align-items: center; }
.mad-items-end      { align-items: flex-end; }
.mad-items-stretch  { align-items: stretch; }
.mad-items-baseline { align-items: baseline; }

.mad-justify-start   { justify-content: flex-start; }
.mad-justify-center  { justify-content: center; }
.mad-justify-end     { justify-content: flex-end; }
.mad-justify-between { justify-content: space-between; }
.mad-justify-around  { justify-content: space-around; }
.mad-justify-evenly  { justify-content: space-evenly; }

.mad-grid          { display: grid; }
.mad-grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.mad-grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.mad-grid-cols-4   { grid-template-columns: repeat(4, 1fr); }
.mad-col-span-2    { grid-column: span 2; }
.mad-col-span-3    { grid-column: span 3; }
.mad-col-full      { grid-column: 1 / -1; }

/* Stack — coluna com gap fixo */
.mad-stack   { display: flex; flex-direction: column; }
.mad-stack-1 { display: flex; flex-direction: column; gap: var(--mad-s1); }
.mad-stack-2 { display: flex; flex-direction: column; gap: var(--mad-s2); }
.mad-stack-3 { display: flex; flex-direction: column; gap: var(--mad-s3); }
.mad-stack-4 { display: flex; flex-direction: column; gap: var(--mad-s4); }
.mad-stack-6 { display: flex; flex-direction: column; gap: var(--mad-s6); }

/* Cluster — linha com wrap */
.mad-cluster { display: flex; flex-wrap: wrap; gap: var(--mad-s2); align-items: center; }


/* ═══════════════════════════════════════════════════════════════════
   4. ESPAÇAMENTO
   ═══════════════════════════════════════════════════════════════════ */

/* Gap */
.mad-gap-0  { gap: 0; }
.mad-gap-1  { gap: var(--mad-s1); }
.mad-gap-2  { gap: var(--mad-s2); }
.mad-gap-3  { gap: var(--mad-s3); }
.mad-gap-4  { gap: var(--mad-s4); }
.mad-gap-5  { gap: var(--mad-s5); }
.mad-gap-6  { gap: var(--mad-s6); }
.mad-gap-8  { gap: var(--mad-s8); }

/* Padding */
.mad-p-0  { padding: 0; }
.mad-p-1  { padding: var(--mad-s1); }
.mad-p-2  { padding: var(--mad-s2); }
.mad-p-3  { padding: var(--mad-s3); }
.mad-p-4  { padding: var(--mad-s4); }
.mad-p-5  { padding: var(--mad-s5); }
.mad-p-6  { padding: var(--mad-s6); }
.mad-p-8  { padding: var(--mad-s8); }

.mad-px-0 { padding-left: 0; padding-right: 0; }
.mad-px-1 { padding-left: var(--mad-s1); padding-right: var(--mad-s1); }
.mad-px-2 { padding-left: var(--mad-s2); padding-right: var(--mad-s2); }
.mad-px-3 { padding-left: var(--mad-s3); padding-right: var(--mad-s3); }
.mad-px-4 { padding-left: var(--mad-s4); padding-right: var(--mad-s4); }
.mad-px-5 { padding-left: var(--mad-s5); padding-right: var(--mad-s5); }
.mad-px-6 { padding-left: var(--mad-s6); padding-right: var(--mad-s6); }

.mad-py-0 { padding-top: 0; padding-bottom: 0; }
.mad-py-1 { padding-top: var(--mad-s1); padding-bottom: var(--mad-s1); }
.mad-py-2 { padding-top: var(--mad-s2); padding-bottom: var(--mad-s2); }
.mad-py-3 { padding-top: var(--mad-s3); padding-bottom: var(--mad-s3); }
.mad-py-4 { padding-top: var(--mad-s4); padding-bottom: var(--mad-s4); }
.mad-py-5 { padding-top: var(--mad-s5); padding-bottom: var(--mad-s5); }
.mad-py-6 { padding-top: var(--mad-s6); padding-bottom: var(--mad-s6); }

.mad-pt-0 { padding-top: 0; }    .mad-pt-1 { padding-top: var(--mad-s1); }
.mad-pt-2 { padding-top: var(--mad-s2); } .mad-pt-3 { padding-top: var(--mad-s3); }
.mad-pt-4 { padding-top: var(--mad-s4); } .mad-pt-6 { padding-top: var(--mad-s6); }

.mad-pb-0 { padding-bottom: 0; }  .mad-pb-1 { padding-bottom: var(--mad-s1); }
.mad-pb-2 { padding-bottom: var(--mad-s2); } .mad-pb-3 { padding-bottom: var(--mad-s3); }
.mad-pb-4 { padding-bottom: var(--mad-s4); } .mad-pb-6 { padding-bottom: var(--mad-s6); }

.mad-pl-0 { padding-left: 0; } .mad-pl-2 { padding-left: var(--mad-s2); }
.mad-pl-4 { padding-left: var(--mad-s4); } .mad-pl-6 { padding-left: var(--mad-s6); }

.mad-pr-0 { padding-right: 0; } .mad-pr-2 { padding-right: var(--mad-s2); }
.mad-pr-4 { padding-right: var(--mad-s4); } .mad-pr-6 { padding-right: var(--mad-s6); }

/* Margin */
.mad-m-0    { margin: 0; }
.mad-m-auto { margin: auto; }
.mad-mx-auto { margin-left: auto; margin-right: auto; }
.mad-ml-auto { margin-left: auto; }
.mad-mr-auto { margin-right: auto; }

.mad-mt-0 { margin-top: 0; }    .mad-mt-1 { margin-top: var(--mad-s1); }
.mad-mt-2 { margin-top: var(--mad-s2); } .mad-mt-3 { margin-top: var(--mad-s3); }
.mad-mt-4 { margin-top: var(--mad-s4); } .mad-mt-5 { margin-top: var(--mad-s5); }
.mad-mt-6 { margin-top: var(--mad-s6); } .mad-mt-8 { margin-top: var(--mad-s8); }

.mad-mb-0 { margin-bottom: 0; }  .mad-mb-1 { margin-bottom: var(--mad-s1); }
.mad-mb-2 { margin-bottom: var(--mad-s2); } .mad-mb-3 { margin-bottom: var(--mad-s3); }
.mad-mb-4 { margin-bottom: var(--mad-s4); } .mad-mb-6 { margin-bottom: var(--mad-s6); }
.mad-mb-8 { margin-bottom: var(--mad-s8); }


/* ═══════════════════════════════════════════════════════════════════
   5. TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════════ */

.mad-text-xs   { font-size: var(--mad-text-xs); }
.mad-text-sm   { font-size: var(--mad-text-sm); }
.mad-text-base { font-size: var(--mad-text-base); }
.mad-text-md   { font-size: var(--mad-text-md); }
.mad-text-lg   { font-size: var(--mad-text-lg); }
.mad-text-xl   { font-size: var(--mad-text-xl); }
.mad-text-2xl  { font-size: var(--mad-text-2xl); }
.mad-text-3xl  { font-size: var(--mad-text-3xl); }

.mad-font-normal   { font-weight: 400; }
.mad-font-medium   { font-weight: 500; }
.mad-font-semibold { font-weight: 600; }
.mad-font-bold     { font-weight: 700; }

.mad-text-left   { text-align: left; }
.mad-text-center { text-align: center; }
.mad-text-right  { text-align: right; }

.mad-uppercase   { text-transform: uppercase; }
.mad-lowercase   { text-transform: lowercase; }
.mad-capitalize  { text-transform: capitalize; }
.mad-normal-case { text-transform: none; }

.mad-tracking-tight  { letter-spacing: -.025em; }
.mad-tracking-normal { letter-spacing: 0; }
.mad-tracking-wide   { letter-spacing: .05em; }
.mad-tracking-wider  { letter-spacing: .1em; }

.mad-leading-none    { line-height: 1; }
.mad-leading-tight   { line-height: 1.25; }
.mad-leading-normal  { line-height: 1.5; }
.mad-leading-relaxed { line-height: 1.7; }

.mad-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-whitespace-nowrap { white-space: nowrap; }
.mad-break-words  { word-break: break-word; overflow-wrap: break-word; }
.mad-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mad-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.mad-mono { font-family: var(--mad-font-mono); }

/* Cores de texto */
.mad-text-primary   { color: var(--mad-primary-ink, var(--mad-primary)); }
.mad-text-secondary { color: var(--mad-secondary); }
.mad-text-muted     { color: var(--mad-text-muted); }
.mad-text-subtle    { color: var(--mad-text-subtle); }
.mad-text-success   { color: var(--mad-success); }
.mad-text-warning   { color: var(--mad-warning); }
.mad-text-danger    { color: var(--mad-danger); }
.mad-text-white     { color: #fff; }


/* ═══════════════════════════════════════════════════════════════════
   6. BACKGROUND
   ═══════════════════════════════════════════════════════════════════ */

.mad-bg-white           { background-color: var(--mad-bg); }
.mad-bg-subtle          { background-color: var(--mad-bg-subtle); }
.mad-bg-muted           { background-color: var(--mad-bg-muted); }
.mad-bg-primary         { background-color: var(--mad-primary); }
.mad-bg-primary-subtle  { background-color: var(--mad-primary-subtle); }
.mad-bg-success-subtle  { background-color: var(--mad-success-subtle); }
.mad-bg-warning-subtle  { background-color: var(--mad-warning-subtle); }
.mad-bg-danger-subtle   { background-color: var(--mad-danger-subtle); }
.mad-bg-transparent     { background-color: transparent; }


/* ═══════════════════════════════════════════════════════════════════
   7. BORDAS E RADIUS
   ═══════════════════════════════════════════════════════════════════ */

.mad-border         { border: 1.5px solid var(--mad-border); }
.mad-border-0       { border: none; }
.mad-border-t       { border-top: 1.5px solid var(--mad-border); }
.mad-border-b       { border-bottom: 1.5px solid var(--mad-border); }
.mad-border-l       { border-left: 1.5px solid var(--mad-border); }
.mad-border-r       { border-right: 1.5px solid var(--mad-border); }
.mad-border-strong  { border-color: var(--mad-border-strong) !important; }
.mad-border-primary { border-color: var(--mad-primary) !important; }
.mad-border-danger  { border-color: var(--mad-danger) !important; }

.mad-rounded-none { border-radius: 0; }
.mad-rounded-sm   { border-radius: var(--mad-radius-sm); }
.mad-rounded      { border-radius: var(--mad-radius); }
.mad-rounded-md   { border-radius: var(--mad-radius-md); }
.mad-rounded-lg   { border-radius: var(--mad-radius-lg); }
.mad-rounded-xl   { border-radius: var(--mad-radius-xl); }
.mad-rounded-full { border-radius: var(--mad-radius-full); }


/* ═══════════════════════════════════════════════════════════════════
   8. SOMBRAS
   ═══════════════════════════════════════════════════════════════════ */

.mad-shadow-none { box-shadow: none; }
.mad-shadow-sm   { box-shadow: var(--mad-shadow-sm); }
.mad-shadow      { box-shadow: var(--mad-shadow); }
.mad-shadow-md   { box-shadow: var(--mad-shadow-md); }
.mad-shadow-lg   { box-shadow: var(--mad-shadow-lg); }


/* ═══════════════════════════════════════════════════════════════════
   9. DISPLAY, POSIÇÃO, OVERFLOW
   ═══════════════════════════════════════════════════════════════════ */

.mad-hidden        { display: none !important; }

/* Read-only visual para campos que não têm `readonly` nativo (select, checkbox, radio, switch).
   O valor continua sendo enviado no POST — por isso não usamos `disabled`. */
.mad-readonly,
.mad-readonly-select {
    pointer-events: none;
    opacity: 0.75;
}
.mad-readonly-select {
    background-color: var(--mad-muted, #f3f4f6);
}

.mad-block         { display: block; }
.mad-inline        { display: inline; }
.mad-inline-block  { display: inline-block; }
.mad-inline-flex   { display: inline-flex; }
.mad-contents      { display: contents; }

.mad-relative { position: relative; }
.mad-absolute { position: absolute; }
.mad-fixed    { position: fixed; }
.mad-sticky   { position: sticky; }
.mad-inset-0  { inset: 0; }
.mad-top-0    { top: 0; }
.mad-right-0  { right: 0; }
.mad-bottom-0 { bottom: 0; }
.mad-left-0   { left: 0; }

.mad-overflow-hidden   { overflow: hidden; }
.mad-overflow-auto     { overflow: auto; }
.mad-overflow-y-auto   { overflow-y: auto; }
.mad-overflow-x-auto   { overflow-x: auto; }

.mad-w-full    { width: 100%; }
.mad-w-auto    { width: auto; }
.mad-w-fit     { width: fit-content; }
.mad-w-screen  { width: 100vw; }
.mad-h-full    { height: 100%; }
.mad-h-auto    { height: auto; }
.mad-h-fit     { height: fit-content; }
.mad-h-screen  { height: 100vh; }
.mad-min-w-0   { min-width: 0; }
.mad-min-h-0   { min-height: 0; }
.mad-max-w-xs  { max-width: 320px; }
.mad-max-w-sm  { max-width: 480px; }
.mad-max-w-md  { max-width: 640px; }
.mad-max-w-lg  { max-width: 800px; }
.mad-max-w-xl  { max-width: 1024px; }
.mad-max-w-full{ max-width: 100%; }

.mad-z-0   { z-index: 0; }
.mad-z-10  { z-index: 10; }
.mad-z-20  { z-index: 20; }
.mad-z-50  { z-index: 50; }

.mad-opacity-0   { opacity: 0; }
.mad-opacity-25  { opacity: .25; }
.mad-opacity-50  { opacity: .5; }
.mad-opacity-75  { opacity: .75; }
.mad-opacity-100 { opacity: 1; }

.mad-cursor-pointer     { cursor: pointer; }
.mad-cursor-default     { cursor: default; }
.mad-cursor-not-allowed { cursor: not-allowed; }
.mad-cursor-move        { cursor: move; }

.mad-select-none    { user-select: none; }
.mad-select-all     { user-select: all; }
.mad-pointer-none   { pointer-events: none; }

.mad-transition      { transition: all var(--mad-t); }
.mad-transition-none { transition: none; }

.mad-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.mad-list-none { list-style: none; margin: 0; padding: 0; }
.mad-no-underline { text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════
   10. COMPONENTE — BUTTON
   ═══════════════════════════════════════════════════════════════════ */

.mad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--mad-radius);
  padding: 9px 16px;
  font-size: var(--mad-text-sm);
  font-family: var(--mad-font);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  background: transparent;
  color: inherit;
  transition: background var(--mad-t), border-color var(--mad-t),
              color var(--mad-t), opacity var(--mad-t), box-shadow var(--mad-t);
}
.mad-btn:focus-visible {
  outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000)));
  outline-offset: 2px;
}
.mad-btn:disabled,
.mad-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Botão-link (<mad-btn href>) desabilitado por disabled-when: link não tem
   `disabled`, a classe vem do mad-ui.js (fw#258). */
a.mad-btn.mad-when-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Embrulho do botão recusado das versões anteriores (o <mad-btn> não o emite
   mais — ver [data-mad-deny] abaixo). Mantido para views publicadas no app. */
.mad-btn-deny {
  display: inline-flex;
  cursor: not-allowed;
}
/* Ação recusada pelo perfil ("Ações sem permissão" = desabilitados, com dica).
   Vai com aria-disabled + data-mad-deny, NUNCA `disabled`: o tema põe
   pointer-events:none em button:disabled (e a regra acima também), então o
   mouse atravessava o botão e a dica (title) nunca aparecia — nem o teclado
   chegava nele. Aqui ele só fica esmaecido; continua recebendo mouse e foco, e
   o mad-ui.js barra o clique e mostra a dica. Seletor duplo p/ vencer os
   :hover das variantes (inclusive os do tema escuro). */
.mad-btn[data-mad-deny][aria-disabled="true"],
.mad-dg-action-btn[data-mad-deny][aria-disabled="true"],
.mad-dg-dropdown-item[data-mad-deny][aria-disabled="true"],
.mad-dg-export-item[data-mad-deny][aria-disabled="true"],
.mad-dg-card-action[data-mad-deny][aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
.mad-dg-action-btn[data-mad-deny][aria-disabled="true"]:hover,
.mad-dg-dropdown-item[data-mad-deny][aria-disabled="true"]:hover,
.mad-dg-export-item[data-mad-deny][aria-disabled="true"]:hover,
.mad-dg-card-action[data-mad-deny][aria-disabled="true"]:hover {
  background: none;
}

/* Variantes */
.mad-btn-default {
  background: var(--mad-text);
  color: var(--mad-bg);
  border-color: var(--mad-text);
}
.mad-btn-default:hover { opacity: .85; }

.mad-btn-primary {
  background: var(--mad-primary);
  color: var(--mad-primary-fg);
  border-color: var(--mad-primary);
}
.mad-btn-primary:hover {
  background: var(--mad-primary-hover);
  border-color: var(--mad-primary-hover);
}

.mad-btn-secondary {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
  border-color: var(--mad-border);
}
.mad-btn-secondary:hover { background: var(--mad-border); }

.mad-btn-outline {
  background: var(--mad-bg);
  color: var(--mad-text);
  border-color: var(--mad-border);
}
.mad-btn-outline:hover { background: var(--mad-bg-subtle); }

.mad-btn-ghost {
  background: transparent;
  color: var(--mad-text);
  border-color: transparent;
}
.mad-btn-ghost:hover { background: var(--mad-bg-muted); }

.mad-btn-danger,
.mad-btn-destructive {
  background: var(--mad-danger, #ef4444);
  color: var(--mad-danger-fg, #fff);
  border-color: var(--mad-danger, #ef4444);
}
.mad-btn-danger:hover,
.mad-btn-destructive:hover {
  background: color-mix(in srgb, var(--mad-danger, #ef4444) 85%, #000);
  border-color: color-mix(in srgb, var(--mad-danger, #ef4444) 85%, #000);
}

.mad-btn-success {
  background: var(--mad-success, #22c55e);
  color: var(--mad-success-fg, #fff);
  border-color: var(--mad-success, #22c55e);
}
.mad-btn-success:hover {
  background: color-mix(in srgb, var(--mad-success, #22c55e) 85%, #000);
  border-color: color-mix(in srgb, var(--mad-success, #22c55e) 85%, #000);
}

.mad-btn-warning {
  background: var(--mad-warning, #f59e0b);
  color: var(--mad-warning-fg, #fff);
  border-color: var(--mad-warning, #f59e0b);
}
.mad-btn-warning:hover {
  background: color-mix(in srgb, var(--mad-warning, #f59e0b) 85%, #000);
  border-color: color-mix(in srgb, var(--mad-warning, #f59e0b) 85%, #000);
}

.mad-btn-info {
  background: var(--mad-info, #3b82f6);
  color: var(--mad-info-fg, #fff);
  border-color: var(--mad-info, #3b82f6);
}
.mad-btn-info:hover {
  background: color-mix(in srgb, var(--mad-info, #3b82f6) 85%, #000);
  border-color: color-mix(in srgb, var(--mad-info, #3b82f6) 85%, #000);
}

/* Outline variants */
.mad-btn-outline-danger {
  background: transparent;
  color: var(--mad-danger, #ef4444);
  border-color: var(--mad-danger, #ef4444);
}
.mad-btn-outline-danger:hover { background: color-mix(in srgb, var(--mad-danger, #ef4444) 10%, transparent); }

.mad-btn-outline-success {
  background: transparent;
  color: var(--mad-success, #22c55e);
  border-color: var(--mad-success, #22c55e);
}
.mad-btn-outline-success:hover { background: color-mix(in srgb, var(--mad-success, #22c55e) 10%, transparent); }

.mad-btn-outline-warning {
  background: transparent;
  color: var(--mad-warning, #f59e0b);
  border-color: var(--mad-warning, #f59e0b);
}
.mad-btn-outline-warning:hover { background: color-mix(in srgb, var(--mad-warning, #f59e0b) 10%, transparent); }

.mad-btn-outline-primary {
  background: transparent;
  color: var(--mad-primary-ink, var(--mad-primary));
  border-color: var(--mad-primary);
}
.mad-btn-outline-primary:hover { background: color-mix(in srgb, var(--mad-primary) 10%, transparent); }

.mad-btn-link {
  background: transparent;
  color: var(--mad-primary-ink, var(--mad-primary));
  border-color: transparent;
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
}
.mad-btn-link:hover { opacity: .75; }

/* Tamanhos */
.mad-btn-sm {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: var(--mad-radius-sm);
  gap: 4px;
}
.mad-btn-lg {
  padding: 11px 22px;
  font-size: var(--mad-text-md);
  border-radius: var(--mad-radius-md);
  gap: 8px;
}
.mad-btn-icon {
  padding: 0;
  width: 36px;
  height: 36px;
}
.mad-btn-icon.mad-btn-sm { width: 30px; height: 30px; }
.mad-btn-icon.mad-btn-lg { width: 44px; height: 44px; }
.mad-btn-block { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════
   11. COMPONENTE — INPUT / SELECT / TEXTAREA
   ═══════════════════════════════════════════════════════════════════ */

.mad-input,
.mad-textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--mad-border-strong);
  border-radius: var(--mad-radius);
  padding: 8px 12px;
  font-size: var(--mad-text-sm);
  font-family: var(--mad-font);
  /* --mad-input-*: destaque do campo (input-bg / input-color / input-weight /
     input-italic), emitido no wrapper .mad-field por CssUnits::inputStyle().
     Sem a prop, vale o fallback — o visual de sempre. */
  font-weight: var(--mad-input-weight, normal);
  font-style: var(--mad-input-style, normal);
  color: var(--mad-input-color, var(--mad-text));
  background: var(--mad-input-bg, var(--mad-bg));
  line-height: 1.5;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color var(--mad-t), box-shadow var(--mad-t);
}
.mad-input:focus,
.mad-select:focus,
.mad-textarea:focus {
  outline: none;
  border-color: var(--mad-primary);
  box-shadow: 0 0 0 3px var(--mad-ring);
}
/* Anel de foco de teclado (fw#335). A borda e a sombra de 8% acima mal se
   viam (1,2:1; no escuro o tema nem troca a borda): quem navega por Tab não
   achava o campo. O anel é a primária escurecida no claro e a tinta da
   primária no escuro — 3:1 ou mais com qualquer cor de tema; `--mad-focus-ring`
   troca a cor. O navegador casa `:focus-visible` também no CLIQUE em campo de
   texto; o mad-ui.js põe `data-mad-pointer` no <html> no clique e tira no Tab,
   e o anel some no clique como nos outros controles. */
html:not([data-mad-pointer]) .mad-input:focus-visible,
html:not([data-mad-pointer]) .mad-select:focus-visible,
html:not([data-mad-pointer]) .mad-textarea:focus-visible {
  outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000)));
  outline-offset: 1px;
}
.mad-input::placeholder,
.mad-textarea::placeholder { color: var(--mad-text-subtle); }
.mad-input:disabled,
.mad-select:disabled,
.mad-textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--mad-input-bg, var(--mad-bg-subtle));
}
/* Cor de fundo escolhida (input-bg) vence o cinza do somente-leitura: o caso
   típico é justamente destacar um total calculado, que é readonly. */
input.mad-input:read-only,
textarea.mad-input:read-only,
textarea.mad-textarea:read-only {
  background: var(--mad-input-bg, var(--mad-bg-subtle));
  cursor: default;
  border-color: var(--mad-border);
}
input.mad-input:read-only:focus,
textarea.mad-input:read-only:focus,
textarea.mad-textarea:read-only:focus {
  box-shadow: none;
  border-color: var(--mad-border);
}

.mad-input-error,
.mad-select-error,
.mad-textarea-error {
  border-color: var(--mad-danger) !important;
  box-shadow: 0 0 0 3px var(--mad-ring-danger) !important;
}

.mad-textarea  { resize: vertical; min-height: 80px; }
.mad-input-sm  { padding: 5px 8px; font-size: var(--mad-text-xs); border-radius: var(--mad-radius-sm); }
.mad-input-lg  { padding: 10px 14px; font-size: var(--mad-text-base); }
.mad-input-mono{ font-family: var(--mad-font-mono); font-size: 12px; letter-spacing: .5px; }

/* ═══════════════════════════════════════════════════════════════════
   MAD SELECT — componente próprio de select
   .mad-sel (wrapper) > select.mad-sel-native (oculto, fonte da verdade)
                      + .mad-sel-control (UI) + .mad-sel-dropdown (teleport body)
   ═══════════════════════════════════════════════════════════════════ */
.mad-sel { position: relative; width: 100%; }

/* <select> nativo: invisível mas submittable (mantém name/value no POST) */
.mad-sel-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  border: 0; opacity: 0; pointer-events: none;
}

/* Control — herda o visual do .mad-input */
.mad-sel-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  /* Mesma altura do .mad-input: o tema do app fixa a dos inputs em
     --button-height; sem tema, os 38px de sempre. */
  min-height: var(--button-height, 38px);
  padding: 5px 30px 5px 12px;
  border: 1px solid var(--mad-border-strong);
  border-radius: var(--mad-radius);
  background: var(--mad-input-bg, var(--mad-bg));
  color: var(--mad-input-color, var(--mad-text));
  /* Sem fallback de propósito: sem input-weight/input-italic a var é inválida,
     a declaração vira `unset` e o controle HERDA como sempre herdou (é div). */
  font-weight: var(--mad-input-weight);
  font-style: var(--mad-input-style);
  font-family: var(--mad-font);
  font-size: var(--mad-text-sm);
  line-height: 1.5;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color var(--mad-t), box-shadow var(--mad-t);
}
.mad-sel.is-open > .mad-sel-control,
.mad-sel-control:focus-within {
  outline: none;
  border-color: var(--mad-primary);
  box-shadow: 0 0 0 3px var(--mad-ring);
}
.mad-sel-error > .mad-sel-control {
  border-color: var(--mad-danger) !important;
  box-shadow: 0 0 0 3px var(--mad-ring-danger) !important;
}
/* mad-input-error chega em runtime (MadResponse::fieldError) no <select> nativo,
   que fica escondido; a classe mad-sel-error só é lida no init do madSelect. */
.mad-sel:has(> select.mad-input-error) > .mad-sel-control {
  border-color: var(--mad-danger) !important;
  box-shadow: 0 0 0 3px var(--mad-ring-danger) !important;
}
.mad-sel-locked > .mad-sel-control {
  background: var(--mad-input-bg, var(--mad-bg-subtle));
  cursor: default;
  pointer-events: none;
  opacity: .7;
}
/* <select> somente leitura (`.mad-readonly-select`: readonly / readonly-when,
   inclusive na coluna da <mad-field-list>, fw#472): mesmo visual do
   input:read-only, sem a seta — não parece editável e o valor vai no POST. */
.mad-sel:has(> select.mad-readonly-select) > .mad-sel-control {
  background: var(--mad-input-bg, var(--mad-bg-subtle));
  pointer-events: none;
}
.mad-sel:has(> select.mad-readonly-select) .mad-sel-caret,
.mad-sel:has(> select.mad-readonly-select) .mad-sel-clear { display: none !important; }
/* O campo inteiro (.mad-readonly) também ficava a 75%: rótulo e valor apagados,
   com cara de desabilitado. Select e combo travados leem como o input (fw#498). */
.mad-field.mad-readonly:has(select.mad-readonly-select) { opacity: 1; }
/* Desabilitado também sem a seta (e o date sem o calendário): não abre, não
   precisa parecer que abre (fw#498). */
.mad-sel:has(> select:disabled) .mad-sel-caret { display: none !important; }
.mad-input-group:has(> .mad-datepicker-btn:disabled) > .mad-datepicker-btn { display: none; }
.mad-input-group:has(> .mad-datepicker-btn:disabled) > .mad-input {
  border-top-right-radius: var(--mad-radius);
  border-bottom-right-radius: var(--mad-radius);
}
/* Tema ERP: travado é leitura — fundo cinza, sem a borda de campo. */
/* Só o campo solto: input com botão ao lado (busca, calendário) mantém a borda. */
.mad-layout-erp .mad-field > input.mad-input:read-only,
.mad-layout-erp .mad-field > textarea:is(.mad-input, .mad-textarea):read-only,
.mad-layout-erp .mad-sel:has(> select.mad-readonly-select) > .mad-sel-control { border-color: transparent; }

/* <select> nativo desabilitado (prop `disabled` ou `disabled-when`): o clique
   já não abre (onControlClick checa `_native.disabled`); aqui o controle
   visível passa a PARECER desabilitado, igual a um .mad-select:disabled. */
.mad-sel:has(> select:disabled) > .mad-sel-control {
  background: var(--mad-input-bg, var(--mad-bg-subtle));
  cursor: not-allowed;
  opacity: .5;
}

.mad-sel-single,
.mad-sel-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-sel-single.is-placeholder,
.mad-sel-summary.is-placeholder { color: var(--mad-text-subtle); }

.mad-sel-input {
  flex: 1 1 60px;
  min-width: 60px;
  border: 0; outline: 0;
  padding: 0; margin: 0;
  /* O tema do app dá altura a TODO <input> (height: --button-height); aqui
     dentro isso somava padding+borda do controle e o campo de tags (e o combo
     ao abrir) ficava mais alto que os vizinhos. */
  height: auto; min-height: 0;
  background: transparent;
  font: inherit;
  color: var(--mad-input-color, var(--mad-text));
  line-height: 1.5;
}
.mad-sel-input::placeholder { color: var(--mad-text-subtle); }

.mad-sel-chips { display: contents; }
.mad-sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 8px;
  background: var(--mad-bg-muted);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm);
  font-size: var(--mad-text-xs);
  line-height: 1.6;
  max-width: 100%;
}
.mad-sel-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-sel-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: 0; padding: 0;
  background: none; cursor: pointer;
  color: var(--mad-text-subtle);
  border-radius: var(--mad-radius-sm);
  font-size: 14px; line-height: 1;
}
.mad-sel-chip-x:hover { color: var(--mad-danger); background: var(--mad-bg-subtle); }

.mad-sel-caret {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--mad-text-subtle);
  pointer-events: none;
  transition: transform var(--mad-t);
}
.mad-sel.is-open > .mad-sel-control .mad-sel-caret { transform: translateY(-50%) rotate(180deg); }

/* "×" que limpa o campo, ao lado da seta (o allowClear do select2): sempre à
   vista quando há valor e o campo pode ficar vazio (getter `clearable`). */
.mad-sel-control.has-clear { padding-right: 52px; }
.mad-sel-clear {
  position: absolute;
  right: 30px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  /* `--mad-text-muted`, não o `--mad-text-subtle` decorativo: o "×" é um
     controle e precisa de 3:1 contra o campo (fw#358: 2,6:1 no claro). */
  color: var(--mad-text-muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: color var(--mad-t), background var(--mad-t);
}
.mad-sel-clear:hover { color: var(--mad-danger); background: var(--mad-bg-muted); }
/* Campo que não aceita edição agora, e as células compactas da grade e da
   planilha (lá a linha em branco da lista já limpa): sem "×". Na grade o
   padding compacto já é !important; na planilha é reposto aqui. */
.mad-readonly .mad-sel-clear,
.mad-sel-locked .mad-sel-clear,
.mad-sel:has(> select:disabled) .mad-sel-clear,
.mad-dg-cell .mad-sel-clear,
.mad-dg-edit-inline .mad-sel-clear,
.mad-sheet-cell .mad-sel-clear { display: none !important; }
.mad-sheet-cell .mad-sel-control.has-clear { padding-right: 26px; }

/* Dropdown (teleportado ao body, position:fixed via :style) */
.mad-sel-dropdown {
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  box-shadow: var(--mad-shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: var(--mad-z-float, 9999);
}
.mad-sel-list { list-style: none; margin: 0; padding: 4px; }
.mad-sel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 36px;
  border-radius: var(--mad-radius-sm);
  cursor: pointer;
  font-size: var(--mad-text-sm);
  color: var(--mad-text);
}
.mad-sel-option.is-active { background: var(--mad-bg-muted); }
.mad-sel-option.is-selected { font-weight: 600; }
/* Linha em branco da lista (a `<option value="">`): volta o campo a vazio. */
.mad-sel-option.is-empty { color: var(--mad-text-subtle); }
.mad-sel-hl {
  background: color-mix(in srgb, var(--mad-primary, #3b82f6) 24%, transparent);
  color: inherit;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 1px;
}
.mad-sel-option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* <mad-option-highlights>: destaque da opção por condição — o par do
   <mad-row-highlights> da grade, com o mesmo fundo (cor do tom misturada ao
   transparente; os *-subtle somem sobre branco). O JS marca a linha da lista com
   data-mad-hl="row|badge" e data-mad-hl-tone="<tom>|color"; a cor livre chega
   em --mad-sel-hl-color, misturada do mesmo jeito — lê nos dois temas.
   row = pinta a linha (fundo suave + barra de acento); badge = só o selo.
   Item ativo (mouse/teclado) e item selecionado continuam visíveis: o ativo
   escurece o fundo do tom, o selecionado mantém o negrito. */
.mad-sel-option[data-mad-hl-tone="danger"],  .mad-sel-dot[data-mad-hl-tone="danger"]  { --mad-sel-hl-bg: color-mix(in srgb, var(--mad-danger) var(--mad-hl-tone-mix, 18%), transparent);  --mad-sel-hl-accent: var(--mad-danger); }
.mad-sel-option[data-mad-hl-tone="warning"], .mad-sel-dot[data-mad-hl-tone="warning"] { --mad-sel-hl-bg: color-mix(in srgb, var(--mad-warning) var(--mad-hl-tone-mix, 18%), transparent); --mad-sel-hl-accent: var(--mad-warning); }
.mad-sel-option[data-mad-hl-tone="success"], .mad-sel-dot[data-mad-hl-tone="success"] { --mad-sel-hl-bg: color-mix(in srgb, var(--mad-success) var(--mad-hl-tone-mix, 18%), transparent); --mad-sel-hl-accent: var(--mad-success); }
.mad-sel-option[data-mad-hl-tone="info"],    .mad-sel-dot[data-mad-hl-tone="info"]    { --mad-sel-hl-bg: color-mix(in srgb, var(--mad-info) var(--mad-hl-tone-mix, 18%), transparent);    --mad-sel-hl-accent: var(--mad-info); }
.mad-sel-option[data-mad-hl-tone="color"],   .mad-sel-dot[data-mad-hl-tone="color"] {
  --mad-sel-hl-bg: color-mix(in srgb, var(--mad-sel-hl-color, var(--mad-warning)) 18%, transparent);
  --mad-sel-hl-accent: var(--mad-sel-hl-color, var(--mad-warning));
}
.mad-sel-option[data-mad-hl="row"] {
  background: var(--mad-sel-hl-bg);
  box-shadow: inset 3px 0 0 var(--mad-sel-hl-accent);
}
.mad-sel-option[data-mad-hl="row"].is-active {
  background: color-mix(in srgb, var(--mad-sel-hl-accent) 24%, var(--mad-bg-muted));
}
/* O tema escuro (notch-dark.css) fixa o fundo do item ativo e do selecionado
   com !important: a linha pintada segue com o tom nos dois estados. */
html[data-theme="dark"] .mad-sel-option[data-mad-hl="row"].is-selected {
  background: var(--mad-sel-hl-bg) !important;
}
html[data-theme="dark"] .mad-sel-option[data-mad-hl="row"].is-active {
  background: color-mix(in srgb, var(--mad-sel-hl-accent) 28%, var(--mad-bg-muted)) !important;
}
.mad-sel-option[data-mad-hl] .mad-sel-option-text { flex: 1 1 auto; min-width: 0; }
/* Selo à direita da opção (`badge`). O texto é do registro: entra por x-text. */
.mad-sel-badge {
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 50%;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--mad-sel-hl-accent, var(--mad-warning)) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mad-sel-hl-accent, var(--mad-warning)) 16%, var(--mad-bg));
  color: color-mix(in srgb, var(--mad-sel-hl-accent, var(--mad-warning)) 62%, var(--mad-text));
  font-size: var(--mad-text-xs);
  font-weight: 600;
  line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cor livre pode ser clara demais para tinta: o texto do selo é o do tema. */
.mad-sel-option[data-mad-hl-tone="color"] .mad-sel-badge { color: var(--mad-text); }
/* Bolinha do valor escolhido: antes do texto (single) e dentro do chip (multi). */
.mad-sel-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mad-sel-hl-accent, var(--mad-warning));
}
.mad-sel-chip > .mad-sel-dot { overflow: visible; }
/* Cor por opção (`colors` do select, `color-column` do combo): só o ponto antes
   do texto, sem pintar a linha. Na lista com checkbox o ponto vem depois dele. */
.mad-sel-option[data-mad-hl="dot"]::before {
  content: ''; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mad-sel-hl-accent, var(--mad-warning));
}
.mad-sel-option[data-mad-hl="dot"] > .mad-sel-checkbox { order: -1; }
.mad-sel-checkbox {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 16px !important; height: 16px !important; min-width: 16px;
  margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 0 !important;
  background: initial !important;
  flex-shrink: 0; cursor: pointer;
  accent-color: var(--mad-primary, #3b82f6);
}
.mad-sel-checkbox::before, .mad-sel-checkbox::after {
  content: none !important; display: none !important;
}
.mad-sel-loading { padding: 10px 12px; color: var(--mad-text-subtle); font-size: var(--mad-text-sm); }
/* Hint de "digite N caracteres" (busca AJAX com mínimo) */
.mad-sel-hint { text-align: center; }
.mad-sel-hint .mad-ts-noresults-msg { color: var(--mad-text-subtle); font-style: italic; }

/* Mobile / touch — dropdown como bottom-sheet */
.mad-sel-dropdown-touch {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  top: auto !important;
  width: 100%; min-width: 0 !important;
  max-height: 55vh;
  border-radius: var(--mad-radius) var(--mad-radius) 0 0;
  border-bottom: 0;
}
.mad-sel-dropdown-touch .mad-sel-option { min-height: 44px; }


/* ═══════════════════════════════════════════════════════════════════
   12. COMPONENTE — FIELD (label + input + hint)
   ═══════════════════════════════════════════════════════════════════ */

/* Distância label → campo → dica (gap do flex-column do .mad-field). Declarada
   SÓ em :root, de propósito: o bloco de tokens do topo é `:root, .mad-ui`, e
   page-container.blade.php renderiza <div class="mad-ui mad-page-container"> —
   um ancestral MAIS PRÓXIMO que :root. Repetir a var lá faria o default do
   framework vencer o :root do tema por herança, e o slider "Espaço label ↔
   campo" do editor de temas não teria efeito nenhum. Sobrescritas:
   tema (:root) < <mad-form label-gap> (style no <form>) < campo (style no wrapper). */
:root { --mad-label-gap: 5px; }

/* min-width:0 — o campo é item de grid/flex e `1fr` equivale a minmax(auto,1fr):
   sem isso o min-content do conteúdo (ex.: opção longa de um mad-select) estoura
   a coluna e empurra os campos vizinhos para fora do container. */
.mad-field   { display: flex; flex-direction: column; gap: var(--mad-label-gap, 5px); min-width: 0; }
/* --mad-label-*: estilo do label (label-color / label-size / label-weight /
   label-italic). Como a --mad-label-gap, NÃO são declaradas aqui — só o
   fallback dentro do var(). Cascata: <mad-form label-*> (style no <form>) <
   campo (style no wrapper .mad-field), emitidas por CssUnits::labelStyle(). */
.mad-label   {
  font-size: var(--mad-label-size, 12.5px);
  font-weight: var(--mad-label-weight, 500);
  font-style: var(--mad-label-style, normal);
  color: var(--mad-label-color, color-mix(in srgb, var(--mad-text) 85%, var(--mad-bg)));
}
.mad-label-required::after { content: ' *'; color: var(--mad-danger); }
/* ⓘ do rótulo (`hint-icon`): a dica abre pelo tooltip global (hover, foco e
   toque, ver mad-ui.js). Botão sem fundo, do tamanho da letra do rótulo. */
.mad-label-hint {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px;
  width: 16px; height: 16px; margin: 0 0 0 4px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--mad-text-muted); cursor: help; line-height: 1;
}
.mad-label-hint svg { width: 13px; height: 13px; display: block; pointer-events: none; }
.mad-label-hint:hover, .mad-label-hint[aria-expanded="true"] { color: var(--mad-text); }
.mad-label-hint:focus-visible { outline: 2px solid var(--mad-primary); outline-offset: 1px; color: var(--mad-text); }
/* Dica é texto que se lê: texto secundário, não o cinza de placeholder (2,6:1, fw#292). */
.mad-hint    { font-size: var(--mad-text-xs); color: var(--mad-hint-color, var(--mad-text-muted)); line-height: 1.5; }
.mad-error   { font-size: var(--mad-text-xs); color: var(--mad-danger-text, var(--mad-danger)); }


/* ═══════════════════════════════════════════════════════════════════
   13. COMPONENTE — CARD
   ═══════════════════════════════════════════════════════════════════ */

.mad-card {
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg);
  /* Borda leve, sem sombra; o tema que quiser sombra nos painéis a define em
     --panel-box-shadow (editor de temas). */
  box-shadow: var(--panel-box-shadow, none);
}

/* Alturas ajustáveis pelo tema (editor de temas → "Alturas e densidade"):
   --mad-card-header-py / --mad-card-footer-py, --mad-page-header-py / -mb /
   -icon, --mad-page-title-size, --mad-dg-toolbar-py, --mad-drawer-header-py,
   --mad-form-section-header-py e --mad-form-section-icon (a gaveta também
   segue o ícone e o título do cabeçalho da página), mais
   --mad-page-header-icon-display (`none` oculta o ícone do cabeçalho da
   página; a gaveta não segue esta). NENHUMA é declarada no
   framework, de propósito: cada regra traz o valor de hoje como fallback do
   var(), então sem tema nada muda e cada layout (stripe, dock…) mantém o seu.
   Declarar em `:root, .mad-ui` faria o default vencer o :root do tema por
   herança (page-container renderiza <div class="mad-ui">) — ver --mad-label-gap. */
.mad-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mad-card-header-py, 14px) var(--mad-s5);
  border-bottom: 1px solid var(--mad-border);
  /* Título escrito direto no cabeçalho (sem .mad-card-title) também é título. */
  font-size: var(--mad-text-base);
  font-weight: 600;
  color: var(--mad-text);
}

.mad-card-heading { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mad-card-heading > :is(svg, i) { flex: none; width: 16px; height: 16px; color: var(--mad-text-muted); }

.mad-card-title {
  font-size: var(--mad-text-base);
  font-weight: 600;
  color: var(--mad-text);
  line-height: 1.3;
}

.mad-card-description {
  font-size: var(--mad-text-sm);
  font-weight: 400;
  color: var(--mad-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.mad-card-content { padding: var(--mad-s5); }
.mad-card-content + .mad-card-content { padding-top: 0; }

.mad-card-footer {
  padding: var(--mad-card-footer-py, var(--mad-s3)) var(--mad-s5);
  border-top: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle);
  display: flex;
  align-items: center;
  gap: var(--mad-s2);
}
/* Cards lado a lado esticam até o mais alto da linha: o rodapé desce para o
   fundo (antes ficava logo abaixo do conteúdo, desalinhado do vizinho, com uma
   faixa vazia embaixo). Só card com rodapé vira coluna — quem usa .mad-card
   cru com outro conteúdo não muda. */
.mad-card:has(> .mad-card-footer) {
  display: flex;
  flex-direction: column;
}
.mad-card > .mad-card-footer {
  margin-top: auto;
}
.mad-card > .mad-card-footer:last-child {
  border-radius: 0 0 calc(var(--mad-radius-lg) - 1px) calc(var(--mad-radius-lg) - 1px);
}


/* ═══════════════════════════════════════════════════════════════════
   14. COMPONENTE — BADGE
   ═══════════════════════════════════════════════════════════════════ */

.mad-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  border: 0;
  white-space: nowrap;
}

.mad-badge-default   { background: var(--mad-text); color: var(--mad-bg); }
.mad-badge-secondary { background: var(--mad-bg-muted); color: var(--mad-text-muted); border-color: var(--mad-border); }
/* `0:muted:Não` — a variante que o Studio emite para o "Não" de um campo
   Sim/Não. Neutra, igual à secondary (os tokens já trocam no escuro). */
.mad-badge-muted     { background: var(--mad-bg-muted); color: var(--mad-text-muted); border-color: var(--mad-border); }
.mad-badge-outline   { background: transparent; color: var(--mad-text); border-color: var(--mad-border-strong); }
/* Primary na cor do tema (antes: fundo --mad-primary-subtle, que é cinza no
   tema padrão, e texto muted — "Em execução" parecia parado ao lado do
   secondary). Fundo = primária misturada; texto = tinta legível da primária. */
.mad-badge-primary   { background: color-mix(in srgb, var(--mad-primary) 12%, var(--mad-bg)); color: var(--mad-primary-ink, var(--mad-primary)); border-color: color-mix(in srgb, var(--mad-primary) 30%, transparent); }
.mad-badge-info      { background: var(--mad-info-subtle); color: var(--mad-badge-info-fg, #1e40af); border-color: rgba(74,144,217,.3); }
/* Tinta do selo por token: a cor cheia (--mad-success…) dava 3,1:1 no fundo
   claro e o vermelho 3,3:1 no escuro (fw#295). Os escuros definem tons claros. */
.mad-badge-success   { background: var(--mad-success-subtle); color: var(--mad-badge-success-fg, #166534); border-color: rgba(22,163,74,.3); }
.mad-badge-warning   { background: var(--mad-warning-subtle); color: var(--mad-badge-warning-fg, #92400e); border-color: rgba(217,119,6,.3); }
.mad-badge-danger    { background: var(--mad-danger-subtle);  color: var(--mad-badge-danger-fg, #991b1b);  border-color: rgba(220,38,38,.3); }

/* Ponto na cor do selo: sempre dentro da célula da grade (a situação da
   linha); fora dela, só com .mad-badge-dot. */
.mad-badge-dot::before,
.mad-dg-cell .mad-badge::before {
  content: '';
  display: inline-block;
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}


/* ═══════════════════════════════════════════════════════════════════
   15. COMPONENTE — ALERT
   ═══════════════════════════════════════════════════════════════════ */

.mad-alert {
  display: flex;
  gap: var(--mad-s3);
  padding: var(--mad-s3) var(--mad-s4);
  border-radius: var(--mad-radius-lg);
  border: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle);
  font-size: var(--mad-text-sm);
}

.mad-alert-icon  { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
.mad-alert-title { font-weight: 700; margin-bottom: 2px; }
.mad-alert-desc  { color: var(--mad-text-muted); line-height: 1.5; }

/* Texto por token: a cor escura fixa sumia no fundo escuro (fw#299). Os
   dois temas escuros definem --mad-alert-*-text; o claro usa a reserva. */
.mad-alert-info    { border-color: rgba(74,144,217,.35); background: var(--mad-info-subtle); color: var(--mad-alert-info-text, #1a3a5c); }
.mad-alert-success { border-color: rgba(22,163,74,.35);  background: var(--mad-success-subtle); color: var(--mad-alert-success-text, #14532d); }
.mad-alert-warning { border-color: rgba(217,119,6,.22);  background: var(--mad-warning-subtle); color: var(--mad-alert-warning-text, #78350f); }
.mad-alert-danger  { border-color: rgba(220,38,38,.35);  background: var(--mad-danger-subtle);  color: var(--mad-alert-danger-text, #7f1d1d); }


/* ═══════════════════════════════════════════════════════════════════
   16. COMPONENTE — TOGGLE (switch)
   ═══════════════════════════════════════════════════════════════════ */

.mad-toggle-wrap { display: inline-flex; align-items: center; gap: var(--mad-s2); cursor: pointer; }
.mad-toggle      { position: relative; display: inline-flex; width: 40px; height: 22px; flex-shrink: 0; }
.mad-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.mad-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--mad-border-strong);
  border-radius: var(--mad-radius-full);
  cursor: pointer;
  transition: background var(--mad-t);
}
.mad-toggle-track::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--mad-t);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.mad-toggle input:checked  ~ .mad-toggle-track { background: var(--mad-success); }
.mad-toggle input:checked  ~ .mad-toggle-track::before { transform: translateX(18px); }
.mad-toggle input:focus-visible ~ .mad-toggle-track { outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000))); outline-offset: 2px; }
.mad-toggle input:disabled ~ .mad-toggle-track { opacity: .5; cursor: not-allowed; }

/* Variants de cor (sobrescreve track quando checked) */
.mad-toggle--primary input:checked ~ .mad-toggle-track { background: var(--mad-primary); }
.mad-toggle--success input:checked ~ .mad-toggle-track { background: var(--mad-success); }
.mad-toggle--warning input:checked ~ .mad-toggle-track { background: var(--mad-warning); }
.mad-toggle--danger  input:checked ~ .mad-toggle-track { background: var(--mad-danger); }
.mad-toggle--info    input:checked ~ .mad-toggle-track { background: var(--mad-info); }

/* Sizes */
.mad-toggle--sm { width: 32px; height: 18px; }
.mad-toggle--sm .mad-toggle-track::before { width: 12px; height: 12px; left: 3px; top: 3px; }
.mad-toggle--sm input:checked ~ .mad-toggle-track::before { transform: translateX(14px); }

.mad-toggle--lg { width: 56px; height: 30px; }
.mad-toggle--lg .mad-toggle-track::before { width: 24px; height: 24px; left: 3px; top: 3px; }
.mad-toggle--lg input:checked ~ .mad-toggle-track::before { transform: translateX(26px); }

/* Switch row / card */
.mad-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mad-switch-card {
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  padding: 14px 16px;
}
.mad-switch-text { flex: 1; min-width: 0; }
/* label-position="right": chave primeiro, texto colado depois. A ordem do HTML
   não muda (o texto continua vindo antes para o leitor de tela). */
.mad-switch-row--label-right {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 10px;
}
.mad-switch-row--label-right .mad-switch-text { flex: 0 1 auto; }
.mad-switch-desc {
  font-size: 0.82rem;
  color: var(--mad-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════
   17. COMPONENTE — AVATAR
   ═══════════════════════════════════════════════════════════════════ */

.mad-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--mad-radius-full);
  background: var(--mad-bg-muted);
  color: var(--mad-text-muted);
  font-size: var(--mad-text-sm);
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}
.mad-avatar img      { width: 100%; height: 100%; object-fit: cover; }
.mad-avatar-sm       { width: 28px; height: 28px; font-size: var(--mad-text-xs); }
.mad-avatar-lg       { width: 48px; height: 48px; font-size: var(--mad-text-lg); }
.mad-avatar-xl       { width: 64px; height: 64px; font-size: var(--mad-text-xl); }
.mad-avatar-primary  { background: var(--mad-primary-subtle); color: var(--mad-primary-ink, var(--mad-primary)); }
.mad-avatar-success  { background: var(--mad-success-subtle); color: var(--mad-success); }

/* Avatar group */
.mad-avatar-group { display: inline-flex; }
.mad-avatar-group .mad-avatar { border: 2px solid var(--mad-bg); }
.mad-avatar-group .mad-avatar + .mad-avatar { margin-left: -10px; }


/* ═══════════════════════════════════════════════════════════════════
   18. COMPONENTE — TABS
   ═══════════════════════════════════════════════════════════════════ */

.mad-tabs { display: flex; flex-direction: column; }

/* Wrapper do strip — ancora os botões de navegação e limita a largura */
.mad-tabs-list-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.mad-tabs-list {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--mad-bg-muted);
  border-radius: var(--mad-radius);
  padding: 3px;
  gap: 2px;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar nativa escondida — navegação pelas setas (sempre visíveis do
     lado com mais abas) e pela roda do mouse. Sem esmaecimento: ele apagava
     a aba visível da borda (#359). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mad-tabs-list::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Setas de rolagem — sempre visíveis do lado em que há mais abas (#359). A
   lista abre uma calha para a seta (padding do wrap), então a seta não cobre
   aba; antes só apareciam no hover (nunca no teclado nem no toque). */
.mad-tabs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--mad-border);
  border-radius: 50%;
  background: var(--mad-bg);
  color: var(--mad-text);
  box-shadow: var(--mad-shadow-sm);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mad-t), transform var(--mad-t), background var(--mad-t), color var(--mad-t);
}
.mad-tabs-nav-left  { left: 0; }
.mad-tabs-nav-right { right: 0; }
.mad-tabs-list-wrap.is-left  { padding-left: 32px; }
.mad-tabs-list-wrap.is-right { padding-right: 32px; }
.mad-tabs-list-wrap.is-left  .mad-tabs-nav-left,
.mad-tabs-list-wrap.is-right .mad-tabs-nav-right,
.mad-tabs-nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

/* <mad-tabs wrap>: as abas quebram linha em vez de rolar (sem setas nem máscara). */
.mad-tabs-wrap .mad-tabs-list {
  flex-wrap: wrap;
  overflow: visible;
}
.mad-tabs-wrap .mad-tabs-list-wrap { padding-left: 0; padding-right: 0; }
.mad-tabs-wrap .mad-tabs-nav { display: none !important; }
.mad-tabs-nav:hover {
  background: var(--mad-primary);
  color: #fff;
  border-color: var(--mad-primary);
}
.mad-tabs-nav i { width: 16px; height: 16px; flex-shrink: 0; }

.mad-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: calc(var(--mad-radius) - 2px);
  font-size: var(--mad-text-sm);
  font-weight: 500;
  color: var(--mad-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color var(--mad-t), background var(--mad-t), box-shadow var(--mad-t);
  white-space: nowrap;
  flex: 0 0 auto;
  user-select: none;
}
.mad-tab:hover { color: var(--mad-text); background: rgba(0,0,0,.05); }

.mad-tab-active,
.mad-tab[aria-selected="true"] {
  background: var(--mad-bg);
  color: var(--mad-text);
  box-shadow: var(--mad-shadow-sm);
  font-weight: 600;
}

.mad-tab-content { margin-top: var(--mad-s4); }

/* Tabs underline (variante) */
.mad-tabs-underline .mad-tabs-list {
  background: transparent;
  border-radius: 0;
  padding: 0;
  /* Trilho via inset box-shadow — NÃO é cortado pelo overflow:hidden do scroller
     (border-bottom + margin negativo eram clipados e sumiam o underline). */
  box-shadow: inset 0 -2px 0 var(--mad-border);
}
.mad-tabs-underline .mad-tab {
  border-radius: 0;
  padding: 8px 16px;
}
.mad-tabs-underline .mad-tab-active,
.mad-tabs-underline .mad-tab[aria-selected="true"] {
  background: transparent;
  /* underline ativo no mesmo 2px do trilho — sobrepõe o cinza */
  box-shadow: inset 0 -2px 0 var(--mad-primary-ink, var(--mad-primary));
  color: var(--mad-primary-ink, var(--mad-primary));
}

/* Tabs vertical (sidebar variant) */
.mad-tabs-vertical {
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
}

.mad-tabs-vertical .mad-tabs-list-wrap {
  flex: 0 0 auto;
  align-items: stretch;
}
.mad-tabs-vertical .mad-tabs-list {
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  /* sem fade/scroll horizontal na vertical */
  -webkit-mask-image: none;
          mask-image: none;
  background: transparent;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg, 8px);
  padding: 4px;
  gap: 2px;
}

.mad-tabs-vertical .mad-tab {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: 8px 12px;
  border-radius: calc(var(--mad-radius-lg, 8px) - 2px);
  font-size: 14px;
}

.mad-tabs-vertical .mad-tab:hover:not(:disabled) {
  background: var(--mad-bg-muted);
}

.mad-tabs-vertical .mad-tab-active,
.mad-tabs-vertical .mad-tab[aria-selected="true"] {
  background: var(--mad-bg-muted);
  box-shadow: none;
  font-weight: 500;
}

.mad-tabs-vertical .mad-tab-content {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  margin-top: 0;
}

@media (max-width: 768px) {
  .mad-tabs-vertical { flex-direction: column; gap: 16px; }
  .mad-tabs-vertical .mad-tabs-list {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .mad-tabs-vertical .mad-tab { width: auto; flex: 0 0 auto; }
  .mad-tabs-vertical .mad-tab-content { max-width: 100%; }
}

/* Tab disabled */
.mad-tab:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   19. COMPONENTE — TABLE
   ═══════════════════════════════════════════════════════════════════ */

.mad-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg);
}

.mad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mad-text-sm);
}

.mad-table thead { background: var(--mad-bg-subtle); }

.mad-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-text-muted);
  border-bottom: 1px solid var(--mad-border);
  white-space: nowrap;
}

.mad-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--mad-border);
  color: var(--mad-text);
  vertical-align: middle;
}

.mad-table tbody tr:last-child td { border-bottom: none; }
.mad-table-hover  tbody tr:hover td { background: var(--mad-bg-subtle); cursor: pointer; }
.mad-table-striped tbody tr:nth-child(even) td { background: var(--mad-bg-subtle); }


/* ═══════════════════════════════════════════════════════════════════
   20. COMPONENTE — SPINNER
   ═══════════════════════════════════════════════════════════════════ */

.mad-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2.5px solid var(--mad-border);
  border-top-color: var(--mad-primary);
  border-radius: 50%;
  animation: mad-spin .65s linear infinite;
  flex-shrink: 0;
}
.mad-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.mad-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

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

/* Utilidade: aplica a animacao de rotacao em qualquer elemento (ex: icone lucide dentro de botao loading) */
.mad-spin { animation: mad-spin .65s linear infinite; display: inline-block; }

/* ── Transporter ─────────────────────────────────────────────────── */
.mad-transporter { position: relative; }
.mad-transporter-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; color: #9ca3af;
  border: 1px dashed #e5e7eb; border-radius: 8px; padding: 32px;
}
.mad-transporter-loading-text { font-size: 13px; }

/* Tela embutida num transporter (header X-Mad-Embed — MadTransporter::embedHeader).
   page-container sai como .mad-page-embed: sem cartão, sem a altura mínima de
   tela cheia e fora das variantes .mad-layout-* (a página de fora já é o
   cartão). page-header sai como a barra compacta abaixo: só as ações e, com
   header="title", o título da tela — nunca breadcrumb/ícone repetidos. */
.mad-page-embed { min-width: 0; }
.mad-page-embed-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.mad-page-embed-bar .mad-page-header-actions { margin-left: auto; }
.mad-page-embed-title {
  min-width: 0; font-size: var(--mad-text-sm, 13px); font-weight: 600;
  line-height: 1.3; color: var(--mad-text, #18181b); overflow-wrap: anywhere;
}


/* ═══════════════════════════════════════════════════════════════════
   21. COMPONENTE — SKELETON
   ═══════════════════════════════════════════════════════════════════ */

.mad-skeleton {
  background: linear-gradient(
    90deg,
    var(--mad-bg-muted) 25%,
    var(--mad-border) 50%,
    var(--mad-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: mad-shimmer 1.5s infinite;
  border-radius: var(--mad-radius-sm);
}

@keyframes mad-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   22. COMPONENTE — SEPARATOR
   ═══════════════════════════════════════════════════════════════════ */

/* A linha é BORDA (não fundo) para aceitar formato tracejado/pontilhado/duplo.
   Aparência por custom property, que o separator.blade.php só emite quando a
   prop vem preenchida: --mad-sep-color (color), --mad-sep-size (thickness),
   --mad-sep-style (line-style) e --mad-sep-space (spacing). Sem elas, o padrão
   é o de sempre: 1px contínuo na cor da borda do tema. */
.mad-sep   { border: 0; background: none; display: block; }
.mad-sep-h { height: 0; width: 100%; margin: var(--mad-sep-space, var(--mad-s3)) 0;
             border-top: var(--mad-sep-size, 1px) var(--mad-sep-style, solid) var(--mad-sep-color, var(--mad-border)); }
.mad-sep-v { width: 0; height: 100%; margin: 0 var(--mad-sep-space, var(--mad-s2)); align-self: stretch; display: inline-block;
             border-left: var(--mad-sep-size, 1px) var(--mad-sep-style, solid) var(--mad-sep-color, var(--mad-border)); }

/* Com texto (label): linha · texto · linha. Sem margem por padrão, como sempre foi. */
.mad-sep-labeled { display: flex; align-items: center; gap: 8px; margin: var(--mad-sep-space, 0) 0; }
.mad-sep-labeled > .mad-sep-line { flex: 1; height: 0; display: block;
             border-top: var(--mad-sep-size, 1px) var(--mad-sep-style, solid) var(--mad-sep-color, var(--mad-border)); }
.mad-sep-labeled > .mad-sep-text { font-size: 11px; color: var(--mad-text-subtle); white-space: nowrap; }
.mad-sep-labeled--left  > .mad-sep-line:first-child,
.mad-sep-labeled--right > .mad-sep-line:last-child { flex: 0 0 12px; }


/* ═══════════════════════════════════════════════════════════════════
   23. COMPONENTE — SECTION TITLE
   ═══════════════════════════════════════════════════════════════════ */

.mad-section       { margin-top: var(--mad-s5); }
.mad-section-first { margin-top: var(--mad-s4); }

.mad-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: var(--mad-s2);
  border-bottom: 2px solid var(--mad-border);
  margin-bottom: var(--mad-s4);
  font-size: var(--mad-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--mad-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════
   24. COMPONENTE — SELECT CARD (seletor visual estilo tipo/plano)
   ═══════════════════════════════════════════════════════════════════ */

.mad-select-cards { display: flex; gap: var(--mad-s2); }
.mad-select-cards-col { flex-direction: column; }

.mad-select-card {
  flex: 1;
  cursor: pointer;
  border: 2px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  padding: 14px 12px;
  background: var(--mad-bg-subtle);
  transition: border-color var(--mad-t), background var(--mad-t);
  user-select: none;
}
.mad-select-card:hover {
  border-color: var(--mad-border-strong);
  background: var(--mad-bg-muted);
}
.mad-select-card-active,
.mad-select-card[aria-selected="true"] {
  border-color: var(--mad-accent);
  background: var(--mad-accent-subtle);
}

.mad-select-card-icon  { font-size: 22px; line-height: 1; margin-bottom: var(--mad-s1); }
.mad-select-card-title { display: block; font-size: var(--mad-text-sm); font-weight: 700; color: var(--mad-text); }
.mad-select-card-active .mad-select-card-title,
.mad-select-card[aria-selected="true"] .mad-select-card-title { color: var(--mad-text); }
.mad-select-card-desc  { display: block; font-size: var(--mad-text-xs); color: var(--mad-text-muted); line-height: 1.4; margin-top: 3px; }


/* ═══════════════════════════════════════════════════════════════════
   25. COMPONENTE — DRAWER LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

/* .mad-drawer, -header, -body e -title: ver a seção da cortina (DRAWER), mais
   abaixo. Aqui ficam só as peças do cabeçalho. */
.mad-drawer-header-left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.mad-drawer-header-icon-group {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.mad-drawer-header-icon {
  /* Gaveta = cabeçalho da tela aberta nela: segue o ícone do cabeçalho da página. */
  width: var(--mad-page-header-icon, 40px); height: var(--mad-page-header-icon, 40px);
  border-radius: 50%;
  border: 1px solid var(--mad-border);
  background: var(--mad-bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--mad-text-subtle);
}
.mad-drawer-header-vdivider {
  width: 1px; height: calc(var(--mad-page-header-icon, 40px) - 8px);
  background: var(--mad-border);
  flex-shrink: 0;
}
.mad-drawer-header-meta { min-width: 0; }
.mad-drawer-footer {
  padding: var(--mad-s3) var(--mad-s5);
  border-top: 1px solid var(--mad-border);
  flex-shrink: 0;
  background: var(--mad-bg);
}

.mad-drawer-icon {
  width: 36px; height: 36px;
  border-radius: var(--mad-radius);
  background: linear-gradient(135deg, var(--mad-primary), var(--mad-primary-hover));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; flex-shrink: 0;
}
.mad-drawer-subtitle { font-size: var(--mad-text-xs); color: var(--mad-text-subtle); }


/* ═══════════════════════════════════════════════════════════════════
   26. COMPONENTE — FORM SECTION (grupo de campos com header)
   ═══════════════════════════════════════════════════════════════════ */

.mad-form-section              { 
  display: flex; flex-direction: column; gap: 16px; padding-bottom: var(--mad-s4); 
  /* border-bottom: 1px solid var(--mad-border);  */
  margin-bottom: var(--mad-s4);
}
.mad-form-section-header       { 
  padding-top: var(--mad-form-section-header-py, 6px);
  padding-bottom: var(--mad-form-section-header-py, 6px);
}
.mad-form-section-meta         { display: flex; align-items: center; gap: 12px; }
.mad-form-section-icon         {
  display: flex; align-items: center; justify-content: center;
  width: var(--mad-form-section-icon, 36px); height: var(--mad-form-section-icon, 36px);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mad-primary) 10%, transparent);
  flex-shrink: 0;
}
.mad-form-section-icon i,
.mad-form-section-icon svg     { width: 20px; height: 20px; color: var(--mad-primary-ink, var(--mad-primary)); }
.mad-form-section-text         { display: flex; flex-direction: column; gap: 2px; }
.mad-form-section-title        { font-size: .875rem; font-weight: 600; color: var(--mad-text); }
.mad-form-section-subtitle     { font-size: .75rem; color: var(--mad-text-muted); }
.mad-form-section-divider      { height: 1px; background: var(--mad-border); margin-top: 10px; }

/* Form actions — footer de botões */
.mad-form-actions              { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.mad-form-actions-right        { justify-content: flex-end; }
.mad-form-actions-center       { justify-content: center; }
/* Posição por item — <mad-btn|mad-btn-group|mad-dropdown position="left|center|right">.
   O `order` agrupa esquerda (1) / centro (3) / direita (5) em qualquer ordem do
   código; item sem posição segue o `align` da barra. Barra sem item posicionado
   fica igual (mesmo `order` em todos). As duas fronteiras são margens `auto`:
   centro|direita = ::after de largura zero; esquerda|centro = o PRIMEIRO item
   do grupo do centro (mesmo `order` ⇒ o primeiro no código é o primeiro na
   tela). O ::before fica livre (o editor desenha o rótulo da barra nele). */
.mad-form-actions > *                { order: 1; }
.mad-form-actions-center > *         { order: 3; }
.mad-form-actions-right > *          { order: 5; }
.mad-form-actions > .mad-pos-left    { order: 1; }
.mad-form-actions > .mad-pos-center  { order: 3; }
.mad-form-actions > .mad-pos-right   { order: 5; }
/* Linha que quebra em tela estreita só tem os itens do fim: encosta à direita. */
.mad-form-actions:has(> .mad-pos-left, > .mad-pos-center, > .mad-pos-right) { justify-content: flex-end; }
.mad-form-actions:has(> .mad-pos-left, > .mad-pos-center, > .mad-pos-right)::after { content: ''; order: 4; margin-left: auto; }
.mad-form-actions:has(> .mad-pos-left, > .mad-pos-center, > .mad-pos-right) > .mad-pos-center { margin-left: auto; }
.mad-form-actions:has(> .mad-pos-left, > .mad-pos-center, > .mad-pos-right) > .mad-pos-center ~ .mad-pos-center { margin-left: 0; }
.mad-form-actions-center:has(> .mad-pos-left, > .mad-pos-center, > .mad-pos-right) > :not(.mad-pos-left):not(.mad-pos-right) { margin-left: auto; }
.mad-form-actions-center:has(> .mad-pos-left, > .mad-pos-center, > .mad-pos-right) > :not(.mad-pos-left):not(.mad-pos-right) ~ :not(.mad-pos-left):not(.mad-pos-right) { margin-left: 0; }


/* ═══════════════════════════════════════════════════════════════════
   27. COMPONENTE — INFO BOX (preview / detalhe somente-leitura)
   ═══════════════════════════════════════════════════════════════════ */

.mad-info-box {
  display: flex;
  align-items: center;
  gap: var(--mad-s2);
  background: var(--mad-bg-subtle);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  padding: 10px 14px;
}
.mad-info-box-icon  { color: var(--mad-text-subtle); font-size: 18px; flex-shrink: 0; }
.mad-info-box-label { font-size: 10px; color: var(--mad-text-subtle); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.mad-info-box-value { font-size: var(--mad-text-sm); color: var(--mad-text); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════
   27. COMPONENTE — STAT CARD
   ═══════════════════════════════════════════════════════════════════ */

.mad-stat {
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg);
  padding: var(--mad-s4) var(--mad-s5);
  box-shadow: var(--panel-box-shadow, none);
}
.mad-stat-label  { font-size: 12.5px; font-weight: 500; color: var(--mad-text-muted); }
.mad-stat-value  { font-size: var(--mad-text-2xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mad-text); line-height: 1.15; margin-top: 4px; }
.mad-stat-change { font-size: var(--mad-text-xs); margin-top: 4px; }
.mad-stat-change-up   { color: var(--mad-success); }
.mad-stat-change-down { color: var(--mad-danger); }
.mad-stat-context { font-size: 12.5px; color: var(--mad-text-muted); line-height: 1.35; margin-top: 4px; }
/* Esqueleto do <mad-metric-card>: rótulo/valor à esquerda, ícone à direita. */
.mad-stat-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mad-stat-main { flex: 1; min-width: 0; }
.mad-stat-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mad-stat-icon-glyph { width: 22px; height: 22px; }


/* ═══════════════════════════════════════════════════════════════════
   28. COMPONENTE — DISPLAY FIELD (visualização somente-leitura)
   ═══════════════════════════════════════════════════════════════════ */

.mad-display-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

.mad-display-field-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mad-display-field-label {
  font-size: var(--mad-label-size, 10px);
  font-weight: var(--mad-label-weight, 600);
  font-style: var(--mad-label-style, normal);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--mad-label-color, var(--mad-text-subtle));
  line-height: 1.3;
}

.mad-display-field-icon { width: 13px; height: 13px; color: var(--mad-text-subtle); flex-shrink: 0; }

.mad-display-field-value {
  font-size: var(--mad-text-base);
  font-weight: var(--mad-input-weight, 500);
  font-style: var(--mad-input-style, normal);
  color: var(--mad-input-color, var(--mad-text));
  line-height: 1.5;
  word-break: break-word;
}

.mad-display-field-value a      { color: var(--mad-info); text-decoration: none; }
.mad-display-field-value a:hover { text-decoration: underline; }
/* `html`: texto do editor rico. Parágrafo/lista com o respiro do texto, não o do navegador. */
.mad-display-field-html > :first-child { margin-top: 0; }
.mad-display-field-html > :last-child  { margin-bottom: 0; }
.mad-display-field-html p, .mad-display-field-html ul, .mad-display-field-html ol { margin: 0 0 .5em; }
.mad-display-field-html ul, .mad-display-field-html ol { padding-left: 1.4em; }
.mad-display-field-html img { max-width: 100%; height: auto; }
.mad-display-field-html table { border-collapse: collapse; max-width: 100%; }
.mad-display-field-html td, .mad-display-field-html th { border: 1px solid var(--mad-border); padding: 4px 8px; }

/* Empty state */
.mad-display-field-empty { color: var(--mad-text-subtle); font-weight: 400; font-style: italic; }

/* Variants */
.mad-display-field-success { color: var(--mad-success); }
.mad-display-field-danger  { color: var(--mad-danger); }
.mad-display-field-warning { color: var(--mad-warning); }
.mad-display-field-info    { color: var(--mad-info); }
.mad-display-field-primary { color: var(--mad-primary-ink, var(--mad-primary)); font-weight: 700; }

/* Copy button — aparece no hover */
.mad-display-field-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--mad-radius-sm);
  background: transparent;
  color: var(--mad-text-subtle);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mad-t), background var(--mad-t), color var(--mad-t);
  margin-left: auto;
  flex-shrink: 0;
}
.mad-display-field:hover .mad-display-field-copy { opacity: 1; }
.mad-display-field-copy:hover { background: var(--mad-bg-muted); color: var(--mad-text); }
.mad-display-field-copied { opacity: 1 !important; color: var(--mad-success) !important; }

/* Expandable — clamp */
.mad-display-field-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mad-display-field-toggle {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--mad-text-xs);
  color: var(--mad-info);
  cursor: pointer;
  font-weight: 500;
  margin-top: 2px;
}
.mad-display-field-toggle:hover { text-decoration: underline; }

/* Hint */
.mad-display-field-hint {
  font-size: var(--mad-text-xs);
  color: var(--mad-text-subtle);
  line-height: 1.4;
}

/* Formulário em leitura (<mad-form read>, $this->form->readMode(), fw#498): os
   campos que conhecem o modo saem como .mad-display-field; o vazio do
   read="filled" e o <mad-display-field hide-empty> não ocupam célula da grade.
   Campo que não conhece o modo fica travado, e a lista de itens sem adicionar,
   remover e arrastar. */
.mad-field-read-skip { display: none; }
.mad-form-grid > :has(> .mad-field-read-skip:only-child) { display: none; }
.mad-form-read .mad-field:not(.mad-field-read) :is(input:not([type="hidden"]), select, textarea, .mad-sel-control) { pointer-events: none; }
.mad-form-read :is(.mad-fl-add-btn, .mad-fl-add-row, .mad-fl-remove-btn, .mad-fl-handle) { display: none; }

/* Tema ERP: ficha em leitura — rótulo 12 mudo, valor 13.5 (rubrica da ficha). */
.mad-layout-erp .mad-display-field-label {
  font-size: var(--mad-label-size, 12px);
  font-weight: var(--mad-label-weight, 500);
  text-transform: none;
  letter-spacing: 0;
  color: var(--mad-label-color, var(--mad-text-muted));
}
.mad-layout-erp .mad-display-field-value { font-size: 13.5px; line-height: 1.45; }
.mad-layout-erp .mad-display-field-empty { font-style: normal; }
.mad-layout-erp .mad-form-grid-read { align-items: start; }
@media (max-width: 640px) {
  /* Leitura no celular: 2 colunas quando cabe; o que ocupava mais de uma
     coluna (descrição) fica na linha inteira. !important: colunas e span vêm
     no style da grade. */
  .mad-layout-erp .mad-form-grid.mad-form-grid-read { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .mad-layout-erp .mad-form-grid-read > [style*="span"] { grid-column: 1 / -1 !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   29. COMPONENTE — EMPTY STATE
   ═══════════════════════════════════════════════════════════════════ */

.mad-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--mad-s10) var(--mad-s6);
  color: var(--mad-text-muted);
  gap: var(--mad-s3);
}
.mad-empty-icon  { font-size: 40px; opacity: .4; }
.mad-empty-title { font-size: var(--mad-text-base); font-weight: 700; color: var(--mad-text); }
.mad-empty-desc  { font-size: var(--mad-text-sm); max-width: 320px; line-height: 1.6; }


/* ═══════════════════════════════════════════════════════════════════
   29. COMPONENTE — NAVBAR (top header — estilo Notch)
   ═══════════════════════════════════════════════════════════════════ */

/* Container */
.mad-navbar {
  position: relative;
  background: #fbfbfb;
  border-bottom: 1px solid var(--mad-border);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Logo slot (esquerda) */
.mad-navbar-logo {
  width: 272px;
  min-width: 272px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 12px;
  flex-shrink: 0;
}
.mad-navbar-logo img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

/* Centro: slot para pills */
.mad-navbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

/* Direita */
.mad-navbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-right: 12px;
  flex-shrink: 0;
}

/* ── Pills ── */
/* Pill externa (cinza) */
.mad-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  background: var(--mad-bg-muted);
  border-radius: var(--mad-radius-full);
  padding: 3px 6px;
  box-shadow: var(--mad-shadow-sm), 0 0 0 1px rgba(0,0,0,.06);
}

/* Pill dark (ações principais) */
.mad-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  background: var(--mad-text);
  border-radius: var(--mad-radius-full);
  padding: 2px 6px;
}

/* Pill white (notificações, ações secundárias) */
.mad-pill-white {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  background: var(--mad-bg);
  border-radius: var(--mad-radius-full);
  padding: 2px 6px;
  box-shadow: var(--mad-shadow-sm), 0 0 0 1px rgba(0,0,0,.05);
}

/* Texto de data/info dentro da pill */
.mad-pill-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--mad-text-muted);
  padding: 0 6px;
  white-space: nowrap;
  line-height: 1;
}

/* Botão ícone dentro de pill dark */
.mad-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--mad-radius-full);
  color: rgba(255,255,255,.7);
  font-size: 11px;
  text-decoration: none;
  transition: background var(--mad-t), color var(--mad-t);
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.mad-pill-btn:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Botão ícone dentro de pill white */
.mad-pill-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--mad-radius-full);
  color: var(--mad-text-muted);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--mad-t), background var(--mad-t);
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.mad-pill-icon-btn:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
}

/* Botão ícone fora de pill (direita do header) */
.mad-navbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mad-radius-full);
  color: var(--mad-text-muted);
  font-size: 14px;
  text-decoration: none;
  transition: background var(--mad-t), color var(--mad-t);
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.mad-navbar-icon-btn:hover {
  background: rgba(0,0,0,.05);
  color: var(--mad-text);
}

/* Botão de usuário (pill com avatar + nome) */
.mad-navbar-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  background: var(--mad-bg);
  border-radius: var(--mad-radius-full);
  padding: 3px 10px 3px 3px;
  box-shadow: var(--mad-shadow-sm), 0 0 0 1px rgba(0,0,0,.05);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--mad-t);
  border: none;
}
.mad-navbar-user-btn:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.08);
}
.mad-navbar-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mad-bg-muted);
}
.mad-navbar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mad-navbar-user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-text);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   30. COMPONENTE — NAV RAIL (sidebar de ícones — estilo Notch)
   ═══════════════════════════════════════════════════════════════════ */

/* Container externo */
.mad-rail {
  width: 84px;
  min-width: 84px;
  background: var(--mad-bg);
  padding: 12px 0 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}

/* Pill wrapper */
.mad-rail-pill {
  width: 67px;
  background: var(--mad-bg-muted);
  border-radius: 28px;
  padding: 5px 3px 3px;
  box-shadow: var(--mad-shadow-sm), 0 0 0 1px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Seção dark (módulos principais) */
.mad-rail-modules {
  background: var(--mad-text);
  border-radius: 22px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-bottom: 3px;
  overflow: hidden;
}

/* Item dentro da seção dark */
.mad-rail-item {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mad-t), color var(--mad-t);
  border: none;
  flex-shrink: 0;
}

/* Item no rail dark */
.mad-rail-modules .mad-rail-item {
  background: transparent;
  color: rgba(255,255,255,.7);
}
.mad-rail-modules .mad-rail-item:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.mad-rail-modules .mad-rail-item.mad-active {
  background: #fff;
  color: var(--mad-text);
  box-shadow: var(--mad-shadow-sm), 0 0 0 1px rgba(0,0,0,.06);
}

/* Seção light (abaixo do dark) */
.mad-rail-light {
  padding: 4px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

/* Item no rail light */
.mad-rail-light .mad-rail-item {
  background: transparent;
  color: var(--mad-text-muted);
}
.mad-rail-light .mad-rail-item:hover {
  background: rgba(0,0,0,.05);
  color: var(--mad-text);
}
.mad-rail-light .mad-rail-item.mad-active {
  background: var(--mad-bg);
  color: var(--mad-text);
  box-shadow: var(--mad-shadow-sm), 0 0 0 1px rgba(0,0,0,.05);
}


/* ═══════════════════════════════════════════════════════════════════
   31. COMPONENTE — SUBMENU (painel lateral de itens)
   ═══════════════════════════════════════════════════════════════════ */

.mad-submenu {
  width: 272px;
  min-width: 272px;
  background: var(--mad-bg);
  border-right: 1px solid var(--mad-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Título do módulo */
.mad-submenu-title {
  font-size: var(--mad-text-base);
  font-weight: 600;
  color: var(--mad-text);
  padding: 14px 20px 8px;
  flex-shrink: 0;
}

/* Lista de itens */
.mad-submenu-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
  scrollbar-width: none;
}
.mad-submenu-list::-webkit-scrollbar { display: none; }

/* Item do menu */
.mad-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--mad-radius-xl);
  padding: 8px;
  font-size: var(--mad-text-sm);
  color: var(--mad-text-muted);
  text-decoration: none;
  transition: background var(--mad-t), color var(--mad-t), border-color var(--mad-t);
  line-height: 1.4;
  margin-bottom: 2px;
  border-left: 2px solid transparent;
  cursor: pointer;
  border-radius: var(--mad-radius-xl);
}
.mad-submenu-item i {
  color: var(--mad-text-subtle);
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.mad-submenu-item:hover {
  background: var(--mad-accent-subtle);
  color: var(--mad-text);
  border-left-color: var(--mad-accent-border);
}
.mad-submenu-item:hover i { color: var(--mad-text-muted); }

/* Item ativo */
.mad-submenu-item.mad-active {
  background: var(--mad-accent-subtle);
  color: var(--mad-accent);
  border-left-color: var(--mad-accent);
}
.mad-submenu-item.mad-active i { color: var(--mad-accent); }

/* Sub-nível (nível 3) */
.mad-submenu-children {
  margin: 2px 8px 2px 12px;
  padding: 2px 0 2px 10px;
  border-left: 1.5px solid var(--mad-border);
}
.mad-submenu-children .mad-submenu-item {
  border-radius: var(--mad-radius);
  padding: 6px;
  font-size: 12.5px;
  color: var(--mad-text-subtle);
  border-left: none;
}
.mad-submenu-children .mad-submenu-item i { display: none; }
.mad-submenu-children .mad-submenu-item:hover {
  background: transparent;
  color: var(--mad-text);
  border-left: none;
}
.mad-submenu-children .mad-submenu-item.mad-active {
  background: transparent;
  color: var(--mad-accent);
  font-weight: 600;
  border-left: none;
}

/* Separador de seção dentro do submenu */
.mad-submenu-sep {
  font-size: 11px;
  color: var(--mad-text-subtle);
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Rodapé do submenu (menu-tools) */
.mad-submenu-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--mad-border);
  flex-shrink: 0;
}
.mad-submenu-footer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mad-text-subtle);
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 2px;
  transition: background var(--mad-t), color var(--mad-t);
}
.mad-submenu-footer-item:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-text-muted);
}
.mad-submenu-footer-unit {
  background: var(--mad-bg-muted);
  border-radius: var(--mad-radius);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--mad-text-muted);
}
.mad-submenu-footer-version {
  font-size: 11px;
  color: var(--mad-border-strong);
  text-align: center;
  padding: 6px 0 0;
}


/* ═══════════════════════════════════════════════════════════════════
   32. COMPONENTE — MEGAMENU (apps dropdown grid)
   ═══════════════════════════════════════════════════════════════════ */

.mad-megamenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  background: var(--mad-bg);
  border-radius: var(--mad-radius-xl);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: var(--mad-shadow-xl);
  padding: 20px;
  z-index: 9999;
}

/* Busca no topo */
.mad-megamenu-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--mad-bg-muted);
  border-radius: var(--mad-radius);
  padding: 5px 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mad-bg-muted);
}
.mad-megamenu-search-icon { font-size: 13px; color: var(--mad-text-subtle); flex-shrink: 0; }
.mad-megamenu-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  color: var(--mad-text);
  padding: 0;
  line-height: 1;
}
.mad-megamenu-search-input::placeholder { color: var(--mad-text-subtle); }

/* Grid 2 colunas */
.mad-megamenu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Coluna de módulo */
.mad-megamenu-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Header do módulo */
.mad-megamenu-module-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mad-megamenu-module-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--mad-radius);
  background: var(--mad-text);
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}
.mad-megamenu-module-icon i,
.mad-megamenu-module-icon svg { font-size: 11px; color: #fff; }
.mad-megamenu-module-title {
  font-size: var(--mad-text-sm);
  font-weight: 600;
  color: var(--mad-text);
  line-height: 1;
}

/* Lista de itens */
.mad-megamenu-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Item individual */
.mad-megamenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--mad-radius);
  padding: 7px 10px;
  font-size: var(--mad-text-sm);
  color: var(--mad-text-muted);
  text-decoration: none;
  transition: background var(--mad-t), color var(--mad-t);
  cursor: pointer;
}
.mad-megamenu-item:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
}
.mad-megamenu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
}
.mad-megamenu-item-icon i { font-size: 13px; color: var(--mad-text-subtle); }
.mad-megamenu-item:hover .mad-megamenu-item-icon i { color: var(--mad-text-muted); }
.mad-megamenu-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   31. COMPONENTE — FIELD helpers (aliases)
   ═══════════════════════════════════════════════════════════════════ */

/* Texto secundário, não o cinza mais fraco: --mad-text-subtle dava 2,6:1 no
   claro (fw#295). `--mad-hint-color` é do projeto: definida (na raiz ou no
   .mad-ui, sem !important), troca a cor da dica nos dois temas (fw#293). */
.mad-field-hint { font-size: var(--mad-text-xs); color: var(--mad-hint-color, var(--mad-text-muted)); line-height: 1.5; }
/* .mad-error e .mad-field-hint tem a mesma especificidade e o hint vem depois
   no arquivo: sem esta regra a mensagem de validacao sai cinza de hint. */
.mad-field-hint.mad-error { color: var(--mad-danger-text, var(--mad-danger)); }
[data-field-error]:empty { display: none; }
/* Erro de validação que se vê: num formulário comprido a mensagem pequena passava
   despercebida. Rótulo em vermelho, mensagem 12,5px com marcador e o campo pisca
   quando a tela o revela (Mad._madRevealFirstError). */
.mad-field:has(> [data-field-error].mad-error:not(:empty)) > .mad-label { color: var(--mad-danger-text, var(--mad-danger)); }
.mad-field-hint.mad-error:not(:empty) { font-size: 12.5px; font-weight: 500; display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; line-height: 1.4; }
.mad-field-hint.mad-error:not(:empty)::before {
  content: '!'; flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%;
  background: var(--mad-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}
@keyframes mad-error-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--mad-ring-danger); } 50% { box-shadow: 0 0 0 7px var(--mad-ring-danger); } }
.mad-field.mad-error-flash .mad-input-error,
.mad-field.mad-error-flash .mad-sel-control,
.mad-field.mad-error-flash .mad-textarea-error { animation: mad-error-pulse .45s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .mad-field.mad-error-flash * { animation: none !important; } }
/* Asterisco no vermelho cheio dava 3,5:1 no escuro: a mesma tinta do aviso de erro (fw#322). */
.mad-required   { color: var(--mad-danger-text, var(--mad-danger)); margin-left: 2px; }


/* ═══════════════════════════════════════════════════════════════════
   32. COMPONENTE — PROGRESS
   ═══════════════════════════════════════════════════════════════════ */

.mad-progress {
  width: 100%;
  height: 8px;
  background: var(--mad-bg-muted);
  border-radius: var(--mad-radius-full);
  overflow: hidden;
}
.mad-progress-bar {
  height: 100%;
  background: var(--mad-primary);
  border-radius: var(--mad-radius-full);
  transition: width .35s ease;
  min-width: 0;
}
.mad-progress-sm { height: 4px; }
.mad-progress-lg { height: 12px; }
.mad-progress-success .mad-progress-bar { background: var(--mad-success); }
.mad-progress-warning .mad-progress-bar { background: var(--mad-warning); }
.mad-progress-danger  .mad-progress-bar { background: var(--mad-danger); }
.mad-progress-info    .mad-progress-bar { background: var(--mad-info); }


/* ═══════════════════════════════════════════════════════════════════
   33. COMPONENTE — CALLOUT
   ═══════════════════════════════════════════════════════════════════ */

.mad-callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  background: var(--mad-bg-subtle);
  font-size: var(--mad-text-sm);
}
.mad-callout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--mad-text);
  line-height: 1.3;
}
.mad-callout-body  { color: var(--mad-text-muted); line-height: 1.6; margin-left: 24px; }
.mad-callout-footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; margin-left: 24px; }
/* Faixa de próximo passo: texto à esquerda, botão da ação à direita; no
   estreito o botão desce e ocupa a linha (fw#498). */
.mad-callout-has-action { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.mad-callout-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mad-callout-action { flex: none; display: flex; }
@media (max-width: 640px) {
  .mad-callout-action { flex: 1 1 100%; }
  .mad-callout-action > .mad-btn { flex: 1; justify-content: center; }
}

.mad-callout-info    { border-color: rgba(74,144,217,.35);  background: var(--mad-info-subtle);    color: var(--mad-alert-info-text, #1a3a5c); }
.mad-callout-success { border-color: rgba(22,163,74,.35);   background: var(--mad-success-subtle); color: var(--mad-alert-success-text, #14532d); }
.mad-callout-warning { border-color: rgba(217,119,6,.35);   background: var(--mad-warning-subtle); color: var(--mad-alert-warning-text, #78350f); }
.mad-callout-danger  { border-color: rgba(220,38,38,.35);   background: var(--mad-danger-subtle);  color: var(--mad-alert-danger-text, #7f1d1d); }


/* ── Code block (documentação) ────────────────────────────────────── */
.mad-code {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: var(--mad-radius-md);
  padding: 16px 20px;
  margin-top: 12px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
}
.mad-code code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  white-space: pre;
}

/* ═══════════════════════════════════════════════════════════════════
   34. COMPONENTE — ACCORDION
   ═══════════════════════════════════════════════════════════════════ */

.mad-accordion {
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg);
  overflow: hidden;
}
.mad-accordion-item + .mad-accordion-item {
  border-top: 1px solid var(--mad-border);
}
.mad-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mad-text);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 12px;
  transition: background var(--mad-t);
}
.mad-accordion-trigger:hover { background: var(--mad-bg-subtle); }
.mad-accordion-trigger > svg { flex: none; width: 16px; height: 16px; color: var(--mad-text-subtle); }
.mad-accordion-body {
  padding: 0 16px 16px;
  font-size: var(--mad-text-sm);
  color: var(--mad-text-muted);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════
   35. COMPONENTE — DROPDOWN
   ═══════════════════════════════════════════════════════════════════ */

.mad-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  /* Menu mais largo que a tela não passa dela; o lado e o deslocamento são
     acertados ao abrir (madDropdownPlace, mad-ui.js). */
  max-width: calc(100vw - 16px);
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  box-shadow: var(--mad-shadow-md);
  z-index: 100;
  padding: 4px;
}
.mad-dropdown-end { left: auto; right: 0; }

.mad-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--mad-radius-sm);
  font-size: var(--mad-text-sm);
  color: var(--mad-text);
  cursor: pointer;
  user-select: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background var(--mad-t);
}
.mad-dropdown-item:hover { background: var(--mad-bg-muted); }
.mad-dropdown-item:disabled,
.mad-dropdown-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Ícone Lucide do item (SVG via createIcons): só o filho DIRETO, p/ não pegar
   ícones aninhados (ex.: .mad-notif-item__icon dos feeds de sino/mensagens). */
.mad-dropdown-item > svg { width: 16px; height: 16px; flex-shrink: 0; }

.mad-dropdown-item-danger       { color: var(--mad-danger); }
.mad-dropdown-item-danger:hover { background: var(--mad-danger-subtle); }

.mad-dropdown-sep { height: 1px; background: var(--mad-border); margin: 4px 0; }

.mad-dropdown-label {
  padding: 5px 10px 3px;
  font-size: var(--mad-text-xs);
  font-weight: 700;
  /* Texto secundário: o cinza de placeholder dava 2,6:1 no claro e 3,5:1 no escuro (fw#292). */
  color: var(--mad-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Dropdown variante: FEED (sino de notificações + mensagens) ───── */
.mad-dropdown-feed {
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 80px));
  overflow-y: auto;
  padding: 6px;
}

.mad-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 6px;
}
.mad-notif-header > span {
  font-size: var(--mad-text-xs);
  font-weight: 700;
  /* texto secundário, não o tom de placeholder: o título tem de passar em AA */
  color: var(--mad-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mad-notif-markall {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--mad-primary-ink, var(--mad-primary));
  text-decoration: none;
  white-space: nowrap;
}
.mad-notif-markall:hover { text-decoration: underline; }

.mad-notif-item {
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
}
.mad-notif-item__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--mad-radius-full);
  border: 1px solid var(--mad-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mad-text-muted);
  background: var(--mad-bg);
}
.mad-notif-item__icon i { font-size: 16px; line-height: 1; }
.mad-notif-item:hover .mad-notif-item__icon {
  border-color: var(--mad-border-strong);
}

.mad-notif-item__content { flex: 1 1 auto; min-width: 0; }
.mad-notif-item__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: var(--mad-text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mad-text);
}
.mad-notif-item__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mad-notif-time {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--mad-text-muted);
  white-space: nowrap;
}
.mad-notif-time i { font-size: 10px; }
.mad-notif-item__body {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mad-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mad-notif-empty {
  opacity: .7;
  cursor: default;
  justify-content: center;
  padding: 18px 10px;
}
.mad-notif-footer {
  justify-content: center;
  font-weight: 500;
  color: var(--mad-primary-ink, var(--mad-primary));
}


/* ═══════════════════════════════════════════════════════════════════
   36. COMPONENTE — MODAL
   ═══════════════════════════════════════════════════════════════════ */

.mad-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: var(--mad-z-overlay, 1010);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.mad-modal {
  background: var(--mad-bg);
  border-radius: var(--mad-radius-lg);
  box-shadow: var(--mad-shadow-xl);
  width: 100%;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mad-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mad-border);
  flex-shrink: 0;
  gap: 12px;
}
.mad-modal-title { font-size: var(--mad-text-base); font-weight: 700; color: var(--mad-text); line-height: 1.3; flex: 1; }
.mad-modal-body  { padding: 20px; overflow-y: auto; flex: 1; }
.mad-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--mad-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: var(--mad-bg-subtle);
  flex-shrink: 0;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════
   37. COMPONENTE — TOOLTIP
   ═══════════════════════════════════════════════════════════════════ */

.mad-tooltip-wrap { position: relative; display: inline-flex; }

.mad-tooltip {
  position: absolute;
  background: var(--mad-tooltip-bg);
  color: var(--mad-tooltip-fg);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--mad-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 150;
  line-height: 1.4;
  box-shadow: var(--mad-shadow-md);
}

/* top (padrão) */
.mad-tooltip-top {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
.mad-tooltip-top::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--mad-tooltip-bg);
}

/* bottom */
.mad-tooltip-bottom {
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
.mad-tooltip-bottom::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--mad-tooltip-bg);
}

/* left */
.mad-tooltip-left {
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.mad-tooltip-left::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: var(--mad-tooltip-bg);
}

/* right */
.mad-tooltip-right {
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.mad-tooltip-right::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: var(--mad-tooltip-bg);
}

/* Variante flutuante — tooltip global posicionado via JS (ver mad-ui.js).
   Substitui o Bootstrap tooltip do front-end legado para elementos com [title]. */
.mad-tooltip-floating {
  position: fixed;
  top: auto; right: auto; bottom: auto; left: auto;
  transform: none;
  max-width: 360px;
  white-space: normal;
  word-wrap: break-word;
  /* Acima de drawer/modal/toast (max int32 - 1 para ficar sempre no topo). */
  z-index: 2147483646;
}


/* ═══════════════════════════════════════════════════════════════════
   38. COMPONENTE — TOAST
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sonner-style toast system ── */

/* Toaster container */
.mad-toast-region {
  position: fixed;
  width: 356px;
  z-index: 999999999;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  outline: none;
  --border-radius: 8px;
  /* A região só posiciona: quem recebe o ponteiro é o cartão do aviso. Sem isto
     ela engolia o toque de tudo o que ficava embaixo dela (fw#278). */
  pointer-events: none;
}

/* Container Y position */
.mad-toast-region[data-y-position="bottom"] { bottom: 24px; }
.mad-toast-region[data-y-position="top"]    { top: 24px; }

/* Container X position */
.mad-toast-region[data-x-position="right"]  { right: 24px; }
.mad-toast-region[data-x-position="left"]   { left: 24px; }
.mad-toast-region[data-x-position="center"] { left: 50%; transform: translateX(-50%); }

/* Individual toast */
.mad-toast {
  --y: translateY(100%);
  --lift-amount: calc(var(--lift) * var(--gap));
  z-index: var(--z-index);
  position: absolute;
  opacity: 0;
  transform: var(--y);
  touch-action: none;
  transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
  box-sizing: border-box;
  outline: none;
  overflow-wrap: anywhere;
  pointer-events: auto;
}

.mad-toast[data-styled="true"] {
  padding: 16px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  color: var(--mad-text);
  border-radius: var(--border-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  width: 356px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toast Y position — bottom (default) */
.mad-toast[data-y-position="bottom"] {
  bottom: 0;
  --y: translateY(100%);
  --lift: -1;
  --lift-amount: calc(var(--lift) * var(--gap));
}

/* Toast Y position — top */
.mad-toast[data-y-position="top"] {
  top: 0;
  --y: translateY(-100%);
  --lift: 1;
  --lift-amount: calc(1 * var(--gap));
}

/* Toast X position */
.mad-toast[data-x-position="right"] { right: 0; }
.mad-toast[data-x-position="left"]  { left: 0; }

/* Mounted = slide in */
.mad-toast[data-mounted="true"] {
  --y: translateY(0);
  opacity: 1;
}

/* Stacked (not expanded, behind front) — Sonner formula */
.mad-toast[data-expanded="false"][data-front="false"] {
  --scale: var(--toasts-before) * 0.05 + 1;
  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
  height: var(--front-toast-height);
}

/* Children transitions */
.mad-toast > * {
  transition: opacity 400ms;
}

/* Stacked: hide content behind front toast */
.mad-toast[data-expanded="false"][data-front="false"][data-styled="true"] > * {
  opacity: 0;
}

/* Hidden beyond visible limit */
.mad-toast[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

/* Expanded (hover) */
.mad-toast[data-mounted="true"][data-expanded="true"] {
  --y: translateY(calc(var(--lift) * var(--offset)));
  height: var(--initial-height);
}

/* Expanded gap filler (keeps hover continuous between toasts) */
.mad-toast[data-expanded="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  height: calc(var(--gap) + 1px);
  bottom: 100%;
  width: 100%;
}

/* ── Removed states ── */
.mad-toast[data-removed="true"][data-front="true"][data-swipe-out="false"] {
  --y: translateY(calc(var(--lift) * -100%));
  opacity: 0;
}
.mad-toast[data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"] {
  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
  opacity: 0;
}
.mad-toast[data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"] {
  --y: translateY(40%);
  opacity: 0;
  transition: transform 500ms, opacity 200ms;
}

/* ── Swiping ── */
.mad-toast[data-swiping="true"] {
  transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
  transition: none;
}

/* Swipe out animations */
.mad-toast[data-swipe-out="true"] {
  animation-duration: 200ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.mad-toast[data-swipe-out="true"][data-swipe-direction="left"]  { animation-name: mad-swipe-out-left; }
.mad-toast[data-swipe-out="true"][data-swipe-direction="right"] { animation-name: mad-swipe-out-right; }
.mad-toast[data-swipe-out="true"][data-swipe-direction="down"]  { animation-name: mad-swipe-out-down; }
.mad-toast[data-swipe-out="true"][data-swipe-direction="up"]    { animation-name: mad-swipe-out-up; }

@keyframes mad-swipe-out-left {
  from { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
  to   { transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%)); opacity: 0; }
}
@keyframes mad-swipe-out-right {
  from { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
  to   { transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%)); opacity: 0; }
}
@keyframes mad-swipe-out-down {
  from { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
  to   { transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%)); opacity: 0; }
}
@keyframes mad-swipe-out-up {
  from { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
  to   { transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%)); opacity: 0; }
}

/* ── Rich colors ── */
/* Texto na mesma matiz, mais escuro: o amarelo dava 2,6:1 na descrição e os
   outros 3,4–4,4:1 (fw#295). Título e descrição (opacidade .85) ≥ 4,5:1. */
[data-rich-colors="true"][data-type="success"] {
  background: hsl(143, 85%, 96%);
  border-color: hsl(145, 92%, 87%);
  color: #166534;
}
[data-rich-colors="true"][data-type="danger"] {
  background: hsl(359, 100%, 97%);
  border-color: hsl(359, 100%, 94%);
  color: #991b1b;
}
[data-rich-colors="true"][data-type="warning"] {
  background: hsl(49, 100%, 97%);
  border-color: hsl(49, 91%, 84%);
  color: #92400e;
}
[data-rich-colors="true"][data-type="info"] {
  background: hsl(208, 100%, 97%);
  border-color: hsl(221, 91%, 93%);
  color: #1e40af;
}

/* Rich colors — close button inherits */
[data-rich-colors="true"] .mad-toast-close {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* ── Icon ── */
.mad-toast-icon {
  display: flex;
  height: 16px;
  width: 16px;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  margin-left: -3px;
  margin-right: 4px;
}

/* ── Content ── */
.mad-toast-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mad-toast-title {
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
}
.mad-toast-desc {
  font-weight: 400;
  line-height: 1.4;
  color: inherit;
  opacity: 0.7;
}
[data-rich-colors="true"] .mad-toast-desc {
  color: inherit;
  opacity: 0.85;
}

/* ── Close button ── */
.mad-toast-close {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  color: var(--mad-text-subtle);
  transform: translate(-35%, -35%);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  transition: opacity 100ms, background 200ms, border-color 200ms;
}
.mad-toast:hover .mad-toast-close { opacity: 1; }
.mad-toast-close:hover { background: var(--mad-bg-hover, #f5f5f5); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion) {
  .mad-toast, .mad-toast > * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .mad-toast-region {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: 100%;
  }
  /* Região dos avisos do app (tem data-*-position): a 16 px de cada borda e com
     a altura do conteúdo. Com `top` e `bottom` juntos ela cobria a tela (fw#278). */
  .mad-toast-region[data-x-position] {
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
  .mad-toast-region[data-y-position="top"]    { top: 16px; bottom: auto; }
  .mad-toast-region[data-y-position="bottom"] { bottom: 16px; }
  .mad-toast {
    left: 0;
    right: 0;
    width: calc(100% - 32px);
  }
  .mad-toast[data-styled="true"] { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════
   39. COMPONENTE — PAGINATION
   ═══════════════════════════════════════════════════════════════════ */

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

.mad-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--mad-radius-sm);
  font-size: 12.5px;
  color: var(--mad-text);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mad-t), border-color var(--mad-t), color var(--mad-t);
  user-select: none;
  white-space: nowrap;
}
.mad-page-btn:hover { background: var(--mad-bg-muted); }
.mad-page-btn-active {
  background: var(--mad-primary);
  color: var(--mad-primary-fg);
  border-color: var(--mad-primary);
}
.mad-page-btn-active:hover { opacity: .88; background: var(--mad-primary); }
.mad-page-btn:disabled,
.mad-page-btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.mad-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  color: var(--mad-text-subtle);
  font-size: var(--mad-text-sm);
}


/* ═══════════════════════════════════════════════════════════════════
   40. COMPONENTE — BTN GROUP
   ═══════════════════════════════════════════════════════════════════ */

.mad-btn-group {
  display: inline-flex;
}
.mad-btn-group .mad-btn {
  border-radius: 0;
  margin-left: -1px;
}
.mad-btn-group .mad-btn:first-child { border-radius: var(--mad-radius) 0 0 var(--mad-radius); margin-left: 0; }
.mad-btn-group .mad-btn:last-child  { border-radius: 0 var(--mad-radius) var(--mad-radius) 0; }
.mad-btn-group .mad-btn:only-child  { border-radius: var(--mad-radius); margin-left: 0; }
.mad-btn-group .mad-btn:hover,
.mad-btn-group .mad-btn:focus { z-index: 1; }


/* ═══════════════════════════════════════════════════════════════════
   41. COMPONENTE — CHECKBOX
   ═══════════════════════════════════════════════════════════════════ */

.mad-checkbox-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.mad-checkbox-wrap:has(input:disabled) { opacity: .5; cursor: not-allowed; }

input[type="checkbox"].mad-checkbox { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; border: 0; padding: 0; appearance: none; -webkit-appearance: none; }
input[type="checkbox"].mad-checkbox::before { display: none; content: none; }

.mad-checkbox-box {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid var(--mad-border-strong);
  border-radius: var(--mad-radius-sm);
  background: var(--mad-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: border-color var(--mad-t), background var(--mad-t);
  position: relative;
}
.mad-checkbox:checked ~ .mad-checkbox-box {
  background: var(--mad-primary);
  border-color: var(--mad-primary);
}
.mad-checkbox:checked ~ .mad-checkbox-box::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
/* Meio marcada (a caixa do cabeçalho do Checklist com parte da lista
   marcada, fw#239): preenchida, com um traço no lugar do visto. Depois do
   `:checked` — se os dois casarem, vale o traço, como no navegador. */
.mad-checkbox:indeterminate ~ .mad-checkbox-box {
  background: var(--mad-primary);
  border-color: var(--mad-primary);
}
.mad-checkbox:indeterminate ~ .mad-checkbox-box::after {
  content: '';
  display: block;
  width: 8px;
  height: 0;
  border: 0;
  border-top: 2px solid var(--mad-primary-fg, #fff);
  transform: none;
}
.mad-checkbox:focus-visible ~ .mad-checkbox-box {
  outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000)));
  outline-offset: 2px;
}
.mad-checkbox-label { font-size: var(--mad-text-sm); color: var(--mad-text); line-height: 1.4; }
/* Texto do <mad-checkbox-field> avulso: é o LABEL do campo, então lê as
   --mad-label-* (com o visual do checkbox como fallback). Classe própria porque
   .mad-checkbox-label também é o texto de cada OPÇÃO do checkbox-group, que não
   é label de campo. */
.mad-checkbox-field-label {
  font-size: var(--mad-label-size, var(--mad-text-sm));
  font-weight: var(--mad-label-weight, normal);
  font-style: var(--mad-label-style, normal);
  color: var(--mad-label-color, var(--mad-text));
}
/* A descrição mora dentro do mesmo <span>: não herda negrito/itálico do label. */
.mad-checkbox-field-label .mad-field-hint { font-weight: normal; font-style: normal; }


/* ═══════════════════════════════════════════════════════════════════
   42. COMPONENTE — RADIO
   ═══════════════════════════════════════════════════════════════════ */

.mad-radio-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.mad-radio-wrap:has(input:disabled) { opacity: .5; cursor: not-allowed; }

.mad-radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }

.mad-radio-circle {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid var(--mad-border-strong);
  border-radius: 50%;
  background: var(--mad-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: border-color var(--mad-t), background var(--mad-t);
}
.mad-radio:checked ~ .mad-radio-circle { border-color: var(--mad-primary); }
.mad-radio:checked ~ .mad-radio-circle::after {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--mad-primary);
  border-radius: 50%;
  display: block;
}
.mad-radio:focus-visible ~ .mad-radio-circle {
  outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000)));
  outline-offset: 2px;
}
.mad-radio-label { font-size: var(--mad-text-sm); color: var(--mad-text); line-height: 1.4; }

/* Tamanhos */
.mad-radio-group-sm .mad-radio-circle { width: 14px; height: 14px; min-width: 14px; }
.mad-radio-group-sm .mad-radio:checked ~ .mad-radio-circle::after { width: 6px; height: 6px; }
.mad-radio-group-sm .mad-radio-label { font-size: var(--mad-text-xs, 12px); }
.mad-radio-group-lg .mad-radio-circle { width: 20px; height: 20px; min-width: 20px; }
.mad-radio-group-lg .mad-radio:checked ~ .mad-radio-circle::after { width: 9px; height: 9px; }
.mad-radio-group-lg .mad-radio-label { font-size: var(--mad-text-md, 15px); }

/* Variante button (segmented btn-group) */
.mad-radio-btn-group {
  display: inline-flex;
  flex-direction: row;
  border: 1px solid var(--mad-border-strong);
  border-radius: var(--mad-radius);
  overflow: hidden;
  background: var(--mad-bg);
}
.mad-radio-btn-group.mad-radio-btn-stack {
  flex-direction: column;
  display: flex;
  width: max-content;
}
.mad-radio-btn-group.mad-radio-btn-stack .mad-radio-btn + .mad-radio-btn { border-top: 1px solid var(--mad-border); border-left: 0; }
.mad-radio-btn-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.mad-radio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: var(--mad-text-sm);
  color: var(--mad-text-muted, var(--mad-text));
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background var(--mad-t), color var(--mad-t), box-shadow var(--mad-t);
  position: relative;
  white-space: nowrap;
  line-height: 1.2;
}
.mad-radio-btn + .mad-radio-btn { border-left: 1px solid var(--mad-border); }
.mad-radio-btn:hover:not(.is-active):not(.is-disabled) { background: var(--mad-bg-soft, rgba(0,0,0,0.03)); color: var(--mad-text); }
.mad-radio-btn.is-active {
  background: var(--mad-primary);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--mad-primary);
}
.mad-radio-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.mad-radio-btn-input:focus-visible + .mad-radio-btn-label,
.mad-radio-btn:has(.mad-radio-btn-input:focus-visible) { outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000))); outline-offset: 1px; }
.mad-radio-group-sm .mad-radio-btn,
.mad-radio-btn-group.mad-radio-group-sm .mad-radio-btn { padding: 5px 10px; font-size: var(--mad-text-xs, 12px); }
.mad-radio-group-lg .mad-radio-btn,
.mad-radio-btn-group.mad-radio-group-lg .mad-radio-btn { padding: 11px 18px; font-size: var(--mad-text-md, 15px); }


/* ═══════════════════════════════════════════════════════════════════
   43. COMPONENTE — INPUT GROUP (prefix / suffix)
   ═══════════════════════════════════════════════════════════════════ */

.mad-input-group {
  display: flex;
  align-items: stretch;
}
.mad-input-group .mad-input {
  flex: 1;
  min-width: 0;
  border-radius: 0;
  box-shadow: none;
}
.mad-input-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: var(--mad-text-sm);
  font-weight: 600;
  color: var(--mad-text-muted);
  background: var(--mad-bg-muted);
  border: 1px solid var(--mad-border-strong);
  white-space: nowrap;
  line-height: 1;
}
.mad-input-group .mad-input-addon:first-child {
  border-right: none;
  border-radius: var(--mad-radius) 0 0 var(--mad-radius);
}
/* Cantos por LADO (longhand), não shorthand: o input sozinho no grupo (numeric/
   number/money sem prefixo nem sufixo) casa :first-child E :last-child, e o
   shorthand do segundo zerava os cantos que o primeiro tinha dado — o campo
   saía com a esquerda reta ao lado de um campo de texto todo arredondado. */
.mad-input-group .mad-input:first-child {
  border-top-left-radius: var(--mad-radius);
  border-bottom-left-radius: var(--mad-radius);
}
.mad-input-group .mad-input:last-child {
  border-top-right-radius: var(--mad-radius);
  border-bottom-right-radius: var(--mad-radius);
}
/* Botões do spinner (− +) e do seek (buscar / limpar) num campo de formulário
   esticam até a altura do input, em vez dos 38px fixos: com o tema que define
   a altura dos campos (--button-height), o input ficava mais baixo que os
   botões ao lado. Na célula editável da grade a altura fixa continua. */
.mad-field .mad-input-group > .mad-spinner-btn,
.mad-field .mad-input-group > .mad-seek-btn,
.mad-field .mad-input-group > .mad-seek-clear-btn {
  height: auto;
}
.mad-input-addon-r {
  border-left: none;
  border-radius: 0 var(--mad-radius) var(--mad-radius) 0;
}

/* Botão calendário do date-field */
.mad-datepicker-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--mad-input-bg, var(--mad-bg));
  border: 1px solid var(--mad-border-strong);
  border-left: none;
  border-radius: 0 var(--mad-radius) var(--mad-radius) 0;
  color: var(--mad-text-muted);
  cursor: pointer;
  line-height: 1;
  transition: background var(--mad-t), color var(--mad-t);
}
.mad-datepicker-btn:hover:not(:disabled) {
  background: var(--mad-bg-subtle);
  color: var(--mad-primary-ink, var(--mad-primary));
}
.mad-datepicker-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* password-field — botão eye/eye-off (toggle de visibilidade) */
.mad-password-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--mad-bg-muted);
  border: 1px solid var(--mad-border-strong);
  border-left: none;
  border-radius: 0 var(--mad-radius) var(--mad-radius) 0;
  color: var(--mad-text-muted);
  cursor: pointer;
  line-height: 1;
  transition: background var(--mad-t), color var(--mad-t);
}
.mad-password-toggle-btn:hover:not(:disabled) {
  background: var(--mad-bg-subtle);
  color: var(--mad-primary-ink, var(--mad-primary));
}
.mad-password-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* password-field — popover com regras de senha forte */
.mad-password-strength-popover {
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  box-shadow: var(--mad-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  padding: 12px 14px;
}
.mad-password-strength-title {
  margin: 0 0 8px;
  font-size: var(--mad-text-sm);
  font-weight: 600;
  color: var(--mad-text);
}
.mad-password-strength-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mad-password-strength-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mad-text-sm);
  color: var(--mad-text-muted);
  transition: color var(--mad-t);
}
.mad-password-strength-list li.mad-pwd-rule-ok {
  color: var(--mad-success, #16a34a);
}

/* mad-btn loading state — aplicado por mad-livewire.js durante submit
   (esconde o conteudo do botao e mostra um spinner centralizado por cima) */
.mad-btn-loading-active {
  position: relative;
  cursor: progress;
  pointer-events: none;
  color: transparent !important;
}
.mad-btn-loading-active > * {
  visibility: hidden;
}
.mad-btn-loading-active::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mad-spin .65s linear infinite;
  /* currentColor herda da cor do texto. Como zeramos color: transparent,
     usamos uma cor explicita pra garantir visibilidade em todas as variants */
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  opacity: 0.95;
}
/* Variants outline/ghost/secondary tem fundo claro: spinner precisa ser escuro */
.mad-btn-outline.mad-btn-loading-active::after,
.mad-btn-ghost.mad-btn-loading-active::after,
.mad-btn-secondary.mad-btn-loading-active::after {
  border-color: rgba(0, 0, 0, 0.18);
  border-top-color: rgba(0, 0, 0, 0.65);
}

/* Botão sem .mad-btn (ação da linha da grade, ícone) enquanto a ação dele roda
   no servidor — aplicado por mad-livewire.js (_markBusy, fw#314). A tinta do
   spinner segue o texto do tema (claro e escuro). */
.mad-click-busy {
  position: relative;
  cursor: progress;
  pointer-events: none;
}
/* O wire desabilita os mad:click do componente durante o pedido; o botão que
   está trabalhando não desbota com os outros (o .4 do :disabled apagava o spinner). */
.mad-click-busy[aria-busy="true"]:disabled {
  opacity: 1;
  cursor: progress;
}
.mad-click-busy > * {
  visibility: hidden;
}
.mad-click-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--mad-text, #0f172a) 22%, transparent);
  border-top-color: var(--mad-text, #0f172a);
  border-radius: 50%;
  animation: mad-spin .65s linear infinite;
}

/* color-field — input hex + swatch nativo colado à direita */
.mad-colorfield-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.mad-colorfield-input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.mad-colorfield-swatch {
  flex-shrink: 0;
  width: 38px;
  padding: 0;
  border: 1.5px solid var(--mad-border);
  border-top-right-radius: var(--mad-radius);
  border-bottom-right-radius: var(--mad-radius);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
.mad-colorfield-swatch:focus-visible {
  outline: 2px solid var(--mad-primary);
  outline-offset: 1px;
}
.mad-colorfield-swatch:disabled { cursor: not-allowed; opacity: 0.6; }
.pcr-app { z-index: var(--mad-z-picker, 10100) !important; }

/* ============================================================
 * Icon Field (mad-icon-field) — picker de icones Lucide
 * ============================================================ */
.mad-iconfield-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.mad-iconfield-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--mad-input-height, 38px);
  padding: 4px 10px;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius, 6px);
  background: var(--mad-input-bg, var(--mad-bg));
  color: var(--mad-input-color, var(--mad-text));
  cursor: pointer;
  text-align: left;
  font: inherit;
  /* Sem fallback: sem a prop vira `unset` e continua herdando (= o font: inherit acima). */
  font-weight: var(--mad-input-weight);
  font-style: var(--mad-input-style);
  transition: border-color .15s, box-shadow .15s;
}
.mad-iconfield-trigger:hover:not(:disabled) {
  border-color: var(--mad-border-hover, var(--mad-primary));
}
.mad-iconfield-trigger:focus-visible {
  outline: none;
  border-color: var(--mad-primary);
  box-shadow: 0 0 0 3px var(--mad-primary-subtle, rgba(79,70,229,0.18));
}
.mad-iconfield-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--mad-input-bg, var(--mad-bg-muted));
}
.mad-iconfield-trigger.mad-input-error {
  border-color: var(--mad-danger);
}

.mad-iconfield-preview {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mad-radius, 6px);
  background: var(--mad-bg-subtle, var(--mad-bg-muted));
  color: var(--mad-text);
}
.mad-iconfield-preview i,
.mad-iconfield-preview svg { width: 18px; height: 18px; }
.mad-iconfield-empty-icon { opacity: 0.35; }

.mad-iconfield-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--mad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mad-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.mad-iconfield-name-empty {
  color: var(--mad-text-muted, var(--mad-muted-fg));
  font-family: var(--mad-font, inherit);
}
.mad-iconfield-caret {
  color: var(--mad-muted-fg);
  display: inline-flex;
  flex: 0 0 auto;
}
.mad-iconfield-caret i,
.mad-iconfield-caret svg { width: 16px; height: 16px; }

/* Sizes */
.mad-iconfield-size-sm .mad-iconfield-trigger { min-height: 30px; padding: 2px 8px; gap: 8px; }
.mad-iconfield-size-sm .mad-iconfield-preview { width: 22px; height: 22px; flex-basis: 22px; }
.mad-iconfield-size-sm .mad-iconfield-preview i,
.mad-iconfield-size-sm .mad-iconfield-preview svg { width: 14px; height: 14px; }
.mad-iconfield-size-sm .mad-iconfield-name { font-size: 0.8125rem; }

.mad-iconfield-size-lg .mad-iconfield-trigger { min-height: 46px; padding: 6px 12px; gap: 12px; }
.mad-iconfield-size-lg .mad-iconfield-preview { width: 36px; height: 36px; flex-basis: 36px; }
.mad-iconfield-size-lg .mad-iconfield-preview i,
.mad-iconfield-size-lg .mad-iconfield-preview svg { width: 22px; height: 22px; }
.mad-iconfield-size-lg .mad-iconfield-name { font-size: 0.9375rem; }

/* Popover */
.mad-iconfield-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 320px;
  max-width: 520px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg, 8px);
  box-shadow: var(--mad-shadow-xl, 0 14px 40px rgba(0,0,0,0.18));
  z-index: 1050;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mad-iconfield-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg);
}
.mad-iconfield-search > i,
.mad-iconfield-search > svg { width: 16px; height: 16px; color: var(--mad-muted-fg); flex: 0 0 auto; }
.mad-iconfield-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  color: var(--mad-text);
}
.mad-iconfield-search input::placeholder { color: var(--mad-text-muted, var(--mad-muted-fg)); }

.mad-iconfield-clear-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--mad-muted-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mad-iconfield-clear-btn:hover { color: var(--mad-danger); background: var(--mad-bg-hover); }
.mad-iconfield-clear-btn i,
.mad-iconfield-clear-btn svg { width: 14px; height: 14px; }

/* Tabs */
.mad-iconfield-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle, var(--mad-bg));
}
.mad-iconfield-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--mad-radius, 6px);
  cursor: pointer;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--mad-text-muted, var(--mad-muted-fg));
  transition: background .12s, color .12s;
}
.mad-iconfield-tabs button:hover { background: var(--mad-bg-hover); color: var(--mad-text); }
.mad-iconfield-tabs button.is-active {
  background: var(--mad-primary-subtle, var(--mad-primary-light));
  color: var(--mad-primary-ink, var(--mad-primary));
  font-weight: 500;
}
.mad-iconfield-tabs button i,
.mad-iconfield-tabs button svg { width: 13px; height: 13px; }
.mad-iconfield-count {
  font-size: 0.6875rem;
  background: var(--mad-bg-muted);
  color: var(--mad-muted-fg);
  padding: 1px 6px;
  border-radius: var(--mad-radius-full, 999px);
  margin-left: 2px;
}
.mad-iconfield-tabs button.is-active .mad-iconfield-count {
  background: var(--mad-primary);
  color: var(--mad-primary-fg, #fff);
}

/* Grid */
.mad-iconfield-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
  padding: 10px;
  max-height: 320px;
  min-height: 120px;
  overflow-y: auto;
  background: var(--mad-bg);
  scrollbar-width: thin;
}
.mad-iconfield-grid::-webkit-scrollbar { width: 8px; }
.mad-iconfield-grid::-webkit-scrollbar-thumb { background: var(--mad-border); border-radius: 4px; }
.mad-iconfield-grid::-webkit-scrollbar-thumb:hover { background: var(--mad-border-strong, var(--mad-muted-fg)); }

.mad-iconfield-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--mad-radius, 6px);
  background: transparent;
  cursor: pointer;
  color: var(--mad-text);
  padding: 0;
  transition: background .1s, border-color .1s, transform .1s;
}
.mad-iconfield-cell:hover {
  background: var(--mad-bg-hover);
  border-color: var(--mad-border);
}
.mad-iconfield-cell.is-cursor {
  background: var(--mad-bg-hover);
  box-shadow: 0 0 0 2px var(--mad-primary);
}
.mad-iconfield-cell.is-selected {
  background: var(--mad-primary-subtle, var(--mad-primary-light));
  border-color: var(--mad-primary);
  color: var(--mad-primary-ink, var(--mad-primary));
}
.mad-iconfield-cell.is-selected.is-cursor {
  box-shadow: 0 0 0 2px var(--mad-primary);
}
.mad-iconfield-cell:active { transform: scale(0.94); }
.mad-iconfield-cell i,
.mad-iconfield-cell svg { width: 18px; height: 18px; }

.mad-iconfield-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 16px;
  color: var(--mad-text-muted, var(--mad-muted-fg));
  text-align: center;
}
.mad-iconfield-empty i,
.mad-iconfield-empty svg { width: 28px; height: 28px; opacity: 0.5; }
.mad-iconfield-empty p { margin: 0; font-size: 0.875rem; }
.mad-iconfield-empty small { font-size: 0.75rem; opacity: 0.7; font-family: var(--mad-font-mono, monospace); }
.mad-iconfield-loading svg { animation: mad-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mad-iconfield-loading svg { animation: none; } }

/* Footer */
.mad-iconfield-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle, var(--mad-bg));
  font-size: 0.75rem;
  color: var(--mad-text-muted, var(--mad-muted-fg));
}
.mad-iconfield-stats { display: inline-flex; align-items: baseline; gap: 4px; }
.mad-iconfield-stats-extra { opacity: 0.7; font-size: 0.6875rem; }
.mad-iconfield-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mad-danger);
  font: inherit;
  font-size: 0.75rem;
  padding: 4px 6px;
  border-radius: 4px;
}
.mad-iconfield-clear-all:hover { background: var(--mad-danger-subtle, rgba(220,38,38,0.1)); }
.mad-iconfield-clear-all i,
.mad-iconfield-clear-all svg { width: 13px; height: 13px; }

/* Date range picker (v2) — trigger, popup, presets, calendars */
.mad-drp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--mad-input-height, 38px);
  padding: 0 10px;
  border: 1px solid var(--mad-border-strong);
  border-radius: var(--mad-radius);
  background: var(--mad-input-bg, var(--mad-bg));
  /* Sem fallback: sem input-color/-weight/-italic vira `unset` e herda, como antes. */
  color: var(--mad-input-color);
  font-weight: var(--mad-input-weight);
  font-style: var(--mad-input-style);
  cursor: pointer;
  transition: border-color var(--mad-t), box-shadow var(--mad-t);
  position: relative;
  user-select: none;
}
.mad-drp-trigger:hover { border-color: var(--mad-border-hover, var(--mad-primary)); }
.mad-drp-trigger--open {
  border-color: var(--mad-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-primary) 12%, transparent);
}
.mad-drp-trigger--empty .mad-drp-display { color: var(--mad-text-muted); }
.mad-drp-display {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--mad-text);
  line-height: 1;
}
.mad-drp-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  padding: 0;
  color: var(--mad-text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--mad-t), color var(--mad-t);
  flex-shrink: 0;
}
.mad-drp-clear:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-danger, #ef4444);
}

/* Popup */
.mad-drp-popup {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 50;
  display: flex;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: 12px;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,.18), 0 8px 20px -8px rgba(0,0,0,.1);
  overflow: hidden;
}
.mad-drp-popup--left  { left: 0; }
.mad-drp-popup--right { right: 0; }
.mad-drp-popup--center { left: 50%; transform: translateX(-50%); }

/* Transitions */
.mad-drp-enter { transition: opacity 150ms ease, transform 150ms ease; }
.mad-drp-enter-start { opacity: 0; transform: translateY(-4px); }
.mad-drp-enter-end { opacity: 1; transform: translateY(0); }
.mad-drp-leave { transition: opacity 100ms ease, transform 100ms ease; }
.mad-drp-leave-start { opacity: 1; transform: translateY(0); }
.mad-drp-leave-end { opacity: 0; transform: translateY(-4px); }
.mad-drp-popup--center .mad-drp-enter-start { transform: translateX(-50%) translateY(-4px); }
.mad-drp-popup--center .mad-drp-enter-end   { transform: translateX(-50%) translateY(0); }
.mad-drp-popup--center .mad-drp-leave-start { transform: translateX(-50%) translateY(0); }
.mad-drp-popup--center .mad-drp-leave-end   { transform: translateX(-50%) translateY(-4px); }

/* Presets sidebar */
.mad-drp-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--mad-border);
  min-width: 150px;
  max-width: 170px;
}
.mad-drp-preset {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--mad-text);
  border: none;
  background: none;
  border-radius: var(--mad-radius);
  cursor: pointer;
  transition: background var(--mad-t), color var(--mad-t);
  white-space: nowrap;
  line-height: 1.3;
}
.mad-drp-preset:hover {
  background: var(--mad-bg-subtle, var(--mad-bg-muted));
  color: var(--mad-primary-ink, var(--mad-primary));
}
.mad-drp-preset--active {
  background: color-mix(in srgb, var(--mad-primary) 10%, transparent);
  color: var(--mad-primary-ink, var(--mad-primary));
  font-weight: 500;
}

/* Datas digitadas (Início / Fim / Aplicar) em cima dos calendários. */
.mad-drp-main { display: flex; flex-direction: column; min-width: 0; }
.mad-drp-typed {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px;
  padding: 12px 16px 0;
}
.mad-drp-typed-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mad-text-muted); }
.mad-drp-typed-input { width: 128px; font-variant-numeric: tabular-nums; }
.mad-drp-typed-error { flex-basis: 100%; margin: 0; font-size: var(--mad-text-xs); color: var(--mad-danger-text, var(--mad-danger)); }

/* Calendars container */
.mad-drp-calendars {
  display: flex;
  gap: 8px;
  padding: 16px;
}
.mad-drp-cal {
  width: 260px;
}

/* Calendar navigation */
.mad-drp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.mad-drp-month-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mad-text);
  user-select: none;
}
.mad-drp-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  padding: 0;
  color: var(--mad-text-muted);
  cursor: pointer;
  border-radius: var(--mad-radius);
  transition: background var(--mad-t), color var(--mad-t);
}
.mad-drp-nav-btn:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
}

/* Weekdays header */
.mad-drp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}
.mad-drp-weekdays span {
  font-size: 11px;
  font-weight: 500;
  color: var(--mad-text-muted);
  padding: 4px 0;
  user-select: none;
}

/* Days grid */
.mad-drp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.mad-drp-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  max-height: 36px;
  font-size: 13px;
  color: var(--mad-text);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
  transition: background 80ms ease, color 80ms ease;
  position: relative;
}
.mad-drp-day:hover:not(:disabled):not(.mad-drp-day--other) {
  background: var(--mad-bg-muted);
}

/* Day states */
.mad-drp-day--other {
  color: var(--mad-text-subtle);
  opacity: 0.3;
  pointer-events: none;
}
.mad-drp-day--today {
  font-weight: 700;
  color: var(--mad-primary-ink, var(--mad-primary));
}
.mad-drp-day--today::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mad-primary);
}
.mad-drp-day--disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: not-allowed;
}

/* Range highlighting */
.mad-drp-day--in-range {
  background: color-mix(in srgb, var(--mad-primary) 10%, transparent);
  color: var(--mad-text);
  border-radius: 0;
}
.mad-drp-day--start {
  background: var(--mad-primary);
  color: #fff;
  border-radius: 9999px 0 0 9999px;
}
.mad-drp-day--end {
  background: var(--mad-primary);
  color: #fff;
  border-radius: 0 9999px 9999px 0;
}
.mad-drp-day--start.mad-drp-day--end {
  border-radius: 9999px;
}
.mad-drp-day--start::after,
.mad-drp-day--end::after,
.mad-drp-day--selected::after {
  display: none;
}
.mad-drp-day--start:hover,
.mad-drp-day--end:hover,
.mad-drp-day--selected:hover {
  background: var(--mad-primary);
  filter: brightness(1.1);
}

/* Single-date picker — selected day pill (compartilha .mad-drp-day base) */
.mad-drp-day--selected {
  background: var(--mad-primary);
  color: #fff;
  border-radius: 9999px;
  font-weight: 600;
}

/* Single-date picker — footer (Hoje / Limpar / Aplicar) */
.mad-dp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle, transparent);
}
.mad-dp-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-text);
  border: 1px solid var(--mad-border);
  background: var(--mad-bg);
  border-radius: var(--mad-radius);
  cursor: pointer;
  transition: background var(--mad-t), border-color var(--mad-t), color var(--mad-t);
}
.mad-dp-footer-btn:hover {
  background: var(--mad-bg-muted);
  border-color: var(--mad-border-hover, var(--mad-primary));
}
.mad-dp-footer-btn--primary {
  color: #fff;
  background: var(--mad-primary);
  border-color: var(--mad-primary);
}
.mad-dp-footer-btn--primary:hover {
  background: var(--mad-primary);
  filter: brightness(1.05);
}
.mad-dp-footer-btn--danger:hover {
  color: var(--mad-danger, #ef4444);
  border-color: var(--mad-danger, #ef4444);
}

/* Single-date picker — time selector (datetime mode) */
.mad-dp-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--mad-border);
  font-size: 13px;
}
.mad-dp-time-label {
  color: var(--mad-text-muted);
  font-size: 12px;
  margin-right: 4px;
}
.mad-dp-time-input {
  width: 48px;
  height: 30px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--mad-border);
  background: var(--mad-bg);
  color: var(--mad-text);
  border-radius: var(--mad-radius);
  padding: 0 6px;
}
.mad-dp-time-input:focus {
  outline: none;
  border-color: var(--mad-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-primary) 12%, transparent);
}
.mad-dp-time-sep {
  font-weight: 700;
  color: var(--mad-text-muted);
}

/* Single-date popup — empilha calendar + time + footer verticalmente */
.mad-drp-popup--single {
  flex-direction: column;
}
.mad-drp-popup--single .mad-drp-calendars {
  padding: 12px;
}
.mad-drp-popup--single .mad-drp-cal {
  width: 252px;
}

/* Mobile — bottom sheet */
@media (max-width: 768px) {
  .mad-drp-popup {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mad-drp-popup::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--mad-border);
    border-radius: 4px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  .mad-drp-presets {
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    border-right: none;
    border-bottom: 1px solid var(--mad-border);
    padding: 8px 12px;
    gap: 6px;
    min-width: 0;
    max-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mad-drp-preset {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--mad-border);
    font-size: 12px;
  }
  .mad-drp-preset--active {
    border-color: var(--mad-primary);
  }
  .mad-drp-calendars {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 20px;
  }
  .mad-drp-typed { padding: 10px 16px 0; }
  .mad-drp-typed-field { flex: 1 1 120px; }
  .mad-drp-typed-input { width: 100%; font-size: 16px; } /* 16px: o iOS não dá zoom no foco */
  .mad-drp-cal {
    width: 100%;
  }
  .mad-drp-day {
    max-height: 42px;
    font-size: 14px;
  }

  /* Mobile transitions (slide up) */
  .mad-drp-enter-start { opacity: 0; transform: translateY(100%) !important; }
  .mad-drp-enter-end   { opacity: 1; transform: translateY(0) !important; }
  .mad-drp-leave-start { opacity: 1; transform: translateY(0) !important; }
  .mad-drp-leave-end   { opacity: 0; transform: translateY(100%) !important; }
  .mad-drp-enter { transition: opacity 200ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1) !important; }
  .mad-drp-leave { transition: opacity 150ms ease, transform 200ms ease !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   44. COMPONENTE — SEARCH FIELD
   ═══════════════════════════════════════════════════════════════════ */

.mad-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.mad-search-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--mad-text-subtle);
  pointer-events: none;
  flex-shrink: 0;
}
.mad-search-input { padding-left: 32px !important; padding-right: 32px !important; }
.mad-search-input::-webkit-search-cancel-button,
.mad-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.mad-search-clear {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mad-text-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: var(--mad-radius-sm);
  transition: color var(--mad-t);
}
.mad-search-clear:hover { color: var(--mad-text); }


/* ═══════════════════════════════════════════════════════════════════
   45. COMPONENTE — RANGE SLIDER
   ═══════════════════════════════════════════════════════════════════ */

.mad-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--mad-bg-muted);
  border-radius: var(--mad-radius-full);
  outline: none;
  cursor: pointer;
  border: 1.5px solid var(--mad-border);
}
.mad-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mad-primary);
  cursor: pointer;
  border: 2px solid var(--mad-bg);
  box-shadow: 0 0 0 2px var(--mad-primary);
  transition: box-shadow var(--mad-t);
}
.mad-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mad-primary);
  cursor: pointer;
  border: 2px solid var(--mad-bg);
  box-shadow: 0 0 0 2px var(--mad-primary);
}
.mad-range:focus-visible { outline: 2px solid var(--mad-primary); outline-offset: 3px; }
.mad-range:disabled { opacity: .5; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════
   46. COMPONENTE — COLOR PICKER
   ═══════════════════════════════════════════════════════════════════ */

.mad-color-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--mad-border-strong);
  border-radius: var(--mad-radius);
  padding: 6px 12px;
  background: var(--mad-bg);
  cursor: pointer;
  transition: border-color var(--mad-t);
  width: 100%;
}
.mad-color-wrap:hover { border-color: var(--mad-border-strong); }

.mad-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--mad-radius-sm);
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
}
.mad-color-hex {
  font-size: var(--mad-text-sm);
  font-family: var(--mad-font-mono);
  color: var(--mad-text);
  flex: 1;
}
.mad-color-input {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   47. COMPONENTE — FILE UPLOAD
   ═══════════════════════════════════════════════════════════════════ */

.mad-file-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--mad-border);
  border-radius: var(--mad-radius-md);
  padding: 24px 16px;
  background: var(--mad-bg-subtle);
  cursor: pointer;
  transition: border-color var(--mad-t), background var(--mad-t);
  text-align: center;
}
.mad-file-wrap:hover {
  border-color: var(--mad-border-strong);
  background: var(--mad-bg-muted);
}
.mad-file-over {
  border-color: var(--mad-primary) !important;
  background: color-mix(in srgb, var(--mad-primary) 5%, transparent) !important;
}
.mad-file-error { border-color: var(--mad-danger) !important; }

.mad-file-input { display: none; }

.mad-file-wrap .mad-file-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  cursor: pointer;
}
.mad-file-text { font-size: var(--mad-text-sm); color: var(--mad-text-muted); }
.mad-file-text strong { color: var(--mad-primary-ink, var(--mad-primary)); }
.mad-file-selected { color: var(--mad-text); font-weight: 600; }
/* O cinza mais fraco dava 2,5:1 no claro e 3,4:1 no escuro (fw#322). */
.mad-file-hint { font-size: var(--mad-text-xs); color: var(--mad-text-muted); }

/* Campo de arquivo no celular (fw#495): "Toque para escolher um arquivo" no
   lugar de "arraste aqui" e o botão "Tirar foto" (câmera de trás). Padrão no
   tema ERP (data-camera="auto"); `camera` liga nos outros. Tela estreita ou
   toque (tablet): o arrastar não existe ali. */
.mad-file-camera,
.mad-file-camera-row,
.mad-file-text-touch { display: none; }
@media (max-width: 639.98px), (pointer: coarse) {
  :is([data-camera="on"], .mad-layout-erp [data-camera="auto"]) .mad-file-camera { display: inline-flex; align-items: center; gap: 6px; }
  :is([data-camera="on"], .mad-layout-erp [data-camera="auto"]) .mad-file-camera-row { display: flex; justify-content: center; padding: 0 12px 14px; }
  :is([data-camera="on"], .mad-layout-erp [data-camera="auto"]) .mad-file-text-touch { display: inline; }
  :is([data-camera="on"], .mad-layout-erp [data-camera="auto"]) :is(.mad-file-text, .mad-file-text-drop) { display: none; }
  :is([data-camera="on"], .mad-layout-erp [data-camera="auto"]) .mad-file-wrap:has(> .mad-file-camera) { flex-direction: column; gap: 10px; }
}

/* File field — card preview (arquivo selecionado) */
.mad-file-card {
  width: 100%;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  background: var(--mad-bg);
  overflow: hidden;
}
.mad-file-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--mad-bg-muted);
  cursor: pointer;
  transition: opacity .15s;
}
.mad-file-card-thumb:hover { opacity: .85; }
.mad-file-card-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}
.mad-file-card-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 4px;
}
.mad-file-card-icon svg { width: 36px; height: 36px; color: var(--mad-text-muted); }
.mad-file-card-icon span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--mad-text-muted); letter-spacing: .5px; }
.mad-file-card-body {
  padding: 10px 12px;
  border-top: 1px solid var(--mad-border);
}
.mad-file-card-name {
  display: block;
  font-size: var(--mad-text-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mad-file-card-size { font-size: var(--mad-text-xs); color: var(--mad-text-muted); }
.mad-file-card-toolbar {
  display: flex;
  border-top: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle);
}
.mad-file-card-toolbar button,
.mad-file-card-toolbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  border: none;
  background: none;
  color: var(--mad-text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.mad-file-card-toolbar button:hover,
.mad-file-card-toolbar a:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
}
.mad-file-card-toolbar button + button,
.mad-file-card-toolbar button + a,
.mad-file-card-toolbar a + button {
  border-left: 1px solid var(--mad-border);
}
.mad-file-card-toolbar svg { width: 13px; height: 13px; }
.mad-file-card-toolbar-danger { color: var(--mad-danger) !important; }
.mad-file-card-toolbar-danger:hover { background: color-mix(in srgb, var(--mad-danger) 8%, transparent) !important; }

/* ═══════════════════════════════════════════════════════
   PAGE LAYOUT (page-container / page-header / page-content)
   ═══════════════════════════════════════════════════════ */

.mad-page-container {
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 20px 24px 16px;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(100vh - 200px);
}

/* Header */
.mad-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  width: 100%;
  padding-bottom: var(--mad-page-header-py, 16px);
  margin-bottom: var(--mad-page-header-mb, 20px);
  border-bottom: 1px solid var(--mad-border);
}
.mad-page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.mad-page-header-left > div:last-child { min-width: 0; }
/* Ícone do cabeçalho: --mad-page-header-icon-display (tema → "Alturas e
   densidade" → "Mostrar ícone do cabeçalho da página"; `none` oculta o ícone
   em todas as telas). Sem declaração no framework, como as alturas: o fallback
   é o display de sempre. O ícone é leve — sem círculo nem fundo, na cor do
   texto secundário — e o traço divisor ao lado não aparece mais. Os layouts
   (stripe, dock…) não redeclaram o display do ícone. */
.mad-page-header-icon {
  width: var(--mad-page-header-icon, 24px);
  height: var(--mad-page-header-icon, 24px);
  display: var(--mad-page-header-icon-display, flex);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mad-text-muted);
  font-size: 18px;
}
.mad-page-header-vsep {
  display: none;
  flex-shrink: 0;
  width: 1px;
  height: calc(var(--mad-page-header-icon, 24px) - 8px);
  background: var(--mad-border);
}
.mad-page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--mad-text-muted);
  margin-bottom: 2px;
  font-weight: 400;
  line-height: 1.4;
}
.mad-page-breadcrumb svg {
  width: 5px;
  height: 8px;
  margin: 0 2px;
  color: var(--mad-text-subtle);
}
.mad-page-title {
  font-size: var(--mad-page-title-size, 20px);
  font-weight: 600;
  color: var(--mad-text);
  letter-spacing: -0.015em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
/* <mad-page-header subtitle="…">: a frase que diz o que a tela resolve. */
.mad-page-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mad-text-muted);
}
.mad-page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
.mad-page-header-actions > actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: inherit;
  max-width: 100%;
}
.mad-page-header-sep {
  display: none; /* separator is now border-bottom on .mad-page-header */
}

/* Content */
.mad-page-content {}
.mad-page-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mad-page-body {}
/* Faixa de indicadores e grades empilhadas no corpo da página não ficam
   coladas: o bloco de baixo ganha em cima o mesmo espaço dos cartões. Margem em
   fluxo de bloco de propósito — junta-se com um margin-bottom posto à mão no
   bloco de cima (não dobra) e não alcança grade dentro de seção ou formulário. */
.mad-page-body > :is(.mad-kpi-strip, .mad-form-grid) + :is(.mad-kpi-strip, .mad-form-grid) {
  margin-top: var(--mad-dash-card-gap, var(--mad-s4));
}

/* ─────────────────────────────────────────────────────────
   DASHBOARD LAYOUT — gap por padrão
   .mad-dashboard  : stack vertical; espaça linhas/seções sem
                     margin-bottom manual em cada uma.
   .mad-stat-grid  : grid de metric-cards; responsivo por
                     padrão (auto-fit) OU nº fixo de colunas via
                     --mad-stat-grid-cols. Gap já embutido.
   Ambos aceitam override por página no style inline do wrapper
   (--mad-dash-gap / --mad-dash-card-gap / --mad-stat-grid-*).
   ───────────────────────────────────────────────────────── */
.mad-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--mad-dash-gap, 24px);
  min-width: 0;
}
.mad-stat-grid {
  display: grid;
  grid-template-columns: repeat(
    var(--mad-stat-grid-cols, auto-fit),
    minmax(min(var(--mad-stat-grid-min, 220px), 100%), 1fr)
  );
  gap: var(--mad-dash-card-gap, 16px);
  min-width: 0;
}
/* Empilha os cards no mobile mesmo com colunas fixas. */
@media (max-width: 640px) {
  .mad-stat-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   PAGE LAYOUT — Variant: STRIPE
   Classe no body: .mad-layout-stripe
   Visual: barra accent fina no topo do container, sem borda
   lateral, ícone inline (sem caixa), separador vertical
   escondido, breadcrumb sutil, visual limpo arejado.
   Inspiração: Stripe, Linear, Vercel dashboards.
   ───────────────────────────────────────────────────────── */

.mad-layout-stripe .mad-page-container {
  background: var(--mad-bg, #fff);
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.mad-layout-stripe .mad-page-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--mad-accent, var(--mad-primary, #18181b)),
    color-mix(in srgb, var(--mad-accent, var(--mad-primary, #18181b)) 60%, #6366f1));
  z-index: 1;
}
.mad-layout-stripe .mad-page-header {
  padding: var(--mad-page-header-py, 20px) 28px var(--mad-page-header-py, 16px);
  margin-bottom: 0;
  border-bottom: 1px solid var(--mad-border, #e5e7eb);
}
.mad-layout-stripe .mad-page-header-icon {
  width: var(--mad-page-header-icon, 38px);
  height: var(--mad-page-header-icon, 38px);
  border-radius: 8px;
  border: none;
  background: color-mix(in srgb, var(--mad-accent, var(--mad-primary, #18181b)) 10%, transparent);
  color: var(--mad-accent, var(--mad-primary, #18181b));
}
.mad-layout-stripe .mad-page-header-icon svg,
.mad-layout-stripe .mad-page-header-icon i {
  width: 18px !important;
  height: 18px !important;
}
.mad-layout-stripe .mad-page-header-vsep {
  display: none;
}
.mad-layout-stripe .mad-page-breadcrumb {
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-text-muted, #52525b);
  letter-spacing: .01em;
}
.mad-layout-stripe .mad-page-title {
  font-size: var(--mad-page-title-size, 20px);
  font-weight: 700;
  letter-spacing: -.03em;
}
.mad-layout-stripe .mad-page-header-actions .mad-btn {
  border-radius: 8px;
}
.mad-layout-stripe .mad-page-header-sep {
  display: none;
}
.mad-layout-stripe .mad-page-content {
  padding: 24px 28px 20px;
}

/* ─────────────────────────────────────────────────────────
   PAGE LAYOUT — Variant: DOCK
   Classe no body: .mad-layout-dock
   Visual: header compacto como "dock" flutuante com backdrop
   blur dentro do card de conteúdo. Ícone redondo accent.
   Header incrustado no topo do content (sem separação).
   Estilo macOS / app nativo.
   ───────────────────────────────────────────────────────── */

.mad-layout-dock .mad-page-container {
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02);
  padding: 12px;
  min-height: calc(100vh - 200px);
}
.mad-layout-dock .mad-page-header {
  background: var(--mad-bg-muted, #f4f4f5);
  border: none;
  border-radius: 10px;
  padding: var(--mad-page-header-py, 12px) 18px;
  margin-bottom: var(--mad-page-header-mb, 16px);
  gap: 12px;
}
.mad-layout-dock .mad-page-header-left {
  gap: 10px;
}
.mad-layout-dock .mad-page-header-icon {
  width: var(--mad-page-header-icon, 34px);
  height: var(--mad-page-header-icon, 34px);
  border-radius: 50%;
  border: none;
  background: var(--mad-accent, var(--mad-primary, #18181b));
  color: #fff;
}
.mad-layout-dock .mad-page-header-icon svg,
.mad-layout-dock .mad-page-header-icon i {
  width: 15px !important;
  height: 15px !important;
}
.mad-layout-dock .mad-page-header-vsep {
  display: none;
}
.mad-layout-dock .mad-page-breadcrumb {
  font-size: 11px;
  font-weight: 500;
  color: var(--mad-text-muted, #52525b); /* subtle dava 2,3–2,6:1 no claro (fw#295) */
}
.mad-layout-dock .mad-page-title {
  font-size: var(--mad-page-title-size, 16px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.mad-layout-dock .mad-page-header-actions .mad-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--mad-radius-full, 9999px);
}
.mad-layout-dock .mad-page-header-sep {
  display: none;
}
.mad-layout-dock .mad-page-content {
  padding: 4px 8px 8px;
}

/* ─────────────────────────────────────────────────────────
   PAGE LAYOUT — Variant: GLASS
   Classe no body: .mad-layout-glass
   Visual: glassmorphism — header translúcido com backdrop-blur,
   sombras suaves com glow, bordas rgba, ícone com anel
   accent brilhante. Fundo do container com noise sutil.
   ───────────────────────────────────────────────────────── */

.mad-layout-glass .mad-page-container {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 100%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.8);
  padding: 0;
  overflow: hidden;
}
.mad-layout-glass .mad-page-header {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--mad-page-header-py, 18px) 26px var(--mad-page-header-py, 16px);
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mad-layout-glass .mad-page-header-icon {
  width: var(--mad-page-header-icon, 40px);
  height: var(--mad-page-header-icon, 40px);
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 30%, transparent);
  background: color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 8%, white);
  color: var(--mad-accent, var(--mad-primary, #18181b));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 8%, transparent);
}
.mad-layout-glass .mad-page-header-vsep {
  /* O padrão não tem mais o divisor; glass e inset mantêm o seu. */
  display: var(--mad-page-header-icon-display, block);
  height: calc(var(--mad-page-header-icon, 40px) - 8px);
  background: rgba(0,0,0,.08);
}
.mad-layout-glass .mad-page-breadcrumb {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mad-text-muted, #52525b);
}
.mad-layout-glass .mad-page-title {
  font-size: var(--mad-page-title-size, 19px);
  font-weight: 700;
  letter-spacing: -.025em;
}
.mad-layout-glass .mad-page-header-actions .mad-btn {
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mad-layout-glass .mad-page-header-actions .mad-btn-outline {
  background: rgba(255,255,255,.5);
  border-color: rgba(0,0,0,.1);
}
.mad-layout-glass .mad-page-header-actions .mad-btn-outline:hover {
  background: rgba(255,255,255,.8);
}
.mad-layout-glass .mad-page-header-sep {
  display: none;
}
.mad-layout-glass .mad-page-content {
  padding: 22px 26px 20px;
}

/* ─────────────────────────────────────────────────────────
   PAGE LAYOUT — Variant: BORDER
   Classe no body: .mad-layout-border
   Visual: borda accent grossa vertical à esquerda do container.
   Interior limpo e minimalista — ícone inline colorido sem caixa,
   sem separador vertical, sem sombra. Estilo Notion callout.
   ───────────────────────────────────────────────────────── */

.mad-layout-border .mad-page-container {
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-left: 4px solid var(--mad-accent, var(--mad-primary, #18181b));
  border-radius: 4px 10px 10px 4px;
  box-shadow: none;
  padding: 0;
}
.mad-layout-border .mad-page-header {
  padding: var(--mad-page-header-py, 18px) 24px var(--mad-page-header-py, 14px);
  margin-bottom: 0;
  border-bottom: 1px solid var(--mad-border, #e5e7eb);
}
.mad-layout-border .mad-page-header-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--mad-accent, var(--mad-primary, #18181b));
}
.mad-layout-border .mad-page-header-icon svg,
.mad-layout-border .mad-page-header-icon i {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.2px;
}
.mad-layout-border .mad-page-header-vsep {
  display: none;
}
.mad-layout-border .mad-page-breadcrumb {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mad-text-muted, #52525b); /* subtle dava 2,3–2,6:1 no claro (fw#295) */
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mad-layout-border .mad-page-title {
  font-size: var(--mad-page-title-size, 18px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.mad-layout-border .mad-page-header-actions .mad-btn {
  border-radius: 6px;
}
.mad-layout-border .mad-page-header-sep {
  display: none;
}
.mad-layout-border .mad-page-content {
  padding: 20px 24px 18px;
}

/* ─────────────────────────────────────────────────────────
   PAGE LAYOUT — Variant: INSET
   Classe no body: .mad-layout-inset
   Visual: header com tint accent suave (wash de cor),
   content recuado com sombra inset dando profundidade.
   Ícone branco sobre fundo accent sólido. Header "elevado"
   acima do content — efeito de duas camadas.
   ───────────────────────────────────────────────────────── */

.mad-layout-inset .mad-page-container {
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 0;
  overflow: hidden;
}
.mad-layout-inset .mad-page-header {
  background:
    color-mix(in srgb, var(--mad-accent, var(--mad-primary, #18181b)) 5%, white);
  padding: var(--mad-page-header-py, 18px) 26px var(--mad-page-header-py, 16px);
  margin-bottom: 0;
  border-bottom: 1px solid
    color-mix(in srgb, var(--mad-accent, var(--mad-primary, #18181b)) 12%, transparent);
}
.mad-layout-inset .mad-page-header-icon {
  width: var(--mad-page-header-icon, 40px);
  height: var(--mad-page-header-icon, 40px);
  border-radius: 10px;
  border: none;
  background: var(--mad-accent, var(--mad-primary, #18181b));
  color: #fff;
}
.mad-layout-inset .mad-page-header-vsep {
  display: var(--mad-page-header-icon-display, block);
  height: calc(var(--mad-page-header-icon, 40px) - 8px);
  background: color-mix(in srgb, var(--mad-accent, var(--mad-primary, #18181b)) 15%, transparent);
}
.mad-layout-inset .mad-page-breadcrumb {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--mad-accent, var(--mad-primary, #18181b)) 50%, #52525b);
}
.mad-layout-inset .mad-page-title {
  font-size: var(--mad-page-title-size, 19px);
  font-weight: 700;
  letter-spacing: -.025em;
}
.mad-layout-inset .mad-page-header-actions .mad-btn-primary {
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 30%, transparent);
}
.mad-layout-inset .mad-page-header-actions .mad-btn-outline {
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 20%, transparent);
  color: var(--mad-text, #18181b);
}
.mad-layout-inset .mad-page-header-actions .mad-btn-outline:hover {
  background: color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 8%, transparent);
}
.mad-layout-inset .mad-page-header-sep {
  display: none;
}
.mad-layout-inset .mad-page-content {
  padding: 22px 26px 20px;
  background: var(--mad-bg-subtle, #fafafa);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.04);
}

/* ─────────────────────────────────────────────────────────
   PAGE LAYOUT — Variant: FLOAT
   Classe no body: .mad-layout-float
   Visual: header e body em cards separados ("islands"),
   ícone com fundo accent/gradiente, breadcrumb inline com
   separador dot, espaçamento generoso entre blocos.
   ───────────────────────────────────────────────────────── */

.mad-layout-float .mad-page-container {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mad-layout-float .mad-page-header {
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.02);
  padding: var(--mad-page-header-py, 16px) 22px;
  margin-bottom: 0;
  border-bottom-color: var(--mad-border, #e5e7eb);
}
.mad-layout-float .mad-page-header-icon {
  width: var(--mad-page-header-icon, 42px);
  height: var(--mad-page-header-icon, 42px);
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 90%, white),
    color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 70%, black));
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 25%, transparent);
}
.mad-layout-float .mad-page-header-vsep {
  display: none;
}
.mad-layout-float .mad-page-breadcrumb {
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-text-muted, #52525b); /* subtle dava 2,3–2,6:1 no claro (fw#295) */
  gap: 4px;
  margin-bottom: 3px;
}
.mad-layout-float .mad-page-title {
  font-size: var(--mad-page-title-size, 19px);
  font-weight: 700;
  letter-spacing: -.03em;
}
.mad-layout-float .mad-page-header-actions .mad-btn {
  border-radius: 8px;
}
.mad-layout-float .mad-page-header-sep {
  display: none;
}
.mad-layout-float .mad-page-content {
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.02);
  padding: 22px 24px 18px;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   DATAGRID VARIANTS — Overrides do mad-dg-* por layout variant.
   Cada variação ajusta toolbar, header, rows, footer e cards
   para harmonizar com o page layout correspondente.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Grid: STRIPE ─────────────────────────────────────── */
.mad-layout-stripe .mad-dg-wrap,
.mad-layout-stripe .mad-dt,
.mad-layout-stripe .mad-dt-empty {
  border: none;
  border-radius: 0;
  overflow: visible;
}
.mad-layout-stripe .mad-dg-toolbar {
  background: transparent;
  border-bottom: 1px solid var(--mad-border);
  padding: var(--mad-dg-toolbar-py, 10px) 0;
}
.mad-layout-stripe .mad-dg-th,
.mad-layout-stripe .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, transparent);
  border-bottom: var(--mad-dg-head-border-width, 2px) solid var(--mad-dg-head-border-color, var(--mad-border));
  text-transform: none;
  font-size: var(--mad-dg-head-font-size, 0.8rem);
  letter-spacing: 0;
  color: var(--mad-dg-head-color, var(--mad-text-muted));
}
.mad-layout-stripe .mad-dg-head,
.mad-layout-stripe .mad-dt > thead {
  background: transparent;
}
.mad-layout-stripe .mad-dg-row-even,
.mad-layout-stripe .mad-dt > tbody > tr { background: var(--mad-dg-row-even-bg, transparent); }
.mad-layout-stripe .mad-dg-row-odd,
.mad-layout-stripe .mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, transparent); }
.mad-layout-stripe .mad-dg-row:hover td,
.mad-layout-stripe .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td {
  background: var(--mad-dg-row-hover-bg, color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 4%, transparent));
}
.mad-layout-stripe .mad-dg-cell,
.mad-layout-stripe .mad-dt > tbody > tr > td {
  border-bottom: var(--mad-dg-row-border-width, 1px) solid var(--mad-dg-row-border-color, var(--mad-border));
}
.mad-layout-stripe .mad-dg-footer {
  background: transparent;
  border-top: 1px solid var(--mad-border);
  padding: 10px 0;
}
.mad-layout-stripe .mad-dg-card {
  border-radius: 8px;
  border-color: var(--mad-border);
}

/* ── Grid: DOCK ───────────────────────────────────────── */
.mad-layout-dock .mad-dg-wrap,
.mad-layout-dock .mad-dt,
.mad-layout-dock .mad-dt-empty {
  border: none;
  border-radius: 0;
}
.mad-layout-dock .mad-dg-toolbar {
  background: var(--mad-bg-muted);
  border-bottom: none;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: var(--mad-dg-toolbar-py, 8px) 12px;
}
.mad-layout-dock .mad-dg-search {
  border-radius: var(--mad-radius-full);
  height: 28px;
  font-size: 0.8rem;
}
.mad-layout-dock .mad-dg-th,
.mad-layout-dock .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, transparent);
  border-bottom: var(--mad-dg-head-border-width, 1px) solid var(--mad-dg-head-border-color, var(--mad-border));
  font-size: var(--mad-dg-head-font-size, 0.75rem);
  padding: 6px 10px;
}
.mad-layout-dock .mad-dg-head,
.mad-layout-dock .mad-dt > thead {
  background: transparent;
}
.mad-layout-dock .mad-dg-cell,
.mad-layout-dock .mad-dt > tbody > tr > td {
  font-size: 0.82rem;
  padding: 8px 10px;
}
.mad-layout-dock .mad-dg-row-even,
.mad-layout-dock .mad-dt > tbody > tr { background: var(--mad-dg-row-even-bg, transparent); }
.mad-layout-dock .mad-dg-row-odd,
.mad-layout-dock .mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, transparent); }
.mad-layout-dock .mad-dg-row:hover td,
.mad-layout-dock .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td {
  background: var(--mad-dg-row-hover-bg, var(--mad-bg-muted));
}
.mad-layout-dock .mad-dg-footer {
  background: transparent;
  border-top: 1px solid var(--mad-border);
  padding: 8px 4px;
  font-size: 0.8rem;
}
.mad-layout-dock .mad-dg-card {
  border-radius: 10px;
}

/* ── Grid: GLASS ──────────────────────────────────────── */
.mad-layout-glass .mad-dg-wrap,
.mad-layout-glass .mad-dt,
.mad-layout-glass .mad-dt-empty {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.mad-layout-glass .mad-dg-toolbar {
  background: rgba(255,255,255,.3);
  border-bottom-color: rgba(0,0,0,.06);
}
.mad-layout-glass .mad-dg-th,
.mad-layout-glass .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, rgba(255,255,255,.25));
  border-bottom: var(--mad-dg-head-border-width, 1px) solid var(--mad-dg-head-border-color, rgba(0,0,0,.08));
}
.mad-layout-glass .mad-dg-head,
.mad-layout-glass .mad-dt > thead {
  background: transparent;
}
.mad-layout-glass .mad-dg-row-even,
.mad-layout-glass .mad-dt > tbody > tr { background: var(--mad-dg-row-even-bg, transparent); }
.mad-layout-glass .mad-dg-row-odd,
.mad-layout-glass .mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, rgba(255,255,255,.2)); }
.mad-layout-glass .mad-dg-row:hover td,
.mad-layout-glass .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td {
  background: var(--mad-dg-row-hover-bg, rgba(255,255,255,.35));
}
.mad-layout-glass .mad-dg-footer {
  background: rgba(255,255,255,.25);
  border-top-color: rgba(0,0,0,.06);
}
.mad-layout-glass .mad-dg-card {
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(0,0,0,.06);
  border-radius: 12px;
}
.mad-layout-glass .mad-dg-card:hover {
  background: rgba(255,255,255,.7);
}

/* ── Grid: BORDER ─────────────────────────────────────── */
.mad-layout-border .mad-dg-wrap,
.mad-layout-border .mad-dt,
.mad-layout-border .mad-dt-empty {
  border: none;
  border-radius: 0;
}
.mad-layout-border .mad-dg-toolbar {
  background: transparent;
  border-bottom: 1px solid var(--mad-border);
  padding: var(--mad-dg-toolbar-py, 8px) 0;
}
.mad-layout-border .mad-dg-th,
.mad-layout-border .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, transparent);
  text-transform: uppercase;
  font-size: var(--mad-dg-head-font-size, 0.72rem);
  letter-spacing: .05em;
  font-weight: var(--mad-dg-head-font-weight, 700);
  color: var(--mad-dg-head-color, var(--mad-text-subtle));
  border-bottom: var(--mad-dg-head-border-width, 2px) solid var(--mad-dg-head-border-color, var(--mad-border));
}
.mad-layout-border .mad-dg-head,
.mad-layout-border .mad-dt > thead {
  background: transparent;
}
.mad-layout-border .mad-dg-row-even,
.mad-layout-border .mad-dt > tbody > tr { background: var(--mad-dg-row-even-bg, transparent); }
.mad-layout-border .mad-dg-row-odd,
.mad-layout-border .mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, transparent); }
.mad-layout-border .mad-dg-row:hover td,
.mad-layout-border .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td {
  background: var(--mad-dg-row-hover-bg, color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 3%, transparent));
}
.mad-layout-border .mad-dg-cell,
.mad-layout-border .mad-dt > tbody > tr > td {
  border-bottom: var(--mad-dg-row-border-width, 1px) solid var(--mad-dg-row-border-color, var(--mad-border));
}
.mad-layout-border .mad-dg-footer {
  background: transparent;
  border-top: 1px solid var(--mad-border);
  padding: 10px 0;
}
.mad-layout-border .mad-dg-card {
  border-left: 3px solid var(--mad-accent, var(--mad-primary));
  border-radius: 2px 8px 8px 2px;
}

/* ── Grid: INSET ──────────────────────────────────────── */
.mad-layout-inset .mad-dg-wrap,
.mad-layout-inset .mad-dt,
.mad-layout-inset .mad-dt-empty {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
}
.mad-layout-inset .mad-dg-toolbar {
  background: var(--mad-bg);
  border-bottom: 1px solid var(--mad-border);
  padding: var(--mad-dg-toolbar-py, 10px) 14px;
}
.mad-layout-inset .mad-dg-th,
.mad-layout-inset .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, var(--mad-bg));
  border-bottom: var(--mad-dg-head-border-width, 2px) solid
    var(--mad-dg-head-border-color, color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 15%, var(--mad-border)));
}
.mad-layout-inset .mad-dg-head,
.mad-layout-inset .mad-dt > thead {
  background: var(--mad-bg);
}
.mad-layout-inset .mad-dg-footer {
  background: var(--mad-bg);
  border-top: 1px solid var(--mad-border);
}
.mad-layout-inset .mad-dg-card {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ── Grid: FLOAT ──────────────────────────────────────── */
.mad-layout-float .mad-dg-wrap,
.mad-layout-float .mad-dt,
.mad-layout-float .mad-dt-empty {
  border: none;
  border-radius: 0;
}
.mad-layout-float .mad-dg-toolbar {
  background: transparent;
  border-bottom: 1px solid var(--mad-border);
  padding: var(--mad-dg-toolbar-py, 10px) 0;
}
.mad-layout-float .mad-dg-th,
.mad-layout-float .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, transparent);
  border-bottom: var(--mad-dg-head-border-width, 1px) solid var(--mad-dg-head-border-color, var(--mad-border));
}
.mad-layout-float .mad-dg-head,
.mad-layout-float .mad-dt > thead {
  background: transparent;
}
.mad-layout-float .mad-dg-row-even,
.mad-layout-float .mad-dt > tbody > tr { background: var(--mad-dg-row-even-bg, transparent); }
.mad-layout-float .mad-dg-row-odd,
.mad-layout-float .mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, var(--mad-bg-subtle)); }
.mad-layout-float .mad-dg-footer {
  background: transparent;
  border-top: 1px solid var(--mad-border);
  padding: 10px 0;
}
.mad-layout-float .mad-dg-card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.02);
}

/* ── Grid Dark: all variants ──────────────────────────── */
.mad-dark .mad-dg-wrap,
.mad-dark .mad-dt,
.mad-dark .mad-dt-empty {
  background: var(--mad-bg);
  border-color: var(--mad-border);
}
.mad-dark .mad-dg-toolbar {
  background: var(--mad-bg);
  border-bottom-color: var(--mad-border);
}
.mad-dark .mad-dg-th,
.mad-dark .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, var(--mad-bg-subtle));
  color: var(--mad-dg-head-color, var(--mad-text-muted));
  border-bottom-color: var(--mad-dg-head-border-color, var(--mad-border));
}
.mad-dark .mad-dg-head,
.mad-dark .mad-dt > thead {
  background: var(--mad-bg-subtle);
}
.mad-dark .mad-dg-row-even,
.mad-dark .mad-dt > tbody > tr { background: var(--mad-dg-row-even-bg, var(--mad-bg)); }
.mad-dark .mad-dg-row-odd,
.mad-dark .mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, transparent); }
.mad-dark .mad-dg-row:hover td,
.mad-dark .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td {
  background: var(--mad-dg-row-hover-bg, var(--mad-bg-subtle));
}
.mad-dark .mad-dg-cell,
.mad-dark .mad-dt > tbody > tr > td {
  color: var(--mad-dg-body-color, var(--mad-text));
  border-bottom-color: var(--mad-dg-row-border-color, var(--mad-border));
}
.mad-dark .mad-dg-footer {
  background: var(--mad-bg);
  border-top-color: var(--mad-border);
}
.mad-dark .mad-dg-info {
  color: var(--mad-text-muted);
}
.mad-dark .mad-dg-per-page-label {
  color: var(--mad-text-subtle);
}
.mad-dark .mad-dg-action-btn {
  color: var(--mad-text-subtle);
}
.mad-dark .mad-dg-action-btn:hover {
  color: var(--mad-text);
  background: var(--mad-bg-muted);
}
.mad-dark .mad-dg-dropdown {
  background: var(--mad-bg-muted);
  border-color: var(--mad-border);
}
.mad-dark .mad-dg-dropdown-item {
  color: var(--mad-text);
}
.mad-dark .mad-dg-dropdown-item:hover {
  background: var(--mad-bg-subtle);
}
.mad-dark .mad-dg-export-menu {
  background: var(--mad-bg-muted);
  border-color: var(--mad-border);
}
.mad-dark .mad-dg-export-item {
  color: var(--mad-text);
}
.mad-dark .mad-dg-export-item:hover {
  background: var(--mad-bg-subtle);
}
.mad-dark .mad-dg-search {
  background-color: var(--mad-bg);
  border-color: var(--mad-border);
  color: var(--mad-text);
}
.mad-dark .mad-dg-card {
  background: var(--mad-bg-subtle);
  border-color: var(--mad-border);
}
.mad-dark .mad-dg-card:hover {
  border-color: var(--mad-border-strong);
}
.mad-dark .mad-dg-card-field-label {
  color: var(--mad-text-subtle);
}
.mad-dark .mad-dg-card-field-value {
  color: var(--mad-text);
}
.mad-dark .mad-dg-card-title {
  color: var(--mad-text);
}
.mad-dark .mad-dg-card-footer {
  border-top-color: var(--mad-border);
}
.mad-dark .mad-dg-card-action {
  color: var(--mad-text-muted);
}
.mad-dark .mad-dg-card-action:hover {
  color: var(--mad-text);
  background: var(--mad-bg-muted);
}
.mad-dark .mad-dg-view-btn {
  color: var(--mad-text-subtle);
  border-color: var(--mad-border);
}
.mad-dark .mad-dg-view-btn:hover {
  color: var(--mad-text);
  background: var(--mad-bg-muted);
}
.mad-dark .mad-dg-view-btn.active {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
}
.mad-dark .mad-dg-filter-popover {
  background: var(--mad-bg-muted);
  border-color: var(--mad-border);
}
.mad-dark .mad-dg-filter-input {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  color: var(--mad-text);
}
.mad-dark .mad-dg-filter-range .mad-input {
  background: var(--mad-bg);
  border-color: var(--mad-border);
  color: var(--mad-text);
}
.mad-dark .mad-dg-col-chooser-panel {
  background: var(--mad-bg-muted);
  border-color: var(--mad-border);
}
.mad-dark .mad-select-sm {
  background-color: var(--mad-bg);
  border-color: var(--mad-border);
  color: var(--mad-text);
}

/* Dark + variant-specific grid overrides */
.mad-dark.mad-layout-stripe .mad-dg-toolbar,
.mad-dark .mad-layout-stripe .mad-dg-toolbar,
.mad-dark.mad-layout-stripe .mad-dg-footer,
.mad-dark .mad-layout-stripe .mad-dg-footer,
.mad-dark.mad-layout-stripe .mad-dg-th,
.mad-dark.mad-layout-stripe .mad-dt > thead > tr > th,
.mad-dark .mad-layout-stripe .mad-dg-th,
.mad-dark .mad-layout-stripe .mad-dt > thead > tr > th,
.mad-dark.mad-layout-stripe .mad-dg-head,
.mad-dark.mad-layout-stripe .mad-dt > thead,
.mad-dark .mad-layout-stripe .mad-dg-head,
.mad-dark .mad-layout-stripe .mad-dt > thead,
.mad-dark.mad-layout-border .mad-dg-toolbar,
.mad-dark .mad-layout-border .mad-dg-toolbar,
.mad-dark.mad-layout-border .mad-dg-footer,
.mad-dark .mad-layout-border .mad-dg-footer,
.mad-dark.mad-layout-border .mad-dg-th,
.mad-dark.mad-layout-border .mad-dt > thead > tr > th,
.mad-dark .mad-layout-border .mad-dg-th,
.mad-dark .mad-layout-border .mad-dt > thead > tr > th,
.mad-dark.mad-layout-border .mad-dg-head,
.mad-dark.mad-layout-border .mad-dt > thead,
.mad-dark .mad-layout-border .mad-dg-head,
.mad-dark .mad-layout-border .mad-dt > thead,
.mad-dark.mad-layout-float .mad-dg-toolbar,
.mad-dark .mad-layout-float .mad-dg-toolbar,
.mad-dark.mad-layout-float .mad-dg-footer,
.mad-dark .mad-layout-float .mad-dg-footer,
.mad-dark.mad-layout-float .mad-dg-th,
.mad-dark.mad-layout-float .mad-dt > thead > tr > th,
.mad-dark .mad-layout-float .mad-dg-th,
.mad-dark .mad-layout-float .mad-dt > thead > tr > th,
.mad-dark.mad-layout-float .mad-dg-head,
.mad-dark.mad-layout-float .mad-dt > thead,
.mad-dark .mad-layout-float .mad-dg-head,
.mad-dark .mad-layout-float .mad-dt > thead,
.mad-dark.mad-layout-dock .mad-dg-th,
.mad-dark.mad-layout-dock .mad-dt > thead > tr > th,
.mad-dark .mad-layout-dock .mad-dg-th,
.mad-dark .mad-layout-dock .mad-dt > thead > tr > th,
.mad-dark.mad-layout-dock .mad-dg-head,
.mad-dark.mad-layout-dock .mad-dt > thead,
.mad-dark .mad-layout-dock .mad-dg-head,
.mad-dark .mad-layout-dock .mad-dt > thead,
.mad-dark.mad-layout-dock .mad-dg-footer,
.mad-dark .mad-layout-dock .mad-dg-footer {
  background: transparent;
}
/* Cabeçalho da regra acima, sozinho: o fundo escolhido no tema (Tabelas,
   builder#469) vale também neste layout escuro. Sem a var, o de antes. */
.mad-dark.mad-layout-stripe .mad-dg-th,
.mad-dark.mad-layout-stripe .mad-dt > thead > tr > th,
.mad-dark .mad-layout-stripe .mad-dg-th,
.mad-dark .mad-layout-stripe .mad-dt > thead > tr > th,
.mad-dark.mad-layout-border .mad-dg-th,
.mad-dark.mad-layout-border .mad-dt > thead > tr > th,
.mad-dark .mad-layout-border .mad-dg-th,
.mad-dark .mad-layout-border .mad-dt > thead > tr > th,
.mad-dark.mad-layout-float .mad-dg-th,
.mad-dark.mad-layout-float .mad-dt > thead > tr > th,
.mad-dark .mad-layout-float .mad-dg-th,
.mad-dark .mad-layout-float .mad-dt > thead > tr > th,
.mad-dark.mad-layout-dock .mad-dg-th,
.mad-dark.mad-layout-dock .mad-dt > thead > tr > th,
.mad-dark .mad-layout-dock .mad-dg-th,
.mad-dark .mad-layout-dock .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, transparent);
}
.mad-dark.mad-layout-dock .mad-dg-toolbar,
.mad-dark .mad-layout-dock .mad-dg-toolbar {
  background: var(--mad-bg-muted);
}
.mad-dark.mad-layout-glass .mad-dg-wrap,
.mad-dark.mad-layout-glass .mad-dt,
.mad-dark.mad-layout-glass .mad-dt-empty,
.mad-dark .mad-layout-glass .mad-dg-wrap,
.mad-dark .mad-layout-glass .mad-dt,
.mad-dark .mad-layout-glass .mad-dt-empty {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}
.mad-dark.mad-layout-glass .mad-dg-toolbar,
.mad-dark .mad-layout-glass .mad-dg-toolbar {
  background: rgba(255,255,255,.03);
  border-bottom-color: rgba(255,255,255,.06);
}
.mad-dark.mad-layout-glass .mad-dg-th,
.mad-dark.mad-layout-glass .mad-dt > thead > tr > th,
.mad-dark .mad-layout-glass .mad-dg-th,
.mad-dark .mad-layout-glass .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, rgba(255,255,255,.04));
  border-bottom-color: var(--mad-dg-head-border-color, rgba(255,255,255,.08));
}
.mad-dark.mad-layout-glass .mad-dg-head,
.mad-dark.mad-layout-glass .mad-dt > thead,
.mad-dark .mad-layout-glass .mad-dg-head,
.mad-dark .mad-layout-glass .mad-dt > thead {
  background: transparent;
}
.mad-dark.mad-layout-glass .mad-dg-row-odd,
.mad-dark.mad-layout-glass .mad-dt-zebra > tbody > tr:nth-child(even),
.mad-dark .mad-layout-glass .mad-dg-row-odd,
.mad-dark .mad-layout-glass .mad-dt-zebra > tbody > tr:nth-child(even) {
  background: var(--mad-dg-row-odd-bg, rgba(255,255,255,.02));
}
.mad-dark.mad-layout-glass .mad-dg-row:hover td,
.mad-dark.mad-layout-glass .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td,
.mad-dark .mad-layout-glass .mad-dg-row:hover td,
.mad-dark .mad-layout-glass .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td {
  background: var(--mad-dg-row-hover-bg, rgba(255,255,255,.06));
}
.mad-dark.mad-layout-glass .mad-dg-footer,
.mad-dark .mad-layout-glass .mad-dg-footer {
  background: rgba(255,255,255,.03);
  border-top-color: rgba(255,255,255,.06);
}
.mad-dark.mad-layout-glass .mad-dg-card,
.mad-dark .mad-layout-glass .mad-dg-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}
.mad-dark.mad-layout-glass .mad-dg-card:hover,
.mad-dark .mad-layout-glass .mad-dg-card:hover {
  background: rgba(255,255,255,.08);
}
.mad-dark.mad-layout-inset .mad-dg-th,
.mad-dark.mad-layout-inset .mad-dt > thead > tr > th,
.mad-dark .mad-layout-inset .mad-dg-th,
.mad-dark .mad-layout-inset .mad-dt > thead > tr > th,
.mad-dark.mad-layout-inset .mad-dg-head,
.mad-dark.mad-layout-inset .mad-dt > thead,
.mad-dark .mad-layout-inset .mad-dg-head,
.mad-dark .mad-layout-inset .mad-dt > thead,
.mad-dark.mad-layout-inset .mad-dg-toolbar,
.mad-dark .mad-layout-inset .mad-dg-toolbar,
.mad-dark.mad-layout-inset .mad-dg-footer,
.mad-dark .mad-layout-inset .mad-dg-footer {
  background: var(--mad-bg-subtle);
}
/* Cabeçalho da regra acima, sozinho: o fundo escolhido no tema (Tabelas,
   builder#469) vale também neste layout escuro. Sem a var, o de antes. */
.mad-dark.mad-layout-inset .mad-dg-th,
.mad-dark.mad-layout-inset .mad-dt > thead > tr > th,
.mad-dark .mad-layout-inset .mad-dg-th,
.mad-dark .mad-layout-inset .mad-dt > thead > tr > th {
  background: var(--mad-dg-head-bg, var(--mad-bg-subtle));
}
.mad-dark.mad-layout-border .mad-dg-card,
.mad-dark .mad-layout-border .mad-dg-card {
  border-left-color: var(--mad-accent, var(--mad-primary));
}

/* ═══════════════════════════════════════════════════════
   DRAWER (slide-over panel)
   ═══════════════════════════════════════════════════════ */
.mad-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--mad-z-overlay, 1010);
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.mad-drawer-overlay.mad-drawer-left {
  justify-content: flex-start;
}
.mad-drawer {
  background: var(--mad-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100vw;
  overflow: hidden;
  box-shadow: -24px 0 48px -12px rgba(16, 24, 40, .18);
}
.mad-drawer-left .mad-drawer {
  box-shadow: 24px 0 48px -12px rgba(16, 24, 40, .18);
}
.mad-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: var(--mad-drawer-header-py, 18px) 24px;
  border-bottom: 1px solid var(--mad-border);
  flex-shrink: 0;
}
.mad-drawer-title {
  font-weight: 650;
  font-size: var(--mad-page-title-size, 18px);
  letter-spacing: -0.01em;
  color: var(--mad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mad-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
/* Ações do formulário aberto na cortina: uma linha separa os botões dos campos. */
.mad-drawer .mad-form-actions {
  border-top: 1px solid var(--mad-border);
  padding-top: 16px;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   SPINNER FIELD (TSpinner)
   ═══════════════════════════════════════════════════════════════════ */
.mad-spinner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--mad-border);
  background: var(--mad-bg);
  color: var(--mad-text);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mad-spinner-btn:first-child {
  border-radius: var(--mad-radius-md) 0 0 var(--mad-radius-md);
  border-right: none;
}
.mad-spinner-btn:last-child {
  border-radius: 0 var(--mad-radius-md) var(--mad-radius-md) 0;
  border-left: none;
}
.mad-spinner-btn:hover:not(:disabled) {
  background: var(--mad-primary);
  color: #fff;
  border-color: var(--mad-primary);
}
.mad-spinner-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mad-spinner-btn svg {
  width: 14px;
  height: 14px;
}
.mad-input-group .mad-input[type="number"] {
  -moz-appearance: textfield;
}
/* Cantos retos e valor centralizado são do SPINNER (input entre os botões − e +).
   Escrita para todo `type=number` em grupo, a regra pegava também o
   <mad-number-field>: cantos retos e `align` ignorado (a especificidade vencia
   o .mad-text-right). */
.mad-input-group .mad-spinner-btn + .mad-input[type="number"] {
  border-radius: 0;
  flex: 1;
  text-align: center;
}
.mad-input-group .mad-input[type="number"]::-webkit-inner-spin-button,
.mad-input-group .mad-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKBOX GROUP (TCheckGroup)
   ═══════════════════════════════════════════════════════════════════ */
.mad-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mad-checkbox-group-h {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 20px;
}
/* Quebra a cada N items (break-items) — só existe em layout horizontal */
.mad-checkbox-break { flex-basis: 100%; height: 0; }

/* Tamanhos (size="sm|lg") */
.mad-checkbox-group-sm .mad-checkbox-box { width: 14px; height: 14px; min-width: 14px; }
.mad-checkbox-group-sm .mad-checkbox:checked ~ .mad-checkbox-box::after { width: 8px; height: 4px; }
.mad-checkbox-group-sm .mad-checkbox-label { font-size: var(--mad-text-xs, 12px); }
.mad-checkbox-group-lg .mad-checkbox-box { width: 20px; height: 20px; min-width: 20px; }
.mad-checkbox-group-lg .mad-checkbox:checked ~ .mad-checkbox-box::after { width: 11px; height: 6px; }
.mad-checkbox-group-lg .mad-checkbox-label { font-size: var(--mad-text-md, 15px); }

/* Variante button (segmented) — as="button".
   A classe base .mad-checkbox-group CONTINUA no elemento (contrato do op
   reload_checkbox_group em mad.js e da coleta de valores em mad-livewire.js),
   então isto é modificador, não substituto. Estado ativo via :has(input:checked)
   e não por classe server-side: checkbox alterna no cliente e uma classe
   renderizada no servidor ficaria stale. */
.mad-checkbox-group.mad-checkbox-group-btn {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--mad-border-strong);
  border-radius: var(--mad-radius);
  overflow: hidden;
  background: var(--mad-bg);
}
.mad-checkbox-group.mad-checkbox-group-btn.mad-checkbox-group-h { flex-direction: row; }
.mad-checkbox-group-btn .mad-checkbox-box { display: none; }
.mad-checkbox-group-btn .mad-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 14px;
  white-space: nowrap;
  line-height: 1.2;
  transition: background var(--mad-t), color var(--mad-t);
}
.mad-checkbox-group-btn .mad-checkbox-label {
  font-size: var(--mad-text-sm);
  color: var(--mad-text-muted, var(--mad-text));
  line-height: inherit;
}
.mad-checkbox-group-btn.mad-checkbox-group-h .mad-checkbox-wrap + .mad-checkbox-wrap { border-left: 1px solid var(--mad-border); }
.mad-checkbox-group-btn:not(.mad-checkbox-group-h) .mad-checkbox-wrap + .mad-checkbox-wrap { border-top: 1px solid var(--mad-border); }
.mad-checkbox-group-btn .mad-checkbox-wrap:hover:not(:has(input:checked)):not(:has(input:disabled)) {
  background: var(--mad-bg-soft, rgba(0,0,0,0.03));
}
.mad-checkbox-group-btn .mad-checkbox-wrap:hover:not(:has(input:checked)):not(:has(input:disabled)) .mad-checkbox-label {
  color: var(--mad-text);
}
.mad-checkbox-group-btn .mad-checkbox-wrap:has(input:checked) { background: var(--mad-primary); }
.mad-checkbox-group-btn .mad-checkbox-wrap:has(input:checked) .mad-checkbox-label { color: #fff; }
.mad-checkbox-group-btn .mad-checkbox-wrap:has(input:focus-visible) { outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000))); outline-offset: 2px; }
.mad-checkbox-group-btn.mad-checkbox-group-sm .mad-checkbox-wrap { padding: 5px 10px; }
.mad-checkbox-group-btn.mad-checkbox-group-sm .mad-checkbox-label { font-size: var(--mad-text-xs, 12px); }
.mad-checkbox-group-btn.mad-checkbox-group-lg .mad-checkbox-wrap { padding: 11px 18px; }
.mad-checkbox-group-btn.mad-checkbox-group-lg .mad-checkbox-label { font-size: var(--mad-text-md, 15px); }

/* ═══════════════════════════════════════════════════════════════════
   CHECKLIST (seleção múltipla com busca)
   ═══════════════════════════════════════════════════════════════════ */
.mad-checklist {
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  overflow: hidden;
}

/* Toolbar */
.mad-checklist-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle);
}
.mad-checklist-search-wrap {
  position: relative; flex: 1;
}
.mad-checklist-search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--mad-text-muted); pointer-events: none;
}
.mad-checklist-search {
  width: 100%; border: 1px solid var(--mad-border); border-radius: var(--mad-radius-sm);
  padding: 5px 8px 5px 28px; font-size: 0.82rem; background: var(--mad-bg);
  outline: none;
}
.mad-checklist-search:focus { border-color: var(--mad-primary); }
.mad-checklist-counter {
  font-size: 0.75rem; color: var(--mad-text-muted); white-space: nowrap;
}
.mad-checklist-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm); background: transparent;
  color: var(--mad-text-muted); cursor: pointer; transition: all .15s;
  flex-shrink: 0;
}
.mad-checklist-filter-btn:hover { background: var(--mad-bg-subtle); color: var(--mad-text); }
.mad-checklist-filter-active {
  background: var(--mad-primary) !important; color: #fff !important;
  border-color: var(--mad-primary) !important;
}
.mad-checklist-select-all {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.8rem; white-space: nowrap; cursor: pointer; margin: 0;
}

/* Body (scroll) */
.mad-checklist-body { overflow-y: auto; }
/* Barra própria, sempre visível: a sobreposta do macOS some e a lista cortada
   parecia completa (fw#302 — perfis escondidos abaixo da dobra). */
/* A horizontal também (fw#365): sem altura ela ficava com 0 px e a coluna
   cortada à direita não dava sinal de que havia mais. */
.mad-checklist-body::-webkit-scrollbar { width: 8px; height: 8px; }
.mad-checklist-body::-webkit-scrollbar-track { background: transparent; }
.mad-checklist-body::-webkit-scrollbar-thumb { background: var(--mad-border-strong, var(--mad-border)); border-radius: 4px; }
.mad-checklist-body::-webkit-scrollbar-thumb:hover { background: var(--mad-text-muted); }

/* Table */
.mad-checklist-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.mad-checklist-table th,
.mad-checklist-table td {
  padding: 7px 12px; border-bottom: 1px solid var(--mad-border); text-align: left;
}
.mad-checklist-table th {
  background: var(--mad-bg-subtle); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--mad-text-muted);
  position: sticky; top: 0; z-index: 1;
}
.mad-checklist-table th.center, .mad-checklist-table td.center { text-align: center; }
.mad-checklist-table th.right,  .mad-checklist-table td.right  { text-align: right; }
.mad-checklist-table tbody tr { transition: background .1s; }
/* Listras contadas só entre as linhas À MOSTRA: a busca esconde a linha
   (.mad-checklist-out), não a tira do DOM — pela posição no DOM as listras
   saíam fora de ordem na lista filtrada. A 1ª linha visível é listrada, como
   sempre foi (o <template> do x-for é o 1º filho do tbody). `:where()` mantém
   o peso do seletor: o hover e a linha marcada continuam por cima. */
.mad-checklist-table tbody tr:nth-child(odd of :where(tr:not(.mad-checklist-out))) { background: var(--mad-bg-subtle); }
@supports not selector(:nth-child(1 of a)) {
  .mad-checklist-table tbody tr:nth-child(even) { background: var(--mad-bg-subtle); }
}
.mad-checklist-table tbody tr:hover { background: rgba(59, 130, 246, 0.04); }
.mad-checklist-table tbody tr.mad-checklist-checked { background: rgba(59, 130, 246, 0.06); }
.mad-checklist-table tbody tr.mad-checklist-checked:nth-child(odd of :where(tr:not(.mad-checklist-out))) { background: rgba(59, 130, 246, 0.09); }
@supports not selector(:nth-child(1 of a)) {
  .mad-checklist-table tbody tr.mad-checklist-checked:nth-child(even) { background: rgba(59, 130, 246, 0.09); }
}
.mad-checklist-table tbody tr:last-child td { border-bottom: none; }

/* Permissões por ação (cadastros de grupo, perfil e programa) em lista estreita
   (fw#365): a coluna de ações saía da tela a 390 px. A célula de ações leva a
   marca .mad-checklist-actions; com ela o checklist vira contêiner e, estreito,
   cada linha empilha — marca e colunas em cima, as ações embaixo. Checklist
   sem a marca não muda. */
.mad-checklist:has(.mad-checklist-actions) { container: mad-checklist / inline-size; }
@container mad-checklist (max-width: 560px) {
  .mad-checklist-table thead { display: none; }
  .mad-checklist-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--mad-border);
  }
  .mad-checklist-table tbody tr:last-child { border-bottom: none; }
  .mad-checklist-table tbody td { border-bottom: none; padding: 6px 8px; }
  .mad-checklist-table tbody td:first-child { flex: 0 0 auto; padding-left: 12px; }
  .mad-checklist-table tbody td:empty { display: none; }
  .mad-checklist-table tbody td:has(> .mad-checklist-actions) { flex: 1 0 100%; padding: 0 12px 8px 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-SEARCH / UNIQUE-SEARCH / MULTI-ENTRY (MAD Select)
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   NO-RESULTS block — "cadastrar novo" + "quick register" no dropdown
   do MAD Select
   ═══════════════════════════════════════════════════════════════════ */

/* Dentro do dropdown do MAD Select */
.mad-sel-dropdown .mad-ts-noresults {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.mad-sel-dropdown .mad-ts-noresults-msg {
  color: var(--mad-muted, #6b7280);
  font-size: 0.8125rem;
  padding: 4px 0 2px;
}
.mad-sel-dropdown .mad-ts-noresults-btn {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK FORM POPOVER — flutuante ancorado no combo, melhor UX que
   renderizar o form dentro do dropdown apertado
   ═══════════════════════════════════════════════════════════════════ */
.mad-quick-popover {
  position: fixed;
  z-index: var(--mad-z-quick, 10050); /* acima de modal/drawer */
  min-width: 320px;
  max-width: 480px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-radius: var(--mad-radius-lg, 10px);
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25),
              0 8px 24px -8px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: madQuickPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes madQuickPopIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mad-quick-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mad-border, #e5e7eb);
  background: var(--mad-bg-muted, #f4f4f5);
}
.mad-quick-popover-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--mad-text, #0f172a);
}
.mad-quick-popover-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: var(--mad-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.mad-quick-popover-close:hover {
  background: var(--mad-border, #e5e7eb);
  color: var(--mad-text, #0f172a);
}
.mad-quick-popover-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}
.mad-quick-popover-msg {
  font-size: 0.8125rem;
  color: var(--mad-muted, #6b7280);
  background: var(--mad-info-soft, #eff6ff);
  border-left: 3px solid var(--mad-info, #3b82f6);
  padding: 8px 12px;
  border-radius: 4px;
}
.mad-quick-popover-body .mad-noresults-quick-field,
.mad-quick-popover-body .mad-ts-noresults-quick-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mad-quick-popover-body .mad-noresults-quick-field > .mad-label,
.mad-quick-popover-body .mad-ts-noresults-quick-field > .mad-label {
  font-size: 0.8125rem;
  margin: 0;
  color: var(--mad-text, #0f172a);
  font-weight: 500;
}
.mad-quick-popover-body input.mad-input,
.mad-quick-popover-body select.mad-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.875rem;
}
/* Combo (MAD Select) dentro do quick-form: o dropdown é teleportado pro <body>
   e fica FORA do stacking context do popover. Quem resolve é o rebase de
   `--mad-z-float` em `body.mad-quick-popover-open` (bloco 1.1 dos tokens).
   Existia aqui uma regra `body.mad-quick-popover-open .mad-sel-dropdown
   { z-index: 10060 }` que NUNCA funcionou: o dropStyle do MAD Select cravava
   `z-index: 9999` INLINE, e inline vence CSS sem !important. */
.mad-quick-popover-body .mad-sel { width: 100%; }

.mad-quick-popover-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--mad-border, #e5e7eb);
  background: var(--mad-bg-muted, #f4f4f5);
}
/* Mobile — full-screen */
@media (max-width: 600px) {
  .mad-quick-popover {
    position: fixed;
    inset: auto 8px 8px 8px;
    top: auto !important;
    left: auto !important;
    width: auto;
    max-width: none;
    transform: none !important;
    max-height: 90vh;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI FILE (TMultiFile)
   ═══════════════════════════════════════════════════════════════════ */
.mad-multi-file-wrap {
  border: 2px dashed var(--mad-border);
  border-radius: var(--mad-radius-md);
  background: var(--mad-bg);
  transition: border-color 0.2s, background 0.2s;
}
.mad-multi-file-wrap.mad-multi-file-over {
  border-color: var(--mad-primary);
  background: color-mix(in srgb, var(--mad-primary) 5%, transparent);
}
.mad-multi-file-input {
  display: none;
}
.mad-multi-file-wrap .mad-file-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--mad-muted);
  font-size: 0.9rem;
  gap: 4px;
  pointer-events: auto;
  cursor: pointer;
}
.mad-file-body strong {
  color: var(--mad-primary-ink, var(--mad-primary));
}
/* Multi-file — galeria de thumbnails */
.mad-multi-file-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--mad-border);
}
.mad-multi-file-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  background: var(--mad-bg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.mad-multi-file-card:hover {
  border-color: var(--mad-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mad-multi-file-card-img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}
.mad-multi-file-card-icon {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.mad-multi-file-card-icon svg { width: 28px; height: 28px; color: var(--mad-text-muted); }
.mad-multi-file-card-ext { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--mad-text-muted); letter-spacing: 0.5px; }
.mad-multi-file-card-info {
  padding: 6px 8px;
  border-top: 1px solid var(--mad-border);
}
.mad-multi-file-card-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mad-text);
}
.mad-multi-file-card-size {
  font-size: 10px;
  color: var(--mad-text-muted);
}
.mad-multi-file-card-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
}
.mad-multi-file-card-remove svg { width: 12px; height: 12px; }
.mad-multi-file-card:hover .mad-multi-file-card-remove { opacity: 1; }
.mad-multi-file-card-add {
  border-style: dashed;
  min-height: 120px;
}
.mad-multi-file-card-add:hover {
  border-color: var(--mad-primary);
  background: color-mix(in srgb, var(--mad-primary) 3%, transparent);
}

/* ── Modal de arquivos por linha (field-list type="files") — responsivo ── */
.mad-flm-modal { max-width: 880px; width: 92vw; }
.mad-flm-modal .mad-modal-body { padding: 16px; max-height: 66vh; overflow-y: auto; }
.mad-flm-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.mad-flm-gallery .mad-multi-file-card { min-width: 0; }   /* deixa o card encolher na grid */
@media (max-width: 480px) {
  /* full-bleed: zera o gutter do .mad-modal-overlay SÓ deste fluxo.
     :has() (navegadores modernos) + classe .mad-flm-overlay (fallback). */
  .mad-modal-overlay:has(.mad-flm-modal),
  .mad-flm-overlay { padding: 0; }
  /* width:100% (não 100vw) = largura do overlay já sem scrollbar → 0 overflow */
  .mad-flm-modal { width: 100%; max-width: 100%; border-radius: 0; max-height: 100vh; }
  .mad-flm-modal .mad-modal-body { padding: 10px; max-height: 80vh; }
  /* galeria cai pra 2 colunas */
  .mad-flm-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Legacy list classes (backward compat) */
.mad-multi-file-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  border-top: 1px solid var(--mad-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mad-multi-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm);
  font-size: 0.875rem;
}
.mad-multi-file-item svg {
  width: 16px;
  height: 16px;
  color: var(--mad-primary-ink, var(--mad-primary));
  flex-shrink: 0;
}
.mad-multi-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mad-multi-file-size {
  color: var(--mad-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   SEEK FIELD (TSeekButton)
   ═══════════════════════════════════════════════════════════════════ */
.mad-seek-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 38px;
  border: 1px solid var(--mad-border);
  border-left: none;
  background: var(--mad-bg);
  color: var(--mad-muted);
  cursor: pointer;
  border-radius: 0 var(--mad-radius-md) var(--mad-radius-md) 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.mad-seek-btn:hover:not(:disabled) {
  background: var(--mad-primary);
  color: #fff;
  border-color: var(--mad-primary);
}
.mad-seek-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mad-seek-btn svg {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   SORT LIST (TSortList)
   ═══════════════════════════════════════════════════════════════════ */
.mad-sort-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
}
.mad-sort-list-h {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.mad-sort-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm);
  font-size: 0.875rem;
  user-select: none;
}
.mad-sort-item.sortable-ghost {
  opacity: 0.4;
  background: color-mix(in srgb, var(--mad-primary) 10%, transparent);
}
.mad-sort-item.sortable-chosen {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.mad-sort-handle {
  cursor: grab;
  color: var(--mad-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mad-sort-handle:active {
  cursor: grabbing;
}
.mad-sort-handle svg {
  width: 16px;
  height: 16px;
}
.mad-sort-label {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   HTML EDITOR (TinyMCE 5 self-hosted)
   ═══════════════════════════════════════════════════════════════════ */
.mad-html-editor-wrap {
  border-radius: var(--mad-radius-md);
  overflow: hidden;
}
.mad-html-editor-wrap .tox-tinymce {
  border: 1px solid var(--mad-border) !important;
  border-radius: var(--mad-radius-md) !important;
  font-family: inherit !important;
}
.mad-html-editor-error .tox-tinymce {
  border-color: var(--mad-danger) !important;
}
.mad-html-editor-wrap .tox-editor-header {
  box-shadow: none !important;
  border-bottom: 1px solid var(--mad-border) !important;
}
.mad-html-editor-wrap .tox-statusbar {
  border-top: 1px solid var(--mad-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DATA GRID (MadDataGrid)
   ═══════════════════════════════════════════════════════════════════ */

/* Container geral */
.mad-dg-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg);
  /* overflow: hidden; */
}
/* Cantos: o wrap não corta os filhos (overflow visível, por causa dos menus
   e do cabeçalho fixo), então quem encosta na borda arredondada herda o raio.
   Sem isso o fundo quadrado da barra e do rodapé cobre a curva da borda e os
   quatro cantos ficam abertos. Especificidade zero: o raio de cada layout vence. */
:where(.mad-dg-wrap) > :where(.mad-dg-toolbar, .mad-dg-table-wrap):first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
:where(.mad-dg-wrap) > :where(.mad-dg-footer, .mad-dg-table-wrap:not(:has(~ .mad-dg-footer))) {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* ── Toolbar ──────────────────────────────────────────────────────── */
.mad-dg-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--mad-dg-toolbar-py, 10px) 14px;
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg);
  flex-wrap: wrap;
}
.mad-dg-search {
  max-width: 220px;
  height: 34px;
  font-size: var(--mad-text-sm);
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px 50%;
}
.mad-dg-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* ── Seleção de linhas (<mad-grid selectable>) ───────────────────── */
.mad-dg-selbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 14px;
  min-height: 40px;
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg);
  font-size: 12.5px;
  color: var(--mad-text-muted);
}
.mad-dg-selbar-active {
  background: color-mix(in srgb, var(--mad-primary) 7%, var(--mad-bg));
  color: var(--mad-text);
}
.mad-dg-selbar-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mad-dg-selbar-active .mad-dg-selbar-count { font-weight: 600; color: var(--mad-primary-ink, var(--mad-primary)); }
.mad-dg-selbar-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.mad-dg-bulk-btn:disabled { opacity: .5; cursor: not-allowed; }
.mad-dg-th-select,
/* <mad-grid reorder>: alça de arrastar na 1ª célula (madDataGrid._initReorder). */
.mad-dg-drag {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 18px; height: 18px;
  color: var(--mad-text-muted); cursor: grab; border-radius: 4px; touch-action: none;
}
.mad-dg-drag:hover { color: var(--mad-text); background: var(--mad-surface-2, rgba(0,0,0,.05)); }
.mad-dg-drag:active { cursor: grabbing; }
.mad-dg-drag-wrap { display: flex; align-items: center; gap: 6px; }
.mad-dg-drag-body { flex: 1 1 auto; min-width: 0; }
.mad-dg-table > tbody > tr.mad-dg-row-dragging > td { opacity: .55; }

.mad-dg-select-cell {
  width: 38px;
  min-width: 38px;
  padding-left: 12px !important;
  padding-right: 4px !important;
  text-align: center;
  vertical-align: middle;
}
/* Checkbox nativo: o tema do app estiliza todo `input` (appearance:none +
   padding), o que o transformava num retângulo vazio — mesmo reset do
   seletor de colunas (.mad-dg-col-chooser-check). */
.mad-dg-select {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  padding: 0 !important;
  margin: 0;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  display: inline-block !important;
  cursor: pointer;
  accent-color: var(--mad-primary);
  vertical-align: middle;
}
.mad-dg-select::before { display: none !important; }
.mad-dg-select:disabled { cursor: default; opacity: .4; }
.mad-dg-row.mad-dg-row-selected td {
  background: color-mix(in srgb, var(--mad-primary) 9%, transparent);
}
/* <mad-row-highlights>: destaque da linha (ou só da célula) por condição.
   Tom = fundo + barra de acento. O fundo é a cor do tom (--mad-danger…)
   misturada ao transparente (18%; 28% nos temas escuros, --mad-hl-tone-mix):
   lê nos dois temas e sobre a linha zebrada. Não use os *-subtle aqui: #fef2f2 sobre branco dá ~1,1:1 e a
   linha parecia sem destaque (só a barra aparecia; a célula, nada). A linha
   selecionada continua com a cor da seleção.
   A LINHA inteira tem a barra de acento e pinta mais leve (6%; 12% no escuro,
   --mad-hl-row-mix): uma lista com metade das linhas em atraso não vira um
   bloco rosa. A célula sozinha, sem barra, segue com o tom forte. */
.mad-dg-hl--danger  { --mad-dg-hl-bg: color-mix(in srgb, var(--mad-danger) var(--mad-hl-tone-mix, 18%), transparent);  --mad-dg-hl-accent: var(--mad-danger); }
.mad-dg-hl--warning { --mad-dg-hl-bg: color-mix(in srgb, var(--mad-warning) var(--mad-hl-tone-mix, 18%), transparent); --mad-dg-hl-accent: var(--mad-warning); }
.mad-dg-hl--success { --mad-dg-hl-bg: color-mix(in srgb, var(--mad-success) var(--mad-hl-tone-mix, 18%), transparent); --mad-dg-hl-accent: var(--mad-success); }
.mad-dg-hl--info    { --mad-dg-hl-bg: color-mix(in srgb, var(--mad-info) var(--mad-hl-tone-mix, 18%), transparent);    --mad-dg-hl-accent: var(--mad-info); }
.mad-dg-hl--color {
  --mad-dg-hl-bg: color-mix(in srgb, var(--mad-dg-hl-color, var(--mad-warning)) 18%, transparent);
  --mad-dg-hl-accent: var(--mad-dg-hl-color, var(--mad-warning));
}
tr.mad-dg-row.mad-dg-hl:not(.mad-dg-row-selected) > td,
tr.mad-dg-row.mad-dg-hl:not(.mad-dg-row-selected):hover > td {
  background: color-mix(in srgb, var(--mad-dg-hl-accent) var(--mad-hl-row-mix, 6%), transparent);
}
tr.mad-dg-row:not(.mad-dg-row-selected) > td.mad-dg-hl-cell,
tr.mad-dg-row:not(.mad-dg-row-selected):hover > td.mad-dg-hl-cell {
  background: var(--mad-dg-hl-bg);
}
tr.mad-dg-row.mad-dg-hl > td:first-child { box-shadow: inset 3px 0 0 var(--mad-dg-hl-accent); }
/* Cartão (celular) tem a barra como a linha: mesmo fundo leve. */
.mad-dg-card.mad-dg-hl {
  background: color-mix(in srgb, var(--mad-dg-hl-accent) var(--mad-hl-row-mix, 6%), var(--mad-bg));
  border-left: 3px solid var(--mad-dg-hl-accent);
}
.mad-dg-card-field.mad-dg-hl-cell {
  background: var(--mad-dg-hl-bg);
  border-radius: var(--mad-radius-sm, 4px);
  margin-inline: -4px;
  padding-inline: 4px;
}
/* <mad-grid row-click>: a mão só aparece onde o clique faz algo — linha/card
   com uma ação que não é de exclusão (o que o madDataGrid.onRowClick dispara). */
.mad-dg-wrap[data-row-click] tr.mad-dg-row:has(.mad-dg-actions > button:not(.mad-dg-action-danger):not(:disabled):not([aria-disabled="true"])),
.mad-dg-wrap[data-row-click] tr.mad-dg-row:has(.mad-dg-actions > button:not(.mad-dg-action-danger):not(:disabled):not([aria-disabled="true"])) + tr.mad-dg-row-detail,
.mad-dg-wrap[data-row-click] .mad-dg-card:has(.mad-dg-card-actions > button:not(.mad-dg-card-action-danger):not(:disabled):not([aria-disabled="true"])) {
  cursor: pointer;
}
.mad-dg-card { position: relative; }
.mad-dg-card-select {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--mad-radius-sm, 4px);
  background: color-mix(in srgb, var(--mad-bg) 85%, transparent);
}
.mad-dg-card:has(> .mad-dg-card-select):not(:has(> .mad-dg-card-image)) .mad-dg-card-titles {
  padding-left: 24px;
}
.mad-dg-card.mad-dg-card-selected {
  border-color: var(--mad-primary);
  box-shadow: 0 0 0 1px var(--mad-primary);
}

/* ── Export dropdown ──────────────────────────────────────────────── */
.mad-dg-export-wrap { position: relative; }
.mad-dg-export-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--mad-bg); border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  box-shadow: var(--mad-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
  padding: 4px; min-width: 130px;
}
.mad-dg-export-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; background: none; cursor: pointer;
  font-size: 13px; border-radius: var(--mad-radius-sm); color: var(--mad-text);
}
.mad-dg-export-item:hover { background: var(--mad-bg-subtle); }
/* Formato de exportacao sem permissao: inerte, mas ainda com a dica no hover
   (sem pointer-events:none, senao o title nunca apareceria). */
.mad-dg-export-item:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.mad-dg-export-item:disabled:hover { background: none; }

/* <mad-grid saved-views>: menu "Visões" da barra (MadGridSavedViews). */
.mad-dg-gv { position: relative; }
.mad-dg-gv-btn { gap: 6px; max-width: 220px; }
.mad-dg-gv-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-dg-gv-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--mad-bg); border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  box-shadow: var(--mad-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
  padding: 4px; width: 280px; max-width: calc(100vw - 24px);
  max-height: min(420px, 70vh); overflow-y: auto;
}
.mad-dg-gv-group {
  padding: 8px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mad-text-muted);
}
.mad-dg-gv-row { display: flex; align-items: center; border-radius: var(--mad-radius-sm); }
.mad-dg-gv-row:hover { background: var(--mad-bg-subtle); }
.mad-dg-gv-item {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; width: 100%;
  padding: 7px 10px; border: none; background: none; cursor: pointer; text-align: left;
  font-size: 13px; border-radius: var(--mad-radius-sm); color: var(--mad-text);
}
.mad-dg-gv-item:hover { background: var(--mad-bg-subtle); }
.mad-dg-gv-item svg, .mad-dg-gv-item i { width: 14px; height: 14px; flex: 0 0 auto; color: var(--mad-text-muted); }
.mad-dg-gv-item .is-default { color: var(--mad-warning, #d97706); fill: currentColor; }
.mad-dg-gv-row.is-current .mad-dg-gv-item, .mad-dg-gv-system.is-current { font-weight: 600; }
.mad-dg-gv-name-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-dg-gv-badge { font-size: 11px; color: var(--mad-text-muted); }
.mad-dg-gv-acts { display: flex; align-items: center; gap: 2px; padding-right: 4px; flex: 0 0 auto; }
.mad-dg-gv-acts button {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer;
  padding: 4px; border-radius: var(--mad-radius-sm); color: var(--mad-text-muted); font-size: 12px;
}
.mad-dg-gv-acts button svg, .mad-dg-gv-acts button i { width: 13px; height: 13px; }
.mad-dg-gv-acts button:hover { color: var(--mad-text); background: var(--mad-bg-muted, rgba(0,0,0,.05)); }
.mad-dg-gv-acts button.is-danger:hover, .mad-dg-gv-acts button.is-armed { color: var(--mad-danger, #dc2626); }
.mad-dg-gv-empty { padding: 6px 10px 8px; font-size: 12px; color: var(--mad-text-muted); }
.mad-dg-gv-rename { display: flex; gap: 6px; padding: 4px 6px; flex: 1 1 auto; }
.mad-dg-gv-rename input { flex: 1 1 auto; min-width: 0; }
.mad-dg-gv-new { border-top: 1px solid var(--mad-border); border-radius: 0; margin-top: 4px; padding-top: 9px; }
.mad-dg-gv-form { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--mad-border); margin-top: 4px; }
.mad-dg-gv-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mad-text-muted); }
.mad-dg-gv-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mad-text); cursor: pointer; }
.mad-dg-gv-err { font-size: 12px; color: var(--mad-danger, #dc2626); }
.mad-dg-gv-form-row { display: flex; justify-content: flex-end; gap: 6px; }

/* ── Autocomplete dropdown ───────────────────────────────────────── */
.mad-ac-dropdown {
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-radius: var(--mad-radius-md, 6px);
  box-shadow: var(--mad-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}
.mad-ac-item {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  border-radius: var(--mad-radius-sm, 4px);
  color: var(--mad-text, #333);
}
.mad-ac-item:hover,
.mad-ac-item.mad-ac-active {
  background: var(--mad-primary, #3b82f6);
  color: #fff;
}

.mad-dg-info {
  font-size: 0.78rem;
  color: var(--mad-text-muted);
  white-space: nowrap;
}

/* ── Barra de filtros ativos ─────────────────────────────────────── */
.mad-dg-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle);
}
.mad-dg-active-filters-label {
  font-size: 0.78rem;
  color: var(--mad-text-muted);
  white-space: nowrap;
}
.mad-dg-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  border-radius: 999px;
  /* Fallback no accent do tema (cor do projeto), não roxo fixo: os tokens
     --mad-primary-light/-muted não existem no kit e o chip saía violeta ao
     lado dos chips do filtro avançado. */
  background: var(--mad-primary-light, var(--mad-accent-subtle));
  color: var(--mad-primary, #6d28d9);
  font-size: 0.78rem;
  border: 1px solid var(--mad-primary-muted, var(--mad-accent-border));
}
.mad-dg-filter-pill strong {
  font-weight: 600;
}
.mad-dg-filter-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px;
  border-radius: 50%;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
}
.mad-dg-filter-pill-x:hover {
  opacity: 1;
  background: rgba(0,0,0,.08);
}
.mad-dg-clear-all {
  margin-left: 4px;
  font-size: 0.78rem;
  color: var(--mad-text-muted);
}
.mad-dg-clear-all:hover {
  color: var(--mad-danger, #dc2626);
}

/* ── Filtro avançado (<mad-custom-filters>) ──────────────────────────
   Botão "Filtros" na toolbar, chips na barra de filtros ativos e o popover
   (teleportado pro <body> — por isso os tokens locais são declarados em TODA
   raiz do componente: host, camada do popover e chips). A cor de destaque sai
   de --main-color (tema do projeto) via --mad-accent*; o modo escuro segue o
   .mad-dark do body, igual ao resto do runtime.
   ─────────────────────────────────────────────────────────────────── */
.mad-dg-cf,
.mad-dg-cf-chip,
.mad-dg-cf-chips-any {
  --cf-accent:        var(--mad-accent, var(--mad-primary));
  --cf-accent-subtle: var(--mad-accent-subtle, var(--mad-bg-muted));
  --cf-accent-border: var(--mad-accent-border, var(--mad-border-strong));
  --cf-accent-ring:   var(--mad-accent-ring, var(--mad-ring));
  --cf-accent-ink:    color-mix(in srgb, var(--mad-accent, var(--mad-primary)) 82%, var(--mad-text));
  --cf-accent-fg:     #fff;
  --cf-scrim:         rgba(24, 24, 27, .28);
  --cf-shadow:        0 18px 48px -12px rgba(24, 24, 27, .28), 0 0 0 1px rgba(24, 24, 27, .06);
}
/* Escuro: o --mad-accent cru (cor do projeto) some sobre o fundo quase preto —
   clareia na mão, como o --mad-accent-subtle do bloco de dark tokens. Os dois
   gatilhos do runtime: .mad-dark (kit) e html[data-theme="dark"] (tema Notch
   do app gerado). */
.mad-dark .mad-dg-cf,
.mad-dark .mad-dg-cf-chip,
.mad-dark .mad-dg-cf-chips-any,
.mad-dg-cf.mad-dark,
html[data-theme="dark"] .mad-dg-cf,
html[data-theme="dark"] .mad-dg-cf-chip,
html[data-theme="dark"] .mad-dg-cf-chips-any {
  --cf-accent:     color-mix(in srgb, var(--main-color, #fafafa) 70%, white);
  --cf-accent-ink: color-mix(in srgb, var(--main-color, #fafafa) 45%, white);
  --cf-accent-fg:  #0b0b0d;
  --cf-scrim:      rgba(0, 0, 0, .55);
  --cf-shadow:     0 18px 48px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Botão da toolbar */
.mad-dg-cf-host { position: relative; display: inline-flex; }
.mad-dg-cf-trigger {
  height: 30px;
  padding: 0 10px;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mad-text);
}
.mad-dg-cf-trigger svg { width: 14px; height: 14px; flex: none; }
.mad-dg-cf-trigger.is-active {
  background: var(--cf-accent-subtle);
  border-color: var(--cf-accent-border);
  color: var(--cf-accent-ink);
}
.mad-dg-cf-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--cf-accent-ring); }
.mad-dg-cf-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cf-accent);
  color: var(--cf-accent-fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mad-dg-cf-view-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chips na barra de filtros ativos */
.mad-dg-cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--cf-accent-border);
  border-radius: 999px;
  background: var(--cf-accent-subtle);
  color: var(--mad-text);
  font-size: 0.78rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--mad-t), box-shadow var(--mad-t);
}
.mad-dg-cf-chip:hover { border-color: var(--cf-accent); }
.mad-dg-cf-chip:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.mad-dg-cf-chip b { font-weight: 600; }
.mad-dg-cf-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-dg-cf-chip-op { color: var(--mad-text-muted); }
.mad-dg-cf-chip-x {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--mad-text-muted);
  cursor: pointer;
}
.mad-dg-cf-chip-x:hover { background: color-mix(in srgb, var(--mad-text) 10%, transparent); color: var(--mad-text); }
.mad-dg-cf-chips-any { font-weight: 600; color: var(--cf-accent-ink); }
.mad-dg-cf-dropped {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--mad-warning-text, var(--mad-warning));
}

/* Camada do popover (no <body>): só o popover e o scrim recebem clique */
.mad-dg-cf-layer {
  position: fixed;
  inset: 0;
  z-index: var(--mad-z-float, 9999);
  pointer-events: none;
}
html.mad-dg-cf-lock,
html.mad-dg-cf-lock body { overflow: hidden; }
.mad-dg-cf-scrim {
  position: absolute;
  inset: 0;
  background: var(--cf-scrim);
  pointer-events: auto;
  animation: mad-dg-cf-fade 180ms ease;
}
.mad-dg-cf-pop,
.mad-dg-cf-pop * { box-sizing: border-box; }
.mad-dg-cf-pop {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: min(700px, calc(100vw - 24px));
  max-height: 560px;
  pointer-events: auto;
  background: var(--mad-bg);
  color: var(--mad-text);
  border-radius: 12px;
  box-shadow: var(--cf-shadow);
  font-family: var(--mad-font);
  font-size: var(--mad-text-base, 14px);
  line-height: 1.45;
  text-align: left;
  animation: mad-dg-cf-pop-in 160ms cubic-bezier(.2, .8, .2, 1);
}
.mad-dg-cf-pop.is-sheet {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: mad-dg-cf-sheet-in 220ms cubic-bezier(.2, .8, .2, 1);
}
.mad-dg-cf-grab {
  display: none;
  width: 38px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 4px;
  background: var(--mad-border-strong);
  flex: none;
}
.mad-dg-cf-pop.is-sheet .mad-dg-cf-grab { display: block; }

/* Cabeçalho */
.mad-dg-cf-head {
  display: grid;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--mad-border);
  flex: none;
}
.mad-dg-cf-head-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mad-dg-cf-title { font-weight: 650; font-size: 14.5px; white-space: nowrap; }
.mad-dg-cf-view-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 1px 8px;
  border: 1px solid var(--mad-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--mad-text-muted);
}
.mad-dg-cf-view-tag svg { width: 12px; height: 12px; flex: none; }
.mad-dg-cf-view-tag-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-dg-cf-mod { color: var(--mad-warning); font-weight: 600; white-space: nowrap; }
.mad-dg-cf-icon-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--mad-radius);
  background: none;
  color: var(--mad-text-muted);
  cursor: pointer;
}
.mad-dg-cf-icon-btn:hover { background: var(--mad-bg-muted); color: var(--mad-text); }
.mad-dg-cf-icon-btn svg { width: 16px; height: 16px; }
.mad-dg-cf-close { margin-left: auto; }
.mad-dg-cf-match {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--mad-text-muted);
}
.mad-dg-cf-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--mad-border);
  border-radius: 8px;
  background: var(--mad-bg-muted);
}
.mad-dg-cf-seg button {
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--mad-text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.mad-dg-cf-seg button[aria-pressed="true"] {
  background: var(--mad-bg);
  color: var(--cf-accent-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--mad-border);
}

/* Condições */
.mad-dg-cf-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px 16px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.mad-dg-cf-row {
  display: grid;
  grid-template-columns: 44px minmax(150px, 1.15fr) minmax(130px, .95fr) minmax(170px, 1.35fr) 30px;
  align-items: start;
  gap: 8px;
  margin: -4px;
  padding: 4px;
  border-radius: var(--mad-radius-md);
  animation: mad-dg-cf-row-in 180ms ease;
}
.mad-dg-cf-row.is-flash { animation: mad-dg-cf-flash 900ms ease; }
.mad-dg-cf-conj {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--mad-radius);
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mad-text-subtle);
  cursor: pointer;
}
.mad-dg-cf-conj.is-toggle { background: var(--cf-accent-subtle); color: var(--cf-accent-ink); }
.mad-dg-cf-conj.is-toggle:hover { box-shadow: 0 0 0 1px var(--cf-accent-border); }
.mad-dg-cf-conj:disabled { cursor: default; opacity: 1; }
.mad-dg-cf-field,
.mad-dg-cf-input,
.mad-dg-cf-select {
  width: 100%;
  height: 32px;
  margin: 0;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  background: var(--mad-bg);
  color: var(--mad-text);
  font-family: inherit;
  font-size: 13px;
  line-height: normal;
  box-shadow: none;
  transition: border-color var(--mad-t), box-shadow var(--mad-t);
}
.mad-dg-cf-field {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  text-align: left;
  cursor: pointer;
}
.mad-dg-cf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-dg-cf-name.is-placeholder { color: var(--mad-text-subtle); }
.mad-dg-cf-caret { display: inline-flex; flex: none; color: var(--mad-text-subtle); }
.mad-dg-cf-caret svg { width: 13px; height: 13px; }
.mad-dg-cf-field:hover,
.mad-dg-cf-select:hover:not(:disabled) { border-color: var(--mad-border-strong); }
.mad-dg-cf-field[aria-expanded="true"],
.mad-dg-cf-field:focus-visible,
.mad-dg-cf-input:focus,
.mad-dg-cf-select:focus {
  outline: none;
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px var(--cf-accent-ring);
}
.mad-dg-cf-kind-slot { display: inline-flex; flex: none; }
.mad-dg-cf-kind-slot:empty { display: none; }
.mad-dg-cf-kind {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--mad-bg-muted);
  color: var(--mad-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.mad-dg-cf-kind svg { width: 12px; height: 12px; }
.mad-dg-cf-kind.is-rel { background: var(--cf-accent-subtle); color: var(--cf-accent-ink); }
.mad-dg-cf-select {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 28px 0 9px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.mad-dg-cf-select:disabled,
.mad-dg-cf-field:disabled { opacity: .55; cursor: not-allowed; }
.mad-dg-cf-input { padding: 0 9px; }
.mad-dg-cf-input::placeholder,
.mad-dg-cf-tag-input::placeholder { color: var(--mad-text-subtle); }
.mad-dg-cf-val,
.mad-dg-cf-val-col { display: grid; gap: 4px; min-width: 0; }
.mad-dg-cf-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
.mad-dg-cf-pair-sep { font-size: 12px; color: var(--mad-text-subtle); }
.mad-dg-cf-hint { padding-left: 2px; font-size: 11.5px; color: var(--mad-text-subtle); font-variant-numeric: tabular-nums; }
.mad-dg-cf-none {
  display: flex;
  align-items: center;
  height: 32px;
  padding-left: 2px;
  font-size: 12.5px;
  color: var(--mad-text-subtle);
}
.mad-dg-cf-bool {
  justify-self: start;
  display: inline-flex;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
}
.mad-dg-cf-bool button {
  margin: 0;
  padding: 0 16px;
  border: 0;
  background: var(--mad-bg);
  font: inherit;
  font-size: 13px;
  color: var(--mad-text-muted);
  cursor: pointer;
}
.mad-dg-cf-bool button + button { border-left: 1px solid var(--mad-border); }
.mad-dg-cf-bool button[aria-pressed="true"] { background: var(--cf-accent-subtle); color: var(--cf-accent-ink); font-weight: 600; }
.mad-dg-cf-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 32px;
  padding: 3px 4px;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  background: var(--mad-bg);
  cursor: text;
  transition: border-color var(--mad-t), box-shadow var(--mad-t);
}
.mad-dg-cf-tags.is-btn { position: relative; padding-right: 26px; cursor: pointer; }
.mad-dg-cf-tags.is-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--mad-text-subtle);
  border-bottom: 2px solid var(--mad-text-subtle);
  transform: translateY(-70%) rotate(45deg);
}
.mad-dg-cf-tags:focus-within,
.mad-dg-cf-tags.is-btn:focus-visible,
.mad-dg-cf-tags.is-btn[aria-expanded="true"] {
  outline: none;
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px var(--cf-accent-ring);
}
.mad-dg-cf-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  height: 23px;
  padding: 0 2px 0 7px;
  border: 1px solid var(--mad-border);
  border-radius: 4px;
  background: var(--mad-bg-muted);
  font-size: 12.5px;
}
.mad-dg-cf-tag-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-dg-cf-tag button {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--mad-text-subtle);
  cursor: pointer;
}
.mad-dg-cf-tag button:hover { background: color-mix(in srgb, var(--mad-text) 8%, transparent); color: var(--mad-text); }
.mad-dg-cf-tag button svg { width: 12px; height: 12px; }
.mad-dg-cf-tag-input {
  flex: 1;
  min-width: 60px;
  height: 23px;
  margin: 0;
  padding: 0 4px;
  border: 0 !important;
  outline: 0;
  background: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 13px;
  color: var(--mad-text);
}
.mad-dg-cf-ph { padding: 0 5px; font-size: 13px; color: var(--mad-text-subtle); }
.mad-dg-cf-del {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--mad-radius);
  background: none;
  color: var(--mad-text-subtle);
  cursor: pointer;
}
.mad-dg-cf-del:hover { background: var(--mad-danger-subtle); color: var(--mad-danger); }
.mad-dg-cf-del svg { width: 15px; height: 15px; }
.mad-dg-cf-row.is-invalid .is-need {
  border-color: var(--mad-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-danger) 18%, transparent) !important;
}
.mad-dg-cf-err { padding-left: 2px; font-size: 11.5px; color: var(--mad-danger); }
.mad-dg-cf-add {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 48px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--mad-radius);
  background: none;
  color: var(--cf-accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mad-dg-cf-add.is-centered { justify-self: center; margin-left: 0; }
.mad-dg-cf-add:hover:not(:disabled) { background: var(--cf-accent-subtle); }
.mad-dg-cf-add:disabled { color: var(--mad-text-subtle); cursor: not-allowed; }
.mad-dg-cf-add svg { width: 14px; height: 14px; }
.mad-dg-cf-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 8px 4px;
  text-align: center;
}
.mad-dg-cf-empty-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--cf-accent-subtle);
  color: var(--cf-accent-ink);
}
.mad-dg-cf-empty-ic svg { width: 18px; height: 18px; }
.mad-dg-cf-empty b { font-size: 14px; }
.mad-dg-cf-empty p { max-width: 42ch; margin: 0; font-size: 13px; color: var(--mad-text-muted); }
.mad-dg-cf-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.mad-dg-cf-suggest button {
  padding: 4px 11px;
  border: 1px dashed var(--mad-border-strong);
  border-radius: 999px;
  background: var(--mad-bg);
  font: inherit;
  font-size: 12.5px;
  color: var(--mad-text-muted);
  cursor: pointer;
}
.mad-dg-cf-suggest button:hover,
.mad-dg-cf-suggest button:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--cf-accent-border);
  background: var(--cf-accent-subtle);
  color: var(--cf-accent-ink);
}

/* Rodapé */
.mad-dg-cf-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--mad-border);
  flex: none;
}
.mad-dg-cf-foot .mad-btn { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; border-radius: var(--mad-radius); }
.mad-dg-cf-foot .mad-btn svg { width: 14px; height: 14px; }
.mad-dg-cf-grow { flex: 1; }
.mad-dg-cf-apply-count { opacity: .8; font-weight: 500; font-variant-numeric: tabular-nums; }
.mad-dg-cf-zero { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mad-warning); }
.mad-dg-cf-zero svg { width: 13px; height: 13px; }
.mad-dg-cf-kbd {
  padding: 0 4px;
  border: 1px solid var(--mad-border);
  border-radius: 4px;
  font-family: var(--mad-font-mono);
  font-size: 10.5px;
  color: var(--mad-text-subtle);
  white-space: nowrap;
}

/* Listas flutuantes: coluna / valores / filtros salvos */
.mad-dg-cf-menu,
.mad-dg-cf-saved {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mad-bg);
  border-radius: var(--mad-radius-md);
  box-shadow: var(--cf-shadow);
  animation: mad-dg-cf-pop-in 120ms ease;
}
.mad-dg-cf-menu { z-index: 4; width: 290px; max-width: calc(100% - 16px); }
.mad-dg-cf-saved { z-index: 3; bottom: calc(100% + 6px); left: 8px; width: 320px; max-width: calc(100% - 16px); }
.mad-dg-cf-saved.is-below { bottom: auto; top: calc(100% + 6px); }
.mad-dg-cf-menu-search { position: relative; padding: 8px; border-bottom: 1px solid var(--mad-border); }
.mad-dg-cf-menu-search svg {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  color: var(--mad-text-subtle);
  pointer-events: none;
}
.mad-dg-cf-menu-search input {
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0 8px 0 28px;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  background: var(--mad-bg-subtle);
  color: var(--mad-text);
  font: inherit;
  font-size: 13px;
  box-shadow: none;
}
.mad-dg-cf-menu-search input:focus { outline: none; border-color: var(--cf-accent); background: var(--mad-bg); }
.mad-dg-cf-menu-list { max-height: 280px; overflow: auto; padding: 4px; }
.mad-dg-cf-menu-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mad-text-subtle);
}
.mad-dg-cf-menu-group svg { width: 12px; height: 12px; }
.mad-dg-cf-menu-group-ic { display: inline-flex; }
.mad-dg-cf-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--mad-radius);
  background: none;
  color: var(--mad-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.mad-dg-cf-opt.is-active,
.mad-dg-cf-opt:focus-visible { outline: none; background: var(--mad-bg-muted); }
.mad-dg-cf-opt[aria-selected="true"] { color: var(--cf-accent-ink); font-weight: 600; }
.mad-dg-cf-opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-dg-cf-opt-meta {
  margin-left: auto;
  padding-left: 8px;
  font-family: var(--mad-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--mad-text-subtle);
  white-space: nowrap;
}
.mad-dg-cf-opt-check { display: inline-flex; margin-left: auto; }
.mad-dg-cf-opt-check svg { width: 13px; height: 13px; }
.mad-dg-cf-chk {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--mad-border-strong);
  border-radius: 4px;
  color: transparent;
}
.mad-dg-cf-chk svg { width: 11px; height: 11px; }
.mad-dg-cf-chk.is-on { background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-accent-fg); }
.mad-dg-cf-menu-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--mad-text-subtle); }
.mad-dg-cf-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--mad-border);
  font-size: 12px;
  color: var(--mad-text-subtle);
}
.mad-dg-cf-link {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--mad-text-muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mad-dg-cf-link:hover { color: var(--mad-text); }
.mad-dg-cf-saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 8px;
  border-radius: var(--mad-radius);
  cursor: pointer;
}
.mad-dg-cf-saved-item:hover,
.mad-dg-cf-saved-item:focus-visible,
.mad-dg-cf-saved-item.is-current { outline: none; background: var(--mad-bg-muted); }
.mad-dg-cf-saved-nm { display: grid; flex: 1; min-width: 0; }
.mad-dg-cf-saved-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mad-dg-cf-saved-meta { font-size: 11.5px; color: var(--mad-text-subtle); }
.mad-dg-cf-star { flex: none; display: inline-flex; color: var(--mad-text-subtle); }
.mad-dg-cf-star svg { width: 14px; height: 14px; }
.mad-dg-cf-star.is-on { color: #e3a008; }
.mad-dg-cf-star.is-on svg { fill: currentColor; }
.mad-dg-cf-saved-acts { display: flex; gap: 2px; opacity: 0; transition: opacity var(--mad-t); }
.mad-dg-cf-saved-item:hover .mad-dg-cf-saved-acts,
.mad-dg-cf-saved-item:focus-within .mad-dg-cf-saved-acts { opacity: 1; }
.mad-dg-cf-saved-acts button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--mad-text-subtle);
  cursor: pointer;
}
.mad-dg-cf-saved-acts button:hover { background: var(--mad-bg); color: var(--mad-text); }
.mad-dg-cf-saved-acts button.is-danger:hover { color: var(--mad-danger); }
.mad-dg-cf-saved-acts svg { width: 13px; height: 13px; }
.mad-dg-cf-save-form { display: grid; gap: 9px; padding: 10px; border-top: 1px solid var(--mad-border); }
.mad-dg-cf-save-label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mad-text-muted); }
.mad-dg-cf-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--mad-text); cursor: pointer; }
/* Checkbox nativo: o tema do app estiliza todo `input` (mesmo reset do
   seletor de colunas, .mad-dg-col-chooser-check). */
.mad-dg-cf-check input {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  flex: none;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  margin: 3px 0 0;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  accent-color: var(--cf-accent);
}
.mad-dg-cf-check input::before { display: none !important; }
.mad-dg-cf-check small { display: block; font-size: 11.5px; color: var(--mad-text-subtle); }
.mad-dg-cf-save-row { display: flex; justify-content: flex-end; gap: 6px; }
.mad-dg-cf-save-new {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-top: 1px solid var(--mad-border);
  background: none;
  color: var(--cf-accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mad-dg-cf-save-new:hover:not(:disabled) { background: var(--mad-bg-subtle); }
.mad-dg-cf-save-new:disabled { color: var(--mad-text-subtle); font-weight: 500; cursor: not-allowed; }
.mad-dg-cf-save-new svg { width: 14px; height: 14px; }

/* Celular: bottom sheet, cada condição vira um cartão */
.mad-dg-cf-pop.is-sheet .mad-dg-cf-head { padding: 6px 14px 12px; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-body { gap: 10px; padding: 10px 12px; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-row {
  grid-template-columns: 1fr 1fr 30px;
  grid-template-areas: "conj conj del" "field field field" "op val val";
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle);
}
.mad-dg-cf-pop.is-sheet .mad-dg-cf-conj { grid-area: conj; justify-self: start; height: 22px; padding: 0 8px; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-fcell { grid-area: field; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-ocell { grid-area: op; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-val { grid-area: val; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-del { grid-area: del; justify-self: end; height: 22px; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-pair { grid-template-columns: 1fr; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-pair-sep { display: none; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-add { margin-left: 0; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-kbd { display: none; }
/* Aplicar ocupa a linha de baixo inteira: alvo grande, ao alcance do polegar. */
.mad-dg-cf-pop.is-sheet .mad-dg-cf-foot .mad-dg-cf-apply { flex: 1 1 100%; order: 10; height: 40px; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-saved { right: 8px; width: auto; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-menu { width: auto; max-width: none; }
.mad-dg-cf-pop.is-sheet .mad-dg-cf-saved-acts { opacity: 1; }
/* 16px: abaixo disso o iOS dá zoom ao focar o campo. */
.mad-dg-cf-pop.is-sheet .mad-dg-cf-input,
.mad-dg-cf-pop.is-sheet .mad-dg-cf-select,
.mad-dg-cf-pop.is-sheet .mad-dg-cf-tag-input,
.mad-dg-cf-pop.is-sheet .mad-dg-cf-menu-search input { font-size: 16px; }
@media (max-width: 640px) {
  .mad-dg-cf-trigger-label { display: none; }
  .mad-dg-cf-view-name { max-width: 90px; }
}
@media (hover: none) {
  .mad-dg-cf-saved-acts { opacity: 1; }
}

@keyframes mad-dg-cf-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mad-dg-cf-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mad-dg-cf-row-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes mad-dg-cf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mad-dg-cf-flash {
  0%, 40% { background: var(--cf-accent-subtle); box-shadow: 0 0 0 1px var(--cf-accent-border); }
  100%    { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mad-dg-cf-pop,
  .mad-dg-cf-scrim,
  .mad-dg-cf-row,
  .mad-dg-cf-menu,
  .mad-dg-cf-saved { animation: none !important; }
}

/* ── Column chooser ──────────────────────────────────────────────── */
.mad-dg-col-chooser-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  height: 0;        /* sem altura — o panel flutua sobre a tabela */
  overflow: visible;
}
.mad-dg-col-chooser-panel {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 200;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md, 8px);
  box-shadow: var(--mad-shadow-md, 0 4px 16px rgba(0,0,0,.12));
  min-width: 180px;
  padding: 6px 0;
}
/* Ações à esquerda: o botão do seletor está no canto esquerdo do cabeçalho. */
.mad-dg-col-chooser-wrap-start {
  justify-content: flex-start;
}
.mad-dg-col-chooser-wrap-start .mad-dg-col-chooser-panel {
  right: auto;
  left: 0;
}
.mad-dg-col-chooser-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mad-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--mad-border);
  margin-bottom: 4px;
}
.mad-dg-col-chooser-title-text { flex: 1; }
.mad-dg-col-chooser-close {
  border: 0;
  background: transparent;
  color: var(--mad-text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  border-radius: 4px;
}
.mad-dg-col-chooser-close:hover { color: var(--mad-text); background: var(--mad-bg-muted, #f4f4f5); }
.mad-dg-col-chooser-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.83rem;
  cursor: pointer;
  user-select: none;
  color: var(--mad-text);
}
.mad-dg-col-chooser-item:hover {
  background: var(--mad-bg-subtle);
}
.mad-dg-col-chooser-check {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  accent-color: var(--mad-primary, #6d28d9);
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  cursor: pointer;
  background: none !important;
  border: none !important;
}
.mad-dg-col-chooser-check::before {
  display: none !important;
}
/* <mad-col hide-below>: na tela estreita a coluna fica fora de qualquer
   jeito — a caixa trava e a dica embaixo diz por quê. */
.mad-dg-col-chooser-narrow {
  flex-wrap: wrap;
  row-gap: 2px;
  cursor: default;
  color: var(--mad-text-muted);
}
.mad-dg-col-chooser-narrow:hover {
  background: none;
}
.mad-dg-col-chooser-narrow .mad-dg-col-chooser-check {
  cursor: default;
  opacity: .5;
}
.mad-dg-col-chooser-hint {
  flex-basis: 100%;
  padding-left: 22px;
  font-size: 0.72rem;
  color: var(--mad-text-muted);
}

/* ── Hidden column (column chooser) ─────────────────────────────── */
.mad-dg-col-hidden {
  display: none !important;
}

/* ── Table wrap ──────────────────────────────────────────────────── */
.mad-dg-table-wrap {
  overflow-x: auto;
  width: 100%;
}
/* Grade mais larga que a tela: a barra horizontal fica à vista. A barra do
   sistema (macOS) some até alguém rolar e a última coluna parecia cortada. */
.mad-dg-table-wrap::-webkit-scrollbar { height: 10px; }
.mad-dg-table-wrap::-webkit-scrollbar-track { background: var(--mad-bg-muted); }
.mad-dg-table-wrap::-webkit-scrollbar-thumb {
  background: var(--mad-border-strong, var(--mad-border));
  border-radius: 5px;
  border: 2px solid var(--mad-bg-muted);
}
.mad-dg-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--mad-text-muted); }
@supports (-moz-appearance: none) {
  .mad-dg-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--mad-border-strong, var(--mad-border)) var(--mad-bg-muted);
  }
}
.mad-dg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  /* offsets para sticky: ajuste se o thead mudar de altura */
  --mad-dg-thead-h:  41px;
  --mad-dg-group0-h: 37px;
}

/* ── Header ──────────────────────────────────────────────────────── */
.mad-dg-head {
  background: var(--mad-bg-subtle);
}
/* Cabeçalho em texto normal (sem caixa alta nem espaçamento), 12/500, num
   fundo quase branco com uma linha fina embaixo. O tema muda tudo isso em
   "Grade" (--mad-dg-head-*); o layout border segue em caixa alta. */
.mad-dg-th {
  padding: 8px 12px;
  font-weight: var(--mad-dg-head-font-weight, 500);
  font-size: var(--mad-dg-head-font-size, 12px);
  color: var(--mad-dg-head-color, var(--mad-text-muted));
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--mad-dg-head-bg, var(--mad-bg-subtle));
  border-bottom: var(--mad-dg-head-border-width, 1px) solid var(--mad-dg-head-border-color, var(--mad-border));
}
/* Na listagem (<table class="mad-table mad-dg-table">) quem desenha a linha
   do cabeçalho é o `.mad-table th`, que é mais específico que o `.mad-dg-th`
   acima. Esta regra tem a mesma especificidade e vem depois: mantém a medida
   da listagem e passa a seguir o tema (fórum #126). Os layouts stripe, dock…
   continuam vencendo as duas. */
.mad-table th:where(.mad-dg-th) {
  font-size: var(--mad-dg-head-font-size, 12px);
  font-weight: var(--mad-dg-head-font-weight, 500);
  color: var(--mad-dg-head-color, var(--mad-text-muted));
  border-bottom: var(--mad-dg-head-border-width, 1px) solid var(--mad-dg-head-border-color, var(--mad-border));
}
/* Mesmo motivo para o texto das células da listagem: o `.mad-table td` vence
   o `.mad-dg-cell` (builder#469). */
.mad-table td:where(.mad-dg-cell) {
  color: var(--mad-dg-body-color, var(--mad-text));
}
.mad-dg-th-filtered {
  background: color-mix(in srgb, var(--mad-primary) 6%, transparent);
}
.mad-dg-th-actions {
  text-align: center;
}
.mad-dg-th-chooser-only {
  width: 36px;
  padding: 4px 6px;
  text-align: center;
}
.mad-dg-th-content {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Ícones colados no título (lado interno): a data-grid emite o rótulo antes
   dos ícones à esquerda/centro e depois à direita; aqui só empacota o grupo
   no lado do alinhamento. `flex: 1` no rótulo afastava os ícones do título. */
.mad-dg-th-label {
  flex: 0 1 auto;
}
.mad-dg-th-align-center .mad-dg-th-content { justify-content: center; }
.mad-dg-th-align-right  .mad-dg-th-content { justify-content: flex-end; }
.mad-dg-col-group {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--mad-bg-subtle);
  border-bottom: 1px solid var(--mad-border);
}

/* Sort button */
.mad-dg-sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  color: var(--mad-text-subtle);
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color .15s;
}
.mad-dg-sort-btn:hover  { color: var(--mad-text); }
.mad-dg-sort-asc,
.mad-dg-sort-desc       { color: var(--mad-primary-ink, var(--mad-primary)); }

/* Filter */
.mad-dg-filter-wrap {
  position: relative;
}
.mad-dg-filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  color: var(--mad-text-subtle);
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color .15s;
}
.mad-dg-filter-btn:hover    { color: var(--mad-primary-ink, var(--mad-primary)); }
.mad-dg-filter-active       { color: var(--mad-primary-ink, var(--mad-primary)) !important; }
.mad-dg-filter-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  box-shadow: var(--mad-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
  padding: 10px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mad-dg-filter-input {
  width: 100%;
  font-size: 0.83rem;
}
.mad-dg-filter-clear {
  font-size: 0.78rem;
  color: var(--mad-text-muted);
}

/* Popover avançado (filter-popover) — mais largo, com botões e operador */
.mad-dg-filter-popover-advanced {
  min-width: 240px;
}
.mad-dg-filter-op {
  width: 100%;
  font-size: 0.83rem;
}
.mad-dg-filter-btns {
  display: flex;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--mad-border);
  margin-top: 2px;
}
.mad-dg-filter-btns .mad-btn {
  flex: 1;
  justify-content: center;
}

/* Filtro tipado — intervalos (data/número) e multi-seleção */
.mad-dg-filter-popover-range {
  min-width: 280px;
}
.mad-dg-filter-range {
  display: flex;
  gap: 6px;
  align-items: center;
}
.mad-dg-filter-range .mad-input {
  flex: 1;
  min-width: 0;          /* sem isso o input de data estoura o popover */
  font-size: 0.83rem;
}
.mad-dg-filter-range-sep {
  color: var(--mad-text-muted);
  font-size: 0.78rem;
}
.mad-dg-filter-multi {
  max-height: 220px;
}

/* ── Body rows ───────────────────────────────────────────────────── */
/* Sem zebra por padrão (o tema liga em "Grade" → --mad-dg-row-odd-bg); o
   hover é cinza neutro, não a cor primária. */
.mad-dg-row-even,
.mad-dt > tbody > tr { background: var(--mad-dg-row-even-bg, var(--mad-bg)); }
.mad-dg-row-odd,
.mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, transparent); }
.mad-dg-row:hover td,
.mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td { background: var(--mad-dg-row-hover-bg, var(--mad-bg-subtle)); }

/* ── Row highlight (manageRow update/insert) ─────────────────────── */
.mad-dg-row-highlight td {
  animation: mad-row-flash 2.5s ease-out;
}
@keyframes mad-row-flash {
  0%   { background-color: rgba(59, 130, 246, 0.15); }
  70%  { background-color: rgba(59, 130, 246, 0.08); }
  100% { background-color: transparent; }
}

/* ── Attach-row (form de edição rápida anexado à linha) ──────────── */
.mad-dg-attach-row,
.mad-dg-attach-row:hover td {
  background: color-mix(in srgb, var(--mad-primary) 4%, var(--mad-bg));
}
.mad-dg-attach-row > td {
  padding: 0;
  border-bottom: 1px solid var(--mad-border);
  border-left: 3px solid var(--mad-primary);
}
.mad-dg-attach-wrap {
  position: relative;
  padding: 14px 16px;
  animation: mad-attach-slide 0.18s ease-out;
}
@keyframes mad-attach-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mad-dg-attach-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--mad-text-subtle);
  cursor: pointer;
}
.mad-dg-attach-close:hover {
  background: color-mix(in srgb, var(--mad-text) 8%, transparent);
  color: var(--mad-text);
}
.mad-dg-attach-close svg {
  width: 15px;
  height: 15px;
}
.mad-dark .mad-dg-attach-row,
.mad-dark .mad-dg-attach-row:hover td {
  background: color-mix(in srgb, var(--mad-primary) 8%, var(--mad-bg));
}

/* ── <mad-row-expand>: chevron da linha + tela aberta logo abaixo ── */
.mad-dg-th-expand,
.mad-dg-expand-cell {
  width: 36px;
  min-width: 36px;
  padding-left: 8px !important;
  padding-right: 0 !important;
  text-align: center;
  vertical-align: middle;
}
.mad-dg-expand-cell .mad-dg-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--mad-text-subtle);
  cursor: pointer;
}
.mad-dg-expand-cell .mad-dg-expand-btn:hover {
  background: color-mix(in srgb, var(--mad-text) 8%, transparent);
  color: var(--mad-text);
}
.mad-dg-expand-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}
.mad-dg-expand-btn[aria-expanded="true"] {
  color: var(--mad-primary-ink, var(--mad-primary));
}
.mad-dg-expand-btn[aria-expanded="true"] svg {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .mad-dg-expand-btn svg { transition: none; }
}
/* A linha aberta e a tela logo abaixo dela formam um bloco: fundo leve
   (--mad-bg-subtle, redefinido nos temas escuros) e recuo até depois da
   coluna do chevron. */
.mad-dg-row.mad-dg-row-expanded > td {
  background: var(--mad-bg-subtle);
  border-bottom-color: transparent;
}
.mad-dg-attach-row.mad-dg-expand-row,
.mad-dg-attach-row.mad-dg-expand-row:hover td,
.mad-dark .mad-dg-attach-row.mad-dg-expand-row,
.mad-dark .mad-dg-attach-row.mad-dg-expand-row:hover td {
  background: var(--mad-bg-subtle);
}
.mad-dg-expand-row .mad-dg-attach-wrap {
  padding: 4px 16px 14px 40px;
}
/* A tela de dentro (modo `row`): sem cartão; a barra de ações encosta. */
.mad-dg-expand-row .mad-page-embed-bar {
  margin-bottom: 8px;
}
/* Sem o painel de filtros (modo `row`), o layout de coluna lateral do
   <mad-grid-filters style="sidebar-*"> ficaria com a grade espremida na
   coluna de 260px. */
.mad-transporter[data-mad-embed-header="row"] :is(.mad-gridf-layout-left, .mad-gridf-layout-right, .mad-dashf-layout-left, .mad-dashf-layout-right) {
  display: block;
}

.mad-dg-cell {
  padding: 8px 12px;
  vertical-align: middle;
  font-size: 0.84rem;
  color: var(--mad-dg-body-color, var(--mad-text));
  border-bottom: 1px solid var(--mad-border);
}

/* ── Linhas e colunas pelo tema (fórum #126) ─────────────────────── */
/* Editor de temas → Tabelas (DataGrid). As vars NUNCA são declaradas no
   framework: cada regra lê a var com o valor de antes como reserva, então sem
   tema a grade fica como sempre foi. Declaradas em `:root, .mad-ui` elas
   venceriam o `:root` do tema por herança.
   - linha entre registros: --mad-dg-row-border-width / -color
   - linha entre colunas:   --mad-dg-col-border-width / -color (0 = sem linha)
   - linha do cabeçalho:    --mad-dg-head-border-width / -color (nas regras do
     `.mad-dg-th` de cada layout, que têm medidas diferentes)
   Só largura e cor: o estilo continua de quem já mandava, e a última linha
   da listagem (`border-bottom: none`) segue sem traço. A linha aberta pelo
   chevron fica sem traço para emendar na tela que abriu embaixo dela.
   Cabeçalho e registros (builder#469), no mesmo contrato, nas regras de cada
   layout e do escuro:
   - cabeçalho:  --mad-dg-head-bg / -color / -font-size / -font-weight
   - registros:  --mad-dg-row-even-bg / -odd-bg / -hover-bg, --mad-dg-body-color
   As `--table-*`/`--tr-*` do tema continuam só na tabela antiga (`.table`):
   os temas embutidos do app as declaram em todo `:root`, e lê-las aqui
   mudaria a listagem de todo app sem ninguém pedir. */
.mad-dg-table > tbody > tr.mad-dg-row:not(.mad-dg-row-expanded) > td.mad-dg-cell,
.mad-dg-table > tbody > tr.mad-dg-row-detail > td,
.mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total) > td {
  border-bottom-width: var(--mad-dg-row-border-width, 1px);
  border-bottom-color: var(--mad-dg-row-border-color, var(--mad-border));
}
.mad-dg-table > :is(thead, tbody, tfoot) > tr > :is(th, td):not(:last-child),
.mad-dt > :is(thead, tbody, tfoot) > tr > :is(th, td):not(:last-child) {
  border-right: var(--mad-dg-col-border-width, 0px) solid var(--mad-dg-col-border-color, var(--mad-border));
}
/* Colunas do fim ocultas pelo seletor de colunas: a última VISÍVEL não leva
   traço (senão sobrava uma linha colada na borda da grade). */
.mad-dg-table > :is(thead, tbody, tfoot) > tr > :is(th, td):not(:has(~ :is(th, td):not(.mad-dg-col-hidden))) {
  border-right-width: 0;
}
/* Valor, número, data e formatos curtos (CPF, telefone…) numa linha só:
   "R$ 6,00" não vira "R$" em cima e "6,00" embaixo quando a grade aperta. */
.mad-dg-cell-nowrap { white-space: nowrap; }

/* ── Acabamento da linha (fw#494) ─────────────────────────────────────────
   O servidor não sabe qual tema o navegador escolheu: a marcação é a mesma
   em todos e quem liga cada parte é o CSS — no tema ERP já por padrão
   (notch-erp.css), no default pelas props do <mad-grid>, que saem como
   data-* no .mad-dg-wrap. Sem a prop, nada muda no default. */

/* density="compact|comfortable|spacious": respiro da linha 7/11/15px.
   Mais específico que o `.mad-table td` e que os layouts (dock, stripe…):
   a prop declarada vence. */
.mad-dg-wrap[data-density="compact"]     { --mad-dg-cell-py: 7px; }
.mad-dg-wrap[data-density="comfortable"] { --mad-dg-cell-py: 11px; }
.mad-dg-wrap[data-density="spacious"]    { --mad-dg-cell-py: 15px; }
.mad-dg-wrap[data-density] .mad-table td.mad-dg-cell {
  padding-top: var(--mad-dg-cell-py);
  padding-bottom: var(--mad-dg-cell-py);
}

/* Texto da célula: `.mad-dg-text` é inerte (sem caixa) até alguém pedir o
   corte. O corte usa line-clamp, não nowrap: a coluna continua podendo
   encolher até a maior palavra, então a tabela cabe na largura e o texto
   longo vira "…" (o valor inteiro aparece na dica, ver mad-ui.js).
   `lines="N"` na coluna corta em N linhas em qualquer tema; `lines="0"` nunca. */
.mad-dg-text { display: contents; }
.mad-dg-wrap[data-truncate="on"] .mad-dg-text:not([data-lines="0"]),
.mad-dg-text[data-lines]:not([data-lines="0"]) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--mad-dg-lines, 1);
  line-clamp: var(--mad-dg-lines, 1);
  overflow: hidden;
  min-width: 3em;
}
/* A quebra fica entre palavras: break-word só parte a palavra que não cabe
   na largura fixa da coluna (`width`). */
.mad-dg-wrap[data-truncate="on"] .mad-dg-text:not([data-lines="0"]),
.mad-dg-text[data-lines]:not([data-lines="0"]) { overflow-wrap: break-word; }

/* Largura com o texto cortado (fw#494b; forma da coluna em
   GridColumn::assignShapes). Sem isto a tabela repartia a largura e o título
   saía tão estreito quanto as colunas curtas:
   - grow (`<mad-col grow>`, ou a 1ª com texto de várias palavras): fica com a
     sobra, até 40% da tabela (repartidos entre as grow, se forem várias);
   - token (valores de uma palavra: código, tipo): inteira, sem reticências;
   - short (nome, setor): logo abaixo;
   - o resto do texto cede, sem partir abaixo de 5em. */
.mad-dg-wrap[data-truncate="on"] .mad-table th.mad-dg-col-grow { width: var(--mad-dg-grow-w, 40%); }
.mad-dg-wrap[data-truncate="on"] td.mad-dg-cell-token .mad-dg-text:not([data-lines]) {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mad-dg-wrap[data-truncate="on"] td.mad-dg-cell:not(.mad-dg-cell-token, .mad-dg-col-grow, .mad-dg-cell-short) .mad-dg-text:not([data-lines]) {
  overflow-wrap: anywhere;
  min-width: 5em;
}
/* Texto curto (nome de pessoa, setor): quebra só entre palavras, em até 2
   linhas — cortado numa linha, todo responsável virava "Gestor de…" (fw#495). */
.mad-dg-wrap[data-truncate="on"] td.mad-dg-cell-short .mad-dg-text:not([data-lines]) {
  overflow-wrap: normal;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Célula de duas linhas (subtitle-field / code-field na coluna): o valor em
   destaque e, embaixo, a meta ou o código mono, cada um numa linha. */
.mad-dg-cell-rich > .mad-dg-text { display: block; font-weight: 600; color: var(--mad-text); }
.mad-dg-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--mad-text-muted);
}
.mad-dg-sub-code {
  font-family: var(--mad-dg-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 11px;
}

/* Ícones de ordenar/filtrar/colunas na cor do texto do cabeçalho quando o
   tema a define (cabeçalho escuro com texto claro: os ícones cinza sumiam). */
.mad-dg-th :is(.mad-dg-sort-btn, .mad-dg-filter-btn):not(.mad-dg-sort-asc, .mad-dg-sort-desc, .mad-dg-filter-active, :hover) {
  color: var(--mad-dg-head-color, var(--mad-text-subtle));
}
.mad-dg-th .mad-dg-col-chooser-btn { color: var(--mad-dg-head-color, var(--mad-text)); }

/* header-icons="hover": ordenar/filtrar só aparecem com o mouse no título
   (ou o foco), por cima da borda dele, sem tomar largura da coluna. Coluna
   ordenada ou filtrada mostra os ícones sempre, no lugar de sempre.
   Os ícones encostam no título, não na borda da coluna (fórum #187: em
   coluna larga ficavam longe do título e colados no da coluna vizinha). O
   conteúdo do cabeçalho encolhe até o título e os ícones se ancoram nele;
   o `max-width` deixa a vaga deles dentro da coluna, e título comprido
   demais fica por baixo deles, como antes. */
.mad-dg-th-icons { display: contents; }
.mad-dg-wrap[data-header-icons="hover"] .mad-dg-th:not(.mad-dg-th-sorted):not(.mad-dg-th-filtered) .mad-dg-th-content {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 40px);
}
.mad-dg-wrap[data-header-icons="hover"] .mad-dg-th:not(.mad-dg-th-sorted):not(.mad-dg-th-filtered) .mad-dg-th-icons {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 4px;
  border-radius: 4px;
  background: var(--mad-dg-head-bg, var(--mad-bg-subtle));
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.mad-dg-wrap[data-header-icons="hover"] .mad-dg-th-align-right:not(.mad-dg-th-sorted):not(.mad-dg-th-filtered) .mad-dg-th-content { margin-left: auto; }
.mad-dg-wrap[data-header-icons="hover"] .mad-dg-th-align-center:not(.mad-dg-th-sorted):not(.mad-dg-th-filtered) .mad-dg-th-content {
  margin-inline: auto;
  max-width: calc(100% - 80px);
}
.mad-dg-wrap[data-header-icons="hover"] .mad-dg-th-align-right:not(.mad-dg-th-sorted):not(.mad-dg-th-filtered) .mad-dg-th-icons {
  left: auto;
  right: 100%;
  padding: 2px 4px 2px 2px;
}
.mad-dg-wrap[data-header-icons="hover"] .mad-dg-th:not(.mad-dg-th-sorted):not(.mad-dg-th-filtered):is(:hover, :focus-within) .mad-dg-th-icons {
  opacity: 1;
  pointer-events: auto;
}
.mad-dg-wrap[data-header-icons="hover"] .mad-dg-th-icons:not(:has(*)) { display: none; }

/* actions-inline="N": as ações além da vaga N-1 saem da linha e vão para o
   menu ⋮ do fim (o servidor marca as duas formas, o CSS escolhe uma). */
.mad-dg-act-more { display: none; }
.mad-dg-wrap[data-actions-inline] .mad-dg-act-more { display: block; }
.mad-dg-wrap[data-actions-inline] .mad-dg-actions > [data-act-over] { display: none; }
/* <mad-act show-label>: o rótulo ao lado do ícone, botão do tamanho do texto. */
.mad-dg-action-btn:has(> .mad-dg-action-btn-label) { padding: 3px 8px; gap: 5px; }

/* Cartão do celular (fw#495). Abaixo de 640 px a própria <tr> vira cartão,
   sem segundo HTML: número/código na linha pequena de cima, o título, até 3
   "Rótulo: valor", os selos embaixo e o ⋮ no canto; as outras colunas saem.
   O servidor marca o lugar de cada célula (data-card, GridColumn::
   assignCardRoles); aqui só se empilha. Padrão no tema ERP e opt-in com
   mobile="cards" (mobile="table" desliga) — um bloco só para os dois, por
   isso o seletor do ERP mora aqui. --mad-dg-stacked avisa o madDataGrid que
   o cartão inteiro abre a ação da linha (o botão dela sai do cartão).
   text-align com !important: a <td> traz o alinhamento da coluna no style. */
@media (max-width: 639.98px) {
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) { --mad-dg-stacked: 1; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table-wrap { overflow-x: visible; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table,
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody,
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr:not(.mad-dg-row),
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr:not(.mad-dg-row) > td { display: block; width: 100%; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > thead { display: none; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    position: relative;
    padding: 12px 52px 12px 14px;
    border-bottom: 1px solid var(--mad-border);
  }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td {
    display: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row:not(.mad-dg-row-selected).mad-dg-hl { background: var(--mad-dg-hl-bg); box-shadow: inset 3px 0 0 var(--mad-dg-hl-accent); }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row.mad-dg-row-selected { background: color-mix(in srgb, var(--mad-primary) 9%, transparent); }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card] { display: block; flex: 0 0 100%; text-align: left !important; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="code"] {
    order: 0;
    font-family: var(--mad-dg-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
    font-size: 12px;
    color: var(--mad-text-subtle);
  }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="code"]::before { content: attr(data-label) " "; font-family: var(--mad-font); }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="title"] { order: 1; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--mad-text); }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="title"] .mad-dg-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    white-space: normal;
  }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="meta"] {
    order: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mad-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="meta"]::before { content: attr(data-label) ": "; color: var(--mad-text-subtle); }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td:is([data-card="meta"], [data-card="code"], [data-card="badge"]) .mad-dg-text { display: inline; min-width: 0; white-space: nowrap; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="badge"] { order: 3; flex: 0 0 auto; margin-top: 4px; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="off"] { display: none; }
  /* Sem card-columns: até 3 metas (as outras ficam na tabela do computador). */
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])):not([data-card-columns]) .mad-dg-table > tbody > tr.mad-dg-row > td[data-card="meta"] ~ td[data-card="meta"] ~ td[data-card="meta"] ~ td[data-card="meta"] { display: none; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td.mad-dg-actions-cell { display: block; position: absolute; top: 8px; right: 8px; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td.mad-dg-select-cell { display: block; position: absolute; top: 12px; left: 12px; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row:has(> td.mad-dg-select-cell) { padding-left: 44px; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row > td.mad-dg-expand-cell { display: block; order: 4; flex: 0 0 auto; }
  /* O cartão abre a ação da linha: o botão dela sai; o resto vai para o ⋮. */
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row .mad-dg-actions > [data-row-act]:not(:disabled):not([aria-disabled="true"]),
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row .mad-dg-actions > [data-act-over] { display: none; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row .mad-dg-act-more { display: block; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row:has(.mad-dg-actions > [data-row-act]:not(:disabled):not([aria-disabled="true"])) { cursor: pointer; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row:has(.mad-dg-actions > [data-row-act]:not(:disabled):not([aria-disabled="true"])):active { background: var(--mad-bg-subtle); }
  /* row-detail: continua dentro do cartão, logo abaixo. */
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row:has(+ tr.mad-dg-row-detail) { padding-bottom: 4px; border-bottom: 0; }
  :is(.mad-dg-wrap[data-mobile="cards"], .mad-layout-erp .mad-dg-wrap:not([data-mobile="table"])) .mad-dg-table > tbody > tr.mad-dg-row-detail { padding: 0 2px 8px; border-bottom: 1px solid var(--mad-border); }
}

/* Rodapé de paginação (fw#495): footer="false" some sempre; footer="auto"
   (e o compact) some quando tudo cabe numa página — lista curta de painel
   sem "1–1 de 1". O padrão do ERP está no notch-erp.css. */
.mad-dg-wrap[data-footer="false"] > .mad-dg-footer,
.mad-dg-wrap[data-footer="auto"] > .mad-dg-footer-single { display: none; }

/* Relatório por janelas (#439): a célula enxuta (`td[data-k]`) leva o
   alinhamento no style só quando não é à esquerda — a célula de sempre leva
   `text-align:left` explícito. A sentinela no fim do corpo pede a próxima
   janela ao entrar perto da tela. */
.mad-dg-table > tbody > tr > td[data-k] { text-align: left; }
.mad-dg-window-sentinel > td {
  padding: 10px 12px;
  text-align: center;
  color: var(--mad-text-muted);
  font-size: 0.8rem;
  border-bottom: 0;
}
.mad-dg-window-sentinel.mad-dg-window-loading > td { opacity: 0.7; }

/* Empty state */
.mad-dg-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mad-text-subtle);
}
.mad-dg-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

/* Ghost só existe para referência no DOM — proxies ficam no body com position:fixed */
.mad-dg-sticky-ghost { display: none; }

/* Thead proxy (tabela clonada com position:fixed) */
.mad-dg-thead-proxy {
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.15);
  overflow: hidden;
}
.mad-dg-thead-proxy .mad-dg-th {
  position: static !important; /* anula sticky residual do clone */
}

/* Group proxies appended ao body pelo JS */
.mad-dg-sticky-proxy {
  align-items: center;
  background: var(--mad-bg, #fff);
  border-bottom: 1px solid var(--mad-border);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.10);
}
.mad-dg-sticky-proxy .mad-dg-group-cell {
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
}

/* Quebras: faixas por nível, contagem junto ao título e fechamento identificado. */
.mad-dg-group-row {
  background: transparent !important;
}
.mad-dg-group-row > td {
  padding: 0 !important;
  border-bottom: none !important;
  position: sticky;
  z-index: 3;
  background: var(--mad-bg, #fff);
}
.mad-dg-group-level-0 > td {
  top: var(--mad-dg-thead-h, 41px);
}
.mad-dg-group-level-1 > td {
  top: calc(var(--mad-dg-thead-h, 41px) + var(--mad-dg-group0-h, 44px));
  z-index: 2;
}
.mad-dg-group-level-0:not(:first-child) > td {
  border-top: 10px solid var(--mad-bg) !important;
}
.mad-dg-group-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  border-left: 3px solid var(--mad-border-strong);
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle, #f8fafc);
  color: var(--mad-text-muted);
  font-size: var(--mad-text-xs);
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}
.mad-dg-group-level-0 .mad-dg-group-cell {
  min-height: 46px;
  padding-top: 11px;
  padding-bottom: 11px;
  border-left-color: var(--mad-primary);
  border-bottom-color: color-mix(in srgb, var(--mad-primary) 22%, var(--mad-border));
  background: color-mix(in srgb, var(--mad-primary) 9%, var(--mad-bg));
  color: var(--mad-text);
  font-size: var(--mad-text-sm);
  font-weight: 700;
}
.mad-dg-group-level-1 .mad-dg-group-cell {
  min-height: 39px;
  background: var(--mad-bg-muted);
  color: var(--mad-text);
  border-left-color: color-mix(in srgb, var(--mad-primary) 45%, var(--mad-border));
}
.mad-dg-group-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--mad-text-subtle);
}
.mad-dg-group-level-0 .mad-dg-group-icon {
  color: var(--mad-primary-ink, var(--mad-primary));
}
.mad-dg-group-label {
  overflow-wrap: anywhere;
}
.mad-dg-group-count {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  color: var(--mad-text-muted);
  font-size: var(--mad-text-xs);
  font-weight: 400;
  line-height: 1.4;
}
.mad-dg-group-subtotals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding-left: 12px;
}
.mad-dg-group-subtotal-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--mad-text-xs);
}
.mad-dg-group-subtotal-label {
  color: var(--mad-text-muted);
  font-weight: 400;
}
.mad-dg-group-subtotal-value {
  color: var(--mad-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Linhas de dados seguem o recuo da hierarquia. */
.mad-dg-row-depth-1 > td:first-child { padding-left: 20px !important; }
.mad-dg-row-depth-2 > td:first-child { padding-left: 32px !important; }
.mad-dg-row-depth-3 > td:first-child { padding-left: 44px !important; }
.mad-dg-row-depth-1 { box-shadow: inset 3px 0 0 var(--mad-border-strong); }
.mad-dg-row-depth-2 { box-shadow: inset 4px 0 0 var(--mad-border); }

/* Subtotais: legenda ocupa as colunas livres, valores permanecem alinhados. */
.mad-dg-group-total > td {
  padding-top: 9px;
  padding-bottom: 9px;
  border-top: 1px solid var(--mad-border);
  border-bottom: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle, #f8fafc);
  color: var(--mad-text);
  font-size: var(--mad-text-sm);
  font-variant-numeric: tabular-nums;
}
.mad-dg-group-total-level-1 > td {
  background: var(--mad-bg-muted);
}
.mad-dg-group-total-level-0 > td {
  padding-top: 12px;
  padding-bottom: 12px;
  background: color-mix(in srgb, var(--mad-primary) 7%, var(--mad-bg));
  border-bottom: 2px solid color-mix(in srgb, var(--mad-primary) 30%, var(--mad-border));
  font-weight: 700;
}
.mad-dg-group-total > td.mad-dg-summary-label-cell,
.mad-dg-grand-total > tr > td.mad-dg-summary-label-cell {
  padding-left: var(--mad-dg-total-indent, 12px);
  text-align: left;
}
.mad-dg-group-total-label {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  text-align: left;
  white-space: normal;
  line-height: 1.45;
}
.mad-dg-total-caption {
  color: var(--mad-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mad-dg-total-context {
  color: var(--mad-text);
  font-size: var(--mad-text-xs);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.mad-dg-total-context::before {
  content: "·";
  margin-right: 6px;
  color: var(--mad-text-subtle);
}
.mad-dg-total-label-fallback {
  display: flex;
  margin-bottom: 4px;
}
.mad-dg-group-total-level-0 .mad-dg-total-context {
  font-weight: 600;
}
.mad-dg-foot.mad-dg-grand-total > tr > td {
  padding-top: 16px;
  padding-bottom: 16px;
  background: color-mix(in srgb, var(--mad-primary) 13%, var(--mad-bg));
  color: var(--mad-text);
  border-top: 2px solid var(--mad-primary);
  font-size: var(--mad-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mad-dg-grand-total .mad-dg-total-caption {
  color: var(--mad-text);
  font-size: var(--mad-text-sm);
  letter-spacing: 0;
}

/* ── Banda de quebra alinhada às colunas (group-band="cells") ─────── */
/* Sem sticky: o proxy flutuante do mad-ui.js clona a linha com colspan
   fixo e desalinharia o cabeçalho — este modo é feito pra impressão. */
.mad-dg-group-row.mad-dg-group-cells > td {
  position: static;
  padding: 0 8px !important;
  border-bottom: 1px solid var(--mad-border) !important;
  background: var(--mad-bg-subtle, #f8fafc);
}
.mad-dg-group-row.mad-dg-group-cells > td.mad-dg-total-cell {
  color: var(--mad-text);
  font-weight: 600;
  font-size: var(--mad-text-xs);
}

/* ── Linha descritiva por registro (<mad-grid row-detail="...">) ──── */
.mad-dg-row-detail > td {
  padding: 0 12px 6px !important;
  border-top: none !important;
  color: var(--mad-text-subtle);
  font-size: var(--mad-text-xs);
  line-height: 1.4;
  white-space: normal;
}

/* ── Actions column ──────────────────────────────────────────────── */
.mad-dg-actions-cell {
  padding: 4px 8px;
}
.mad-dg-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
/* Ação da linha sem caixa em cada linha: só o ícone, claro; escurece quando
   o mouse passa na linha e ganha fundo quando passa no próprio botão. */
.mad-dg-action-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--mad-radius-sm);
  cursor: pointer;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  color: var(--mad-text-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.8rem;
  transition: background .15s, color .15s, border-color .15s;
}
.mad-dg-row:hover .mad-dg-action-btn { color: var(--mad-text-muted); }
.mad-dg-action-btn:hover,
.mad-dg-row:hover .mad-dg-action-btn:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
}
.mad-dg-action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.mad-dg-action-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
}
.mad-dg-action-btn-label {
  font-size: 0.78rem;
  white-space: nowrap;
}
.mad-dg-action-danger {
  color: var(--mad-danger);
  border-color: color-mix(in srgb, var(--mad-danger) 25%, transparent);
}
.mad-dg-action-danger:hover {
  background: color-mix(in srgb, var(--mad-danger) 8%, transparent);
  border-color: var(--mad-danger);
  color: var(--mad-danger);
}
.mad-dg-action-primary {
  color: var(--mad-primary-ink, var(--mad-primary));
  border-color: color-mix(in srgb, var(--mad-primary) 30%, transparent);
}
.mad-dg-action-primary:hover {
  background: color-mix(in srgb, var(--mad-primary) 8%, transparent);
  border-color: var(--mad-primary);
  color: var(--mad-primary-ink, var(--mad-primary));
}
/* Variantes do painel da Ação Grid além de danger/primary (GridAction::btnClass). */
.mad-dg-action-success { color: var(--mad-success); border-color: color-mix(in srgb, var(--mad-success) 30%, transparent); }
.mad-dg-action-warning { color: var(--mad-warning); border-color: color-mix(in srgb, var(--mad-warning) 30%, transparent); }
.mad-dg-action-info    { color: var(--mad-info);    border-color: color-mix(in srgb, var(--mad-info) 30%, transparent); }
.mad-dg-action-success:hover { background: color-mix(in srgb, var(--mad-success) 8%, transparent); border-color: var(--mad-success); color: var(--mad-success); }
.mad-dg-action-warning:hover { background: color-mix(in srgb, var(--mad-warning) 8%, transparent); border-color: var(--mad-warning); color: var(--mad-warning); }
.mad-dg-action-info:hover    { background: color-mix(in srgb, var(--mad-info) 8%, transparent);    border-color: var(--mad-info);    color: var(--mad-info); }
.mad-dg-action-ghost { background: transparent; border-color: transparent; }
.mad-dg-action-ghost:hover { background: var(--mad-bg-muted); border-color: transparent; }

/* Dropdown */
.mad-dg-dropdown-wrap {
  position: relative;
}
.mad-dg-dropdown {
  position: fixed;
  z-index: var(--mad-z-float, 9999);
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  box-shadow: var(--mad-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
  min-width: 160px;
  overflow: hidden;
}
.mad-dg-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.83rem;
  color: var(--mad-text);
  text-align: left;
  transition: background .12s;
}
.mad-dg-dropdown-item:hover { background: var(--mad-bg-muted); }
/* Acao de linha sem permissao (modo "desabilitados, com dica"): inerte e
   esmaecida, mas ainda com a dica no hover (sem pointer-events:none). */
.mad-dg-dropdown-item:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.mad-dg-dropdown-item:disabled:hover { background: none; }
.mad-dg-dropdown-danger { color: var(--mad-danger); }
.mad-dg-dropdown-danger:hover { background: color-mix(in srgb, var(--mad-danger) 8%, transparent); }
.mad-dg-dropdown-success { color: var(--mad-success); }
.mad-dg-dropdown-warning { color: var(--mad-warning); }
.mad-dg-dropdown-info    { color: var(--mad-info); }
.mad-dg-dropdown-success:hover { background: color-mix(in srgb, var(--mad-success) 8%, transparent); }
.mad-dg-dropdown-warning:hover { background: color-mix(in srgb, var(--mad-warning) 8%, transparent); }
.mad-dg-dropdown-info:hover    { background: color-mix(in srgb, var(--mad-info) 8%, transparent); }

/* ── Inline editing ──────────────────────────────────────────────── */
.mad-dg-cell-input {
  width: 100%;
  min-width: 80px;
  font-size: 0.84rem;
  padding: 2px 6px;
  height: 28px;
}

/* Edição na célula recusada pelo servidor (manage_row com cellError): contorno
   na célula e o motivo logo abaixo do valor que voltou do banco. */
.mad-dg-cell.mad-dg-cell-invalid {
  box-shadow: inset 0 0 0 1px var(--mad-danger);
}
.mad-dg-cell-error {
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--mad-danger);
  white-space: normal;
}
[x-show].mad-dg-cell-display:hover {
  text-decoration: underline dotted;
  cursor: text;
}

/* Modo click: botão lápis */
.mad-dg-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm, 4px);
  color: var(--mad-muted-fg);
  cursor: pointer;
  padding: 2px;
  width: 24px;
  height: 24px;
  opacity: 0.5;            /* visivel mas discreto — antes era 0 (so no hover) */
  transition: opacity .15s, color .15s, border-color .15s;
}
.mad-dg-edit-click:hover .mad-dg-edit-btn,
.mad-dg-edit-btn:focus,
.mad-dg-edit-btn:hover {
  opacity: 1;
}
.mad-dg-edit-btn:hover {
  color: var(--mad-primary-ink, var(--mad-primary));
  border-color: var(--mad-primary);
}

/* Modo inline: inputs sempre visíveis */
.mad-dg-inline-input {
  width: 100%;
  min-width: 80px;
  font-size: 0.84rem;
  padding: 2px 6px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mad-radius-sm, 4px);
  transition: border-color .15s, background .15s;
}
.mad-dg-inline-input:hover {
  border-color: var(--mad-border);
  background: var(--mad-bg);
}
.mad-dg-inline-input:focus {
  border-color: var(--mad-primary);
  background: var(--mad-bg);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mad-primary) 20%, transparent);
}
textarea.mad-dg-inline-input {
  height: auto;
  resize: vertical;
}

/* MAD Select dentro de célula editável da grade — wrapper sem borda própria
   (o .mad-sel-control desenha tudo) e control compacto. */
.mad-sel.mad-dg-inline-input,
.mad-sel.mad-dg-inline-input:hover,
.mad-sel.mad-dg-inline-input:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
.mad-dg-cell .mad-sel-control,
.mad-dg-edit-inline .mad-sel-control {
  padding: 3px 26px 3px 8px !important;
  min-height: 28px !important;
  font-size: 0.84rem !important;
}

/* Prefixo (R$) dentro de célula editável */
.mad-dg-edit-prefix {
  font-size: 0.78rem;
  color: var(--mad-muted-fg);
  white-space: nowrap;
  user-select: none;
}

/* ── Tfoot (totals) ──────────────────────────────────────────────── */
.mad-dg-foot {
  background: var(--mad-bg-subtle);
  border-top: 1px solid var(--mad-border);
}
.mad-dg-total-cell {
  font-weight: 600;
}
/* Total que soma só a página exibida: o aviso fica embaixo do número. */
.mad-dg-total-scope {
  display: block;
  margin-top: 2px;
  color: var(--mad-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.mad-dg-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 14px;
  border-top: 1px solid var(--mad-border);
  background: var(--mad-bg);
  flex-wrap: wrap;
  gap: 8px;
}
.mad-dg-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}
.mad-dg-footer .mad-pagination {
  margin-left: auto;
}
.mad-dg-per-page-label {
  font-size: 12.5px;
  color: var(--mad-text-muted);
  white-space: nowrap;
}
/* Select pequeno (por página): sem a cara do nativo — seta própria, mesma
   borda e raio dos outros controles. Uma definição só. */
.mad-select-sm {
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  padding: 0 26px 0 10px;
  font-size: 12.5px;
  color: var(--mad-text);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm);
  background-color: var(--mad-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.mad-dg-pagination {
  margin-left: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE — FIELD LIST  (mad-fl-*)
   Componente de lista de campos editáveis (master-detail) com div layout,
   CSS Grid responsivo e Alpine.js para reatividade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container raiz ─────────────────────────────────────────────────────── */
.mad-fl {
  display: flex;
  flex-direction: column;
  border-radius: var(--mad-radius);
  overflow: visible;
}

/* Colunas que não cabem: a lista rola sozinha (classe posta pelo _flFit do
   madFieldList), com todas as faixas na largura do cabeçalho. Sem isso o
   transbordo rolava a cortina inteira, com o form junto. */
.mad-fl { min-width: 0; max-width: 100%; }
.mad-fl.mad-fl-scroll { overflow-x: auto; }
.mad-fl.mad-fl-scroll > .mad-fl-group-band,
.mad-fl.mad-fl-scroll > .mad-fl-header,
.mad-fl.mad-fl-scroll > .mad-fl-body,
.mad-fl.mad-fl-scroll > .mad-fl-totals { min-width: var(--mad-fl-min, 100%); }
/* "Adicionar linha" e "Nenhum item" ficam à vista com a lista rolada. */
.mad-fl.mad-fl-scroll > .mad-fl-add-row,
.mad-fl.mad-fl-scroll .mad-fl-empty { position: sticky; left: 0; max-width: var(--mad-fl-box, 100%); }

.mad-fl-has-error .mad-fl-group-band,
.mad-fl-has-error .mad-fl-header,
.mad-fl-has-error .mad-fl-body .mad-fl-row:last-child,
.mad-fl-has-error .mad-fl-totals,
.mad-fl-has-error .mad-fl-add-row {
  border-color: var(--mad-danger);
}

/* ── Banda de grupos (<mad-field-list-group label="...">) ───────────────── */
/* Mesmo grid-template-columns do header; cada célula usa grid-column: span N
   sobre as colunas VISÍVEIS do grupo. Sem grupo declarado a banda nem é
   emitida — página existente não ganha nó nenhum. */
.mad-fl-group-band {
  display: grid;
  gap: var(--mad-s2);
  align-items: center;
  padding: var(--mad-s1) var(--mad-s2) 2px;
  background: var(--mad-bg-muted);
  border: 1px solid var(--mad-border);
  border-bottom: none;
  border-radius: var(--mad-radius) var(--mad-radius) 0 0;
}

.mad-fl-group-cell {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mad-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--mad-border);
  padding-bottom: 2px;
}

/* Coluna sem grupo (ou filler de sortable/actions/remover): ocupa o espaço
   sem desenhar rótulo nem régua. */
.mad-fl-group-spacer { border-bottom: none; }

/* Com banda acima, o header perde o arredondamento de topo. */
.mad-fl-group-band + .mad-fl-header { border-radius: 0; }

/* Ícone de hint no header da coluna. */
.mad-fl-hint-icon {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 3px;
  opacity: .6;
  cursor: help;
}
.mad-fl-hint-icon:hover { opacity: 1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.mad-fl-header {
  display: grid;
  gap: var(--mad-s2);
  align-items: center;
  padding: var(--mad-s1) var(--mad-s2);
  background: var(--mad-bg-muted);
  border: 1px solid var(--mad-border);
  border-bottom: none;
  border-radius: var(--mad-radius) var(--mad-radius) 0 0;
}

.mad-fl-header-cell {
  font-size: 11px;
  font-weight: 700;
  color: var(--mad-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.mad-fl-body {
  display: flex;
  flex-direction: column;
}

/* ── Linhas ──────────────────────────────────────────────────────────────── */
.mad-fl-row {
  display: grid;
  gap: var(--mad-s2);
  align-items: center;
  padding: var(--mad-s1) var(--mad-s2);
  border: 1px solid var(--mad-border);
  border-top: none;
  background: var(--mad-bg);
  transition: background var(--mad-t);
}

.mad-fl-body .mad-fl-row:last-child {
  border-radius: 0 0 var(--mad-radius) var(--mad-radius);
}

/* Quando seguido de totais ou add-row, não arredonda */
.mad-fl-body:has(+ .mad-fl-totals) .mad-fl-row:last-child,
.mad-fl-body:has(+ .mad-fl-add-row) .mad-fl-row:last-child {
  border-radius: 0;
}

.mad-fl-row:hover {
  background: var(--mad-bg-subtle);
}

/* ── Células ─────────────────────────────────────────────────────────────── */
.mad-fl-cell {
  min-width: 0;
}
/* visible-when falso: some o conteúdo, a casa fica — as colunas seguintes
   continuam sob o próprio cabeçalho (fw#316). visibility também tira os
   campos do Tab. No cartão do celular vira display:none (abaixo). */
.mad-fl-cell.mad-fl-cell-off {
  visibility: hidden;
}

.mad-fl-cell .mad-input,
.mad-fl-cell select.mad-input,
.mad-fl-cell textarea.mad-input {
  width: 100%;
  box-sizing: border-box;
}

/* Ícone / toggle de senha na célula (fw 5.40). O grupo precisa ocupar a
   célula inteira, senão o input encolhe pro tamanho do conteúdo e a coluna
   desalinha do header. Addon mais estreito que no form: a linha é densa. */
.mad-fl-cell .mad-input-group {
  width: 100%;
}
.mad-fl-cell .mad-input-addon,
.mad-fl-cell .mad-password-toggle-btn {
  padding: 0 6px;
}
/* Spinner na célula: botões mais estreitos que no form (38px), para sobrar
   espaço para o número numa coluna de largura comum. A altura acompanha o
   input pela regra do .mad-field .mad-input-group > .mad-spinner-btn. */
.mad-fl-cell .mad-fl-spinner > .mad-spinner-btn {
  width: 28px;
  min-width: 28px;
}
.mad-fl-cell .mad-fl-spinner > .mad-input {
  min-width: 0;
}

/* ── Money field no field-list ───────────────────────────────────────────── */
.mad-fl-money {
  display: flex;
  align-items: center;
  width: 100%;
}
.mad-fl-money .mad-input {
  text-align: right;
  flex: 1;
  min-width: 0;
}
.mad-fl-money-prefix {
  font-size: var(--mad-text-xs, 0.75rem);
  color: var(--mad-text-muted);
  margin-right: 4px;
  white-space: nowrap;
  user-select: none;
}

/* ── Discount field com toggle %/R$ ────────────────────────────────────── */
.mad-fl-discount {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.mad-fl-discount .mad-input {
  text-align: right;
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.mad-fl-discount .mad-input:focus {
  z-index: 1;
  border-right: 1px solid var(--mad-accent);
}
.mad-fl-discount-type {
  border: 1px solid var(--mad-border);
  background: var(--mad-bg-muted);
  color: var(--mad-text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 0 6px;
  cursor: pointer;
  border-radius: 0 var(--mad-radius-sm) var(--mad-radius-sm) 0;
  outline: none;
  min-width: 38px;
  text-align: center;
  transition: border-color var(--mad-t), color var(--mad-t);
  -webkit-appearance: none;
  appearance: none;
}
.mad-fl-discount-type:focus {
  border-color: var(--mad-accent);
  color: var(--mad-text);
}
.mad-fl-discount-type:hover {
  color: var(--mad-text);
  background: var(--mad-bg-subtle);
}

/* ── File / Multifile ────────────────────────────────────────────────────── */
.mad-fl-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 28px;
}
.mad-fl-file-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--mad-bg-muted);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm);
  padding: 2px 6px;
  font-size: 11px;
  max-width: 180px;
}
.mad-fl-file-tag-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.mad-fl-file-tag-x {
  background: none;
  border: none;
  padding: 0 1px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--mad-text-muted);
}
.mad-fl-file-tag-x:hover {
  color: var(--mad-danger);
}
.mad-fl-file-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed var(--mad-border);
  border-radius: var(--mad-radius-sm);
  background: none;
  cursor: pointer;
  color: var(--mad-text-muted);
  transition: all .15s;
}
.mad-fl-file-pick:hover {
  border-color: var(--mad-primary);
  color: var(--mad-primary-ink, var(--mad-primary));
  background: var(--mad-bg-muted);
}
.mad-fl-file-pick:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Date (dentro de field-list) ─────────────────────────────────────────── */
.mad-fl-date {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.mad-fl-date .mad-input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.mad-fl-date-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid var(--mad-border);
  border-radius: 0 var(--mad-radius-sm) var(--mad-radius-sm) 0;
  background: var(--mad-bg-muted);
  color: var(--mad-text-muted);
  cursor: pointer;
  transition: all .15s;
}
.mad-fl-date-btn:hover:not(:disabled) {
  color: var(--mad-primary-ink, var(--mad-primary));
  background: var(--mad-bg-subtle);
}
.mad-fl-date-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Radio group inline (dentro de field-list) ──────────────────────────── */
.mad-fl-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.mad-fl-radio-group .mad-radio-wrap { gap: 4px; }
.mad-fl-radio-group .mad-radio-label { font-size: 12px; }

/* ── Coluna de ações ─────────────────────────────────────────────────────── */
.mad-fl-actions-header,
.mad-fl-actions-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Botão remover ───────────────────────────────────────────────────────── */
.mad-fl-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--mad-radius-sm);
  background: transparent;
  color: var(--mad-text-subtle);
  cursor: pointer;
  transition: background var(--mad-t), color var(--mad-t), border-color var(--mad-t);
  flex-shrink: 0;
}

.mad-fl-remove-btn:hover {
  background: var(--mad-danger-subtle);
  color: var(--mad-danger);
  border-color: color-mix(in srgb, var(--mad-danger) 20%, transparent);
}

/* ── Botoes de acao customizada (<mad-field-list-action>) ────────────────── */
/* Coluna que agrupa varios botoes de acao — lado a lado                      */
.mad-fl-actions-cell {
  gap: 2px;
  padding: 0 4px;
}

.mad-fl-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--mad-radius-sm);
  background: transparent;
  color: var(--mad-text-subtle);
  cursor: pointer;
  transition: background var(--mad-t), color var(--mad-t), border-color var(--mad-t);
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

/* Estado base — variants colorem o icone de cara (consistente com color= livre) */
.mad-fl-action-btn.mad-fl-action-danger  { color: var(--mad-danger); }
.mad-fl-action-btn.mad-fl-action-primary { color: var(--mad-primary-ink, var(--mad-primary)); }
.mad-fl-action-btn.mad-fl-action-success { color: var(--mad-success); }
.mad-fl-action-btn.mad-fl-action-warning { color: var(--mad-warning); }
.mad-fl-action-btn.mad-fl-action-info    { color: var(--mad-info); }
.mad-fl-action-btn.mad-fl-action-ghost   { color: var(--mad-text-muted); }

/* Hover neutro — so aplica bg/border quando nao ha variant */
.mad-fl-action-btn:hover {
  background: var(--mad-bg-subtle);
  border-color: var(--mad-border);
}

/* Hover dos variants — bg suave + borda derivada (cor do icone ja vem do base) */
.mad-fl-action-btn.mad-fl-action-danger:hover {
  background: var(--mad-danger-subtle);
  border-color: color-mix(in srgb, var(--mad-danger) 20%, transparent);
}

.mad-fl-action-btn.mad-fl-action-primary:hover {
  background: var(--mad-primary-subtle);
  border-color: color-mix(in srgb, var(--mad-primary) 20%, transparent);
}

.mad-fl-action-btn.mad-fl-action-success:hover {
  background: var(--mad-success-subtle);
  border-color: color-mix(in srgb, var(--mad-success) 20%, transparent);
}

.mad-fl-action-btn.mad-fl-action-warning:hover {
  background: var(--mad-warning-subtle);
  border-color: color-mix(in srgb, var(--mad-warning) 20%, transparent);
}

.mad-fl-action-btn.mad-fl-action-info:hover {
  background: var(--mad-info-subtle);
  border-color: color-mix(in srgb, var(--mad-info) 20%, transparent);
}

/* color="#hex" livre: hover derivado do currentColor */
.mad-fl-action-btn[style*="color:"]:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

.mad-fl-action-btn .mad-fl-action-btn-label {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* Quando botao tem label, cresce alem do quadrado fixo */
.mad-fl-action-btn:has(.mad-fl-action-btn-label) {
  width: auto;
  min-width: 28px;
}

/* ── Drag handle ─────────────────────────────────────────────────────────── */
.mad-fl-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mad-text-subtle);
  cursor: grab;
  border-radius: var(--mad-radius-sm);
  transition: color var(--mad-t);
  user-select: none;
}

.mad-fl-handle:hover {
  color: var(--mad-text-muted);
}

.mad-fl-handle:active {
  cursor: grabbing;
}

/* ── Sortable.js states ──────────────────────────────────────────────────── */
.mad-fl-ghost {
  opacity: 0.4;
  background: var(--mad-accent-subtle) !important;
  border-color: var(--mad-accent-border) !important;
}

.mad-fl-chosen {
  box-shadow: var(--mad-shadow-md);
  z-index: 10;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.mad-fl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mad-s2);
  padding: var(--mad-s6) var(--mad-s4);
  border: 1px dashed var(--mad-border);
  border-radius: var(--mad-radius);
  /* "Nenhum item adicionado" se lê: o cinza mais fraco dava 2,6:1 no claro e 3,5:1 no escuro (fw#322). */
  color: var(--mad-text-muted);
  font-size: var(--mad-text-sm);
}

/* ── Linha de totais ─────────────────────────────────────────────────────── */
.mad-fl-totals {
  display: grid;
  gap: var(--mad-s2);
  align-items: center;
  padding: var(--mad-s1) var(--mad-s2);
  background: var(--mad-bg-subtle);
  border: 1px solid var(--mad-border);
  border-top: none;
  border-radius: 0 0 var(--mad-radius) var(--mad-radius);
}

.mad-fl-totals:has(+ .mad-fl-add-row) {
  border-radius: 0;
}

.mad-fl-total-cell {
  font-weight: 700;
  font-size: var(--mad-text-sm);
  color: var(--mad-text);
  text-align: right;
}

/* ── Botão adicionar linha ───────────────────────────────────────────────── */
.mad-fl-add-row {
  display: flex;
  align-items: center;
  padding: var(--mad-s2) 0;
  gap: var(--mad-s2);
}

.mad-fl-add-btn {
  color: var(--mad-text-muted);
  gap: var(--mad-s1);
}

.mad-fl-add-btn:not(:disabled):hover {
  color: var(--mad-text);
}

.mad-fl-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Mobile: layout em cards (≤640px) ────────────────────────────────────── */
@media (max-width: 640px) {
  /* Oculta header desktop — a banda de grupos vai junto, senão sobra uma
     faixa de grid flutuando acima dos cards. */
  .mad-fl-header,
  .mad-fl-group-band { display: none; }

  /* No cartão não há colunas a alinhar: a célula escondida por visible-when
     sai inteira, sem deixar a etiqueta de um campo invisível. */
  .mad-fl-cell.mad-fl-cell-off { display: none; }

  /* Cada linha vira um card */
  .mad-fl-row {
    display: flex !important;
    flex-direction: column;
    /* A linha em grade centraliza na vertical (align-items:center); na coluna
       do cartão isso virava centro HORIZONTAL — campos estreitos com um vão à
       esquerda (fw#317). No cartão cada campo ocupa a largura toda. */
    align-items: stretch;
    gap: var(--mad-s3);
    padding: var(--mad-s3);
    border: 1px solid var(--mad-border) !important;
    border-top: none !important;
    border-radius: 0 !important;
  }

  .mad-fl-body .mad-fl-row:first-child {
    border-top: 1px solid var(--mad-border) !important;
    border-radius: var(--mad-radius) var(--mad-radius) 0 0 !important;
  }

  /* Mostra data-label como etiqueta inline acima do input */
  .mad-fl-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mad-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
  }

  /* Ações ficam à direita no topo do card */
  .mad-fl-actions-cell {
    position: absolute;
    top: var(--mad-s2);
    right: var(--mad-s2);
  }

  .mad-fl-row { position: relative; }

  /* Totais empilham */
  .mad-fl-totals {
    display: flex !important;
    flex-direction: column;
    gap: var(--mad-s1);
  }

  /* Handle oculto no mobile (sem drag) */
  .mad-fl-handle { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   DB SEEK FIELD (MadSeek)
   ═══════════════════════════════════════════════════════════════════ */
.mad-dbseek-field .mad-input-group {
  position: relative;
}

/* Os botões (buscar / limpar) são IRMÃOS do input no flex do .mad-input-group,
   não ficam por cima dele: não há o que reservar à direita. O antigo
   `padding-right: 80px` comia o texto inteiro numa coluna estreita (grade de
   3 colunas) — o registro escolhido não aparecia. Texto longo termina em "…". */
.mad-dbseek-display {
  min-width: 0;
  text-overflow: ellipsis;
  cursor: pointer;
  background: var(--mad-bg) !important;
}
.mad-dbseek-field .mad-seek-btn,
.mad-dbseek-field .mad-seek-clear-btn {
  flex-shrink: 0;
}

.mad-seek-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 38px;
  border: 1px solid var(--mad-border);
  border-left: none;
  background: var(--mad-bg);
  color: var(--mad-muted);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.mad-seek-clear-btn:hover:not(:disabled) {
  background: var(--mad-danger, #dc3545);
  color: #fff;
  border-color: var(--mad-danger, #dc3545);
}
.mad-seek-clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mad-seek-clear-btn svg {
  width: 14px;
  height: 14px;
}

/* Border-radius do input e botões */
.mad-dbseek-field .mad-dbseek-display {
  border-radius: var(--mad-radius-md) 0 0 var(--mad-radius-md);
}
.mad-seek-clear-btn {
  border-radius: 0 var(--mad-radius-md) var(--mad-radius-md) 0;
}

/* "Novo" (`create` do <mad-seek>): o "+" é o ÚLTIMO botão do grupo, então a
   lupa e o limpar perdem o canto arredondado. No topo do modal, o botão com
   rótulo encosta no fechar. */
.mad-dbseek-has-create .mad-seek-btn:not(.mad-seek-create-btn),
.mad-dbseek-has-create .mad-seek-clear-btn {
  border-radius: 0;
}
.mad-dbseek-field .mad-dbseek-modal-create {
  margin-left: auto;
}

/* Modal do seek: z-index alto para ficar sobre outros modals */
.mad-dbseek-field .mad-modal-overlay {
  z-index: 1060;
}
.mad-dbseek-field .mad-modal-body {
  padding: var(--mad-s3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Detail Form (.mad-df) — sub-formulário detalhe com listagem
   ═══════════════════════════════════════════════════════════════════════════ */

.mad-df { position: relative; }

.mad-df-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.mad-df-form-inline {
  padding: 16px;
  margin-bottom: 12px;
}

.mad-df-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--mad-border);
}

.mad-df-list { margin-top: 0; }

.mad-df-row-editing {
  background: color-mix(in srgb, var(--mad-primary) 6%, transparent) !important;
}

/* Ação primary (azul) */
.mad-dg-action-primary {
  color: var(--mad-primary-ink, var(--mad-primary));
  border-color: var(--mad-primary);
}
.mad-dg-action-primary:hover {
  background: color-mix(in srgb, var(--mad-primary) 10%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   DATAGRID — CARD VIEW MODE
   ═══════════════════════════════════════════════════════════════════ */

/* ── View toggle (segmented control) ───────────────────────────── */
.mad-dg-view-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  overflow: hidden;
  background: var(--mad-bg);
}
.mad-dg-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  color: var(--mad-text-subtle);
  transition: background var(--mad-t), color var(--mad-t);
  line-height: 1;
}
.mad-dg-view-btn:hover {
  color: var(--mad-text);
  background: var(--mad-bg-muted);
}
.mad-dg-view-btn.active {
  color: var(--mad-text);
  background: var(--mad-bg-muted);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.mad-dg-view-btn + .mad-dg-view-btn {
  border-left: 1px solid var(--mad-border);
}

/* ── Cards container ───────────────────────────────────────────── */
.mad-dg-cards-wrap {
  padding: 12px 16px 16px;
}
.mad-dg-cards {
  display: grid;
  grid-template-columns: repeat(var(--mad-dg-card-cols, 3), 1fr);
  gap: 14px;
}
@media (max-width: 1200px) {
  .mad-dg-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .mad-dg-cards {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1600px) {
  .mad-dg-cards:not([style*="--mad-dg-card-cols"]) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Individual card ───────────────────────────────────────────── */
.mad-dg-card {
  display: flex;
  flex-direction: column;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg);
  transition: box-shadow var(--mad-t), border-color var(--mad-t), transform var(--mad-t);
}
.mad-dg-card:hover {
  border-color: var(--mad-border-strong);
  box-shadow: var(--mad-shadow-md);
  transform: translateY(-1px);
}

/* ── Card image ────────────────────────────────────────────────── */
.mad-dg-card-image {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-bottom: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-lg) var(--mad-radius-lg) 0 0;
  background: var(--mad-bg-muted);
}
.mad-dg-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.mad-dg-card:hover .mad-dg-card-image img {
  transform: scale(1.03);
}

/* ── Card body ─────────────────────────────────────────────────── */
.mad-dg-card-body {
  flex: 1;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Card header (title + badge) ───────────────────────────────── */
.mad-dg-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mad-dg-card-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mad-dg-card-title {
  font-size: var(--mad-text-base);
  font-weight: 600;
  color: var(--mad-text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mad-dg-card-subtitle {
  font-size: var(--mad-text-xs);
  color: var(--mad-text-muted);
  letter-spacing: .01em;
}

/* ── Card highlight (money / prominent value) ──────────────────── */
.mad-dg-card-highlight {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mad-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ── Card fields (label: value list) ───────────────────────────── */
.mad-dg-card-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mad-border);
  align-items: baseline;
}
.mad-dg-card-field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  grid-column: 1 / -1;
  font-size: var(--mad-text-sm);
}
@supports (grid-template-columns: subgrid) {
  .mad-dg-card-field {
    display: grid;
    grid-template-columns: subgrid;
  }
}
.mad-dg-card-field-label {
  color: var(--mad-text-subtle);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  line-height: 1.85;
}
.mad-dg-card-field-value {
  color: var(--mad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  line-height: 1.85;
}

/* ── Card footer (actions bar) ─────────────────────────────────── */
.mad-dg-card-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--mad-border);
  background: var(--mad-bg-subtle);
  border-radius: 0 0 var(--mad-radius-lg) var(--mad-radius-lg);
}
.mad-dg-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mad-dg-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius);
  cursor: pointer;
  padding: 5px 10px;
  color: var(--mad-text-muted);
  font-size: var(--mad-text-xs);
  font-weight: 500;
  transition: background var(--mad-t), color var(--mad-t), border-color var(--mad-t);
  white-space: nowrap;
  line-height: 1;
}
.mad-dg-card-action:hover {
  background: var(--mad-bg-muted);
  color: var(--mad-text);
  border-color: var(--mad-border-strong);
}
.mad-dg-card-action:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.mad-dg-card-action-danger {
  color: var(--mad-danger);
  border-color: color-mix(in srgb, var(--mad-danger) 25%, transparent);
}
.mad-dg-card-action-danger:hover {
  background: color-mix(in srgb, var(--mad-danger) 6%, transparent);
  color: var(--mad-danger);
}
.mad-dg-card-action-success { color: var(--mad-success); border-color: color-mix(in srgb, var(--mad-success) 25%, transparent); }
.mad-dg-card-action-warning { color: var(--mad-warning); border-color: color-mix(in srgb, var(--mad-warning) 25%, transparent); }
.mad-dg-card-action-info    { color: var(--mad-info);    border-color: color-mix(in srgb, var(--mad-info) 25%, transparent); }
.mad-dg-card-action-success:hover { background: color-mix(in srgb, var(--mad-success) 6%, transparent); color: var(--mad-success); }
.mad-dg-card-action-warning:hover { background: color-mix(in srgb, var(--mad-warning) 6%, transparent); color: var(--mad-warning); }
.mad-dg-card-action-info:hover    { background: color-mix(in srgb, var(--mad-info) 6%, transparent);    color: var(--mad-info); }
.mad-dg-card-action-ghost { background: transparent; border-color: transparent; }

/* ── Card highlight animation (manageRow) ──────────────────────── */
.mad-dg-card-highlight-anim {
  animation: mad-card-flash 2.5s ease-out forwards;
}
@keyframes mad-card-flash {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-info) 40%, transparent); }
  70%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-info) 10%, transparent); }
  100% { box-shadow: none; }
}

/* Popover de confirmação de remoção */
.mad-df-delete-wrap {
  position: relative;
  display: inline-flex;
}
.mad-df-delete-popover {
  position: fixed;
  z-index: var(--mad-z-float, 9999);
  min-width: 180px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius, 8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 12px;
}
.mad-df-delete-msg {
  font-size: 0.84rem;
  color: var(--mad-text, #18181b);
  margin: 0 0 10px;
  line-height: 1.4;
}
.mad-df-delete-btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ── Confirm Modal ─────────────────────────────────────────────── */
.mad-confirm-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 150ms ease;
}
.mad-confirm-overlay.mad-confirm-visible { opacity: 1; }
.mad-confirm-modal {
  background: var(--mad-bg, #fff);
  color: var(--mad-text, #1f2937);
  border-radius: var(--mad-radius, 8px);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 24px 28px;
  min-width: 320px; max-width: 440px;
  text-align: center;
  transform: scale(.95); transition: transform 150ms ease;
}
.mad-confirm-visible .mad-confirm-modal { transform: scale(1); }
.mad-confirm-icon {
  margin-bottom: 12px; color: var(--mad-primary, #3b82f6);
}
.mad-confirm-icon svg { width: 36px; height: 36px; }
.mad-confirm-icon-danger { color: var(--mad-danger, #ef4444); }
.mad-confirm-message {
  font-size: 0.95rem; line-height: 1.5;
  color: var(--mad-text, #18181b);
  margin-bottom: 20px;
}
.mad-confirm-btns {
  display: flex; gap: 8px; justify-content: center;
}

/* ── Confirm Popover ──────────────────────────────────────────── */
.mad-confirm-popover {
  position: fixed; z-index: 10000;
  min-width: 200px;
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e5e7eb);
  border-radius: var(--mad-radius, 8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 12px 14px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.mad-confirm-popover.mad-confirm-popover-visible {
  opacity: 1; transform: translateY(0);
}
.mad-confirm-popover-msg {
  font-size: 0.84rem; color: var(--mad-text, #18181b);
  margin: 0 0 10px; line-height: 1.4;
}
.mad-confirm-popover-btns {
  display: flex; gap: 6px; justify-content: flex-end;
}

/* ── MadDialog (MadMessage.info/error/warning/confirm) ─────────── */
.mad-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  /* z-index aplicado inline pelo JS (stack dinamico) */
}
.mad-dialog-box {
  background: var(--mad-bg, #fff);
  color: var(--mad-text, #374151);
  border-radius: 10px;
  padding: 28px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  font-family: inherit;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.mad-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.mad-dialog-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* cor aplicada inline pelo JS (depende do tipo) */
}
.mad-dialog-title {
  font-size: 16px;
}
.mad-dialog-body {
  font-size: 14px;
  color: var(--mad-text, #374151);
  line-height: 1.6;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.mad-dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Mad loader (Mad.wait / Aguarde...) ───────────────────────── */
#mad-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--mad-z-loader, 99999);
  background: rgba(0, 0, 0, 0.25);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
}
#mad-loader-overlay.mad-loader-visible {
  display: flex;
}
.mad-loader-box {
  background: #111;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.mad-loader-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

.mad-df-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
}
.mad-df-page-info {
  font-size: 0.84rem;
  color: var(--mad-muted-fg);
}


/* ═══════════════════════════════════════════════════════════════════
   33. COMPONENTE — FULL CALENDAR
   ═══════════════════════════════════════════════════════════════════ */

.mad-fc-wrap {
  width: 100%;
}
.mad-fc-wrap .fc {
  font-family: inherit;
  --fc-border-color: var(--mad-border, #e5e7eb);
}
.mad-fc-wrap .fc-scrollgrid,
.mad-fc-wrap .fc-scrollgrid table {
  border-color: var(--mad-border, #e5e7eb);
}
.mad-fc-wrap .fc-scrollgrid td,
.mad-fc-wrap .fc-scrollgrid th,
.mad-fc-wrap .fc-daygrid-day,
.mad-fc-wrap .fc-timegrid-slot,
.mad-fc-wrap .fc-timegrid-col,
.mad-fc-wrap .fc-list-table td {
  border-color: var(--mad-border, #e5e7eb);
}
.mad-fc-wrap .fc-toolbar-title {
  font-size: 1.15rem !important;
  font-weight: 600;
}
/* Botões da toolbar = botão primário do tema (o mesmo <mad-btn variant="primary">).
   `.mad-fc-wrap .fc …` (3 classes) vence o `.fc-button-group button` cinza e o
   `.fc-today-button` do notch-base.css, que eram escritos para o FullCalendar 3. */
.mad-fc-wrap .fc {
  --fc-button-text-color: var(--mad-primary-fg, #ffffff);
  --fc-button-bg-color: var(--mad-primary, #18181b);
  --fc-button-border-color: var(--mad-primary, #18181b);
  --fc-button-hover-bg-color: var(--mad-primary-hover, var(--mad-primary, #18181b));
  --fc-button-hover-border-color: var(--mad-primary-hover, var(--mad-primary, #18181b));
  --fc-button-active-bg-color: var(--mad-primary-hover, var(--mad-primary, #18181b));
  --fc-button-active-border-color: var(--mad-primary-hover, var(--mad-primary, #18181b));
}
.mad-fc-wrap .fc .fc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height, 32px) !important;
  padding: 0 12px;
  font-size: 0.8rem;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
}
.mad-fc-wrap .fc .fc-button-primary {
  background: var(--fc-button-bg-color);
  border-color: var(--fc-button-border-color);
  color: var(--fc-button-text-color);
}
.mad-fc-wrap .fc .fc-button-primary:not(:disabled):hover {
  background: var(--fc-button-hover-bg-color);
  border-color: var(--fc-button-hover-border-color);
  color: var(--fc-button-text-color);
}
.mad-fc-wrap .fc .fc-button-primary:not(:disabled).fc-button-active,
.mad-fc-wrap .fc .fc-button-primary:not(:disabled):active {
  background: var(--fc-button-active-bg-color);
  border-color: var(--fc-button-active-border-color);
  color: var(--fc-button-text-color);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
}
.mad-fc-wrap .fc .fc-button-primary:disabled {
  opacity: .55;
}
.mad-fc-wrap .fc .fc-button:focus-visible {
  outline: 2px solid var(--mad-primary, #18181b);
  outline-offset: 2px;
}
.mad-fc-wrap .fc .fc-button .fc-icon {
  font-size: 1.1em;
}
.mad-fc-wrap .fc-daygrid-event {
  border-radius: var(--mad-radius-sm, 4px);
  padding: 1px 4px;
  font-size: 0.82rem;
}
.mad-fc-wrap .fc-timegrid-event {
  border-radius: var(--mad-radius-sm, 4px);
  font-size: 0.82rem;
}
.mad-fc-wrap .fc-day-today {
  background: var(--mad-primary-bg, rgba(59, 130, 246, 0.06)) !important;
}
.mad-fc-wrap .fc-col-header-cell {
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: capitalize;
}


/* ═══════════════════════════════════════════════════════════════════
   34. COMPONENTE — RESOURCE TIMELINE (vertical grid)
   Eixo Y = horas, Eixo X = dia × recurso
   ═══════════════════════════════════════════════════════════════════ */

.mad-rt {
  --mad-rt-border: 1px solid var(--mad-border, #e5e7eb);
  --mad-rt-slot-h: 56px;
  width: 100%;
  font-size: 0.84rem;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.mad-rt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.mad-rt-toolbar-nav { display: flex; gap: 4px; align-items: center; }
.mad-rt-toolbar-title { font-size: 1.1rem; font-weight: 600; text-align: center; flex: 1; }
.mad-rt-toolbar-views { display: flex; gap: 2px; }

.mad-rt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 12px;
  border: var(--mad-rt-border);
  border-radius: var(--mad-radius, 6px);
  background: var(--mad-bg, #fff);
  color: var(--mad-text, #1f2937);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.mad-rt-btn:hover { background: var(--mad-bg-muted, #f3f4f6); }
.mad-rt-btn-active {
  background: var(--mad-primary, #3b82f6) !important;
  color: #fff !important;
  border-color: var(--mad-primary, #3b82f6);
}

/* ── Scroll container ────────────────────────────────────────── */
.mad-rt-scroll {
  overflow-x: auto;
  border: var(--mad-rt-border);
  border-radius: var(--mad-radius, 6px);
}

/* ── CSS Grid ────────────────────────────────────────────────── */
.mad-rt-grid {
  display: grid;
  min-width: fit-content;
}

/* ── Header: corner cells ────────────────────────────────────── */
.mad-rt-corner {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--mad-bg-muted, #f9fafb);
  border-right: var(--mad-rt-border);
  border-bottom: var(--mad-rt-border);
}
.mad-rt-corner-top { grid-row: 1; grid-column: 1; }
.mad-rt-corner-bot { grid-row: 2; grid-column: 1; }

/* ── Header: day row ─────────────────────────────────────────── */
.mad-rt-day-header {
  grid-row: 1;
  background: var(--mad-bg-muted, #f9fafb);
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 4px;
  border-bottom: var(--mad-rt-border);
  border-right: var(--mad-rt-border);
}

/* ── Header: resource row ────────────────────────────────────── */
.mad-rt-res-header {
  grid-row: 2;
  background: var(--mad-bg-muted, #f9fafb);
  text-align: center;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--mad-text-subtle, #6b7280);
  padding: 5px 4px;
  border-bottom: var(--mad-rt-border);
  border-right: var(--mad-rt-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Time label (left column) ────────────────────────────────── */
.mad-rt-time {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--mad-bg, #fff);
  border-right: var(--mad-rt-border);
  border-bottom: var(--mad-rt-border);
  padding: 0 8px;
  font-size: 0.78rem;
  color: var(--mad-text-subtle, #6b7280);
  font-weight: 500;
  text-align: right;
  min-height: var(--mad-rt-slot-h);
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  width: 60px;
  min-width: 60px;
}

/* ── Grid cell (time × resource) ─────────────────────────────── */
.mad-rt-cell {
  position: relative;
  border-right: var(--mad-rt-border);
  border-bottom: var(--mad-rt-border);
  min-height: var(--mad-rt-slot-h);
  cursor: pointer;
  transition: background 0.1s;
}
.mad-rt-cell:hover {
  background: var(--mad-bg-muted, #f9fafb);
}

/* Today column highlight */
.mad-rt-today { background: var(--mad-primary-bg, rgba(59, 130, 246, 0.06)) !important; }
.mad-rt-today-col { background: rgba(254, 243, 199, 0.35); }

/* ── Event block (vertical position) ─────────────────────────── */
.mad-rt-event {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: var(--mad-radius-sm, 4px);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 3px 5px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.mad-rt-event:hover {
  opacity: 0.92;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  z-index: 2;
}
.mad-rt-event-time {
  font-size: 0.68rem;
  opacity: 0.85;
}
.mad-rt-event-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   KANBAN BOARD
   ═══════════════════════════════════════════════════════════════════ */

/* ── Board ── */
/* Cores via tokens --mad-* (dark automático via html[data-theme="dark"]).
   RTL: posicionamento físico (right/left) — débito board-wide, ver backlog. */
.mad-kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  min-height: 500px;
  max-height: var(--mad-kanban-max-h, calc(100vh - 220px));
}

/* ── Toolbar superior do board (mad-kanban-toolbar) ── */
.mad-kanban-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* ── Actions no header da coluna (mad-kanban-stage-action) ── */
.mad-kanban-col-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.mad-kanban-col-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--mad-text-muted, #71717a);
  cursor: pointer;
  font-size: 12px;
}
.mad-kanban-col-action-btn:hover { background: var(--mad-bg-muted, #f4f4f5); color: var(--mad-text, #18181b); }
.mad-kanban-col-action-btn svg { width: 16px; height: 16px; }
.mad-kanban-col-action-btn--primary { color: #2563eb; }
.mad-kanban-col-action-btn--primary:hover { background: var(--mad-info-subtle, #eff6ff); }
.mad-kanban-col-action-btn--danger  { color: var(--mad-danger, #dc2626); }
.mad-kanban-col-action-btn--danger:hover  { background: var(--mad-danger-subtle, #fef2f2); }
.mad-kanban-col-action-btn--success { color: var(--mad-success, #16a34a); }
.mad-kanban-col-action-btn--success:hover { background: var(--mad-success-subtle, #f0fdf4); }

/* ── Empty state da coluna (mad-kanban-stage-action empty-state) ── */
.mad-kanban-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.mad-kanban-empty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mad-text-muted, #71717a);
  background: transparent;
  border: 1.5px dashed var(--mad-border-strong, #d4d4d8);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.mad-kanban-empty-btn:hover {
  color: var(--mad-text, #18181b);
  border-color: var(--mad-text-subtle, #a1a1aa);
  background: var(--mad-bg-subtle, #fafafa);
}
.mad-kanban-empty-btn svg { width: 16px; height: 16px; }
.mad-kanban-empty-btn--primary { color: #2563eb; border-color: #93c5fd; }
.mad-kanban-empty-btn--primary:hover { color: #1d4ed8; border-color: #2563eb; background: var(--mad-info-subtle, #eff6ff); }
.mad-kanban-empty-btn--success { color: var(--mad-success, #16a34a); border-color: #86efac; }
.mad-kanban-empty-btn--success:hover { color: #15803d; border-color: var(--mad-success, #16a34a); background: var(--mad-success-subtle, #f0fdf4); }
.mad-kanban-empty-btn--danger  { color: var(--mad-danger, #dc2626); border-color: #fca5a5; }
.mad-kanban-empty-btn--danger:hover  { color: #b91c1c; border-color: var(--mad-danger, #dc2626); background: var(--mad-danger-subtle, #fef2f2); }

/* ── Top scrollbar (opcional via top-scroll attr) ── */
.mad-kanban-wrap {
  display: flex;
  flex-direction: column;
}
.mad-kanban-top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin-bottom: 4px;
}
.mad-kanban-top-scroll-inner {
  height: 1px;
}

/* ── Column ── */
.mad-kanban-col {
  width: 320px;
  min-width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--mad-border, #e5e7eb);
  background: var(--mad-bg-subtle, #fafafa);
  max-height: 100%;
}
.mad-kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px 12px 0 0;
}
/* stages-reorderable: o cabeçalho é a alça para arrastar a coluna. */
.mad-kanban-col-header--draggable { cursor: grab; }
.mad-kanban-col-header--draggable:active { cursor: grabbing; }
.mad-kanban-col--dragging { opacity: .45; }
.mad-kanban-col-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mad-kanban-col-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mad-text, #18181b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mad-kanban-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--mad-border, #e4e4e7);
  background: var(--mad-bg-muted, #f4f4f5);
  color: var(--mad-text-muted, #52525b);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mad-kanban-col-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--mad-text-subtle, #a1a1aa);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mad-kanban-col-add:hover {
  background: var(--mad-bg-muted, #e4e4e7);
  color: var(--mad-text-muted, #52525b);
}
.mad-kanban-col-add svg { width: 14px; height: 14px; }
.mad-kanban-col-summary {
  padding: 0 12px 6px;
  font-size: 12px;
  color: var(--mad-text-muted, #71717a);
  font-variant-numeric: tabular-nums;
}

/* ── Cards container ── */
.mad-kanban-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 8px;
  min-height: 120px;
  transition: background .15s;
}
.mad-kanban-col--drag-over > .mad-kanban-cards {
  background: var(--mad-accent-subtle, rgba(99,102,241,.04));
}

/* ── Card ── */
.mad-kanban-card {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--mad-border, #e5e7eb);
  background: var(--mad-bg, #fff);
  padding: 12px;
  box-shadow: var(--mad-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
  cursor: pointer;
  transition: box-shadow .15s, transform .08s;
}
.mad-kanban-card:hover {
  box-shadow: var(--mad-shadow-md, 0 4px 12px rgba(0,0,0,.1));
}
.mad-kanban-card--dragging {
  opacity: 0.4;
}

/* Highlight animation (after manageCard) — termina no bg do tema (antes
   terminava em #fff fixo = flash branco no dark) */
@keyframes mad-kanban-highlight {
  0%   { background: rgba(59,130,246,.12); }
  100% { background: var(--mad-bg, #fff); }
}
.mad-kanban-card--highlight {
  animation: mad-kanban-highlight 2s ease-out;
}

/* ── Card: hover actions ── */
.mad-kanban-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s;
}
.mad-kanban-card:hover .mad-kanban-card-actions {
  opacity: 1;
}
.mad-kanban-card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--mad-border-strong, #d4d4d8);
  cursor: pointer;
}
.mad-kanban-card-menu-btn:hover {
  background: var(--mad-bg-muted, #f4f4f5);
  color: var(--mad-text-muted, #52525b);
}
.mad-kanban-card-menu-btn svg { width: 14px; height: 14px; }
.mad-kanban-card-grip {
  cursor: grab;
  padding: 2px;
  border-radius: 4px;
  color: var(--mad-border-strong, #d4d4d8);
}
.mad-kanban-card-grip:hover { color: var(--mad-text-muted, #71717a); }
.mad-kanban-card-grip:active { cursor: grabbing; }
.mad-kanban-card-grip svg { width: 14px; height: 14px; }

/* ── Card: actions menu (modo "menu" — popover do 3 pontinhos) ── */
.mad-kanban-card-menu-wrap {
  position: relative;
  display: inline-flex;
}
/* Posicionamento default absolute é fallback — no open, o helper JS
   _madKanbanAnchorMenu re-ancora com position:fixed (o overflow-y da coluna
   clipava o menu em cards no fim da lista). */
.mad-kanban-card-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 160px;
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: 6px;
  box-shadow: var(--mad-shadow-lg, 0 8px 20px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04));
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.mad-kanban-card-menu--footer {
  top: auto;
  bottom: calc(100% + 4px);
  right: 0;
  left: auto;
}
.mad-kanban-card-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--mad-text, #3f3f46);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.mad-kanban-card-menu-item:hover { background: var(--mad-bg-muted, #f4f4f5); }
.mad-kanban-card-menu-item svg { width: 14px; height: 14px; }
.mad-kanban-card-menu-item--primary { color: #2563eb; }
.mad-kanban-card-menu-item--danger  { color: var(--mad-danger, #dc2626); }
.mad-kanban-card-menu-item--success { color: var(--mad-success, #16a34a); }
.mad-kanban-card-menu-item--warning { color: var(--mad-warning, #d97706); }

/* ── Card: actions inline (modo "inline" — botões no footer) ── */
.mad-kanban-card-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.mad-kanban-card-actions-dropdown {
  position: relative;
  display: inline-flex;
  margin-top: 8px;
}
.mad-kanban-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mad-text, #3f3f46);
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.mad-kanban-card-btn:hover { background: var(--mad-bg-muted, #f4f4f5); border-color: var(--mad-border-strong, #d4d4d8); }
.mad-kanban-card-btn svg { width: 12px; height: 12px; }
.mad-kanban-card-btn--primary { color: #fff; background: #2563eb; border-color: #2563eb; }
.mad-kanban-card-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.mad-kanban-card-btn--danger  { color: var(--mad-danger-fg, #fff); background: var(--mad-danger, #dc2626); border-color: var(--mad-danger, #dc2626); }
.mad-kanban-card-btn--danger:hover  { background: #b91c1c; border-color: #b91c1c; }
.mad-kanban-card-btn--success { color: var(--mad-success-fg, #fff); background: var(--mad-success, #16a34a); border-color: var(--mad-success, #16a34a); }
.mad-kanban-card-btn--success:hover { background: #15803d; border-color: #15803d; }
.mad-kanban-card-btn--ghost   { background: transparent; border-color: transparent; }
.mad-kanban-card-btn--ghost:hover   { background: var(--mad-bg-muted, #f4f4f5); }
.mad-kanban-card-btn--dropdown { padding: 4px 8px; }

/* ── Card: badges ── */
.mad-kanban-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.mad-kanban-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.mad-kanban-badge--muted {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-text-muted, #71717a);
  background: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Card: content ── */
.mad-kanban-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mad-text, #18181b);
  margin-bottom: 4px;
}
.mad-kanban-card-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10px;
  font-style: italic;
  color: var(--mad-text-subtle, #a1a1aa);
  margin-bottom: 6px;
}

/* ── Card: meta rows (contact, seller, etc) ── */
.mad-kanban-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.mad-kanban-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mad-kanban-card-meta-row svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--mad-text-subtle, #a1a1aa);
}
.mad-kanban-card-meta-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-text-muted, #52525b);
}
.mad-kanban-card-meta-sub {
  padding-left: 18px;
  font-size: 10px;
  color: var(--mad-text-subtle, #a1a1aa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Card: meta inline (chips horizontais) ── */
.mad-kanban-card-meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 6px;
}
.mad-kanban-card-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--mad-text, #3f3f46);
  background: var(--mad-bg-muted, #f4f4f5);
  border-radius: 10px;
  white-space: nowrap;
}
.mad-kanban-card-meta-chip svg { width: 12px; height: 12px; }
.mad-kanban-card-meta-chip--muted { color: var(--mad-text-muted, #71717a); background: transparent; }
.mad-kanban-card-meta-chip--right { margin-left: auto; }

/* ── Card: meta position (block) ── */
.mad-kanban-card-meta--right  { text-align: right; }
.mad-kanban-card-meta--right  .mad-kanban-card-meta-row { justify-content: flex-end; }
.mad-kanban-card-meta--center { text-align: center; }
.mad-kanban-card-meta--center .mad-kanban-card-meta-row { justify-content: center; }

/* ── Card: meta-group (wrapper customizavel) ── */
.mad-kanban-card-meta-group {
  display: flex;
  margin-top: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.mad-kanban-card-meta-group--row    { flex-direction: row; }
.mad-kanban-card-meta-group--column { flex-direction: column; flex-wrap: nowrap; }
.mad-kanban-card-meta-group--justify-start   { justify-content: flex-start; }
.mad-kanban-card-meta-group--justify-end     { justify-content: flex-end; }
.mad-kanban-card-meta-group--justify-center  { justify-content: center; }
.mad-kanban-card-meta-group--justify-between { justify-content: space-between; }
.mad-kanban-card-meta-group--justify-around  { justify-content: space-around; }
.mad-kanban-card-meta-group--align-start  { align-items: flex-start; }
.mad-kanban-card-meta-group--align-end    { align-items: flex-end; }
.mad-kanban-card-meta-group--align-center { align-items: center; }

/* ── Card: footer ── */
.mad-kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--mad-bg-muted, #f4f4f5);
  padding-top: 8px;
  margin-top: 6px;
}
.mad-kanban-card-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--mad-success, #16a34a);
  font-variant-numeric: tabular-nums;
}
.mad-kanban-card-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--mad-text-subtle, #a1a1aa);
}
.mad-kanban-card-date svg { width: 10px; height: 10px; }
.mad-kanban-card-foot-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  color: var(--mad-text-muted, #71717a);
}
.mad-kanban-card-foot-text svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── Drag & drop indicator ── */
.mad-kanban-drop-indicator {
  height: 3px;
  background: var(--mad-accent, #818cf8);
  border-radius: 2px;
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Loading spinner (load more) ── */
.mad-kanban-loading {
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: var(--mad-text-subtle, #a1a1aa);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEPS — mad-steps-* / mad-step-*
   Variants: arrows, dots, numbers, progress
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base container ── */
.mad-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  position: relative;
  font-family: inherit;
}

/* ── Size modifiers ── */
.mad-steps--sm .mad-step-circle { width: 24px; height: 24px; font-size: 11px; }
.mad-steps--sm .mad-step-label { font-size: 12px; }
.mad-steps--sm .mad-step-desc { font-size: 11px; }

.mad-steps--lg .mad-step-circle { width: 40px; height: 40px; font-size: 16px; }
.mad-steps--lg .mad-step-label { font-size: 15px; }
.mad-steps--lg .mad-step-desc { font-size: 13px; }

/* ── Individual step ── */
.mad-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  text-align: center;
  min-width: 0;
}

/* ── Circle indicator ── */
.mad-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
  border: 2px solid var(--mad-border, #e4e4e7);
  background: var(--mad-bg-muted, #f4f4f5);
  color: var(--mad-text-muted, #71717a);
  position: relative;
  z-index: 2;
}
.mad-step-circle svg { width: 16px; height: 16px; }

/* ── Step states ── */
.mad-step--completed .mad-step-circle {
  background: var(--mad-primary, #18181b);
  border-color: var(--mad-primary, #18181b);
  color: #fff;
}
.mad-step--active .mad-step-circle {
  background: var(--mad-primary, #18181b);
  border-color: var(--mad-primary, #18181b);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(24,24,27,.1);
}
.mad-step--pending .mad-step-circle {
  background: var(--mad-bg-muted, #f4f4f5);
  border-color: var(--mad-border, #d4d4d8);
  color: var(--mad-text-muted, #71717a);
}
.mad-step--error .mad-step-circle {
  background: var(--mad-danger, #dc2626);
  border-color: var(--mad-danger, #dc2626);
  color: #fff;
}

/* ── Labels ── */
.mad-step-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mad-text, #18181b);
  line-height: 1.3;
  /* O passo é um flex track de largura 1/N; sem isto um rótulo maior que o
     track transbordava e COLIDIA com o vizinho (em 390px a trilha do checkout
     lia "Pagamen<>Confirmação"). Quebrar é feio; sobrepor é ilegível. */
  overflow-wrap: anywhere;
}

/* ── Tela estreita: dots mostram o nome só do passo ATIVO ──
   Quatro rótulos em ~90px cada não caem em lugar nenhum. Os pontos continuam
   contando o progresso (é o papel deles) e o texto fica no passo em que a
   pessoa está — que é a única pergunta que ela tem ali. */
@media (max-width: 520px) {
  .mad-steps--dots .mad-step-label,
  .mad-steps--dots .mad-step-desc {
    display: none;
  }
  .mad-steps--dots .mad-step--active .mad-step-label {
    display: block;
    white-space: normal;
  }
}
.mad-step--pending .mad-step-label { color: var(--mad-text-muted, #71717a); }
.mad-step--error .mad-step-label { color: var(--mad-danger, #dc2626); }

.mad-step-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--mad-text-muted, #71717a);
  line-height: 1.4;
}

/* ── Connector line (dots / numbers variants) ── */
.mad-steps-connector {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mad-border, #e4e4e7);
  z-index: 1;
}
.mad-steps--sm .mad-steps-connector { top: 12px; }
.mad-steps--lg .mad-steps-connector { top: 20px; }

.mad-steps-connector-fill {
  /* É IRMÃO do conector (não filho): sem posicionar, virava um item do flex
     com 33/66/100% da largura e espremia os passos — o checkout lia
     "Pagam ento". Sobrepõe a trilha, alinhado por tamanho como o conector. */
  position: absolute;
  top: 16px;
  left: 0;
  height: 2px;
  background: var(--mad-primary, #18181b);
  transition: width .4s ease;
  border-radius: 1px;
  z-index: 2;
}
.mad-steps--sm .mad-steps-connector-fill { top: 12px; }
.mad-steps--lg .mad-steps-connector-fill { top: 20px; }

/* ── Dots variant ── */
.mad-steps--dots .mad-step-circle {
  width: 12px;
  height: 12px;
  border-width: 2px;
  font-size: 0;
}
.mad-steps--dots .mad-step-circle svg { display: none; }
.mad-steps--dots .mad-steps-connector { top: 5px; }
.mad-steps--dots.mad-steps--sm .mad-step-circle { width: 10px; height: 10px; }
.mad-steps--dots.mad-steps--lg .mad-step-circle { width: 16px; height: 16px; }

/* ── Numbers variant ── */
.mad-steps--numbers .mad-step-circle {
  font-variant-numeric: tabular-nums;
}

/* ── Arrows variant ── */
.mad-steps--arrows {
  gap: 0;
}
.mad-steps--arrows .mad-step {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 28px;
  background: var(--mad-bg-muted, #f4f4f5);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  text-align: left;
  border-radius: 0;
  min-width: 0;
  overflow: hidden;
}
.mad-steps--arrows .mad-step:first-child {
  padding-left: 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  border-radius: var(--mad-radius-md, 8px) 0 0 var(--mad-radius-md, 8px);
}
.mad-steps--arrows .mad-step:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
  border-radius: 0 var(--mad-radius-md, 8px) var(--mad-radius-md, 8px) 0;
}
.mad-steps--arrows .mad-step--completed,
.mad-steps--arrows .mad-step--active {
  background: var(--mad-primary, #18181b);
  color: #fff;
}
.mad-steps--arrows .mad-step--completed .mad-step-label,
.mad-steps--arrows .mad-step--active .mad-step-label {
  color: #fff;
}
.mad-steps--arrows .mad-step--completed .mad-step-desc,
.mad-steps--arrows .mad-step--active .mad-step-desc {
  color: rgba(255,255,255,.7);
}
.mad-steps--arrows .mad-step--error {
  background: var(--mad-danger, #dc2626);
}
.mad-steps--arrows .mad-step--error .mad-step-label { color: #fff; }
.mad-steps--arrows .mad-step-circle {
  width: 24px; height: 24px;
  border: none;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 12px;
}
.mad-steps--arrows .mad-step--pending .mad-step-circle {
  background: rgba(0,0,0,.08);
  color: var(--mad-text-muted, #71717a);
}
.mad-steps--arrows .mad-step-label { margin-top: 0; }
.mad-steps--arrows .mad-step-desc { margin-top: 0; }
.mad-steps--arrows .mad-step-arrow-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.mad-steps--arrows .mad-steps-connector { display: none; }

/* ── Progress variant ── */
.mad-steps--progress .mad-steps-connector { display: none; }

.mad-steps-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--mad-bg-muted, #f4f4f5);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}
.mad-steps-progress-fill {
  height: 100%;
  background: var(--mad-primary, #18181b);
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Wizard container (mad-wizard) ──
   Indicador <x-steps> + painéis .mad-wizard-step. Painel inativo recebe
   .mad-hidden mas fica no DOM (estado dos campos sobrevive ao round-trip). */
.mad-wizard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mad-wizard-panels { position: relative; }
.mad-wizard-step { animation: madWizardIn .18s ease; }
@keyframes madWizardIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE — mad-tl-*
   ═══════════════════════════════════════════════════════════════════════════ */

.mad-timeline {
  position: relative;
  padding-left: 32px;
}
.mad-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mad-border, #e4e4e7);
}

/* ── Both-sides variant ── */
.mad-timeline--both {
  padding-left: 0;
}
.mad-timeline--both::before {
  left: 50%;
  transform: translateX(-50%);
}
.mad-timeline--both .mad-tl-item {
  width: 50%;
}
.mad-timeline--both .mad-tl-item--left {
  padding-right: 40px;
  text-align: right;
}
.mad-timeline--both .mad-tl-item--left .mad-tl-dot {
  left: auto;
  right: -12px;
}
.mad-timeline--both .mad-tl-item--right {
  margin-left: 50%;
  padding-left: 40px;
}
.mad-timeline--both .mad-tl-item--right .mad-tl-dot {
  left: -12px;
}

/* ── Individual item ── */
.mad-tl-item {
  position: relative;
  padding-bottom: 24px;
}
.mad-tl-item:last-child { padding-bottom: 0; }

/* ── Dot indicator ── */
.mad-tl-dot {
  position: absolute;
  left: -32px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mad-bg-muted, #f4f4f5);
  border: 2px solid var(--mad-border, #e4e4e7);
  z-index: 2;
}
.mad-tl-dot svg { width: 12px; height: 12px; color: var(--mad-text-muted, #71717a); }

.mad-tl-dot--success {
  background: #dcfce7;
  border-color: #86efac;
}
.mad-tl-dot--success svg { color: #16a34a; }

.mad-tl-dot--info {
  background: #dbeafe;
  border-color: #93c5fd;
}
.mad-tl-dot--info svg { color: #2563eb; }

.mad-tl-dot--warning {
  background: #fef3c7;
  border-color: #fcd34d;
}
.mad-tl-dot--warning svg { color: #d97706; }

.mad-tl-dot--danger {
  background: #fee2e2;
  border-color: #fca5a5;
}
.mad-tl-dot--danger svg { color: #dc2626; }

/* Cor em hex (tipo/etapa/categoria do cadastro): fundo e borda translúcidos
   da própria cor — leem sobre o fundo claro e o escuro —, ícone na cor. */
.mad-tl-dot--custom {
  background: color-mix(in srgb, var(--mad-tl-c) 18%, transparent);
  border-color: color-mix(in srgb, var(--mad-tl-c) 55%, transparent);
}
.mad-tl-dot--custom svg { color: var(--mad-tl-c); }

/* ── Time label ── */
.mad-tl-time {
  font-size: 11px;
  color: var(--mad-text-muted, #71717a);
  margin-bottom: 2px;
}

/* ── Title ── */
.mad-tl-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mad-text, #18181b);
  line-height: 1.4;
}

/* ── Body / description ── */
.mad-tl-body {
  font-size: 13px;
  color: var(--mad-text-muted, #71717a);
  line-height: 1.5;
  margin-top: 4px;
}

/* ── Embedded card ── */
.mad-tl-card {
  background: var(--mad-bg-muted, #f4f4f5);
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-md, 8px);
  padding: 12px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}

/* ── Item card wrapper (cards prop) ── */
.mad-tl-item-card {
  background: var(--mad-bg, #fff);
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-md, 8px);
  padding: 12px 16px;
}
.mad-timeline--cards .mad-tl-item { padding-bottom: 16px; }
.mad-timeline--cards .mad-tl-item:last-child { padding-bottom: 0; }

/* ── Action links ── */
.mad-tl-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.mad-tl-actions a,
.mad-tl-actions button {
  font-size: 12px;
  font-weight: 500;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.mad-tl-actions a:hover,
.mad-tl-actions button:hover {
  text-decoration: underline;
}

/* ── Date separator ── */
.mad-tl-date-sep {
  position: relative;
  padding: 12px 0;
}
.mad-timeline--both .mad-tl-date-sep {
  text-align: center;
}
.mad-tl-date-sep-label {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mad-text-muted, #71717a);
  background: var(--mad-bg-muted, #f4f4f5);
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: 999px;
  position: relative;
  z-index: 2;
}

/* ── Load more ── */
.mad-tl-load-more {
  text-align: center;
  padding: 16px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCANNER FIELD — mad-scanner-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Input group ── */
.mad-scanner-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mad-border, #d4d4d8);
  border-radius: var(--mad-radius-md, 8px);
  overflow: hidden;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.mad-scanner-input-group:focus-within {
  border-color: var(--mad-primary, #18181b);
  box-shadow: 0 0 0 2px rgba(24,24,27,.08);
}
.mad-scanner-input-group input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 14px;
  background: transparent;
  min-width: 0;
}

/* ── Scan button ── */
.mad-scanner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  flex-shrink: 0;
  background: var(--mad-bg-muted, #f4f4f5);
  border: none;
  border-left: 1px solid var(--mad-border, #e4e4e7);
  cursor: pointer;
  color: var(--mad-text-muted, #71717a);
  transition: background .2s, color .2s;
}
.mad-scanner-btn:hover {
  background: var(--mad-primary, #18181b);
  color: #fff;
}
.mad-scanner-btn svg { width: 18px; height: 18px; }

/* ── Camera viewfinder container ── */
.mad-scanner-viewfinder {
  margin-top: 8px;
  border-radius: var(--mad-radius-md, 8px);
  overflow: hidden;
  border: 1px solid var(--mad-border, #e4e4e7);
}

/* ── Camera header ── */
.mad-scanner-camera-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #18181b;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

/* ── Camera area ── */
.mad-scanner-camera {
  position: relative;
  min-height: 220px;
  background: #09090b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mad-scanner-camera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Camera footer ── */
.mad-scanner-camera-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: #18181b;
  gap: 4px;
}

/* ── Type toggle buttons ── */
.mad-scanner-type-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
}
.mad-scanner-type-toggle button {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.mad-scanner-type-toggle button:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.mad-scanner-type-toggle button.active {
  background: #fff;
  color: #18181b;
}

/* ── Close button ── */
.mad-scanner-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.mad-scanner-close-btn:hover {
  background: rgba(255,255,255,.3);
}
.mad-scanner-close-btn svg { width: 14px; height: 14px; }

/* ── State classes ── */
.mad-scanner-field--success .mad-scanner-input-group {
  border-color: #16a34a;
}
.mad-scanner-field--error .mad-scanner-input-group {
  border-color: var(--mad-danger, #dc2626);
}

/* ── Detected badge ── */
.mad-scanner-detected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #16a34a;
  margin-top: 6px;
}
.mad-scanner-detected svg { width: 14px; height: 14px; }

/* ── Scanline animation ── */
@keyframes mad-scanline {
  0%   { top: 10%; }
  100% { top: 85%; }
}
.mad-scanner-camera .mad-scanline {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  box-shadow: 0 0 8px rgba(34,197,94,.5);
  animation: mad-scanline 2s ease-in-out infinite alternate;
  z-index: 3;
}

/* ── Continuous scan list ── */
.mad-scanner-scan-list {
  max-height: 150px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-md, 8px);
}
.mad-scanner-scan-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--mad-border, #e4e4e7);
}
.mad-scanner-scan-list-item:last-child { border-bottom: none; }

.mad-scanner-scan-list-type {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--mad-bg-muted, #f4f4f5);
  color: var(--mad-text-muted, #71717a);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE FIELD — mad-image-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dropzone ── */
.mad-image-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  border: 2px dashed var(--mad-border, #d4d4d8);
  border-radius: var(--mad-radius-lg, 12px);
  /* Superfície do tema: branca fixa, o texto claro do escuro sumia por cima (1,27:1, fw#322). */
  background: var(--mad-bg, #fff);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: center;
  gap: 8px;
}
.mad-image-dropzone:hover {
  border-color: var(--mad-text-muted, #a1a1aa);
}
.mad-image-dropzone--dragover {
  border-color: var(--mad-primary, #2563eb);
  background: color-mix(in srgb, var(--mad-primary, #2563eb) 6%, var(--mad-bg, #fff));
}

.mad-image-dropzone-icon {
  color: var(--mad-text-muted, #a1a1aa);
  margin-bottom: 4px;
}
.mad-image-dropzone-icon svg { width: 32px; height: 32px; }

.mad-image-dropzone-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--mad-text, #18181b);
}
.mad-image-dropzone-text span {
  color: var(--mad-primary-ink, var(--mad-primary, #2563eb));
  text-decoration: underline;
  cursor: pointer;
}

.mad-image-dropzone-formats {
  font-size: 12px;
  color: var(--mad-text-muted, #71717a);
}

.mad-image-dropzone-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* ── Preview ── */
.mad-image-preview {
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-lg, 12px);
  overflow: hidden;
  background: var(--mad-bg-muted, #f4f4f5);
}
.mad-image-preview-img {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mad-bg-subtle, #f9fafb);
}
.mad-image-preview-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Toolbar ── */
.mad-image-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  background: var(--mad-bg, #fff);
  border-top: 1px solid var(--mad-border, #e4e4e7);
}

.mad-image-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mad-radius-md, 8px);
  border: none;
  background: transparent;
  color: var(--mad-text-muted, #71717a);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mad-image-toolbar-btn:hover {
  background: var(--mad-bg-muted, #f4f4f5);
  color: var(--mad-text, #18181b);
}
.mad-image-toolbar-btn svg { width: 16px; height: 16px; }

.mad-image-toolbar-btn--active {
  background: var(--mad-primary, #18181b);
  color: var(--mad-primary-fg, #fff);
}
.mad-image-toolbar-btn--active:hover {
  background: var(--mad-primary, #18181b);
  color: var(--mad-primary-fg, #fff);
  opacity: .9;
}

.mad-image-toolbar-btn--danger:hover {
  background: var(--mad-danger-subtle, #fee2e2);
  color: var(--mad-danger-text, #b91c1c);
}

.mad-image-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--mad-border, #e4e4e7);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Camera ── */
.mad-image-camera {
  border-radius: var(--mad-radius-lg, 12px);
  overflow: hidden;
  border: 1px solid var(--mad-border, #e4e4e7);
}
.mad-image-camera video {
  width: 100%;
  display: block;
  background: #09090b;
}

.mad-image-camera-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  background: var(--mad-bg-muted, #f4f4f5);
  border-top: 1px solid var(--mad-border, #e4e4e7);
}

/* ── Capture button (iOS-style) ── */
.mad-image-capture-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--mad-text, #18181b);
  background: transparent;
  cursor: pointer;
  transition: transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mad-image-capture-btn::after {
  content: '';
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mad-text, #18181b);
  transition: transform .15s;
}
.mad-image-capture-btn:hover { transform: scale(1.05); }
.mad-image-capture-btn:active::after { transform: scale(.85); }

/* ── Camera switch button ── */
.mad-image-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--mad-border, #d4d4d8);
  background: var(--mad-bg, #fff);
  color: var(--mad-text-muted, #71717a);
  cursor: pointer;
  transition: background .15s;
}
.mad-image-switch-btn:hover {
  background: var(--mad-bg-muted, #f4f4f5);
}
.mad-image-switch-btn svg { width: 16px; height: 16px; }

/* ── Crop modal ── */
.mad-image-crop-container { max-height: 60vh; overflow: hidden; }
.mad-image-crop-container img { max-width: 100%; display: block; }

/* ── Error state ── */
.mad-image-field--error .mad-image-dropzone {
  border-color: var(--mad-danger, #dc2626);
}

/* ═══════════════════════════════════════════════════════════════════
   OTP FIELD
   ═══════════════════════════════════════════════════════════════════ */

.mad-otp-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mad-otp-input {
  width: 48px;
  height: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: var(--mad-input-weight, 600);
  font-style: var(--mad-input-style, normal);
  border: 1px solid var(--mad-border, #d1d5db);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: var(--mad-input-bg, #fff);
  color: var(--mad-input-color, var(--mad-text, #111827));
  caret-color: transparent;
  padding: 0;
  -webkit-text-security: none;
}

.mad-otp-input:focus {
  border-color: var(--mad-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.mad-otp-input.mad-input-error {
  border-color: var(--mad-danger, #ef4444);
}

.mad-otp-input.mad-input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

.mad-otp-input:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--mad-bg-muted, #f4f4f5);
}

.mad-otp-separator {
  color: var(--mad-text-subtle, #9ca3af);
  font-size: 18px;
  user-select: none;
  margin: 0 2px;
  line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   48. COMPONENTE — CONTEXT MENU
   ═══════════════════════════════════════════════════════════════════ */

.mad-context { position: relative; }

.mad-context-menu {
  position: absolute;
  min-width: 180px;
  background: var(--mad-bg);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-md);
  box-shadow: var(--mad-shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1));
  z-index: 200;
  padding: 4px;
}

/* Animacao */
.mad-context-enter       { transition: opacity 120ms ease-out, transform 120ms ease-out; }
.mad-context-enter-start { opacity: 0; transform: scale(.95); }
.mad-context-enter-end   { opacity: 1; transform: scale(1); }
.mad-context-leave       { transition: opacity 80ms ease-in; }
.mad-context-leave-start { opacity: 1; }
.mad-context-leave-end   { opacity: 0; }

/* Item */
.mad-context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--mad-radius-sm);
  font-size: var(--mad-text-sm);
  color: var(--mad-text);
  cursor: pointer;
  user-select: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background var(--mad-t);
  line-height: 1.4;
}
.mad-context-item:hover { background: var(--mad-bg-muted); }
.mad-context-item:focus-visible { outline: 2px solid var(--mad-primary); outline-offset: -2px; }
.mad-context-item:disabled,
.mad-context-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.mad-context-item-icon { width: 14px; height: 14px; flex-shrink: 0; }
.mad-context-item-label { flex: 1; }

/* Variantes */
.mad-context-item-danger       { color: var(--mad-danger); }
.mad-context-item-danger:hover { background: var(--mad-danger-subtle); }

.mad-context-item-success       { color: var(--mad-success); }
.mad-context-item-success:hover { background: var(--mad-success-subtle, rgba(16,185,129,.08)); }

/* Kbd shortcut */
.mad-context-kbd {
  margin-left: auto;
  font-size: 11px;
  font-family: inherit;
  color: var(--mad-text-subtle);
  background: var(--mad-bg-muted);
  border: 1px solid var(--mad-border);
  border-radius: var(--mad-radius-sm);
  padding: 1px 5px;
  line-height: 1.4;
}

/* Separator */
.mad-context-sep { height: 1px; background: var(--mad-border); margin: 4px 0; }

/* Label/heading */
.mad-context-label {
  padding: 5px 10px 3px;
  font-size: var(--mad-text-xs);
  font-weight: 700;
  color: var(--mad-text-subtle);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════════════════════
   SIGNATURE FIELD
   ═══════════════════════════════════════════════════════════════════ */

/* ── Main container ── */
.mad-signature {
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-lg, 12px);
  overflow: hidden;
  /* O campo segue o tema; só o PAPEL (onde se desenha) continua branco (fw#322). */
  background: var(--mad-bg, #fff);
}

/* ── Mode pills ── */
.mad-signature-modes {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
}
.mad-signature-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--mad-radius-md, 8px);
  border: none;
  background: var(--mad-bg-muted, #f4f4f5);
  color: var(--mad-text-muted, #71717a);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mad-signature-pill:hover {
  background: var(--mad-border, #e4e4e7);
  color: var(--mad-text, #18181b);
}
.mad-signature-pill.active {
  background: var(--mad-primary, #2563eb);
  color: var(--mad-primary-fg, #fff);
}
.mad-signature-pill svg { width: 14px; height: 14px; }

/* ── Canvas wrapper ── */
.mad-signature-canvas-wrap {
  position: relative;
  margin: 8px;
  border: 1px dashed var(--mad-border, #d4d4d8);
  border-radius: var(--mad-radius-md, 8px);
  /* Papel: a tinta do desenho é escura, o fundo é branco nos dois temas. */
  background: #fff;
  cursor: crosshair;
}
.mad-signature-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--mad-radius-md, 8px);
}

/* ── Expand button (desktop) ── */
.mad-signature-expand-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--mad-radius-sm, 6px);
  border: 1px solid var(--mad-border, #d4d4d8);
  background: rgba(255,255,255,.85);
  /* Fica sobre o papel branco: tinta fixa, não a do tema. */
  color: #52525b;
  cursor: pointer;
  transition: background .15s;
  z-index: 2;
}
.mad-signature-expand-btn:hover {
  background: #fff;
  color: #18181b;
}
.mad-signature-expand-btn svg { width: 14px; height: 14px; }

/* ── Toolbar ── */
.mad-signature-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--mad-border, #e4e4e7);
  flex-wrap: wrap;
}
.mad-signature-colors {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mad-signature-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  padding: 0;
}
.mad-signature-color:hover { transform: scale(1.1); }
.mad-signature-color.active { border-color: var(--mad-primary, #2563eb); }

.mad-signature-widths {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mad-signature-width {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--mad-radius-sm, 6px);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .15s;
  padding: 0;
}
.mad-signature-width:hover { background: var(--mad-bg-muted, #f4f4f5); }
.mad-signature-width.active {
  border-color: var(--mad-primary, #2563eb);
  background: var(--mad-primary-subtle, #eff6ff);
}
.mad-signature-width-dot {
  border-radius: 50%;
  background: currentColor;
}

.mad-signature-sep {
  width: 1px;
  height: 20px;
  background: var(--mad-border, #e4e4e7);
  margin: 0 2px;
  flex-shrink: 0;
}

.mad-signature-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--mad-radius-sm, 6px);
  border: none;
  background: var(--mad-bg-muted, #f4f4f5);
  color: var(--mad-text-muted, #71717a);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
  gap: 4px;
}
.mad-signature-toolbar-btn:hover {
  background: var(--mad-border, #e4e4e7);
  color: var(--mad-text, #18181b);
}
.mad-signature-toolbar-btn svg { width: 14px; height: 14px; }
.mad-signature-toolbar-btn--danger {
  /* Sobre o cinza do botão o vermelho cheio dava 4,39:1 no claro e 3,08:1 no escuro. */
  color: var(--mad-danger-text, #b91c1c);
}
.mad-signature-toolbar-btn--danger:hover {
  background: var(--mad-danger-subtle, #fee2e2);
  color: var(--mad-danger-text, #b91c1c);
}

/* ── Type mode ── */
.mad-signature-type {
  padding: 12px;
}
.mad-signature-type-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--mad-border, #d4d4d8);
  border-radius: var(--mad-radius-md, 8px);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  background: var(--mad-bg, #fff);
  color: var(--mad-text, #18181b);
}
.mad-signature-type-input:focus {
  border-color: var(--mad-primary, #2563eb);
}
/* Sem regra própria o texto de exemplo caía no cinza do tema do app
   (1,28:1 no claro, 3,5:1 no escuro) — fw#322. */
.mad-signature-type-input::placeholder {
  color: var(--mad-text-muted, #71717a);
  opacity: 1;
}
.mad-signature-fonts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.mad-signature-font-card {
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-md, 8px);
  padding: 16px 8px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--mad-bg, #fff);
}
.mad-signature-font-card:hover {
  border-color: var(--mad-text-muted, #a1a1aa);
}
.mad-signature-font-card.active {
  border-color: var(--mad-primary, #2563eb);
  background: var(--mad-primary-subtle, #eff6ff);
}
.mad-signature-font-card-preview {
  font-size: 24px;
  line-height: 1.2;
  min-height: 36px;
  color: var(--mad-text, #18181b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mad-signature-font-card-name {
  font-size: 11px;
  color: var(--mad-text-muted, #71717a);
  margin-top: 8px;
}

/* ── Type color picker ── */
.mad-signature-type-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

/* ── Upload mode ── */
.mad-signature-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  margin: 8px;
  border: 2px dashed var(--mad-border, #d4d4d8);
  border-radius: var(--mad-radius-md, 8px);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: center;
  gap: 8px;
  background: var(--mad-bg, #fff);
}
.mad-signature-upload:hover {
  border-color: var(--mad-text-muted, #a1a1aa);
}
.mad-signature-upload--dragover {
  border-color: var(--mad-primary, #2563eb);
  background: color-mix(in srgb, var(--mad-primary, #2563eb) 6%, var(--mad-bg, #fff));
}
.mad-signature-upload svg { width: 32px; height: 32px; color: var(--mad-text-muted, #a1a1aa); }
.mad-signature-upload-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--mad-text, #18181b);
}
.mad-signature-upload-hint {
  font-size: 12px;
  color: var(--mad-text-muted, #71717a);
}

/* ── Preview state ── */
.mad-signature-preview {
  position: relative;
  margin: 8px;
  border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-md, 8px);
  overflow: hidden;
  background: #fff;
}
.mad-signature-preview-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.mad-signature-preview-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.mad-signature-preview-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--mad-border, #e4e4e7);
}

/* ── Fullscreen overlay ── */
.mad-signature-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--mad-bg, #fff);
  display: flex;
  flex-direction: column;
}
.mad-signature-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mad-border, #e4e4e7);
}
.mad-signature-fullscreen-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mad-text, #18181b);
}
.mad-signature-fullscreen canvas {
  flex: 1;
  display: block;
  width: 100%;
  background: #fff;
}
.mad-signature-fullscreen-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--mad-border, #e4e4e7);
  flex-wrap: wrap;
}

/* ── Empty placeholder ── */
.mad-signature-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  color: var(--mad-text-muted, #a1a1aa);
  cursor: pointer;
}
.mad-signature-empty svg { width: 28px; height: 28px; }
.mad-signature-empty-text {
  font-size: 13px;
}

/* ── Error state ── */
.mad-field-error .mad-signature {
  border-color: var(--mad-danger, #dc2626);
}

/* ── Disabled ── */
.mad-signature--disabled {
  opacity: .55;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .mad-signature-fonts { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   MAD MAIL LAYOUT
   ═══════════════════════════════════════════ */

.mad-mail-layout {
    display: grid;
    grid-template-columns: 220px 360px 1fr;
    height: calc(100vh - 140px);
    border: 1px solid var(--mad-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mad-bg);
}

/* Sidebar */
.mad-mail-sidebar {
    border-right: 1px solid var(--mad-border);
    background: var(--mad-bg-subtle, var(--mad-bg));
    overflow-y: auto;
}

.mad-mail-folders {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
}

.mad-mail-folder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--mad-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.mad-mail-folder-item:hover {
    background: var(--mad-bg-hover, rgba(0,0,0,0.04));
}

.mad-mail-folder-item.active {
    background: var(--mad-bg-hover, rgba(0,0,0,0.06));
    font-weight: 600;
}

.mad-mail-folder-item span:first-of-type {
    flex: 1;
}

.mad-mail-folder-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--mad-bg-hover, rgba(0,0,0,0.06));
    color: var(--mad-text-muted);
}

.mad-mail-folder-badge-primary {
    background: var(--mad-primary, #3b82f6);
    color: #fff;
}

/* Thread list */
.mad-mail-list {
    border-right: 1px solid var(--mad-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mad-mail-list-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mad-border);
}

.mad-mail-list-header .mad-field { margin: 0; }

.mad-mail-thread-list {
    flex: 1;
    overflow-y: auto;
}

.mad-mail-thread-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mad-border);
    cursor: pointer;
    transition: background 0.15s;
}

.mad-mail-thread-item:hover {
    background: var(--mad-bg-hover, rgba(0,0,0,0.02));
}

.mad-mail-thread-item.selected {
    background: var(--mad-bg-hover, rgba(0,0,0,0.04));
}

.mad-mail-thread-item.unread .mad-mail-thread-sender,
.mad-mail-thread-item.unread .mad-mail-thread-subject {
    font-weight: 700;
}

.mad-mail-thread-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mad-mail-thread-sender {
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mad-mail-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mad-primary, #3b82f6);
    flex-shrink: 0;
}

.mad-mail-thread-date {
    font-size: 11px;
    color: var(--mad-text-muted);
    white-space: nowrap;
}

.mad-mail-thread-subject {
    font-size: 13px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mad-mail-thread-preview {
    font-size: 12px;
    color: var(--mad-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Message panel */
.mad-mail-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mad-mail-panel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--mad-border);
    gap: 8px;
}

.mad-mail-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mad-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mad-mail-toolbar-btn:hover {
    background: var(--mad-bg-hover, rgba(0,0,0,0.06));
    color: var(--mad-text);
}

.mad-mail-toolbar-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.mad-mail-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    border-top: 1px solid var(--mad-border);
}

/* ── Thread view ── */

.mad-mail-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: var(--mad-text-muted, #9ca3af);
    gap: 12px;
}

.mad-mail-empty-state p {
    font-size: 14px;
    margin: 0;
}

.mad-mail-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mad-mail-thread-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--mad-border);
}

.mad-mail-thread-header h3 {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.mad-mail-thread-meta {
    font-size: 12px;
    color: var(--mad-text-muted, #9ca3af);
}

.mad-mail-thread-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Individual message */
.mad-mail-message {
    padding: 20px 24px;
    border-bottom: 1px solid var(--mad-border);
}

.mad-mail-message.last {
    border-bottom: none;
}

.mad-mail-message-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mad-mail-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.mad-mail-message-meta {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.mad-mail-message-sender {
    font-size: 13px;
    font-weight: 600;
}

.mad-mail-message-date {
    font-size: 11px;
    color: var(--mad-text-muted, #9ca3af);
    white-space: nowrap;
    margin-left: auto;
}

.mad-mail-message-content {
    font-size: 14px;
    line-height: 1.7;
    padding-left: 48px;
    color: var(--mad-text, #374151);
}

/* Message body */
.mad-message-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.mad-message-body a {
    color: var(--mad-primary, #3b82f6);
    text-decoration: underline;
}

.mad-message-body p {
    margin: 0 0 8px;
}

.mad-message-body p:last-child {
    margin-bottom: 0;
}

/* Attachments */
.mad-mail-attachments {
    padding-left: 48px;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mad-mail-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 16px;
    background: var(--mad-bg-subtle, #f9fafb);
    border: 1px solid var(--mad-border);
    font-size: 12px;
    color: var(--mad-text);
    text-decoration: none;
    transition: background 0.15s;
    max-width: 240px;
}

.mad-mail-attachment-chip:hover {
    background: var(--mad-bg-hover, #f3f4f6);
    text-decoration: none;
    color: var(--mad-text);
}

.mad-mail-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mad-mail-attachment-size {
    color: var(--mad-text-muted, #9ca3af);
    flex-shrink: 0;
}

/* ── Reply box (Gmail-style) ── */

.mad-mail-reply {
    border-top: 1px solid var(--mad-border);
    padding: 16px 24px;
    background: var(--mad-bg);
}

.mad-mail-reply-box {
    margin-bottom: 8px;
}

.mad-mail-reply-box .mad-field {
    margin: 0;
}

.mad-mail-reply-box .mad-label {
    display: none;
}

.mad-mail-reply-box .mad-html-editor-wrap {
    border-radius: 8px;
}

.mad-mail-reply-box .mad-html-editor-wrap .tox-edit-area__iframe {
    min-height: 60px;
    font-size: 13px;
}

.mad-mail-reply-box .mad-html-editor-wrap .tox-toolbar__primary {
    padding: 4px 8px;
}

.mad-mail-reply-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Attach Button (mad-attach-btn) ── */

.mad-attach-btn-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

.mad-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--mad-text-muted, #6b7280);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mad-attach-btn:hover {
    background: var(--mad-bg-hover, rgba(0,0,0,0.06));
    color: var(--mad-text);
}

.mad-attach-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.mad-attach-btn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mad-attach-btn-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--mad-bg-subtle, #f3f4f6);
    border: 1px solid var(--mad-border);
    font-size: 11px;
    color: var(--mad-text-muted);
    max-width: 200px;
}

.mad-attach-btn-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mad-attach-btn-chip-size {
    color: var(--mad-text-muted, #9ca3af);
    flex-shrink: 0;
    font-size: 10px;
}

.mad-attach-btn-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--mad-text-muted);
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    border-radius: 50%;
    transition: color 0.15s;
}

.mad-attach-btn-chip-remove:hover {
    color: var(--mad-danger, #ef4444);
}

/* Transporter inside mail panel */
.mad-mail-panel .mad-transporter {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mad-mail-panel .mad-transporter-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 900px) {
    .mad-mail-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .mad-mail-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--mad-border);
    }

    .mad-mail-folders {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .mad-mail-list {
        border-right: none;
        border-bottom: 1px solid var(--mad-border);
        max-height: 50vh;
    }

    .mad-mail-panel {
        min-height: 400px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Avatar Field — circular avatar with upload button
   ═══════════════════════════════════════════════════════════════════════════ */

.mad-avatar-field-header {
    margin-bottom: 12px;
}

.mad-avatar-field-desc {
    font-size: 13px;
    color: var(--mad-text-muted);
    margin-top: 2px;
}

/* Avatar-primeiro: o círculo é o controle inteiro. Overlay de câmera no
   hover/focus convida a trocar; o X é uma bolinha no canto do círculo.
   Sem card em volta — a imagem é a protagonista. */
.mad-avatar-field-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
}

.mad-avatar-field-circle {
    display: block;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mad-bg-muted);
    border: 2px solid var(--mad-border);
    cursor: pointer;
    margin: 0;
    transition: border-color var(--mad-t), box-shadow var(--mad-t);
}

.mad-avatar-field-circle:hover {
    border-color: var(--mad-primary, #18181b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-primary, #18181b) 12%, transparent);
}

/* Sem foto: borda tracejada convida ao primeiro upload. */
.mad-avatar-field-circle.is-empty {
    border-style: dashed;
}

.mad-avatar-field-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mad-avatar-field-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mad-avatar-field-placeholder svg,
.mad-avatar-field-placeholder i[data-lucide] {
    width: 40%;
    height: 40%;
    color: var(--mad-text-muted);
}

.mad-avatar-field-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity var(--mad-t);
    pointer-events: none;
}

.mad-avatar-field-circle:hover .mad-avatar-field-overlay,
.mad-avatar-field-circle:focus-visible .mad-avatar-field-overlay {
    opacity: 1;
}

.mad-avatar-field-overlay svg,
.mad-avatar-field-overlay i[data-lucide] {
    width: 28%;
    height: 28%;
    min-width: 16px;
    min-height: 16px;
    color: #fff;
}

.mad-avatar-field-remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border);
    color: var(--mad-text-muted);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transition: color var(--mad-t), border-color var(--mad-t);
}

.mad-avatar-field-remove:hover {
    color: var(--mad-danger, #D93A2B);
    border-color: currentColor;
}

.mad-avatar-field-remove svg,
.mad-avatar-field-remove i[data-lucide] {
    width: 12px;
    height: 12px;
}

.mad-avatar-field-hint {
    font-size: 11px;
    color: var(--mad-text-muted);
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Settings Nav — sidebar de configuracoes (Profile, Account, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

.mad-settings-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.mad-settings-nav {
    width: 220px;
    flex-shrink: 0;
    border: 1px solid var(--mad-border);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.mad-settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mad-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 2px;
    text-decoration: none;
}

.mad-settings-nav-item:last-child {
    margin-bottom: 0;
}

.mad-settings-nav-item:hover {
    background: var(--mad-bg-muted);
}

.mad-settings-nav-item.active {
    background: var(--mad-bg-muted);
    font-weight: 500;
}

.mad-settings-nav-item.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.mad-settings-nav-item svg,
.mad-settings-nav-item i[data-lucide] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mad-settings-content {
    flex: 1;
    max-width: 640px;
    min-width: 0;
}

.mad-settings-avatar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.mad-settings-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mad-bg-muted);
}

.mad-settings-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mad-settings-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mad-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mad-settings-avatar-placeholder svg,
.mad-settings-avatar-placeholder i[data-lucide] {
    width: 28px;
    height: 28px;
    color: var(--mad-text-muted);
}

.mad-settings-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--mad-border);
    background: var(--mad-bg);
    color: var(--mad-text);
    cursor: pointer;
    margin: 0;
    transition: background 0.15s;
}

.mad-settings-upload-btn:hover {
    background: var(--mad-bg-muted);
}

.mad-settings-2fa-card {
    padding: 16px;
    border: 1px solid var(--mad-border);
    border-radius: 8px;
}

.mad-settings-2fa-card--success {
    border-color: var(--mad-border-success, #86efac);
    background: var(--mad-bg-success, #f0fdf4);
}

.mad-settings-2fa-method {
    text-align: left;
    padding: 16px;
    border: 1px solid var(--mad-border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    transition: border-color 0.15s;
}

.mad-settings-2fa-method:hover {
    border-color: var(--mad-primary);
}

.mad-settings-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.mad-settings-section-desc {
    font-size: 14px;
    color: var(--mad-text-muted);
    margin: 0 0 24px 0;
}

.mad-settings-back-btn {
    margin-bottom: 16px;
}

/* ─── Wizard do 2FA Google Authenticator ─── */
.mad-2fa-step {
    border: 1px solid var(--mad-border);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--mad-bg, #fff);
}

.mad-2fa-step-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.mad-2fa-step-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mad-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.mad-2fa-step-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.mad-2fa-step-sub {
    font-size: 13px;
    color: var(--mad-text-muted);
    line-height: 1.4;
}

.mad-2fa-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 40px;
}

.mad-2fa-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--mad-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--mad-text);
    text-decoration: none;
    background: var(--mad-bg-muted, #f8fafc);
    transition: border-color 0.15s, background 0.15s;
}

.mad-2fa-store-badge:hover {
    border-color: var(--mad-primary);
    background: var(--mad-bg, #fff);
    color: var(--mad-text);
    text-decoration: none;
}

.mad-2fa-qr-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.mad-2fa-qr-img {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid var(--mad-border);
    border-radius: 10px;
    background: #fff;
}

.mad-2fa-qr-placeholder {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--mad-border);
    border-radius: 10px;
    color: var(--mad-text-muted);
}

.mad-2fa-secret {
    margin-top: 4px;
}

.mad-2fa-secret-label {
    display: block;
    font-size: 12px;
    color: var(--mad-text-muted);
    margin-bottom: 6px;
}

.mad-2fa-secret-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.mad-2fa-secret-row code {
    flex: 1;
    padding: 10px 12px;
    background: var(--mad-bg-muted, #f8fafc);
    border: 1px solid var(--mad-border);
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 2px;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mad-2fa-secret-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--mad-border);
    border-radius: 6px;
    background: var(--mad-bg, #fff);
    color: var(--mad-text);
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}

.mad-2fa-secret-copy:hover {
    border-color: var(--mad-primary);
    background: var(--mad-bg-muted, #f8fafc);
}

@media (max-width: 768px) {
    .mad-settings-layout {
        flex-direction: column;
        gap: 16px;
    }

    .mad-settings-nav {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .mad-settings-nav-item {
        width: auto;
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .mad-settings-content {
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   COMPONENTE — SIDEBAR NAV (rail de ícones + painel expansível)
   ═══════════════════════════════════════════════════════════════════ */

.mad-sidebar-nav {
    display: flex;
    align-items: stretch;
}

.mad-sidebar-nav-rail {
    width: 44px;
    border-right: 1px solid var(--mad-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
    flex-shrink: 0;
}

.mad-sidebar-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--mad-text-muted);
    border-radius: var(--mad-radius);
    transition: background var(--mad-t), color var(--mad-t);
}

.mad-sidebar-nav-btn:hover {
    background: var(--mad-bg-subtle);
    color: var(--mad-text);
}

.mad-sidebar-nav-btn.active {
    background: var(--mad-bg-subtle);
    color: var(--mad-primary-ink, var(--mad-primary));
}

.mad-sidebar-nav-separator {
    border-top: 1px solid var(--mad-border);
    width: 28px;
    margin: 4px 0;
}

.mad-sidebar-nav-folder {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--mad-radius);
    font-size: 12px;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mad-text-muted);
    transition: background var(--mad-t), color var(--mad-t);
}

.mad-sidebar-nav-folder:hover {
    background: var(--mad-bg-subtle);
    color: var(--mad-text);
}

.mad-sidebar-nav-folder.active {
    background: var(--mad-primary-bg, rgba(67, 97, 238, 0.08));
    color: var(--mad-primary-ink, var(--mad-primary));
    font-weight: 500;
}

.mad-sidebar-nav-panel {
    width: 200px;
    border-right: 1px solid var(--mad-border);
    padding: 10px;
    flex-shrink: 0;
}

/* ── Tree View ──────────────────────────────────────────────────────── */

.mad-tree {
    font-size: 13px;
    user-select: none;
}

.mad-tree-actions {
    padding: 4px 0;
}

.mad-tree-actions-top {
    margin-bottom: 4px;
}

.mad-tree-actions-bottom {
    margin-top: 4px;
}

.mad-tree-node-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--mad-radius, 4px);
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 26px;
}

.mad-tree-node-content:hover {
    background: var(--mad-bg-subtle, rgba(0, 0, 0, 0.04));
}

.mad-tree-node-content.active {
    background: var(--mad-primary-bg, rgba(67, 97, 238, 0.08));
    color: var(--mad-primary-ink, var(--mad-primary));
    font-weight: 500;
}

.mad-tree-toggle {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: var(--mad-text-muted, #9ca3af);
}

.mad-tree-toggle:hover {
    background: var(--mad-bg-subtle, rgba(0, 0, 0, 0.06));
    color: var(--mad-text, #374151);
}

.mad-tree-toggle-spacer {
    width: 16px;
    flex-shrink: 0;
}

.mad-tree-icon {
    flex-shrink: 0;
    color: var(--mad-text-muted, #9ca3af);
}

.mad-tree-node-content.active .mad-tree-icon {
    color: var(--mad-primary-ink, var(--mad-primary));
}

.mad-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mad-tree-badge {
    font-size: 10px;
    color: var(--mad-text-muted, #9ca3af);
    background: var(--mad-bg-subtle, rgba(0, 0, 0, 0.04));
    border-radius: 8px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    line-height: 16px;
}

.mad-tree-children {
    /* overflow: hidden; */
}

.mad-tree-node-highlight .mad-tree-node-content {
    animation: mad-tree-flash 1.5s ease;
}

@keyframes mad-tree-flash {
    0%, 100% { background: transparent; }
    20% { background: var(--mad-primary-bg, rgba(67, 97, 238, 0.12)); }
}

/* ──────────────── Tag Chip (row-view partial) ──────────────── */
.mad-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px solid;
    line-height: 1.4;
}
.mad-tag-chip button {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 0 0 2px;
    opacity: 0.6;
    color: inherit;
}
.mad-tag-chip button:hover { opacity: 1; }

/* ── DB Blocks (generic pivot row collection) ── */
.mad-db-blocks { position: relative; }
.mad-db-blocks-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mad-db-blocks-list.mad-db-blocks-stack { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.mad-db-blocks-empty { font-size: 12px; color: var(--mad-text-muted, #888); padding: 8px 4px; }
.mad-db-blocks-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px dashed var(--mad-border, #444);
    background: transparent;
    color: var(--mad-text-muted, #888);
    cursor: pointer;
    white-space: nowrap;
}
.mad-db-blocks-add:hover {
    border-color: var(--mad-primary, #6366f1);
    color: var(--mad-primary, #6366f1);
}
.mad-db-blocks-stack .mad-db-blocks-add { align-self: flex-start; }
.mad-db-blocks-popover {
    position: absolute;
    z-index: 1000;
    margin-top: 6px;
    min-width: 280px;
    max-width: 360px;
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 12px;
}
.mad-db-block-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: 6px;
    background: var(--mad-bg, #fff);
}

/* ─────────────────────────────────────────────────────────────────────────
   mad-data-table — grid read-only embeddable (sem JS, sem Alpine)

   Mesma cara da <mad-grid>: moldura de cartão, cabeçalho, altura de linha,
   zebra, hover, linhas e colunas pelas --mad-dg-* do tema, em todo layout e
   no escuro. Uma <table class="mad-dt"> escrita à mão entra no mesmo padrão.
   A tabela não tem div em volta: a moldura fica na própria <table>
   (border-collapse: separate) e o raio desce até as células dos cantos.

   Quem divide regra com a grade: os layouts (stripe, dock, glass, border,
   inset, float) e o .mad-dark, mais acima; a zebra e o hover (`.mad-dg-row-*`);
   as linhas e colunas do tema (fórum #126); o escuro do app (fw#295). Aqui
   ficam as medidas que na grade vêm de `.mad-table` + `.mad-dg-*` juntas, e o
   que a grade tem no notch-erp.css/notch-dark.css (que o app não recebe num
   `composer update`). Classes da grade (`mad-dg-wrap`…) NÃO entram no Blade:
   o mad-ui.js trataria a tabela como grade.
   ───────────────────────────────────────────────────────────────────────── */
.mad-dt {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    color: var(--mad-text, #1f2937);
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: var(--mad-radius-lg, 12px);
}
/* A tabela não corta os filhos: o fundo das células das pontas acompanha a
   curva (o raio desce pela cascata, então o layout sem raio zera os cantos). */
.mad-dt > :is(thead, tbody, tfoot),
.mad-dt > :is(thead, tbody, tfoot) > tr { border-radius: inherit; }
.mad-dt > :first-child > tr:first-child > :first-child { border-top-left-radius: inherit; }
.mad-dt > :first-child > tr:first-child > :last-child { border-top-right-radius: inherit; }
.mad-dt > :last-child > tr:last-child > :first-child { border-bottom-left-radius: inherit; }
.mad-dt > :last-child > tr:last-child > :last-child { border-bottom-right-radius: inherit; }
.mad-dt > thead { background: var(--mad-bg-subtle); }
.mad-dt > thead > tr > th {
    padding: 10px 14px;
    text-align: left;
    font-size: var(--mad-dg-head-font-size, 12px);
    font-weight: var(--mad-dg-head-font-weight, 500);
    color: var(--mad-dg-head-color, var(--mad-text-muted));
    white-space: nowrap;
    background: var(--mad-dg-head-bg, var(--mad-bg-subtle));
    border-bottom: var(--mad-dg-head-border-width, 1px) solid var(--mad-dg-head-border-color, var(--mad-border));
}
.mad-dt > tbody > tr > td {
    padding: 8px 14px;
    vertical-align: middle;
    font-size: 0.84rem;
    color: var(--mad-dg-body-color, var(--mad-text));
    border-bottom: 1px solid var(--mad-border);
}
.mad-dt > tbody > tr:last-child > td { border-bottom-style: none; }
/* Total geral: o rodapé da grade (`.mad-dg-foot` + `.mad-dg-total-cell`). */
.mad-dt > tfoot { background: var(--mad-bg-subtle); }
.mad-dt > tfoot > tr > td {
    padding: 8px 14px;
    vertical-align: middle;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mad-dg-body-color, var(--mad-text));
    border-bottom: 1px solid var(--mad-border);
}
/* Com quebra, o total geral da grade vira faixa (`.mad-dg-grand-total`). */
.mad-dt:has(> tbody > .mad-dt-group) > tfoot > tr > td {
    padding-top: 16px;
    padding-bottom: 16px;
    background: color-mix(in srgb, var(--mad-primary) 13%, var(--mad-bg));
    color: var(--mad-text);
    border-top: 2px solid var(--mad-primary);
    border-bottom: none;
    font-size: var(--mad-text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* bordered: linha entre colunas, como a grade com --mad-dg-col-border-*
   (a regra comum dá 0px sem tema; aqui a prop pede pelo menos 1px). */
.mad-dt.mad-dt-bordered > :is(thead, tbody, tfoot) > tr > :is(th, td):not(:last-child) {
    border-right: max(1px, var(--mad-dg-col-border-width, 1px)) solid var(--mad-dg-col-border-color, var(--mad-border));
}
/* compact = densidade compacta da grade (density="compact"). */
.mad-dt.mad-dt-compact { --mad-dg-cell-py: 7px; }
.mad-dt.mad-dt-compact > :is(tbody, tfoot) > tr > td {
    padding-top: var(--mad-dg-cell-py);
    padding-bottom: var(--mad-dg-cell-py);
}

/* Quebras (group-by): a faixa da grade (`.mad-dg-group-cell` e níveis). O
   recuo da 1ª coluna vem do Blade, inline. Hover não pinta faixa nem subtotal. */
.mad-dt > tbody > tr.mad-dt-group > td {
    padding: 8px 12px;
    /* A barra da esquerda é sombra, não borda: borda faria quina com a faixa
       de 10px que separa os grupos de nível 0. */
    --mad-dt-group-bar: var(--mad-border-strong);
    box-shadow: inset 3px 0 0 var(--mad-dt-group-bar);
    border-bottom: 1px solid var(--mad-border);
    background: var(--mad-bg-subtle, #f8fafc);
    color: var(--mad-text-muted);
    font-size: var(--mad-text-xs);
    font-weight: 600;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
}
.mad-dt > tbody > tr.mad-dt-group-l0 > td {
    padding-top: 11px;
    padding-bottom: 11px;
    --mad-dt-group-bar: var(--mad-primary);
    border-bottom-color: color-mix(in srgb, var(--mad-primary) 22%, var(--mad-border));
    background: color-mix(in srgb, var(--mad-primary) 9%, var(--mad-bg));
    color: var(--mad-text);
    font-size: var(--mad-text-sm);
    font-weight: 700;
}
.mad-dt > tbody > tr.mad-dt-group-l1 > td {
    background: var(--mad-bg-muted);
    color: var(--mad-text);
    --mad-dt-group-bar: color-mix(in srgb, var(--mad-primary) 45%, var(--mad-border));
}
.mad-dt > tbody > tr.mad-dt-group-l0:not(:first-child) > td {
    border-top: 10px solid var(--mad-bg);
}
.mad-dt-group .mad-dt-group-count {
    margin-left: 6px;
    color: var(--mad-text-muted);
    font-size: var(--mad-text-xs);
    font-weight: 400;
}
.mad-dt-group .mad-dt-group-subtotals { float: right; }
.mad-dt-group .mad-dt-group-subtotal {
    margin-left: 12px;
    font-size: var(--mad-text-xs);
}
.mad-dt-group .mad-dt-st-lbl {
    margin-right: 4px;
    color: var(--mad-text-muted);
    font-weight: 400;
}
.mad-dt-group .mad-dt-st-val {
    color: var(--mad-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Subtotal do grupo (`.mad-dg-group-total` e níveis). */
.mad-dt > tbody > tr.mad-dt-group-total > td {
    padding-top: 9px;
    padding-bottom: 9px;
    border-top: 1px solid var(--mad-border);
    border-bottom: 1px solid var(--mad-border);
    background: var(--mad-bg-subtle, #f8fafc);
    color: var(--mad-text);
    font-size: var(--mad-text-sm);
    font-variant-numeric: tabular-nums;
}
.mad-dt > tbody > tr.mad-dt-group-total-l1 > td { background: var(--mad-bg-muted); }
.mad-dt > tbody > tr.mad-dt-group-total-l0 > td {
    padding-top: 12px;
    padding-bottom: 12px;
    background: color-mix(in srgb, var(--mad-primary) 7%, var(--mad-bg));
    border-bottom: 2px solid color-mix(in srgb, var(--mad-primary) 30%, var(--mad-border));
    font-weight: 700;
}
.mad-dt-group-total em {
    font-style: normal;
    color: var(--mad-text-muted);
}

/* Sem registros: o vazio da grade (`.mad-dg-empty`), dentro da moldura. */
.mad-dt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--mad-text-subtle);
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: var(--mad-radius-lg, 12px);
}
.mad-dt-empty-icon {
    width: 32px;
    height: 32px;
    opacity: .3;
}

/* Tema ERP: o que a grade recebe do notch-erp.css (cabeçalho, linha de 11px,
   respiro lateral de 8px e 12 nas pontas, fonte de 13px, hover neutro, sem
   zebra). Fica aqui porque o notch-erp.css é cópia do app e não chega num
   `composer update`; as --erp-* são do tema e têm reserva. */
body.mad-layout-erp .mad-dt { font-size: 13px; }
body.mad-layout-erp .mad-dt > thead,
body.mad-layout-erp .mad-dt > thead > tr > th { background: var(--mad-dg-head-bg, var(--erp-head-bg, #f9fafb)); }
body.mad-layout-erp .mad-dt > thead > tr > th {
    color: var(--mad-dg-head-color, var(--erp-muted, #6b7280));
    font-size: var(--mad-dg-head-font-size, 12px);
    font-weight: var(--mad-dg-head-font-weight, 500);
    letter-spacing: 0;
    border-bottom-color: var(--mad-dg-head-border-color, var(--erp-divider, #eef0f3));
}
body.mad-layout-erp .mad-dt-zebra > tbody > tr:nth-child(even) { background: var(--mad-dg-row-odd-bg, var(--mad-dg-row-even-bg, var(--mad-bg))); }
body.mad-layout-erp .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover > td { background: var(--mad-dg-row-hover-bg, var(--erp-row-hover, #f9fafb)); }
body.mad-layout-erp .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total) > td {
    padding-top: var(--mad-dg-cell-py, 11px);
    padding-bottom: var(--mad-dg-cell-py, 11px);
    border-bottom-color: var(--mad-dg-row-border-color, var(--erp-row-line, #f1f3f6));
}
body.mad-layout-erp .mad-dt > :is(thead, tbody) > tr > :is(th, td) {
    padding-left: 8px;
    padding-right: 8px;
}
body.mad-layout-erp .mad-dt > :is(thead, tbody) > tr > :is(th, td):first-child { padding-left: 12px; }
body.mad-layout-erp .mad-dt > :is(thead, tbody) > tr > :is(th, td):last-child { padding-right: 12px; }

/* Escuro do app: o que a grade recebe do notch-dark.css (fundo do cabeçalho,
   hover da linha e texto das células). A cor e as linhas do cabeçalho seguem
   a regra do escuro que a grade e a .mad-dt dividem, no começo do arquivo. */
html[data-theme="dark"] .mad-dt > thead > tr > th { background: #202028 !important; }
html[data-theme="dark"] .mad-dt > tbody > tr:not(.mad-dt-group, .mad-dt-group-total):hover { background: #202028 !important; }
html[data-theme="dark"] .mad-dt > tbody > tr:not(.mad-dt-group) > td { color: #d4d4d8 !important; }

/* ============================================================
   Dashboard Filters — <mad-dash-filters style="..."> renderers
   ============================================================ */

/* --- Popover Alpine (shared by toolbar + chips) --- */
.mad-dashf-anchor {
    position: relative;
    display: inline-block;
}
.mad-dashf-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.05);
    padding: 14px;
    min-width: 280px;
    max-width: min(360px, calc(100vw - 24px));
}
.mad-dashf-pop[x-cloak] { display: none !important; }
.mad-dashf-pop-head {
    font-size: 11px;
    color: var(--mad-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mad-dashf-pop-close {
    background: transparent;
    border: none;
    color: var(--mad-text-muted, #6b7280);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}
.mad-dashf-pop-close:hover {
    background: var(--mad-bg-muted, #f3f4f6);
    color: var(--mad-text, #0f172a);
}
.mad-dashf-pop-actions {
    display: flex;
    /* Painel estreito (celular): os botões descem de linha em vez de sair dele. */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}

/* --- Toolbar style --- */
.mad-dashf-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: var(--mad-radius-lg, 12px);
    margin-bottom: 16px;
    flex-wrap: wrap;
    font-family: inherit;
}
.mad-dashf-tb-divider {
    width: 1px;
    height: 24px;
    background: var(--mad-border, #e5e7eb);
    margin: 0 4px;
}
.mad-dashf-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    color: var(--mad-text, #0f172a);
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}
.mad-dashf-mini:hover { background: var(--mad-bg-muted, #f3f4f6); }
/* Texto sobre o fundo do destaque: o azul puro (#3b82f6) dava 3,4:1 no claro e o
   rótulo, com opacity .7, 2,2:1 (fw#310). A tinta escurece no claro e clareia no
   escuro (--mad-dashf-ink), seguindo a cor do destaque: ≥6:1 nos dois. */
.mad-dashf-mini.active {
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    color: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 65%, var(--mad-dashf-ink, #000));
}
.mad-dashf-mini-lbl {
    color: var(--mad-text-muted, #6b7280);
    font-weight: 400;
}
.mad-dashf-mini.active .mad-dashf-mini-lbl {
    color: inherit;
}
.mad-dashf-mini-chev {
    font-size: 10px;
    opacity: .6;
}
.mad-dashf-spacer { flex: 1; }
.mad-dashf-pill {
    font-size: 11px;
    padding: 3px 8px;
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    color: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 65%, var(--mad-dashf-ink, #000));
    border-radius: 99px;
    font-weight: 600;
}

/* Celular (fw#495): abaixo de 640 px a barra vira um botão "Filtros (n)" que
   abre os filtros empilhados, um por linha, em vez de quebrar em duas linhas
   desalinhadas. Padrão no tema ERP; opt-in com mobile="button" e
   mobile="inline" desliga (o seletor do ERP fica aqui, como o do cartão da
   grade). Fora disso o botão não aparece. */
.mad-dashf-m-toggle { display: none; }
@media (max-width: 639.98px) {
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])) > .mad-dashf-m-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mad-text, #0f172a);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])) > .mad-dashf-m-toggle .mad-dashf-mini-chev { margin-left: auto; transition: transform .15s; }
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])).mad-dashf-m-open > .mad-dashf-m-toggle .mad-dashf-mini-chev { transform: rotate(180deg); }
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])):not(.mad-dashf-m-open) > :not(.mad-dashf-m-toggle),
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])) > :is(.mad-dashf-tb-divider, .mad-dashf-spacer, .mad-dashf-pill) { display: none; }
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])).mad-dashf-m-open { flex-direction: column; align-items: stretch; }
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])).mad-dashf-m-open > .mad-dashf-anchor { display: block; }
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])).mad-dashf-m-open .mad-dashf-mini { width: 100%; }
  :is(.mad-dashf-toolbar[data-mobile="button"], .mad-layout-erp .mad-dashf-toolbar:not([data-mobile="inline"])).mad-dashf-m-open .mad-dashf-mini .mad-dashf-mini-chev { margin-left: auto; }
}

/* --- Chips style --- */
.mad-dashf-chips-bar {
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mad-dashf-chips-lbl {
    font-size: 11px;
    color: var(--mad-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-right: 4px;
}
.mad-dashf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 10px;
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 30%, transparent);
    border-radius: 6px;
    font-size: 13px;
    color: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 65%, var(--mad-dashf-ink, #000));
    font-weight: 500;
}
.mad-dashf-chip-cat {
    color: var(--mad-text-muted, #6b7280);
    font-weight: 400;
}
.mad-dashf-chip-val { font-weight: 600; }
.mad-dashf-chip-x {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--mad-dashf-accent, #3b82f6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.mad-dashf-chip-x:hover { background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 15%, transparent); }
.mad-dashf-chip-add {
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--mad-border-strong, #d1d5db);
    border-radius: 6px;
    font-size: 13px;
    color: var(--mad-text-muted, #6b7280);
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}
.mad-dashf-chip-add:hover {
    border-color: var(--mad-dashf-accent, #3b82f6);
    color: var(--mad-dashf-accent, #3b82f6);
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
}
.mad-dashf-chip-clear {
    padding: 6px 10px;
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--mad-text-muted, #6b7280);
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    font-family: inherit;
}
.mad-dashf-chip-clear:hover { color: var(--mad-danger, #dc2626); }
.mad-dashf-chip-refresh {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px dashed var(--mad-border, #d1d5db);
    color: var(--mad-text-muted, #6b7280);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}
.mad-dashf-chip-refresh:hover {
    border-color: var(--mad-dashf-accent, #3b82f6);
    color: var(--mad-dashf-accent, #3b82f6);
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    transform: rotate(180deg);
}
.mad-dashf-chip-spacer { flex: 1; }
.mad-dashf-chip-count {
    font-size: 11px;
    color: var(--mad-text-muted, #6b7280);
    padding: 4px 10px;
    background: var(--mad-bg-muted, #f3f4f6);
    border-radius: 99px;
    font-weight: 600;
}
.mad-dashf-pop-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.mad-dashf-pop-type-btn {
    padding: 8px 10px;
    background: var(--mad-bg-muted, #f3f4f6);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    color: var(--mad-text, #0f172a);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.mad-dashf-pop-type-btn:hover { background: var(--mad-border, #e5e7eb); }
.mad-dashf-pop-type-btn.active {
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    border-color: var(--mad-dashf-accent, #3b82f6);
    color: var(--mad-dashf-accent, #3b82f6);
}

/* --- Sidebar style + layout --- */
.mad-dashf-sb {
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: 10px;
    padding: 0;
    position: sticky;
    top: 16px;
    /* overflow visible: hidden clipava o popover absoluto do period-monthyear;
       os cantos sao arredondados na head/apply. */
    overflow: visible;
}
.mad-dashf-sb-head { border-radius: 10px 10px 0 0; }
.mad-dashf-sb-apply { border-radius: 0 0 10px 10px; }
.mad-dashf-sb-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mad-border, #e5e7eb);
    background: var(--mad-bg-subtle, #fafafa);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mad-dashf-sb-title {
    font-size: 13px;
    font-weight: 600;
}
.mad-dashf-sb-count {
    font-size: 11px;
    color: var(--mad-dashf-accent, #3b82f6);
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
}
.mad-dashf-sb-group {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mad-border, #e5e7eb);
}
.mad-dashf-sb-group:last-child { border-bottom: none; }
.mad-dashf-sb-glabel {
    font-size: 11px;
    font-weight: 600;
    color: var(--mad-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mad-dashf-sb-gbadge {
    font-size: 10px;
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    color: var(--mad-dashf-accent, #3b82f6);
    padding: 1px 6px;
    border-radius: 99px;
    font-weight: 600;
}
.mad-dashf-sb-apply {
    padding: 14px 16px;
    background: var(--mad-bg-subtle, #fafafa);
}
/* --- Form style — formulario inline tradicional --- */
/* O form-section e o unico filho do card: o respiro de baixo dele (padding +
   margin = 32px) somava ao padding do card e empurrava a listagem para baixo. */
.mad-dashf-form > .mad-card-content { padding: var(--mad-s4); }
.mad-dashf-form .mad-form-section { padding-bottom: 0; margin-bottom: 0; }
.mad-dashf-form .mad-form-actions { margin-top: 4px; }
.mad-dashf-form .mad-dashf-form-period {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mad-border, #e5e7eb);
}
.mad-dashf-form-badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--mad-primary, #18181b);
    background: var(--mad-primary-subtle, #f4f4f5);
    padding: 4px 10px;
    border-radius: 99px;
}

.mad-dashf-layout-left,
.mad-gridf-layout-left {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: start;
}
.mad-dashf-layout-right,
.mad-gridf-layout-right {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 16px;
    align-items: start;
}
.mad-dashf-main,
.mad-gridf-main { min-width: 0; }
/* Sidebar tem 260px: o segmented do periodo (mad-seg) e mais largo que isso
   e vazava por cima do main. Dentro da sidebar ele quebra linha. */
.mad-dashf-sb .mad-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
@media (max-width: 900px) {
    .mad-dashf-layout-left,
    .mad-gridf-layout-left,
    .mad-dashf-layout-right,
    .mad-gridf-layout-right { grid-template-columns: 1fr; }
    /* sidebar acima do conteudo, sem sticky (senao cobre o main) */
    .mad-dashf-sb { position: static; order: 0 !important; }
}

/* --- Active filter summary bar (used by dashboards above main content) --- */
.mad-dash-summary-bar {
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mad-dash-summary-lbl {
    font-size: 11px;
    color: var(--mad-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-right: 4px;
}
.mad-dash-summary-chip {
    font-size: 12px;
    background: color-mix(in srgb, var(--mad-dashf-accent, #3b82f6) 10%, transparent);
    color: var(--mad-dashf-accent, #3b82f6);
    padding: 4px 10px;
    border-radius: 99px;
    font-weight: 500;
}
.mad-dash-summary-chip strong { font-weight: 600; }

/* ============================================================
   Segmented control — <mad-segmented> / <mad-segmented-item>
   ============================================================ */
.mad-seg {
    display: inline-flex;
    background: var(--mad-bg-muted, #f3f4f6);
    border-radius: 7px;
    padding: 3px;
    gap: 2px;
    vertical-align: middle;
}
.mad-seg-outline {
    background: var(--mad-bg, #fff);
    border: 1px solid var(--mad-border, #e5e7eb);
}
.mad-seg-dark { background: #1e293b; }

.mad-seg-item {
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    border: none;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    color: var(--mad-text-muted, #6b7280);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .12s ease, color .12s ease;
    font-family: inherit;
}
.mad-seg-item:hover:not(.active):not(:disabled) { color: var(--mad-text, #0f172a); }
.mad-seg-item.active {
    background: var(--mad-bg, #fff);
    color: var(--mad-text, #0f172a);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.mad-seg-dark .mad-seg-item { color: #cbd5e1; }
.mad-seg-dark .mad-seg-item:hover:not(.active) { color: #fff; }
.mad-seg-dark .mad-seg-item.active {
    background: #0f172a;
    color: #fff;
}
.mad-seg-outline .mad-seg-item.active {
    background: var(--mad-primary, #0f172a);
    color: var(--mad-primary-fg, #fff);
}
.mad-seg-item:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.mad-seg-sm .mad-seg-item {
    padding: 4px 9px;
    font-size: 11.5px;
}
.mad-seg-lg .mad-seg-item {
    padding: 8px 16px;
    font-size: 14px;
}
.mad-seg-item .mad-seg-icon {
    font-size: 13px;
    line-height: 0;
}

/* Period month/year popover */
.mad-pmy-popover[x-cloak] { display: none !important; }



/* ── Workflow map (<mad-wf-map>) — mapa do fluxo de aprovação ─────────── */
.mad-wf-map { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.mad-wf-map-empty { color: var(--mad-muted, #7a8699); font-size: 13px; margin: 8px 0; }
.mad-wf-map-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mad-wf-map-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef2f7; color: #52607a; }
.mad-wf-map-status-running { background: #e8f1ff; color: #2f6fed; }
.mad-wf-map-status-approved { background: #e7f6ee; color: #2f8f5b; }
.mad-wf-map-status-rejected { background: #fdecea; color: #d93a2b; }
.mad-wf-map-status-returned { background: #fdf3e0; color: #b97a12; }
.mad-wf-map-status-cancelled { background: #eef2f7; color: #7a8699; }
.mad-wf-map-record { font-size: 13px; font-weight: 600; color: var(--mad-ink, #1e2633); }
.mad-wf-map-layout { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; }
.mad-wf-map-canvas { flex: 1 1 auto; min-width: 0; border: 1px solid var(--mad-border, #e3e8ef); border-radius: 12px; overflow: auto; background: var(--mad-surface-2, #f8fafc); display: flex; }
.mad-wf-map-canvas svg { display: block; margin: auto; width: 100%; height: 100%; min-width: 100%; }
.mad-wf-map-node-name { font-size: 11px; font-weight: 700; fill: var(--mad-ink, #1e2633); }
.mad-wf-map-node-kind { font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mad-wf-map-edge-label { font-size: 9px; fill: #7a8699; font-weight: 600; }
.mad-wf-map-node.is-active rect { animation: madWfPulse 1.6s ease-in-out infinite; }
@keyframes madWfPulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }

/* Linha do tempo (coluna direita): eventos traduzidos, mais recente no topo */
.mad-wf-map-timeline { flex: 0 0 340px; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--mad-border, #e3e8ef); border-radius: 12px; background: var(--mad-surface, #fff); overflow: hidden; }
.mad-wf-map-timeline-title { flex: 0 0 auto; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7a8699; border-bottom: 1px solid var(--mad-border, #e3e8ef); }
.mad-wf-map-history { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; flex: 1 1 auto; }
.mad-wf-map-history li { display: flex; gap: 10px; padding: 8px 14px; position: relative; }
.mad-wf-map-history li::before { content: ''; position: absolute; left: 18px; top: 24px; bottom: -6px; width: 2px; background: var(--mad-border, #e6ebf2); }
.mad-wf-map-history li:last-child::before { display: none; }
.mad-wf-map-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: #9aa4b2; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--mad-surface, #fff); }
.mad-wf-map-dot-ok { background: #3da86f; }
.mad-wf-map-dot-info { background: #2f6fed; }
.mad-wf-map-dot-warn { background: #e8a13c; }
.mad-wf-map-dot-danger { background: #d93a2b; }
.mad-wf-map-dot-muted { background: #9aa4b2; }
.mad-wf-map-dot-branch { background: #8a63d2; }
.mad-wf-map-entry { flex: 1; min-width: 0; }
.mad-wf-map-entry-title { font-size: 12.5px; font-weight: 700; color: var(--mad-ink, #1e2633); line-height: 1.35; }
.mad-wf-map-entry-detail { font-size: 12px; color: #52607a; margin-top: 1px; word-break: break-word; }
.mad-wf-map-entry-meta { font-size: 11px; color: #9aa4b2; margin-top: 2px; }

/* Modal dedicada "Acompanhamento da aprovação": 80% × 80% da tela */
.mad-modal-overlay.mad-wf-map-overlay .mad-modal { width: 80vw; max-width: 80vw; height: 80vh; max-height: 80vh; }
.mad-modal-overlay.mad-wf-map-overlay .mad-modal-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

@media (max-width: 860px) {
    .mad-wf-map { height: auto; }
    .mad-wf-map-layout { flex-direction: column; }
    .mad-wf-map-canvas svg { height: auto; }
    .mad-wf-map-timeline { flex: 0 0 auto; max-height: 280px; }
    .mad-modal-overlay.mad-wf-map-overlay .mad-modal { width: 94vw; max-width: 94vw; height: 92vh; max-height: 92vh; }
    .mad-modal-overlay.mad-wf-map-overlay .mad-modal-body { overflow-y: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Célula de mídia (transformadores file-avatar / file-thumb / file-link /
   file-gallery) + Mad Lightbox
   ═══════════════════════════════════════════════════════════════════════════ */

.mad-cell-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--mad-bg-muted);
    border: 1px solid var(--mad-border);
    cursor: zoom-in;
    vertical-align: middle;
    flex-shrink: 0;
    transition: box-shadow var(--mad-t), border-color var(--mad-t);
}

.mad-cell-media:hover {
    border-color: var(--mad-primary, #18181b);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mad-primary, #18181b) 15%, transparent);
}

.mad-cell-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mad-cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.mad-cell-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

.mad-cell-media-file {
    cursor: pointer;
    color: var(--mad-text-muted);
}

.mad-cell-media-file svg {
    width: 55%;
    height: 55%;
}

.mad-cell-gallery {
    display: inline-flex;
    align-items: center;
}

/* Thumbs sobrepostas estilo "stack de avatares" */
.mad-cell-gallery .mad-cell-thumb {
    box-shadow: 0 0 0 2px var(--mad-bg, #fff);
}

.mad-cell-gallery .mad-cell-thumb + .mad-cell-thumb {
    margin-left: -10px;
}

.mad-cell-gallery-hidden {
    display: none;
}

.mad-cell-gallery-more {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--mad-bg-muted);
    border: 1px solid var(--mad-border);
    color: var(--mad-text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.mad-cell-gallery-more:hover {
    color: var(--mad-text);
    border-color: var(--mad-text-muted);
}

.mad-cell-file-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--mad-link, var(--mad-primary, #18181b));
    text-decoration: none;
    font-size: 12.5px;
    max-width: 220px;
}

.mad-cell-file-link:hover span {
    text-decoration: underline;
}

.mad-cell-file-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.mad-cell-file-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mad-cell-file-link-dead {
    color: var(--mad-text-muted);
    cursor: default;
}

/* ── Lightbox ── overlay always-dark de propósito (foco na imagem) */
.mad-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 12, 20, .88);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mad-lightbox-figure {
    margin: 0;
    max-width: min(88vw, 1100px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mad-lightbox-img {
    max-width: 100%;
    max-height: calc(88vh - 48px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
    background: #101423;
}

.mad-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #cbd5e1;
    font-size: 13px;
}

.mad-lightbox-caption {
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mad-lightbox-count {
    color: #7c8698;
    font-variant-numeric: tabular-nums;
}

.mad-lightbox-dl {
    color: #93c5fd;
    text-decoration: none;
}

.mad-lightbox-dl:hover {
    text-decoration: underline;
}

.mad-lightbox-close,
.mad-lightbox-prev,
.mad-lightbox-next {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    font-size: 17px;
    cursor: pointer;
    transition: background .15s ease;
}

.mad-lightbox-close:hover,
.mad-lightbox-prev:hover,
.mad-lightbox-next:hover {
    background: rgba(255, 255, 255, .18);
}

.mad-lightbox-close { top: 18px; right: 18px; }
.mad-lightbox-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.mad-lightbox-next  { right: 18px; top: 50%; transform: translateY(-50%); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD TABS (<mad-dashboard-tabs>) + KPI STRIP/CARD + GOAL LADDER +
   SEGMENT STATS — widgets de BI gerencial (2026-08)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── <mad-dashboard-tabs> ── */
.mad-dbtabs { display: flex; flex-direction: column; gap: 14px; }
.mad-dbtabs-strip {
    display: flex; align-items: stretch; gap: 4px;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--mad-border);
}
.mad-dbtabs-strip::-webkit-scrollbar { display: none; }
.mad-dbtabs-tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px; font-size: .85rem; font-weight: 600;
    color: var(--mad-text-muted); white-space: nowrap;
    border-radius: 8px 8px 0 0; transition: background .15s, color .15s;
}
.mad-dbtabs-tab:hover:not([disabled]) { color: var(--mad-text); background: color-mix(in srgb, var(--mad-primary) 6%, transparent); }
.mad-dbtabs-tab[disabled] { opacity: .45; cursor: not-allowed; }
.mad-dbtabs-icon { width: 15px; height: 15px; }
.mad-dbtabs-badge {
    font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 99px;
    background: color-mix(in srgb, var(--mad-primary) 12%, transparent);
    color: var(--mad-primary-ink, var(--mad-primary));
}
/* variante pills (Power BI): aba ativa = bloco sólido */
.mad-dbtabs-pills .mad-dbtabs-tab.is-active {
    background: var(--mad-primary); color: #fff;
}
.mad-dbtabs-pills .mad-dbtabs-tab.is-active .mad-dbtabs-badge { background: rgba(255,255,255,.2); color: #fff; }
/* variante underline */
.mad-dbtabs-underline .mad-dbtabs-tab { border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mad-dbtabs-underline .mad-dbtabs-tab.is-active { color: var(--mad-primary-ink, var(--mad-primary)); border-bottom-color: var(--mad-primary); }

.mad-dbtabs-panes { min-height: 200px; }
.mad-dbtabs-pane { animation: mad-dbtabs-fade .18s ease; }
@keyframes mad-dbtabs-fade { from { opacity: .35; } to { opacity: 1; } }
.mad-dbtabs-loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 64px 0; color: var(--mad-text-muted); font-size: .9rem;
}
.mad-dbtabs-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--mad-border); border-top-color: var(--mad-primary);
    animation: mad-dbtabs-spin .7s linear infinite;
}
@keyframes mad-dbtabs-spin { to { transform: rotate(360deg); } }
.mad-dbtabs-error {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 48px 0; color: var(--mad-danger, #dc2626); font-size: .9rem;
}

/* ── <mad-kpi-strip> ── */
.mad-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mad-kpi-strip-min, 200px), 1fr));
    gap: var(--mad-kpi-strip-gap, 14px);
}
.mad-kpi-strip[data-cols] { grid-template-columns: repeat(var(--mad-kpi-strip-cols), minmax(0, 1fr)); }
.mad-kpi-strip-sticky {
    position: sticky; top: var(--mad-kpi-sticky-top, 0); z-index: 30;
    background: var(--mad-bg, transparent);
    padding-bottom: 6px;
}
.mad-kpi-strip > :is(.mad-kpi-card, .mad-stat) { min-width: 0; } /* obrigatório em grid */

/* ── <mad-kpi-card> ── */
.mad-kpi-card { padding: 0; }
.mad-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
/* Rótulo e selo de variação lado a lado; no cartão estreito a linha QUEBRA e o
   selo desce — antes era o rótulo que encolhia ("Vendas" virava "VEN…"). */
.mad-kpi-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.mad-kpi-head { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.mad-kpi-label {
    font-size: 12.5px; font-weight: 500;
    color: var(--mad-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mad-kpi-icon { width: 14px; height: 14px; color: var(--mad-text-muted); flex: 0 0 auto; }
.mad-kpi-value {
    font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    line-height: 1.15; color: var(--mad-text);
}
.mad-kpi-foot { font-size: 12.5px; color: var(--mad-text-muted); }
.mad-kpi-context { font-size: 12.5px; color: var(--mad-text-muted); line-height: 1.35; }
.mad-kpi-progress {
    height: 7px; border-radius: 99px; overflow: hidden;
    background: color-mix(in srgb, var(--mad-text-muted) 16%, transparent);
    margin-top: 2px;
}
.mad-kpi-progress > span { display: block; height: 100%; border-radius: 99px; transition: width .3s ease; }
.mad-kpi-spark { margin-top: 4px; }
.mad-kpi-spark svg { display: block; width: 100%; height: 34px; }
.mad-kpi-outline { border: 1.5px solid var(--mad-kpi-accent, var(--mad-primary)); box-shadow: none; }
.mad-kpi-outline .mad-kpi-value { color: var(--mad-kpi-accent, var(--mad-primary)); }
/* pill de variação */
.mad-kpi-pill {
    flex: 0 0 auto; font-size: .7rem; font-weight: 700; padding: 2px 8px;
    border-radius: 99px; white-space: nowrap;
}
.mad-kpi-pill-up   { background: color-mix(in srgb, var(--mad-success, #059669) 12%, transparent); color: var(--mad-success, #059669); }
.mad-kpi-pill-down { background: color-mix(in srgb, var(--mad-danger, #dc2626) 12%, transparent);  color: var(--mad-danger, #dc2626); }
.mad-kpi-pill-flat { background: color-mix(in srgb, var(--mad-text-muted) 14%, transparent); color: var(--mad-text-muted); }
/* tooltip ⓘ — NUNCA dentro de elemento com overflow:hidden */
.mad-kpi-help { position: relative; display: inline-flex; align-items: center; cursor: help; color: var(--mad-text-muted); font-size: .72rem; margin-left: 2px; flex: 0 0 auto; border-radius: 99px; }
.mad-kpi-help-icon { width: 13px; height: 13px; display: block; }
.mad-kpi-help:hover, .mad-kpi-help:focus-visible { color: var(--mad-text); }
.mad-kpi-help-tip {
    display: none; position: absolute; z-index: 60; left: 0; top: calc(100% + 6px);
    width: 240px; padding: 8px 10px; border-radius: 8px;
    background: var(--mad-text, #18181b); color: #fff;
    font-size: .72rem; font-weight: 400; line-height: 1.4; white-space: normal;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.mad-kpi-help:hover .mad-kpi-help-tip, .mad-kpi-help:focus .mad-kpi-help-tip { display: block; }

/* Card que filtra a lista ou abre outra tela (click-filter / click-target,
   <mad-kpi-card> e <mad-metric-card>). Ativo = o filtro da tela está nele. */
.mad-kpi-clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.mad-kpi-clickable:hover { border-color: color-mix(in srgb, var(--mad-primary) 45%, var(--mad-border)); }
.mad-kpi-clickable:focus-visible { outline: 2px solid var(--mad-primary); outline-offset: 2px; }
.mad-kpi-clickable[aria-pressed="true"] {
    border-color: var(--mad-primary);
    background: color-mix(in srgb, var(--mad-primary) 5%, var(--mad-bg));
    box-shadow: inset 0 0 0 1px var(--mad-primary), var(--mad-shadow-sm);
}

/* ── KPI no tema ERP: um visual só para <mad-kpi-card>, <mad-metric-card> e
   <mad-db-metric-card> — padding 14×16, rótulo 12.5/500 mudo, valor 24/650 numa
   linha só. O valor encolhe para caber: a largura do card (100cqi do
   .mad-*-value) dividida pela largura estimada do texto (--mad-kpi-len, em
   dígitos, calculada no Blade; um dígito mede ~0,6em); abaixo de 11px corta
   com reticências e o valor inteiro fica no title. */
.mad-layout-erp .mad-stat { padding: 14px 16px; }
.mad-layout-erp :is(.mad-kpi-label, .mad-stat-label) {
    font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
    line-height: 1.35; color: var(--mad-text-muted);
}
.mad-layout-erp .mad-stat-label { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Celular: dois cards por linha — o rótulo volta a 12px para "Recebido no mês"
   caber inteiro. */
@media (max-width: 640px) {
    .mad-layout-erp :is(.mad-kpi-label, .mad-stat-label) { font-size: 12px; }
}
.mad-layout-erp :is(.mad-kpi-value, .mad-stat-value) {
    container-type: inline-size;
    font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mad-layout-erp .mad-kpi-num { font-size: clamp(11px, 100cqi / (var(--mad-kpi-len, 6) * .61), 24px); }
/* Mesmos vãos do .mad-kpi (gap 6px): o <p> do metric-card trazia 1em de margem. */
.mad-layout-erp .mad-stat-value { margin: 6px 0 0; }
.mad-layout-erp :is(.mad-kpi-context, .mad-kpi-foot, .mad-stat-context) {
    font-size: 12.5px; line-height: 1.35; color: var(--mad-text-muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mad-layout-erp .mad-stat-context { margin: 6px 0 0; }
.mad-layout-erp .mad-stat-change { font-size: 12px; margin-top: 6px; flex-wrap: wrap; row-gap: 0; }
.mad-layout-erp .mad-stat-change > span { white-space: nowrap; }
/* Ícone vira um selo pequeno no canto, na altura do rótulo: o valor fica com
   a largura toda do card. */
.mad-layout-erp .mad-stat { position: relative; }
.mad-layout-erp .mad-stat-icon { position: absolute; top: 11px; right: 12px; width: 24px; height: 24px; border-radius: 6px; }
.mad-layout-erp .mad-stat-icon-glyph { width: 14px; height: 14px; }
.mad-layout-erp .mad-stat-body:has(> .mad-stat-icon) .mad-stat-label { padding-right: 26px; }

/* Faixa sem :cols no ERP: de 4 a 7 cards por linha, sem sobra — o nº de
   colunas sai da quantidade de filhos (8 → 4+4, 10 → 5+5, 12 → 6+6) e cai
   para menos colunas quando o card ficaria abaixo de 116px (celular: 2). */
.mad-layout-erp .mad-kpi-strip:not([data-cols]) {
    --mad-kpi-strip-auto: 7;
    grid-template-columns: repeat(auto-fit, minmax(max(var(--mad-kpi-strip-min, 116px),
        (100% - (var(--mad-kpi-strip-auto) - 1) * var(--mad-kpi-strip-gap, 14px)) / var(--mad-kpi-strip-auto) - .1px), 1fr));
}
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(1)) { --mad-kpi-strip-auto: 1; }
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(2)) { --mad-kpi-strip-auto: 2; }
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(3)) { --mad-kpi-strip-auto: 3; }
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(4)),
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(8)) { --mad-kpi-strip-auto: 4; }
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(5)),
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(9)),
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(10)) { --mad-kpi-strip-auto: 5; }
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(6)),
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(11)),
.mad-layout-erp .mad-kpi-strip:has(> :last-child:nth-child(12)) { --mad-kpi-strip-auto: 6; }

/* ── <mad-goal-ladder> ── */
.mad-goal-ladder { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mad-goal-ladder-title {
    font-size: 1rem; font-weight: 800; letter-spacing: .02em;
    color: var(--mad-primary-ink, var(--mad-primary)); text-transform: uppercase; margin-bottom: 10px;
}
.mad-goal-ladder-step {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: #fff; border-radius: 4px; padding: 8px 18px; text-align: center;
    width: calc(100% - (var(--mad-gl-i, 0) * 9%));
    min-width: 130px; box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.mad-goal-ladder-step.is-muted { opacity: .82; }
.mad-goal-ladder-label { font-size: .72rem; font-weight: 600; opacity: .85; }
.mad-goal-ladder-value { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.mad-goal-ladder-delta {
    display: flex; align-items: center; gap: 6px; padding: 5px 0;
    font-size: .74rem; font-weight: 700;
}
.mad-goal-ladder-delta-down { color: var(--mad-danger, #dc2626); }
.mad-goal-ladder-delta-up   { color: var(--mad-success, #059669); }
.mad-goal-ladder-delta-flat { color: var(--mad-text-muted); }

/* ── <mad-segment-stats> ── */
.mad-segment-stats { width: 100%; }
.mad-segment-stats-title {
    font-size: .8rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .03em; color: var(--mad-text); text-align: center; margin-bottom: 8px;
}
.mad-segment-stats-row {
    display: flex; align-items: center; justify-content: space-evenly;
    gap: 10px; flex-wrap: wrap;
}
.mad-segment-stat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border-left: 3px solid var(--mad-seg-color);
}
.mad-segment-stat-icon { width: 16px; height: 16px; color: var(--mad-seg-color); }
.mad-segment-stat-value { font-size: 1.15rem; font-weight: 800; color: var(--mad-seg-color); }
.mad-segment-stat-label { font-size: .72rem; font-weight: 600; color: var(--mad-text-muted); line-height: 1.2; }
.mad-segment-stat-label em { font-style: normal; display: block; opacity: .8; }

/* Shared responsive geometry for generated pages, including layout variants. */
.mad-page-container,
.mad-page-content,
.mad-form-grid,
.mad-form-grid > *,
.mad-dg-wrap,
.mad-dg-table-wrap { min-width: 0; }
.mad-page-header { flex-wrap: wrap; }
.mad-page-header-left { flex-basis: 220px; }
.mad-form-actions { flex-wrap: wrap; }

@media (max-width: 640px) {
  .mad-page-container { padding: 16px 12px 12px; }
  .mad-page-header {
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .mad-page-header-left { flex-basis: 100%; gap: 8px; }
  .mad-page-title { white-space: normal; overflow-wrap: anywhere; }
  .mad-page-breadcrumb { overflow-wrap: anywhere; }
  .mad-page-header-actions { width: 100%; gap: 8px; }
  .mad-page-header-actions > .mad-btn { flex: 1 1 auto; white-space: normal; }
  .mad-page-header-actions .mad-btn,
  .mad-page-toolbar .mad-btn,
  .mad-form-actions .mad-btn { min-height: 40px; height: auto; }

  :is(.mad-layout-stripe, .mad-layout-dock, .mad-layout-glass,
      .mad-layout-border, .mad-layout-inset, .mad-layout-float) .mad-page-header {
    padding: 14px 12px;
  }
  :is(.mad-layout-stripe, .mad-layout-dock, .mad-layout-glass,
      .mad-layout-border, .mad-layout-inset, .mad-layout-float) .mad-page-content {
    padding: 12px;
  }
  .mad-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .mad-form-grid > * { grid-column: auto !important; }

  /* The table owns horizontal scrolling; search and pagination stay visible. */
  .mad-dg-toolbar { padding: 10px; }
  .mad-dg-search { flex: 1 1 140px; min-width: 0; max-width: none; width: auto; height: 40px; }
  .mad-dg-toolbar-right { flex-wrap: wrap; }
  .mad-dg-table { width: max-content; min-width: 100%; }
  .mad-dg-table .mad-dg-th,
  .mad-dg-table td { padding-left: 10px; padding-right: 10px; }
  .mad-dg-table td { max-width: 28rem; }
  .mad-dg-action-btn { min-width: 40px; min-height: 40px; justify-content: center; }
  .mad-dg-footer { padding: 10px; gap: 10px; }
  .mad-dg-info { white-space: normal; }
  .mad-dg-per-page { margin-left: auto; }
  .mad-dg-footer .mad-pagination {
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mad-dg-footer .mad-page-btn { min-width: 36px; min-height: 40px; }
  .mad-modal { max-height: calc(100dvh - 32px); }
  .mad-modal-header, .mad-modal-body, .mad-modal-footer { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   <mad-change-timeline> — log de mudança de objeto como linha do tempo de
   gravações com diff coluna a coluna. Cores via tokens --mad-* (dark
   automático via html[data-theme="dark"]).
   ═══════════════════════════════════════════════════════════════════════ */
.mad-ctl { position: relative; padding-left: 34px; }
.mad-ctl::before {
  content: ''; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px;
  background: var(--mad-border, #e4e4e7);
}
.mad-ctl-day {
  position: relative; margin: 0 0 12px -34px; padding-left: 34px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mad-text-muted, #71717a);
}
.mad-ctl-day span { background: var(--mad-bg, #fff); padding-right: 8px; }
.mad-ctl-item { position: relative; padding-bottom: 18px; }
.mad-ctl--compact .mad-ctl-item { padding-bottom: 10px; }
.mad-ctl-item:last-child { padding-bottom: 0; }
.mad-ctl-dot {
  position: absolute; left: -34px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  background: var(--mad-bg-muted, #f4f4f5); border: 2px solid var(--mad-border, #e4e4e7);
}
.mad-ctl-dot svg { width: 13px; height: 13px; color: var(--mad-text-muted, #71717a); }
.mad-ctl--created .mad-ctl-dot { background: var(--mad-success-subtle, #dcfce7); border-color: var(--mad-success, #16a34a); }
.mad-ctl--created .mad-ctl-dot svg { color: var(--mad-success, #16a34a); }
.mad-ctl--changed .mad-ctl-dot { background: var(--mad-info-subtle, #dbeafe); border-color: var(--mad-info, #2563eb); }
.mad-ctl--changed .mad-ctl-dot svg { color: var(--mad-info, #2563eb); }
.mad-ctl--deleted .mad-ctl-dot { background: var(--mad-danger-subtle, #fee2e2); border-color: var(--mad-danger, #dc2626); }
.mad-ctl--deleted .mad-ctl-dot svg { color: var(--mad-danger, #dc2626); }
.mad-ctl--mixed .mad-ctl-dot { background: var(--mad-warning-subtle, #fef3c7); border-color: var(--mad-warning, #d97706); }
.mad-ctl--mixed .mad-ctl-dot svg { color: var(--mad-warning, #d97706); }

.mad-ctl-card {
  background: var(--mad-bg, #fff); border: 1px solid var(--mad-border, #e4e4e7);
  border-radius: var(--mad-radius-md, 8px); overflow: hidden;
}
.mad-ctl-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 9px 14px;
  border-bottom: 1px solid var(--mad-border, #e4e4e7); background: var(--mad-bg-subtle, #fafafa);
  font-size: 12.5px; color: var(--mad-text-muted, #71717a);
}
.mad-ctl-time { font-variant-numeric: tabular-nums; color: var(--mad-text, #18181b); }
.mad-ctl-login, .mad-ctl-prog { display: inline-flex; align-items: center; gap: 5px; }
.mad-ctl-login { color: var(--mad-text, #18181b); font-weight: 500; }
.mad-ctl-login svg, .mad-ctl-prog svg { width: 13px; height: 13px; }
.mad-ctl-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.mad-ctl-trace {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--mad-border, #e4e4e7); border-radius: var(--mad-radius-sm, 6px);
  background: var(--mad-bg, #fff); color: var(--mad-text-muted, #71717a); cursor: pointer; padding: 0;
}
.mad-ctl-trace:hover { color: var(--mad-text, #18181b); border-color: var(--mad-border-strong, #d4d4d8); }
.mad-ctl-trace:focus-visible { outline: 2px solid var(--mad-ring, #93c5fd); outline-offset: 1px; }
.mad-ctl-trace svg { width: 13px; height: 13px; }

.mad-ctl-record { padding: 10px 14px 12px; }
.mad-ctl-record + .mad-ctl-record { border-top: 1px dashed var(--mad-border, #e4e4e7); }
.mad-ctl-record-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.mad-ctl-table { color: var(--mad-text, #18181b); font-weight: 500; }
.mad-ctl-pk { font-variant-numeric: tabular-nums; color: var(--mad-text-muted, #71717a); }
.mad-ctl-op {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
}
.mad-ctl-op--created { background: var(--mad-success-subtle, #dcfce7); color: var(--mad-success, #15803d); }
.mad-ctl-op--changed { background: var(--mad-info-subtle, #dbeafe); color: var(--mad-info, #1d4ed8); }
.mad-ctl-op--deleted { background: var(--mad-danger-subtle, #fee2e2); color: var(--mad-danger, #b91c1c); }
.mad-ctl-op--mixed   { background: var(--mad-warning-subtle, #fef3c7); color: var(--mad-warning, #b45309); }

.mad-ctl-diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.mad-ctl-diff td { padding: 4px 8px; vertical-align: top; border-top: 1px solid var(--mad-bg-muted, #f4f4f5); }
.mad-ctl-diff tr:first-child td { border-top: 0; }
.mad-ctl-col {
  width: 34%; max-width: 260px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--mad-text-muted, #71717a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mad-ctl-vals { word-break: break-word; }
.mad-ctl-vals del, .mad-ctl-vals ins {
  display: inline-block; text-decoration: none; padding: 1px 6px; border-radius: 4px; max-width: 100%;
}
.mad-ctl-vals del { background: var(--mad-danger-subtle, #fee2e2); color: var(--mad-danger, #b91c1c); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.mad-ctl-vals ins { background: var(--mad-success-subtle, #dcfce7); color: var(--mad-success, #15803d); }
.mad-ctl-arrow { display: inline-block; margin: 0 8px; color: var(--mad-text-muted, #71717a); }
.mad-ctl-mask {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 4px;
  font-weight: 600;
  background: var(--mad-warning-subtle, #fef3c7); color: var(--mad-warning, #b45309);
}
.mad-ctl-mask svg { width: 12px; height: 12px; }
.mad-ctl-row--created .mad-ctl-col::before,
.mad-ctl-row--changed .mad-ctl-col::before,
.mad-ctl-row--deleted .mad-ctl-col::before {
  display: inline-block; width: 12px; text-align: center; font-weight: 600;
}
.mad-ctl-row--created .mad-ctl-col::before { content: '+'; color: var(--mad-success, #15803d); }
.mad-ctl-row--changed .mad-ctl-col::before { content: '~'; color: var(--mad-info, #1d4ed8); }
.mad-ctl-row--deleted .mad-ctl-col::before { content: '−'; color: var(--mad-danger, #b91c1c); }

.mad-ctl-empty {
  display: flex; align-items: center; gap: 10px; padding: 28px 16px; margin-left: -34px;
  color: var(--mad-text-muted, #71717a); font-size: 13.5px; justify-content: center;
  border: 1px dashed var(--mad-border, #e4e4e7); border-radius: var(--mad-radius-md, 8px);
}
.mad-ctl-empty svg { width: 18px; height: 18px; }
.mad-dark .mad-ctl-day span { background: var(--mad-bg, #0b0f14); }
@media (max-width: 640px) {
  .mad-ctl-col { width: 100%; display: block; }
  .mad-ctl-diff tr { display: grid; }
  .mad-ctl-count { margin-left: 0; }
}

/* Edição na célula da listagem: a célula que ainda está sendo gravada
   (madDataGrid._saveCell). Só aparece se o servidor demorar — gravação rápida
   não pisca. Some quando a linha é redesenhada ou a resposta chega. */
.mad-dg-cell.mad-dg-cell-saving {
    animation: mad-dg-cell-saving 1.1s ease-in-out .3s infinite alternate;
}
@keyframes mad-dg-cell-saving {
    from { opacity: 1; }
    to   { opacity: .45; }
}

/* ── Anel de foco de teclado para o que não tem anel próprio (fw#335) ──────
   Botões da grade (ordenar, filtro, Tabela/Cards, ações da linha), abas,
   botões do casco e links ficavam sem anel nenhum: o tema zera o contorno de
   todo `button` e eles não têm regra de foco. Especificidade baixa de
   propósito — (0,1,1) para botão/campo/link, (0,1,0) para o resto —, para
   NÃO vencer o componente que desenha o próprio indicador
   (`.x:focus-visible { outline: none; background: … }`).
   Fora do conteúdo (casco: topo, rail, menu lateral, que têm fundo próprio,
   inclusive na cor da marca) o anel é a cor do texto do controle, que já
   contrasta com o fundo dele; dentro de `.mad-ui`, a mesma cor dos demais
   anéis. Campo de texto só no teclado (`data-mad-pointer`, mad-ui.js). */
button:focus-visible,
a:where([href]):focus-visible,
summary:focus-visible,
:where([role="button"], [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
:where(html:not([data-mad-pointer])) input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])):focus-visible,
:where(html:not([data-mad-pointer])) textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
:where(.mad-ui) button:focus-visible,
:where(.mad-ui) a:where([href]):focus-visible,
:where(.mad-ui) summary:focus-visible,
:where(.mad-ui) :where([role="button"], [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible,
:where(html:not([data-mad-pointer])) :where(.mad-ui) input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])):focus-visible,
:where(html:not([data-mad-pointer])) :where(.mad-ui) textarea:focus-visible {
  outline-color: var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000)));
}
/* Seletor (`<mad-select-field>` e afins): o foco cai no <select> nativo, que
   fica invisível por baixo do controle desenhado — o anel vai no controle. */
:where(html:not([data-mad-pointer])) .mad-sel:has(> .mad-sel-native:focus-visible) > .mad-sel-control,
:where(html:not([data-mad-pointer])) .mad-sel-control:has(:focus-visible) {
  outline: 2px solid var(--mad-focus-ring, var(--mad-primary-ink, color-mix(in srgb, var(--mad-primary) 50%, #000)));
  outline-offset: 1px;
}
/* A busca dentro do controle (seletor pesquisável) não ganha um 2º anel. */
.mad-sel-control :focus-visible { outline: none; }

/* ══════════════════════════════════════════════════════════════════════════
   <mad-heatmap> — matriz N×M com cor por faixa, bolha com a contagem e legenda
   (components/heatmap.blade.php · Mad\Chart\MadHeatmap). Cor da célula =
   tom da faixa misturado com a superfície: funciona no claro e no escuro.
   A tabela ocupa 100% e as colunas encolhem: nunca rola a página de lado.
   ══════════════════════════════════════════════════════════════════════════ */
.mad-heatmap {
  --hm-ylabel-w: 24%;
  --hm-gap: 4px;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  color: var(--mad-text, #111827);
}
.mad-hm-title { font-weight: 600; font-size: .9rem; margin: 0 0 .5rem; }
.mad-hm-empty { padding: 1.5rem .5rem; text-align: center; color: var(--mad-text-muted, #6b7280); font-size: .85rem; }
.mad-hm-body { display: flex; align-items: stretch; gap: .25rem; min-width: 0; }
.mad-hm-ytitle {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .75rem; font-weight: 600; color: var(--mad-text-muted, #6b7280);
  padding-bottom: 1.6rem; /* alinha ao centro das linhas, acima dos rótulos do eixo X */
}
.mad-hm-scroll { flex: 1 1 auto; min-width: 0; }
.mad-hm-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: var(--hm-gap); margin: calc(var(--hm-gap) * -1) 0; }
.mad-hm-col-y { width: var(--hm-ylabel-w); }
.mad-hm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mad-hm-ylabel {
  font-size: .75rem; font-weight: 500; line-height: 1.2; text-align: right;
  color: var(--mad-text-muted, #6b7280); padding: 0 .35rem 0 0;
  overflow-wrap: anywhere; hyphens: auto;
}
.mad-hm-xlabel {
  font-size: .75rem; font-weight: 500; line-height: 1.2; text-align: center; vertical-align: top;
  color: var(--mad-text-muted, #6b7280); padding: .2rem 0 0; overflow-wrap: anywhere; hyphens: auto;
}
.mad-hm-xtitle { text-align: center; font-size: .75rem; font-weight: 600; color: var(--mad-text-muted, #6b7280); margin-top: .35rem; padding-left: var(--hm-ylabel-w); }
.mad-hm-td { position: relative; padding: 0; }

/* Tons (faixas). --hm-tone = cor da faixa; --hm-mix = quanto dela entra no fundo. */
.mad-hm-tone-success  { --hm-tone: var(--mad-success, #16a34a); }
.mad-hm-tone-info     { --hm-tone: var(--mad-info, #4a90d9); }
.mad-hm-tone-warning  { --hm-tone: var(--mad-warning, #d97706); }
.mad-hm-tone-orange   { --hm-tone: var(--mad-orange, #ea580c); }
.mad-hm-tone-danger   { --hm-tone: var(--mad-danger, #dc2626); }
.mad-hm-tone-critical { --hm-tone: color-mix(in srgb, var(--mad-danger, #dc2626) 70%, #000); }
.mad-hm-tone-neutral  { --hm-tone: var(--mad-text-muted, #6b7280); }
.mad-hm-tone-primary  { --hm-tone: var(--mad-primary, #2563eb); }
.mad-hm-tone-heat-1, .mad-hm-tone-heat-2, .mad-hm-tone-heat-3, .mad-hm-tone-heat-4, .mad-hm-tone-heat-5 { --hm-tone: var(--mad-primary, #2563eb); }
.mad-hm-tone-heat-1 { --hm-mix: 10%; }
.mad-hm-tone-heat-2 { --hm-mix: 22%; }
.mad-hm-tone-heat-3 { --hm-mix: 36%; }
.mad-hm-tone-heat-4 { --hm-mix: 52%; }
.mad-hm-tone-heat-5 { --hm-mix: 68%; }

.mad-hm-cell {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 34px; max-height: 76px; aspect-ratio: 5 / 4; padding: 0; margin: 0;
  border-radius: 8px; font: inherit; color: inherit; cursor: default;
  border: 1px solid color-mix(in srgb, var(--hm-tone, var(--mad-border, #e5e7eb)) 40%, transparent);
  background: color-mix(in srgb, var(--hm-tone, transparent) var(--hm-mix, 24%), var(--mad-surface, #fff));
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mad-hm-cell.is-empty { --hm-mix: 13%; }
.mad-hm-cell.mad-hm-tone-none { background: var(--mad-bg-subtle, #f9fafb); border-color: var(--mad-border, #e5e7eb); }
.mad-hm-cell.is-clickable { cursor: pointer; }
.mad-hm-cell.is-clickable:hover { background: color-mix(in srgb, var(--hm-tone, var(--mad-primary, #2563eb)) calc(var(--hm-mix, 24%) + 14%), var(--mad-surface, #fff)); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.mad-hm-cell:focus-visible { outline: 2px solid var(--mad-focus-ring, var(--mad-primary, #2563eb)); outline-offset: 2px; }
.mad-hm-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(22px + 16px * var(--hm-s, 0)); height: calc(22px + 16px * var(--hm-s, 0));
  max-width: 92%; padding: 0 5px; border-radius: 999px; box-sizing: border-box;
  background: var(--mad-surface, #fff); color: var(--mad-text, #111827);
  border: 2px solid var(--hm-tone, var(--mad-primary, #2563eb));
  font-size: .75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Lista dos registros da célula: passar o mouse, focar (teclado) ou tocar. */
.mad-hm-pop {
  display: none; position: absolute; z-index: 40; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; min-width: 160px; max-width: min(260px, 80vw); text-align: left;
  background: var(--mad-surface, #fff); color: var(--mad-text, #111827);
  border: 1px solid var(--mad-border, #e5e7eb); border-radius: 8px; padding: .5rem .65rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.16); font-size: .75rem; line-height: 1.35; pointer-events: none;
}
.mad-hm-pop--below { bottom: auto; top: calc(100% + 6px); }
.mad-hm-pop--end { left: auto; right: 0; transform: none; }
.mad-hm-pop--start { left: 0; transform: none; }
.mad-hm-pop-head { font-weight: 600; margin-bottom: .25rem; color: var(--mad-text, #111827); }
.mad-hm-pop ul { margin: 0; padding-left: 1rem; }
.mad-hm-pop li { margin: .1rem 0; overflow-wrap: anywhere; }
.mad-hm-pop-more { margin-top: .25rem; color: var(--mad-text-muted, #6b7280); }
@media (hover: hover) { .mad-hm-td:hover .mad-hm-pop { display: block; } }
.mad-hm-td:focus-within .mad-hm-pop, .mad-hm-td.is-open .mad-hm-pop { display: block; }

/* Legenda */
.mad-hm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; list-style: none; margin: .75rem 0 0; padding: 0; font-size: .8rem; }
.mad-hm-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.mad-hm-legend-range { color: var(--mad-text-muted, #6b7280); font-size: .75rem; font-variant-numeric: tabular-nums; }
.mad-hm-legend--scale { gap: .3rem; color: var(--mad-text-muted, #6b7280); font-size: .75rem; }
.mad-hm-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--hm-tone, var(--mad-border, #e5e7eb)) 60%, transparent);
  background: color-mix(in srgb, var(--hm-tone, transparent) var(--hm-mix, 30%), var(--mad-surface, #fff));
}
.mad-hm-error { margin-top: .5rem; padding: .4rem .55rem; border-radius: 6px; font-size: .7rem; color: var(--mad-danger, #dc2626); background: color-mix(in srgb, var(--mad-danger, #dc2626) 6%, transparent); border: 1px solid color-mix(in srgb, var(--mad-danger, #dc2626) 25%, transparent); }

/* Estreito (celular, coluna de dashboard): rótulos menores, bolha menor. */
@container (max-width: 440px) {
  .mad-heatmap { --hm-ylabel-w: 25%; --hm-gap: 3px; }
  .mad-hm-ylabel, .mad-hm-xlabel { font-size: .68rem; }
  .mad-hm-cell { border-radius: 6px; min-height: 30px; }
  .mad-hm-bubble { min-width: calc(20px + 10px * var(--hm-s, 0)); height: calc(20px + 10px * var(--hm-s, 0)); font-size: .7rem; padding: 0 3px; }
  .mad-hm-ytitle { font-size: .7rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   <mad-week-grid> — linhas (pessoas) × dias da semana, estado por célula
   (components/week-grid.blade.php · Mad\Ui\MadWeekGrid). Tabela em tela
   larga; abaixo de 560px de largura a semana vira lista por dia (nunca
   rola a página de lado). Cor do estado = tom misturado com a superfície.
   ══════════════════════════════════════════════════════════════════════════ */
.mad-week-grid-host { width: 100%; min-width: 0; }
.mad-week-grid {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  color: var(--mad-text, #111827);
}
.mad-wg-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mad-wg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .6rem; }
.mad-wg-title { font-weight: 600; font-size: .95rem; margin-right: auto; }
.mad-wg-nav { display: inline-flex; border: 1px solid var(--mad-border, #e5e7eb); border-radius: 8px; overflow: hidden; background: var(--mad-surface, #fff); }
.mad-wg-navbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  min-height: 32px; min-width: 32px; padding: 0 .55rem; border: 0; margin: 0;
  background: transparent; color: inherit; font: inherit; font-size: .8rem; cursor: pointer;
}
.mad-wg-navbtn + .mad-wg-navbtn { border-left: 1px solid var(--mad-border, #e5e7eb); }
.mad-wg-navbtn:hover { background: var(--mad-bg-subtle, #f3f4f6); }
.mad-wg-navbtn[aria-current="true"] { color: var(--mad-primary, #2563eb); font-weight: 600; }
.mad-wg-navbtn:focus-visible, .mad-wg-copy:focus-visible { outline: 2px solid var(--mad-focus-ring, var(--mad-primary, #2563eb)); outline-offset: -2px; }
.mad-wg-range { font-size: .85rem; font-weight: 600; }
.mad-wg-copy {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .7rem;
  border: 1px solid var(--mad-border, #e5e7eb); border-radius: 8px; background: var(--mad-surface, #fff);
  color: inherit; font: inherit; font-size: .8rem; cursor: pointer;
}
.mad-wg-copy:hover { background: var(--mad-bg-subtle, #f3f4f6); }
.mad-wg-copy[aria-busy="true"] { opacity: .6; cursor: progress; }

.mad-wg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .78rem; color: var(--mad-text-muted, #6b7280); }
.mad-wg-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.mad-wg-hint { font-style: italic; }
.mad-wg-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 5px; font-size: .7rem; font-weight: 700; box-sizing: border-box;
  color: color-mix(in srgb, var(--wg-tone, #6b7280) 78%, var(--mad-text, #111827));
  background: color-mix(in srgb, var(--wg-tone, #6b7280) 20%, var(--mad-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--wg-tone, #6b7280) 45%, transparent);
}
.mad-wg-chip--holiday { background: var(--wg-holiday-bg); border: 1px dashed var(--wg-holiday-line); }
.mad-wg-error { padding: .75rem; border-radius: 8px; background: color-mix(in srgb, var(--mad-danger, #dc2626) 10%, var(--mad-surface, #fff)); color: var(--mad-danger, #dc2626); font-size: .85rem; }
.mad-wg-empty { padding: 1.5rem .5rem; text-align: center; color: var(--mad-text-muted, #6b7280); font-size: .85rem; }

/* Tons */
.mad-week-grid {
  --wg-holiday-bg: color-mix(in srgb, var(--mad-warning, #d97706) 9%, var(--mad-surface, #fff));
  --wg-holiday-line: color-mix(in srgb, var(--mad-warning, #d97706) 55%, transparent);
  --wg-today: var(--mad-primary, #2563eb);
}
.mad-wg-tone-success { --wg-tone: var(--mad-success, #16a34a); }
.mad-wg-tone-info    { --wg-tone: var(--mad-info, #4a90d9); }
.mad-wg-tone-warning { --wg-tone: var(--mad-warning, #d97706); }
.mad-wg-tone-orange  { --wg-tone: var(--mad-orange, #ea580c); }
.mad-wg-tone-danger  { --wg-tone: var(--mad-danger, #dc2626); }
.mad-wg-tone-neutral { --wg-tone: var(--mad-text-muted, #6b7280); }
.mad-wg-tone-primary { --wg-tone: var(--mad-primary, #2563eb); }

/* Tabela */
.mad-wg-scroll { width: 100%; min-width: 0; }
.mad-wg-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.mad-wg-table th, .mad-wg-table td { border-bottom: 1px solid var(--mad-border, #e5e7eb); padding: .35rem .3rem; vertical-align: middle; }
.mad-wg-table thead th { font-weight: 600; font-size: .75rem; color: var(--mad-text-muted, #6b7280); text-align: center; }
.mad-wg-rowhead { text-align: left !important; width: 26%; }
.mad-wg-notehead { width: 28%; text-align: left !important; }
.mad-wg-dayhead abbr { text-decoration: none; display: block; color: var(--mad-text, #111827); }
.mad-wg-dayhead small { display: block; font-weight: 400; font-size: .7rem; }
.mad-wg-holname { display: block; font-size: .65rem; font-weight: 500; color: color-mix(in srgb, var(--mad-warning, #d97706) 70%, var(--mad-text, #111827)); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-wg-dayhead.is-today abbr, .mad-wg-dayhead.is-today small { color: var(--wg-today); }
.mad-wg-dayhead.is-today { box-shadow: inset 0 -2px 0 var(--wg-today); }
.mad-wg-table .is-holiday { background: var(--wg-holiday-bg); }
.mad-wg-td { text-align: center; }
.mad-wg-td.is-today { background: color-mix(in srgb, var(--wg-today) 5%, transparent); }
.mad-wg-rowlabel { text-align: left; font-weight: 500; }
.mad-wg-name { display: block; overflow-wrap: anywhere; }
.mad-wg-sub { display: block; font-size: .72rem; font-weight: 400; color: var(--mad-text-muted, #6b7280); overflow-wrap: anywhere; }
.mad-wg-lock { display: inline-flex; align-items: center; color: var(--mad-text-muted, #6b7280); margin-top: .1rem; }
.mad-wg-table tbody tr.is-locked .mad-wg-rowlabel .mad-wg-name { color: var(--mad-text-muted, #6b7280); }

.mad-wg-cell {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; max-width: 64px; min-height: 34px; padding: 0 .25rem; margin: 0; box-sizing: border-box;
  border-radius: 7px; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer;
  color: color-mix(in srgb, var(--wg-tone, #6b7280) 80%, var(--mad-text, #111827));
  background: color-mix(in srgb, var(--wg-tone, #6b7280) 18%, var(--mad-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--wg-tone, #6b7280) 45%, transparent);
  transition: background-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.mad-wg-cell.mad-wg-tone-empty {
  color: var(--mad-text-muted, #9ca3af); font-weight: 400;
  background: transparent; border: 1px dashed var(--mad-border, #d1d5db);
}
.mad-wg-cell:hover:not([aria-disabled="true"]) { box-shadow: 0 1px 4px rgba(0,0,0,.14); background: color-mix(in srgb, var(--wg-tone, #6b7280) 30%, var(--mad-surface, #fff)); }
.mad-wg-cell:active:not([aria-disabled="true"]) { transform: scale(.96); }
.mad-wg-cell:focus-visible { outline: 2px solid var(--mad-focus-ring, var(--mad-primary, #2563eb)); outline-offset: 2px; }
.mad-wg-cell[aria-disabled="true"] { cursor: not-allowed; opacity: .78; }
.mad-wg-cell.is-saving { opacity: .7; }
.mad-wg-cell-long { display: none; }

.mad-wg-note {
  width: 100%; box-sizing: border-box; min-height: 32px; padding: .3rem .5rem;
  border: 1px solid var(--mad-border, #e5e7eb); border-radius: 6px;
  background: var(--mad-surface, #fff); color: var(--mad-text, #111827); font: inherit; font-size: .8rem;
}
.mad-wg-note:focus { outline: 2px solid var(--mad-focus-ring, var(--mad-primary, #2563eb)); outline-offset: 0; border-color: transparent; }
.mad-wg-note[readonly] { background: var(--mad-bg-subtle, #f9fafb); color: var(--mad-text-muted, #6b7280); }
.mad-wg-note.is-saved { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mad-success, #16a34a) 45%, transparent); }

.mad-wg-total { text-align: center; }
.mad-wg-count {
  display: inline-block; margin: 1px; padding: 0 5px; border-radius: 999px; font-size: .68rem; font-weight: 600; line-height: 18px;
  color: color-mix(in srgb, var(--wg-tone, #6b7280) 80%, var(--mad-text, #111827));
  background: color-mix(in srgb, var(--wg-tone, #6b7280) 15%, var(--mad-surface, #fff));
}
.mad-wg-count[hidden] { display: none; }
.mad-wg-table tfoot th, .mad-wg-table tfoot td { border-bottom: 0; color: var(--mad-text-muted, #6b7280); font-size: .72rem; }

/* Lista por dia (telas estreitas) */
.mad-wg-days { display: none; }
@container (max-width: 560px) {
  .mad-wg-scroll { display: none; }
  .mad-wg-days { display: grid; gap: .6rem; }
  .mad-wg-title { width: 100%; }
  .mad-wg-range { flex: 1 1 auto; text-align: right; }
}
.mad-wg-day { border: 1px solid var(--mad-border, #e5e7eb); border-radius: 10px; background: var(--mad-surface, #fff); overflow: hidden; }
.mad-wg-day.is-holiday { background: var(--wg-holiday-bg); border-color: var(--wg-holiday-line); }
.mad-wg-day.is-today { border-color: var(--wg-today); }
.mad-wg-dayttl {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin: 0; padding: .45rem .7rem;
  font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--mad-border, #e5e7eb);
}
.mad-wg-dayttl small { font-weight: 400; color: var(--mad-text-muted, #6b7280); }
.mad-wg-dayttl .mad-wg-holname { display: inline; white-space: normal; }
.mad-wg-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--wg-today); letter-spacing: .03em; }
.mad-wg-day ul { list-style: none; margin: 0; padding: .2rem .4rem; }
.mad-wg-day li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .3rem; min-height: 40px; }
.mad-wg-day li + li { border-top: 1px solid color-mix(in srgb, var(--mad-border, #e5e7eb) 70%, transparent); }
.mad-wg-day li.is-locked .mad-wg-name { color: var(--mad-text-muted, #6b7280); }
.mad-wg-day .mad-wg-name { font-size: .85rem; flex: 1 1 auto; min-width: 0; }
.mad-wg-day .mad-wg-cell { width: auto; max-width: none; min-width: 120px; min-height: 36px; justify-content: flex-start; padding: 0 .6rem; flex: 0 0 auto; }
.mad-wg-day .mad-wg-cell-short {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
}
.mad-wg-day .mad-wg-cell-long { display: inline; font-weight: 500; font-size: .8rem; }
.mad-wg-day .mad-wg-noterow { flex-direction: column; align-items: stretch; gap: .2rem; }


/* ════════════════════════════════════════════════════════════════════════════
   <mad-whiteboard> — quadro branco com notas (components/whiteboard.blade.php ·
   Mad\Ui\MadWhiteboard). O quadro rola dentro do próprio viewport: a página
   nunca ganha rolagem horizontal. A nota é papel colorido (cor fixa da paleta),
   por isso a tinta da nota é fixa; o resto segue os tokens do tema.
   ════════════════════════════════════════════════════════════════════════════ */
.mad-whiteboard-host { width: 100%; min-width: 0; }
.mad-whiteboard {
  --wb-dot: var(--mad-border-strong, #d4d4d8);
  --wb-ink: #1f2937;
  --wb-ink-muted: #4b5563;
  position: relative; min-width: 0; color: var(--mad-text, #18181b);
}
.mad-wb-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mad-wb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .5rem; }
.mad-wb-title { font-weight: 600; font-size: .95rem; }
.mad-wb-spacer { flex: 1 1 auto; }
.mad-wb-lockbadge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500; color: var(--mad-text-muted, #52525b);
  background: var(--mad-bg-muted, #f4f4f5); border: 1px solid var(--mad-border, #e5e7eb);
}
.mad-wb-zoom { display: inline-flex; border: 1px solid var(--mad-border, #e5e7eb); border-radius: 8px; overflow: hidden; background: var(--mad-surface, #fff); }
.mad-wb-zbtn {
  min-width: 34px; height: 32px; padding: 0 .5rem; border: 0; background: transparent; color: inherit;
  font: inherit; font-size: .85rem; cursor: pointer;
}
.mad-wb-zbtn + .mad-wb-zbtn { border-left: 1px solid var(--mad-border, #e5e7eb); }
.mad-wb-zbtn:hover { background: var(--mad-bg-subtle, #f3f4f6); }
.mad-wb-zbtn:disabled { opacity: .45; cursor: default; }
.mad-wb-zlevel { min-width: 56px; font-variant-numeric: tabular-nums; }
.mad-wb-add {
  display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .8rem; border-radius: 8px;
  border: 1px solid var(--mad-primary, #2563eb); background: var(--mad-primary, #2563eb); color: var(--mad-primary-fg, #fff);
  font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
}
.mad-wb-add:hover { background: var(--mad-primary-hover, #1d4ed8); }
.mad-wb-add[aria-busy="true"] { opacity: .6; cursor: progress; }
.mad-wb-zbtn:focus-visible, .mad-wb-add:focus-visible, .mad-wb-tool:focus-visible,
.mad-wb-swatch:focus-visible, .mad-wb-confirm button:focus-visible {
  outline: 2px solid var(--mad-focus-ring, var(--mad-primary, #2563eb)); outline-offset: 1px;
}
.mad-wb-hint { margin: 0 0 .5rem; font-size: .78rem; color: var(--mad-text-muted, #6b7280); }
.mad-wb-error {
  padding: .75rem 1rem; border-radius: 8px; font-size: .85rem;
  color: var(--mad-danger, #b91c1c); background: var(--mad-danger-subtle, #fef2f2); border: 1px solid var(--mad-danger, #fecaca);
}

.mad-wb-viewport {
  position: relative; max-width: 100%; overflow: auto; border-radius: 10px;
  border: 1px solid var(--mad-border, #e5e7eb); background: var(--mad-bg-subtle, #fafafa);
  overscroll-behavior: contain;
}
.mad-wb-stage { position: relative; }
.mad-wb-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mad-wb-canvas.has-grid {
  background-image: radial-gradient(circle, var(--wb-dot) 1.1px, transparent 1.6px);
  background-size: var(--wb-grid, 24px) var(--wb-grid, 24px);
  background-position: calc(var(--wb-grid, 24px) / -2) calc(var(--wb-grid, 24px) / -2);
}
.mad-wb-empty {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 80%;
  padding: .6rem 1rem; border-radius: 8px; text-align: center; font-size: .9rem;
  color: var(--mad-text-muted, #6b7280); background: var(--mad-surface, #fff); border: 1px dashed var(--mad-border-strong, #d4d4d8);
}

.mad-wb-note {
  position: absolute; box-sizing: border-box; display: flex; flex-direction: column; min-height: 96px;
  padding: .6rem .7rem .4rem; border-radius: 6px; background: var(--wb-color, #FFF3A3); color: var(--wb-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08); font-size: .88rem; line-height: 1.35;
  transition: box-shadow .12s ease;
}
.mad-wb-note.is-editable { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.mad-wb-note.is-dragging { cursor: grabbing; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: none; }
.mad-wb-note.is-resizing { z-index: 30; transition: none; }
.mad-wb-note.is-saving { opacity: .85; }
.mad-wb-note.is-editing { z-index: 25; cursor: auto; user-select: text; -webkit-user-select: text; }
.mad-wb-note.has-pop { z-index: 40; }
.mad-wb-note:focus-visible { outline: 2px solid var(--mad-focus-ring, var(--mad-primary, #2563eb)); outline-offset: 2px; }
.mad-wb-note.is-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mad-success, #16a34a) 45%, transparent), 0 4px 10px rgba(0,0,0,.08); }
.mad-wb-text {
  flex: 1 1 auto; min-height: 2.6em; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; outline: none;
}
.mad-wb-text.is-empty::before { content: attr(data-placeholder); color: var(--wb-ink-muted); opacity: .7; font-style: italic; }
.mad-wb-note.is-editing .mad-wb-text { overflow: auto; cursor: text; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); background: rgba(255,255,255,.45); padding: .1rem .2rem; }
.mad-wb-note.is-editing .mad-wb-text.is-empty::before { content: none; }
.mad-wb-foot { display: flex; align-items: center; gap: .3rem; min-height: 26px; margin-top: .3rem; }
.mad-wb-meta { flex: 1 1 auto; min-width: 0; font-size: .72rem; color: var(--wb-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-wb-tools { display: inline-flex; gap: .1rem; opacity: 0; transition: opacity .12s ease; }
.mad-wb-note:hover .mad-wb-tools, .mad-wb-note:focus-within .mad-wb-tools, .mad-wb-note.has-pop .mad-wb-tools { opacity: 1; }
@media (hover: none) { .mad-wb-tools { opacity: 1; } }
.mad-wb-tool {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: var(--wb-ink); cursor: pointer;
}
.mad-wb-tool:hover { background: rgba(0,0,0,.08); }
.mad-wb-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 50%, rgba(0,0,0,.28) 50% 58%, transparent 58% 70%, rgba(0,0,0,.28) 70% 78%, transparent 78%);
  border-bottom-right-radius: 6px;
}
.mad-wb-palette {
  position: absolute; right: .4rem; bottom: 2.1rem; z-index: 5; display: grid; grid-template-columns: repeat(3, 28px); gap: .3rem;
  padding: .4rem; border-radius: 8px; background: var(--mad-surface, #fff); border: 1px solid var(--mad-border, #e5e7eb);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.mad-wb-swatch {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--sw, #FFF3A3); border: 1px solid rgba(0,0,0,.18);
}
.mad-wb-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mad-surface, #fff), 0 0 0 4px var(--mad-text, #18181b); }
.mad-wb-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .3rem; padding: .3rem .4rem;
  border-radius: 6px; background: rgba(255,255,255,.7); font-size: .78rem; color: var(--wb-ink);
}
.mad-wb-confirm span { flex: 1 1 100%; font-weight: 500; }
.mad-wb-confirm button {
  height: 26px; padding: 0 .55rem; border-radius: 5px; font: inherit; font-size: .78rem; cursor: pointer;
  border: 1px solid rgba(0,0,0,.2); background: #fff; color: var(--wb-ink);
}
.mad-wb-confirm button[data-wb-yes] { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.mad-whiteboard.is-locked .mad-wb-note { cursor: default; }
@media (prefers-reduced-motion: reduce) { .mad-wb-note, .mad-wb-tools { transition: none; } }
@media (max-width: 560px) {
  .mad-wb-toolbar { gap: .4rem; }
  .mad-wb-title { flex: 1 1 100%; }
  .mad-wb-hint { font-size: .74rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
   Paleta das séries dos gráficos — usada por <mad-db-chart>/<mad-chart> com
   séries montadas no PHP, marcadores ("Hoje", "Contratado") e donut com meta.
   O tema do app pode sobrescrever os tokens; o gráfico relê a cada desenho.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --mad-chart-1: #2563eb;
  --mad-chart-2: #f97316;
  --mad-chart-3: #16a34a;
  --mad-chart-4: #0891b2;
  --mad-chart-5: #d97706;
  --mad-chart-6: #dc2626;
  --mad-chart-7: #0d9488;
  --mad-chart-8: #64748b;
  --mad-chart-track: #e5e7eb;
  --mad-chart-marker: #ea580c;
  --mad-chart-orange: #f97316;
}
html[data-theme="dark"] {
  --mad-chart-1: #60a5fa;
  --mad-chart-2: #fb923c;
  --mad-chart-3: #4ade80;
  --mad-chart-4: #22d3ee;
  --mad-chart-5: #fbbf24;
  --mad-chart-6: #f87171;
  --mad-chart-7: #2dd4bf;
  --mad-chart-8: #94a3b8;
  --mad-chart-track: #3f3f46;
  --mad-chart-marker: #fb923c;
  --mad-chart-orange: #fb923c;
}

/* Tema ERP: gráficos na marca (fw#497). `--mad-chart-theme: brand` liga o tema
   da marca no ECharts (fonte do app, grade e eixos em cinza claro, barra de no
   máximo 48px); a paleta sai da cor primária e das cores de status. As cores
   automáticas (--mad-chart-auto-N) só existem aqui: sem elas o gráfico usa a
   paleta de sempre. Qualquer tema pode ligar o mesmo nos seus tokens.
   `theme="brand"` no gráfico (.mad-chart-brand) liga o mesmo em qualquer preset. */
body.mad-layout-erp,
.mad-chart-brand {
  --mad-chart-theme: brand;
  --mad-chart-1: var(--mad-primary);
  --mad-chart-2: color-mix(in srgb, var(--mad-primary) 55%, var(--mad-bg, #fff));
  --mad-chart-3: var(--mad-success);
  --mad-chart-4: var(--mad-info);
  --mad-chart-5: var(--mad-warning);
  --mad-chart-6: var(--mad-danger);
  --mad-chart-7: color-mix(in srgb, var(--mad-primary) 28%, var(--mad-bg, #fff));
  --mad-chart-8: color-mix(in srgb, var(--mad-text-muted) 70%, var(--mad-bg, #fff));
  --mad-chart-track: var(--mad-border);
  --mad-chart-axis: var(--mad-border);
  --mad-chart-grid: color-mix(in srgb, var(--mad-border) 60%, var(--mad-bg, #fff));
  /* Ordem automática: só a família da marca e neutros — verde, âmbar e
     vermelho são status e entram só por `colors`, tom explícito ou farol
     (fw#499). O gráfico ainda ajusta cada cor ao fundo do card (contraste de
     3:1), varia a luminosidade quando as séries passam de 8 e, com marca
     vermelha, começa pelos neutros (fw#498). */
  --mad-chart-auto-1: var(--mad-chart-1);
  --mad-chart-auto-2: var(--mad-chart-2);
  --mad-chart-auto-3: var(--mad-chart-8);
  --mad-chart-auto-4: color-mix(in srgb, var(--mad-primary) 62%, var(--mad-text, #1a1d21));
  --mad-chart-auto-5: color-mix(in srgb, var(--mad-text, #1a1d21) 78%, var(--mad-bg, #fff));
  --mad-chart-auto-6: var(--mad-chart-7);
  --mad-chart-auto-7: color-mix(in srgb, var(--mad-primary) 45%, var(--mad-text-muted, #6b7280));
  --mad-chart-auto-8: color-mix(in srgb, var(--mad-text-muted, #6b7280) 45%, var(--mad-bg, #fff));
  --mad-chart-auto-fill-1: var(--mad-chart-auto-1);
  --mad-chart-auto-fill-2: var(--mad-chart-auto-2);
  --mad-chart-auto-fill-3: var(--mad-chart-auto-3);
  --mad-chart-auto-fill-4: var(--mad-chart-auto-4);
  --mad-chart-auto-fill-5: var(--mad-chart-auto-5);
  --mad-chart-auto-fill-6: var(--mad-chart-auto-6);
  --mad-chart-auto-fill-7: var(--mad-chart-auto-7);
  --mad-chart-auto-fill-8: var(--mad-chart-auto-8);
}
/* `theme="classic"`: a paleta de sempre mesmo no ERP (sem valor, o var() cai na reserva). */
.mad-chart-classic {
  --mad-chart-theme: classic;
  --mad-chart-auto-1: initial; --mad-chart-auto-2: initial; --mad-chart-auto-3: initial; --mad-chart-auto-4: initial;
  --mad-chart-auto-5: initial; --mad-chart-auto-6: initial; --mad-chart-auto-7: initial; --mad-chart-auto-8: initial;
  --mad-chart-auto-fill-1: initial; --mad-chart-auto-fill-2: initial; --mad-chart-auto-fill-3: initial; --mad-chart-auto-fill-4: initial;
  --mad-chart-auto-fill-5: initial; --mad-chart-auto-fill-6: initial; --mad-chart-auto-fill-7: initial; --mad-chart-auto-fill-8: initial;
}

/* Gráfico sem dados: aviso no meio, na altura que o gráfico teria. */
.mad-chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; color: var(--mad-muted);
}
.mad-chart-empty > :is(svg, i) { display: block; width: 40px; height: 40px; margin-bottom: .5rem; opacity: .3; }
.mad-chart-empty > p { margin: 0; font-size: .9rem; }
.mad-layout-erp .mad-chart-empty > :is(svg, i) { width: 28px; height: 28px; opacity: .45; }
.mad-layout-erp .mad-chart-empty > p { font-size: 13px; color: var(--mad-text-muted); }

/* <mad-db-blocks>: a lista não carregou (fw#481) — no lugar do "Nenhum item". */
.mad-db-blocks-error { font-size: 12px; color: var(--mad-danger, #dc2626); padding: 8px 4px; }