/* =====================================================================
   STRATEGILE — THEME OVERLAY
   ---------------------------------------------------------------------
   Carregar DEPOIS de MudBlazor.min.css em index.html.
   Mapeia tokens do redesign para as variáveis --mud-palette-* que
   o MudBlazor inteiro consome. Resultado: todo componente MudBlazor
   (botão, input, card, table, dialog, etc) muda visualmente em cascata,
   sem necessidade de tocar em cada componente individualmente.

   FASE 1 — SÓ TEMA. Não altera estrutura de layout (Sidebar/TopBar),
   isso virá em PR separado.
   ===================================================================== */

/* =====================================================================
   1 · DESIGN TOKENS
   ===================================================================== */
:root {
  /* ---------- Palette (raw) ---------- */
  --sttg-slate-50:  #f8fafc;
  --sttg-slate-100: #f1f5f9;
  --sttg-slate-150: #eaeff5;
  --sttg-slate-200: #e2e8f0;
  --sttg-slate-300: #cbd5e1;
  --sttg-slate-400: #94a3b8;
  --sttg-slate-500: #64748b;
  --sttg-slate-600: #475569;
  --sttg-slate-700: #334155;
  --sttg-slate-800: #1e293b;
  --sttg-slate-900: #0f172a;
  --sttg-slate-950: #060b18;

  --sttg-cyan-300: #67e8f9;
  --sttg-cyan-400: #22d3ee;
  --sttg-cyan-500: #06b6d4;
  --sttg-cyan-600: #0891b2;
  --sttg-cyan-700: #0e7490;
  --sttg-cyan-50:  #ecfeff;
  --sttg-cyan-100: #cffafe;

  --sttg-green-500: #10b981;
  --sttg-green-600: #059669;
  --sttg-green-50:  #ecfdf5;

  --sttg-amber-500: #f59e0b;
  --sttg-amber-50:  #fffbeb;

  --sttg-red-500:   #ef4444;
  --sttg-red-600:   #dc2626;
  --sttg-red-50:    #fef2f2;

  /* ---------- Semantic tokens ----------
     DERIVADOS da paleta MudBlazor (--mud-palette-*), que o StrategileTheme.Build()
     (C#) injeta corretamente em LIGHT e DARK via MudThemeProvider. Assim os tokens
     --sttg-* seguem o tema ativo automaticamente, sem depender de classe/atributo
     .mud-theme-dark (que o MudBlazor v8 NÃO adiciona ao DOM).
     IMPORTANTE: não redefinir --mud-palette-* a partir destes (evita ref. circular). */
  --sttg-bg-app:       var(--mud-palette-background);
  --sttg-bg-surface:   var(--mud-palette-surface);
  --sttg-bg-elevated:  var(--mud-palette-surface);
  --sttg-bg-muted:     var(--mud-palette-background-gray);
  --sttg-bg-hover:     var(--mud-palette-table-hover);
  --sttg-bg-active:    var(--mud-palette-table-hover);

  --sttg-border-subtle:  var(--mud-palette-lines-default);
  --sttg-border-default: var(--mud-palette-lines-inputs);
  --sttg-border-strong:  var(--mud-palette-text-disabled);

  --sttg-text-primary:   var(--mud-palette-text-primary);
  --sttg-text-secondary: var(--mud-palette-text-secondary);
  --sttg-text-tertiary:  var(--mud-palette-text-disabled);
  --sttg-text-disabled:  var(--mud-palette-text-disabled);
  --sttg-text-inverse:   var(--mud-palette-primary-text);

  --sttg-accent:         var(--mud-palette-primary);
  --sttg-accent-hover:   var(--mud-palette-primary-darken);
  --sttg-accent-soft:    color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
  --sttg-accent-soft-2:  color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
  --sttg-accent-fg:      var(--mud-palette-primary-text);

  --sttg-success:        var(--mud-palette-success);
  --sttg-success-soft:   color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
  --sttg-warning:        var(--mud-palette-warning);
  --sttg-warning-soft:   color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
  --sttg-danger:         var(--mud-palette-error);
  --sttg-danger-soft:    color-mix(in srgb, var(--mud-palette-error) 14%, transparent);

  /* ---------- Shape ---------- */
  --sttg-r-sm: 6px;
  --sttg-r-md: 8px;
  --sttg-r-lg: 12px;
  --sttg-r-xl: 16px;

  /* ---------- Shadows ---------- */
  --sttg-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sttg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sttg-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --sttg-shadow-lg: 0 10px 20px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --sttg-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--sttg-accent) 22%, transparent);

  /* ---------- Type ----------
     Escala tipográfica ENXUTA. Regra do projeto: a página é homogênea — o texto
     usa --sttg-fs-base; tamanhos maiores SÓ em destaques pontuais (título de card,
     valor de KPI, heading de página). Vale para menus e header também. */
  --sttg-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sttg-fs-micro: 11px;   /* overlines, headers de tabela, badges, role/section label */
  --sttg-fs-sm:    12px;   /* labels, captions, texto secundário */
  --sttg-fs-base:  13px;   /* PADRÃO: corpo, células, nav, inputs, botões */
  --sttg-fs-md:    14px;   /* destaque leve: título de card, breadcrumb atual, brand */
  --sttg-fs-lg:    18px;   /* subtítulo/seção */
  --sttg-fs-xl:    22px;   /* valores KPI, heading de página */

  /* ---------- Spacing (regra Stack: o container controla o gap; componente não tem margem) ---------- */
  --sttg-gap:      16px;   /* espaçamento padrão entre componentes (gap do container) */
  --sttg-gap-sm:   12px;
  --sttg-page-pad-x: 24px; /* padding lateral da página (gutter) */
  --sttg-page-pad-y: 24px;
  --sttg-topbar-height: 56px; /* altura fixa do AppBar dense — alinha sidebar brand + padding do conteúdo */
}

