/* ==========================================================================
   DESIGN SYSTEM — MI7 GRUPO  v2.0
   style.css
   01. Reset & Base
   02. Variáveis / Temas (Light / Dark)
   03. Layout — App Shell
   04. Sidebar — Hamburger, Nav Groups, Submenus
   05. Header & Footer
   06. Componentes — Botões
   07. Componentes — Badges
   08. Componentes — Formulários (Input, Checkbox, Custom-Select, Multi-Select)
   09. Componentes — Filtros (Accordion, Active-Bar, Side-Drawer, Preset Panel)
   10. Componentes — Tabela (Normal / Compact / Dense)
   11. Componentes — Cards / Dashboard
   12. Componentes — Code Block
   13. Utilitários / Skeleton / Misc
   14. Responsividade
   ========================================================================== */

/* ==========================================================================
   01. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  line-height: 1.6;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  transition: background-color .3s ease, color .3s ease;
  overflow: hidden;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}
img,
svg {
  display: block;
  max-width: 100%;
}
/* O atributo `hidden` SEMPRE oculta — vence regras de componente que definem
   `display` (ex.: .info-banner, .master-detail__panel/__placeholder, dropdowns).
   Sem isso, toggles via `el.hidden = true/false` não funcionam nesses
   componentes (placeholder e painel apareciam juntos no master-detail). */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   FONTES DO DESIGN SYSTEM — DM Sans (texto) + DM Mono (números/labels),
   ambas OFL, auto-hospedadas em ../fonts/ (sem CDN externo). Licenças em
   ../fonts/OFL-DMSans.txt e OFL-DMMono.txt.
   ========================================================================== */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dmsans-300.342395bd2664.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dmsans-400.a220a32881ae.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dmsans-500.aa952242481d.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dmsans-600.c64569e0302e.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dmsans-700.9508ec8af518.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dmmono-300.759da6a18725.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dmmono-400.e1ed461ac183.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dmmono-500.c4598219c4b8.woff2") format("woff2");
}

/* ==========================================================================
   02. VARIÁVEIS — TEMA LIGHT
   ========================================================================== */
:root {
  /* Fundos (tema light) */
  --color-bg-base: #f2f4f8;
  --color-bg-surface: #ffffff;
  --color-bg-surface-alt: #f7f9fc; /* elevated */
  --color-bg-overlay: #eef0f6; /* overlay/sunken */
  --color-bg-sidebar: #ffffff;
  --color-bg-header: #ffffff;
  --color-bg-input: #f7f9fc;
  --color-bg-hover: rgba(21, 24, 40, 0.04);

  /* Textos */
  --color-text-primary: #151828;
  --color-text-secondary: rgba(21, 24, 40, 0.58);
  --color-text-muted: rgba(21, 24, 40, 0.38);
  --color-text-inverse: #ffffff;
  --color-text-sidebar: rgba(21, 24, 40, 0.58);
  --color-text-sidebar-active: #151828;

  /* Acento da marca = VERDE-LIMA (ação primária, foco, ativos, links).
     No light usa o lima escuro #9db020 para contraste sobre branco. */
  --color-accent: #9db020;
  --color-accent-hover: #c0d52a; /* hover mais vivo */
  --color-accent-dark: #7a8a10; /* texto de acento legível sobre -light */
  --color-accent-light: rgba(157, 176, 32, 0.12); /* fundo tonal (dim) */
  --color-accent-rgb: 157, 176, 32;
  --color-text-on-accent: #0e1120; /* texto sobre botão lima */

  /* Azul-céu — cor secundária de apoio. */
  --color-sky: #3787a8;
  --color-sky-dim: rgba(55, 135, 168, 0.12);

  /* Marca institucional (logo) — estável entre temas. */
  --color-brand-green: #c0d52a;
  --color-brand-navy: #151828;
  --color-brand-sky: #51a3c8;
  --color-brand-green-rgb: 192, 213, 42;
  --gradient-brand: linear-gradient(
    135deg,
    var(--color-brand-green) 0%,
    var(--color-brand-sky) 100%
  );

  /* Fonte mono — números, labels técnicos, cabeçalhos de tabela. */
  --font-mono: "DM Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* Semânticas (tons suaves da referência). -light é o fundo tonal (dim);
     -text é a cor do texto/ícone sobre esse fundo (= a própria cor). */
  --color-success: #2da870;
  --color-success-light: rgba(45, 168, 112, 0.1);
  --color-success-text: var(--color-success);
  --color-warning: #c8851a;
  --color-warning-light: rgba(200, 133, 26, 0.1);
  --color-warning-text: var(--color-warning);
  --color-danger: #c94545;
  --color-danger-light: rgba(201, 69, 69, 0.1);
  --color-danger-text: var(--color-danger);
  --color-info: #3787a8;
  --color-info-light: rgba(55, 135, 168, 0.1);
  --color-info-text: var(--color-info);

  /* Bordas */
  --color-border: rgba(21, 24, 40, 0.1);
  --color-border-strong: rgba(21, 24, 40, 0.2);
  --color-border-accent: rgba(157, 176, 32, 0.4);
  --color-border-focus: var(--color-accent);

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-accent: 0 0 24px rgba(157, 176, 32, 0.15);
  --shadow-focus: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);

  /* Dimensões */
  --sidebar-expanded: 240px;
  --sidebar-collapsed: 64px;
  --header-height: 60px;
  --footer-height: 44px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Tipografia */
  --font-family-base: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-xs: .75rem;
  --font-sm: .8125rem;
  --font-base: .875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;

  /* Transições */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index */
  --z-sidebar: 100;
  --z-header: 200;
  --z-overlay: 290;
  --z-drawer: 300;
  --z-modal: 350;
  --z-tooltip: 400;

  /* Overlay para modais/drawers — uso obrigatório em qualquer fundo de
     dialog full-screen para que componentes futuros do DS herdem a
     mesma opacidade/tom (rule design-system-frontend §"Nenhuma cor
     hex/rgb fora de var(--color-*)"). Tema dark redefine abaixo para
     manter contraste sobre fundos já escuros. */
  --color-overlay: rgba(10, 12, 22, 0.55);
}

/* --- TEMA DARK (paleta da referência MI7) --- */
[data-theme="dark"] {
  --color-bg-base: #0e1120;
  --color-bg-surface: #151828;
  --color-bg-surface-alt: #1c2236; /* elevated */
  --color-bg-overlay: #252d45;
  --color-bg-sidebar: #151828;
  --color-bg-header: #151828;
  --color-bg-input: #1c2236;
  --color-bg-hover: rgba(192, 213, 42, 0.06);

  --color-text-primary: #eef0f8;
  --color-text-secondary: rgba(238, 240, 248, 0.55);
  --color-text-muted: rgba(238, 240, 248, 0.3);
  --color-text-sidebar: rgba(238, 240, 248, 0.55);
  --color-text-sidebar-active: #eef0f8;

  /* Acento lima — vivo sobre o escuro. */
  --color-accent: #c0d52a;
  --color-accent-hover: #d4ea3a;
  --color-accent-dark: #c0d52a;
  --color-accent-light: rgba(192, 213, 42, 0.15);
  --color-accent-rgb: 192, 213, 42;
  --color-text-on-accent: #0e1120;

  --color-sky: #51a3c8;
  --color-sky-dim: rgba(81, 163, 200, 0.15);

  --color-success: #4ec994;
  --color-success-light: rgba(78, 201, 148, 0.15);
  --color-warning: #e8a838;
  --color-warning-light: rgba(232, 168, 56, 0.15);
  --color-danger: #e05757;
  --color-danger-light: rgba(224, 87, 87, 0.15);
  --color-info: #51a3c8;
  --color-info-light: rgba(81, 163, 200, 0.15);

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-border-accent: rgba(192, 213, 42, 0.35);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 24px rgba(192, 213, 42, 0.2);

  --color-overlay: rgba(10, 12, 22, 0.72);
}

/* ==========================================================================
   03. LAYOUT — APP SHELL
   ========================================================================== */
.app-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

.main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* Top reduzido p/ aproveitar a área útil (título mais alto); laterais e
     base mantêm 24px. */
  padding: 16px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.main-content::-webkit-scrollbar {
  width: 6px;
}
.main-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
.main-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ==========================================================================
   04. SIDEBAR
   ========================================================================== */
.sidebar {
  width: var(--sidebar-expanded);
  min-width: var(--sidebar-expanded);
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: width var(--t-slow), min-width var(--t-slow), background var(--t-slow);
  overflow: hidden;
  position: relative;
  z-index: var(--z-sidebar);
  flex-shrink: 0;
}
.sidebar.is-collapsed {
  width: var(--sidebar-collapsed);
  min-width: var(--sidebar-collapsed);
}

/* --- Logo --- */
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar__logo-icon {
  /* Símbolo circular — o SVG inline faz o ring com centro transparente */
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar__logo-text {
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  opacity: 1;
  color: var(--color-text-primary);
  transition: opacity var(--t-base);
}
.sidebar__logo-text span {
  color: var(--color-accent);
}
.sidebar.is-collapsed .sidebar__logo-text {
  opacity: 0;
  pointer-events: none;
}

/* --- Navegação --- */
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.sidebar__nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 4px;
}

/* --- Item simples --- */
.sidebar__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  color: var(--color-text-sidebar);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 100%;
  text-align: left;
  border-left: 2px solid transparent;
}
.sidebar__item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.sidebar__item.is-active {
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: 500;
}

