/* ═══════════════════════════════════════════════
   CheckNode Design System v2
═══════════════════════════════════════════════ */

[x-cloak] { display: none !important; }

/* ── Scroll ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Date picker ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }

/* ══════════════════════════════════
   KEYFRAMES
══════════════════════════════════ */

@keyframes neo-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(6,214,240,0.3); }
  50% { box-shadow: 0 0 22px rgba(6,214,240,0.65); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes counter-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glow-border {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}

@keyframes float-dot {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}

/* ══════════════════════════════════
   GLASS & CARDS
══════════════════════════════════ */

.glass {
  background: rgba(13,17,32,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.07);
}

/* KPI card com gradient border animado */
.kpi-card {
  position: relative;
  background: rgba(13,17,32,0.92);
  border-radius: 16px;
  overflow: visible;
  transition: transform 0.22s, box-shadow 0.22s;
}
.kpi-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(6,214,240,0.28), rgba(139,92,246,0.22), transparent 60%);
  z-index: -1;
  animation: glow-border 3.5s ease-in-out infinite;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(0,0,0,0.4);
}
.kpi-value {
  animation: counter-up 0.55s ease both;
}

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */

.btn-neo {
  background: linear-gradient(135deg, #06d6f0, #0ea5e9);
  color: #04060f;
  font-weight: 700;
  border-radius: 12px;
  transition: all 0.22s;
  box-shadow: 0 0 18px rgba(6,214,240,0.25);
}
.btn-neo:hover {
  box-shadow: 0 0 32px rgba(6,214,240,0.5);
  transform: translateY(-2px);
}
.btn-neo:active { transform: translateY(0); }

.btn-iris {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  transition: all 0.22s;
  box-shadow: 0 0 18px rgba(139,92,246,0.25);
}
.btn-iris:hover {
  box-shadow: 0 0 32px rgba(139,92,246,0.5);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.18s;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #e2e8f0;
}

/* ══════════════════════════════════
   SIDEBAR NAV
══════════════════════════════════ */

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  position: relative;
  text-decoration: none;
}
.nav-link:hover {
  background: rgba(255,255,255,0.055);
  color: #e2e8f0;
}
.nav-link.active {
  background: rgba(6,214,240,0.1);
  color: #06d6f0;
  box-shadow: inset 3px 0 0 #06d6f0;
}
.nav-link.active .nav-icon {
  color: #06d6f0;
  animation: neo-pulse 2.8s ease-in-out infinite;
}

/* Ícone do nav */
.nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), filter 0.25s, background 0.2s, color 0.2s;
  color: #64748b;
}
.nav-link:hover .nav-icon {
  transform: scale(1.16) rotate(5deg);
  filter: drop-shadow(0 0 5px rgba(6,214,240,0.5));
  background: rgba(6,214,240,0.1);
  color: #06d6f0;
}
.nav-link.active .nav-icon {
  background: rgba(6,214,240,0.18);
  color: #06d6f0;
}

/* Section headers */
.sidebar-section-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #334155;
}

/* Label/Marcadores items */
.label-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  transition: all 0.18s;
  text-decoration: none;
  position: relative;
}
.label-item:hover {
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
}
.label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s;
}
.label-item:hover .label-dot {
  transform: scale(1.5);
}
.label-count {
  font-size: 10px;
  color: #475569;
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: auto;
  transition: opacity 0.18s;
}
.label-item:hover .label-count { opacity: 0; }
.label-actions {
  position: absolute;
  right: 8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.18s;
}
.label-item:hover .label-actions { opacity: 1; }

/* ══════════════════════════════════
   KANBAN CARDS
══════════════════════════════════ */

