/* AIRP Overrides — Dark Mode + Form Normalization
   This file contains all un-layered CSS rules that override Tailwind utilities.
   It is loaded AFTER app.css so it has higher specificity. */

/* ── Hide number input spinners (up/down arrows) globally ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Missing Dark Mode Overrides ── */

html.dark .text-gray-900 { color: var(--vx-heading-color); }
html.dark .text-gray-800 { color: var(--vx-heading-color); }
html.dark .text-gray-700 { color: var(--vx-body-color); }
html.dark .text-gray-600 { color: var(--vx-body-color); }
html.dark .text-gray-500 { color: var(--vx-muted-color); }
html.dark .text-gray-400 { color: var(--vx-muted-color); }

html.dark .text-slate-900 { color: var(--vx-heading-color); }
html.dark .text-slate-800 { color: var(--vx-heading-color); }
html.dark .text-slate-700 { color: var(--vx-body-color); }
html.dark .text-slate-600 { color: var(--vx-body-color); }
html.dark .text-slate-500 { color: var(--vx-muted-color); }
html.dark .text-slate-400 { color: var(--vx-muted-color); }

html.dark .border-gray-200 { border-color: var(--vx-border-color); }
html.dark .border-gray-300 { border-color: var(--vx-border-color); }
html.dark .border-gray-100 { border-color: var(--vx-border-color); }
html.dark .border { border-color: var(--vx-border-color); }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--vx-border-color); }
html.dark .border-b { border-bottom-color: var(--vx-border-color); }
html.dark .border-t { border-top-color: var(--vx-border-color); }
html.dark .ring-black { --tw-ring-color: var(--vx-border-color); }

html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1); }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1); }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1); }
html.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.1); }
html.dark .bg-pink-50 { background-color: rgba(236, 72, 153, 0.1); }
html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.1); }
html.dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.1); }
html.dark .bg-primary-50 { background-color: rgba(14, 165, 233, 0.1); }
html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.1); }
html.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.1); }

html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15); }
html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.15); }
html.dark .bg-red-100 { background-color: rgba(255, 76, 81, 0.12); }
html.dark .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.15); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15); }
html.dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.15); }
html.dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.15); }
html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.15); }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15); }
html.dark .bg-purple-100 { background-color: rgba(139, 92, 246, 0.15); }
html.dark .bg-primary-100 { background-color: rgba(14, 165, 233, 0.15); }