.sidebar__item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  opacity: 0.65;
  transition: opacity var(--t-fast);
}
.sidebar__item-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: currentColor;
}
.sidebar__item:hover .sidebar__item-icon,
.sidebar__group-toggle:hover .sidebar__item-icon,
.sidebar__item.is-active .sidebar__item-icon,
.sidebar__group.is-open > .sidebar__group-toggle .sidebar__item-icon {
  opacity: 1;
}
.sidebar__item-text {
  font-size: var(--font-sm);
  font-weight: 400;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--t-base);
}
.sidebar.is-collapsed .sidebar__item-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Tooltip no modo collapsed */
.sidebar.is-collapsed .sidebar__item[data-tooltip]::after,
.sidebar.is-collapsed .sidebar__group-toggle[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-brand-navy);
  color: var(--color-text-inverse);
  font-size: var(--font-xs);
  font-weight: 400;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-strong);
}
.sidebar.is-collapsed .sidebar__item[data-tooltip]:hover::after,
.sidebar.is-collapsed .sidebar__group-toggle[data-tooltip]:hover::after {
  opacity: 1;
}

/* --- Section label --- */
.sidebar__section-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-muted);
  padding: 14px 18px 5px;
  white-space: nowrap;
  transition: opacity var(--t-base), height var(--t-base), padding var(--t-base);
}
.sidebar.is-collapsed .sidebar__section-label {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

/* --- NAV GROUP (com sub-itens) --- */
.sidebar__group {
  width: 100%;
}

.sidebar__group-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 18px;
  color: var(--color-text-sidebar);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color var(--t-fast), color var(--t-fast);
  border-left: 2px solid transparent;
}
.sidebar__group-toggle:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.sidebar__group.is-open > .sidebar__group-toggle {
  color: var(--color-text-primary);
}

.sidebar__group-chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  transition: transform var(--t-base), opacity var(--t-base), color var(--t-fast);
  color: var(--color-text-muted);
}
.sidebar__group.is-open > .sidebar__group-toggle .sidebar__group-chevron {
  transform: rotate(90deg);
  color: var(--color-accent);
}
.sidebar.is-collapsed .sidebar__group-chevron {
  opacity: 0;
}

/* --- SUBMENU --- */
.sidebar__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
  margin-left: 27px;
  padding-left: 0;
  border-left: 1px solid var(--color-border);
}

.sidebar__item--sub {
  font-size: var(--font-xs);
  padding: 6px 12px 6px 18px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
/* Traço horizontal conectando ao fio vertical */
.sidebar__item--sub::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 7px;
  height: 1px;
  background: var(--color-text-muted);
  opacity: 0.5;
}
.sidebar__item--sub:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.sidebar__item--sub:hover::before {
  opacity: 1;
  background: var(--color-accent);
}
.sidebar__item--sub.is-active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: var(--color-accent-light);
  font-weight: 500;
}
.sidebar__item--sub.is-active::before {
  background: var(--color-accent);
  opacity: 1;
}

/* Oculta submenus no modo collapsed */
.sidebar.is-collapsed .sidebar__submenu {
  max-height: 0 !important;
}

/* ==========================================================================
   05. HEADER & FOOTER
   ========================================================================== */
/* <!-- BLOCK: header --> */
.app-header {
  height: var(--header-height);
  background: var(--color-bg-header);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: var(--z-header);
  box-shadow: var(--shadow-xs);
  gap: 12px;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

/* Sinalização de ambiente não-production — só o badge, header fica na cor normal */
.env-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-danger-text);
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  white-space: nowrap;
}

/* Hamburger */
.header__hamburger {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.header__hamburger:hover {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
}

.header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  white-space: nowrap;
  overflow: hidden;
}
.header__breadcrumb strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.header__breadcrumb .sep {
  color: var(--color-text-muted);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header__icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.header__icon-btn:hover {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
}

.header__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-brand-green) 0%, var(--color-brand-sky) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
/* <!-- /BLOCK: header --> */

/* <!-- BLOCK: footer --> */
.app-footer {
  height: var(--footer-height);
  background: var(--color-bg-header);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}
.footer__version {
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer__status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-success);
  font-weight: 500;
}
.footer__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
}
/* <!-- /BLOCK: footer --> */

/* ==========================================================================
   06. BOTÕES
   ========================================================================== */
/* <!-- BLOCK: buttons --> */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast),
    box-shadow var(--t-fast), transform 80ms ease;
  user-select: none;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
}

.btn--secondary {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover {
  border-color: var(--color-border-accent);
  color: var(--color-accent);
}

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

.btn--outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn--outline:hover {
  border-color: var(--color-text-primary);
  background: var(--color-bg-surface-alt);
}

.btn--danger {
  background: var(--color-danger-light);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}
.btn--danger:hover {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.35), 0 2px 6px rgba(239, 68, 68, 0.2);
}

.btn--success {
  background: var(--color-success-light);
  color: var(--color-success-text);
  border-color: var(--color-success);
}
.btn--success:hover {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.35), 0 2px 6px rgba(34, 197, 94, 0.2);
}

.btn--info {
  background: var(--color-info-light);
  color: var(--color-info-text);
  border-color: var(--color-info);
}
.btn--info:hover {
  background: var(--color-info);
  color: #fff;
  border-color: var(--color-info);
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(59, 130, 246, 0.2);
}

.btn--warning {
  background: var(--color-warning-light);
  color: var(--color-warning-text);
  border-color: var(--color-warning);
}
.btn--warning:hover {
  background: var(--color-warning);
  color: #fff;
  border-color: var(--color-warning);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35), 0 2px 6px rgba(245, 158, 11, 0.2);
}

/* 38px — mesma altura de .form-input/.custom-select__trigger, pra nunca
   sobrar em degrau ao lado de um campo de busca/select na mesma toolbar
   (ver comentário em ".custom-select__trigger { height: 38px }"). */
.btn--sm {
  padding: 6px 12px;
  font-size: var(--font-xs);
  height: 38px;
}
.btn--lg {
  padding: 12px 24px;
  font-size: var(--font-base);
  border-radius: var(--radius-md);
}
.btn--icon {
  padding: 8px;
}

/* Loading state */
.btn[aria-busy="true"] {
  cursor: wait;
  opacity: 0.8;
}
@keyframes btn-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dark mode — texto claro nos fundos sólidos do hover. O texto de repouso
   já vem dos tokens --color-*-text (redefinidos no tema dark). */
[data-theme="dark"] .btn--success:hover,
[data-theme="dark"] .btn--danger:hover,
[data-theme="dark"] .btn--warning:hover,
[data-theme="dark"] .btn--info:hover {
  color: #fff;
}
/* <!-- /BLOCK: buttons --> */

/* ==========================================================================
   07. BADGES
   ========================================================================== */
/* <!-- BLOCK: badges --> */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge--success {
  background: var(--color-success-light);
  color: var(--color-success-text);
}
.badge--danger {
  background: var(--color-danger-light);
  color: var(--color-danger-text);
}
.badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning-text);
}
.badge--info {
  background: var(--color-info-light);
  color: var(--color-info-text);
}
.badge--neutral {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-secondary);
}
.badge--accent {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}
/* Variante de alta ênfase — fundo cheio com a cor da marca.
   Use quando o badge é a *informação principal* do contexto (ex.:
   contagem total de registros no rodapé de uma tabela). */
.badge--solid {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.badge .badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Filter badge (removível) */
.filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  white-space: nowrap;
}
.filter-badge__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent);
  transition: background var(--t-fast);
  cursor: pointer;
}
.filter-badge__remove:hover {
  background: var(--color-accent);
  color: #fff;
}
/* <!-- /BLOCK: badges --> */

/* ==========================================================================
   08. FORMULÁRIOS
   ========================================================================== */
/* <!-- BLOCK: forms --> */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.form-label.is-required::after {
  content: " *";
  color: var(--color-danger);
}

.form-input,
.form-select-native {
  width: 100%;
  padding: 9px 12px;
  background: var(--color-bg-input);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
  outline: none;
}
/* Altura padronizada (38px) — mesma altura de `.custom-select__trigger` e
   `.btn--sm`, pra input/select/botão nunca ficarem em "degrau" na mesma
   toolbar. `:not(textarea)` porque `.form-input` também é reusada em
   textarea (ex.: descrição do produto), que precisa da altura de `rows`. */
.form-input:not(textarea),
.form-select-native {
  height: 38px;
}
.form-input::placeholder {
  color: var(--color-text-muted);
}
.form-input:hover {
  border-color: var(--color-text-muted);
}
.form-input:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
.form-input.is-error {
  border-color: var(--color-danger);
}
.form-input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.form-input:disabled,
.form-select-native:disabled {
  background: var(--color-bg-surface-alt);
  cursor: not-allowed;
}

.form-hint {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}
.form-hint.is-error {
  color: var(--color-danger);
}

/* Read-only "input" — usado em drawers view-only para exibir um valor
   formatado sem aceitar edição. Mantém alinhamento visual com
   ``.form-input`` (background, borda, raio, font) para não criar uma
   variante destoante quando colocado lado a lado num ``.form-grid``. */
