/* ═══════════════════════════════════════════════════════════════════════════
   INGOO UI (H5) — camada de tema do painel de Operação
   ───────────────────────────────────────────────────────────────────────────
   Fonte dos tokens: INGOO-H5 `src/shared/styles/design-tokens.css`
   (--orange #fa6900, --grey #1c1f23, Poppins) e `PrimaryBtn/index.vue`.

   Mesma decisão já tomada no dashboard rj.ingooapp.com.br
   (apps/dashboard/src/lib/theme-h5.ts + globals.css):
     MODO CLARO = identidade do H5.  MODO ESCURO = intocado.

   Só toca em `html[data-theme="light"]`. Nada aqui alcança o tema escuro que a
   operação usa hoje — o toggle continua devolvendo o painel original.
   Quando o H5 mudar um token, muda aqui e o painel acompanha.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────────────
   Reescreve as variáveis que o painel inteiro já consome via var().
   É daqui que vem a maior parte da mudança visual.                          */
html[data-theme="light"] {
  --bg:         #F8F8F8;                 /* H5 bgPage   */
  --bg2:        #F2F2F3;                 /* H5 fill     */
  --card:       #FFFFFF;                 /* H5 bgCard   */
  --card2:      #FBFBFB;
  --border:     rgba(28, 31, 35, 0.15);  /* --grey-2 reforçado */
  --border-hot: #FA6900;
  --text:       #1C1F23;                 /* --grey      */
  --muted:      rgba(28, 31, 35, 0.64);  /* --color-text-2 */
  --orange:     #FA6900;                 /* laranja do H5 (era #ff6b00) */
  --orange2:    #E05E00;
  --green:      #0F7B3A;                 /* --green legível sobre branco */
  --red:        #6A0103;                 /* --red do H5 */
  --yellow:     #B26A00;
  --blue:       #002C6B;                 /* --blue do H5 */
  --shadow:     0 4px 8px 0 rgba(0, 0, 0, 0.08);   /* H5 shadow2 */
  --chart-grid: rgba(28, 31, 35, 0.08);
  --chart-tick: rgba(28, 31, 35, 0.64);

  /* auxiliares desta camada */
  --h5-border-soft:  rgba(28, 31, 35, 0.10);
  --h5-fill:         rgba(28, 31, 35, 0.04);
  --h5-shadow1:      0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --h5-shadow2:      0 4px 8px 0 rgba(0, 0, 0, 0.08);
  --h5-shadow3:      0 8px 16px 0 rgba(0, 0, 0, 0.08);
  --h5-shadow-panel: 0 10px 40px rgba(0, 0, 0, 0.12);
  --h5-orange-1:     rgba(250, 105, 0, 0.1);
  --h5-orange-2:     rgba(250, 105, 0, 0.2);
  --h5-orange-4:     rgba(250, 105, 0, 0.4);
  --h5-radius:       12px;               /* os cards do H5 usam 24rpx = 12px */
  --h5-radius-md:    8px;
}

/* ── 2. Tipografia ─────────────────────────────────────────────────────────
   O H5 é Poppins. Inter fica para o modo escuro.                            */
html[data-theme="light"],
html[data-theme="light"] body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: normal;
}

/* ── 3. Botões ─────────────────────────────────────────────────────────────
   PrimaryBtn do H5: laranja, texto branco 700, sombra laranja e recuo no
   toque (box-shadow 0 8rpx 18rpx var(--orange-4); &:active scale .97).      */
html[data-theme="light"] .btn {
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: var(--h5-radius-md);
  font-weight: 700;
  box-shadow: 0 4px 9px var(--h5-orange-4);
  transition: background .15s, box-shadow .15s, transform .12s;
}
html[data-theme="light"] .btn:hover {
  background: rgba(250, 105, 0, 0.86);
  color: #fff;
  box-shadow: 0 6px 14px var(--h5-orange-4);
  transform: translateY(-1px);
}
html[data-theme="light"] .btn:active { transform: scale(.97); }

html[data-theme="light"] .btn.ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
  box-shadow: var(--h5-shadow1);
}
html[data-theme="light"] .btn.ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--h5-orange-1);
  box-shadow: var(--h5-shadow1);
}