/* =====================================================================
   2 · POLIMENTO MUDBLAZOR (elevação, raio, tipografia)
   A PALETA de cores é dona do StrategileTheme.Build() (C#), injetada por
   tema via MudThemeProvider. NÃO redefinimos --mud-palette-* de cor aqui
   (isso criava o bug: o overlay gateava o dark atrás de .mud-theme-dark,
   classe que o MudBlazor v8 NÃO adiciona ao DOM). Os tokens --sttg-* da
   seção 1 derivam de --mud-palette-*, logo seguem o tema sozinhos.
   Abaixo, só refinos visuais independentes de tema.
   ===================================================================== */
:root {
  /* Shadows */
  --mud-elevation-0: none;
  --mud-elevation-1: var(--sttg-shadow-xs);
  --mud-elevation-2: var(--sttg-shadow-sm);
  --mud-elevation-3: var(--sttg-shadow-sm);
  --mud-elevation-4: var(--sttg-shadow-md);
  --mud-elevation-6: var(--sttg-shadow-md);
  --mud-elevation-8: var(--sttg-shadow-lg);
  --mud-elevation-12: var(--sttg-shadow-lg);
  --mud-elevation-16: var(--sttg-shadow-lg);
  --mud-elevation-24: 0 24px 40px -8px rgba(15, 23, 42, 0.16), 0 12px 16px -8px rgba(15, 23, 42, 0.08);

  /* Border radius default */
  --mud-default-borderradius: 8px;

  /* Typography */
  --mud-typography-default-family:      var(--sttg-font-sans);
  --mud-typography-default-size:        var(--sttg-fs-base);
  --mud-typography-default-letterspacing: 0;
  --mud-typography-h1-family:           var(--sttg-font-sans);
  --mud-typography-h2-family:           var(--sttg-font-sans);
  --mud-typography-h3-family:           var(--sttg-font-sans);
  --mud-typography-h4-family:           var(--sttg-font-sans);
  --mud-typography-h5-family:           var(--sttg-font-sans);
  --mud-typography-h6-family:           var(--sttg-font-sans);
  --mud-typography-button-family:       var(--sttg-font-sans);
  --mud-typography-button-weight:       500;
  --mud-typography-button-text-transform: none;
  --mud-typography-body1-family:        var(--sttg-font-sans);
  --mud-typography-body2-family:        var(--sttg-font-sans);
  --mud-typography-caption-family:      var(--sttg-font-sans);
  --mud-typography-subtitle1-family:    var(--sttg-font-sans);
  --mud-typography-subtitle2-family:    var(--sttg-font-sans);
}