.form-readonly {
  display: inline-block;
  padding: 8px 10px;
  min-height: 36px;
  color: var(--color-text-primary);
  background: var(--color-bg-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  line-height: 1.4;
  word-break: break-word;
}

/* Erro genérico — funciona com .field__input (login) e .form-input (demais páginas) */
input.is-error,
select.is-error,
textarea.is-error {
  border-color: var(--color-danger) !important;
}
input.is-error:focus,
select.is-error:focus,
textarea.is-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.form-input-wrapper {
  position: relative;
}
.form-input-wrapper .form-input {
  padding-left: 36px;
}
.form-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
}

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.form-checkbox__box {
  width: 17px;
  height: 17px;
  border-radius: var(--radius-xs);
  border: 2px solid var(--color-border);
  background: var(--color-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-checkbox input:checked + .form-checkbox__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.form-checkbox input:focus-visible + .form-checkbox__box {
  box-shadow: var(--shadow-focus);
}
.form-checkbox:hover .form-checkbox__box {
  border-color: var(--color-accent);
}
.form-checkbox__check {
  color: var(--color-text-on-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.form-checkbox input:checked + .form-checkbox__box .form-checkbox__check {
  opacity: 1;
  transform: scale(1);
}
.form-checkbox__label {
  font-size: var(--font-sm);
  color: var(--color-text-primary);
}

/* Custom Select */
.custom-select {
  position: relative;
  user-select: none;
}
.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: var(--color-bg-input);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-sm);
  cursor: pointer;
  gap: 8px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.custom-select.is-open .custom-select__trigger {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.custom-select__trigger-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select__trigger-text.is-placeholder {
  color: var(--color-text-muted);
}
.custom-select__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--t-base);
}
.custom-select.is-open .custom-select__chevron {
  transform: rotate(180deg);
}

/* "× limpar" injetado pelo JS dentro do trigger. Visível apenas quando
   há valor selecionado (``hidden`` controlado pelo JS). Cor já vermelha
   (discreta) para deduzir a função; hover intensifica + cresce levemente
   para confirmar a affordance. */
.custom-select__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  color: var(--color-danger);
  opacity: 0.5;
  border-radius: var(--radius-full);
  cursor: pointer;
  transform: scale(1);
  transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.custom-select__clear:hover,
.custom-select__clear:focus-visible {
  opacity: 1;
  transform: scale(1.18);
  background: var(--color-danger-light);
}

.custom-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-accent);
  border-top: none;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  z-index: var(--z-drawer);
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  max-height: 240px;
  overflow: hidden;
}
.custom-select.is-open .custom-select__dropdown {
  display: flex;
}
/* Auto-flip: quando aplicada via JS, o dropdown abre para CIMA. Usado em
   selects próximos ao fim de áreas com overflow (ex.: drawer body). */
.custom-select.is-open-up .custom-select__dropdown {
  top: auto;
  bottom: 100%;
  border-top: 1.5px solid var(--color-accent);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.custom-select.is-open-up.is-open .custom-select__trigger {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.custom-select__search {
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.custom-select__search input {
  width: 100%;
  padding: 6px 10px;
  background: var(--color-bg-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--color-text-primary);
  font-size: var(--font-sm);
  outline: none;
  transition: border-color var(--t-fast);
}
.custom-select__search input:focus {
  border-color: var(--color-accent);
}

.custom-select__options {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
.custom-select__option {
  padding: 8px 14px;
  font-size: var(--font-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--t-fast);
  outline: none;
}
.custom-select__option:hover {
  background: var(--color-bg-hover);
}
.custom-select__option.is-selected {
  color: var(--color-accent);
  font-weight: 600;
  background: var(--color-accent-light);
}
.custom-select__option.is-hidden {
  display: none;
}

/* Multiselect */
.multiselect {
  position: relative;
  user-select: none;
}
.multiselect__trigger {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  padding: 7px 12px;
  background: var(--color-bg-input);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 40px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.multiselect.is-open .multiselect__trigger {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.multiselect__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.multiselect__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
}
.multiselect__tag-remove {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
.multiselect__tag-remove:hover {
  opacity: 1;
}
.multiselect__placeholder {
  color: var(--color-text-muted);
  align-self: center;
  font-size: var(--font-sm);
}
.multiselect__chevron {
  margin-left: auto;
  color: var(--color-text-muted);
  align-self: center;
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.multiselect.is-open .multiselect__chevron {
  transform: rotate(180deg);
}

.multiselect__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-accent);
  border-top: none;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  z-index: var(--z-drawer);
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  max-height: 220px;
}
.multiselect.is-open .multiselect__dropdown {
  display: flex;
}
.multiselect__options {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}

.multiselect__option {
  padding: 8px 14px;
  font-size: var(--font-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--t-fast);
}
.multiselect__option:hover {
  background: var(--color-bg-hover);
}
.multiselect__option-check {
  width: 15px;
  height: 15px;
  border-radius: var(--radius-xs);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.multiselect__option.is-selected .multiselect__option-check {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
/* <!-- /BLOCK: forms --> */

/* ==========================================================================
   09. FILTROS
   ========================================================================== */
/* <!-- BLOCK: filters --> */
.filter-toolbar {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  /* overflow: hidden removido — clipava o dropdown do custom-select */
}
.filter-toolbar__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.filter-toolbar__search {
  flex: 1;
  min-width: 200px;
}
.filter-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Accordion */
.filter-accordion__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--color-border);
  padding: 8px 16px;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  background: var(--color-bg-surface-alt);
  text-align: left;
}
.filter-accordion__toggle:hover {
  color: var(--color-accent);
}
.filter-accordion__toggle .acc-chevron {
  margin-left: auto;
  transition: transform var(--t-base);
}
.filter-accordion.is-open .filter-accordion__toggle .acc-chevron {
  transform: rotate(180deg);
}

.filter-accordion__body {
  display: none;
  padding: 16px;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  animation: slideDown .25s ease;
}
.filter-accordion.is-open .filter-accordion__body {
  display: grid;
}
.filter-accordion__body .form-group {
  display: flex;
  flex-direction: column;
}
.filter-accordion__body .form-group > .form-label {
  margin-bottom: 4px;
}
.filter-accordion__body .form-group > .form-input,
.filter-accordion__body .form-group > .custom-select,
.filter-accordion__body .form-group > .form-checkbox {
  margin-top: auto;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Active filters bar */
.active-filters-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  animation: slideDown .2s ease;
}
.active-filters-bar__label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.active-filters-bar__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.active-filters-bar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.active-filters-bar__clear {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-danger);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: background var(--t-fast);
}
.active-filters-bar__clear:hover {
  background: var(--color-danger-light);
}

/* Barra de ações em massa — some acima da tabela, só quando há seleção
   (nenhuma linha marcada = elemento removido do fluxo via `hidden`, não só
   invisível). Tom accent para se destacar da `.active-filters-bar` (neutra). */
.bulk-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  animation: slideDown .2s ease;
}
.bulk-select-bar[hidden] {
  display: none;
}
.bulk-select-bar__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.bulk-select-bar__label i {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}
.bulk-select-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Preset panel */
#filter-preset-panel {
  display: none;
  border-top: 1px solid var(--color-border);
  padding: 12px 16px 14px;
  background: var(--color-bg-surface-alt);
  animation: slideDown .2s ease;
}

.preset-save-section {
  margin-bottom: 12px;
}
.preset-save-section__label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.preset-save-section__row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.preset-list__title {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.preset-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  padding: 2px 0;
}
.preset-row:last-child {
  border-bottom: none;
}
.preset-row__load {
  flex: 1;
  justify-content: flex-start !important;
  text-align: left;
  gap: 6px;
}
.preset-row__load:hover {
  color: var(--color-accent) !important;
}

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
  backdrop-filter: blur(2px);
}
.overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Side Drawer */
.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 380px;
  max-width: 90vw;
  background: var(--color-bg-surface);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-slow);
}
.side-drawer.is-open {
  transform: translateX(0);
}

/* Modificadores de largura para drawers — escolha pelo conteúdo:
   - default (380px) : detalhes / formulário simples de 1 coluna
   - --md (560px)    : formulário típico de edição
   - --lg (800px)    : formulário com várias colunas ou tabs com 4 abas
   - --xl (1080px)   : tabs com 5+ abas + form-grid denso */
.side-drawer--md {
  width: 560px;
}
.side-drawer--lg {
  width: 800px;
}
.side-drawer--xl {
  width: 1180px;
}
.side-drawer--2xl {
  width: 1340px;
}

.side-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.side-drawer__title {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--color-text-primary);
}
.side-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.side-drawer__close:hover {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
}
.side-drawer__close i,
.side-drawer__close svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Agrupa ações extras do header do drawer (ex.: Histórico) ao lado do
   botão de fechar, mantendo o título à esquerda. */
.side-drawer__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Estado "ocupado" — enquanto um POST está em andamento (via
   withLoadingButton/DrawerManager.setBusy), o drawer inteiro fica inerte:
   body/footer não recebem clique, o X é desabilitado visualmente e o cursor
   indica espera. O botão em loading (spinner) permanece como feedback. */
.side-drawer.is-busy {
  cursor: wait;
}
.side-drawer.is-busy .side-drawer__body,
.side-drawer.is-busy .side-drawer__footer {
  pointer-events: none;
}
.side-drawer.is-busy .side-drawer__close {
  pointer-events: none;
  opacity: 0.5;
}

.side-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
}

/* Estado de carregamento do drawer — esqueleto de campos no lugar do
   conteúdo (mesmo padrão visual das tabelas via .skeleton-line). Por
   default fica oculto (display:none) e só aparece quando o body recebe
   .is-loading. Quando aparece, o conteúdo normal (.tabs) é ocultado. */