/* ── 4. Abas ───────────────────────────────────────────────────────────── */
html[data-theme="light"] .tabs {
  background: var(--card);
  border: 1px solid var(--h5-border-soft);
  border-radius: var(--h5-radius);
  box-shadow: var(--h5-shadow1);
}
html[data-theme="light"] .tab { color: var(--muted); }
html[data-theme="light"] .tab:hover { color: var(--text); background: var(--h5-fill); }
html[data-theme="light"] .tab.active {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 9px rgba(250, 105, 0, 0.32);
}
html[data-theme="light"] .tab .avatar { border-color: var(--h5-border-soft); background: var(--bg2); }
html[data-theme="light"] .tab.active .avatar { border-color: rgba(255, 255, 255, .5); }

/* ── 5. Cartões e KPIs ─────────────────────────────────────────────────── */
html[data-theme="light"] .card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .hero-kpi,
html[data-theme="light"] .machines-chip {
  background: var(--card);
  border: 1px solid var(--h5-border-soft);
  border-radius: var(--h5-radius);
  box-shadow: var(--h5-shadow1);
}
html[data-theme="light"] .kpi:hover {
  border-color: var(--kpi-color, var(--orange));
  box-shadow: var(--h5-shadow2, 0 4px 8px 0 rgba(0, 0, 0, .08));
}
html[data-theme="light"] .kpi.ai-card:hover,
html[data-theme="light"] .kpi.consol-card:hover { box-shadow: var(--h5-shadow3); }
html[data-theme="light"] .kpi .kpi-icon { background: var(--h5-fill); }
html[data-theme="light"] .kpi-link .kpi-go { background: var(--h5-fill); }
html[data-theme="light"] .kpi-link:hover .kpi-go {
  background: var(--h5-orange-1);
  color: var(--orange);
}

html[data-theme="light"] .mgr-card {
  background: var(--card);
  border: 1px solid var(--h5-border-soft);
  border-radius: var(--h5-radius);
  box-shadow: var(--h5-shadow1);
}
html[data-theme="light"] .mgr-card:hover { box-shadow: var(--h5-shadow3); }
html[data-theme="light"] .mgr-card .avatar-xl {
  border-color: var(--card);
  box-shadow: 0 0 0 3px var(--accent, var(--orange)), 0 4px 8px rgba(0, 0, 0, .08);
}
html[data-theme="light"] .mgr-card.empty .avatar-xl,
html[data-theme="light"] .mgr-card.all .avatar-xl {
  background: linear-gradient(135deg, var(--bg2), var(--card2));
}

/* ── 6. Hero e destaque ────────────────────────────────────────────────── */
html[data-theme="light"] .landing-hero {
  border-radius: 16px;
  border-color: var(--h5-border-soft);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--h5-orange-1), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