/* DARK — sem bloco dedicado.
   Os tokens --sttg-* derivam de --mud-palette-*, que o StrategileTheme.Build()
   (C#/PaletteDark) injeta no modo escuro. Logo, todo refino que usa --sttg-*
   acompanha o dark automaticamente, sem precisar de classe .mud-theme-dark. */

/* =====================================================================
   3 · BASE / TIPOGRAFIA GLOBAL
   ===================================================================== */
html, body {
  font-family: var(--sttg-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
body { background: var(--sttg-bg-app); color: var(--sttg-text-primary); }
::selection { background: var(--sttg-accent-soft-2); color: var(--sttg-text-primary); }

/* MudBlazor aplica typography pelos vars acima, mas alguns componentes
   forçam font-family inline. Resetamos: */
.mud-typography, .mud-typography * { font-family: var(--sttg-font-sans) !important; }
.mud-button, .mud-input, .mud-input-label, .mud-select-input, .mud-table { font-family: var(--sttg-font-sans); }

/* Headings + tracking */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4,
.mud-typography-h5, .mud-typography-h6 { letter-spacing: -0.02em; font-weight: 600; }

/* =====================================================================
   4 · COMPONENTES MUDBLAZOR — REFINOS
   ===================================================================== */

/* APPBAR (TopBar) */
.mud-appbar {
  background-color: var(--mud-palette-appbar-background) !important;
  color: var(--sttg-text-primary) !important;
  border-bottom: 1px solid var(--sttg-border-subtle);
  box-shadow: none !important;
}
.mud-appbar.mud-appbar-dense { min-height: var(--sttg-topbar-height); }
/* MudBlazor usa padding-top = 75% da altura do appbar dense; com 56px real isso gera overlap */
.mud-appbar.mud-appbar-dense ~ .mud-main-content { padding-top: var(--sttg-topbar-height); }

/* DRAWER (Sidebar) — estilizado integralmente na §8 (.sttg-navdrawer), tema-aware.
   O bloco legado .mud-drawer .mud-navmenu (texto branco hardcoded) foi removido:
   tinha especificidade maior e deixava o texto invisível na sidebar clara. */
.mud-drawer .mud-navmenu .mud-nav-link-icon-default { color: inherit !important; }

/* CARDS */
.mud-card, .mud-paper {
  background-color: var(--mud-palette-surface);
  border: 1px solid var(--sttg-border-subtle);
  box-shadow: var(--sttg-shadow-xs);
  border-radius: var(--sttg-r-lg);
}
.mud-card-content { color: var(--sttg-text-primary); }
.mud-card-header { padding: 14px 20px; border-bottom: 1px solid var(--sttg-border-subtle); }
.mud-card-actions { padding: 12px 20px; border-top: 1px solid var(--sttg-border-subtle); }

/* BUTTONS */
.mud-button-root {
  text-transform: none !important;
  font-weight: 500;
  border-radius: var(--sttg-r-md);
  letter-spacing: 0;
  min-height: 36px;
  padding: 0 14px;
  box-shadow: none !important;
}
.mud-button-filled {
  background-color: var(--sttg-accent);
  color: var(--sttg-accent-fg);
}
.mud-button-filled:hover { background-color: var(--sttg-accent-hover); }
.mud-button-outlined {
  background-color: var(--sttg-bg-surface);
  border: 1px solid var(--sttg-border-default);
  color: var(--sttg-text-primary);
}
.mud-button-outlined:hover {
  background-color: var(--sttg-bg-hover);
  border-color: var(--sttg-border-strong);
}
.mud-button-text { color: var(--sttg-text-secondary); }
.mud-button-text:hover { background-color: var(--sttg-bg-hover); color: var(--sttg-text-primary); }

.mud-icon-button { border-radius: var(--sttg-r-md); }
.mud-icon-button:hover { background-color: var(--sttg-bg-hover); }

/* INPUTS */
.mud-input.mud-input-outlined, .mud-input-outlined-border {
  border-radius: var(--sttg-r-md);
}
.mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--sttg-border-default); }
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--sttg-border-strong); }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--sttg-accent);
  box-shadow: var(--sttg-shadow-focus);
}
.mud-input-label { font-size: 13px; color: var(--sttg-text-secondary); }