.side-drawer__loading {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.side-drawer__body.is-loading > .side-drawer__loading {
  display: flex;
}
.side-drawer__body.is-loading > .tabs {
  display: none;
}

.side-drawer__loading-label {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent-dark);
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.skeleton-line--label {
  width: 30%;
  height: 10px;
  margin-top: 12px;
}
.skeleton-line--input {
  height: 38px;
}

.side-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  justify-content: flex-end;
}
/* Botões do footer mantêm o tamanho natural (definido pelo ``size`` do
   {% ds_btn %}). Sem ``flex: 1`` para não esticarem para 50% cada — o
   conjunto fica ancorado à direita, compacto. */
.side-drawer__footer .btn {
  flex: 0 0 auto;
}

/* Drawer com abas: header, ABAS e footer ficam FIXOS; só o painel ativo
   rola. Boa prática de UI/UX — mantém contexto e ações sempre visíveis
   (o cabeçalho/abas sumirem no scroll é anti-padrão). Aplica-se a todos os
   drawers que usam .tabs no corpo. */
.side-drawer__body:has(> .tabs) {
  overflow: hidden;
  padding: 0;
  gap: 0;
}
.side-drawer__body > .tabs {
  flex: 1;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.side-drawer__body > .tabs > .tabs__list {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 20px 0;
}
.side-drawer__body > .tabs > .tabs__panel.is-active {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------------------
   Side-drawer — barras inline DENTRO de abas (não confundir com
   ``.side-drawer__footer`` que vive fora das abas e tem border-top).

   Caso de uso: aba CRUD inline (Concorrente > Parâmetros / Departamentos /
   Faixas / Tags) com cabeçalho (título + ação de criar) + formulário
   inline reveláve / quick-add + rodapé com botão de "Salvar tudo".

   Promovido ao DS global em PR de padronização da aba Tags — antes
   essas classes existiam como órfãs no template (sem CSS), só
   funcionando por defaults do browser. */
.side-drawer__inline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.side-drawer__inline-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
/* Bloco do formulário inline (revelado pelo botão "Adicionar"). Cartão
   levemente recuado do painel da aba para deixar claro que é uma área
   editável; ``hidden`` por default — caller controla via JS. */
.side-drawer__inline-form {
  background: var(--color-bg-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}
/* Linha de ações alinhada à direita (Cancelar/Salvar do form inline ou
   "Salvar tudo" no rodapé da aba). Substitui o anti-padrão
   ``style="display:flex;gap:8px;justify-content:flex-end;"`` espalhado
   pelos templates. ``--spaced`` aplica margem superior para uso como
   rodapé de aba (sem competir com border-top do drawer global). */
.side-drawer__inline-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.side-drawer__inline-actions--spaced {
  margin-top: 16px;
}
/* "Quick-add" — input + botão para criação inline a partir da própria
   toolbar (ex.: criar tag pela aba Tags). Input compactado para não
   ocupar a faixa inteira e bater visualmente com botão ``btn--sm``. */
.side-drawer__inline-quick-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.side-drawer__inline-quick-add .form-input {
  width: 220px;
  min-height: 32px;
  padding: 4px 10px;
  font-size: var(--font-xs);
}

/* ---------------------------------------------------------------------
   Tag-typeahead — multi-seleção com busca lazy (carrega opções sob
   demanda do backend). Usado em aba de drawer com volume grande de
   opções, onde carregar tudo upfront é desperdício. Composto por:
     .tag-typeahead                  — root
     .tag-typeahead__selected        — área dos chips selecionados
     .tag-typeahead__chip            — chip de tag selecionada (com X)
     .tag-typeahead__chip-remove     — botão X
     .tag-typeahead__search          — wrapper do input
     .tag-typeahead__search-icon     — lupa
     .tag-typeahead__dropdown        — lista de resultados
     .tag-typeahead__option          — item do dropdown
     .tag-typeahead__option.is-active — destaque do keyboard nav
     .tag-typeahead__empty           — estado vazio do dropdown */
.tag-typeahead {
  position: relative;
}
.tag-typeahead__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 28px;
}
.tag-typeahead__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--font-xs);
  font-weight: 600;
}
.tag-typeahead__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.tag-typeahead__chip-remove:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
.tag-typeahead__search {
  position: relative;
  max-width: 360px;
}
.tag-typeahead__search .form-input {
  min-height: 32px;
  padding: 4px 10px 4px 32px;
  font-size: var(--font-xs);
}
.tag-typeahead__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.tag-typeahead__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-width: 360px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
}
.tag-typeahead__dropdown[hidden] {
  display: none;
}
.tag-typeahead__option {
  padding: 6px 12px;
  font-size: var(--font-xs);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-typeahead__option:hover,
.tag-typeahead__option.is-active {
  background: var(--color-bg-surface-alt);
}
.tag-typeahead__empty {
  padding: 12px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-xs);
}

/* Master-Detail: layout lista + painel à direita, usado em abas de drawer
   com CRUD inline (Contatos do Cliente, Permissões/Horários do Usuário…).
   Container horizontal; mobile estreito empilha vertical.

   ``align-items: flex-start`` mantém o painel do form com altura natural: ele
   não acompanha a altura da tabela (que pode ser longa), garantindo que o
   rodapé com o botão Salvar fique sempre visível sem rolagem. */
.master-detail {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.master-detail__list {
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Toolbar com botão "Incluir" alinhado à direita acima da tabela. */
.master-detail__toolbar {
  display: flex;
  justify-content: flex-end;
}
.master-detail__form {
  flex: 1 1 40%;
  min-width: 320px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Placeholder centrado quando nenhum item está selecionado. */
.master-detail__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px 16px;
}
.master-detail__placeholder p {
  margin: 0;
  font-size: var(--font-sm);
  max-width: 240px;
  line-height: 1.5;
}
.master-detail__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.master-detail__panel-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}
.master-detail__panel-title {
  margin: 0;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text-primary);
}
.master-detail__panel-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/* Excluir empurrado para a esquerda — separação visual de "cancelar/salvar". */
.master-detail__panel-delete {
  margin-right: auto;
}
@media (max-width: 900px) {
  .master-detail {
    flex-direction: column;
  }
  .master-detail__list,
  .master-detail__form {
    flex: 1 1 auto;
    min-width: 0;
  }
}
/* <!-- /BLOCK: filters --> */

/* ==========================================================================
   10. TABELA
   ========================================================================== */
