/* Custom Status Colors for RSTAS - Generated from master_settings.py */
/* Override Bootstrap button colors with custom colors */

:root {
  /* Define your custom colors - sourced from master_settings.STATUS_HEX_COLORS */
  --status-dispatched: #cc0000;      /* Dispatched */
  --status-enroute: #ff8800;      /* Enroute */
  --status-on-scene: #aaaa00;      /* On Scene */
  --status-patient-contact: #00bb00;      /* Patient Contact */
  --status-transporting: #0000ff;      /* Transporting */
  --status-at-hospital: #9900ff;      /* At Hospital */
  --status-returning: #bb00bb;      /* Returning */
  --status-unit-cleared: #ff4500;      /* Unit Cleared */
  --status-available: #cccccc;      /* Available */
  --status-out-of-service: #8b4513;      /* Out Of Service */
  --status-maintenance: #ff11ff;      /* Maintenance */
  --status-complete: #28a745;      /* Complete */
  --status-cancelled: #6c757d;      /* Cancelled */
}

/* Custom status button classes */
.btn-dispatched {
  background-color: var(--status-dispatched);
  border-color: var(--status-dispatched);
  color: white;
}

.btn-dispatched:hover {
  background-color: color-mix(in srgb, var(--status-dispatched) 85%, black);
  border-color: color-mix(in srgb, var(--status-dispatched) 85%, black);
  color: white;
}

.btn-outline-dispatched {
  color: var(--status-dispatched);
  border-color: var(--status-dispatched);
  background-color: transparent;
}

.btn-outline-dispatched:hover {
  background-color: var(--status-dispatched);
  border-color: var(--status-dispatched);
  color: white;
}

.badge.bg-dispatched {
  background-color: var(--status-dispatched) !important;
  color: white !important;
}
.btn-enroute {
  background-color: var(--status-enroute);
  border-color: var(--status-enroute);
  color: white;
}

.btn-enroute:hover {
  background-color: color-mix(in srgb, var(--status-enroute) 85%, black);
  border-color: color-mix(in srgb, var(--status-enroute) 85%, black);
  color: white;
}

.btn-outline-enroute {
  color: var(--status-enroute);
  border-color: var(--status-enroute);
  background-color: transparent;
}

.btn-outline-enroute:hover {
  background-color: var(--status-enroute);
  border-color: var(--status-enroute);
  color: white;
}

.badge.bg-enroute {
  background-color: var(--status-enroute) !important;
  color: white !important;
}
.btn-on-scene {
  background-color: var(--status-on-scene);
  border-color: var(--status-on-scene);
  color: white;
}

.btn-on-scene:hover {
  background-color: color-mix(in srgb, var(--status-on-scene) 85%, black);
  border-color: color-mix(in srgb, var(--status-on-scene) 85%, black);
  color: white;
}

.btn-outline-on-scene {
  color: var(--status-on-scene);
  border-color: var(--status-on-scene);
  background-color: transparent;
}

.btn-outline-on-scene:hover {
  background-color: var(--status-on-scene);
  border-color: var(--status-on-scene);
  color: white;
}

.badge.bg-on-scene {
  background-color: var(--status-on-scene) !important;
  color: white !important;
}
.btn-patient-contact {
  background-color: var(--status-patient-contact);
  border-color: var(--status-patient-contact);
  color: white;
}

.btn-patient-contact:hover {
  background-color: color-mix(in srgb, var(--status-patient-contact) 85%, black);
  border-color: color-mix(in srgb, var(--status-patient-contact) 85%, black);
  color: white;
}

.btn-outline-patient-contact {
  color: var(--status-patient-contact);
  border-color: var(--status-patient-contact);
  background-color: transparent;
}

.btn-outline-patient-contact:hover {
  background-color: var(--status-patient-contact);
  border-color: var(--status-patient-contact);
  color: white;
}

