/* ═══════════════════════════════════════════════════
   THEME.CSS — CicloJus dark / light mode
   ═══════════════════════════════════════════════════ */

/* ── Light mode extras ───────────────────────────── */
:root {
  --card-hover: #F5F7FA;
}

/* ── Smooth theme transitions ───────────────────── */
body, .sidebar, .topbar, .card, .launcher-card, .stat-chip,
.hero, .nav-item, .nav-icon, .activity-item, .credits-badge,
.notif-btn, .hamburger, .sticky-add-btn, .quick-btn,
.btn-ghost, .btn-primary, .msg-bubble, .input-area,
.agent-card, .calc-card, .result-box, .filter-chip,
.search-bar, .juri-card, .history-item, .modal-box,
.launcher-icon, .stat-icon {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.2s  ease,
    box-shadow       0.25s ease !important;
}

/* ══════════════════════════════════════════════════
   DARK MODE VARIABLES
   ══════════════════════════════════════════════════ */

/* BACKUP — tema azul-marinho anterior (2026-04-03):
   --sidebar-bg: #0D1321  --page-bg: #0F1520
   --card-bg:    #161E2E  --card-hover: #1C2740  --input-bg: #1A2236
*/

[data-theme="dark"] {
  --primary:        #4ECDC4 !important;
  --primary-light:  #6EDDD8 !important;
  --primary-dim:    #2D7D8A !important;
  --sidebar-bg:     #151820 !important;
  --page-bg:        #0F1117 !important;
  --card-bg:        #1A1D27 !important;
  --card-hover:     #21253A !important;
  --input-bg:       #22263A !important;
  --text-title:     #E8EDF5 !important;
  --text-secondary: #A8B5C8 !important;
  --text-label:     #5C6E85 !important;
  --text-disabled:  #3A4860 !important;
  --border:         rgba(255,255,255,0.07) !important;
  --border-focus:   #4ECDC4 !important;
  --success:        #4DB896 !important;
  --error:          #E05C6A !important;
  --info:           #5B9CF6 !important;
  --warning:        #F0A04B !important;
  --gradient:       linear-gradient(135deg, #2D7D8A 0%, #4ECDC4 100%) !important;
  --shadow-subtle:  0 2px 12px rgba(0,0,0,0.35) !important;
  --shadow-medium:  0 4px 24px rgba(0,0,0,0.45) !important;
  --shadow-btn:     0 4px 20px rgba(78,205,196,0.06) !important;
}

/* ══════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .sidebar        { border-right-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .sidebar-logo   { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .sidebar-footer { border-top-color:   rgba(255,255,255,0.05); }

/* Nav active — tint em vez de sólido */
[data-theme="dark"] .nav-item.active           { background: rgba(78,205,196,0.12); color: var(--primary); }
[data-theme="dark"] .nav-item.active .nav-icon { background: rgba(78,205,196,0.2);  color: var(--primary); }
[data-theme="dark"] .nav-item:hover  .nav-icon { background: rgba(78,205,196,0.12); color: var(--primary); }

/* ══════════════════════════════════════════════════
   LAUNCHER CARD HIGHLIGHT (nova consulta)
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .launcher-card.highlight { box-shadow: none !important; }
[data-theme="dark"] .m-highlight-card        { box-shadow: none !important; }

/* ══════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .topbar    { background: var(--sidebar-bg); border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .notif-dot { border-color: var(--sidebar-bg); }

/* Credits badge (topbar) */
[data-theme="dark"] .credits-badge        { background: #22263A !important; border-color: rgba(255,255,255,0.07) !important; color: #A8B5C8 !important; }
[data-theme="dark"] .credits-badge strong { color: #4ECDC4 !important; }

/* ══════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #1A3A4A 0%, #1E4D5A 100%);
  border: 1px solid rgba(78,205,196,0.15);
  position: relative;
  overflow: hidden;
}
/* Glow radial no canto superior direito */
[data-theme="dark"] .hero::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(78,205,196,0.12) 0%, transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .hero-eyebrow      { color: rgba(78,205,196,0.65); }
[data-theme="dark"] .hero-greeting     { color: var(--text-title); }
[data-theme="dark"] .hero-sub          { color: var(--text-secondary); }
[data-theme="dark"] .hero-date strong  { color: var(--text-title); }
[data-theme="dark"] .hero-date span    { color: var(--text-label); }
[data-theme="dark"] .hero-action       { background: var(--gradient); color: white; box-shadow: var(--shadow-btn); }
[data-theme="dark"] .hero-action:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(78,205,196,0.19); }

/* ══════════════════════════════════════════════════
   LAUNCHER CARDS
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .launcher-card:not(.highlight):hover {
  border-color: rgba(78,205,196,0.25);
  background: var(--card-hover);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}

/* Forçar ícones dos launcher cards para teal no dark
   (sobrescreve inline styles rgba(45,125,138,...))   */
[data-theme="dark"] .launcher-card:not(.highlight) .launcher-icon {
  background: rgba(78,205,196,0.1) !important;
  color: var(--primary) !important;
}
/* Ícones com cor específica por feature (posição no grid) */
[data-theme="dark"] .launcher-card:nth-child(3) .launcher-icon { color: var(--success) !important; background: rgba(77,184,150,0.12)  !important; }
[data-theme="dark"] .launcher-card:nth-child(4) .launcher-icon { color: var(--info)    !important; background: rgba(91,156,246,0.12)  !important; }
[data-theme="dark"] .launcher-card:nth-child(5) .launcher-icon { color: var(--warning) !important; background: rgba(240,160,75,0.12)  !important; }
[data-theme="dark"] .launcher-card:nth-child(6) .launcher-icon { color: #A78BFA        !important; background: rgba(139,92,246,0.12)  !important; }

/* ══════════════════════════════════════════════════
   STATS STRIP
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .stat-chip:hover {
  border-color: rgba(78,205,196,0.2);
  background: var(--card-hover);
}
[data-theme="dark"] .stat-icon.teal   { background: rgba(78,205,196,0.12); color: var(--primary); }
[data-theme="dark"] .stat-icon.green  { background: rgba(77,184,150,0.12); color: var(--success); }
[data-theme="dark"] .stat-icon.blue   { background: rgba(91,156,246,0.12); color: var(--info);    }
[data-theme="dark"] .stat-icon.orange { background: rgba(240,160,75,0.12); color: var(--warning); }

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .btn-primary {
  background: #4ECDC4;
  border-color: transparent;
  color: #0F1117;
  box-shadow: none;
}
[data-theme="dark"] .btn-primary:hover { background: #3ebdb4; }

/* Pills */
[data-theme="dark"] .pill-area   { background: rgba(45,125,138,.18) !important; color: #4ECDC4 !important; }
[data-theme="dark"] .pill-ativo  { background: rgba(26,158,106,.15) !important; color: #4ADE80 !important; }

/* Progress / honor bars */
[data-theme="dark"] .fin-bar     { background: #4ECDC4 !important; }

/* ch-action (+ Nova, Ver todas, etc.) — muted no dark igual ao redesign */
[data-theme="dark"] .ch-action   { color: var(--primary-dim); }
[data-theme="dark"] .ch-action:hover { background: rgba(78,205,196,0.06); color: var(--primary); }

[data-theme="dark"] .btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(78,205,196,0.06);
}

/* ══════════════════════════════════════════════════
   CHAT
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .msg-bubble.user { background: var(--gradient); }
[data-theme="dark"] .msg-bubble.bot  { background: var(--card-bg); border-color: var(--border); }

/* ══════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════ */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A3A55; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════ */
.theme-toggle {
  display: flex; align-items: center;
  height: 32px; border-radius: 99px;
  padding: 0 6px 0 10px;
  gap: 8px;
  border: 1.5px solid #d0d5dd;
  background: #f5f5f5;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #344054;
  opacity: 0.45;
  flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.theme-toggle:hover { border-color: #b0b7c3; opacity: 1; }
.theme-toggle .toggle-knob {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid #d0d5dd;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
[data-theme="dark"] .theme-toggle {
  background: #1a1a1a;
  border-color: #333;
  color: #e0e0e0;
  flex-direction: row-reverse;
  padding: 0 10px 0 6px;
}
[data-theme="dark"] .theme-toggle .toggle-knob {
  background: #2a2a2a;
  border-color: #444;
}

/* ══════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ══════════════════════════════════════════════════ */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.20);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  color: white;
  opacity: 0.6;
}
.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37,211,102,0.30);
  opacity: 1;
}
.whatsapp-fab:active { transform: scale(0.96); }

/* Tooltip ao lado */
.whatsapp-fab::before {
  content: 'Falar no WhatsApp';
  position: absolute;
  right: 58px;
  background: rgba(30,42,56,0.88);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.whatsapp-fab:hover::before { opacity: 1; }

/* Toggle pill — visibilidade das labels e ícones */
.theme-toggle .toggle-label-dark  { display: none; }
.theme-toggle .toggle-label-light { display: block; }
[data-theme="dark"] .theme-toggle .toggle-label-light { display: none; }
[data-theme="dark"] .theme-toggle .toggle-label-dark  { display: block; }

/* Ícone dentro do knob */
.theme-toggle .icon-sun  { display: none;  }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none;  }

/* Fallback m-topbar-btn (mobile) */
.m-topbar-btn .icon-sun  { display: none;  }
.m-topbar-btn .icon-moon { display: block; }
[data-theme="dark"] .m-topbar-btn .icon-sun  { display: block; }
[data-theme="dark"] .m-topbar-btn .icon-moon { display: none;  }

/* ══════════════════════════════════════════════════
   GLOBAL FOCUS RINGS & CURSOR POINTER
   ══════════════════════════════════════════════════ */

/* Remove ugly default and apply consistent ring */
*:focus { outline: none; }
*:focus-visible {
  outline: 2.5px solid #6EC6C6;
  outline-offset: 2px;
}
[data-theme="dark"] *:focus-visible { outline-color: #4ECDC4; }

/* Interactive elements always show pointer */
button, [role="button"], select, label[for],
.nav-item, .launcher-card, .agent-card, .result-card,
.filter-tab, .filter-chip, .chip, .icon-btn,
.activity-item, .hist-item, .juri-card, .calc-card,
.sticky-add-btn, .sticky-del, .attach-btn, .send-btn,
.btn-primary, .btn-ghost, .btn-filter, .btn-search,
.btn-consult, .btn-expand, .sort-btn, .page-btn,
.theme-toggle, .notif-btn, .hamburger, .back-btn,
.quick-btn, .hero-action, .saved-card, .view-toggle-btn {
  cursor: pointer;
}

/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], textarea, select {
  cursor: text;
}
select { cursor: pointer; }

/* ══════════════════════════════════════════════════
   SKELETON LOADER (global)
   ══════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--border, #E8ECF0) 25%, var(--page-bg, #F0F2F5) 50%, var(--border, #E8ECF0) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
}
@keyframes skeletonPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════
   EMPTY STATE (global)
   ══════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 20px; text-align: center; gap: 8px;
}
.empty-state svg { color: var(--text-disabled); opacity: 0.45; }
.empty-state-title { font-size: 14px; font-weight: 700; color: var(--text-label); }
.empty-state-sub   { font-size: 12px; color: var(--text-disabled); }

/* ══════════════════════════════════════════════════
   SMOOTH HOVER — cards clickáveis
   ══════════════════════════════════════════════════ */
.launcher-card:not(.highlight):hover,
.calc-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-focus, #6EC6C6);
  box-shadow: 0 8px 24px rgba(45,125,138,0.10);
}