@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* Variáveis de cores personalizadas */
:root {
  --primary-50: #fbf8ff;
  --primary-100: #f5edff;
  --primary-200: #ecd7ff;
  --primary-300: #e0bffc;
  --primary-400: #d4a7fa;
  --primary-500: #c68ff8;
  --primary-600: #b070f1;
  --primary-700: #9a53e8;
  --primary-800: #8436df;
  --primary-900: #6f1bd6;

  --financeiro-100: #e0f2fe;
  --financeiro-500: #0ea5e9;
  --financeiro-700: #0369a1;

  --cadastro-100: #dcfce7;
  --cadastro-500: #22c55e;
  --cadastro-700: #15803d;

  --relatorio-100: #fef9c3;
  --relatorio-500: #eab308;
  --relatorio-700: #a16207;

  --perigo-100: #fee2e2;
  --perigo-500: #ef4444;
  --perigo-700: #b91c1c;

  --texto-padrao: #374151;
  --cinza-claro: #f3f4f6;
  --borda-padrao: #d1d5db;
  --fundo-pagina: #f9fafb;
}

.dark {
  --primary-50: #2e1065;
  --primary-100: #3b0d7e;
  --primary-200: #4c1d95;
  --primary-300: #6d28d9;
  --primary-400: #7c3aed;
  --primary-500: #8b5cf6;
  --primary-600: #a78bfa;
  --primary-700: #c4b5fd;
  --primary-800: #ddd6fe;
  --primary-900: #ede9fe;

  --financeiro-100: #0c4a6e;
  --financeiro-500: #38bdf8;
  --financeiro-700: #7dd3fc;

  --cadastro-100: #14532d;
  --cadastro-500: #4ade80;
  --cadastro-700: #86efac;

  --relatorio-100: #713f12;
  --relatorio-500: #facc15;
  --relatorio-700: #fde047;

  --perigo-100: #7f1d1d;
  --perigo-500: #f87171;
  --perigo-700: #fca5a5;

  --texto-padrao: #e2e8f0;
  --cinza-claro: #1e293b;
  --borda-padrao: #475569;
  --fundo-pagina: #0f172a;
}

/* Base styles */
body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-padrao);
  background-color: var(--fundo-pagina);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Links */
a {
  color: var(--primary-600); /* Ajustado para um lilás um pouco mais escuro para links */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Buttons */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  background-color: var(--primary-500);
  color: white;
  border: 1px solid var(--primary-500);
}

.btn-primary:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-200); /* Ajustado para um lilás pastel para o foco */
}

.btn-secondary {
  background-color: white;
  color: var(--primary-600);
  border: 1px solid var(--primary-300); /* Ajustado para um lilás pastel para a borda */
}

.btn-secondary:hover {
  background-color: var(--primary-50); /* Ajustado para um lilás pastel muito claro */
  color: var(--primary-700);
  border-color: var(--primary-400); /* Ajustado para um lilás pastel */
}

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-200); /* Ajustado para um lilás pastel para o foco */
}

.btn-danger {
  background-color: var(--perigo-500);
  color: white;
  border: 1px solid var(--perigo-500);
}

.btn-danger:hover {
  background-color: var(--perigo-600);
  border-color: var(--perigo-600);
}

.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.dark .form-label {
  color: #cbd5e1;
}

.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

.dark .form-input {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-200); /* Ajustado para um lilás pastel para o foco */
}

/* Card wrapper */
.card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

/* Título das seções */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #4b5563;
}

/* Scroll */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fundo-pagina);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-300); /* Ajustado para um lilás pastel */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-400); /* Ajustado para um lilás pastel ligeiramente mais escuro */
}
.page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-heading);
}

.menu-item {
  color: var(--text-primary);
}

.dark .card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
}

.dark .section-title,
.dark .page-title {
  color: var(--text-heading);
}

.dark .menu-item {
  color: var(--text-primary);
}

.dark .btn-secondary {
  background-color: var(--bg-surface);
  color: var(--accent);
  border-color: var(--border-default);
}

.dark .btn-secondary:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-focus);
}

