/* Custom Bootstrap Overrides for AC Service Manager */

/* ============================================
   Custom Primary Color (Sky Blue)
   Original Tailwind primary: #0ea5e9
   ============================================ */
:root {
  --bs-primary: #0ea5e9;
  --bs-primary-rgb: 14, 165, 233;
  --bs-link-color: #0ea5e9;
  --bs-link-hover-color: #0284c7;
}

.btn-primary {
  --bs-btn-bg: #0ea5e9;
  --bs-btn-border-color: #0ea5e9;
  --bs-btn-hover-bg: #0284c7;
  --bs-btn-hover-border-color: #0369a1;
  --bs-btn-active-bg: #0369a1;
  --bs-btn-active-border-color: #0369a1;
  --bs-btn-disabled-bg: #0ea5e9;
  --bs-btn-disabled-border-color: #0ea5e9;
}

.btn-outline-primary {
  --bs-btn-color: #0ea5e9;
  --bs-btn-border-color: #0ea5e9;
  --bs-btn-hover-bg: #0ea5e9;
  --bs-btn-hover-border-color: #0ea5e9;
  --bs-btn-active-bg: #0284c7;
  --bs-btn-active-border-color: #0284c7;
}

.text-primary {
  color: #0ea5e9 !important;
}

.bg-primary {
  background-color: #0ea5e9 !important;
}

.border-primary {
  border-color: #0ea5e9 !important;
}

/* ============================================
   Indigo Color (for buttons)
   Original Tailwind indigo-600: #4f46e5
   ============================================ */