.task-card {
  background: rgba(13,17,32,0.92);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.task-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: linear-gradient(90deg, transparent 0%, rgba(6,214,240,0.04) 50%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.task-card:hover {
  border-color: rgba(6,214,240,0.3);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(6,214,240,0.07);
  transform: translateY(-2px);
}
.task-card:hover::after {
  opacity: 1;
  animation: shimmer 1.8s ease infinite;
}

/* Kanban column container */
.kanban-col {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(9,14,28,0.6);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  min-height: 200px;
}
.kanban-col-active {
  border-color: rgba(6,214,240,0.45) !important;
  background: rgba(6,214,240,0.035) !important;
  box-shadow: inset 0 0 50px rgba(6,214,240,0.05), 0 0 0 1px rgba(6,214,240,0.15) !important;
}

/* Drag states */
.sortable-ghost {
  opacity: 0.12;
  transform: scale(0.96);
  border: 1px dashed rgba(6,214,240,0.45) !important;
  background: rgba(6,214,240,0.04) !important;
}
.sortable-drag {
  opacity: 0.96;
  transform: rotate(2.5deg) scale(1.05);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 32px rgba(6,214,240,0.28) !important;
  cursor: grabbing !important;
  z-index: 9999;
}
.sortable-chosen {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Column header floating dot */
.col-header-dot {
  animation: float-dot 2.5s ease-in-out infinite;
}

/* ── Priority badges ── */
.badge-urgente { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.badge-alta    { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.badge-media   { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
.badge-baixa   { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }

.border-urgente { border-left-color: #ef4444 !important; }
.border-alta    { border-left-color: #f59e0b !important; }
.border-media   { border-left-color: #6366f1 !important; }
.border-baixa   { border-left-color: #10b981 !important; }

/* ── Line clamp ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════
   FORM INPUTS
══════════════════════════════════ */

.input-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  color: #e2e8f0;
  transition: all 0.2s;
}
.input-dark:focus {
  outline: none;
  border-color: rgba(6,214,240,0.5);
  box-shadow: 0 0 0 3px rgba(6,214,240,0.08);
}
.input-dark::placeholder { color: #475569; }

/* ══════════════════════════════════
   MODALS
══════════════════════════════════ */

.modal-overlay {
  background: rgba(4,6,15,0.78);
  backdrop-filter: blur(8px);
}

/* ══════════════════════════════════
   PAGE HEADER
══════════════════════════════════ */

.page-header {
  background: linear-gradient(135deg, rgba(13,17,32,0.97) 0%, rgba(9,14,28,0.97) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
}

/* ══════════════════════════════════
   USER DROPDOWN (topbar)
══════════════════════════════════ */

.user-menu-dropdown {
  animation: slide-down 0.18s cubic-bezier(.4,0,.2,1);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #94a3b8;
  transition: all 0.16s;
  width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
}
.dropdown-item:hover {
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
}
.dropdown-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ══════════════════════════════════
   REPORTS
══════════════════════════════════ */

.progress-bar-track {
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #06d6f0, #8b5cf6);
  transition: width 0.9s cubic-bezier(.4,0,.2,1);
}

/* Status badges in reports */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}
.status-todo     { background: rgba(6,214,240,0.1);   color: #06d6f0;  border: 1px solid rgba(6,214,240,0.25); }
.status-progress { background: rgba(245,158,11,0.1);  color: #fbbf24;  border: 1px solid rgba(245,158,11,0.25); }
.status-review   { background: rgba(139,92,246,0.1);  color: #a78bfa;  border: 1px solid rgba(139,92,246,0.25); }
.status-done     { background: rgba(16,185,129,0.1);  color: #34d399;  border: 1px solid rgba(16,185,129,0.25); }

/* ══════════════════════════════════
   TASK FLOW (Mermaid)
══════════════════════════════════ */

.flow-panel {
  background: rgba(9,14,28,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}

.mermaid-output {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mermaid-output svg {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ══════════════════════════════════
   STATUS COLUMN COLORS
══════════════════════════════════ */

.col-todo    { --col-color: #06d6f0; }
.col-prog    { --col-color: #f59e0b; }
.col-review  { --col-color: #8b5cf6; }
.col-done    { --col-color: #10b981; }

/* ══════════════════════════════════
   PRINT STYLES
══════════════════════════════════ */

@media print {
  aside, .no-print { display: none !important; }
  main { margin-left: 0 !important; }
  body { background: white !important; color: black !important; }
  .glass, .kpi-card, .task-card { background: white !important; border: 1px solid #ddd !important; box-shadow: none !important; }
  .text-slate-100, .text-slate-200, .text-slate-300 { color: #111 !important; }
  .text-slate-500, .text-slate-600 { color: #555 !important; }
}

/* ══════════════════════════════════
   TAILWIND SAFELIST (dynamic classes)
══════════════════════════════════ */

.bg-emerald-400,.bg-cyan-400,.bg-indigo-400,.bg-rose-400,.bg-amber-400,
.bg-violet-400,.bg-pink-400,.bg-sky-400,.bg-red-400,.bg-orange-400,
.bg-blue-400,.bg-green-400,
.text-emerald-400,.text-cyan-400,.text-indigo-400,.text-rose-400,
.text-amber-400,.text-violet-400,.text-pink-400,.text-sky-400,
.text-red-400,.text-orange-400,.text-blue-400,.text-green-400,
.text-emerald-300,.text-cyan-300,.text-indigo-300,.text-rose-300,
.text-amber-300,.text-violet-300,.text-pink-300,.text-sky-300,
.border-emerald-400,.border-cyan-400,.border-indigo-400,.border-rose-400,
.border-amber-400,.border-violet-400,.border-pink-400,.border-sky-400,
.border-red-400,.border-orange-400,.border-blue-400,.border-green-400,
.bg-emerald-500\/20,.bg-cyan-500\/20,.bg-indigo-500\/20,.bg-rose-500\/20,
.bg-amber-500\/20,.bg-violet-500\/20,.bg-pink-500\/20,.bg-sky-500\/20,
.bg-emerald-500\/25,.bg-cyan-500\/25,.bg-rose-500\/25,.bg-sky-500\/25,
.peer-checked\:bg-emerald-500\/25,.peer-checked\:bg-cyan-500\/25,
.peer-checked\:bg-rose-500\/25,.peer-checked\:bg-violet-500\/25,
.peer-checked\:bg-amber-500\/25,.peer-checked\:bg-pink-500\/25,
.peer-checked\:bg-sky-500\/25,.peer-checked\:bg-indigo-500\/25,
.peer-checked\:border-emerald-400,.peer-checked\:border-cyan-400,
.peer-checked\:border-rose-400,.peer-checked\:border-violet-400,
.peer-checked\:border-amber-400,.peer-checked\:border-pink-400,
.peer-checked\:border-sky-400,.peer-checked\:border-indigo-400,
.peer-checked\:text-emerald-300,.peer-checked\:text-cyan-300,
.peer-checked\:text-rose-300,.peer-checked\:text-violet-300,
.peer-checked\:text-amber-300,.peer-checked\:text-pink-300,
.peer-checked\:text-sky-300,.peer-checked\:text-indigo-300,
.text-neo,.bg-neo,.border-neo,
.text-iris,.bg-iris,.border-iris,
.bg-neo\/10,.bg-neo\/15,.bg-iris\/10,.bg-iris\/15,
.border-neo\/20,.border-neo\/30,.border-neo\/40,.border-neo\/50,.border-neo\/60,
.border-iris\/20,.border-iris\/30,.border-iris\/40,
.hover\:border-neo\/20:hover,.hover\:border-neo\/30:hover,.hover\:border-neo\/40:hover,
.hover\:text-neo:hover,.hover\:bg-neo\/10:hover,
.bg-emerald-400\/20,.bg-cyan-400\/20,.bg-indigo-400\/20,.bg-rose-400\/20,
.bg-amber-400\/20,.bg-violet-400\/20,.bg-pink-400\/20,.bg-sky-400\/20,
.border-emerald-500,.border-rose-500,.border-amber-500,.border-cyan-500,
.text-emerald-500,.text-rose-500,.text-amber-500,.text-cyan-500 {}