.badge.bg-patient-contact {
  background-color: var(--status-patient-contact) !important;
  color: white !important;
}
.btn-transporting {
  background-color: var(--status-transporting);
  border-color: var(--status-transporting);
  color: white;
}

.btn-transporting:hover {
  background-color: color-mix(in srgb, var(--status-transporting) 85%, black);
  border-color: color-mix(in srgb, var(--status-transporting) 85%, black);
  color: white;
}

.btn-outline-transporting {
  color: var(--status-transporting);
  border-color: var(--status-transporting);
  background-color: transparent;
}

.btn-outline-transporting:hover {
  background-color: var(--status-transporting);
  border-color: var(--status-transporting);
  color: white;
}

.badge.bg-transporting {
  background-color: var(--status-transporting) !important;
  color: white !important;
}
.btn-at-hospital {
  background-color: var(--status-at-hospital);
  border-color: var(--status-at-hospital);
  color: white;
}

.btn-at-hospital:hover {
  background-color: color-mix(in srgb, var(--status-at-hospital) 85%, black);
  border-color: color-mix(in srgb, var(--status-at-hospital) 85%, black);
  color: white;
}

.btn-outline-at-hospital {
  color: var(--status-at-hospital);
  border-color: var(--status-at-hospital);
  background-color: transparent;
}

.btn-outline-at-hospital:hover {
  background-color: var(--status-at-hospital);
  border-color: var(--status-at-hospital);
  color: white;
}

.badge.bg-at-hospital {
  background-color: var(--status-at-hospital) !important;
  color: white !important;
}
.btn-returning {
  background-color: var(--status-returning);
  border-color: var(--status-returning);
  color: white;
}

.btn-returning:hover {
  background-color: color-mix(in srgb, var(--status-returning) 85%, black);
  border-color: color-mix(in srgb, var(--status-returning) 85%, black);
  color: white;
}

.btn-outline-returning {
  color: var(--status-returning);
  border-color: var(--status-returning);
  background-color: transparent;
}

.btn-outline-returning:hover {
  background-color: var(--status-returning);
  border-color: var(--status-returning);
  color: white;
}

.badge.bg-returning {
  background-color: var(--status-returning) !important;
  color: white !important;
}
.btn-unit-cleared {
  background-color: var(--status-unit-cleared);
  border-color: var(--status-unit-cleared);
  color: white;
}

.btn-unit-cleared:hover {
  background-color: color-mix(in srgb, var(--status-unit-cleared) 85%, black);
  border-color: color-mix(in srgb, var(--status-unit-cleared) 85%, black);
  color: white;
}

.btn-outline-unit-cleared {
  color: var(--status-unit-cleared);
  border-color: var(--status-unit-cleared);
  background-color: transparent;
}

.btn-outline-unit-cleared:hover {
  background-color: var(--status-unit-cleared);
  border-color: var(--status-unit-cleared);
  color: white;
}

.badge.bg-unit-cleared {
  background-color: var(--status-unit-cleared) !important;
  color: white !important;
}
.btn-available {
  background-color: var(--status-available);
  border-color: var(--status-available);
  color: white;
}

.btn-available:hover {
  background-color: color-mix(in srgb, var(--status-available) 85%, black);
  border-color: color-mix(in srgb, var(--status-available) 85%, black);
  color: white;
}

.btn-outline-available {
  color: var(--status-available);
  border-color: var(--status-available);
  background-color: transparent;
}

.btn-outline-available:hover {
  background-color: var(--status-available);
  border-color: var(--status-available);
  color: white;
}

.badge.bg-available {
  background-color: var(--status-available) !important;
  color: white !important;
}
.btn-out-of-service {
  background-color: var(--status-out-of-service);
  border-color: var(--status-out-of-service);
  color: white;
}

.btn-out-of-service:hover {
  background-color: color-mix(in srgb, var(--status-out-of-service) 85%, black);
  border-color: color-mix(in srgb, var(--status-out-of-service) 85%, black);
  color: white;
}