/* CHIPS */
.mud-chip { border-radius: 9999px; font-size: 12px; font-weight: 500; }
.mud-chip.mud-chip-filled.mud-chip-color-default {
  background-color: var(--sttg-bg-muted);
  color: var(--sttg-text-secondary);
  border: 1px solid var(--sttg-border-subtle);
}
.mud-chip.mud-chip-filled.mud-chip-color-primary {
  background-color: var(--sttg-accent-soft-2);
  color: var(--sttg-accent);
}

/* TABLES (MudTable / MudDataGrid) */
.mud-table-root, .mud-data-grid {
  border-radius: var(--sttg-r-lg);
  border: 1px solid var(--sttg-border-subtle);
  background: var(--sttg-bg-surface);
}
.mud-table thead th, .mud-data-grid .mud-table-head .mud-table-cell {
  background-color: var(--sttg-bg-muted) !important;
  color: var(--sttg-text-secondary) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--sttg-border-subtle);
}
.mud-table tbody tr:hover, .mud-data-grid .mud-table-body .mud-table-row:hover {
  background-color: var(--sttg-bg-hover) !important;
}
.mud-table tbody td, .mud-data-grid .mud-table-body .mud-table-cell {
  border-bottom: 1px solid var(--sttg-border-subtle);
  color: var(--sttg-text-primary);
  font-size: 13px;
}
.mud-table-toolbar { padding: 12px 16px; }
.mud-data-grid > .mud-toolbar.mud-table-toolbar {
  padding-top: 0;
  padding-bottom: 0;
}
/* Mantém override do app.css legado */
th { background-color: var(--sttg-bg-muted) !important; }

/* DIALOGS / POPUPS */
.mud-dialog {
  background: var(--mud-palette-surface);
  border: 1px solid var(--sttg-border-subtle);
  border-radius: var(--sttg-r-xl);
  box-shadow: 0 24px 40px -8px rgba(15, 23, 42, 0.16), 0 12px 16px -8px rgba(15, 23, 42, 0.08);
}
.mud-dialog-title { padding: 18px 22px; border-bottom: 1px solid var(--sttg-border-subtle); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.mud-dialog-content { padding: 22px; }
.mud-dialog-actions { padding: 14px 22px; border-top: 1px solid var(--sttg-border-subtle); background: var(--sttg-bg-muted); }
.mud-overlay-scrim { background-color: rgba(15, 23, 42, 0.50) !important; backdrop-filter: blur(4px); }

/* PROGRESS */
.mud-progress-linear { border-radius: 9999px; height: 6px; background-color: var(--sttg-bg-muted); }
.mud-progress-linear-bar { border-radius: 9999px; }

/* ALERTS */
.mud-alert { border-radius: var(--sttg-r-md); font-size: 13px; }
.mud-alert-filled-info { background-color: var(--sttg-accent-soft); color: var(--sttg-accent); border: 1px solid var(--sttg-accent-soft-2); }
.mud-alert-filled-success { background-color: var(--sttg-success-soft); color: var(--sttg-success); }
.mud-alert-filled-warning { background-color: var(--sttg-warning-soft); color: var(--sttg-warning); }
.mud-alert-filled-error { background-color: var(--sttg-danger-soft); color: var(--sttg-danger); }

/* SWITCH */
.mud-switch { padding: 6px; }
.mud-switch-track { border-radius: 9999px; opacity: 1; background-color: var(--sttg-border-default); }
.mud-switch-thumb { box-shadow: var(--sttg-shadow-sm); }

/* TABS */
.mud-tabs-toolbar { border-bottom: 1px solid var(--sttg-border-subtle); }
.mud-tab { text-transform: none; font-weight: 500; min-height: 40px; padding: 10px 14px; }

/* TOOLTIPS */
.mud-tooltip {
  background-color: var(--sttg-slate-900);
  color: #ffffff;
  font-size: 12px;
  border-radius: var(--sttg-r-sm);
  padding: 6px 10px;
}

/* SCROLLBARS (sutis) */
.mud-drawer ::-webkit-scrollbar { width: 6px; height: 6px; }
.mud-drawer ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 3px; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--sttg-border-default); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: var(--sttg-border-strong); }

