/* Extracted inline header styles */
.header-actions {
  gap: 0.75rem;
}
.lang-dropdown-wrapper {
  z-index: 1030 !important;
  position: relative;
}
.lang-dropdown-btn {
  z-index: 1030 !important;
  position: relative;
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 25px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.95);
  color: #1f2937 !important;
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}
.lang-dropdown-menu {
  z-index: 1030 !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  will-change: transform !important;
  transform: none !important;
}
.auth-buttons {
  gap: 0.5rem;
}
.change-password-link {
  font-size: 0.8rem;
}

/* CSP-compliant dynamic classes */
.csp-modal-active {
  z-index: 1060 !important;
  pointer-events: auto !important;
}
.csp-modal-fallback {
  display: block !important;
}
.csp-backdrop {
  z-index: 1055 !important;
}
.csp-interactive {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1065 !important;
}
.csp-navbar-item {
  margin-right: 0.5rem;
}
.csp-auth-buttons {
  gap: 0.75rem;
  margin-left: 1rem;
}
.csp-dropdown-wrapper-active {
  z-index: 1030 !important;
}
.csp-dropdown-menu-positioned {
  z-index: 1030 !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
}
.csp-modal-show {
  display: block !important;
}
.csp-modal-hidden {
  display: none !important;
}

/* Dropdown and Modal fixes (moved from dropdown-fixes.js dynamic styles) */
.dropdown,
.dropdown-menu,
.dropdown-toggle {
  z-index: 1030 !important;
}

.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
}

#languageDropdown + .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  z-index: 1030 !important;
}

.modal {
  z-index: 1060 !important;
}

.modal.show {
  z-index: 1060 !important;
  pointer-events: auto !important;
}

.modal-backdrop {
  z-index: 1055 !important;
}

.modal-backdrop.show {
  z-index: 1055 !important;
}

.modal.show .modal-dialog {
  z-index: 1061 !important;
  pointer-events: auto !important;
}

.modal.show .modal-content {
  z-index: 1062 !important;
  pointer-events: auto !important;
}

.modal.show input,
.modal.show button,
.modal.show textarea,
.modal.show select,
.modal.show a,
.modal.show label {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1065 !important;
}

.navbar .nav-item {
  margin-right: 0.5rem;
}

.navbar #auth-buttons {
  gap: 0.75rem;
  margin-left: 1rem;
}

/* CSP-compliant dashboard dynamic loader styles */
.csp-toast-root {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.csp-metrics-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  max-width: 340px;
  width: 340px;
  background: #0d1117;
  color: #c9d1d9;
  font:
    12px/1.4 system-ui,
    Arial;
  border-top-left-radius: 6px;
  z-index: 2100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
}

.csp-metrics-header {
  padding: 4px 8px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.csp-metrics-toggle {
  font-size: 11px;
}

.csp-metrics-body {
  max-height: 220px;
  overflow: auto;
  padding: 4px 8px;
}

/* Courier dashboard animations */
.card-slide-out {
  transition: all 0.3s ease;
  transform: translateX(100%);
  opacity: 0;
}

.notification-popup-positioned {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
}

.notification-slide-in {
  animation: slideInRight 0.3s ease;
}

.notification-slide-out {
  animation: slideOutRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Booking realtime progress and notifications */
.progress-bar-updated[data-progress] {
  transition: width 0.3s ease;
}

.progress-bar-updated[data-progress="16.67"] {
  width: 16.67%;
}
.progress-bar-updated[data-progress="33.33"] {
  width: 33.33%;
}
.progress-bar-updated[data-progress="50"] {
  width: 50%;
}
.progress-bar-updated[data-progress="66.67"] {
  width: 66.67%;
}
.progress-bar-updated[data-progress="83.33"] {
  width: 83.33%;
}
.progress-bar-updated[data-progress="100"] {
  width: 100%;
}

.notification-clickable {
  cursor: pointer;
}

body.modal-open .dropdown-menu {
  z-index: 1030 !important;
}

/* CSP-compliant display utilities for modals */
.csp-hidden {
  display: none !important;
}
.csp-visible {
  display: block !important;
}

/* Notification animations (moved from courier-dashboard.js dynamic styles) */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Notification popup positioning and styling */
.notification-popup-positioned {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  min-width: 300px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.notification-slide-in {
  animation: slideInRight 0.3s ease !important;
}

.notification-slide-out {
  animation: slideOutRight 0.3s ease !important;
}

/* Dashboard loader and notification styles */
.dashboard-loader {
  min-width: 220px !important;
  background: #fff !important;
  border-left: 4px solid #007bff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 4px !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.dashboard-loader-success {
  border-left-color: #28a745 !important;
}

.dashboard-loader-error {
  border-left-color: var(--color-danger, #dc3545) !important;
}

.dashboard-loader-warning {
  border-left-color: #ffc107 !important;
}

.dashboard-fade-in {
  opacity: 1 !important;
  transition: opacity 0.4s !important;
}

.dashboard-fade-out {
  opacity: 0 !important;
  transition: opacity 0.4s !important;
}

/* Additional CSP-compliant utility classes */
.white-text {
  color: #fff !important;
}
.text-white-custom {
  color: white !important;
}
.list-style-none {
  list-style: none !important;
}
.padding-left-0 {
  padding-left: 0 !important;
}
.max-height-300 {
  max-height: 300px !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.width-40 {
  width: 40px !important;
}
.height-40 {
  height: 40px !important;
}
.width-100-height-100 {
  width: 100px !important;
  height: 100px !important;
}
.aliceblue-text {
  color: aliceblue !important;
}
.margin-0 {
  margin: 0 !important;
}
.cursor-pointer {
  cursor: pointer !important;
}

/* Form validation error styling */
.validation-error-text {
  color: #c0392b !important;
  font-size: 0.75rem !important;
  margin-top: 2px !important;
}

/* Text and spacing utilities */
.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.text-center {
  text-align: center !important;
}

/* AGGRESSIVE CSP COMPLIANCE - Override ALL inline styles */
/* This CSS has higher specificity and !important to override jQuery inline styles */

/* Force ALL elements with inline display styles to use CSS classes instead */
*[style*="display: none"] {
  display: none !important;
}

*[style*="display: block"] {
  display: block !important;
}

*[style*="display:none"] {
  display: none !important;
}

*[style*="display:block"] {
  display: block !important;
}

/* Override any jQuery attempts to set display styles */
.modal[style] {
  display: block !important;
}

.dropdown-menu[style] {
  display: block !important;
  position: absolute !important;
}

/* Force CSP-compliant classes to take precedence */
.csp-hidden {
  display: none !important;
}

.csp-visible {
  display: block !important;
}

/* Bootstrap modal overrides - prevent jQuery from adding inline styles */
.modal.show {
  display: block !important;
}

.modal.fade {
  display: none !important;
}

.modal.fade.show {
  display: block !important;
}

/* jQuery CSP overrides - prevent jQuery from adding inline styles */
[style*="display: none"] {
  display: none !important;
}

[style*="display: block"] {
  display: block !important;
}

/* Force jQuery elements to use classes instead of inline styles */
.jquery-show {
  display: block !important;
}

.jquery-hide {
  display: none !important;
}

/* Override common jQuery inline styles with !important */
.modal[style*="display"] {
  display: block !important;
}

.dropdown-menu[style*="display"] {
  display: block !important;
}

/* Disable jQuery's inline style application for dropdowns */
.dropdown-menu.show {
  display: block !important;
  position: absolute !important;
}