html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-green-800 { color: #86efac; }
html.dark .text-red-800 { color: #ff9f9f; }
html.dark .text-yellow-800 { color: #fde68a; }
html.dark .text-amber-800 { color: #fde68a; }
html.dark .text-indigo-800 { color: #a5b4fc; }
html.dark .text-purple-800 { color: #c4b5fd; }

html.dark .text-blue-900 { color: #93c5fd; }
html.dark .text-red-900 { color: #ff9f9f; }
html.dark .text-purple-900 { color: #c4b5fd; }
html.dark .text-emerald-900 { color: #6ee7a0; }
html.dark .text-green-900 { color: #86efac; }
html.dark .text-amber-900 { color: #fde68a; }
html.dark .text-orange-900 { color: #ffb07a; }
html.dark .text-yellow-900 { color: #fde68a; }
html.dark .text-indigo-900 { color: #a5b4fc; }
html.dark .text-pink-900 { color: #f9a8d4; }
html.dark .text-teal-900 { color: #5eead4; }
html.dark .text-cyan-900 { color: #67e8f9; }

html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3); }
html.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.3); }
html.dark .border-red-200 { border-color: rgba(255, 76, 81, 0.2); }
html.dark .border-yellow-200 { border-color: rgba(245, 158, 11, 0.3); }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3); }
html.dark .border-primary-200 { border-color: rgba(14, 165, 233, 0.3); }
html.dark .border-primary-300 { border-color: rgba(14, 165, 233, 0.4); }
html.dark .border-cyan-200 { border-color: rgba(6, 182, 212, 0.3); }
html.dark .border-cyan-300 { border-color: rgba(6, 182, 212, 0.4); }
html.dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.3); }
html.dark .border-purple-200 { border-color: rgba(139, 92, 246, 0.3); }

html.dark .text-cyan-700 { color: #67e8f9; }
html.dark .text-cyan-800 { color: #67e8f9; }
html.dark .text-teal-700 { color: #5eead4; }
html.dark .text-primary-700 { color: #7dd3fc; }
html.dark .text-primary-800 { color: #7dd3fc; }
html.dark .text-primary-900 { color: #7dd3fc; }

html.dark .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,0.04); }
html.dark .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,0.04); }
html.dark .hover\:bg-gray-200:hover { background-color: rgba(255,255,255,0.04); }
html.dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.1); }
html.dark .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.15); }
html.dark .hover\:bg-red-50:hover { background-color: rgba(255, 76, 81, 0.1); }
html.dark .hover\:bg-red-100:hover { background-color: rgba(255, 76, 81, 0.15); }
html.dark .hover\:bg-green-50:hover { background-color: rgba(16, 185, 129, 0.1); }
html.dark .hover\:bg-green-100:hover { background-color: rgba(16, 185, 129, 0.15); }
html.dark .hover\:bg-primary-50:hover { background-color: rgba(14, 165, 233, 0.1); }
html.dark .hover\:bg-primary-100:hover { background-color: rgba(14, 165, 233, 0.15); }
html.dark .hover\:bg-yellow-50:hover { background-color: rgba(245, 158, 11, 0.1); }
html.dark .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.1); }
html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.1); }
html.dark .hover\:bg-cyan-50:hover { background-color: rgba(6, 182, 212, 0.1); }
html.dark .hover\:text-gray-700:hover { color: var(--vx-heading-color); }
html.dark .hover\:text-gray-900:hover { color: var(--vx-heading-color); }

/* bg-white / bg-gray-50 / bg-gray-100 → dark backgrounds */
html.dark .bg-white { background-color: var(--vx-card-bg); }
html.dark .bg-gray-50 { background-color: var(--vx-body-bg); }
html.dark .bg-gray-100 { background-color: rgba(255, 255, 255, 0.04); }

html.dark .placeholder-gray-400::placeholder { color: var(--vx-muted-color); }
html.dark .placeholder-gray-500::placeholder { color: var(--vx-muted-color); }

html.dark .bg-gray-500.bg-opacity-75,
html.dark .bg-gray-600.bg-opacity-75 {
  background-color: var(--vx-overlay-bg);
}

/* ── Form Normalization — Auto-fixes ALL old templates ── */

/* 1. Eliminate mt-1 gap between labels and inputs */
.form-label + .mt-1,
.form-label + input.mt-1,
.form-label + select.mt-1,
.form-label + textarea.mt-1,
.form-label + div.mt-1,
.form-label ~ .mt-1:first-of-type,
label.form-label + .mt-1 {
  margin-top: 2px;
}

/* 2. Force form-label.text-xs to use 13px */
.form-label.text-xs {
  font-size: 0.8125rem;
  line-height: 1.375;
}

/* 3. Force text-sm on inputs to be 13px */
input.text-sm, select.text-sm, textarea.text-sm {
  font-size: 0.8125rem;
}

/* 4. Tighter vertical spacing in form card bodies */
.form-card-body.space-y-4 > * + * { margin-top: 0; }
.form-card-body.space-y-6 > * + * { margin-top: 0; }
.card-body.space-y-6 > * + * { margin-top: 1rem; }
.card-body.space-y-4 > * + * { margin-top: 0.75rem; }

/* 5. Auto-style section dividers */
.form-card-body > div[class*="border-b"],
.form-card-body > .border-b,
.card-body > div[class*="border-b"] {
  border-color: var(--vx-border-color);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}

/* 6. Auto-style section headings */
.form-card-body > div > span.text-sm.font-medium,
.card-body > div > span.text-sm.font-medium,
.form-card-body > div > h4.font-medium,
.card-body > div > h4.font-medium {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vx-muted-color);
  margin-bottom: 0.75rem;
}

/* 7. Form-group zero margin inside grids */
.grid > .form-group.mb-0,
.grid > .form-group {
  margin-bottom: 0;
}

/* 8. Tighter grid gaps in forms */
.form-card-body .grid.gap-3, .card-body .grid.gap-3 {
  gap: 0.75rem; column-gap: 1rem;
}
.form-card-body .grid.gap-4, .card-body .grid.gap-4 {
  row-gap: 0.75rem; column-gap: 1rem;
}

/* 9. Bordered sections (Customer Details, etc.) */
.card-body > div.border.rounded-lg,
.form-card-body > div.border.rounded-lg {
  border-color: var(--vx-border-color);
  background-color: var(--vx-body-bg);
  padding: 1rem 1.25rem;
}

/* 10. Card body padding normalize */
.card > .card-body { padding: 1.25rem 1.5rem; }

/* 11. Card header normalize */
.card > .card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--vx-border-color);
}

/* 12. Line-item table headers */
.form-card-body .border-b.py-2, .card-body .border-b.py-2 {
  border-color: var(--vx-border-color);
}

/* 13. Compact form-card-body padding */
.form-card > .form-card-body, form.form-card > .form-card-body {
  padding: 1.25rem 1.5rem;
}

/* 14. Disabled input dark mode */
html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled {
  background-color: var(--vx-body-bg);
  color: var(--vx-muted-color);
  opacity: 0.7;
}

/* 15. Page-title sizing */
.page-title.text-xl { font-size: 1.25rem; }

/* 16. Breadcrumb nav styling */
nav.text-sm.text-gray-500, nav.text-xs { color: var(--vx-muted-color); }
nav.text-sm.text-gray-500 a, nav.text-xs a { color: var(--vx-muted-color); transition: color 0.15s; }
nav.text-sm.text-gray-500 a:hover, nav.text-xs a:hover { color: var(--vx-heading-color); }

/* 17. Normalize gap-6 grids in forms */
.card-body .grid.gap-6, .form-card-body .grid.gap-6 {
  row-gap: 0.75rem; column-gap: 1rem;
}

/* 18. Multi-card form stacking — tighter spacing */
form.space-y-6 > * + * { margin-top: 1.25rem; }

/* 19. Card-header section titles — consistent style */
.card > .card-header > h3, .card > .card-header > h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vx-heading-color);
  letter-spacing: -0.01em;
}

