/* Patties Brand Colors */
:root {
  --bs-primary: #193B54;
  --bs-primary-rgb: 25, 59, 84;
}

.bg-primary {
  background-color: #193B54 !important;
}

.text-primary {
  color: #193B54 !important;
}

.btn-primary {
  background-color: #193B54;
  border-color: #193B54;
}

.btn-primary:hover {
  background-color: #0f2a3e;
  border-color: #0f2a3e;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(25, 59, 84, 0.5);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: #0f2a3e;
  border-color: #0f2a3e;
}

/* Custom active button class for navigation */
.btn-nav-active {
  background-color: #0f2a3e !important;
  border-color: #0f2a3e !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-nav-active:hover {
  background-color: #193B54 !important;
  border-color: #193B54 !important;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


/* Enhanced tab styling for better selection visibility */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item .nav-link.active {
  background-color: #193B54 !important;
  color: white !important;
  border-color: #193B54 #193B54 #fff !important;
  font-weight: 600 !important;
}

.nav-pills .nav-link.active,
.nav-pills .nav-item .nav-link.active {
  background-color: #6c757d !important;
  color: white !important;
  font-weight: 600 !important;
}

.nav-tabs .nav-link:hover:not(.active) {
  background-color: #e9ecef !important;
  border-color: #dee2e6 #dee2e6 #fff !important;
}

.nav-pills .nav-link:hover:not(.active) {
  background-color: #e9ecef !important;
  color: #495057 !important;
}

/* Sub-tab styling */
#subAreaTabs {
  margin-top: -1rem;
}

#subAreaTabs .nav-link {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

/* Floor Navigation Panel Styling */
.sfa-navigation-panel {
  margin-bottom: 1.5rem;
}

.area-navigation-container .navbar {
  padding: 0.5rem 1rem;
  border-color: #dee2e6;
}

.tab-navigation-container .navbar {
  padding: 0.5rem 1rem;
  border-color: #dee2e6;
  background-color: #f8f9fa !important;
}

/* Area Navigation Styling */
.area-navigation-container .nav-link {
  color: #495057;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
}

.area-navigation-container .nav-link:hover {
  background-color: #e9ecef;
  color: #193B54;
}

.area-navigation-container .nav-link.active {
  background-color: #193B54 !important;
  color: white !important;
  font-weight: 600;
}

/* Tab Navigation Styling */
.tab-navigation-container .nav-link {
  color: #6c757d;
  font-weight: 400;
  padding: 0.4rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  transition: all 0.15s ease-in-out;
}

.tab-navigation-container .nav-link:hover {
  background-color: #e9ecef;
  color: #193B54;
}

.tab-navigation-container .nav-link.active {
  background-color: #193B54 !important;
  color: white !important;
  font-weight: 500;
}

/* Warning Badge Styling */
.badge.bg-warning {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
}

/* Button Group Responsive Behavior */
@media (max-width: 991px) {
  .tab-nav-scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tab-nav-scrollable::-webkit-scrollbar {
    display: none;
  }

  .tab-nav-scrollable .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Button Group Specific Styling */
.btn-group .btn,
.btn-group-vertical .btn {
  position: relative;
}

.btn-group .btn.position-relative .badge,
.btn-group-vertical .btn.position-relative .badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  transform: none;
}

/* Vertical Button Groups for Mobile Navigation */
.btn-group-vertical {
  width: 100%;
}

.btn-group-vertical .btn {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

/* Ensure button groups work properly on collapsed navigation */
.navbar-collapse .btn-group-vertical .btn {
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
}

.navbar-collapse .btn-group-vertical .btn:last-child {
  margin-bottom: 0;
}

/* Override Bootstrap's connected borders for mobile vertical groups in navigation */
.navbar-collapse .btn-group-vertical .btn:not(:first-child) {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.navbar-collapse .btn-group-vertical .btn:not(:last-child) {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* Touch-friendly navigation on mobile */
@media (max-width: 767px) {
  .sfa-navigation-panel .nav-link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .area-navigation-container .navbar-brand,
  .tab-navigation-container .navbar-brand {
    font-size: 0.9rem;
  }
}

/* Date Selector Styling */
.date-selector-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-selector-mobile {
  gap: 0.25rem;
}

.date-selector-mobile .navbar-text {
  min-width: 35px;
  text-align: center;
  font-size: 0.85rem;
  color: #193B54 !important;
  font-weight: 600;
}

.date-selector-desktop .date-input {
  width: 140px;
  border: 1px solid #ced4da;
  font-size: 0.85rem;
}

.date-selector-desktop .date-input:focus {
  border-color: #193B54;
  box-shadow: 0 0 0 0.2rem rgba(25, 59, 84, 0.25);
}

.date-selector-container .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-color: #ced4da;
  color: #6c757d;
}

.date-selector-container .btn-sm:hover {
  background-color: #193B54;
  border-color: #193B54;
  color: white;
}

.date-selector-container .btn-sm:focus {
  box-shadow: 0 0 0 0.2rem rgba(25, 59, 84, 0.25);
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .date-selector-mobile .btn-sm {
    padding: 0.2rem 0.4rem;
  }
  
  .date-selector-mobile .navbar-text {
    font-size: 0.8rem;
    min-width: 30px;
  }
}

/* Navigation Buttons Container - Full Width Layout */
.navigation-buttons-container {
  flex: 1;
  display: flex;
  margin-right: 0;
}

/* Navigation Divider */
.navigation-divider {
  width: 2px;
  background-color: #dee2e6;
  margin: 0.5rem 1rem;
  align-self: stretch;
}

/* Button Group Full Width Styling */
.navigation-buttons-container .btn-group,
.navigation-buttons-container .btn-group-vertical {
  width: 100%;
}

/* Desktop button groups should fill available space */
.navigation-buttons-container .btn-group.d-lg-flex {
  flex: 1;
}

/* Individual buttons should share space equally */
.navigation-buttons-container .btn-group .btn {
  flex: 1;
}

/* Remove margins from navigation containers */
.sfa-navigation-panel .navbar-collapse {
  margin: 0;
  padding: 0;
}

/* Ensure proper spacing for mobile navigation */
@media (max-width: 991px) {
  .navigation-buttons-container {
    flex-direction: column;
  }
  
  .navigation-divider {
    display: none !important;
  }
}