/* =====================================================================
   5 · SYNCFUSION CHARTS — pequenos ajustes
   Syncfusion lê suas próprias variáveis. Estes são overrides leves
   para alinhar fundo, grid e tooltip ao tema.
   ===================================================================== */
.e-control { font-family: var(--sttg-font-sans) !important; }
.e-chart, .e-accumulationchart { background-color: var(--sttg-bg-surface) !important; }
.e-chart-tooltip {
  background-color: var(--sttg-slate-900) !important;
  border: 0 !important;
  border-radius: var(--sttg-r-md) !important;
  color: #ffffff !important;
  font-family: var(--sttg-font-sans) !important;
  box-shadow: var(--sttg-shadow-md) !important;
}
.e-tooltip-text { color: #ffffff !important; }
.e-chart .e-axis-label, .e-chart text { fill: var(--sttg-text-tertiary) !important; font-family: var(--sttg-font-sans) !important; }
.e-chart .e-major-grid-lines { stroke: var(--sttg-border-subtle) !important; }
.e-chart .e-axis-line { stroke: var(--sttg-border-default) !important; }

/* =====================================================================
   6 · UTILITÁRIOS — para reuso nas .razor
   ===================================================================== */
.sttg-page-sub { color: var(--sttg-text-secondary); font-size: 13.5px; }
.sttg-card-head { padding: 14px 20px; border-bottom: 1px solid var(--sttg-border-subtle); }
.sttg-card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.sttg-card-sub { font-size: 12.5px; color: var(--sttg-text-tertiary); margin-top: 2px; }

/* KPI compacto reusável */
.sttg-kpi {
  background: var(--sttg-bg-surface);
  border: 1px solid var(--sttg-border-subtle);
  border-radius: var(--sttg-r-lg);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sttg-kpi:hover { border-color: var(--sttg-border-default); box-shadow: var(--sttg-shadow-sm); }
.sttg-kpi-label { font-size: 12px; color: var(--sttg-text-tertiary); font-weight: 500; }
.sttg-kpi-value { font-size: 24px; font-weight: 600; color: var(--sttg-text-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sttg-kpi-delta-up { color: var(--sttg-success); font-size: 12px; font-weight: 600; }
.sttg-kpi-delta-down { color: var(--sttg-danger); font-size: 12px; font-weight: 600; }

/* AI Insight (reusável nas páginas) */
.sttg-insight {
  background: var(--sttg-bg-surface);
  border: 1px solid var(--sttg-border-subtle);
  border-radius: var(--sttg-r-lg);
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  position: relative; overflow: hidden;
}
.sttg-insight::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--sttg-accent);
}
.sttg-insight.is-success::before { background: var(--sttg-success); }
.sttg-insight.is-warning::before { background: var(--sttg-warning); }
.sttg-insight.is-danger::before  { background: var(--sttg-danger); }
.sttg-insight-ic {
  width: 32px; height: 32px; border-radius: var(--sttg-r-md);
  background: var(--sttg-accent-soft); color: var(--sttg-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sttg-insight.is-success .sttg-insight-ic { background: var(--sttg-success-soft); color: var(--sttg-success); }
.sttg-insight.is-warning .sttg-insight-ic { background: var(--sttg-warning-soft); color: var(--sttg-warning); }
.sttg-insight.is-danger .sttg-insight-ic  { background: var(--sttg-danger-soft); color: var(--sttg-danger); }

/* Badges semânticos para uso em tabelas (substituem cores hardcoded) */
.sttg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.sttg-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sttg-badge-success { background: var(--sttg-success-soft); color: var(--sttg-success); }
.sttg-badge-warning { background: var(--sttg-warning-soft); color: var(--sttg-warning); }
.sttg-badge-danger  { background: var(--sttg-danger-soft);  color: var(--sttg-danger); }
.sttg-badge-info    { background: var(--sttg-accent-soft);  color: var(--sttg-accent); }

/* =====================================================================
   7 · NEUTRALIZA O ROXO LEGADO
   Sidebar antiga tinha gradient azul→roxo hardcoded.
   ===================================================================== */
.sidebar { background-image: none !important; }

/* =====================================================================
   8 · CHROME (sidebar + topbar) — FASE 1 do redesign
   Estiliza o MudDrawer/MudAppBar existentes para o visual do Claude Design,
   preservando rotas/permissões/role-menus. Sidebar é sempre escura (gradiente
   slate) em light e dark.
   ===================================================================== */
:root {
  /* sidebar segue o tema (clara no light, escura no dark) — derivado da paleta Mud */
  --sttg-sidebar-bg:         var(--mud-palette-surface);
  --sttg-sidebar-border:     var(--sttg-border-subtle);
  --sttg-sidebar-text:       var(--mud-palette-text-secondary);
  --sttg-sidebar-text-dim:   var(--mud-palette-text-disabled);
  --sttg-sidebar-text-on:    var(--mud-palette-text-primary);
  --sttg-sidebar-hover:      var(--sttg-bg-hover);
  --sttg-sidebar-active-bg:  var(--sttg-accent-soft);
  --sttg-sidebar-active-tx:  var(--sttg-accent);
  --sttg-sidebar-accent:     var(--sttg-accent);
}

/* ---- Drawer: 3 zonas (brand fixo / nav rola / footer fixo) ---- */
.sttg-navdrawer {
  background: var(--sttg-sidebar-bg) !important;
  border-right: 1px solid var(--sttg-sidebar-border);
  color: var(--sttg-sidebar-text);
}
.sttg-navdrawer .mud-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar full-height + topbar SÓ na coluna de conteúdo (desktop, drawer aberto).
   MudBlazor "clipped-docked" deixa o .mud-appbar full-width (z 1300) por cima do
   drawer (top 42px). Forçamos o modelo em grade: drawer do topo (y=0) à base,
   appbar começando após a largura do drawer. No mobile (overlay) o appbar volta full. */
@media (min-width: 960px) {
  .mud-drawer-open-responsive-md-left .mud-appbar {
    left: var(--mud-drawer-width-left, 248px);
    width: calc(100% - var(--mud-drawer-width-left, 248px));
  }
  .sttg-navdrawer.mud-drawer--open {
    top: 0 !important;
    height: 100vh !important;
    z-index: 1301;
  }
}

/* ---- Brand (topo) ---- */
.sttg-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: var(--sttg-topbar-height);
  min-height: var(--sttg-topbar-height);
  border-bottom: 1px solid var(--sttg-sidebar-border);
  flex-shrink: 0;
}
.sttg-sidebar-brand img { width: 30px; height: 30px; border-radius: var(--sttg-r-sm); flex-shrink: 0; }
.sttg-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sttg-brand-name { font-size: var(--sttg-fs-md); font-weight: 700; color: var(--sttg-sidebar-text-on); letter-spacing: -0.01em; }
.sttg-brand-role { font-size: var(--sttg-fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sttg-sidebar-text-dim); }

/* ---- Zona de navegação (rola) ---- */
.sttg-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 14px;
}
.sttg-sidebar-nav .mud-navmenu { background: transparent; padding: 0; }

/* Section label (inserido no MasterAdminMenu) */
.sttg-nav-section {
  font-size: var(--sttg-fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sttg-sidebar-text-dim);
  padding: 16px 12px 6px;
}
.sttg-nav-section:first-child { padding-top: 6px; }

/* ---- Footer (usuário, fixo) ---- */
.sttg-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--sttg-sidebar-border);
  flex-shrink: 0;
}
.sttg-sb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #06080f; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sttg-cyan-400), var(--sttg-cyan-600));
}
.sttg-sb-user { min-width: 0; line-height: 1.25; }
.sttg-sb-user-name { font-size: var(--sttg-fs-base); font-weight: 600; color: var(--sttg-sidebar-text-on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sttg-sb-user-role { font-size: var(--sttg-fs-micro); color: var(--sttg-sidebar-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Nav links dentro da sidebar nova (alinha ao design) ---- */
.sttg-navdrawer .mud-nav-link {
  color: var(--sttg-sidebar-text);
  border-radius: var(--sttg-r-sm);
  margin: 1px 4px;
  padding: 7px 12px;
  font-size: var(--sttg-fs-base);
  font-weight: 500;
}
.sttg-navdrawer .mud-nav-link:hover { background: var(--sttg-sidebar-hover); color: var(--sttg-sidebar-text-on); }
.sttg-navdrawer .mud-nav-link.active {
  background: var(--sttg-sidebar-active-bg);
  color: var(--sttg-sidebar-active-tx);
}
.sttg-navdrawer .mud-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sttg-sidebar-accent);
}
.sttg-navdrawer .mud-nav-link .mud-nav-link-icon { color: inherit; min-width: 34px; }
.sttg-navdrawer .mud-nav-group > .mud-nav-link { font-weight: 600; }

/* ---- Topbar (breadcrumb + busca + ações) ---- */
.mud-appbar.sttg-topbar { justify-content: center; }
.sttg-topbar-inner { display: flex; align-items: center; gap: 16px; width: 100%; }
.sttg-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--sttg-fs-md); white-space: nowrap; overflow: hidden; }
.sttg-crumb { color: var(--sttg-text-secondary); }
.sttg-crumb-sep { color: var(--sttg-text-tertiary); }
.sttg-crumb-current { color: var(--sttg-text-primary); font-weight: 600; }

