/* =============================================================================
   Tokens do tema ICEA — compartilhados pelo portal do cliente e pelo painel.
   Valores do design system do Meu ICEA (meu-icea/src/app/globals.css), nos
   dois modos. Quem escolhe o modo e o atributo data-theme no <html>, gravado
   antes da primeira pintura (tema/tema.js); "sistema" vira light/dark ali.

   Regra: nenhuma cor fixa fora deste arquivo. O CSS do portal, do painel e a
   paleta gerada das cores do osTicket (assets/ost-cores.css) so usam tokens.
   ============================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('inter-latin-wght-normal.woff2') format('woff2-variations'),
       url('inter-latin-wght-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* marca UFOP/ICEA */
  --brand: #962038;
  --brand-dark: #7a1a2e;
  --brand-darker: #5e1424;
  --brand-bg: #fdf2f4;
  --brand-lighter: #f2d5db;
  --on-brand: #ffffff;              /* texto sobre --brand */
  --on-err: #ffffff;                /* texto sobre --err (botoes de excluir) */
  --navy: #1a1a2e;                  /* rodape, fixo nos dois modos */
  --navy-light: #2d2d44;
  --accent: #e6a817;

  /* superficies */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-muted: #f8f9fa;
  --surface-hover: #f1f3f5;
  --surface-active: #e9ecef;
  --overlay: rgba(15, 17, 21, 0.45);

  /* bordas */
  --border: #dee2e6;
  --border-light: #e9ecef;
  --border-strong: #ced4da;

  /* texto (contrastes medidos no meu-icea) */
  --text: #212529;
  --text-secondary: #495057;
  --text-muted: #626a72;            /* 5,49:1 sobre branco */
  --text-inverse: #ffffff;

  /* links */
  --link: var(--brand);
  --link-hover: var(--brand-dark);

  /* semanticas: fundo, texto sobre o fundo, destaque, borda */
  --ok-bg: #e3f4e8;   --ok-text: #17552a;   --ok: #2b9348;   --ok-border: #b7e0c3;
  --warn-bg: #fff3cd; --warn-text: #664d03; --warn: #b7860b; --warn-border: #ffe69c;
  --err-bg: #fdecee;  --err-text: #8a1c2b;  --err: #c0392b;  --err-border: #f5c2c7;
  --info-bg: #e7f1fb; --info-text: #0b4a8b; --info: #2f6fb3; --info-border: #b6d4f2;

  /* conversa do chamado: cliente, atendente, nota interna */
  --msg-bg: #eef3f9;   --msg-border: #cbd8e6;
  --resp-bg: #fdf2f4;  --resp-border: #f2d5db;
  --note-bg: #fff8e1;  --note-border: #f1e0a6;

  /* prioridades */
  --prio-baixa: #2b9348; --prio-normal: #626a72; --prio-alta: #b7860b; --prio-emergencia: #c0392b;

  --focus-ring: rgba(150, 32, 56, 0.28);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* So na tela: impressao sai sempre no claro. */
@media screen {
:root[data-theme="dark"] {
  color-scheme: dark;

  /* o Meu ICEA usa #e8505f; como texto ele fica abaixo de 4,5:1 sobre as
     superficies mais claras do painel (4,0 no hover, 4,1 na pilula ativa).
     #ef6b78 passa em todas (4,9 / 4,85) e continua a mesma cor. */
  --brand: #ef6b78;
  --brand-dark: #f48a95;
  --brand-darker: #f8a5ad;
  --brand-bg: rgba(239, 107, 120, 0.14);
  --brand-lighter: rgba(239, 107, 120, 0.30);
  --on-brand: #1e0a10;              /* branco sobre o vinho claro reprova (3:1) */
  --on-err: #1e0a10;                /* idem sobre --err #f06b77 (6,4:1) */

  --bg: #0f1115;
  --surface: #171a21;
  --surface-muted: #1d212a;
  --surface-hover: #232833;
  --surface-active: #2a303c;
  --overlay: rgba(0, 0, 0, 0.6);

  --border: #2a303c;
  --border-light: #232833;
  --border-strong: #3a414f;

  --text: #f3f4f6;
  --text-secondary: #c7cbd3;
  --text-muted: #9aa1ad;
  --text-inverse: #0f1115;

  --ok-bg: rgba(43, 147, 72, 0.16);   --ok-text: #7ee0a0;   --ok: #4cc27a;   --ok-border: rgba(76, 194, 122, 0.35);
  --warn-bg: rgba(230, 168, 23, 0.16); --warn-text: #f2c94c; --warn: #f2c94c; --warn-border: rgba(242, 201, 76, 0.35);
  --err-bg: rgba(220, 53, 69, 0.16);  --err-text: #f4939c;  --err: #f06b77;  --err-border: rgba(240, 107, 119, 0.4);
  --info-bg: rgba(0, 119, 182, 0.16); --info-text: #7cc7f0; --info: #7cc7f0; --info-border: rgba(124, 199, 240, 0.35);

  --msg-bg: #1b2533;   --msg-border: #2c3b50;
  --resp-bg: #2a1a20;  --resp-border: #4a2630;
  --note-bg: #2a2616;  --note-border: #4a4222;

  --prio-baixa: #4cc27a; --prio-normal: #9aa1ad; --prio-alta: #f2c94c; --prio-emergencia: #f06b77;

  --focus-ring: rgba(239, 107, 120, 0.40);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}
}

/* =============================================================================
   Componentes dos dois lados (portal e painel)
   ============================================================================= */
.icea-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* logo claro/escuro: as duas imagens estao na pagina, o modo mostra uma */
.icea-logo--escuro { display: none !important; }
@media screen {
  [data-theme="dark"] .icea-logo--claro { display: none !important; }
  [data-theme="dark"] .icea-logo--escuro { display: block !important; }
}
/* seletor Sistema / Claro / Escuro */
.icea-seletor-tema {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--surface-muted); border: 1px solid var(--border);
}
.icea-seletor-tema button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-grid; place-items: center; width: 28px; height: 26px; border-radius: 999px;
  color: var(--text-muted); font-size: 13px;
}
.icea-seletor-tema button:hover { color: var(--text); }
.icea-seletor-tema button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.icea-seletor-tema button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 480px) {
  .icea-seletor-tema button { width: 24px; }
}