/* ==========================================================================
   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: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  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%; }

/* ==========================================================================
   02. VARIÁVEIS — TEMA LIGHT
   ========================================================================== */
:root {
  /* Fundos */
  --color-bg-base:        #EEF1F8;
  --color-bg-surface:     #FFFFFF;
  --color-bg-surface-alt: #E4E8F4;
  --color-bg-sidebar:     #FFFFFF;
  --color-bg-header:      #FFFFFF;
  --color-bg-input:       #FFFFFF;
  --color-bg-hover:       rgba(81,163,200,.07);

  /* Textos */
  --color-text-primary:        #151828;
  --color-text-secondary:      #48527A;
  --color-text-muted:          #8A95B8;
  --color-text-inverse:        #FFFFFF;
  --color-text-sidebar:        #2E3B5A;
  --color-text-sidebar-active: #151828;

  /* Brand — cores institucionais GrupoMI7 */
  --color-accent:       #51A3C8;
  --color-accent-light: #E3F3FA;
  --color-accent-dark:  #3A85A8;
  --color-accent-rgb:   81,163,200;
  --color-brand-green:  #C0D52A;
  --color-brand-navy:   #151828;

  /* Semânticas */
  --color-success:        #22C55E; --color-success-light: #DCFCE7;
  --color-warning:        #F59E0B; --color-warning-light: #FEF3C7;
  --color-danger:         #EF4444; --color-danger-light:  #FEE2E2;
  --color-info:           #3B82F6; --color-info-light:    #DBEAFE;

  /* Bordas */
  --color-border:       #D8DFF0;
  --color-border-focus: var(--color-accent);

  /* Sombras */
  --shadow-xs:    0 1px 2px rgba(21,24,40,.06);
  --shadow-sm:    0 1px 4px rgba(21,24,40,.08),0 1px 2px rgba(21,24,40,.04);
  --shadow-md:    0 4px 16px rgba(21,24,40,.10),0 2px 4px rgba(21,24,40,.06);
  --shadow-lg:    0 8px 32px rgba(21,24,40,.12),0 4px 8px rgba(21,24,40,.06);
  --shadow-focus: 0 0 0 3px rgba(var(--color-accent-rgb),.22);

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

  /* Radii */
  --radius-xs:  4px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;

  /* Tipografia */
  --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(.4,0,.2,1);

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

/* --- TEMA DARK --- */
[data-theme="dark"] {
  --color-bg-base:        #0B0D18;
  --color-bg-surface:     #131626;
  --color-bg-surface-alt: #1A1E32;
  --color-bg-sidebar:     #0B0D18;
  --color-bg-header:      #131626;
  --color-bg-input:       #1A1E32;
  --color-bg-hover:       rgba(81,163,200,.10);

  --color-text-primary:        #E4E8F4;
  --color-text-secondary:      #9AA4C8;
  --color-text-muted:          #7585B5;
  --color-text-sidebar:        #7A84A8;
  --color-text-sidebar-active: #FFFFFF;

  --color-accent:         #6BBFD8;
  --color-accent-light:   rgba(107,191,216,.14);
  --color-accent-dark:    #8ACFE4;
  --color-accent-rgb:     107,191,216;

  --color-success-light: rgba(34,197,94,.12);
  --color-warning-light: rgba(245,158,11,.12);
  --color-danger-light:  rgba(239,68,68,.12);
  --color-info-light:    rgba(59,130,246,.12);

  --color-border: #222640;

  /* Sidebar escura no dark mode */
  --color-bg-sidebar: #111827;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.28);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.22);
  --shadow-md: 0 4px 16px rgba(0,0,0,.38),0 2px 4px rgba(0,0,0,.26);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.48),0 4px 8px rgba(0,0,0,.28);
  --shadow-focus: 0 0 0 3px rgba(var(--color-accent-rgb),.28);
}

/* ==========================================================================
   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;
  padding: 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);
  /* Fundo branco com lavagem sutil do gradiente da marca — oliva no canto superior, azul céu no inferior */
  background:
    linear-gradient(145deg, rgba(192,213,42,.05) 0%, #FFFFFF 35%, rgba(81,163,200,.06) 100%);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: width var(--t-slow), min-width 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);
}