/* <!-- BLOCK: table --> */
.table-wrapper {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 10px;
}
.table-header__title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text-primary);
}
.table-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Density control */
.table-density-control {
  display: flex;
  align-items: center;
  background: var(--color-bg-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.table-density-control [data-density] {
  padding: 5px 10px;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.table-density-control [data-density]:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.table-density-control [data-density].is-active {
  background: var(--color-accent);
  color: #fff;
}

.table-scroll {
  overflow-x: auto;
  /* Clipa o eixo vertical: a tabela não tem scroll vertical próprio no
     desktop (quem rola é o .main-content). Sem isto, ``overflow-x: auto``
     força ``overflow-y: auto`` implícito (spec CSS) e geraria uma barra de
     rolagem vertical indesejada. O scroll vertical próprio existe apenas no
     mobile (media query, com max-height). */
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.table-scroll::-webkit-scrollbar {
  height: 5px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

/* Normal */
.data-table thead th {
  padding: 5px 12px;
  text-align: left;
  font-size: var(--font-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  background: var(--color-bg-surface-alt);
  border-bottom: 1.5px solid var(--color-border);
  white-space: nowrap;
  /* Header fixo: gruda no topo do .table-scroll durante o scroll vertical
     (mobile) e mantém o cabeçalho visível. O background opaco impede que as
     linhas vazem por baixo. Em border-collapse o sticky precisa ficar no
     th (não no thead/tr) para funcionar no Chrome. */
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Colunas ordenáveis — JS aplica is-sortable / is-sort-asc / is-sort-desc e
   injeta o ícone Lucide ``.sort-icon`` (ver designsystem/js/components/
   sort-header.js). Página é dona da regra de toggle (asc/desc/off). */
.data-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 26px;
}
.data-table thead th.is-sortable .sort-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  opacity: 0.45;
  transition: opacity var(--t-fast), color var(--t-fast);
  pointer-events: none;
}
.data-table thead th.is-sortable:hover .sort-icon {
  opacity: 0.85;
}
.data-table thead th.is-sort-asc,
.data-table thead th.is-sort-desc {
  color: var(--color-accent);
}
.data-table thead th.is-sort-asc .sort-icon,
.data-table thead th.is-sort-desc .sort-icon {
  color: var(--color-accent);
  opacity: 1;
}
/* Default da tabela: célula NUNCA quebra linha. Linha que precisa
   quebrar usa ``cell-wrap`` (opt-in explícito); célula com texto longo
   que precisa ellipsis + tooltip usa ``cell-truncate``. Sem isso, qualquer
   td com texto longo arrebenta a altura da linha — vide regra
   "Linha não pode ficar gigante porque uma célula tem texto comprido"
   em FRONTEND_STYLE_GUIDE.md. */
.data-table tbody td {
  padding: 2px 12px;
  vertical-align: middle;
  line-height: 1.25;
  white-space: nowrap;
}
.data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-border);
}
/* Linha clicável por padrão — em todas as tabelas, clicar na linha abre o
   detalhe/edição do registro. JS é responsável por escutar o clique
   e disparar a ação; o CSS só sinaliza visualmente (cursor de link). */
.data-table tbody tr,
.data-table tbody tr td {
  cursor: pointer;
}
.data-table tbody tr {
  transition: background var(--t-fast);
}
.data-table tbody tr:hover td {
  background: rgba(var(--color-accent-rgb), 0.07);
}
/* Elementos interativos dentro da linha mantêm seu próprio cursor. */
.data-table tbody tr td input[type="checkbox"],
.data-table tbody tr td button,
.data-table tbody tr td a {
  cursor: pointer;
}
.data-table tbody tr td input[type="text"],
.data-table tbody tr td input[type="email"],
.data-table tbody tr td input[type="number"],
.data-table tbody tr td select,
.data-table tbody tr td textarea {
  cursor: text;
}
/* Coluna de ações: largura de conteúdo (``width: 1%`` + ``nowrap``), à
   direita; as colunas de dados absorvem a folga restante. */
.data-table thead th.col-actions,
.data-table td.col-actions {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}

/* Coluna de seleção em massa — checkbox compacto, sempre na primeira
   coluna. Ocupa largura mínima para não desperdiçar espaço, alinhado
   ao centro para que header e linha fiquem coincidentes verticalmente. */
.data-table thead th.col-bulk-select,
.data-table td.col-bulk-select {
  width: 32px;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
}
.data-table td.col-bulk-select .form-checkbox,
.data-table th.col-bulk-select .form-checkbox {
  margin: 0;
  cursor: pointer;
}

/* Dropdown da toolbar para ações em massa — segue a aparência de
   ``custom-select``: trigger via botão DS, painel abaixo com itens em
   coluna. Item é um ``<button>`` para herdar focus/hover do DS. */
.bulk-actions-menu {
  position: relative;
  display: inline-block;
}
.bulk-actions-menu__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px 0;
  z-index: 20;
  display: none;
}
.bulk-actions-menu.is-open .bulk-actions-menu__panel {
  display: block;
}
.bulk-actions-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}
.bulk-actions-menu__item:hover,
.bulk-actions-menu__item:focus-visible {
  background: var(--color-bg-hover);
  outline: none;
}
.bulk-actions-menu__item[disabled] {
  color: var(--color-text-muted);
  cursor: not-allowed;
  background: transparent;
}
.bulk-actions-menu__sep {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

/* Seletor de dias da semana — toolbar de atalhos + grid de checkboxes.
   Reusável em qualquer aba que precise selecionar dias da semana
   (Cliente: dias de integração; CCT: dias de envio). */
.weekday-picker__toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.weekday-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* Ações nunca empilham na vertical — quando não couberem na horizontal,
   substitua por um dropdown ("…") em vez de quebrar a linha. */
.data-table td.col-actions {
  white-space: nowrap;
}
.data-table td.col-actions > .table-actions,
.data-table td.col-actions > * {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.data-table td.col-actions > .table-actions {
  justify-content: center;
}

/* ==========================================================================
   Pin da coluna de ações — botão no header + coluna fixa (sticky right).
   Preferência GLOBAL persistida em localStorage (mi7-table-pin-actions);
   gerenciada por PinActionsManager (js/core.js). A classe .data-table--pin-actions
   é alternada no <table>.
   ========================================================================== */

/* Botão de pin injetado ao lado do rótulo "Ações" no header. */
.table-pin-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.table-pin-actions:hover,
.table-pin-actions:focus-visible {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  outline: none;
}
/* Estado fixado: cor accent + pílula tonal, distinto do estado solto
   (muted). O usuário identifica de relance se a coluna está ou não presa. */
.table-pin-actions.is-active,
.table-pin-actions.is-active:hover,
.table-pin-actions.is-active:focus-visible {
  color: var(--color-accent);
  background: var(--color-accent-light);
}
/* Ícone rotacionado reforça o estado "fixado". */
.table-pin-actions.is-active i {
  transform: rotate(45deg);
}

/* Coluna de ações fixa à direita durante o scroll horizontal. */
.data-table--pin-actions th.col-actions,
.data-table--pin-actions td.col-actions {
  position: sticky;
  right: 0;
  /* Separador/sombra à esquerda para descolar do conteúdo que rola sob. */
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.18);
}
/* Corpo: fundo opaco obscurece as células que passam por baixo no scroll. */
.data-table--pin-actions tbody td.col-actions {
  background-color: var(--color-bg-surface);
  z-index: 1;
}
/* Hover mantém o tom accent da linha, mas opaco (gradiente sobre o fundo). */
.data-table--pin-actions tbody tr:hover td.col-actions {
  background-color: var(--color-bg-surface);
  background-image: linear-gradient(
    rgba(var(--color-accent-rgb), 0.07),
    rgba(var(--color-accent-rgb), 0.07)
  );
}
/* Header da coluna é o "canto" (sticky topo + direita): acima de tudo.
   O th já tem background opaco e z-index:2 em .data-table thead th. */
.data-table--pin-actions thead th.col-actions {
  z-index: 3;
}

/* Com a coluna fixada cada td.col-actions vira um stacking context próprio
   (sticky + z-index:1). O tooltip (::after) dos botões da 1ª linha ficava
   coberto — pra cima pelo header (z-index:3), pra baixo pela célula sticky
   da linha seguinte (z-index:1, mais à frente no DOM). Ao passar o mouse,
   elevamos a célula de ações acima do header e das vizinhas para o balão
   do tooltip aparecer. Vale para qualquer linha (a 1ª é a mais afetada). */
.data-table--pin-actions tbody td.col-actions:hover {
  z-index: 4;
}

/* Toggle de ativação em tabelas. A cor reflete o estado atual do
   registro: ativo verde, inativo vermelho — o usuário identifica o
   estado de relance. No hover do registro ativo a cor vira vermelho,
   antecipando a ação destrutiva (vai inativar). No registro inativo o
   hover vira verde, antecipando a ativação.
   Especificidade dupla (``.table-action-btn.action-toggle-*``) para
   sobrescrever o ``color: muted`` do ``.table-action-btn`` que vem
   depois no arquivo. */
.table-action-btn.action-toggle-on {
  color: var(--color-success);
}
.table-action-btn.action-toggle-off {
  color: var(--color-danger);
}
.table-action-btn.action-toggle-on:hover,
.table-action-btn.action-toggle-on:focus-visible {
  color: var(--color-danger);
}
.table-action-btn.action-toggle-off:hover,
.table-action-btn.action-toggle-off:focus-visible {
  color: var(--color-success);
}

/* Truncamento opt-in: célula com texto longo encurta com elipse e mantém
   a altura da linha. Combine com `data-ui-tooltip` para mostrar o texto
   completo no hover.
   Para o ellipsis funcionar, a coluna precisa de largura limitada — defina
   ``style="max-width:200px"`` no <th> correspondente ou aplique
   ``.data-table--fixed`` no <table> (table-layout:fixed).
   O overflow do ellipsis vive no wrapper interno (`.cell-truncate__inner`,
   criado automaticamente por `enhanceTruncatedCells`), que também aplica o
   `data-ui-tooltip` com o texto completo — exibido pelo balão global
   `.ui-tooltip` (portado ao body, sem clipping). */
.data-table td.cell-truncate {
  max-width: 0;
  position: relative;
}
.data-table td.cell-truncate > .cell-truncate__inner {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wrap explícito: célula com observações/descrições que devem quebrar.
   Ela cresce só na linha em que aparece — as demais permanecem compactas. */
.data-table td.cell-wrap {
  white-space: normal;
}

/* Layout fixo para colunas com ellipsis homogêneo. Use quando todas as
   colunas tiverem largura previsível. */
.data-table--fixed {
  table-layout: fixed;
}

/* Compact — mesma densidade da tabela padrão. Usada em drawers para que a
   tabela de dentro fique tão compacta quanto as listagens de fora. */
.data-table--compact thead th {
  padding: 5px 12px;
}
.data-table--compact tbody td {
  padding: 2px 12px;
  font-size: 12px;
}

/* Dense — ainda mais apertada (listas longas em pouco espaço). */
.data-table--dense thead th {
  padding: 3px 10px;
}
.data-table--dense tbody td {
  padding: 1px 10px;
  font-size: 11px;
}

/* Comfortable — linhas com respiro vertical. Para tabelas SEM coluna de ações
   (read-only: modais e abas de drawer), onde o padding tight padrão (2px)
   deixa as linhas coladas perto das listagens cujas linhas têm a altura dos
   botões de ação. Opt-in: adicione `data-table--comfortable` ao <table>. */
.data-table--comfortable tbody td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.table-cell__primary {
  font-weight: 600;
  color: var(--color-text-primary);
}
.table-cell__secondary {
  color: var(--color-text-secondary);
  font-size: var(--font-xs);
  margin-top: 1px;
}

/* Ações */
.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.table-action-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
/* Hover ÚNICO para toda ação de linha: azul info (destaque imediato em
   tema claro e escuro). Proibido override de cor por ação — a exceção é
   o par toggle-on/off acima, cuja cor antecipa o efeito de
   ativar/desativar. Não usar --color-accent em hover: contraste baixo
   demais sobre o fundo da linha. */
.table-action-btn:hover {
  background: var(--color-bg-surface-alt);
  color: var(--color-info);
}

/* Estado desabilitado: ação de linha indisponível (ex.: excluir só do dia).
   O atributo `disabled` nativo já impede o clique; a classe `is-disabled`
   garante o estado visual mesmo em <span>/<a>. Declarado DEPOIS do `:hover`
   base e com a mesma especificidade: no hover do botão desabilitado estas
   regras vencem por ordem de fonte, neutralizando background e cor SEM um
   seletor `:hover` próprio (a política do DS reserva override de hover ao
   par toggle-on/off — ver test_action_button_hover.py). */
.table-action-btn:disabled,
.table-action-btn.is-disabled {
  color: var(--color-text-muted);
  background: transparent;
  opacity: 0.45;
  cursor: not-allowed;
}

/* Custom Tooltips — padrão DS para qualquer elemento.
   Use `data-ui-tooltip="Texto"` em <button>/<a>/<span>/etc.
   Combine com `aria-label` para acessibilidade.

   O balão é um único nó ``.ui-tooltip`` portado para ``document.body`` e
   posicionado via JS (``components/ui-tooltip.js``) com ``position: fixed``.
   Isso evita o clipping que o antigo pseudo-elemento ``::after`` sofria
   dentro de ``overflow:hidden`` (``.table-wrapper``) ou ``transform``
   (``.side-drawer``) — ex.: tooltip alto da 1ª linha cortado no topo. Por
   isso não há mais regras de âncora por posição (1ª linha, bordas da
   paginação, última ação): o JS calcula flip vertical + clamp horizontal. */
.ui-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 360px;
  width: max-content;
  padding: 4px 8px;
  background: var(--color-brand-navy);
  color: var(--color-text-inverse);
  font-size: var(--font-xs);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.ui-tooltip.is-visible {
  opacity: 1;
}

/* Table Hover Minicard (Detalhes) */
.table-hover-card-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}
.table-hover-card {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-width: 220px;
  z-index: var(--z-tooltip);
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.table-hover-card-wrapper:hover .table-hover-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.table-hover-card__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-xs);
}
.table-hover-card__label {
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
}
.table-hover-card__value {
  color: var(--color-text-primary);
  font-weight: 500;
  text-align: right;
}
.table-hover-card::after {
  /* seta */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-bg-surface) transparent transparent transparent;
}
.table-hover-card::before {
  /* borda da seta */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-border) transparent transparent transparent;
  margin-top: 1px;
  z-index: -1;
}