/* 20. Stacked card-based forms — section header */
form.space-y-6 > .card > .card-header { padding: 0.875rem 1.25rem; }

/* 21. Form card-body padding across all patterns */
form.space-y-6 > .card > .card-body, form > .card > .card-body { padding: 1.25rem; }

/* 22. Form footer buttons — consistent */
form .card-body + div.text-right,
form .card-body + .flex.justify-end,
form > .card:last-child .card-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--vx-border-color);
}

/* 23. Raw bg-white shadow rounded-lg → match card */
form > div.bg-white.shadow.rounded-lg,
form > div[class*="bg-white"][class*="shadow"][class*="rounded"],
form.bg-white.shadow.rounded-lg {
  background-color: var(--vx-card-bg);
  box-shadow: var(--vx-card-shadow);
}

/* 24. bg-gray-50 footer sections */
.bg-gray-50.rounded-b-lg, form .bg-gray-50.text-right,
form div[class*="bg-gray-50"][class*="rounded-b"] {
  background-color: var(--vx-body-bg);
  border-top: 1px solid var(--vx-border-color);
}

/* 25. Help text — consistent color */
.form-group .text-xs.text-gray-500, .form-group .text-xs.text-gray-400,
.form-group p.text-xs, .card-body p.text-xs {
  color: var(--vx-muted-color); margin-top: 0.25rem;
}

/* 26. Checkbox / radio labels */
.card-body label.text-sm, .form-card-body label.text-sm,
form label.text-sm:not(.form-label) {
  font-size: 0.8125rem; color: var(--vx-body-color);
}

/* 27. Sections inside card-body with font-medium headers */
.card-body > h4.font-medium, .card-body > h3.font-medium,
.card-body > div > h4.font-medium, .card-body > div > h3.font-medium {
  font-size: 0.8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--vx-muted-color); margin-bottom: 0.75rem;
}