.sttg-topbar-search {
  flex: 1 1 auto; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  background: var(--sttg-bg-muted);
  border: 1px solid var(--sttg-border-subtle);
  border-radius: var(--sttg-r-md);
  color: var(--sttg-text-tertiary);
  cursor: text;
}
.sttg-topbar-search:hover { border-color: var(--sttg-border-default); }
.sttg-topbar-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--sttg-fs-base); color: var(--sttg-text-primary); font-family: var(--sttg-font-sans); }
.sttg-topbar-search input::placeholder { color: var(--sttg-text-tertiary); }
.sttg-kbd { font-size: var(--sttg-fs-micro); font-weight: 600; color: var(--sttg-text-tertiary); border: 1px solid var(--sttg-border-subtle); border-radius: 5px; padding: 1px 6px; background: var(--sttg-bg-surface); white-space: nowrap; }

.sttg-topbar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sttg-topbar-actions .mud-icon-button { color: var(--sttg-text-secondary); }

/* Pill de usuário (único lugar do avatar+tipo, botão de perfil) */
.sttg-userbtn { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; margin-left: 4px; border-radius: 9999px; cursor: pointer; user-select: none; transition: background var(--t-fast, 120ms) ease; }
.sttg-userbtn:hover { background: var(--sttg-bg-hover); }
.sttg-userbtn-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--sttg-fs-sm); font-weight: 700; color: #06080f; background: linear-gradient(135deg, var(--sttg-cyan-400), var(--sttg-cyan-600)); }
.sttg-userbtn-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sttg-userbtn-name { font-size: var(--sttg-fs-base); font-weight: 600; color: var(--sttg-text-primary); white-space: nowrap; }
.sttg-userbtn-role { font-size: var(--sttg-fs-micro); color: var(--sttg-text-tertiary); white-space: nowrap; }
.sttg-userbtn-chevron { color: var(--sttg-text-tertiary); }
@media (max-width: 1280px) { .sttg-userbtn-text, .sttg-userbtn-chevron { display: none; } }