/* Estado vazio/erro do corpo da tabela (linha única, centralizada). */
.data-table__empty {
  text-align: center;
  padding: 32px;
  color: var(--color-text-muted);
}
.data-table__empty--error {
  color: var(--color-danger);
}

/* Larguras fixas das colunas de filtro do toolbar (substitui flex inline). */
.filter-col--180 {
  flex: 0 0 180px;
}
.filter-col--200 {
  flex: 0 0 200px;
}
.filter-col--220 {
  flex: 0 0 220px;
}
.filter-col--240 {
  flex: 0 0 240px;
}
.filter-col--280 {
  flex: 0 0 280px;
}

/* Footer / Paginação */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface-alt);
  flex-wrap: wrap;
  gap: 10px;
}
.table-footer__info {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}
.table-pagination {
  display: flex;
  align-items: center;
  gap: 3px;
}
.pagination-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.pagination-btn:hover {
  background: var(--color-bg-surface);
}
.pagination-btn.is-active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
.pagination-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Input que substitui o botão da página atual em paginações com muitas
   páginas (modo condensado). Visualmente parece um campo editável (fundo
   claro + borda accent grossa) — distinto dos botões numéricos sólidos —
   sinalizando "página atual + você pode digitar e Enter para saltar". */
.pagination-input {
  width: 52px;
  height: 28px;
  padding: 0 6px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-xs);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: var(--font-xs);
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pagination-input::-webkit-inner-spin-button,
.pagination-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pagination-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.28);
}
.pagination-input.is-invalid {
  border-color: var(--color-danger);
  color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
  animation: pagination-shake .3s ease;
}

/* Go-to page */
.pagination-goto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--color-border);
}
.pagination-goto__label {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.pagination-goto__input {
  width: 44px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  font-size: var(--font-xs);
  font-weight: 600;
  text-align: center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -moz-appearance: textfield;
}
.pagination-goto__input::-webkit-inner-spin-button,
.pagination-goto__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pagination-goto__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
}
.pagination-goto__input.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  animation: pagination-shake .3s ease;
}
@keyframes pagination-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

/* Skeleton */
.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--color-bg-surface-alt) 25%,
    var(--color-border) 50%,
    var(--color-bg-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* <!-- /BLOCK: table --> */

/* ==========================================================================
   11. CARDS / DASHBOARD
   ========================================================================== */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.card__title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

/* Empilhamento vertical de cards, um abaixo do outro. Espaça sem exigir
   margin inline por página. */
.card + .card {
  margin-top: 16px;
}

/* KPI Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
/* Barra de identidade — gradiente da marca no topo do card */
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}
.kpi-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--color-accent-rgb), 0.15);
  transform: translateY(-3px);
}
.kpi-card__label {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}
.kpi-card__value {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
}
.kpi-card__change {
  font-size: var(--font-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-card__change.up {
  color: var(--color-success);
}
.kpi-card__change.down {
  color: var(--color-danger);
}
.kpi-card__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.15;
  font-size: 22px;
}

/* Shortcut cards na home */
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.shortcut-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-decoration: none;
}
.shortcut-card:hover {
  border-color: transparent;
  background: linear-gradient(var(--color-bg-surface), var(--color-bg-surface)) padding-box,
    linear-gradient(135deg, var(--color-brand-green) 0%, var(--color-brand-sky) 100%) border-box;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.shortcut-card__icon {
  color: var(--color-accent);
}
.shortcut-card__title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.shortcut-card__desc {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   12. CODE BLOCK (páginas de documentação)
   ========================================================================== */
.code-demo-section {
  margin-bottom: 32px;
}
.code-demo-section__title {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  border-image: var(--gradient-brand) 1;
  display: inline-block;
}
.code-demo-row {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.code-demo-row__preview {
  padding: 24px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-base);
}
.code-demo-row__code {
  padding: 0;
  background: var(--color-brand-navy);
  position: relative;
}
[data-theme="dark"] .code-demo-row__code {
  background: #0b0d18;
}
.code-demo-row__code pre {
  overflow-x: auto;
  padding: 16px 20px;
  margin: 0;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: .775rem;
  line-height: 1.65;
  color: #c8cddf;
}
.code-demo-row__code code .kw {
  color: #569cd6;
}
.code-demo-row__code code .str {
  color: #ce9178;
}
.code-demo-row__code code .cm {
  color: #6a9955;
  font-style: italic;
}
.code-demo-row__code code .fn {
  color: #dcdcaa;
}
.code-demo-row__code code .va {
  color: #9cdcfe;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast);
}
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Page Title */
.page-title {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  padding-bottom: 12px;
  position: relative;
}
/* Traço de identidade abaixo do título de cada página */
.page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: 2px;
}
.page-subtitle {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

/* Page Header — cabeçalho compacto que aproveita a área útil: título (menor)
   e subtítulo na MESMA faixa, separados por um divisor vertical, com uma
   linha fina sob a largura do conteúdo (não a largura total da tela). O
   container seguinte (toolbar/tabela) fica logo abaixo, perto mas não
   grudado. Envolve ``.page-title`` + ``.page-subtitle``; quando presente,
   neutraliza o espaçamento e o traço de 36px herdados das versões soltas. */
.page-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding-bottom: 8px;
}
/* Linha de identidade (gradiente da marca) sob a largura do conteúdo —
   mesmo estilo do antigo traço de 36px do .page-title, porém abrangendo
   título + subtítulo. */
.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: 2px;
}
.page-header .page-title {
  font-size: var(--font-lg);
  margin-bottom: 0;
  padding-bottom: 0;
}
.page-header .page-title::after {
  content: none;
}
.page-header .page-subtitle {
  margin-bottom: 0;
}
/* Divisor vertical elegante entre título e subtítulo (não o caractere "|"). */
.page-header .page-subtitle::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin: 0 12px;
  background: var(--color-border);
  vertical-align: -0.15em;
  border-radius: 1px;
}
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 28px 0;
}

/* ==========================================================================
   13. UTILITÁRIOS / MISC
   ========================================================================== */
.u-text-muted {
  color: var(--color-text-muted);
}
.u-text-sm {
  font-size: var(--font-sm);
}
.u-font-mono {
  font-family: "JetBrains Mono", "Fira Code", monospace;
}
.u-flex {
  display: flex;
}
.u-flex-1 {
  flex: 1;
}
.u-items-center {
  align-items: center;
}
.u-gap-8 {
  gap: 8px;
}
.u-gap-12 {
  gap: 12px;
}
.u-mt-8 {
  margin-top: 8px;
}
.u-mt-16 {
  margin-top: 16px;
}
.u-mb-16 {
  margin-bottom: 16px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   13-B. COMPONENTES — TOAST / NOTIFICAÇÕES
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  width: 320px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  font-size: var(--font-sm);
  color: var(--color-text-primary);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Superfície sólida + barra de cor à esquerda (referência) — sem fundo
   translúcido, que ficaria transparente sobre a página. */
.toast--error {
  border-left: 3px solid var(--color-danger);
}
.toast--success {
  border-left: 3px solid var(--color-success);
}
.toast--warning {
  border-left: 3px solid var(--color-warning);
}
.toast--info {
  border-left: 3px solid var(--color-info);
}

.toast__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.toast--error .toast__icon {
  color: var(--color-danger);
}
.toast--success .toast__icon {
  color: var(--color-success);
}
.toast--warning .toast__icon {
  color: var(--color-warning);
}
.toast--info .toast__icon {
  color: var(--color-info);
}

.toast__message {
  flex: 1;
  line-height: 1.5;
}
.toast__close {
  flex-shrink: 0;
  color: var(--color-text-muted);
  padding: 2px;
  border-radius: var(--radius-xs);
  transition: color var(--t-fast);
}
.toast__close:hover {
  color: var(--color-text-primary);
}
.toast__close i,
.toast__close svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ==========================================================================
   14. MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 13, 24, 0.55);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  backdrop-filter: blur(3px);
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  transform: scale(0.94) translateY(10px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  overflow: hidden;
}
.modal-overlay.is-open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Tamanho largo (formulários, etc.) */
.modal--lg {
  max-width: 620px;
}
/* Tamanho extra-largo (tabelas, históricos, listas com muitas colunas). */
.modal--xl {
  max-width: 960px;
}

