/* assets/css/global.css */

/* Orbitron — local (assets/fonts); wordmark do menu (.ca-brand-title) */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/Orbitron-Variable.ttf') format('truetype');
}

/* ── Tema OneFlow (defaults = light; sobrescritos por utils/theme.js) ───────── */
:root {
  --ca-shell-rgb: 255, 255, 255;
  --ca-shell-fg-rgb: 15, 23, 42;
  --ca-surface-rgb: 248, 250, 252;
  --ca-surface-fg-rgb: 15, 23, 42;
  --ca-elevated-rgb: 255, 255, 255;
  --ca-border-rgb: 226, 232, 240;
  --ca-muted-fg-rgb: 100, 116, 139;
  --ca-root-rgb: 241, 245, 249;
  --ca-font-size: 12px;
}

.of-text-base {
  font-size: var(--ca-font-size, 12px);
}

.ca-root { background-color: rgb(var(--ca-root-rgb)); color: rgb(var(--ca-surface-fg-rgb)); }
.ca-chrome { background-color: rgb(var(--ca-shell-rgb)); color: rgb(var(--ca-shell-fg-rgb)); }
.ca-chrome-fg { color: rgb(var(--ca-shell-fg-rgb)); }
.ca-surface { background-color: rgb(var(--ca-surface-rgb)); color: rgb(var(--ca-surface-fg-rgb)); }
.ca-surface-fg { color: rgb(var(--ca-surface-fg-rgb)); }
.ca-elevated { background-color: rgb(var(--ca-elevated-rgb)); color: rgb(var(--ca-surface-fg-rgb)); }
.ca-border { border-color: rgb(var(--ca-border-rgb)); }
.ca-muted { color: rgb(var(--ca-muted-fg-rgb)); }
.ca-divider { border-color: rgb(var(--ca-border-rgb)); }
.ca-row-hover:hover { background-color: rgba(var(--ca-shell-fg-rgb), 0.06); }
.ca-th-sticky {
  background-color: rgb(var(--ca-surface-rgb));
  color: rgb(var(--ca-muted-fg-rgb));
  box-shadow: inset 0 -1px 0 0 rgb(var(--ca-border-rgb));
}
.ca-nav-idle {
  color: rgb(var(--ca-shell-fg-rgb));
  opacity: 0.78;
}
.ca-nav-idle:hover {
  opacity: 1;
  background-color: rgba(var(--ca-shell-fg-rgb), 0.08);
}
.ca-nav-active {
  background-color: rgba(37, 99, 235, 0.14);
  color: rgb(29, 78, 216);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}
.ca-input {
  background-color: rgb(var(--ca-elevated-rgb));
  color: rgb(var(--ca-surface-fg-rgb));
  border-color: rgb(var(--ca-border-rgb));
}
.ca-input::placeholder {
  color: rgb(var(--ca-muted-fg-rgb));
  opacity: 0.9;
}

/* AutocompleteInput — tema OneFlow (vars --ca-*; dropdown no portal usa :root) */
.ca-autocomplete-input {
  background-color: rgb(var(--ca-elevated-rgb));
  color: rgb(var(--ca-surface-fg-rgb));
  border-color: rgb(var(--ca-border-rgb));
  padding: 0.625rem 0.875rem; /* py-2.5 px-3.5 — mais folga no campo */
}
.ca-autocomplete-input::placeholder {
  color: rgb(var(--ca-muted-fg-rgb));
  opacity: 0.9;
}
.ca-autocomplete-label {
  color: rgb(var(--ca-muted-fg-rgb));
}
.ca-autocomplete-dropdown {
  background-color: rgb(var(--ca-elevated-rgb));
  color: rgb(var(--ca-surface-fg-rgb));
  border-color: rgb(var(--ca-border-rgb));
}
.ca-autocomplete-option {
  color: rgb(var(--ca-surface-fg-rgb));
}
.ca-autocomplete-option:hover,
.ca-autocomplete-option.is-highlighted {
  background-color: rgba(var(--ca-shell-fg-rgb), 0.1);
}
.ca-badge-inactive {
  background-color: rgba(var(--ca-shell-fg-rgb), 0.08);
  color: rgb(var(--ca-muted-fg-rgb));
  box-shadow: inset 0 0 0 1px rgb(var(--ca-border-rgb));
}
.ca-badge-active {
  background-color: rgba(16, 185, 129, 0.15);
  color: rgb(4, 120, 87);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}