/* 28. Bordered sub-sections (bg-gray-50) */
.card-body > div.bg-gray-50, .card-body > div.bg-gray-50.rounded-lg,
.form-card-body > div.bg-gray-50 {
  background-color: var(--vx-body-bg);
  border: 1px solid var(--vx-border-color);
  border-radius: 0.5rem; padding: 1rem 1.25rem;
}

/* 29. Flex-based footers */
form > div.flex.items-center.justify-end, form > div.flex.justify-end {
  padding-top: 1rem; gap: 0.75rem;
}

/* 30. Page header normalization */
.page-header h1.text-2xl, h1.text-2xl.font-bold {
  font-size: 1.375rem; color: var(--vx-heading-color);
}

/* 31. Error/validation boxes */
form .bg-red-50, form div[class*="bg-red-50"] {
  background-color: rgba(255, 76, 81, 0.08);
  border-color: rgba(255, 76, 81, 0.15);
}
html.dark form .text-red-700 { color: #ff9f9f; }

/* 32. Dark mode field descriptions */
html.dark .text-gray-500.mt-1, html.dark p.text-gray-500,
html.dark span.text-gray-500 { color: var(--vx-muted-color); }

/* 33. Dark mode text-gray-400 */
html.dark .text-gray-400 { color: var(--vx-muted-color); }

/* 34. Select dropdown appearance */
.card-body select, .form-card-body select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236f6b7d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2rem; appearance: none;
}

/* 35. Table in form card bodies */
.card-body table th, .form-card-body table th {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--vx-muted-color); padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--vx-border-color);
}
.card-body table td, .form-card-body table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--vx-border-color);
  color: var(--vx-body-color); font-size: 0.8125rem;
}

/* 36. Placeholder color in dark mode */
html.dark input::placeholder, html.dark textarea::placeholder {
  color: var(--vx-muted-color); opacity: 0.6;
}

/* 37. Stacked form cards — no overflow issues */
form.space-y-6 > .card { overflow: hidden; }

/* 38. Old-style labels (block text-sm font-medium text-gray-700) */
form label.block.text-sm.font-medium,
form label[class*="text-sm"][class*="font-medium"][class*="text-gray-700"],
form label[class*="text-sm"][class*="font-medium"][class*="text-gray-300"] {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--vx-heading-color);
  margin-bottom: 0.25rem;
}

/* 39. Old-style inputs (rounded-md border-gray-300 shadow-sm) */
form input[class*="border-gray-300"][class*="shadow-sm"],
form select[class*="border-gray-300"][class*="shadow-sm"],
form textarea[class*="border-gray-300"][class*="shadow-sm"] {
  border-color: var(--vx-input-border);
  background-color: var(--vx-input-bg);
  color: var(--vx-heading-color);
  box-shadow: none;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 0.375rem;
  border-width: 1px;
}
form input[class*="border-gray-300"][class*="shadow-sm"]:focus,
form select[class*="border-gray-300"][class*="shadow-sm"]:focus,
form textarea[class*="border-gray-300"][class*="shadow-sm"]:focus {
  border-color: var(--vx-primary);
  box-shadow: 0 0 0 1px var(--vx-primary);
  outline: none;
}

/* 40. Old form body patterns (px-4 py-5 sm:p-6) */
form > .bg-white .space-y-6,
form .px-4.py-5,
form div[class*="px-4"][class*="py-5"] {
  padding: 1.25rem;
}

/* 41. Form input focus ring — remove indigo, use primary */
form input:focus, form select:focus, form textarea:focus {
  --tw-ring-color: rgba(14, 165, 233, 0.5);
  border-color: #0ea5e9;
}

/* 42. Admin form footer (bg-gray-50 text-right rounded-b-lg) */
form .bg-gray-50.text-right.rounded-b-lg,
form div[class*="bg-gray-50"][class*="text-right"] {
  background-color: var(--vx-body-bg);
  border-top: 1px solid var(--vx-border-color);
  padding: 0.875rem 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
}

/* 43. Fix dark mode for dark:text-gray-100 (already set, ensure priority) */
html.dark .dark\:text-gray-100 { color: var(--vx-heading-color); }
html.dark .dark\:text-gray-300 { color: var(--vx-body-color); }
html.dark .dark\:bg-gray-800 { background-color: var(--vx-card-bg); }
html.dark .dark\:bg-gray-900 { background-color: var(--vx-body-bg); }
html.dark .dark\:bg-gray-700 { background-color: var(--vx-border-color); }
html.dark .dark\:border-gray-600 { border-color: var(--vx-border-color); }
html.dark .dark\:border-gray-700 { border-color: var(--vx-border-color); }

