/* ================================================================
   GesTrack — Design System v1.5.0
   Cores: Teal #14b8a6 / Azul Marinho #1e3a5f
   Temas: dark (padrão) | light | system
   ================================================================ */

/* ── Modo Escuro (padrão) ─────────────────────────────────── */
:root,
html.dark {
  --gt-teal:        #14b8a6;
  --gt-teal-light:  #2dd4bf;
  --gt-teal-dark:   #0d9488;
  --gt-navy:        #1e3a5f;
  --gt-navy-light:  #254d7a;
  --gt-navy-dark:   #142843;

  /* Backgrounds */
  --gt-bg:          #060e1a;
  --gt-surface:     #0c1929;
  --gt-surface2:    #112236;

  /* Borders */
  --gt-border:       #1a3352;
  --gt-border-light: #214269;

  /* Typography */
  --gt-text:        #e2e8f0;
  --gt-text-muted:  #7a99b8;
  --gt-text-dim:    #3a5a7a;

  /* Sidebar */
  --gt-sidebar-bg:  #0a1628;
  --gt-sidebar-bdr: #1a3352;

  /* Scrollbar */
  --gt-scroll-track: #030712;
  --gt-scroll-thumb: #1e3a5f;

  /* Modal backdrop */
  --gt-backdrop: rgba(6,14,26,0.85);

  /* Shadows */
  --gt-shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --gt-shadow-md:  0 8px 32px rgba(0,0,0,0.5);
  --gt-shadow-lg:  0 24px 80px rgba(0,0,0,0.6);

  /* Theme toggle */
  --gt-toggle-bg:   #112236;
  --gt-toggle-bdr:  #214269;
  --gt-toggle-text: #7a99b8;
}

/* ── Modo Claro ──────────────────────────────────────────── */
html[data-theme="light"],
html:not(.dark)[data-theme="light"] {
  --gt-teal:        #0d9488;
  --gt-teal-light:  #14b8a6;
  --gt-teal-dark:   #0f766e;
  --gt-navy:        #1e40af;
  --gt-navy-light:  #2563eb;
  --gt-navy-dark:   #1e3a8a;

  /* Backgrounds */
  --gt-bg:          #f1f5f9;
  --gt-surface:     #ffffff;
  --gt-surface2:    #f8fafc;

  /* Borders */
  --gt-border:       #e2e8f0;
  --gt-border-light: #cbd5e1;

  /* Typography */
  --gt-text:        #0f172a;
  --gt-text-muted:  #475569;
  --gt-text-dim:    #94a3b8;

  /* Sidebar */
  --gt-sidebar-bg:  #1e293b;
  --gt-sidebar-bdr: #334155;

  /* Scrollbar */
  --gt-scroll-track: #f1f5f9;
  --gt-scroll-thumb: #cbd5e1;

  /* Modal backdrop */
  --gt-backdrop: rgba(15,23,42,0.6);

  /* Shadows */
  --gt-shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --gt-shadow-md:  0 8px 32px rgba(0,0,0,0.12);
  --gt-shadow-lg:  0 24px 80px rgba(0,0,0,0.18);

  /* Theme toggle */
  --gt-toggle-bg:   #f1f5f9;
  --gt-toggle-bdr:  #cbd5e1;
  --gt-toggle-text: #64748b;
}

/* ── Body base (respeita tema) ───────────────────────────── */
body {
  background: var(--gt-bg) !important;
  color: var(--gt-text) !important;
  transition: background 0.25s ease, color 0.25s ease;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--gt-bg); }
::-webkit-scrollbar-thumb { background: var(--gt-border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gt-teal-dark); }

/* ── Utilitários GesTrack ── */
.gt-bg       { background: var(--gt-bg); }
.gt-surface  { background: var(--gt-surface); }
.gt-surface2 { background: var(--gt-surface2); }
.gt-border   { border-color: var(--gt-border); }
.gt-teal     { color: var(--gt-teal); }
.gt-navy     { color: var(--gt-navy); }

