/**
 * Custom Theme Override for TailAdmin
 *
 * This file overrides the default brand colors (blue) with a custom color palette.
 * Primary Color: #912018
 *
 * To ACTIVATE this theme:
 *   1. Open app/templates/base.html
 *   2. Find the line with: <!-- <link rel="stylesheet" ... custom-theme.css -->
 *   3. Remove the comment markers (<!-- and -->)
 *
 * To DEACTIVATE (return to original TailAdmin blue):
 *   1. Open app/templates/base.html
 *   2. Comment out the custom-theme.css line with <!-- ... -->
 *
 * Generated from primary color: #912018
 * Color palette generated with shades from 50 (lightest) to 950 (darkest)
 */

/* CSS Variable Overrides - Override TailAdmin's native CSS variables */
:root, :host {
  --color-blue-500: #912018 !important;
  --color-blue-light-50: #f9f0ef !important;
  --color-blue-light-500: #912018 !important;
  --color-brand-50: #f9f0ef !important;
  --color-brand-500: #912018 !important;
  --color-brand-600: #7b110a !important;
}

/* Brand Color Backgrounds */
.bg-brand-50 {
  background-color: #f9f0ef !important;
}

.bg-brand-100 {
  background-color: #f2dfde !important;
}

.bg-brand-200 {
  background-color: #e5c1bf !important;
}

.bg-brand-300 {
  background-color: #cc9490 !important;
}

.bg-brand-400 {
  background-color: #b26c68 !important;
}

.bg-brand-500 {
  background-color: #912018 !important;
}

.bg-brand-600 {
  background-color: #7b110a !important;
}

.bg-brand-700 {
  background-color: #650e08 !important;
}

.bg-brand-800 {
  background-color: #4f0b06 !important;
}

.bg-brand-900 {
  background-color: #3a0804 !important;
}

.bg-brand-950 {
  background-color: #1d0402 !important;
}

/* Brand Color Hover Backgrounds */
.hover\:bg-brand-50:hover {
  background-color: #f9f0ef !important;
}

.hover\:bg-brand-100:hover {
  background-color: #f2dfde !important;
}

.hover\:bg-brand-500:hover {
  background-color: #7b110a !important;
}

.hover\:bg-brand-600:hover {
  background-color: #7b110a !important;
}

.hover\:bg-brand-700:hover {
  background-color: #650e08 !important;
}

/* Brand Color Texts */
.text-brand-50 {
  color: #f9f0ef !important;
}

.text-brand-100 {
  color: #f2dfde !important;
}

.text-brand-200 {
  color: #e5c1bf !important;
}

.text-brand-300 {
  color: #cc9490 !important;
}

.text-brand-400 {
  color: #b26c68 !important;
}

.text-brand-500 {
  color: #912018 !important;
}

.text-brand-600 {
  color: #7b110a !important;
}

.text-brand-700 {
  color: #650e08 !important;
}

.text-brand-800 {
  color: #4f0b06 !important;
}

.text-brand-900 {
  color: #3a0804 !important;
}

/* Brand Color Borders */
.border-brand-50 {
  border-color: #f9f0ef !important;
}

.border-brand-100 {
  border-color: #f2dfde !important;
}

.border-brand-200 {
  border-color: #e5c1bf !important;
}

.border-brand-300 {
  border-color: #cc9490 !important;
}

.border-brand-400 {
  border-color: #b26c68 !important;
}

.border-brand-500 {
  border-color: #912018 !important;
}

.border-brand-600 {
  border-color: #7b110a !important;
}

.border-brand-700 {
  border-color: #650e08 !important;
}

.border-brand-800 {
  border-color: #4f0b06 !important;
}

/* Focus States */
.focus\:border-brand-300:focus {
  border-color: #cc9490 !important;
}

.focus\:border-brand-500:focus {
  border-color: #912018 !important;
}

.focus\:border-brand-800:focus {
  border-color: #4f0b06 !important;
}

/* Ring Colors (for focus rings) */
.focus\:ring-brand-500\/10:focus {
  --tw-ring-color: rgba(145, 32, 24, 0.1) !important;
}

.ring-brand-500 {
  --tw-ring-color: #912018 !important;
}

/* Dark mode overrides */
.dark .dark\:bg-brand-500\/10 {
  background-color: rgba(145, 32, 24, 0.1) !important;
}

.dark .dark\:bg-brand-600 {
  background-color: #7b110a !important;
}

.dark .dark\:bg-brand-800 {
  background-color: #4f0b06 !important;
}

.dark .dark\:bg-brand-900 {
  background-color: #3a0804 !important;
}

/* Force override bg-white in dark mode - for login page and dashboard */
.dark .bg-white.dark\:bg-gray-900 {
  background-color: #282929 !important;
}

.dark .bg-white.dark\:bg-brand-900 {
  background-color: #3a0804 !important;
}

/* Override dark mode background colors globally */
.dark.bg-gray-900,
.dark .dark\:bg-gray-900 {
  background-color: #282929 !important;
}

/* Override ALL gray-900 backgrounds in dark mode */
.dark .bg-gray-900 {
  background-color: #282929 !important;
}

/* Ensure body background in dark mode is correct gray */
body.dark.bg-gray-900 {
  background-color: #282929 !important;
}

/* Sidebar background in dark mode - darker gray */
.dark .dark\:bg-gray-950 {
  background-color: #1a1a1a !important;
}

.dark .bg-gray-950 {
  background-color: #1a1a1a !important;
}

.dark .dark\:bg-brand-900\/20 {
  background-color: rgba(58, 8, 4, 0.2) !important;
}

.dark .dark\:bg-brand-900\/30 {
  background-color: rgba(58, 8, 4, 0.3) !important;
}

.dark .dark\:text-brand-400 {
  color: #b26c68 !important;
}

.dark .dark\:text-brand-500 {
  color: #912018 !important;
}

.dark .dark\:border-brand-700 {
  border-color: #650e08 !important;
}

.dark .dark\:border-brand-800 {
  border-color: #4f0b06 !important;
}

.dark .dark\:focus\:border-brand-800:focus {
  border-color: #4f0b06 !important;
}

/* Fill colors for SVG icons */
.fill-brand-500 {
  fill: #912018 !important;
}

.fill-brand-600 {
  fill: #7b110a !important;
}

/* Stroke colors */
.stroke-brand-500 {
  stroke: #912018 !important;
}