/* Fire Department Custom Color Palette - CSS Override */
/* This file applies the Slate Blue, Crimson, and Gold color scheme without modifying JavaScript */

/* ========================================
   PRIMARY COLOR: Slate Blue (#455A64)
   ======================================== */

/* Main Navigation Bar */
nav.bg-red-600 {
    background-color: #455A64 !important;
}

/* Active navigation items - darker slate blue */
nav .bg-red-700 {
    background-color: #3A4A54 !important;
}

/* Calendar view active tab background - light slate blue */
.bg-red-100 {
    background-color: #EEF1F3 !important;
}

/* Calendar view active tab text - slate blue */
.text-red-700 {
    color: #455A64 !important;
}

/* Day view date header - slate blue */
.bg-blue-600,
div.bg-blue-600,
.bg-blue-600.text-white,
div[class*="bg-blue-600"] {
    background-color: #455A64 !important;
}

.bg-blue-700,
div.bg-blue-700,
.hover\:bg-blue-700:hover,
div.hover\:bg-blue-700:hover,
.bg-blue-700.text-white:hover,
div[class*="bg-blue-700"]:hover {
    background-color: #3A4A54 !important;
}

/* Force all blue backgrounds to slate blue */
[class*="bg-blue"] {
    background-color: #455A64 !important;
}

[class*="bg-blue"]:hover {
    background-color: #3A4A54 !important;
}

/* Events and Admin Notes headers - indigo to slate blue */
.bg-indigo-700,
div.bg-indigo-700,
.bg-indigo-600 {
    background-color: #455A64 !important;
}

.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
    background-color: #3A4A54 !important;
}

/* ========================================
   SECONDARY COLOR: Crimson (#DC143C)
   ======================================== */

/* Primary action buttons - crimson */
.bg-red-600:not(nav) {
    background-color: #DC143C !important;
}

/* Button hover states - darker crimson */
.bg-red-700:not(nav *),
.hover\:bg-red-700:hover:not(nav *) {
    background-color: #B0102F !important;
}

/* Alert and warning text - crimson */
.text-red-600 {
    color: #DC143C !important;
}

/* Alert borders and backgrounds */
.border-red-300 {
    border-color: #DC143C !important;
}

.bg-red-50 {
    background-color: #FEE2E2 !important;
}

/* ========================================
   ACCENT COLOR: Gold (#FFB300)
   ======================================== */

/* Special feature buttons - gold background, dark text */
button.bg-blue-600,
button.bg-cyan-500 {
    background-color: #FFB300 !important;
    color: #000000 !important;
}

button.bg-blue-600:hover,
button.bg-cyan-500:hover,
button.bg-cyan-600:hover {
    background-color: #E0A000 !important;
}

/* Gold accent links - but NOT when on blue backgrounds */
.text-blue-600:not(.bg-blue-100 *):not(.bg-blue-50 *):not([class*="bg-blue"] *) {
    color: #FFB300 !important;
}

/* ========================================
   NEUTRAL COLORS
   ======================================== */

/* Off-white background */
.bg-gray-100 {
    background-color: #FAFAFA !important;
}

/* ========================================
   STATUS INDICATORS (keep green/orange)
   ======================================== */

/* Success/Meeting minimum - keep green */
.border-green-300 {
    border-color: #10B981 !important;
}

.bg-green-50 {
    background-color: #D1FAE5 !important;
}

/* ========================================
   RING COLORS (for today's date)
   ======================================== */

.ring-blue-500 {
    --tw-ring-color: #455A64 !important;
}

/* ========================================
   HOVER STATES
   ======================================== */

/* Navigation hover states */
nav .hover\:bg-red-500:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   TRANSITIONS (ensure smooth color changes)
   ======================================== */

button,
.transition-colors {
    transition: all 0.2s ease !important;
}

/* ========================================
   LAYOUT ADJUSTMENTS
   ======================================== */
.shift-table {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.shift-table thead { display: table-header-group !important; }
.shift-table tbody { display: table-row-group !important; }
.shift-table tfoot { display: table-footer-group !important; }

.shift-table tr { display: table-row !important; }
.shift-table th,
.shift-table td {
  display: table-cell !important;
  vertical-align: middle !important;
  white-space: nowrap; /* optional, matches your intent */
}
/* Constrain main content width and center it - leaves room for left sidebar */
.min-h-screen > .p-6 {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Personnel name and time - stack vertically */
.text-xs.text-gray-500 {
    display: block !important;
    margin-top: 0.25rem !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
}

/* Name styling */
.text-xs.text-gray-500 .text-sm {
    display: block !important;
    font-size: 1rem !important;
    color: #000000 !important;
    font-weight: 500 !important;
    margin-bottom: 0.25rem !important;
}

/* ========================================
   CONTRAST FIXES FOR DARK BACKGROUNDS
   ======================================== */

/* CRITICAL FIX: The color overrides above change bg-blue-100 to dark slate blue #455A64 */
/* This means isToday dates (which use bg-blue-100) become dark and need white text */

/* Fix for elements with inline dark background styles */
[style*="background-color: #455A64"] *,
[style*="background-color:#455A64"] *,
[style*="background-color: rgb(69, 90, 100)"] *,
[style*="background-color:rgb(69, 90, 100)"] * {
    color: #FFFFFF !important;
}

/* Fix for ALL blue background classes - they're now dark slate blue */
.bg-blue-50 *,
.bg-blue-100 *,
.bg-blue-600 *,
.bg-blue-700 *,
.bg-indigo-600 *,
.bg-indigo-700 * {
    color: #FFFFFF !important;
}

/* Specific fix for calendar date buttons with any blue background */
button.bg-blue-50,
button.bg-blue-100,
button.bg-blue-600,
button.bg-blue-700,
button.bg-indigo-600,
button.bg-indigo-700,
button[style*="background-color: #455A64"],
button[style*="background-color: rgb(69, 90, 100)"] {
    color: #FFFFFF !important;
}

/* Override text-blue classes when they're ON blue backgrounds (isToday case) */
.bg-blue-50 .text-blue-600,
.bg-blue-50 .text-blue-700,
.bg-blue-100 .text-blue-600,
.bg-blue-100 .text-blue-700,
.text-blue-600.bg-blue-50,
.text-blue-600.bg-blue-100,
.text-blue-700.bg-blue-50,
.text-blue-700.bg-blue-100 {
    color: #FFFFFF !important;
}

/* Fix for grid calendar specifically */
.grid button,
div[class*="grid-cols"] button {
    /* All calendar grid buttons with blue backgrounds need white text */
}

.grid button[class*="bg-blue"],
.grid button[class*="bg-indigo"],
div[class*="grid-cols"] button[class*="bg-blue"],
div[class*="grid-cols"] button[class*="bg-indigo"] {
    color: #FFFFFF !important;
}

/* Force white for any text-blue class that's on a blue background */
[class*="bg-blue"] .text-blue-600,
[class*="bg-blue"] .text-blue-700,
button[class*="bg-blue"].text-blue-600,
button[class*="bg-blue"].text-blue-700 {
    color: #FFFFFF !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}