/* assets/css/custom.css
   Plain CSS only — @apply classes are in <style type="text/tailwindcss"> in header.php */

/* ── Sidebar scrollbar ── */
#sidebar nav::-webkit-scrollbar       { width: 3px; }
#sidebar nav::-webkit-scrollbar-track { background: transparent; }
#sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }

/* ── Page header green left stripe ── */
.page-header { position: relative; }
.page-header::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(to bottom, #16a34a, #166534);
  border-radius: 2px;
}

/* ── Toast animation ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast { animation: toastIn .22s cubic-bezier(.175,.885,.32,1.275) both; }

/* ── Fade-up animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up   { animation: fadeUp .3s ease both; }
.animate-fade-up-2 { animation: fadeUp .3s .08s ease both; }
.animate-fade-up-3 { animation: fadeUp .3s .16s ease both; }

/* ── Slide down (dropdowns) ── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-down { animation: slideDown .18s ease both; }

/* data-table th.text-center is overridden by .data-table thead th specificity — this restores it */
.data-table thead th.text-center { text-align: center; }

/* ── Print styles ── */
@media print {
  #sidebar, header, #toast-container, #confirm-modal,
  .no-print { display: none !important; }
  #app { display: block !important; }
  main { overflow: visible !important; padding: 0 !important; }
  .print-section { page-break-inside: avoid; }
}

/* ── Global dark mode mapping for existing Tailwind classes ── */
html.dark,
html.dark body {
  background-color: #0b1220;
  color: #d1d5db;
}

html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-50\/80,
html.dark .bg-gray-50\/60,
html.dark .bg-gray-50\/50 {
  background-color: #111827 !important;
}

html.dark input.bg-white,
html.dark textarea.bg-white,
html.dark select.bg-white {
  background-color: #1e293b !important;
  color: #f3f4f6 !important;
  border-color: #334155 !important;
}

html.dark input.bg-white::placeholder,
html.dark textarea.bg-white::placeholder {
  color: #94a3b8 !important;
}

html.dark .bg-gray-100,
html.dark .bg-gray-100\/80,
html.dark .bg-gray-100\/70,
html.dark .bg-gray-100\/60,
html.dark .bg-gray-100\/50,
html.dark .bg-primary-50,
html.dark .bg-emerald-50,
html.dark .bg-blue-50,
html.dark .bg-red-50,
html.dark .bg-amber-50,
html.dark .bg-sky-50 {
  background-color: #1f2937 !important;
}

/* bg-gray-200/300 aren't remapped above, but text-gray-500/600 IS forced
   light in dark mode below — without this, disabled buttons (bg-gray-300 +
   text-gray-600, e.g. "Save Profile"/"Update Password") render light text on
   a light background and become unreadable. */
html.dark .bg-gray-200,
html.dark .bg-gray-300 {
  background-color: #334155 !important;
}

html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-primary-200,
html.dark .border-blue-200,
html.dark .border-red-200,
html.dark .border-amber-200,
html.dark .border-emerald-200 {
  border-color: #334155 !important;
}

html.dark .ring-white,
html.dark .ring-black\/5 {
  --tw-ring-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
  color: #f3f4f6 !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #cbd5e1 !important;
}

html.dark .text-primary-700 {
  color: #86efac !important;
}

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-primary-50:hover,
html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-primary-100:hover {
  background-color: #334155 !important;
}

html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-600:hover {
  color: #f8fafc !important;
}

html.dark .from-white,
html.dark .via-white,
html.dark .to-white,
html.dark .to-emerald-50\/50,
html.dark .from-gray-50,
html.dark .to-green-50\/60 {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html.dark .shadow-sm,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
  --tw-shadow-color: rgba(2, 6, 23, 0.7);
  --tw-shadow: 0 12px 32px -14px var(--tw-shadow-color) !important;
}

html.dark .page-header::before {
  background: linear-gradient(to bottom, #22c55e, #14532d);
}

/* Sidebar dark pass: preserve role menus while switching palette from green to slate */
html.dark #sidebar {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

html.dark #sidebar [class*="text-green-300"] {
  color: #94a3b8 !important;
}

html.dark #sidebar [class*="text-green-200"] {
  color: #cbd5e1 !important;
}

html.dark #sidebar [class*="text-green-100"] {
  color: #cbd5e1 !important;
}

html.dark #sidebar .bg-green-500\/40 {
  background-color: rgba(16, 185, 129, 0.22) !important;
}

html.dark #sidebar .hover\:bg-white\/\[\.10\]:hover {
  background-color: rgba(51, 65, 85, 0.85) !important;
}

html.dark #sidebar .border-white\/\[\.06\],
html.dark #sidebar .border-white\/\[\.12\] {
  border-color: #334155 !important;
}

/* Chart containers and common SVG chart text in dark mode */
html.dark .chart-card,
html.dark .chart-container,
html.dark [id*="chart"],
html.dark [class*="chart"] {
  background-color: #0f172a;
  border-color: #334155;
}

html.dark .apexcharts-text,
html.dark .apexcharts-legend-text,
html.dark .apexcharts-xaxis-label,
html.dark .apexcharts-yaxis-label {
  fill: #cbd5e1 !important;
}