/* hamburger só no mobile (sidebar persistente no desktop) */
@media (min-width: 960px) { .sttg-drawer-toggle { display: none; } }
/* na faixa estreita, esconde a busca pra não espremer breadcrumb/ações */
@media (max-width: 1100px) { .sttg-topbar-search { display: none; } }

/* =====================================================================
   9 · COMPONENTES DE PÁGINA
   ===================================================================== */

/* ---- Espaçamento (regra "Stack" / Every Layout) ----
   Princípio: COMPONENTE não carrega margem própria; quem controla o espaçamento
   é o CONTAINER pai, via gap. A página (.sttg-page) só dá o gutter (padding
   lateral + topo/base) e NÃO espaça componentes entre si. Para espaçar blocos,
   envolva-os num .sttg-stack (gap vertical) ou .sttg-row (gap horizontal).
   Evita margens/paddings duplicados e "de onde vem esse espaço?". */
.sttg-page { padding: var(--sttg-page-pad-y) var(--sttg-page-pad-x); }
.sttg-stack { display: flex; flex-direction: column; gap: var(--sttg-gap); }
.sttg-stack-sm { display: flex; flex-direction: column; gap: var(--sttg-gap-sm); }
.sttg-row { display: flex; align-items: center; gap: var(--sttg-gap-sm); flex-wrap: wrap; }

