/* ==========================================================================
   IDENTIDADE VISUAL IMPRIZIL · NUPHY / PCP-NUPHY.HTML + IDENTIDADE.CSS + CASCA.CSS
   Aplicada ao Deskcomm Imprizil (EIP: ERP + CRM + IA)
   Fontes oficiais: Prometo, Source Sans 3, Barlow (tabular-nums)
   ========================================================================== */

@font-face {
  font-family: 'Barlow';
  src: url('/ativos-imprizil/Barlow-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/ativos-imprizil/Barlow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/ativos-imprizil/source-sans-3-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Prometo';
  src: url('/ativos-imprizil/Prometo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Prometo';
  src: url('/ativos-imprizil/Prometo-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. TOKENS DE SUPERFÍCIE, COR, TIPOGRAFIA E TECLAS NUPHY (CLARO & ESCURO)
   Espelha 1:1 C:\Claude Code\Painel Engenharia\ensaio\app\identidade.css
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="light"],
[data-theme="light"],
body:has([data-marca-org]) {
  --bg: #ededed;
  --surface: #fafafa;
  --surface-2: #e1e1e1;
  --text: #202020;
  --muted: #575757;
  --line: #bcbcbc;
  --brand: #006b33;
  --brand-bright: #04974a;
  --accent: #ffc807;
  --green-action: #00793a;
  --green-edge: #004822;
  --rail: #1b1b1b;
  --key: #ffffff;
  --key-ink: #202020;
  --key-edge: #aaaaaa;
  --shadow-edge: #aaaaaa;
  --pink-bg: #f3dfe9;
  --pink-line: #c69daf;
  --green-bg: #d8eee1;
  --green-line: #90bda3;
  --gray-bg: #e0e0e0;
  --gray-line: #aaaaaa;
  --purple-bg: #e8def2;
  --purple-line: #b4a0c9;
  --danger: #9e2033;
  --danger-bg: #ffe4e8;
  --success-bg: #d4eede;
  --warning: #754f00;
  --warning-bg: #fff0b5;
  --focus: #005ac7;
  --focus-on-dark: #ffc807;
  --key-depth: 3px;
  --key-shift: 2px;

  /* Mapeamento para tokens nativos do DeskcommCRM */
  --color-bg: #ededed !important;
  --color-surface: #fafafa !important;
  --color-surface-elevated: #e1e1e1 !important;
  --color-text: #202020 !important;
  --color-text-muted: #575757 !important;
  --color-text-subtle: #686868 !important;
  --color-border: #bcbcbc !important;
  --color-border-strong: #aaaaaa !important;

  --color-accent-50: #eefbf3 !important;
  --color-accent-100: #d8eee1 !important;
  --color-accent-200: #b2dfc5 !important;
  --color-accent-300: #7ecaa0 !important;
  --color-accent-400: #3dad72 !important;
  --color-accent-500: #04974a !important;
  --color-accent-600: #00793a !important;
  --color-accent-700: #006b33 !important;
  --color-accent-800: #005528 !important;
  --color-accent-900: #004822 !important;
  --color-accent-950: #002b14 !important;
  --color-accent: #00793a !important;
  --color-accent-fg: #ffffff !important;
  --color-accent-soft: #d8eee1 !important;
  --color-accent-hover: #006b33 !important;

  --color-success: #00793a !important;
  --color-success-bg: #d4eede !important;
  --color-success-fg: #006230 !important;
  --color-warning: #754f00 !important;
  --color-warning-bg: #fff0b5 !important;
  --color-warning-fg: #754f00 !important;
  --color-error: #9e2033 !important;
  --color-error-bg: #ffe4e8 !important;
  --color-error-fg: #9e2033 !important;

  --background: var(--color-bg) !important;
  --foreground: var(--color-text) !important;
  --card: var(--color-surface) !important;
  --card-foreground: var(--color-text) !important;
  --popover: var(--color-surface) !important;
  --popover-foreground: var(--color-text) !important;
  --primary: #00793a !important;
  --primary-foreground: #ffffff !important;
  --secondary: #e1e1e1 !important;
  --secondary-foreground: #202020 !important;
  --muted: #e1e1e1 !important;
  --muted-foreground: #575757 !important;
  --border: #bcbcbc !important;
  --input: #aaaaaa !important;
  --ring: #005ac7 !important;

  --radius-sm: 4px !important;
  --radius-md: 5px !important;
  --radius-lg: 5px !important;
  --radius-xl: 5px !important;
  --radius: 5px !important;

  --font-atkinson: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  --font-sans: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  --font-mono: 'Barlow', 'Segoe UI', monospace !important;
  --font-title: 'Prometo', 'Source Sans 3', sans-serif !important;
}

:root[data-theme="dark"],
[data-theme="dark"],
[data-theme="dark"] body:has([data-marca-org]) {
  --bg: #141414;
  --surface: #242424;
  --surface-2: #303030;
  --text: #f7f7f7;
  --muted: #c3c3c3;
  --line: #575757;
  --brand: #75e5a4;
  --brand-bright: #04974a;
  --accent: #ffc807;
  --green-action: #00793a;
  --green-edge: #004822;
  --rail: #1b1b1b;
  --key: #383838;
  --key-ink: #ffffff;
  --key-edge: #686868;
  --shadow-edge: #080808;
  --danger: #ffb5c2;
  --danger-bg: #531d29;
  --success-bg: #16472c;
  --warning: #ffdf82;
  --warning-bg: #453711;
  --focus: #ffc807;

  --color-bg: #141414 !important;
  --color-surface: #242424 !important;
  --color-surface-elevated: #303030 !important;
  --color-text: #f7f7f7 !important;
  --color-text-muted: #c3c3c3 !important;
  --color-text-subtle: #9e9e9e !important;
  --color-border: #575757 !important;
  --color-border-strong: #686868 !important;

  --color-accent: #00793a !important;
  --color-accent-fg: #ffffff !important;
  --color-accent-soft: #144a30 !important;
  --color-accent-hover: #04974a !important;

  --background: #141414 !important;
  --foreground: #f7f7f7 !important;
  --card: #242424 !important;
  --card-foreground: #f7f7f7 !important;
  --popover: #242424 !important;
  --popover-foreground: #f7f7f7 !important;
  --primary: #00793a !important;
  --primary-foreground: #ffffff !important;
  --secondary: #303030 !important;
  --secondary-foreground: #f7f7f7 !important;
  --muted: #303030 !important;
  --muted-foreground: #c3c3c3 !important;
  --border: #575757 !important;
  --input: #686868 !important;
  --ring: #ffc807 !important;
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFIA GLOBAL (Prometo nos títulos, Source Sans 3 no corpo, Barlow tabular nos números)
   -------------------------------------------------------------------------- */
body {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  font-size: 15px;
  line-height: 1.42;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

h1, h2, h3,
.text-2xl, .text-xl, .text-lg.font-semibold {
  font-family: 'Prometo', 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.15px;
}

.font-mono,
.tabular-nums,
time,
kbd,
code {
  font-family: 'Barlow', 'Segoe UI', monospace !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: 'tnum' 1 !important;
}

/* --------------------------------------------------------------------------
   3. TRILHO LATERAL ESCURO (#1b1b1b) + BOTÃO ATIVO AMARELO NUPHY (#ffc807)
   Idêntico ao pcp-nuphy.html (.nav-rail) e casca.css (.casca-trilho)
   -------------------------------------------------------------------------- */
aside.sticky {
  background-color: #1b1b1b !important;
  color: #f2f2f2 !important;
  border-right: 1px solid #454545 !important;
}

/* Topo do trilho com a logo negativa Imprizil */
aside.sticky > div:first-child {
  background-color: #1b1b1b !important;
  border-bottom: 3px solid #ffc807 !important;
  min-height: 64px !important;
}

/* Remove fundo branco forçado no modo escuro/claro na caixa da logo dentro do trilho escuro */
aside.sticky > div:first-child > div:first-child {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Troca visualmente a imagem da logo no trilho pelo SVG negativo oficial (letras brancas + arco amarelo) */
aside.sticky > div:first-child img {
  content: url('/ativos-imprizil/logo-imprizil-negativo.svg') !important;
  height: 36px !important;
  width: auto !important;
  max-width: 136px !important;
  display: block !important;
}

/* Cabeçalhos de grupos no trilho (Atendimento, CRM, IA, etc.) */
aside.sticky nav h2 button {
  color: #c9c9c9 !important;
  font-family: 'Barlow', 'Source Sans 3', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
}

aside.sticky nav h2 button:hover {
  background-color: #2e2e2e !important;
  color: #ffffff !important;
}

aside.sticky nav h2 button svg {
  color: #a9a9a9 !important;
}

/* Links de navegação no trilho */
aside.sticky nav a,
aside.sticky > div:last-child a {
  color: #e4e4e4 !important;
  border-radius: 4px !important;
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease !important;
}

aside.sticky nav a:hover:not([aria-current="page"]),
aside.sticky > div:last-child a:hover:not([aria-current="page"]) {
  background-color: #383838 !important;
  color: #ffffff !important;
}

/* Link ATIVO no trilho -> Tecla Amarela Imprizil (#ffc807 + sombra 3D #a77e00) */
aside.sticky nav a[aria-current="page"],
aside.sticky > div:last-child a[aria-current="page"] {
  background-color: #ffc807 !important;
  color: #171717 !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 0 #a77e00 !important;
  margin-bottom: 3px !important;
}

aside.sticky nav a[aria-current="page"] svg,
aside.sticky > div:last-child a[aria-current="page"] svg {
  color: #171717 !important;
}

/* Rodapé do trilho e botão de recolher */
aside.sticky > div:last-child,
aside.sticky > div.border-b {
  border-color: #454545 !important;
  background-color: #1b1b1b !important;
}

aside.sticky button[aria-label*="sidebar"] {
  color: #c9c9c9 !important;
  background-color: #2a2a2a !important;
  border: 1px solid #555555 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 0 #0d0d0d !important;
}

aside.sticky button[aria-label*="sidebar"]:hover {
  background-color: #383838 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. FAIXA DE TOPO (TOPBAR ESCURA #1b1b1b COM FILETE AMARELO #ffc807)
   Idêntico ao header de pcp-nuphy.html / identidade.css / casca.css
   -------------------------------------------------------------------------- */
header.sticky.z-20 {
  background-color: #1b1b1b !important;
  color: #f5f5f5 !important;
  border-bottom: 3px solid #ffc807 !important;
  min-height: 64px !important;
  backdrop-filter: none !important;
}

/* Caixa de busca (Ctrl+K) e controles dentro da TopBar */
header.sticky.z-20 button {
  background-color: #2a2a2a !important;
  color: #f2f2f2 !important;
  border: 1px solid #5a5a5a !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 0 #0d0d0d !important;
  font-weight: 600 !important;
}

header.sticky.z-20 button:hover {
  background-color: #383838 !important;
  border-color: #ffc807 !important;
  color: #ffffff !important;
}

header.sticky.z-20 kbd {
  background-color: #141414 !important;
  color: #ffc807 !important;
  border: 1px solid #555555 !important;
  border-radius: 3px !important;
  font-family: 'Barlow', monospace !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   5. TECLAS TÁTEIS 3D NUPHY (BOTÕES NO CONTEÚDO E MODAIS)
   Idêntico a identidade.css linhas 37-44:
   - Tecla branca/neutra: bg var(--key), border 1px solid var(--key-edge), box-shadow 0 3px 0 var(--shadow-edge)
   - Tecla verde ação: bg #00793a, border #004822, box-shadow 0 3px 0 #004822
   -------------------------------------------------------------------------- */
main button.inline-flex,
[role="dialog"] button.inline-flex {
  border-radius: 4px !important;
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  font-weight: 650 !important;
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 120ms ease !important;
}

/* Botão Primário Verde Imprizil (#00793a + borda/sombra 3D #004822) */
main button.bg-accent,
main a.bg-accent,
[role="dialog"] button.bg-accent {
  background-color: #00793a !important;
  color: #ffffff !important;
  border: 1px solid #004822 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 0 #004822 !important;
  font-weight: 700 !important;
}

main button.bg-accent:hover:not(:disabled),
main a.bg-accent:hover,
[role="dialog"] button.bg-accent:hover:not(:disabled) {
  background-color: #04974a !important;
  transform: translateY(-1px) !important;
}

main button.bg-accent:active:not(:disabled),
[role="dialog"] button.bg-accent:active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #004822 !important;
}

/* Botões Secundários / Outline -> Tecla NuPhy Branca/Tátil */
main button.bg-surface-elevated,
main button.border.border-border,
[role="dialog"] button.bg-surface-elevated,
[role="dialog"] button.border.border-border {
  background-color: var(--key) !important;
  color: var(--key-ink) !important;
  border: 1px solid var(--key-edge) !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 0 var(--shadow-edge) !important;
  font-weight: 650 !important;
}

main button.bg-surface-elevated:hover:not(:disabled),
main button.border.border-border:hover:not(:disabled),
[role="dialog"] button.bg-surface-elevated:hover:not(:disabled),
[role="dialog"] button.border.border-border:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: #00793a !important;
}

main button.bg-surface-elevated:active:not(:disabled),
main button.border.border-border:active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--shadow-edge) !important;
}

/* Botões Perigo / Destrutivos */
main button.bg-error,
[role="dialog"] button.bg-error {
  background-color: var(--danger-bg) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 0 var(--danger) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   6. ABAS (TABS), SELETORES E CONTADORES EM AMARELO IMPRIZIL (#ffc807)
   Idêntico a .abas .vis.ativa e .count-chip de pcp-nuphy.html
   -------------------------------------------------------------------------- */
[role="tablist"] {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  padding: 3px !important;
}

[role="tablist"] [role="tab"] {
  border-radius: 3px !important;
  font-weight: 650 !important;
  color: var(--muted) !important;
}

[role="tablist"] [role="tab"][data-state="active"] {
  background-color: #ffc807 !important;
  color: #171717 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 0 #a77e00 !important;
}

/* --------------------------------------------------------------------------
   7. PAINÉIS, CARDS, TABELAS E INPUTS (BORDAS NÍTIDAS 1PX, CANTOS DE 5PX, TOPO VERDE)
   Idêntico a .panel, .caixa, .metric-card de pcp-nuphy.html / identidade.css
   -------------------------------------------------------------------------- */
main .bg-card,
main .bg-surface {
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

/* Cards de indicadores e blocos de destaque com filete verde superior (#04974a) */
main .grid > .rounded-lg.border.bg-card,
main .grid > .rounded-xl.border.bg-card {
  border-top: 3px solid #04974a !important;
}

/* Inputs, Selects e Textareas */
main input:not([type="checkbox"]):not([type="radio"]),
main select,
main textarea,
[role="dialog"] input:not([type="checkbox"]):not([type="radio"]),
[role="dialog"] select,
[role="dialog"] textarea {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
}

main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* Tabelas de operação */
main table th {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  font-family: 'Barlow', 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
  border-color: var(--line) !important;
}

main table td {
  border-color: var(--line) !important;
}