.btn-indigo {
  color: #fff;
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.btn-indigo:hover {
  color: #fff;
  background-color: #4338ca;
  border-color: #3730a3;
}

.btn-indigo:active, .btn-indigo.active {
  color: #fff;
  background-color: #3730a3;
  border-color: #312e81;
}

.text-indigo {
  color: #4f46e5 !important;
}

.text-indigo-hover:hover {
  color: #4338ca !important;
}

/* ============================================
   Gradient Backgrounds
   ============================================ */
.bg-gradient-auth {
  background: linear-gradient(to bottom right, #eff6ff, #ffffff, #faf5ff);
}

.btn-gradient-purple {
  background: linear-gradient(to right, #9333ea, #4f46e5);
  border: none;
  color: #fff;
}

.btn-gradient-purple:hover {
  background: linear-gradient(to right, #7e22ce, #4338ca);
  color: #fff;
}

.btn-gradient-blue {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
  border: none;
  color: #fff;
}

.btn-gradient-blue:hover {
  background: linear-gradient(to right, #1d4ed8, #1e40af);
  color: #fff;
}

/* ============================================
   Custom Alert Colors (matching Tailwind)
   ============================================ */
.alert-amber {
  color: #78350f;
  background-color: #fffbeb;
  border-color: #fcd34d;
}

/* ============================================
   Custom Badge Colors
   ============================================ */
.badge-locked {
  background-color: #dc3545;
  color: #fff;
}

.badge-unlocked {
  background-color: #198754;
  color: #fff;
}

/* Status badges */
.badge-active {
  background-color: #dcfce7 !important;
  color: #166534 !important;
}

.badge-decommissioned {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.badge-pending {
  background-color: #dbeafe !important;
  color: #1e40af !important;
}

.badge-proposed {
  background-color: #f3e8ff !important;
  color: #6b21a8 !important;
}

.badge-confirmed {
  background-color: #dcfce7 !important;
  color: #166534 !important;
}

.badge-declined {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.badge-canceled {
  background-color: #ffedd5 !important;
  color: #9a3412 !important;
}

.badge-completed {
  background-color: #f3f4f6 !important;
  color: #4b5563 !important;
}

.badge-placeholder {
  background-color: #fef3c7 !important;
  color: #92400e !important;
}

/* Due date badges */
.badge-overdue {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.badge-due-soon {
  background-color: #ffedd5 !important;
  color: #9a3412 !important;
}

.badge-due-later {
  background-color: #dbeafe !important;
  color: #1e40af !important;
}

/* ============================================
   Form Enhancements
   ============================================ */
.form-control:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.25);
}

.form-check-input:checked {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

.form-check-input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.25);
}

/* ============================================
   Card Enhancements
   ============================================ */
.card {
  border: 1px solid #e5e7eb;
}

.card-hover:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Utility Classes (Tailwind equivalents)
   ============================================ */

/* Minimum heights */
.min-vh-100 {
  min-height: 100vh !important;
}

/* Transitions */
.transition-all {
  transition: all 0.2s ease-in-out;
}

.transition-colors {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Transform on hover */
.hover-scale:hover {
  transform: scale(1.02);
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Text decoration */
.hover-underline:hover {
  text-decoration: underline;
}

/* Tracking (letter spacing) */
.tracking-wide {
  letter-spacing: 0.5em;
}

/* Border styles for service request status */
.border-left-primary {
  border-left: 4px solid #0ea5e9 !important;
}

.border-left-success {
  border-left: 4px solid #198754 !important;
}

.border-left-danger {
  border-left: 4px solid #dc3545 !important;
}

.border-left-warning {
  border-left: 4px solid #ffc107 !important;
}

.border-left-purple {
  border-left: 4px solid #6f42c1 !important;
}

.border-left-secondary {
  border-left: 4px solid #6c757d !important;
}

.border-left-orange {
  border-left: 4px solid #fd7e14 !important;
}

/* Icon buttons */
.btn-icon {
  padding: 0.5rem;
  line-height: 1;
  border-radius: 0.5rem;
}

.btn-icon:hover {
  background-color: #f3f4f6;
}

/* ============================================
   Custom Navigation Styles
   ============================================ */
.navbar {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ============================================
   Modal Backdrop
   ============================================ */
.modal-backdrop-custom {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1040;
}

/* ============================================
   Tables
   ============================================ */
.table-hover tbody tr:hover {
  background-color: #f9fafb;
}

/* ============================================
   Responsive utilities
   ============================================ */
@media (max-width: 575.98px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* ============================================
   Mobile Dashboard Improvements
   ============================================ */
@media (max-width: 767.98px) {
  /* Make action buttons stack vertically with full width on mobile */
  .mobile-stack-buttons {
    flex-direction: column !important;
    width: 100%;
  }
  
  .mobile-stack-buttons > * {
    width: 100%;
    justify-content: center;
  }
  
  /* Mobile-friendly date inputs */
  .mobile-date-input {
    width: 100% !important;
    min-width: unset !important;
  }
  
  /* Better spacing for card headers on mobile */
  .card-header {
    padding: 1rem !important;
  }
  
  /* Make buttons full width on mobile when needed */
  .btn-mobile-full {
    width: 100%;
    justify-content: center;
  }
  
  /* Improve table readability on mobile */
  .table-mobile-compact th,
  .table-mobile-compact td {
    padding: 0.5rem 0.25rem;
    font-size: 0.8125rem;
  }
  
  /* Stack service request actions vertically */
  .request-actions {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  
  .request-actions .form-control,
  .request-actions .btn {
    width: 100%;
  }
  
  /* Compact list items on mobile */
  .list-group-item {
    padding: 0.75rem 1rem;
  }
  
  /* Better badge wrapping */
  .badge {
    white-space: nowrap;
    font-size: 0.7rem;
  }
  
  /* Time window button group - vertical on mobile */
  .mobile-btn-group-vertical {
    flex-direction: column;
  }
  
  .mobile-btn-group-vertical .btn-group {
    width: 100%;
  }
  
  .mobile-btn-group-vertical .btn-group .btn {
    flex: 1;
  }
}

/* Mobile-friendly scrollable tables */
.table-responsive-mobile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  .table-responsive-mobile table {
    min-width: 500px;
  }
}

/* Mobile card layout for units (alternative to table) */
.unit-card-mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .unit-table-desktop {
    display: none !important;
  }
  
  .unit-card-mobile {
    display: block !important;
  }
  
  .unit-card-mobile .unit-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
  }
  
  .unit-card-mobile .unit-card:last-child {
    margin-bottom: 0;
  }
  
  .unit-card-mobile .unit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  
  .unit-card-mobile .unit-location {
    font-weight: 600;
    color: #111827;
  }
  
  .unit-card-mobile .unit-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
  }
  
  .unit-card-mobile .unit-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
  }
}

/* ============================================
   Icon sizing helpers
   ============================================ */
.icon-sm {
  width: 1rem;
  height: 1rem;
}

.icon-md {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================
   Rotate transform for accordion icons
   ============================================ */
.rotate-90 {
  transform: rotate(90deg);
}

/* ============================================
   Additional responsive width utilities
   ============================================ */
@media (min-width: 576px) {
  .w-sm-auto {
    width: auto !important;
  }
}