/* Traço de identidade da marca no topo da sidebar */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #C0D52A 0%, #51A3C8 100%);
  z-index: 1;
}
/* Degradê sutil no rodapé da sidebar — ancora visualmente o menu */
.sidebar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(238,241,248,.7) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* --- Logo --- */
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255,255,255,.06);
  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;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--t-base);
  /* Gradiente: azul noite → verde oliva da marca */
  background: linear-gradient(90deg, #151828 20%, #7A9400 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.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 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 4px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

/* --- Item simples --- */
.sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  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;
}
.sidebar__item:hover { background: rgba(81,163,200,.10); color: #151828; }
.sidebar__item.is-active { background: rgba(81,163,200,.12); color: #151828; }
.sidebar__item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #C0D52A 0%, #51A3C8 100%);
}

.sidebar__item-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: #8AAFC8;
  transition: color 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              { color: #3A89B0; }
.sidebar__item.is-active .sidebar__item-icon                  { color: #5A9010; }
.sidebar__group.is-open > .sidebar__group-toggle .sidebar__item-icon { color: #3A89B0; }
.sidebar__item-text {
  font-size: var(--font-sm);
  font-weight: 500;
  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: #1A2B42;
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 500;
  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);
}
.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: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7A8DB0;
  padding: 16px 12px 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: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-sidebar);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sidebar__group-toggle:hover { background: rgba(81,163,200,.10); color: #151828; }
.sidebar__group.is-open > .sidebar__group-toggle { color: #151828; font-weight: 600; }

.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: #BBCCE0;
}
.sidebar__group.is-open > .sidebar__group-toggle .sidebar__group-chevron { transform: rotate(90deg); color: #51A3C8; }
.sidebar.is-collapsed .sidebar__group-chevron { opacity: 0; }

/* --- SUBMENU --- */
.sidebar__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
  margin-left: 26px;
  padding-left: 0;
  border-left: 1.5px solid rgba(81,163,200,.25);
}

.sidebar__item--sub {
  font-size: var(--font-xs);
  padding: 7px 12px 7px 18px;
  color: #5A6E90;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
/* Traço horizontal conectando ao fio vertical */
.sidebar__item--sub::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  width: 8px; height: 1px;
  background: rgba(81,163,200,.4);
}
.sidebar__item--sub:hover { background: rgba(81,163,200,.08); color: #151828; }
.sidebar__item--sub.is-active { color: #4A8010; font-weight: 600; }
.sidebar__item--sub.is-active::before { background: #7AAA10; opacity: 1; }

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

/* Dark mode: sidebar escura com gradiente e sem borda */
[data-theme="dark"] .sidebar {
  background: linear-gradient(160deg, #1A2540 0%, #111827 100%);
  border-right-color: transparent;
}
[data-theme="dark"] .sidebar__logo-text {
  background: linear-gradient(90deg, #D8DDEF 20%, #C0D52A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .sidebar__item:hover,
[data-theme="dark"] .sidebar__group-toggle:hover {
  background: rgba(192,213,42,.07);
  color: #fff;
}
[data-theme="dark"] .sidebar__item.is-active {
  background: rgba(81,163,200,.13);
  color: #fff;
}
[data-theme="dark"] .sidebar__item-icon { color: rgba(81,163,200,.55); }
[data-theme="dark"] .sidebar__item:hover .sidebar__item-icon,
[data-theme="dark"] .sidebar__group-toggle:hover .sidebar__item-icon { color: #51A3C8; }
[data-theme="dark"] .sidebar__item.is-active .sidebar__item-icon { color: #C0D52A; }
[data-theme="dark"] .sidebar__section-label { color: rgba(192,213,42,.50); }
[data-theme="dark"] .sidebar__group.is-open > .sidebar__group-toggle { color: #fff; font-weight: 600; }
[data-theme="dark"] .sidebar__item--sub:hover { background: rgba(192,213,42,.06); color: #fff; }
[data-theme="dark"] .sidebar__item--sub.is-active { color: #C0D52A; }
[data-theme="dark"] .sidebar__submenu { border-left-color: rgba(192,213,42,.22); }
[data-theme="dark"] .sidebar__item--sub::before { background: rgba(192,213,42,.35); }
[data-theme="dark"] .sidebar__item--sub.is-active::before { background: #C0D52A; }
[data-theme="dark"] .sidebar__group-chevron { color: rgba(81,163,200,.35); }

/* ==========================================================================
   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;
}

/* 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, #C0D52A 0%, #51A3C8 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: #fff; border-color: var(--color-accent); }
.btn--primary:hover  { background: var(--color-accent-dark); border-color: var(--color-accent-dark); box-shadow: 0 4px 18px rgba(var(--color-accent-rgb),.45), 0 2px 6px rgba(var(--color-accent-rgb),.25); }

.btn--secondary { background: var(--color-bg-surface); color: var(--color-text-primary); border-color: var(--color-border); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: var(--shadow-sm), 0 0 0 3px rgba(var(--color-accent-rgb),.10); }

.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); 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,.35), 0 2px 6px rgba(239,68,68,.20); }

.btn--success { background: var(--color-success-light); color: #15803D; 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,.35), 0 2px 6px rgba(34,197,94,.20); }

.btn--info    { background: var(--color-info-light); color: var(--color-info); 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,.35), 0 2px 6px rgba(59,130,246,.20); }

.btn--warning { background: var(--color-warning-light); color: #92400E; 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,.35), 0 2px 6px rgba(245,158,11,.20); }

.btn--sm  { padding: 6px 12px; font-size: var(--font-xs); }
.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: .8; }
@keyframes btn-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Dark mode — texto claro sobre fundos semitransparentes */
[data-theme="dark"] .btn--success { color: #4ADE80; }
[data-theme="dark"] .btn--danger  { color: #F87171; }
[data-theme="dark"] .btn--warning { color: #FBBF24; }
[data-theme="dark"] .btn--info    { color: #60A5FA; }
[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-size: var(--font-xs); font-weight: 600; line-height: 1.6;
  white-space: nowrap;
}
.badge--success { background: var(--color-success-light); color: #15803D; }
.badge--danger  { background: var(--color-danger-light);  color: #B91C1C; }
.badge--warning { background: var(--color-warning-light); color: #92400E; }
.badge--info    { background: var(--color-info-light);    color: #1D4ED8; }
.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); }

/* Dark mode — cores claras sobre fundos transparentes escuros */
[data-theme="dark"] .badge--success { color: #4ADE80; }
[data-theme="dark"] .badge--danger  { color: #F87171; }
[data-theme="dark"] .badge--warning { color: #FBBF24; }
[data-theme="dark"] .badge--info    { color: #60A5FA; }

.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),.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),.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;
}
.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,.20); }

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

/* 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,.20) !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: #fff; opacity: 0; transform: scale(.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); }

.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; }

.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: .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; flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  animation: slideDown .25s ease;
}
.filter-accordion.is-open .filter-accordion__body { display: flex; }
.filter-accordion__body .form-group { min-width: 180px; flex: 1; }

@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); }

/* 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,.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: 1080px; }

.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__body {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin;
}
.side-drawer__footer {
  padding: 16px 20px; border-top: 1px solid var(--color-border);
  display: flex; gap: 10px; flex-shrink: 0;
}
.side-drawer__footer .btn { flex: 1; justify-content: center; }
/* <!-- /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;
  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: 6px 14px; text-align: left;
  font-size: var(--font-xs); font-weight: 700;
  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;
}
.data-table tbody td { padding: 4px 14px; font-size: var(--font-sm); vertical-align: middle; line-height: 1.3; }
.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),.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; }
.data-table thead th.col-actions,
.data-table td.col-actions { text-align: center; }

/* 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; }

/* 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 mantém o vermelho — o estado já chama atenção e o tooltip
   "Ativar" basta para sinalizar a ação. */
.action-toggle-on  { color: var(--color-success); }
.action-toggle-off { color: var(--color-danger); }
.action-toggle-on:hover,
.action-toggle-on:focus-visible  { color: var(--color-danger); }

/* 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 vive no wrapper interno (`.cell-truncate__inner`, criado
   automaticamente por `enhanceTruncatedCells`) — assim o `::after` do
   `data-ui-tooltip` aplicado no <td> escapa para cima sem ser clipado. */
.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 */
.data-table--compact thead th { padding: 8px 12px; font-size: .7rem; }
.data-table--compact tbody td  { padding: 8px 12px; font-size: var(--font-xs); }

/* Dense */
.data-table--dense thead th { padding: 5px 10px; font-size: .67rem; }
.data-table--dense tbody td  { padding: 5px 10px; font-size: .72rem; }

.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);
}
.table-action-btn:hover { background: var(--color-bg-surface-alt); }
.table-action-btn.action-view:hover    { color: var(--color-info); }
.table-action-btn.action-edit:hover    { color: var(--color-accent); }
.table-action-btn.action-export:hover  { color: var(--color-success); }
.table-action-btn.action-disable:hover { color: var(--color-warning); }
.table-action-btn.action-delete:hover  { color: var(--color-danger); }

/* Custom Tooltips — padrão DS para qualquer elemento.
   Use `data-ui-tooltip="Texto"` em <button>/<a>/<span>/etc.
   Combine com `aria-label` para acessibilidade. */
[data-ui-tooltip] { position: relative; }
[data-ui-tooltip]::after {
  content: attr(data-ui-tooltip);
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--color-brand-navy); color: var(--color-text-inverse);
  font-size: var(--font-xs); font-weight: 600; padding: 4px 8px;
  border-radius: var(--radius-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
  z-index: var(--z-tooltip); box-shadow: var(--shadow-sm);
}
[data-ui-tooltip]:hover::after,
[data-ui-tooltip]:focus-visible::after { opacity: 1; }

/* Em células de tabela, o tooltip costuma carregar o texto completo de
   conteúdo truncado (ex.: nome de cliente longo). Liberamos a quebra de
   linha e limitamos a largura para o balão não atravessar a tela. */
.data-table td[data-ui-tooltip]::after {
  white-space: normal;
  max-width: 360px;
  width: max-content;
  text-align: left;
  line-height: 1.4;
  word-break: break-word;
}

/* Tooltips dentro de containers com `overflow: hidden` (ex.: .table-wrapper)
   se cortam quando o botão está nas pontas da paginação. Forçamos âncora
   na borda do botão para manter o balão dentro do container. */
.table-pagination > button[data-ui-tooltip]:nth-child(-n+2)::after {
  left: 0; right: auto; transform: none;
}
.table-pagination > button[data-ui-tooltip]:nth-last-child(-n+2)::after {
  left: auto; right: 0; transform: none;
}

/* 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;
}

/* 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: .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-bg-surface);
  color: var(--color-accent-dark);
  font-size: var(--font-xs); font-weight: 700;
  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),.28);
}
.pagination-input.is-invalid {
  border-color: var(--color-danger);
  color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.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),.18);
}
.pagination-goto__input.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.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); }

/* 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: linear-gradient(90deg, #C0D52A 0%, #51A3C8 100%);
}
.kpi-card:hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--color-accent-rgb),.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: .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, #C0D52A 0%, #51A3C8 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: linear-gradient(90deg, #C0D52A 0%, #51A3C8 100%) 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: #151828;
  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,.08);
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.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,.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: linear-gradient(90deg, #C0D52A 0%, #51A3C8 100%);
  border-radius: 2px;
}
.page-subtitle { font-size: var(--font-sm); color: var(--color-text-secondary); margin-bottom: 24px; }
.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-sm);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  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); }

.toast--error   { border-left: 3px solid var(--color-danger);  background: var(--color-danger-light); }
.toast--success { border-left: 3px solid var(--color-success); background: var(--color-success-light); }
.toast--warning { border-left: 3px solid var(--color-warning); background: var(--color-warning-light); }
.toast--info    { border-left: 3px solid var(--color-info);    background: var(--color-info-light); }

.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,.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(.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; }

/* Í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: 16px; height: 16px; 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); }

/* ==========================================================================
   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;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.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: .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;
}
.form-grid__col--full   { grid-column: 1 / -1; }
.form-grid__col--inline {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-sm);
  color: var(--color-text-primary);
}

/* 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), .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), .22);
  transform: scale(1.08);
  outline: 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;
}

/* 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);
}
.subitem-row > .form-group { margin-bottom: 0; }
.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: .6; }
.data-table th[data-sort].is-sort-desc::after { content: ' ▼'; opacity: .6; }

/* ==========================================================================
   15. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 768px) {
  body { overflow: initial; }
  .app-shell { overflow: initial; }
  .main-content { overflow: initial; padding: 16px; }

  .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; }
}