/* ── Card padrão ── */
.gt-card {
  background: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 16px;
  transition: all 0.2s ease;
}
.gt-card:hover {
  border-color: var(--gt-border-light);
  box-shadow: 0 8px 32px rgba(20, 184, 166, 0.08);
  transform: translateY(-2px);
}

/* ── Botão primário Teal ── */
.gt-btn-primary {
  background: linear-gradient(135deg, var(--gt-teal) 0%, var(--gt-teal-dark) 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 20px;
  transition: all 0.15s;
  border: none;
  cursor: pointer;
}
.gt-btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 20px rgba(20,184,166,0.4);
}
.gt-btn-secondary {
  background: var(--gt-surface2);
  border: 1px solid var(--gt-border-light);
  color: var(--gt-text);
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 20px;
  transition: all 0.15s;
  cursor: pointer;
}
.gt-btn-secondary:hover { background: var(--gt-navy); }

/* ── Input dark ── */
.gt-input {
  background: var(--gt-surface2);
  border: 1px solid var(--gt-border);
  color: var(--gt-text);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  width: 100%;
  transition: border-color 0.15s;
  outline: none;
}
.gt-input:focus { border-color: var(--gt-teal); box-shadow: 0 0 0 3px rgba(20,184,166,0.12); }
.gt-input::placeholder { color: var(--gt-text-dim); }
select.gt-input option { background: var(--gt-surface2); }