/* Wordmark do menu: degradê por tema (sem contorno / sem sombra) */
.ca-brand-title {
  font-style: normal;
  background-image: linear-gradient(to right, #1e293b, #1d4ed8, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  filter: none;
}

/* Dark / Blue: branco ↔ azul claro */
[data-shell-theme="dark"] .ca-brand-title,
[data-shell-theme="blue"] .ca-brand-title {
  background-image: linear-gradient(to right, #ffffff, #93c5fd, #38bdf8);
  filter: none;
}

/* Tema azul: textos e ícones do menu em branco (título .ca-brand-title mantém o degradê). */
[data-shell-theme="blue"] .ca-chrome,
[data-shell-theme="blue"] .ca-chrome .ca-muted,
[data-shell-theme="blue"] .ca-chrome .ca-nav-idle,
[data-shell-theme="blue"] .ca-chrome .ca-nav-active {
  color: #fff;
}
[data-shell-theme="blue"] .ca-chrome .ca-nav-idle {
  opacity: 0.92;
}
[data-shell-theme="blue"] .ca-chrome .ca-nav-idle:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.14);
}
[data-shell-theme="blue"] .ca-chrome .ca-nav-active {
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
[data-shell-theme="blue"] .ca-chrome .ca-muted {
  opacity: 0.85;
}
[data-shell-theme="blue"] .ca-chrome .ca-brand-title {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

[data-shell-theme="dark"] .ca-nav-active {
  background-color: rgba(96, 165, 250, 0.2);
  color: rgb(147, 197, 253);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
}
[data-shell-theme="dark"] .ca-badge-active {
  background-color: rgba(52, 211, 153, 0.18);
  color: rgb(167, 243, 208);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.4);
}
[data-shell-theme="dark"] .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}
[data-shell-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
[data-shell-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ── Scrollbar do menu lateral ─────────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

/* ── Bordas LED animadas para elementos de UI ───────────────────────────────── */

@keyframes led-flow-h {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

@keyframes led-flow-v {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

/* Borda direita — para o aside do menu (já tem position: fixed) */
.led-border-right::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(
    to bottom,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe, #bae6fd
  );
  background-size: 100% 300%;
  animation: led-flow-v 2.5s linear infinite;
  pointer-events: none;
}

/* Borda inferior — para divs estáticos (adiciona position: relative) */
.led-border-bottom {
  position: relative;
}
.led-border-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(
    to right,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe, #bae6fd
  );
  background-size: 300% 100%;
  animation: led-flow-h 2.5s linear infinite;
  pointer-events: none;
}

/* ── Animação de background gradiente (Olá, bem-vindo!) ────────────────── */
@keyframes background-gradient-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.animated-gradient-background {
  background: linear-gradient(to right,
    #2563eb 0%,
    #3b82f6 25%,
    #06b6d4 50%,
    #3b82f6 75%,
    #2563eb 100%
  );
  background-size: 400% auto;
  animation: background-gradient-flow 4s linear infinite;
}

/* ── Animação de slide-in para a faixa de boas-vindas ───────────────────────── */
@keyframes slide-in-from-right {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

.welcome-band-slide-in {
  animation: slide-in-from-right 1s ease-out forwards;
}

/* ── Controles do menu lateral (comprimir/expandir, desktop) ───────────────── */
@keyframes menu-aside-ctrl-fade {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.anim-menu-aside-ctrl {
  animation: menu-aside-ctrl-fade 0.25s ease-out;
}

/* Cartões e blocos de dashboard (entradas suaves) */
@keyframes fade-in-surface {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-in-surface {
  animation: fade-in-surface 0.45s ease-out forwards;
  opacity: 0;
}