/* Ícone centralizado no topo */
.modal__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  margin: 28px auto 0;
  flex-shrink: 0;
}
.modal__icon-wrap i,
.modal__icon-wrap svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Variantes de cor do ícone */
.modal--danger .modal__icon-wrap {
  background: var(--color-danger-light);
  color: var(--color-danger);
}
.modal--warning .modal__icon-wrap {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.modal--success .modal__icon-wrap {
  background: var(--color-success-light);
  color: var(--color-success);
}
.modal--info .modal__icon-wrap {
  background: var(--color-info-light);
  color: var(--color-info);
}
.modal--neutral .modal__icon-wrap {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-secondary);
}

/* Cabeçalho */
.modal__header {
  padding: 16px 24px 0;
  text-align: center;
}
.modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.35;
}

/* Corpo */
.modal__body {
  padding: 10px 24px 0;
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  line-height: 1.65;
  text-align: center;
}
/* Quando modal tem conteúdo estilo formulário — alinha à esquerda */
.modal--lg .modal__body {
  text-align: left;
}
.modal--lg .modal__header {
  text-align: left;
}
.modal--lg .modal__icon-wrap {
  margin-left: 24px;
}

/* Rodapé */
.modal__footer {
  padding: 22px 24px 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modal--lg .modal__footer {
  justify-content: flex-end;
}
.modal__footer .btn {
  min-width: 110px;
  justify-content: center;
}

/* Divisor opcional no header de modais grandes */
.modal__header--bordered {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.modal__header--bordered .modal__title {
  font-size: var(--font-base);
}
.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.modal__close:hover {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
}
.modal__close i,
.modal__close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.modal__body--padded {
  padding: 20px;
  text-align: left;
}
.modal__body--padded + .modal__footer,
.modal__header--bordered + .modal__body--padded {
  border-top: 1px solid var(--color-border);
}

/* Escopo da ação (confirm-modal): seletor "selecionados × filtrado". */
.modal__scope {
  padding: 14px 24px 0;
}

/* ==========================================================================
   14a-bis. CHOICE-LIST — grupo de rádios em "cartões"
   --------------------------------------------------------------------------
   Lista de opções mutuamente exclusivas apresentadas como cartões
   clicáveis. Usado no seletor de escopo do confirm-modal; reutilizável em
   qualquer escolha binária/enumerada dentro de modais e drawers.
   ========================================================================== */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.choice-list__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.choice-list__option:hover {
  border-color: var(--color-border-accent);
}
.choice-list__option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}
.choice-list__option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}
.choice-list__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-list__indicator {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  transition: border-color var(--t-fast);
}
.choice-list__option:has(input:checked) .choice-list__indicator {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-accent);
}
.choice-list__option input:focus-visible + .choice-list__indicator {
  box-shadow: var(--shadow-focus);
}
.choice-list__label {
  font-size: var(--font-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
}

/* ==========================================================================
   14b. TABS
   ========================================================================== */
.tabs__list {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
  overflow-x: auto;
}
.tabs__tab {
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs__tab > i,
.tabs__tab > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.tabs__tab:hover {
  color: var(--color-accent);
}
.tabs__tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}
.tabs__tab[disabled],
.tabs__tab[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.tabs__panel {
  display: none;
}
.tabs__panel.is-active {
  display: block;
}

/* ==========================================================================
   14b. FORMULÁRIO — GRID, ERRO, TOOLTIP DE AJUDA, LINHA DE SUB-RECURSO
   ========================================================================== */

/* Grid auto-responsivo de campos de formulário.
   Use em <form>/<div> que contenha vários .form-group lado a lado. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
/* Variante de 1 coluna (campos largos: URLs longas, textos extensos). */
.form-grid--1 {
  grid-template-columns: 1fr;
}
/* Variante de 2 colunas fixas (drawer view-only/edição estreito).
   Responsivo: colapsa para 1 col < 600px. */
.form-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
/* Variante de 4 colunas fixas para formulários densos (drawer de edição).
   Responsivo: 4 cols ≥ 1100px; 2 cols 600–1099px; 1 col < 600px. */
.form-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.form-grid__col--full {
  grid-column: 1 / -1;
}
.form-grid__col--span-2 {
  grid-column: span 2;
}
.form-grid__col--span-3 {
  grid-column: span 3;
}
.form-grid__col--new-line {
  grid-column-start: 1;
} /* força quebra de linha */
.form-grid__col--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  color: var(--color-text-primary);
}

/* Alinhamento estrutural (NÃO-NEGOCIÁVEL — ver
   .claude/rules/design-system-frontend.md):

   1. ``[hidden]`` precisa ser ``display: none`` mesmo quando o seletor
      por classe (``.form-error``, ``.help-tooltip``) define display:block.
      Sem isso, ``<small class="form-error" hidden>`` em UM form-group
      ocupa altura enquanto outros vizinhos não têm o ``<small>``, e a
      célula stretched do grid fica desigual → inputs desalinham.
   2. ``align-self: stretch`` no .form-group garante que o item de fato
      preenche a célula (em alguns navegadores um flex-column sem altura
      explícita colapsa para o conteúdo, e ``margin-top: auto`` fica sem
      efeito porque não há espaço para empurrar).
   3. .form-input e .custom-select__trigger têm a mesma height explícita —
      independente de diferenças de user-agent entre <input> e <button>.
      Era só min-height, mas padding (9px) + line-height herdado do body
      (1.6) já somam mais que 38px sozinhos — o min-height nunca entrava
      em vigor, e o botão .btn--sm ao lado (27px) sobrava em degrau. Com
      height explícita (+ box-sizing: border-box global), os três — input,
      select e .btn--sm — batem exatamente 38px. */
.form-error[hidden],
.help-tooltip[hidden],
.form-hint[hidden] {
  display: none;
}

.custom-select__trigger {
  height: 38px;
  box-sizing: border-box;
}

/* Custom-select travado (campo read-only via JS — ex.: país fixo após
   criação). Visual desabilitado + tooltip via data-ui-tooltip. */
.custom-select__trigger.is-locked,
.custom-select__trigger[disabled] {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
  pointer-events: auto; /* preserva hover para o tooltip */
}

.form-grid--4 > .form-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.form-grid--4 > .form-group > .form-label {
  margin-bottom: 4px;
}
.form-grid--4 > .form-group > .form-input,
.form-grid--4 > .form-group > .custom-select,
.form-grid--4 > .form-group > textarea.form-input {
  margin-top: auto;
}
.form-grid--4 > .form-checkbox.form-grid__col--inline {
  align-self: end;
  padding-bottom: 10px; /* alinha visualmente com a base do input */
}

/* Variante .form-grid--align-top: alinha inputs/selects pelo topo da
   célula. Usar em forms que mostram hints/erros dinâmicos abaixo de
   alguns campos — top-align mantém os campos com e sem hint na mesma
   linha visual. */
.form-grid--align-top > .form-group > .form-input,
.form-grid--align-top > .form-group > .custom-select,
.form-grid--align-top > .form-group > textarea.form-input {
  margin-top: 0;
}

/* Cabeçalho de seção dentro de .form-grid (ex.: "Entrada", "Saída", "Execução")
   que ocupa toda a largura. Compacto: border lateral accent + background bem
   suave — suficiente para separar visualmente sem competir com os campos. */
.form-grid__section-title {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  padding: 4px 10px;
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  border-bottom: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.form-grid__section-title:first-child {
  margin-top: 0;
}

/* Mensagem de erro abaixo de um campo. */
.form-error {
  display: block;
  margin-top: 4px;
  font-size: var(--font-xs);
  color: var(--color-danger);
}
.form-group.is-invalid .form-input,
.form-group.is-invalid .custom-select__trigger {
  border-color: var(--color-danger);
}

/* Tooltip de ajuda contextual ao lado de um label.
   Estrutura:
     <span class="help-tooltip">
       <button class="help-tooltip__trigger" aria-label="Ajuda">?</button>
       <span class="help-tooltip__content">Texto / HTML de ajuda</span>
     </span>

   O balão é portado para `document.body` pelo JS (designsystem/js/
   components/help-tooltip.js) ao abrir, com `position: fixed` e
   top/left calculados a partir do rect do trigger. Isso evita
   clipping em ancestrais com `overflow:auto` (drawer body) ou
   `transform` (o próprio .side-drawer cria containing block).
*/
.help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.help-tooltip__trigger {
  background: var(--color-accent-light);
  border: 1px solid rgba(var(--color-accent-rgb), 0.35);
  border-radius: 50%;
  padding: 2px;
  margin-left: 4px;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow
    var(--t-fast), transform var(--t-fast);
}
.help-tooltip__trigger > i,
.help-tooltip__trigger > svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.75;
}
.help-tooltip__trigger:hover,
.help-tooltip__trigger:focus-visible {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.22);
  transform: scale(1.08);
  outline: none;
}
/* Variante do gatilho para um ícone semântico (ex.: lojas) em vez da bolha
   "?" de ajuda: sem círculo/realce de accent, fundo transparente e quadrado
   28x28 como um botão de ação de linha. Reutilizável em qualquer help-tooltip
   cujo gatilho seja um ícone. */