/* Card genérico (alinha ao .card do design) */
.sttg-card {
  background: var(--sttg-bg-surface);
  border: 1px solid var(--sttg-border-subtle);
  border-radius: var(--sttg-r-lg);
  box-shadow: var(--sttg-shadow-xs);
  overflow: hidden;
}
.sttg-block-title { font-size: var(--sttg-fs-md); font-weight: 600; color: var(--sttg-text-primary); letter-spacing: -0.01em; }

/* =====================================================================
   FAIXA DE FILTROS — padrão SAP Fiori (Filter Bar)
   Header: [título]  ...........  [cluster de ações + toggle] (right-aligned)
   As AÇÕES vivem no HEADER, FORA do grid de filtros e FORA do MudCollapse —
   ficam sempre visíveis (inclusive com filtros recolhidos) e NUNCA criam
   linha vazia/empilham no grid. O grid de filtros abaixo é 100% uniforme.
   ===================================================================== */
.sttg-filters { overflow: visible; }
.sttg-filters-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--sttg-border-subtle);
  flex-wrap: nowrap;
}
.sttg-filters-bar .sttg-block-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sttg-filters-toggle { color: var(--sttg-text-secondary) !important; flex-shrink: 0; }

/* Cluster de ações do header: unidade indivisível à direita, nunca empilha */
.sttg-filter-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; flex-wrap: nowrap; margin-left: auto;
}
.sttg-filter-actions > .mud-button-root { flex-shrink: 0; white-space: nowrap; }
.sttg-filter-search { white-space: nowrap; }

/* Mobile (<600px): exceção deliberada — título em cima, ações em 2ª linha
   full-width (lado a lado se couber, senão MudButton já é FullWidth no markup).
   NÃO é o bug de empilhamento; é o layout mobile padrão Fiori (ações descem). */
@media (max-width: 599px) {
  .sttg-filters-bar { flex-wrap: wrap; }
  .sttg-filter-actions { width: 100%; margin-left: 0; justify-content: stretch; }
  .sttg-filter-actions > .mud-button-root { flex: 1 1 auto; }
}

/* KPI cards (CardIndicador) — flat surface + chip de ícone colorido (accent),
   no lugar do gradiente cheio. Preserva dados/ícones/labels e o grid md=2. */
.sttg-kpi-card {
  background: var(--sttg-bg-surface);
  border: 1px solid var(--sttg-border-subtle);
  border-radius: var(--sttg-r-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; min-width: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sttg-kpi-card:hover { border-color: var(--sttg-border-default); box-shadow: var(--sttg-shadow-sm); }
.sttg-kpi-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sttg-kpi-card-ic {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--kpi-accent, var(--sttg-accent));
  background: color-mix(in srgb, var(--kpi-accent, var(--sttg-accent)) 15%, transparent);
}
.sttg-kpi-card-ic .mud-icon-root { font-size: 17px; }
.sttg-kpi-card-label {
  font-size: 12px; font-weight: 500; color: var(--sttg-text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sttg-kpi-card-value {
  font-size: 21px; font-weight: 600; color: var(--sttg-text-primary);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Dashboard — charts + família (linha 1) e grids inferiores (linha 2) */
.sttg-dashboard-charts-layout {
  display: grid;
  gap: 24px;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
}

.sttg-dashboard-charts-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.sttg-dashboard-charts-sidebar {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sttg-dashboard-charts-bottom {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
}

@media (min-width: 960px) {
  .sttg-dashboard-charts-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .sttg-dashboard-charts-main {
    grid-column: 1;
    grid-row: 1;
  }

  .sttg-dashboard-charts-sidebar {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .sttg-dashboard-charts-bottom {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 1280px) {
  .sttg-dashboard-charts-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}

.sttg-dashboard-charts-sidebar .vendas-por-familia-card {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sttg-dashboard-charts-sidebar .vendas-por-familia-card .mud-card-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sttg-dashboard-charts-sidebar .mud-table.mud-table-familia {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sttg-dashboard-charts-sidebar .mud-table.mud-table-familia > .mud-table-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
}

@media (max-width: 959px) {
  .sttg-dashboard-charts-sidebar .mud-table.mud-table-familia > .mud-table-container {
    max-height: 690px;
  }
}

/* =====================================================================
   FIM — Strategile Theme Overlay
   ===================================================================== */