html[data-theme="light"] .landing-hero .eyebrow {
  background: var(--h5-orange-1);
  border-color: var(--h5-orange-2);
  color: var(--orange);
}
html[data-theme="light"] .landing-hero h1 {
  background: linear-gradient(135deg, var(--text) 0%, var(--text) 55%, var(--orange) 125%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
html[data-theme="light"] .landing-hero h1 span {
  background: linear-gradient(135deg, var(--orange), #FF9142);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
html[data-theme="light"] .hero-kpi { background: rgba(255, 255, 255, .92); }

html[data-theme="light"] .featured-all {
  border-radius: var(--h5-radius);
  border-color: var(--h5-orange-2);
  background: linear-gradient(135deg, var(--h5-orange-1), rgba(250, 105, 0, .03) 60%, #fff);
  box-shadow: var(--h5-shadow1);
}
html[data-theme="light"] .featured-all:hover {
  border-color: var(--orange);
  box-shadow: 0 12px 28px rgba(250, 105, 0, .16);
}
html[data-theme="light"] .featured-all .fa-right {
  background: rgba(255, 255, 255, .7);
  border-left-color: var(--h5-orange-2);
}

/* ── 7. Campos de formulário ───────────────────────────────────────────── */
html[data-theme="light"] .select,
html[data-theme="light"] .input,
html[data-theme="light"] .modal .form-group input {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--h5-radius-md);
  font-family: inherit;
}
html[data-theme="light"] .select:focus,
html[data-theme="light"] .input:focus,
html[data-theme="light"] .modal .form-group input:focus {
  border-color: rgba(250, 105, 0, .5);            /* --color-focus-border */
  box-shadow: 0 0 0 3px var(--h5-orange-1);       /* --color-focus-border-shadow */
}
html[data-theme="light"] .modal .form-group label { color: var(--muted); }

/* ── 8. Modal ──────────────────────────────────────────────────────────── */
html[data-theme="light"] .modal-overlay { background: rgba(28, 31, 35, .45); }
html[data-theme="light"] .modal {
  background: var(--card);
  border: 1px solid var(--h5-border-soft);
  border-radius: var(--h5-radius);
  box-shadow: var(--h5-shadow-panel);
}
html[data-theme="light"] .modal-actions .save {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  border-radius: var(--h5-radius-md);
  box-shadow: 0 4px 9px var(--h5-orange-4);
}
html[data-theme="light"] .modal-actions .save:hover { background: rgba(250, 105, 0, .86); }
html[data-theme="light"] .modal-actions .cancel {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--h5-radius-md);
}
html[data-theme="light"] .modal-actions .cancel:hover { background: var(--h5-fill); }

/* ── 9. Dropzone ───────────────────────────────────────────────────────── */
html[data-theme="light"] .dropzone {
  background: var(--card);
  border: 2px dashed var(--border);
  border-radius: var(--h5-radius);
}
html[data-theme="light"] .dropzone:hover,
html[data-theme="light"] .dropzone.drag {
  border-color: var(--orange);
  background: rgba(250, 105, 0, .04);
}
html[data-theme="light"] .dropzone-icon {
  background: var(--h5-orange-1);
  color: var(--orange);
  border-radius: var(--h5-radius);
}

/* ── 10. Selos, chips e status ─────────────────────────────────────────────
   O painel tem verde/cinza cravados no HTML pensando no fundo escuro. Sobre
   branco eles somem — aqui voltam com a paleta funcional do H5.            */
html[data-theme="light"] .chip {
  background: var(--h5-orange-1);
  color: var(--orange);
  border-color: var(--h5-orange-2);
}
html[data-theme="light"] .badge-reg { background: var(--h5-fill); color: var(--muted); }

html[data-theme="light"] .mgr-card .status-tag.on {
  background: rgba(15, 123, 58, .10);
  color: var(--green);
  border-color: rgba(15, 123, 58, .25);
}
html[data-theme="light"] .mgr-card .status-tag.on::before {
  background: var(--green);
  box-shadow: none;
}
html[data-theme="light"] .mgr-card .status-tag.off {
  background: var(--h5-fill);
  color: var(--muted);
  border-color: var(--h5-border-soft);
}
html[data-theme="light"] .machines-chip .mc-pct {
  background: rgba(15, 123, 58, .10);
  color: var(--green);
}

/* ── 11. Chat flutuante ────────────────────────────────────────────────────
   Fica fixo na tela o tempo todo: sombra e gradiente pensados para o fundo
   escuro pesam demais sobre branco.                                        */
html[data-theme="light"] .chat-fab {
  background: var(--orange);
  box-shadow: 0 8px 20px var(--h5-orange-4);
}
html[data-theme="light"] .chat-fab:hover { box-shadow: 0 12px 26px var(--h5-orange-4); }
html[data-theme="light"] .chat-panel {
  border: 1px solid var(--h5-border-soft);
  border-radius: var(--h5-radius) var(--h5-radius) 0 0;
  box-shadow: var(--h5-shadow-panel);
}
html[data-theme="light"] .chat-header { background: var(--card2); }
html[data-theme="light"] .chat-header .ch-back:hover { background: var(--h5-orange-1); }

/* ── 12. Tela de login — fora do alcance desta camada ──────────────────────
   `#loginScreen` tem `background:#050607` cravado no HTML: é escura em
   qualquer tema, por decisão de quem a desenhou (foto do Rio + painel preto).
   Suas classes `.lp1-*`/`.lp2-*` têm `color:#fff` fixo, então clarear os
   tokens ali apagaria os nomes dos perfis. As variáveis são herdadas — logo
   devolver os valores escuros no container devolve a tela inteira ao original.
   Se um dia o login for para o H5, é aqui que se apaga.                     */
html[data-theme="light"] #loginScreen {
  --bg:     #050607;
  --bg2:    #0c0e11;
  --card:   #11141a;
  --card2:  #161a22;
  --border: #22262e;
  --text:   #e9edf3;
  --muted:  #7d8694;
  --orange: #ff6b00;
  --orange2:#ffa15a;
  --green:  #22c55e;
  --red:    #ef4444;
  --yellow: #eab308;
  --blue:   #3b82f6;
  --shadow: 0 10px 24px rgba(0, 0, 0, .3);
  font-family: "Inter", -apple-system, system-ui, sans-serif;
}