/* ==========================================================================
   Dental Lab System - Component Styles
   Specialized components for dental lab management
   ========================================================================== */

/* ==========================================================================
   Flatpickr Date Picker Styles
   ========================================================================== */

/* Reset the flatpickr input to match other form controls */
.flatpickr-date {
    cursor: pointer;
}

/* Remove Bootstrap validation styling completely */
.flatpickr-date.is-valid,
.flatpickr-date.is-invalid {
    border-color: #dee2e6 !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* Standard focus state */
.flatpickr-date:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25);
}

/* Ensure the field looks like other text inputs */
.flatpickr-date {
    background-color: #fff !important;
}

[data-theme="dark"] .flatpickr-date {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode calendar styling */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .flatpickr-months {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .flatpickr-month {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-next-month svg {
    fill: var(--text-muted) !important;
}

[data-theme="dark"] .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-next-month:hover svg {
    fill: var(--primary-400) !important;
}

[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-next-month:hover {
    color: var(--primary-400) !important;
}

[data-theme="dark"] .flatpickr-weekdays {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .flatpickr-weekday {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .flatpickr-days {
    border-left-color: var(--border-color) !important;
    border-right-color: var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-day {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--primary-500) !important;
}

[data-theme="dark"] .flatpickr-day.selected {
    background: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: white !important;
}

[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--primary-500) !important;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
}

/* Fix month/year selector styling to remove Safari-specific styling */
.flatpickr-monthDropdown-months {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: white;
    border: none;
    border-radius: 4px;
    padding: 2px 20px 2px 8px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
}

[data-theme="dark"] .flatpickr-monthDropdown-months {
    background: var(--bg-secondary) !important;
    border: none !important;
    color: var(--text-primary) !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23cbd5e1' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
}

.flatpickr-current-month input.cur-year {
    background: transparent !important;
    border: none;
    color: inherit;
}

/* Fix year input arrows (spinner arrows on hover) */
[data-theme="dark"] .flatpickr-current-month input.cur-year::-webkit-outer-spin-button,
[data-theme="dark"] .flatpickr-current-month input.cur-year::-webkit-inner-spin-button {
    opacity: 0.5;
}

[data-theme="dark"] .flatpickr-current-month input.cur-year:hover::-webkit-outer-spin-button,
[data-theme="dark"] .flatpickr-current-month input.cur-year:hover::-webkit-inner-spin-button {
    opacity: 0.8;
}

/* Fix year input background - target the actual input, not just wrapper */
[data-theme="dark"] .numInputWrapper {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .numInputWrapper:hover {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInput.cur-year,
[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-current-month .numInput.cur-year,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInput.cur-year:hover,
[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year:hover,
[data-theme="dark"] .flatpickr-current-month .numInput.cur-year:hover,
[data-theme="dark"] .flatpickr-current-month input.cur-year:hover {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInput.cur-year:focus,
[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year:focus,
[data-theme="dark"] .flatpickr-current-month .numInput.cur-year:focus,
[data-theme="dark"] .flatpickr-current-month input.cur-year:focus {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Also override for light theme */
.flatpickr-current-month .numInput.cur-year {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.flatpickr-current-month .numInput.cur-year:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.flatpickr-current-month .numInput.cur-year:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Revert arrows to simpler approach that actually works */
[data-theme="dark"] .arrowUp,
[data-theme="dark"] .arrowDown {
    opacity: 0.6 !important;
}

[data-theme="dark"] .arrowUp:hover,
[data-theme="dark"] .arrowDown:hover {
    opacity: 1 !important;
}

/* Fix calendar pointer/arrow for dark mode */
[data-theme="dark"] .flatpickr-calendar:before {
    border-bottom-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .flatpickr-calendar:after {
    border-bottom-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--bg-secondary) !important;
}

/* ==========================================================================
   Component Scrollbars
   ========================================================================== */

/* Scrollbar for specific components */
.table-responsive::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.card-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-responsive::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover,
.card-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Dark theme component scrollbars */
[data-theme="dark"] .table-responsive::-webkit-scrollbar-track,
[data-theme="dark"] .overflow-auto::-webkit-scrollbar-track,
[data-theme="dark"] .card-body::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb,
[data-theme="dark"] .overflow-auto::-webkit-scrollbar-thumb,
[data-theme="dark"] .card-body::-webkit-scrollbar-thumb {
  background: var(--border-light);
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .overflow-auto::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .card-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ==========================================================================
   Status Cards & Priority Indicators
   ========================================================================== */

.status-card-pending {
  background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.status-card-pending::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

.status-card-urgent {
  background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.status-card-urgent::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.status-card-completed {
  background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
  color: white;
}

.status-card-in-progress {
  background: linear-gradient(135deg, var(--info-500) 0%, var(--info-600) 100%);
  color: white;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.status-icon {
  font-size: var(--font-size-3xl);
  opacity: 0.3;
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   Order Management Components
   ========================================================================== */

.order-number {
  font-family: var(--font-family-mono);
  font-weight: 800;
  font-size: var(--font-size-lg);
  color: var(--primary-700);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-primary) 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--primary-200);
  transition: var(--transition-fast);
}

.order-number:hover {
  color: var(--primary-800);
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-50) 100%);
  border-color: var(--primary-300);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.priority-badge {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  font-size: var(--font-size-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-xl);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.badge-sm {
  font-size: 0.65rem;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  border-radius: 0.375rem;
  letter-spacing: 0.025em;
}

.priority-badge.urgent {
  background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%);
  border-color: var(--danger-400);
  animation: pulse-urgent 2s infinite;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.priority-badge.high {
  background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%);
  border-color: var(--warning-400);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.priority-badge.medium {
  background: linear-gradient(135deg, var(--info-500) 0%, var(--info-600) 100%);
  border-color: var(--info-400);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.priority-badge.low {
  background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
  border-color: var(--gray-400);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

.priority-badge.bg-success {
  background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%) !important;
  border-color: var(--success-400);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.priority-badge.bg-info {
  background: linear-gradient(135deg, var(--info-500) 0%, var(--info-600) 100%) !important;
  border-color: var(--info-400);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.priority-badge.bg-warning {
  background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%) !important;
  border-color: var(--warning-400);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.priority-badge.bg-danger {
  background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%) !important;
  border-color: var(--danger-400);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.priority-badge.bg-secondary {
  background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%) !important;
  border-color: var(--gray-400);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

@keyframes pulse-urgent {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.02);
  }
}

/* ==========================================================================
   Date & Time Components
   ========================================================================== */

.current-time {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary-700);
  margin-bottom: var(--space-xs);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.current-date {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Empty State Components
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--gray-500);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  opacity: 0.4;
  filter: grayscale(1);
  transition: var(--transition-normal);
}

.empty-state:hover .empty-state-icon {
  opacity: 0.6;
  filter: grayscale(0.5);
  transform: scale(1.05);
}

.empty-state-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-sm);
}

.empty-state-message {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin-bottom: var(--space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Action Buttons & Interactive Elements
   ========================================================================== */

.action-button-group {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  align-items: center;
  min-width: 80px;
  flex-shrink: 0;
  padding: var(--space-xs) 0;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transform: scale(1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all var(--transition-normal);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.action-btn:hover::before {
  width: 120%;
  height: 120%;
}

.action-btn:hover {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.action-btn i {
  position: relative;
  z-index: 2;
  transition: all var(--transition-normal);
}

.action-btn:hover i {
  transform: scale(1.1);
}

.action-btn-view {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
}

.action-btn-view:hover {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
  transform: scale(1.15) rotate(-3deg);
}

.action-btn-view:hover i {
  animation: viewPulse 0.6s ease-in-out;
}

.action-btn-delete {
  background: linear-gradient(135deg, var(--danger-500), var(--danger-600));
  color: white;
}

.action-btn-delete:hover {
  background: linear-gradient(135deg, var(--danger-600), var(--danger-500));
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  transform: scale(1.15) rotate(3deg);
}

.action-btn-delete:hover i {
  animation: deleteBounce 0.6s ease-in-out;
}

/* Action button animations */
@keyframes viewPulse {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.3); }
}

@keyframes deleteBounce {
  0%, 100% { transform: scale(1.1) rotate(0deg); }
  25% { transform: scale(1.2) rotate(-5deg); }
  75% { transform: scale(1.2) rotate(5deg); }
}

/* Additional action button effects */
.action-btn:active {
  transform: scale(0.95);
  transition: all 0.1s ease-in-out;
}

/* Prevent animations on touch devices for better performance */
@media (hover: none) {
  .action-btn:hover {
    transform: scale(1.05);
    animation: none;
  }
  
  .action-btn:hover i {
    animation: none;
    transform: scale(1);
  }
}

/* Enhanced focus states for accessibility */
.action-btn:focus {
  outline: 2px solid var(--primary-400);
  outline-offset: 2px;
  transform: scale(1.1);
}

.action-btn-delete:focus {
  outline-color: var(--danger-400);
}

/* ==========================================================================
   Search & Filter Components
   ========================================================================== */

.search-filter-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
  /* Performance optimization */
  transform: translate3d(0, 0, 0);
}

.search-filter-card:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

.filter-group {
  display: flex;
  gap: var(--space-md);
  align-items: end;
  flex-wrap: wrap;
}

.filter-input {
  position: relative;
}

.filter-input .form-control {
  padding-left: var(--space-xl);
}

.filter-input .search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  z-index: 1;
}

.filter-select {
  min-width: 150px;
}

.filter-button {
  min-width: 100px;
}

/* ==========================================================================
   Data Table Enhancements - Professional & Modern Design
   ========================================================================== */

.data-table {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
  /* Performance optimization */
  transform: translate3d(0, 0, 0);
}

.data-table .table-responsive {
  overflow-x: hidden;
}

/* Data table hover animation removed */

.data-table-header {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-primary) 100%);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-lg) var(--space-xl);
}

.data-table-header .card-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
}

.data-table .table {
  margin-bottom: 0;
  background: transparent;
  table-layout: fixed;
  width: 100%;
}

.data-table .table thead th {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--bg-primary) 100%);
  border: none;
  border-bottom: 2px solid var(--primary-200);
  padding: var(--space-md) var(--space-sm);
  font-weight: 700;
  color: var(--gray-800);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 10;
  line-height: 1.2;
  vertical-align: top;
}

.data-table .table tbody td {
  padding: var(--space-md) var(--space-sm);
  border: none;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
  background: var(--bg-primary);
  transition: var(--transition-fast);
  line-height: 1.4;
}

/* Specific column widths for better layout */
.data-table .table th:nth-child(1),
.data-table .table td:nth-child(1) { width: 8%; } /* Nr */

.data-table .table th:nth-child(2),
.data-table .table td:nth-child(2) { width: 14%; } /* Patient */

.data-table .table th:nth-child(3),
.data-table .table td:nth-child(3) { width: 9%; } /* Priority */

.data-table .table th:nth-child(4),
.data-table .table td:nth-child(4) { width: 15%; } /* Due Date */

.data-table .table th:nth-child(5),
.data-table .table td:nth-child(5) { width: 15%; } /* Assigned To */

.data-table .table th:nth-child(6),
.data-table .table td:nth-child(6) { width: 11%; } /* Created */

.data-table .table th:nth-child(7),
.data-table .table td:nth-child(7) { width: 18%; } /* Progress */

.data-table .table th:nth-child(8),
.data-table .table td:nth-child(8) { width: 10%; } /* Actions */

.table-row {
  position: relative;
  /* Performance optimization */
  transform: translate3d(0, 0, 0);
}

.table-row:hover {
  background: var(--primary-50) !important;
}

.table-row:hover td {
  background: transparent;
  border-bottom-color: var(--primary-200);
}

.table-row::before {
  content: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Patient Information Styling */
.patient-info {
  display: block;
  line-height: 1.3;
}

.patient-info .fw-semibold {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
  word-wrap: break-word;
  line-height: 1.2;
}

.patient-info .fw-semibold:hover {
  color: var(--primary-600);
}

.patient-info small {
  display: block;
  font-size: var(--font-size-xs);
  word-wrap: break-word;
  line-height: 1.2;
}

/* Date Information Styling */
.date-info {
  line-height: 1.3;
}

.date-info .fw-medium {
  font-weight: 600;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.date-info small {
  display: block;
  font-size: var(--font-size-xs);
  line-height: 1.2;
  word-wrap: break-word;
}

/* Assignee Information */
.assignee-info {
  line-height: 1.3;
}

.assignee-info .fw-medium {
  font-weight: 600;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
  word-wrap: break-word;
  line-height: 1.2;
}

.assignee-info .fw-medium:hover {
  color: var(--primary-600);
}

.assignee-info small {
  font-size: var(--font-size-xs);
  word-wrap: break-word;
  line-height: 1.2;
}

/* Progress Container */
.progress-container {
  min-width: 120px;
  max-width: 100%;
}

.progress-container .progress {
  height: 10px;
  background: var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: var(--space-sm);
}

.progress-container small {
  display: block;
  font-size: var(--font-size-xs);
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
}

.progress-container .progress-bar {
  border-radius: var(--radius-xl);
  transition: var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.progress-container .progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.loading-skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-top: 2px solid var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: var(--space-sm);
}

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

/* ==========================================================================
   Notification Components
   ========================================================================== */

/* Notification item - background transition removed for instant theme switching */

.notification-item:hover {
  background: var(--primary-50) !important;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary-600);
  font-size: 1.1rem;
}

.notification-toast {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  transform: translate3d(400px, 0, 0);
  /* Transition removed for instant display */
}

.notification-toast.show {
  transform: translate3d(0, 0, 0);
}

.notification-success {
  border-left: 4px solid var(--success-500);
}

.notification-warning {
  border-left: 4px solid var(--warning-500);
}

.notification-error {
  border-left: 4px solid var(--danger-500);
}

.notification-info {
  border-left: 4px solid var(--info-500);
}

/* ==========================================================================
   Mobile Responsive Enhancements
   ========================================================================== */

@media (max-width: 1200px) {
  /* Adjust column widths for medium screens */
  .data-table .table th:nth-child(1),
  .data-table .table td:nth-child(1) { width: 7%; } /* Nr */
  
  .data-table .table th:nth-child(2),
  .data-table .table td:nth-child(2) { width: 12%; } /* Patient */
  
  .data-table .table th:nth-child(3),
  .data-table .table td:nth-child(3) { width: 8%; } /* Priority */
  
  .data-table .table th:nth-child(4),
  .data-table .table td:nth-child(4) { width: 13%; } /* Due Date */
  
  .data-table .table th:nth-child(5),
  .data-table .table td:nth-child(5) { width: 13%; } /* Assigned To */
  
  .data-table .table th:nth-child(6),
  .data-table .table td:nth-child(6) { width: 10%; } /* Created */
  
  .data-table .table th:nth-child(7),
  .data-table .table td:nth-child(7) { width: 25%; } /* Progress */
  
  .data-table .table th:nth-child(8),
  .data-table .table td:nth-child(8) { width: 12%; } /* Actions */
}

@media (max-width: 1024px) {
  /* Further optimization for tablets */
  .data-table .table th:nth-child(2),
  .data-table .table td:nth-child(2) { width: 10%; } /* Patient */
  
  .data-table .table th:nth-child(7),
  .data-table .table td:nth-child(7) { width: 22%; } /* Progress */
  
  .data-table .table th:nth-child(8),
  .data-table .table td:nth-child(8) { width: 12%; } /* Actions */
}

@media (max-width: 768px) {


  .action-button-group {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-select,
  .filter-button {
    min-width: 100%;
  }
  
  .status-card-pending,
  .status-card-urgent,
  .status-card-completed,
  .status-card-in-progress {
    margin-bottom: var(--space-md);
  }
  
  .table-row:hover {
    transform: none;
  }
  
  .notification-toast {
    left: var(--space-md);
    right: var(--space-md);
    top: var(--space-md);
  }

  /* Mobile Header/Navbar Improvements */
  .navbar .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .navbar-brand {
    font-size: var(--font-size-lg);
    gap: var(--space-xs);
  }

  .navbar-brand span {
    display: none;
  }

  .navbar-brand i {
    font-size: var(--font-size-xl);
  }

  /* User menu adjustments */
  .nav-item.dropdown .nav-link {
    padding: var(--space-xs) var(--space-sm);
  }

  .dropdown-menu {
    min-width: 280px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }

  /* Page header mobile improvements */
  .page-header h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-sm);
  }

  .page-header .lead {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
  }

  /* Mobile card container improvements */
  .data-table .card-body {
    padding: var(--space-sm);
  }

  .data-table .card-header {
    padding: var(--space-md);
  }

  .data-table .card-header .card-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
  }

  .data-table .card-header small {
    font-size: var(--font-size-sm);
  }

  /* Mobile Order Cards */
  .mobile-order-card {
    animation: slideInUp 0.3s ease-out;
  }

  .mobile-order-card .card {
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .mobile-order-card .card-header {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
    border-bottom: none;
  }

  .mobile-order-card .card-body {
    background: var(--card-bg);
  }

  .mobile-order-card .row {
    margin-bottom: 0.75rem;
  }

  .mobile-order-card .row:last-child {
    margin-bottom: 0;
  }

  .mobile-order-card small.text-muted.fw-semibold {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gray-500);
  }

  /* Mobile card action buttons */
  .mobile-order-card .d-flex {
    gap: 0.5rem;
  }
  
  .mobile-order-card .btn-sm {
    flex: 1;
    padding: 0.375rem 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-align: center;
    height: 36px !important;
    line-height: 1.4 !important;
    border-width: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }



  /* Search and filter improvements for mobile */
  .search-filter-card .card-body {
    padding: var(--space-md);
  }

  .filter-group {
    gap: var(--space-sm);
  }

  .filter-input {
    margin-bottom: var(--space-sm);
  }

  .filter-select {
    margin-bottom: var(--space-sm);
  }

  .filter-button {
    margin-bottom: var(--space-xs);
  }

  /* Header section mobile layout */
  .row.mb-4 .col-lg-8,
  .row.mb-4 .col-lg-4 {
    margin-bottom: var(--space-md);
  }

  .row.mb-4 .col-lg-4 {
    text-align: center !important;
  }

  .btn-lg {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
  }

  /* Dashboard-specific mobile improvements */
  .hero-section {
    text-align: center;
    margin-bottom: var(--space-xl);
  }

  .hero-section h1 {
    font-size: var(--font-size-3xl);
  }

  .hero-section .lead {
    font-size: var(--font-size-lg);
  }

  .hero-section .d-flex {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Statistics cards mobile layout */
  .row.mb-5 .col-lg-3 {
    margin-bottom: var(--space-lg);
  }

  .dashboard-card {
    transform: none !important;
  }

  .dashboard-card:hover {
    transform: none !important;
  }

  /* Notifications section mobile */
  .notification-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile dropdown enhancements */
  .dropdown-menu {
    background: var(--card-bg) !important;
  }

  .dropdown-item {
    transition: var(--transition-fast);
  }

  .dropdown-item:hover {
    background: var(--primary-50) !important;
    color: var(--primary-700) !important;
  }

  /* Notification badge adjustments for mobile */
  .position-absolute.badge {
    font-size: 0.6rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* iPhone and similar devices (max-width: 430px) */
/* Very small devices fine-tuning */


/* ==========================================================================
   Dark Theme Support - Component Level
   ========================================================================== */

[data-theme="dark"] {
  /* Order Number Dark Theme */
  .order-number {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border-color: var(--border-color);
    color: var(--primary-400);
  }

  .order-number:hover {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-color: var(--primary-500);
    color: var(--primary-300);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  /* Data Table Dark Theme */
  .data-table {
    background: var(--card-bg);
    border-color: var(--border-color);
  }

  .data-table-header {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border-bottom-color: var(--border-color);
  }

  .data-table-header .card-title {
    color: var(--text-primary);
  }

  .data-table .table thead th {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-bottom-color: var(--primary-400);
    color: var(--text-primary);
  }

  .data-table .table tbody td {
    background: var(--bg-primary);
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
  }

  .table-row:hover {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
  }

  .table-row:hover td {
    background: transparent;
    border-bottom-color: var(--primary-400);
  }

  /* Patient Info Dark Theme */
  .patient-info .fw-semibold {
    color: var(--text-primary);
  }

  .patient-info .fw-semibold:hover {
    color: var(--primary-400);
  }

  /* Date Info Dark Theme */
  .date-info .fw-medium {
    color: var(--text-primary);
  }

  /* Assignee Info Dark Theme */
  .assignee-info .fw-medium {
    color: var(--text-primary);
  }

  .assignee-info .fw-medium:hover {
    color: var(--primary-400);
  }

  /* Progress Container Dark Theme */
  .progress-container .progress {
    background: var(--bg-tertiary);
  }

  /* Search Filter Card Dark Theme */
  .search-filter-card {
    background: var(--card-bg);
    border-color: var(--border-color);
  }

  /* Empty State Dark Theme */
  .empty-state {
    color: var(--text-muted);
  }

  .empty-state-title {
    color: var(--text-primary);
  }

  .empty-state-message {
    color: var(--text-muted);
  }

  /* Time Display Dark Theme */
  .current-time {
    color: var(--primary-400);
  }

  .current-date {
    color: var(--text-muted);
  }

  /* Notification Item Dark Theme */
  .notification-item:hover {
    background: var(--bg-tertiary) !important;
  }

  .notification-icon {
    background: var(--bg-tertiary);
    color: var(--primary-400);
  }

  /* Notification Toast Dark Theme */
  .notification-toast {
    background: var(--card-bg);
    border-color: var(--border-color);
  }

  /* Loading Skeleton Dark Theme */
  .loading-skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  }

  .loading-spinner {
    border-color: var(--border-color);
    border-top-color: var(--primary-500);
  }

  /* Mobile Order Cards Dark Theme */
  .mobile-order-card .card-body {
    background: var(--card-bg);
  }

  .mobile-order-card small.text-muted.fw-semibold {
    color: var(--text-muted) !important;
  }

  /* Action buttons dark theme adjustments */
  .action-btn-view {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .action-btn-view:hover {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
  }

  .action-btn-delete {
    background: linear-gradient(135deg, var(--danger-500), var(--danger-600));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .action-btn-delete:hover {
    background: linear-gradient(135deg, var(--danger-400), var(--danger-500));
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
  }
}

/* ==========================================================================
   Comprehensive Dark Theme Form Controls
   ========================================================================== */

/* All input types dark theme styling - excluding form switches */
[data-theme="dark"] input:not(.form-switch .form-check-input),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] input:not(.form-switch .form-check-input):focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] input:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* Crispy forms specific dark theme styling - excluding form switches */
[data-theme="dark"] .form-group input:not(.form-switch .form-check-input),
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-floating input:not(.form-switch .form-check-input),
[data-theme="dark"] .form-floating textarea,
[data-theme="dark"] .form-floating select {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-group input:not(.form-switch .form-check-input):focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-floating input:not(.form-switch .form-check-input):focus,
[data-theme="dark"] .form-floating textarea:focus,
[data-theme="dark"] .form-floating select:focus {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .form-group input:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] .form-group textarea::placeholder,
[data-theme="dark"] .form-floating input:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] .form-floating textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* Specific input types dark theme styling - excluding form switches */
[data-theme="dark"] input[type="text"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="email"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="password"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="number"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="tel"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="url"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="search"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="date"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="datetime-local"]:not(.form-switch .form-check-input),
[data-theme="dark"] input[type="time"]:not(.form-switch .form-check-input) {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="text"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="email"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="password"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="number"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="tel"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="url"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="search"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="date"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="datetime-local"]:not(.form-switch .form-check-input):focus,
[data-theme="dark"] input[type="time"]:not(.form-switch .form-check-input):focus {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] input[type="text"]:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] input[type="email"]:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] input[type="password"]:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] input[type="number"]:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] input[type="tel"]:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] input[type="url"]:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] input[type="search"]:not(.form-switch .form-check-input)::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* Bootstrap and crispy form classes dark theme styling - excluding form switches */
[data-theme="dark"] .textinput,
[data-theme="dark"] .numberinput,
[data-theme="dark"] .emailinput,
[data-theme="dark"] .passwordinput,
[data-theme="dark"] .dateinput,
[data-theme="dark"] .textinput input:not(.form-switch .form-check-input),
[data-theme="dark"] .numberinput input:not(.form-switch .form-check-input),
[data-theme="dark"] .emailinput input:not(.form-switch .form-check-input),
[data-theme="dark"] .passwordinput input:not(.form-switch .form-check-input),
[data-theme="dark"] .dateinput input:not(.form-switch .form-check-input) {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .textinput:focus,
[data-theme="dark"] .numberinput:focus,
[data-theme="dark"] .emailinput:focus,
[data-theme="dark"] .passwordinput:focus,
[data-theme="dark"] .dateinput:focus,
[data-theme="dark"] .textinput input:not(.form-switch .form-check-input):focus,
[data-theme="dark"] .numberinput input:not(.form-switch .form-check-input):focus,
[data-theme="dark"] .emailinput input:not(.form-switch .form-check-input):focus,
[data-theme="dark"] .passwordinput input:not(.form-switch .form-check-input):focus,
[data-theme="dark"] .dateinput input:not(.form-switch .form-check-input):focus {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .textinput::placeholder,
[data-theme="dark"] .numberinput::placeholder,
[data-theme="dark"] .emailinput::placeholder,
[data-theme="dark"] .passwordinput::placeholder,
[data-theme="dark"] .textinput input:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] .numberinput input:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] .emailinput input:not(.form-switch .form-check-input)::placeholder,
[data-theme="dark"] .passwordinput input:not(.form-switch .form-check-input)::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* Dark theme specific animations and effects */
[data-theme="dark"] .status-card-pending::before,
[data-theme="dark"] .status-card-urgent::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

[data-theme="dark"] .table-row::before {
  background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
}

[data-theme="dark"] .progress-container .progress-bar::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* Dark theme dropdown improvements */
[data-theme="dark"] .dropdown-menu {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover {
  background: var(--bg-tertiary) !important;
  color: var(--primary-400) !important;
}

[data-theme="dark"] .dropdown-header {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .dropdown-item-text {
  color: var(--text-secondary) !important;
}

/* Dark theme navigation improvements */
[data-theme="dark"] .nav-link span {
  color: var(--text-primary) !important;
  font-weight: 600;
}

[data-theme="dark"] .dropdown-header {
  color: var(--text-primary) !important;
}

/* Dark theme notification text improvements */
[data-theme="dark"] .notification-item .fw-medium {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .notification-item small.text-muted {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .notification-item small {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .dropdown-item .fw-medium {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item small.text-muted {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .dropdown-item small {
  color: var(--text-secondary) !important;
}

/* Dark theme icon improvements */
[data-theme="dark"] .nav-link .text-primary {
  color: var(--primary-400) !important;
}

[data-theme="dark"] .dropdown-header i {
  color: var(--primary-400) !important;
}

/* Better visibility for notification badge */
[data-theme="dark"] .badge.bg-primary {
  background: var(--primary-500) !important;
  color: white !important;
}

/* Improve divider visibility */
[data-theme="dark"] .dropdown-divider {
  border-color: var(--border-color) !important;
}

/* Mobile responsive dark theme adjustments */
@media (max-width: 768px) {
  [data-theme="dark"] .mobile-order-card .card-header {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 100%);
  }

  [data-theme="dark"] .dropdown-menu {
    background: var(--card-bg) !important;
  }
}

/* Enhanced theme transition effects removed for instant switching */

/* Enhanced focus states for dark theme */
[data-theme="dark"] .form-control:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark theme file input styling */
[data-theme="dark"] input[type="file"] {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Dark theme radio button styling - Same as light theme for consistency */
[data-theme="dark"] input[type="radio"] {
  /* Radio buttons now have consistent styling across themes */
}

[data-theme="dark"] label {
  color: var(--text-primary);
}

[data-theme="dark"] label:hover {
  color: var(--primary-400);
}

[data-theme="dark"] .form-check-label {
  color: var(--text-primary);
}

[data-theme="dark"] .form-check-label:hover {
  color: var(--primary-400);
}

[data-theme="dark"] input[type="file"]:hover {
  border-color: var(--primary-400);
  background: var(--bg-secondary);
}

[data-theme="dark"] input[type="file"]:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: white;
}

[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover {
  background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
}

[data-theme="dark"] input[type="file"]::file-selector-button {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: white;
}

[data-theme="dark"] input[type="file"]::file-selector-button:hover {
  background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
}

[data-theme="dark"] .btn:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Dark theme specific notification improvements */
[data-theme="dark"] .notification-success {
  border-left-color: var(--success-400);
}

[data-theme="dark"] .notification-warning {
  border-left-color: var(--warning-400);
}

[data-theme="dark"] .notification-error {
  border-left-color: var(--danger-400);
}

[data-theme="dark"] .notification-info {
  border-left-color: var(--info-400);
}

/* Enhanced notification text contrast for dark theme */
[data-theme="dark"] .notification-item {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .notification-icon {
  background: var(--bg-tertiary) !important;
  color: var(--primary-400) !important;
}

[data-theme="dark"] .notification-icon i {
  color: var(--primary-400) !important;
}

/* Better text contrast for all notification elements */
[data-theme="dark"] .data-table .notification-item .fw-medium {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .data-table .notification-item small.text-muted {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .data-table .notification-item small {
  color: var(--text-secondary) !important;
}

/* Dark theme notification hover improvements */
[data-theme="dark"] .notification-item:hover {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .notification-item:hover .fw-medium {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .notification-item:hover small.text-muted {
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   External Tracking Page Dark Theme
   ========================================================================== */

[data-theme="dark"] .container .card .card-header.bg-white {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
  border-bottom-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .container .card .card-header.bg-white .card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .container .card .card-header.bg-white .text-primary {
  color: var(--primary-400) !important;
}

/* External tracking page cards */
[data-theme="dark"] .container .card.shadow-sm {
  background: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .container .card.shadow-sm .card-body {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* Detail items on external tracking */
[data-theme="dark"] .detail-item .detail-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .detail-item .detail-value {
  color: var(--text-primary);
}

/* Timeline specific dark mode styles */
[data-theme="dark"] .timeline-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .timeline-description {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .item-card {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .item-title {
  color: var(--text-primary) !important;
}

/* Progress bar dark mode */
[data-theme="dark"] .progress {
  background-color: var(--bg-tertiary);
}

/* Badge styling for status */
[data-theme="dark"] .badge.bg-success {
  background-color: var(--success-600) !important;
}

[data-theme="dark"] .badge.bg-info {
  background-color: var(--info-600) !important;
}

[data-theme="dark"] .badge.bg-warning {
  background-color: var(--warning-600) !important;
}

[data-theme="dark"] .badge.bg-danger {
  background-color: var(--danger-600) !important;
}

[data-theme="dark"] .badge.bg-secondary {
  background-color: var(--text-secondary) !important;
} 

/* ==========================================================================
   External Tracking Page Message Form Dark Theme
   ========================================================================== */

/* Message form inputs dark mode styling */
[data-theme="dark"] .message-form .form-control {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .message-form .form-control:focus {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .message-form .form-control::placeholder {
  color: var(--text-muted) !important;
}

/* Message form labels and text */
[data-theme="dark"] .add-message-section h6 {
  color: var(--text-primary);
}

[data-theme="dark"] .add-message-section .text-danger {
  color: var(--danger-400) !important;
}

/* Message items background in dark mode */
[data-theme="dark"] .message-item.bg-light {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary);
}

[data-theme="dark"] .message-item.bg-info {
  background: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .message-item .fw-bold {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .message-item .text-info {
  color: var(--info-400) !important;
}

[data-theme="dark"] .message-item .text-warning {
  color: var(--warning-400) !important;
} 

/* ==========================================================================
   External Tracking Search Form Dark Theme
   ========================================================================== */

/* Tracking search form inputs dark mode styling */
[data-theme="dark"] .tracking-form .form-control {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .tracking-form .form-control:focus {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .tracking-form .form-control::placeholder {
  color: var(--text-muted) !important;
}

/* Form labels on tracking search */
[data-theme="dark"] .tracking-form .form-label {
  color: var(--text-primary) !important;
}

/* Help text styling */
[data-theme="dark"] .form-text {
  color: var(--text-secondary) !important;
}

/* Alert styling for errors */
[data-theme="dark"] .alert-danger {
  background: var(--danger-50) !important;
  color: var(--danger-400) !important;
  border-color: var(--danger-400) !important;
}

/* Code element styling */
[data-theme="dark"] code {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* ==========================================================================
   Form Switch Dark Theme
   ========================================================================== */

/* Dark theme regular checkbox styling - excludes form switches */
[data-theme="dark"] .form-check:not(.form-switch) .form-check-input {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-check:not(.form-switch) .form-check-input:checked {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
}

[data-theme="dark"] .form-check:not(.form-switch) .form-check-input:focus {
  border-color: var(--primary-400) !important;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
  background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .form-check:not(.form-switch) .form-check-input:checked:focus {
  border-color: var(--primary-400) !important;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
  background-color: var(--primary-500) !important;
}

/* Form switches use Bootstrap's default styling in both themes */

/* Form check label dark theme */
[data-theme="dark"] .form-check-label {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .form-check-label:hover {
  color: var(--primary-400) !important;
}

[data-theme="dark"] .form-check-label small.text-muted {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   Admin Role Warning Card Dark Theme
   ========================================================================== */

/* Admin role warning card title dark theme */
[data-theme="dark"] .card.border-warning .card-header.bg-warning .card-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .card.border-warning .card-header.bg-warning {
  background: var(--warning-500) !important;
  border-color: var(--warning-500) !important;
}

[data-theme="dark"] .card.border-warning .card-body {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   Permission Management Styles
   ========================================================================== */

.permission-groups {
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 1rem;
  background: var(--bg-secondary);
}

.permission-group {
  margin-bottom: 1.5rem;
}

.permission-group:last-child {
  margin-bottom: 0;
}

.permission-group-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.permission-group-header h6 {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.permission-group-items {
  margin-left: 0.5rem;
}

.permission-group-items .form-check {
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.permission-group-items .form-check:hover {
  background-color: var(--bg-tertiary);
}

.permission-group-items .form-check-label {
  cursor: pointer;
  width: 100%;
  margin-bottom: 0;
}

.permission-group-items .form-check-input {
  margin-top: 0.25rem;
}

/* Dark theme permission styles */
[data-theme="dark"] .permission-groups {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
}

[data-theme="dark"] .permission-group-header {
  border-color: var(--border-light);
}

[data-theme="dark"] .permission-group-items .form-check:hover {
  background-color: var(--bg-quaternary);
}