/* ─── Skeleton Loading ─── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-table-header,#f0f0f0) 25%, var(--border-light,#e0e0e0) 50%, var(--bg-table-header,#f0f0f0) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 0.375rem;
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-light);
}
.skeleton-line { height: 0.75rem; border-radius: 0.25rem; }
.skeleton-line.w-full { width: 100%; }
.skeleton-line.w-3\/4 { width: 75%; }
.skeleton-line.w-1\/2 { width: 50%; }
.skeleton-line.w-1\/4 { width: 25%; }
.skeleton-circle { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; }
.skeleton-bar { height: 0.375rem; border-radius: 0.1875rem; }
.skeleton-card { padding: 1rem; border: 1px solid var(--border-light); border-radius: 0.375rem; background: var(--bg-surface); }

/* ─── Toast Notifications ─── */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:0.5rem;max-width:400px}
.toast{display:flex;align-items:center;gap:0.75rem;padding:1rem 1.25rem;border-radius:0.5rem;color:#fff;font-weight:500;box-shadow:0 10px 25px rgba(0,0,0,0.15);animation:toast-in .3s ease-out;cursor:pointer;transition:transform .2s}
.toast:hover{transform:translateY(-2px)}
.toast-success{background:linear-gradient(135deg,#10b981,#059669)}
.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}
.toast-warning{background:linear-gradient(135deg,#f59e0b,#d97706)}
.toast-info{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.toast-icon{flex-shrink:0;width:1.25rem;height:1.25rem}
.toast-close{margin-left:auto;opacity:.7;cursor:pointer;background:none;border:none;color:#fff;padding:0;transition:opacity .2s}
.toast-close:hover{opacity:1}
@keyframes toast-in{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toast-out{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}

/* ─── Hover Card ─── */
.hover-card{position:relative;display:inline-block}
.hover-card-content{position:absolute;top:100%;left:0;background:var(--bg-surface,#fff);border:1px solid var(--border-default,#e5e7eb);border-radius:0.75rem;box-shadow:0 10px 25px rgba(0,0,0,0.1);padding:1rem;min-width:320px;max-width:400px;z-index:100;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-out;margin-top:0.5rem;pointer-events:none}
.hover-card:hover .hover-card-content{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.hover-card-content::before{content:'';position:absolute;top:-6px;left:20px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--border-default,#e5e7eb)}
.hover-card-content::after{content:'';position:absolute;top:-5px;left:21px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--bg-surface,#fff)}

/* ─── Filter Badges & Collapsible ─── */
.filter-badge{display:inline-flex;align-items:center;gap:0.375rem;background:var(--accent-bg,#eef2ff);color:var(--accent,#696cff);padding:0.25rem 0.625rem;border-radius:9999px;font-size:0.75rem;font-weight:500;transition:background .2s}
.filter-badge:hover{background:rgba(105,108,255,0.15)}
.filter-badge button{background:none;border:none;color:inherit;cursor:pointer;font-size:0.875rem;line-height:1;padding:0;opacity:.7;transition:opacity .2s}
.filter-badge button:hover{opacity:1}
.filters-collapse{transition:max-height .3s ease-out,opacity .3s ease-out;overflow:hidden}
.filters-collapse.collapsed{max-height:0!important;opacity:0}
.filters-collapse.expanded{max-height:600px;opacity:1}

/* ─── Timeline ─── */
.timeline{position:relative;padding-left:3rem;padding-bottom:1rem}
.timeline::before{content:'';position:absolute;left:0.75rem;top:0;bottom:0;width:2px;background:#e5e7eb}
.timeline-item{position:relative;margin-bottom:2rem}
.timeline-item:last-child{margin-bottom:0}
.timeline-icon{position:absolute;left:-3rem;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.875rem;color:#fff;font-weight:bold;box-shadow:0 2px 4px rgba(0,0,0,0.1);z-index:10;border:2px solid #fff}
.timeline-icon.create{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.timeline-icon.update{background:linear-gradient(135deg,#f59e0b,#d97706)}
.timeline-icon.delete{background:linear-gradient(135deg,#ef4444,#dc2626)}
.timeline-icon.complete{background:linear-gradient(135deg,#10b981,#059669)}
.timeline-icon.link{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.timeline-icon.default{background:linear-gradient(135deg,#6b7280,#4b5563)}
.timeline-content{background:#fff;border:1px solid #e5e7eb;border-radius:0.75rem;padding:1rem;box-shadow:0 1px 3px rgba(0,0,0,0.05);transition:box-shadow 0.2s}
.timeline-content:hover{box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.timeline-diff{font-family:'Courier New',monospace;font-size:0.75rem;background:#f9fafb;padding:0.5rem;border-radius:0.375rem;margin-top:0.5rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.timeline-diff .old{color:#dc2626;text-decoration:line-through}
.timeline-diff .new{color:#10b981;font-weight:500}
.timeline-diff .arrow{color:#6b7280;margin:0 0.5rem}

/* ─── Badge Tooltip ─── */
.badge-tooltip{position:relative;cursor:help;display:inline-block}
.badge-tooltip::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-0.5rem);background:#1f2937;color:#fff;padding:0.5rem 0.75rem;border-radius:0.5rem;font-size:0.75rem;line-height:1.4;white-space:pre-line;opacity:0;visibility:hidden;transition:all 0.2s ease-out;z-index:1000;margin-bottom:0.5rem;max-width:280px;box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.badge-tooltip::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1f2937;border-bottom:none;opacity:0;visibility:hidden;transition:all 0.2s ease-out;margin-bottom:-0.3rem;z-index:1001}
.badge-tooltip:hover::after,.badge-tooltip:hover::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.badge-status{display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:500}
.badge-status.pendente{background:#fef3c7;color:#92400e}
.badge-status.em-progresso{background:#dbeafe;color:#1e40af}
.badge-status.concluida{background:#d1fae5;color:#065f46}
.badge-status.excluida{background:#f3f4f6;color:#6b7280}
.badge-priority{display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:500}
.badge-priority.critica{background:#fee2e2;color:#991b1b}
.badge-priority.alta{background:#fed7aa;color:#9a3412}
.badge-priority.media{background:#fef3c7;color:#92400e}
.badge-priority.baixa{background:#d1fae5;color:#065f46}

/* ─── Progress Bar Animada ─── */
.progress-container{width:100%;background:#e5e7eb;border-radius:9999px;overflow:hidden;height:0.75rem;position:relative}
.progress-bar{height:100%;background:linear-gradient(90deg,#10b981,#059669);border-radius:9999px;width:0%;transition:width 1.5s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
.progress-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.progress-counter{font-size:1.5rem;font-weight:bold;color:#10b981;display:inline-block}
.progress-bar.low{background:linear-gradient(90deg,#ef4444,#dc2626)}
.progress-bar.medium{background:linear-gradient(90deg,#f59e0b,#d97706)}
.progress-bar.high{background:linear-gradient(90deg,#10b981,#059669)}
.progress-bar.complete{background:linear-gradient(90deg,#10b981,#34d399)}

/* ─── Drag and Drop ─── */
.acao-card{cursor:grab;transition:transform .2s,box-shadow .2s;user-select:none}
.acao-card:active{cursor:grabbing}
.acao-card.dragging{opacity:.5;background:#f3f4f6;transform:scale(1.02);box-shadow:0 8px 16px rgba(0,0,0,.1)}
.acao-card.drag-over{border-top:3px solid #3b82f6;transform:translateY(-4px)}
.drag-handle{cursor:grab;color:#9ca3af;transition:color .2s}
.drag-handle:hover{color:#6b7280}
.acao-card:active .drag-handle{color:#3b82f6}
.sortable-ghost{opacity:.3;background:#e5e7eb;border:2px dashed #9ca3af}
.save-toast{position:fixed;bottom:1rem;right:1rem;background:#059669;color:#fff;padding:0.75rem 1.25rem;border-radius:0.625rem;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;font-weight:500;opacity:0;transform:translateY(0.5rem);transition:opacity .3s,transform .3s;pointer-events:none;z-index:9999}
.save-toast.visible{opacity:1;transform:translateY(0)}

/* ─── Ordenação de Ações ─── */
.acao-ordem-controls{display:flex;align-items:center;gap:0.25rem}
.acao-ordem-btn{width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-default);border-radius:0.25rem;background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all 0.15s;font-size:0.75rem;line-height:1}
.acao-ordem-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.acao-ordem-btn:disabled{opacity:0.3;cursor:not-allowed}
.acao-ordem-input{width:3rem;text-align:center;font-size:0.75rem;font-weight:600;border:1px solid var(--border-default);border-radius:0.25rem;padding:0.1875rem 0.25rem;background:var(--bg-surface);color:var(--text-heading);transition:border-color 0.15s}
.acao-ordem-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(105,108,255,0.15)}
.dark .acao-ordem-btn{background:var(--bg-surface);border-color:var(--border-default);color:var(--text-secondary)}
.dark .acao-ordem-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.dark .acao-ordem-input{background:var(--bg-surface);border-color:var(--border-default);color:var(--text-heading)}