/* 44. Fix text-indigo-600 focus rings on old forms */
html.dark .focus\:border-indigo-500:focus { border-color: #0ea5e9; }
html.dark .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(14, 165, 233, 0.5); }

/* 45. List pages — table hover rows in dark mode */
html.dark tbody tr:hover { background-color: rgba(255,255,255,0.03); }
html.dark .even\:bg-gray-50:nth-child(even) { background-color: rgba(255,255,255,0.02); }

/* ── 46. Soften ALL accent colors in dark mode (Vuexy-smooth) ── */

/* Red/Danger — softer coral tones */
html.dark .text-red-600 { color: #ff8c90; }
html.dark .text-red-500 { color: #ff8c90; }
html.dark .text-red-400 { color: #ffb0b3; }
html.dark .bg-red-50 { background-color: rgba(255, 76, 81, 0.08); }
html.dark .bg-red-100 { background-color: rgba(255, 76, 81, 0.12); }
html.dark .bg-red-500 { background-color: #e05258; }
html.dark .border-red-300 { border-color: rgba(255, 76, 81, 0.25); }
html.dark .border-red-500 { border-color: rgba(255, 76, 81, 0.4); }

/* Green/Success — softer mint tones */
html.dark .text-green-600 { color: #6ee7a0; }
html.dark .text-green-500 { color: #6ee7a0; }
html.dark .text-green-400 { color: #86efac; }
html.dark .text-emerald-600 { color: #6ee7a0; }
html.dark .text-emerald-500 { color: #6ee7a0; }
html.dark .bg-green-50 { background-color: rgba(40, 199, 111, 0.08); }
html.dark .bg-green-100 { background-color: rgba(40, 199, 111, 0.12); }
html.dark .bg-emerald-50 { background-color: rgba(40, 199, 111, 0.08); }

/* Blue/Info — softer sky tones */
html.dark .text-blue-600 { color: #7cb9ff; }
html.dark .text-blue-500 { color: #7cb9ff; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.08); }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.12); }

/* Amber/Warning — softer golden tones */
html.dark .text-amber-600 { color: #ffc975; }
html.dark .text-amber-500 { color: #ffc975; }
html.dark .text-yellow-600 { color: #ffc975; }
html.dark .text-yellow-500 { color: #ffc975; }
html.dark .text-orange-600 { color: #ffb07a; }
html.dark .text-orange-500 { color: #ffb07a; }
html.dark .bg-amber-50 { background-color: rgba(255, 159, 67, 0.08); }
html.dark .bg-amber-100 { background-color: rgba(255, 159, 67, 0.12); }
html.dark .bg-yellow-50 { background-color: rgba(255, 159, 67, 0.08); }

/* Purple/Indigo — softer lavender tones */
html.dark .text-purple-600 { color: #b9a0ff; }
html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.08); }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.08); }

/* Primary — consistent with theme */
html.dark .text-primary-600 { color: #38bdf8; }
html.dark .text-primary-500 { color: #38bdf8; }

/* Amount colors in accounting — crucial for readability */
html.dark .amount-debit, html.dark .text-red-600.amount { color: #ff8c90; }
html.dark .amount-credit, html.dark .text-green-600.amount { color: #6ee7a0; }

/* Badge softening in dark mode */
html.dark .badge-danger { background-color: rgba(255, 76, 81, 0.15); color: #ff9f9f; }
html.dark .badge-success { background-color: rgba(40, 199, 111, 0.15); color: #6ee7a0; }
html.dark .badge-warning { background-color: rgba(255, 159, 67, 0.15); color: #ffc975; }
html.dark .badge-info { background-color: rgba(14, 165, 233, 0.15); color: #7dd3fc; }
html.dark .badge-primary { background-color: rgba(14, 165, 233, 0.15); color: #7dd3fc; }

/* Alert softening in dark mode */
html.dark .alert-danger { background-color: rgba(255, 76, 81, 0.1); color: #ff9f9f; }
html.dark .alert-success { background-color: rgba(40, 199, 111, 0.1); color: #6ee7a0; }
html.dark .alert-warning { background-color: rgba(255, 159, 67, 0.1); color: #ffc975; }
html.dark .alert-info { background-color: rgba(14, 165, 233, 0.1); color: #7dd3fc; }

/* Button danger — softer in dark mode */
html.dark .btn-danger {
  background-color: rgba(255, 76, 81, 0.2);
  color: #ff9f9f;
  border: 1px solid rgba(255, 76, 81, 0.3);
}
html.dark .btn-danger:hover {
  background-color: rgba(255, 76, 81, 0.3);
  color: #ffb0b3;
}

/* ── 47. Dark scrollbars — across the entire application ── */

/* Firefox */
html.dark * {
  scrollbar-color: rgba(182, 190, 227, 0.25) transparent;
  scrollbar-width: thin;
}

/* WebKit (Chrome, Edge, Safari) — global */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html.dark ::-webkit-scrollbar-track {
  background: transparent;
}
html.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(182, 190, 227, 0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(182, 190, 227, 0.35);
}
html.dark ::-webkit-scrollbar-corner {
  background: transparent;
}

/* Table overflow containers — ensure dark scrollbar */
html.dark .overflow-x-auto::-webkit-scrollbar,
html.dark .overflow-y-auto::-webkit-scrollbar,
html.dark .overflow-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html.dark .overflow-x-auto::-webkit-scrollbar-thumb,
html.dark .overflow-y-auto::-webkit-scrollbar-thumb,
html.dark .overflow-auto::-webkit-scrollbar-thumb {
  background-color: rgba(182, 190, 227, 0.25);
  border-radius: 3px;
}
html.dark .overflow-x-auto::-webkit-scrollbar-track,
html.dark .overflow-y-auto::-webkit-scrollbar-track,
html.dark .overflow-auto::-webkit-scrollbar-track {
  background: rgba(47, 51, 73, 0.5);
  border-radius: 3px;
}

/* ── 48. Prevent unnecessary horizontal scrollbars on data tables ── */
/* Many list pages use table-fixed with colgroups that don't cover all columns,
   causing tiny overflows and unnecessary scrollbars. Auto layout fixes this. */
.overflow-x-auto > table.w-full,
.overflow-x-auto > table.table-fixed,
.card .overflow-x-auto > table {
  table-layout: auto !important;
  width: 100% !important;
}

/* Action columns (last column) — shrink to fit content, but NOT if it has an input */
.overflow-x-auto > table td:last-child:not(:has(input)) {
  width: 1%;
  white-space: nowrap;
}

/* ── 49. Financial reports — clean dark mode colors for P&L, Balance Sheet, etc. ── */

/* Missing bg-gray-200 override (used for Net Profit/Loss totals) */
html.dark .bg-gray-200 { background-color: rgba(182, 190, 227, 0.1); }
html.dark .bg-gray-300 { background-color: rgba(182, 190, 227, 0.15); }

/* Report table rows — use solid dark-tinted colors (no muddy rgba mixing) */
html.dark tr.bg-green-50 td,
html.dark tr.bg-green-50 { background-color: #283d33; }
html.dark tr.bg-green-100 td,
html.dark tr.bg-green-100 { background-color: #264536; }

html.dark tr.bg-orange-50 td,
html.dark tr.bg-orange-50 { background-color: #382f29; }
html.dark tr.bg-orange-100 td,
html.dark tr.bg-orange-100 { background-color: #3d3028; }

html.dark tr.bg-red-50 td,
html.dark tr.bg-red-50 { background-color: #3a2d33; }
html.dark tr.bg-red-100 td,
html.dark tr.bg-red-100 { background-color: #402d30; }

html.dark tr.bg-blue-100 td,
html.dark tr.bg-blue-100 { background-color: #2a3350; }
html.dark tr.bg-blue-50 td,
html.dark tr.bg-blue-50 { background-color: #2c3348; }

html.dark tr.bg-gray-200 td,
html.dark tr.bg-gray-200 { background-color: #353b50; }

/* bg-*-200 total rows (Balance Sheet uses these) */
html.dark .bg-blue-200,
html.dark tr.bg-blue-200 td,
html.dark tr.bg-blue-200 { background-color: #2a3555 !important; }
html.dark .bg-green-200,
html.dark tr.bg-green-200 td,
html.dark tr.bg-green-200 { background-color: #264a3a !important; }
html.dark .bg-orange-200,
html.dark tr.bg-orange-200 td,
html.dark tr.bg-orange-200 { background-color: #40332a !important; }
html.dark .bg-red-200,
html.dark tr.bg-red-200 td,
html.dark tr.bg-red-200 { background-color: #452e32 !important; }

/* Tailwind /50 opacity modifier variants (Balance Sheet category rows) */
html.dark [class*="bg-blue-50\/"],
html.dark [class*="bg-blue-100\/"] { background-color: #2c3348 !important; }
html.dark [class*="bg-green-50\/"] { background-color: #283d33 !important; }
html.dark [class*="bg-orange-50\/"],
html.dark [class*="bg-orange-100\/"] { background-color: #382f29 !important; }
html.dark [class*="bg-red-50\/"] { background-color: #3a2d33 !important; }

/* Missing text-*-700 overrides for report totals */
html.dark .text-green-700 { color: #6ee7a0; }
html.dark .text-orange-700 { color: #ffb07a; }
html.dark .text-orange-800 { color: #ffb07a; }
html.dark .text-blue-700 { color: #7cb9ff; }
html.dark .text-red-700 { color: #ff8c90; }

/* text-*-600 for report line items (ensure consistency) */
html.dark .text-orange-600 { color: #ffb07a; }

/* ── 50. Gradient summary cards — dark mode overrides ── */
/* Barely-tinted from Vuexy card-bg #2f3349 so they blend with the dark theme */
html.dark [class*="from-blue-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #2d3250, #2b304b) !important;
}
html.dark [class*="from-red-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #372f3a, #342d37) !important;
}
html.dark [class*="from-purple-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #322f48, #302d44) !important;
}
html.dark [class*="from-emerald-50"][class*="bg-gradient"],
html.dark [class*="from-green-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #2f3545, #2d3342) !important;
}
html.dark [class*="from-amber-50"][class*="bg-gradient"],
html.dark [class*="from-yellow-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #373137, #342f34) !important;
}
html.dark [class*="from-orange-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #373137, #342f34) !important;
}
html.dark [class*="from-indigo-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #2e3148, #2c2f42) !important;
}
html.dark [class*="from-teal-50"][class*="bg-gradient"],
html.dark [class*="from-cyan-50"][class*="bg-gradient"] {
  background-image: linear-gradient(to bottom right, #2e3540, #2c333d) !important;
}

/* Fix ring colors on gradient cards in dark mode */
html.dark [class*="ring-blue-200"] { --tw-ring-color: rgba(59, 130, 246, 0.15); }
html.dark [class*="ring-red-200"] { --tw-ring-color: rgba(255, 76, 81, 0.15); }
html.dark [class*="ring-purple-200"] { --tw-ring-color: rgba(139, 92, 246, 0.15); }
html.dark [class*="ring-emerald-200"],
html.dark [class*="ring-green-200"] { --tw-ring-color: rgba(40, 199, 111, 0.15); }
html.dark [class*="ring-amber-200"] { --tw-ring-color: rgba(245, 158, 11, 0.15); }
html.dark [class*="ring-orange-200"] { --tw-ring-color: rgba(249, 115, 22, 0.15); }

/* ── 51. Account dropdown (journal/voucher forms) — dark mode ── */
html.dark .account-dropdown {
  background: var(--vx-card-bg) !important;
  border-color: var(--vx-border-color) !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3) !important;
}
html.dark .account-dropdown-item {
  border-bottom-color: var(--vx-border-color) !important;
  color: var(--vx-body-color) !important;
}
html.dark .account-dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark .account-dropdown-item.selected {
  background-color: rgba(14, 165, 233, 0.15) !important;
}
html.dark .account-dropdown-item.bg-primary-50 {
  background-color: rgba(14, 165, 233, 0.12) !important;
}