.help-tooltip__trigger--icon {
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
}
.help-tooltip__trigger--icon:hover,
.help-tooltip__trigger--icon:focus-visible {
  background: var(--color-bg-surface-alt);
  color: var(--color-info);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.help-tooltip__content {
  position: fixed;
  z-index: var(--z-tooltip);
  min-width: 240px;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 10px 14px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-xs);
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  display: none;
}
.help-tooltip__content.is-visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Mini-tabela reutilizável dentro de help-tooltip/popover. O
   ``.table-wrapper`` global (que dá borda arredondada às tabelas) não
   envolve conteúdo de tooltip, então esta classe traz a borda arredondada
   própria + células compactas. Reutilizável em qualquer popover do DS. */
.tooltip-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--font-xs);
}
.tooltip-table th,
.tooltip-table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.tooltip-table thead th {
  background: var(--color-bg-surface-alt);
  font-weight: 600;
  color: var(--color-text-muted);
}
.tooltip-table tbody tr:last-child td {
  border-bottom: none;
}

/* Linha de sub-recurso (item filho dentro de um drawer/CRUD aninhado),
   com botão de remover à direita.
   Ex.: dia de envio, concorrente, contato. */
.subitem-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px;
  margin-bottom: 8px;
  background: var(--color-bg-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: opacity .25s ease, background-color .25s ease;
}
.subitem-row > .form-group {
  margin-bottom: 0;
}
/* Estado de remoção pendente (soft-delete): a linha existente fica
   esmaecida até o save confirmar a exclusão no backend. */
.subitem-row.is-pending-remove {
  opacity: 0.45;
  background: var(--color-danger-light);
}
.subitem-row.is-pending-remove > input,
.subitem-row.is-pending-remove > select,
.subitem-row.is-pending-remove > label,
.subitem-row.is-pending-remove > textarea {
  pointer-events: none;
}
.subitem-row.is-pending-remove .subitem-row__remove {
  color: var(--color-danger);
}
.subitem-row__remove {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--color-text-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
}
.subitem-row__remove:hover,
.subitem-row__remove:focus-visible {
  color: var(--color-danger);
  background: var(--color-bg-hover);
  outline: none;
}

/* Espaçador flexível dentro de .filter-toolbar__actions — empurra os botões
   subsequentes para a direita, separando ações primárias (esquerda) de
   ações secundárias/em-massa (direita). */
.filter-toolbar__actions {
  flex-wrap: wrap;
}
.filter-toolbar__spacer {
  flex: 1 1 0;
  min-width: 8px;
}

/* Indicador de ordenação para colunas clicáveis em .data-table.
   Use o atributo `data-sort` no <th> e troque a classe ascendente/descendente via JS. */
.data-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.data-table th[data-sort].is-sort-asc::after {
  content: " ▲";
  opacity: 0.6;
}
.data-table th[data-sort].is-sort-desc::after {
  content: " ▼";
  opacity: 0.6;
}

/* ===== Segmented Progress =====
   Barra única dividida em N segmentos binários (concluído/pendente). Substitui
   filas de badges horizontais em colunas que rastreiam etapas booleanas de um
   pipeline. Helper JS: js/components/segmented-progress.js.

   Cada segmento tem ``data-ui-tooltip`` (exibido pelo balão global
   ``.ui-tooltip``, portado ao body). As bordas arredondadas das pontas
   ficam no primeiro/último ``__segment`` via ``:first-child`` /
   ``:last-child``. */
.segmented-progress {
  display: flex;
  gap: 2px;
  height: 8px;
  background: var(--color-bg-surface-alt);
  border-radius: var(--radius-sm);
}
.segmented-progress__segment {
  flex: 1 1 0;
  min-width: 4px;
  background: var(--color-border);
  transition: background var(--t-fast);
}
.segmented-progress__segment:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}
.segmented-progress__segment:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.segmented-progress__segment.is-done {
  background: var(--color-success);
}
.segmented-progress__segment.is-in-progress {
  background: var(--color-warning);
}
.segmented-progress__segment.is-pending {
  background: var(--color-danger);
}
/* ===== End Segmented Progress ===== */

/* ==========================================================================
   15. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 768px) {
  body {
    overflow: initial;
  }
  /* Shell flui com o conteúdo e quem rola é o documento. A altura fixa
     (100dvh) + overflow:hidden de .app-shell/.main-column clipavam o
     conteúdo que ultrapassasse a viewport em telas mais baixas — o iPhone
     Pro Max (tela alta) escondia o bug porque tudo cabia em 100dvh. */
  .app-shell {
    overflow: initial;
    height: auto;
    min-height: 100dvh;
  }
  .main-column {
    overflow: initial;
  }
  .main-content {
    overflow: initial;
    padding: 16px;
    /* Respeita o home indicator do iPhone para o conteúdo (rodapé da
       tabela, paginação) não ficar sob a barra inferior. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: var(--z-sidebar);
  }
  .sidebar.is-collapsed {
    transform: translateX(-100%);
    width: var(--sidebar-expanded);
    min-width: var(--sidebar-expanded);
  }

  .side-drawer {
    width: 100%;
    max-width: 100vw;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid--2 {
    grid-template-columns: 1fr;
  }
  .form-grid--4 {
    grid-template-columns: 1fr;
  }
  .form-grid__col--span-2,
  .form-grid__col--span-3 {
    grid-column: 1 / -1;
  }

  /* Tabela: em mobile a tabela cresce até o conteúdo e quem rola é o
     documento (.main-content/body), igual ao desktop. NÃO usar max-height
     fixo aqui: um offset hardcoded não acompanha a altura real acima da
     tabela (accordion de filtros, título/subtítulo) nem as safe-area insets
     do iPhone, e acabava clipando as últimas linhas e o footer.
     overflow-y herda 'hidden' do default — com altura = conteúdo nada é
     clipado verticalmente; overflow-x: auto mantém o scroll horizontal. */
  .table-scroll {
    max-height: none;
  }
  /* Drawers têm scroll próprio via .side-drawer__body (overflow-y: auto).
     Aplicar max-height ao .table-scroll dentro de um drawer criaria
     scroll-dentro-de-scroll em mobile — o browser não consegue determinar
     qual container deve receber o gesto de swipe. */
  .side-drawer .table-scroll {
    max-height: none;
    overflow-y: initial;
  }
}

@media (min-width: 600px) and (max-width: 1099px) {
  .form-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid__col--span-3,
  .form-grid__col--span-2 {
    grid-column: span 2;
  }
}

/* ============================================================
   Info banner — aviso/contexto no topo de páginas DS
   ============================================================ */
/* `gap`/`padding`/`margin-bottom` eram `var(--space-sm)`/`var(--space-md)` —
   tokens que nunca existiram em `:root` (sem `--space-*` neste arquivo).
   `var()` inválido vira o valor inicial da propriedade (0), então o
   componente sempre renderizou colado, sem respiro — em toda tela que já
   usava `.info-banner`, não só aqui. Valores literais, no mesmo padrão dos
   demais componentes do arquivo (ex.: `.active-filters-bar`). */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface-alt);
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  line-height: 1.45;
}
.info-banner > i,
.info-banner > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--color-info);
}
.info-banner--neutral {
  border-left-color: var(--color-text-muted);
}
.info-banner--neutral > i,
.info-banner--neutral > svg {
  color: var(--color-text-muted);
}
.info-banner--warning {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
  border-left: 4px solid var(--color-warning);
  color: var(--color-warning-text);
  font-weight: 500;
}
.info-banner--warning > i,
.info-banner--warning > svg {
  color: var(--color-warning);
}
.info-banner--danger {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
  border-left: 4px solid var(--color-danger);
  color: var(--color-danger-text);
  font-weight: 500;
}
.info-banner--danger > i,
.info-banner--danger > svg {
  color: var(--color-danger);
}

/* ==========================================================================
   15. RE-SKIN — toques específicos da referência MI7 que os tokens não cobrem.
   O grosso do visual vem dos tokens (superfícies, texto, acento lima, raios,
   fontes). Aqui ficam só os ajustes pontuais de componente.
   ========================================================================== */

/* Sidebar: rótulo de seção técnico (mono + hairline à direita). */
.sidebar__section-label {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar__section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Cabeçalho de tabela e células em DM Mono (leitura técnica). */
.data-table thead th,
.data-table tbody td {
  font-family: var(--font-mono);
}
/* Corpo em mono mais leve: peso 300 e tamanho menor para suavizar
   (DM Mono em 400 tem traço cheio, que parece negrito numa tabela densa). */
.data-table tbody td {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -.01em;
}

/* ==========================================================================
   DS CHARTS — biblioteca de gráficos (SVG) do Design System.
   Consumida por ``js/components/charts.js`` (``renderBarChart``). Tudo
   temável por tokens; nada de cor literal. Ver COMPONENTS.md.
   ========================================================================== */
.ds-chart {
  display: block;
  max-width: 100%;
  height: auto;
}
.ds-chart__bar {
  fill: var(--color-accent);
  transition: opacity .15s ease;
}
.ds-chart__bar:hover {
  opacity: 0.82;
}
.ds-chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}
.ds-chart__axis {
  stroke: var(--color-border-strong);
  stroke-width: 1;
}
/* Tipografia do gráfico em DM Mono — mesma família das linhas da tabela
   (``.data-table tbody td``), para leitura técnica consistente. */
.ds-chart__label {
  fill: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
}
.ds-chart__tick {
  fill: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.ds-chart__value {
  fill: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ds-chart__empty {
  fill: var(--color-text-muted);
  font-size: 13px;
}