/* ─── HSE Pro Enterprise — Custom Styles ──────────────────────────────── */

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Risk Matrix cells */
.risk-cell {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem; cursor: pointer;
  transition: all 0.15s; border-radius: 6px;
}
.risk-cell:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.risk-low    { background: #dcfce7; color: #166534; }
.risk-medium { background: #fef9c3; color: #854d0e; }
.risk-high   { background: #fed7aa; color: #9a3412; }
.risk-critical { background: #fee2e2; color: #991b1b; }
.dark .risk-low    { background: #14532d; color: #86efac; }
.dark .risk-medium { background: #713f12; color: #fde68a; }
.dark .risk-high   { background: #7c2d12; color: #fdba74; }
.dark .risk-critical { background: #7f1d1d; color: #fca5a5; }

/* Stat cards gradient borders */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.stat-card.blue::before   { background: linear-gradient(90deg,#3b82f6,#6366f1); }
.stat-card.green::before  { background: linear-gradient(90deg,#10b981,#34d399); }
.stat-card.yellow::before { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.stat-card.red::before    { background: linear-gradient(90deg,#ef4444,#f97316); }
.stat-card.purple::before { background: linear-gradient(90deg,#8b5cf6,#a78bfa); }
.stat-card.teal::before   { background: linear-gradient(90deg,#14b8a6,#2dd4bf); }

/* Kanban workflow badge */
.workflow-step { position: relative; }
.workflow-step::after {
  content: '→';
  position: absolute; right: -12px; top: 50%;
  transform: translateY(-50%);
  color: #94a3b8; font-size: 14px;
}
.workflow-step:last-child::after { display: none; }

/* Table hover rows */
tbody tr { transition: background-color 0.1s; }
tbody tr:hover { background-color: rgba(59,130,246,0.04); }
.dark tbody tr:hover { background-color: rgba(59,130,246,0.08); }

/* Chart container */
.chart-container { position: relative; }

/* Compliance bar */
.compliance-bar { height: 8px; border-radius: 4px; overflow: hidden; background: #e2e8f0; }
.dark .compliance-bar { background: #334155; }
.compliance-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

/* Modal backdrop */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
}

/* Observation cards */
.obs-card {
  transition: all 0.2s;
  border-left: 4px solid transparent;
}
.obs-card.positive   { border-left-color: #10b981; }
.obs-card.unsafe-act { border-left-color: #ef4444; }
.obs-card.unsafe-cond{ border-left-color: #f59e0b; }
.obs-card.near-miss  { border-left-color: #3b82f6; }

/* Print styles */
@media print {
  #sidebar, #topbar, .no-print { display: none !important; }
  #mainContent { margin-left: 0 !important; padding-top: 0 !important; }
}

/* Smooth transitions for dark mode */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
/* Override transition for transforms/opacity (avoid lag on animations) */
.transition-all, [style*="transition"] { transition: all 0.3s; }

/* PTW Workflow Timeline */
.ptw-step {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem; font-weight: 600;
}
.ptw-step.done    { background: #dcfce7; color: #166534; }
.ptw-step.current { background: #dbeafe; color: #1d4ed8; }
.ptw-step.pending { background: #f1f5f9; color: #94a3b8; }
.dark .ptw-step.done    { background: #14532d; color: #86efac; }
.dark .ptw-step.current { background: #1e3a5f; color: #93c5fd; }
.dark .ptw-step.pending { background: #1e293b; color: #64748b; }

/* 5-Why boxes */
.why-box {
  border: 2px solid #e2e8f0;
  border-radius: 10px; padding: 14px;
  background: white;
  transition: border-color 0.2s;
}
.dark .why-box { background: #1e293b; border-color: #334155; }
.why-box:focus-within { border-color: #3b82f6; }
.why-number {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg,#3b82f6,#6366f1);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
}

/* Loading spinner */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Audit finding colors */
.finding-major    { background:#fee2e2; color:#991b1b; border-left:3px solid #ef4444; }
.finding-minor    { background:#fef9c3; color:#854d0e; border-left:3px solid #eab308; }
.finding-obs      { background:#dbeafe; color:#1d4ed8; border-left:3px solid #3b82f6; }
.finding-positive { background:#dcfce7; color:#166534; border-left:3px solid #10b981; }

/* Document type icons */
.doc-pdf    { background:#fee2e2; color:#ef4444; }
.doc-word   { background:#dbeafe; color:#3b82f6; }
.doc-excel  { background:#dcfce7; color:#10b981; }
.doc-image  { background:#f3e8ff; color:#8b5cf6; }
.doc-other  { background:#f1f5f9; color:#64748b; }