.btn-outline-out-of-service {
  color: var(--status-out-of-service);
  border-color: var(--status-out-of-service);
  background-color: transparent;
}

.btn-outline-out-of-service:hover {
  background-color: var(--status-out-of-service);
  border-color: var(--status-out-of-service);
  color: white;
}

.badge.bg-out-of-service {
  background-color: var(--status-out-of-service) !important;
  color: white !important;
}
.btn-maintenance {
  background-color: var(--status-maintenance);
  border-color: var(--status-maintenance);
  color: white;
}

.btn-maintenance:hover {
  background-color: color-mix(in srgb, var(--status-maintenance) 85%, black);
  border-color: color-mix(in srgb, var(--status-maintenance) 85%, black);
  color: white;
}

.btn-outline-maintenance {
  color: var(--status-maintenance);
  border-color: var(--status-maintenance);
  background-color: transparent;
}

.btn-outline-maintenance:hover {
  background-color: var(--status-maintenance);
  border-color: var(--status-maintenance);
  color: white;
}

.badge.bg-maintenance {
  background-color: var(--status-maintenance) !important;
  color: white !important;
}
.btn-complete {
  background-color: var(--status-complete);
  border-color: var(--status-complete);
  color: white;
}

.btn-complete:hover {
  background-color: color-mix(in srgb, var(--status-complete) 85%, black);
  border-color: color-mix(in srgb, var(--status-complete) 85%, black);
  color: white;
}

.btn-outline-complete {
  color: var(--status-complete);
  border-color: var(--status-complete);
  background-color: transparent;
}

.btn-outline-complete:hover {
  background-color: var(--status-complete);
  border-color: var(--status-complete);
  color: white;
}

.badge.bg-complete {
  background-color: var(--status-complete) !important;
  color: white !important;
}
.btn-cancelled {
  background-color: var(--status-cancelled);
  border-color: var(--status-cancelled);
  color: white;
}

.btn-cancelled:hover {
  background-color: color-mix(in srgb, var(--status-cancelled) 85%, black);
  border-color: color-mix(in srgb, var(--status-cancelled) 85%, black);
  color: white;
}

.btn-outline-cancelled {
  color: var(--status-cancelled);
  border-color: var(--status-cancelled);
  background-color: transparent;
}

.btn-outline-cancelled:hover {
  background-color: var(--status-cancelled);
  border-color: var(--status-cancelled);
  color: white;
}

.badge.bg-cancelled {
  background-color: var(--status-cancelled) !important;
  color: white !important;
}

/* Override for specific buttons that should keep default colors */
#update-call-btn {
  background-color: #28a745 !important; /* Bootstrap success green */
  border-color: #28a745 !important;
}

#update-call-btn:hover {
  background-color: #218838 !important; /* Darker green on hover */
  border-color: #1e7e34 !important;
}

/* Keep map toggle button as default primary blue */
.btn[onclick="toggleMap()"] {
  background-color: #0d6efd !important; /* Default Bootstrap primary */
  border-color: #0d6efd !important;
  color: white !important;
}

.btn[onclick="toggleMap()"]:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: white !important;
}

/* Keep "Now" buttons as default primary blue */
.btn[onclick*="setResponseTimeToNow"],
.btn[onclick*="setTimeToNow"] {
  background-color: #0d6efd !important; /* Default Bootstrap primary */
  border-color: #0d6efd !important;
  color: white !important;
}

.btn[onclick*="setResponseTimeToNow"]:hover,
.btn[onclick*="setTimeToNow"]:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: white !important;
}

/* Keep general form buttons as default colors */
.btn[onclick*="createNewResponse"], 
.btn[onclick*="cancelNewResponse"],
.btn[onclick*="clearUnitFromCall"],
.btn[onclick*="pushTimesToImageTrend"],
.btn[onclick*="printTimesAndMiles"],
.btn[onclick*="completeResponse"] {
  /* These will keep their assigned Bootstrap classes without status color overrides */
}