/* ── Badge status ── */
.gt-badge {
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-pending   { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.badge-transit   { background: rgba(20,184,166,0.15); color: var(--gt-teal-light); border: 1px solid rgba(20,184,166,0.3); }
.badge-done      { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.badge-cancel    { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.badge-stock     { background: rgba(20,184,166,0.12); color: var(--gt-teal); border: 1px solid rgba(20,184,166,0.25); }
.badge-installed { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
.badge-maint     { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.badge-active    { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
.badge-inactive  { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.badge-overdue   { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

/* ── Sidebar ── */
.gt-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: var(--gt-text-muted);
  transition: all 0.15s; text-decoration: none;
  margin-bottom: 2px;
}
.gt-sidebar-link:hover { background: var(--gt-surface2); color: var(--gt-text); }
.gt-sidebar-link.active {
  background: linear-gradient(135deg, rgba(20,184,166,0.2) 0%, rgba(20,184,166,0.05) 100%);
  color: var(--gt-teal-light);
  border: 1px solid rgba(20,184,166,0.2);
}
.gt-sidebar-link .icon { width: 20px; text-align: center; flex-shrink: 0; }

/* ── GesTrack Logo ── */
.gt-logo-pin {
  background: linear-gradient(135deg, var(--gt-teal) 0%, var(--gt-navy) 100%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Kanban ── */
.kanban-col {
  background: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: 14px;
  min-width: 280px;
  max-width: 300px;
  flex-shrink: 0;
}
.kanban-card {
  background: var(--gt-surface2);
  border: 1px solid var(--gt-border);
  border-radius: 10px;
  padding: 12px;
  cursor: grab;
  transition: all 0.15s;
  margin-bottom: 8px;
}
.kanban-card:hover {
  border-color: var(--gt-teal);
  box-shadow: 0 4px 16px rgba(20,184,166,0.12);
  transform: translateY(-2px);
}
.kanban-card:active { cursor: grabbing; opacity: 0.7; }
.kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }
.kanban-drop-zone {
  border: 2px dashed var(--gt-border);
  border-radius: 10px; min-height: 60px;
  transition: all 0.2s;
}
.kanban-drop-zone.drag-over {
  border-color: var(--gt-teal);
  background: rgba(20,184,166,0.06);
}

/* ── Modal ── */
.gt-modal-overlay {
  background: var(--gt-backdrop);
  backdrop-filter: blur(8px);
}
.gt-modal {
  background: var(--gt-surface);
  border: 1px solid var(--gt-border-light);
  border-radius: 20px;
  box-shadow: var(--gt-shadow-lg), 0 0 0 1px rgba(20,184,166,0.08);
}

/* ── Toast ── */
.gt-toast {
  background: var(--gt-surface);
  border: 1px solid var(--gt-border-light);
  border-radius: 12px;
  box-shadow: var(--gt-shadow-md);
}

/* ── Animações ── */
@keyframes gtFadeIn   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes gtSlideIn  { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
@keyframes gtPulse    { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.5); } 50% { box-shadow: 0 0 0 8px rgba(20,184,166,0); } }
@keyframes gtSpin     { to { transform: rotate(360deg); } }
@keyframes gtSuccess  { 0%{transform:scale(1)} 50%{transform:scale(1.06);box-shadow:0 0 40px rgba(20,184,166,0.4)} 100%{transform:scale(1)} }

.gt-fade-in   { animation: gtFadeIn  0.25s ease-out; }
.gt-slide-in  { animation: gtSlideIn 0.2s  ease-out; }
.gt-pulse     { animation: gtPulse   2s    infinite; }
.gt-spin      { animation: gtSpin    0.8s  linear infinite; }
.gt-success   { animation: gtSuccess 0.5s  ease-out; }

/* ── Progress ── */
.gt-progress-track { background: var(--gt-border); border-radius: 999px; overflow: hidden; }
.gt-progress-bar   { background: linear-gradient(90deg, var(--gt-teal) 0%, var(--gt-teal-light) 100%); border-radius: 999px; transition: width 0.8s ease-out; }

/* ── Table ── */
.gt-table thead tr { background: rgba(20,184,166,0.05); }
.gt-table th { color: var(--gt-text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 16px; }
.gt-table td { padding: 12px 16px; font-size: 13px; color: var(--gt-text); border-bottom: 1px solid var(--gt-border); }
.gt-table tbody tr:hover { background: rgba(20,184,166,0.03); }
.gt-table tbody tr:last-child td { border-bottom: none; }

/* ── Transições globais (tema) ── */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
/* Desativa transição em animações (evita conflito) */
.gt-spin, .gt-spin * { transition: none; }

/* ── ThemeToggle Button ──────────────────────────────────── */
.gt-theme-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gt-toggle-bg);
  border: 1px solid var(--gt-toggle-bdr);
  color: var(--gt-toggle-text);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.gt-theme-btn:hover {
  border-color: var(--gt-teal);
  color: var(--gt-teal);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}
.gt-theme-btn .fa-sun  { color: #fbbf24; }
.gt-theme-btn .fa-moon { color: #818cf8; }
.gt-theme-label { font-size: 11px; }

/* Variante: dentro da sidebar (antes do footer) */
.gt-theme-btn--sidebar {
  width: calc(100% - 24px);
  margin: 0 12px 8px;
  justify-content: center;
}

/* Variante: FAB (canto inferior direito, fallback) */
.gt-theme-btn--fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ── Adaptações Light Mode: Tailwind overrides ── */
/* Garante que classes hardcoded bg-gray-9xx respeitem o tema */
html[data-theme="light"] .bg-gray-950 { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-gray-900 { background-color: #1e293b !important; }
html[data-theme="light"] .bg-gray-800 { background-color: #334155 !important; }
html[data-theme="light"] .bg-gray-700 { background-color: #475569 !important; }
html[data-theme="light"] .text-gray-100{ color: #f1f5f9 !important; }
html[data-theme="light"] .text-white   { color: #f8fafc !important; }
html[data-theme="light"] .text-gray-400{ color: #94a3b8 !important; }
html[data-theme="light"] .text-gray-500{ color: #64748b !important; }
html[data-theme="light"] .border-gray-800{ border-color: #334155 !important; }

/* Sidebar permanece dark mesmo em light mode (melhor contraste) */
html[data-theme="light"] aside.fixed {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="light"] aside.fixed .text-gray-400 { color: #94a3b8 !important; }
html[data-theme="light"] aside.fixed .border-gray-800 { border-color: #334155 !important; }
html[data-theme="light"] aside.fixed .bg-gray-800 { background-color: #334155 !important; }

/* Área principal em light mode */
html[data-theme="light"] main {
  background-color: #f1f5f9 !important;
}

/* Cards e painéis em light mode */
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .gt-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Tabelas em light mode */
html[data-theme="light"] .gt-table th { color: #475569 !important; }
html[data-theme="light"] .gt-table td { color: #0f172a !important; border-bottom-color: #e2e8f0 !important; }
html[data-theme="light"] .gt-table thead tr { background: rgba(20,184,166,0.08) !important; }
html[data-theme="light"] .gt-table tbody tr:hover { background: rgba(20,184,166,0.04) !important; }

/* Inputs em light mode */
html[data-theme="light"] .gt-input,
html[data-theme="light"] input.gt-input,
html[data-theme="light"] select.gt-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .gt-input::placeholder { color: #94a3b8 !important; }

/* Botão secundário em light mode */
html[data-theme="light"] .gt-btn-secondary {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
html[data-theme="light"] .gt-btn-secondary:hover { background: #e2e8f0 !important; color: #0f172a !important; }

/* Modal em light mode */
html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .gt-modal-overlay {
  background: rgba(15,23,42,0.6) !important;
}
html[data-theme="light"] .modal-box,
html[data-theme="light"] .gt-modal {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Dropdown em light mode */
html[data-theme="light"] .dropdown-menu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
html[data-theme="light"] .dropdown-item { color: #475569 !important; }
html[data-theme="light"] .dropdown-item:hover { background: rgba(20,184,166,0.06) !important; color: #0f172a !important; }
html[data-theme="light"] .dropdown-sep { background: #e2e8f0 !important; }

/* Toast em light mode */
html[data-theme="light"] #toast .gt-toast,
html[data-theme="light"] .gt-toast {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Scrollbar em light mode */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9 !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }

/* Text hardcoded em light mode */
html[data-theme="light"] .text-gray-300 { color: #e2e8f0 !important; }
html[data-theme="light"] h1.text-white,
html[data-theme="light"] h2.text-white,
html[data-theme="light"] h3.text-white { color: #0f172a !important; }

/* Inline styles com cores hardcoded (override parcial) */
html[data-theme="light"] [style*="background:#0c1929"],
html[data-theme="light"] [style*="background: #0c1929"] { background: #ffffff !important; }
html[data-theme="light"] [style*="background:#0f172a"],
html[data-theme="light"] [style*="background: #0f172a"] { background: #f8fafc !important; }
html[data-theme="light"] [style*="background:#0f1623"],
html[data-theme="light"] [style*="background: #0f1623"] { background: #ffffff !important; }
html[data-theme="light"] [style*="color:#e2e8f0"] { color: #0f172a !important; }
html[data-theme="light"] [style*="color: #e2e8f0"] { color: #0f172a !important; }
html[data-theme="light"] [style*="color:#7a99b8"] { color: #475569 !important; }
html[data-theme="light"] [style*="color: #7a99b8"] { color: #475569 !important; }
html[data-theme="light"] [style*="color:#94a3b8"] { color: #64748b !important; }
html[data-theme="light"] [style*="border-color:#1e3a5f"] { border-color: #cbd5e1 !important; }

/* Painel lateral de detalhes (OS, Clientes etc) em light mode */
html[data-theme="light"] .bg-gray-800\/50,
html[data-theme="light"] [class*="bg-gray-800"] { background-color: #e2e8f0 !important; }

/* Row hover em light mode */
html[data-theme="light"] .row-hover:hover { background: rgba(20,184,166,0.04) !important; }