:root {
  --dark-primary: hsl(222, 13%, 8%);
  --dark-secondary: hsl(220, 11%, 15%);
  --blue-primary: hsl(217, 91%, 60%);
  --blue-hover: hsl(217, 91%, 55%);
  --text-muted: hsl(220, 9%, 67%);
  --success-green: hsl(158, 64%, 52%);
  --success-green-hover: hsl(158, 64%, 47%);
  --gray-600: hsl(220, 13%, 46%);
  --gray-700: hsl(220, 13%, 34%);
  --red-500: hsl(0, 84%, 60%);
  --red-600: hsl(0, 84%, 55%);
  --orange-600: hsl(25, 95%, 53%);
  --orange-700: hsl(25, 95%, 48%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Fixed mobile scrolling by removing touch-action and user-select restrictions */
}

html {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  /* Fixed mobile scrolling by removing touch-action and user-select restrictions */
}

/* Base classes */
.bg-dark-primary { background-color: var(--dark-primary); }
.bg-dark-secondary { background-color: var(--dark-secondary); }
.bg-blue-primary { background-color: var(--blue-primary); }
.bg-blue-600 { background-color: var(--blue-hover); }
.bg-success-green { background-color: var(--success-green); }
.bg-green-600 { background-color: var(--success-green-hover); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-500 { background-color: hsl(220, 13%, 52%); }
.bg-red-600 { background-color: var(--red-600); }
.bg-red-700 { background-color: hsl(0, 84%, 50%); }
.bg-red-500 { background-color: var(--red-500); }
.bg-orange-600 { background-color: var(--orange-600); }
.bg-orange-700 { background-color: var(--orange-700); }

.text-white { color: white; }
.text-text-muted { color: var(--text-muted); }
.text-success-green { color: var(--success-green); }
.text-green-400 { color: hsl(158, 64%, 57%); }
.text-blue-400 { color: hsl(217, 91%, 65%); }
.text-red-500 { color: var(--red-500); }
.text-red-400 { color: hsl(0, 84%, 65%); }

.border-gray-700 { border-color: var(--gray-700); }
.border-gray-600 { border-color: var(--gray-600); }

/* Hover states */
.hover\:bg-blue-600:hover { background-color: var(--blue-hover); }
.hover\:bg-green-600:hover { background-color: var(--success-green-hover); }
.hover\:bg-gray-600:hover { background-color: var(--gray-600); }
.hover\:bg-gray-500:hover { background-color: hsl(220, 13%, 52%); }
.hover\:bg-red-700:hover { background-color: hsl(0, 84%, 50%); }
.hover\:bg-orange-700:hover { background-color: var(--orange-700); }
.hover\:text-red-400:hover { color: hsl(0, 84%, 65%); }
.hover\:text-green-400:hover { color: hsl(158, 64%, 57%); }

/* Focus states */

/* ===============================
   CALENDAR EXPORT STYLES
   =============================== */

/* Header Actions Layout */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-hover));
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.export-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, var(--blue-hover), var(--blue-primary));
}

.export-btn .action-icon {
  font-size: 1rem;
}

.export-btn .action-text {
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .export-btn .action-text {
    display: none;
  }
  
  .export-btn {
    padding: 0.5rem 0.75rem;
  }
}

/* Export Modal Styles */
.export-option-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--dark-primary);
  border: 2px solid var(--gray-700);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.export-option-btn:hover {
  border-color: var(--blue-primary);
  background: rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.export-option-btn.active {
  border-color: var(--blue-primary);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  box-shadow: 0 0 0 1px var(--blue-primary);
}

.export-option-btn .option-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.export-option-btn .option-content {
  flex: 1;
  min-width: 0;
}

.export-option-btn .option-title {
  font-weight: 600;
  color: white;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.export-option-btn .option-desc {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Export Action Buttons */
.export-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.export-action-btn.primary {
  background: linear-gradient(135deg, var(--success-green), var(--success-green-hover));
  color: white;
}

.export-action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3);
  background: linear-gradient(135deg, var(--success-green-hover), var(--success-green));
}

.export-action-btn.secondary {
  background: var(--dark-primary);
  color: white;
  border-color: var(--gray-700);
}

.export-action-btn.secondary:hover {
  border-color: var(--blue-primary);
  background: rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}

.export-action-btn .action-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.export-action-btn .action-content {
  flex: 1;
  min-width: 0;
}

.export-action-btn .action-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.export-action-btn .action-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.8;
}

/* Mobile Responsive Export Styles */
@media (max-width: 640px) {
  .header-actions {
    gap: 0.5rem;
  }
  
  .export-option-btn {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .export-option-btn .option-icon {
    font-size: 1.25rem;
  }
  
  .export-option-btn .option-title {
    font-size: 0.8125rem;
  }
  
  .export-option-btn .option-desc {
    font-size: 0.6875rem;
  }
  
  .export-action-btn {
    padding: 0.875rem;
    gap: 0.5rem;
  }
  
  .export-action-btn .action-icon {
    font-size: 1.25rem;
  }
  
  .export-action-btn .action-title {
    font-size: 0.8125rem;
  }
  
  .export-action-btn .action-desc {
    font-size: 0.6875rem;
  }
}

/* Custom Date Range Styles */
#customDateRange {
  animation: slideDown 0.3s ease-out;
}

#customDateRange.hidden {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
}

/* Subscription URL Modal Styles */
#subscriptionUrl {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.025em;
}

/* Toast notification enhancements for export */
.toast.export-success {
  background: linear-gradient(135deg, var(--success-green), var(--success-green-hover));
}

.toast.export-error {
  background: linear-gradient(135deg, var(--red-500), var(--red-600));
}

/* Loading overlay for export operations */
.export-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.export-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: var(--dark-secondary);
  border-radius: 1rem;
  border: 1px solid var(--gray-700);
}

.export-loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--gray-700);
  border-top-color: var(--blue-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.export-loading-text {
  color: white;
  font-weight: 500;
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Focus states */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--blue-primary); }
.focus\:ring-blue-primary:focus { box-shadow: 0 0 0 2px var(--blue-primary); }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px var(--blue-primary); }
.focus\:border-transparent:focus { border-color: transparent; }
.focus\:underline:focus { text-decoration: underline; }

/* Layout */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }

.w-full { width: 100%; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-28 { height: 7rem; }

.max-w-md { max-width: 28rem; }
.max-w-7xl { max-width: 80rem; }

/* Spacing */
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.m-0 { margin: 0; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }

.space-x-1 > * + * { margin-left: 0.25rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Typography */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }

/* Borders */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.rounded { border-radius: 0.375rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Positioning */
.sticky { position: sticky; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.top-0 { top: 0; }
.top-16 { top: 4rem; }
.top-32 { top: 8rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }
.right-4 { right: 1rem; }
.bottom-2rem { bottom: 2rem; }
.right-2rem { right: 2rem; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Effects */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 150ms; }

/* Custom components */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}

.product-card {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.product-card:active {
  transform: translateY(0);
}

/* Product emoji styling - larger size for mobile */
.product-card .emoji {
  font-size: 46px !important;
  line-height: 1;
  background: none !important;
  display: block;
  margin-bottom: 8px;
}

/* Cart quantity controls with better spacing */
.qty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty button {
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Form inputs and selects - mobile optimized */
.select, .input, input[type="text"], input[type="number"], select {
  font-size: 16px !important;
  padding: 12px 14px !important;
  width: 100%;
}

/* Calendar styling */
.calendar-day {
  min-height: 100px;
  border: 1px solid #374151;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calendar-day:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.calendar-day.today {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  border-width: 2px;
}

.calendar-day.has-assignment {
  background-color: rgba(99, 102, 241, 0.1);
}

.driver-badge {
  background-color: #6366f1;
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 9999px;
  margin: 2px 0;
  display: inline-block;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.floating-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
}

.tab-active {
  background-color: var(--success-green) !important;
  color: white !important;
}

.offer-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: var(--success-green);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Grid layouts */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Tables */
table { border-collapse: collapse; width: 100%; }
.overflow-x-auto { overflow-x: auto; }

/* Animations */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Transitions and Transforms */
.transition-all { transition: all 150ms ease-in-out; }
.duration-300 { transition-duration: 300ms; }
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-full { --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

/* Additional spacing */
.space-y-1 > * + * { margin-top: 0.25rem; }

/* Status borders */
.border-blue-primary { border-color: var(--blue-primary); }
.border-orange-600 { border-color: var(--orange-600); }
.border-red-600 { border-color: var(--red-600); }
.border-green-600 { border-color: var(--success-green); }

/* Form elements */
input, select, textarea {
  background-color: var(--dark-primary);
  border: 1px solid var(--gray-600);
  color: white;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue-primary);
  border-color: transparent;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Status badges - Updated for consistency with JS usage */
.status-planned {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-left: 3px solid #3b82f6;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.status-active, .status-in_progress {
  background-color: rgba(251, 146, 60, 0.2);
  color: #fdba74;
  border-left: 3px solid #f59e0b;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.status-completed, .status-done {
  background-color: rgba(34, 197, 94, 0.2);
  color: var(--success-green);
  border-left: 3px solid #22c55e;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.status-cancelled, .status-canceled {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-left: 3px solid #ef4444;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* Product Status Indicators */
.status-READY {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border-left: 3px solid #22c55e;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-NEEDS_ATTENTION {
  background-color: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border-left: 3px solid #fbbf24;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-LOW_STOCK {
  background-color: rgba(249, 115, 22, 0.2);
  color: #f97316;
  border-left: 3px solid #f97316;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-OUT_OF_STOCK {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-left: 3px solid #ef4444;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Status notification banner */
.status-notification {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid #475569;
  border-radius: 0.5rem;
  padding: 1rem;
  z-index: 1000;
  max-width: 320px;
  animation: slideInRight 0.3s ease-out;
}

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

/* Status management dropdown */
.status-dropdown {
  background: var(--dark-primary);
  border: 1px solid #374151;
  border-radius: 0.375rem;
  padding: 0.375rem;
  font-size: 0.875rem;
  color: #ffffff;
  min-width: 140px;
}

.status-dropdown:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--blue-primary);
}

/* Mobile-optimized status buttons */
@media (max-width: 768px) {
  .status-notification {
    top: 0.5rem;
    right: 0.5rem;
    left: 0.5rem;
    max-width: none;
  }
  
  .status-dropdown {
    font-size: 0.75rem;
    padding: 0.25rem;
    min-width: 120px;
  }
  
  .status-READY, .status-NEEDS_ATTENTION, .status-LOW_STOCK, .status-OUT_OF_STOCK {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
  }
}

/* Monthly calendar grid */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--gray-600);
  border: 1px solid var(--gray-600);
  border-radius: 8px;
  overflow: hidden;
}

/* Missing mobile driver calendar classes */
.driver-vakter-container {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: var(--dark-secondary);
  border-radius: 0.5rem;
  border: 1px solid var(--gray-700);
}

.mobile-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--dark-primary);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.quick-actions-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: var(--dark-secondary);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}

.section-card {
  background-color: var(--dark-secondary);
  border: 1px solid var(--gray-700);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.view-toggle {
  display: flex;
  background-color: var(--dark-primary);
  border-radius: 0.5rem;
  padding: 0.25rem;
  gap: 0.25rem;
}

.toggle-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn.active {
  background-color: var(--success-green);
  color: white;
}

.toggle-btn:hover:not(.active) {
  background-color: var(--gray-700);
  color: white;
}

.nav-btn {
  padding: 0.75rem 1rem;
  background-color: var(--gray-700);
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.875rem;
}

.nav-btn:hover {
  background-color: var(--gray-600);
}

.nav-btn:active {
  background-color: var(--gray-500);
}

/* Enhanced status indicators with better mobile visibility */
.status-pending {
  background-color: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border-left: 3px solid #6366f1;
}

.status-active {
  background-color: rgba(251, 146, 60, 0.2);
  color: #fdba74;
  border-left: 3px solid #f59e0b;
}

.status-completed {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border-left: 3px solid #22c55e;
}

.status-cancelled {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-left: 3px solid #ef4444;
}

/* Driver assignment status colors */
.assignment-planned {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.assignment-in-progress {
  background-color: rgba(251, 146, 60, 0.1);
  border-color: #fb923c;
}

.assignment-done {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
}

.assignment-canceled {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  /* Mobile tab fixes */
  .tab-button {
    min-width: fit-content;
    white-space: nowrap;
  }
  
  /* Hide WebKit scrollbars on mobile tabs */
  .overflow-x-auto::-webkit-scrollbar {
    display: none;
  }
  
  table {
    font-size: 0.75rem;
  }
  
  .text-lg {
    font-size: 1rem;
  }
  
  .text-xl {
    font-size: 1.125rem;
  }
  
  .text-2xl {
    font-size: 1.25rem;
  }
  
  .p-6 {
    padding: 1rem;
  }
  
  .px-8 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  th, td {
    padding: 0.5rem 0.25rem;
  }
  
  .lg\:hidden {
    display: none;
  }
}

@media (min-width: 769px) {
  .lg\:hidden {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .xl\:col-span-1 { grid-column: span 1 / span 1; }
  .xl\:col-span-2 { grid-column: span 2 / span 2; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Utility classes */
.whitespace-nowrap { white-space: nowrap; }
.font-mono { font-family: 'Courier New', monospace; }

.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.5); }

/* Success/Error colors */
.bg-success-green\/10 { background-color: hsla(158, 64%, 52%, 0.1); }
.bg-success-green\/20 { background-color: hsla(158, 64%, 52%, 0.2); }
.border-success-green\/30 { border-color: hsla(158, 64%, 52%, 0.3); }

/* Improved calendar layout */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(84px, auto);
  gap: 10px;
}

/* Driver calendar layout - new grid structure */
.cal-wrap { 
  width: 100%; 
}

.cal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cal-title {
  font-size: 18px;
  font-weight: 600;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cal-nav button {
  padding: 8px 12px;
  background: #374151;
  color: #d1d5db;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.cal-nav button:hover {
  background: #4b5563;
}

.cal-nav span {
  font-weight: 600;
  font-size: 16px;
  min-width: 120px;
  text-align: center;
}

.cal-head, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.cal-head > div {
  text-align: center; 
  font-weight: 600; 
  opacity: .75;
  padding: 8px 4px;
}

.cal-grid .cell {
  position: relative;
  min-height: 86px;
  background: #1f2937;
  border: 1px solid #2a2a33;
  border-radius: 10px;
  padding: 6px;
  overflow: visible;
}

.cal-grid {
  align-items: stretch;
  overflow: visible;
}

.cell .date-num { 
  position: absolute; 
  top: 6px; 
  right: 8px; 
  font-size: 12px; 
  color: #d1d5db; 
  font-weight: 600; 
}

.cell.mine { 
  box-shadow: 0 0 0 2px #22c55e inset, 0 0 10px rgba(34,197,94,.25); 
}

.cell.payday { 
  background: #374151; 
}

.cell .payicon { 
  position: absolute; 
  top: 6px; 
  left: 6px; 
  font-size: 14px; 
}

.avatars { 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
  gap: 4px; 
  margin-top: 22px; 
}

.avatar { 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 11px; 
  font-weight: 700; 
  color: #fff; 
}

.avatar.me { 
  background: #16a34a; 
} 

.avatar.other { 
  background: #2563eb; 
}

.more { 
  font-size: 11px; 
  opacity: .7; 
  text-align: center; 
  margin-top: 2px; 
}

.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.cal-day {
  text-align: center;
  opacity: 0.7;
  font-weight: 500;
  padding: 8px;
}

.cal-cell {
  border: 1px solid #2a2a33;
  border-radius: 10px;
  padding: 10px;
  background: #17171c;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 84px;
  display: flex;
  flex-direction: column;
}

.cal-cell .date {
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 4px;
}

.cal-cell.today {
  outline: 2px solid #22c55e;
}

.cal-cell.selected {
  background: #1f2d1f;
  outline: 2px solid #22c55e;
}

.cal-cell:hover {
  background: #1e1e24;
  border-color: #3a3a44;
}

.cal-cell.has-assignment {
  background: #0f1f0f;
  border-color: #22c55e;
}

.cal-cell.driver-assigned {
  background: #1f1f0f;
  border-color: #f59e0b;
  outline: 2px solid #f59e0b;
}

.cal-cell .assignments {
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 2px;
}

/* Driver color classes for shift assignments */
.driver-color-1 { background-color: #3b82f6; }
.driver-color-2 { background-color: #10b981; }
.driver-color-3 { background-color: #f59e0b; }
.driver-color-4 { background-color: #ef4444; }
.driver-color-5 { background-color: #8b5cf6; }
.driver-color-6 { background-color: #06b6d4; }

/* Modal improvements */
#assignmentModal .bg-dark-secondary {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Better calendar navigation */
#prevMonth, #nextMonth {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
}

#prevMonth:hover, #nextMonth:hover {
  transform: scale(1.05);
}

.assignments {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.driver-badge {
  background: #22c55e !important;
  color: #000 !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

/* Product card improvements */
.product-card .emoji {
  font-size: 46px !important;
  line-height: 1;
  background: none !important;
  display: block;
  margin-bottom: 8px;
}

/* Cart quantity controls */
.qty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty button {
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Form inputs */
.select, .input {
  font-size: 16px;
  padding: 12px 14px;
  width: 100%;
  margin-top: 8px;
  border-radius: 8px;
}

/* Analytics Dashboard Styles */
.metric-card {
  @apply bg-dark-secondary border border-gray-700 rounded-lg p-6 flex items-center space-x-4;
}

.metric-icon {
  @apply w-12 h-12 rounded-full flex items-center justify-center text-white text-xl;
}

.analytics-card {
  @apply bg-dark-secondary border border-gray-700 rounded-lg p-6;
}

.chart-container {
  @apply w-full h-80 flex items-center justify-center;
}

.chart-container canvas {
  @apply w-full h-full;
}

.insight-item {
  @apply flex items-center p-3 rounded-lg;
}

.insight-item.positive {
  @apply bg-green-500/10 border border-green-500/20 text-green-300;
}

.insight-item.negative {
  @apply bg-red-500/10 border border-red-500/20 text-red-300;
}

.insight-item.warning {
  @apply bg-yellow-500/10 border border-yellow-500/20 text-yellow-300;
}

.insight-item.info {
  @apply bg-blue-500/10 border border-blue-500/20 text-blue-300;
}

/* Enhanced Calendar Styles */
.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--gray-700);
  padding: 0.5rem 0;
}

.cal-day {
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem;
  font-size: 0.875rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--gray-600);
}

.cal-cell {
  background-color: var(--dark-primary);
  min-height: 120px;
  padding: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
}

.cal-cell:hover {
  background-color: var(--dark-secondary);
}

.cal-cell.today {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: var(--success-green);
}

.cal-cell.has-assignment {
  background-color: rgba(99, 102, 241, 0.05);
}

.cal-cell.driver-assigned {
  background-color: rgba(251, 146, 60, 0.1);
  border-color: var(--orange-600);
}

.cal-cell .date {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;
}

.cal-cell.today .date {
  color: var(--success-green);
}

/* Enhanced assignment items */
.assignment-item {
  background-color: var(--dark-secondary);
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
  transition: transform 0.1s, box-shadow 0.1s;
}

.assignment-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.status-icon {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Border colors for status indicators */
.border-blue-primary {
  border-left-color: var(--blue-primary) !important;
}

.border-orange-600 {
  border-left-color: var(--orange-600) !important;
}

.border-success-green {
  border-left-color: var(--success-green) !important;
}

.border-red-600 {
  border-left-color: var(--red-500) !important;
}

/* Modal enhancements */
.assignment-modal-content {
  max-height: 80vh;
  overflow-y: auto;
}

/* Conflict and validation warning styles */
#conflictWarnings, #timeValidationMessages {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced toast animations */
.toast-enter {
  transform: translateX(100%);
  opacity: 0;
}

.toast-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.toast-exit {
  transform: translateX(0);
  opacity: 1;
}

.toast-exit-active {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

/* Mitt Lager Sub-tab System */
.mitt-lager-tab-btn {
  background: #374151;
  color: #d1d5db;
  border: 1px solid #4b5563;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.mitt-lager-tab-btn:hover {
  background: #4b5563;
  color: #ffffff;
  border-color: #6b7280;
}

.mitt-lager-tab-btn.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.mitt-lager-tab-btn.active:hover {
  background: #2563eb;
  border-color: #1d4ed8;
}

/* Mobile optimizations for assignment modal */
@media (max-width: 768px) {
  .cal-cell {
    min-height: 80px;
    padding: 0.25rem;
  }
  
  .cal-cell .date {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  
  .assignment-item {
    padding: 0.25rem 0.5rem;
  }
  
  .status-icon {
    font-size: 0.625rem;
  }
  
  #assignmentModal .bg-dark-secondary {
    margin: 1rem;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* Larger touch targets for mobile */
  #modalDriverSelect, 
  #modalStartTime, 
  #modalEndTime, 
  #modalStatusSelect,
  #modalNotes {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Better spacing for mobile forms */
  .space-y-4 > * + * {
    margin-top: 1.5rem;
  }
}

/* Enhanced Mobile Driver Calendar Styles */

/* Driver Vakter Container */
.driver-vakter-container {
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile Status Header */
.mobile-status-header {
  margin-bottom: 1rem;
}

.current-shift-card {
  background: var(--dark-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--gray-700);
  margin-bottom: 0.75rem;
}

.current-shift-card.active {
  border-color: var(--success-green);
  background: linear-gradient(135deg, var(--dark-secondary), rgba(34, 197, 94, 0.05));
}

.current-shift-card.scheduled {
  border-color: var(--blue-primary);
  background: linear-gradient(135deg, var(--dark-secondary), rgba(59, 130, 246, 0.05));
}

.current-shift-card.idle {
  border-color: var(--gray-600);
}

.shift-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.status-indicator .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator.active .status-dot {
  background: var(--success-green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: pulse 2s infinite;
}

.status-indicator.scheduled .status-dot {
  background: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.status-indicator.idle .status-dot {
  background: var(--gray-600);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.shift-type {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  background: var(--gray-700);
  border-radius: 20px;
  color: var(--text-muted);
}

.shift-time-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.time-label {
  color: var(--text-muted);
}

.time-value {
  color: white;
  font-weight: 500;
}

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

.shift-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-item {
  text-align: center;
  background: var(--dark-primary);
  padding: 0.75rem;
  border-radius: 8px;
}

.stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--blue-primary);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.end-shift-btn, .start-scheduled-btn {
  width: 100%;
  background: var(--red-600);
  color: white;
  border: none;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1rem;
}

.start-scheduled-btn {
  background: var(--success-green);
}

.end-shift-btn:hover {
  background: var(--red-600);
  opacity: 0.9;
}

.start-scheduled-btn:hover {
  background: var(--success-green-hover);
}

.time-until {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.time-until.today {
  color: var(--orange-600);
  font-weight: 600;
}

.next-shift-info {
  margin-bottom: 1rem;
}

.shift-date {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.25rem;
}

.shift-time {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.shift-notes {
  background: var(--dark-primary);
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.idle-message {
  text-align: center;
  color: var(--text-muted);
}

/* Quick Actions Bar */
.quick-actions-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.start-shift-options {
  display: flex;
  gap: 0.75rem;
  flex: 1;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.75rem;
  background: var(--dark-secondary);
  border: 1px solid var(--gray-700);
  border-radius: 10px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
  min-width: 0;
}

.quick-action-btn.primary {
  background: var(--blue-primary);
  border-color: var(--blue-primary);
}

.quick-action-btn.secondary {
  background: var(--gray-700);
  border-color: var(--gray-600);
}

.quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.quick-action-btn.primary:hover {
  background: var(--blue-hover);
}

.action-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.action-text {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section Cards */
.section-card {
  background: var(--dark-secondary);
  border-radius: 12px;
  border: 1px solid var(--gray-700);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.section-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--gray-700);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

/* View Toggle */
.view-toggle {
  display: flex;
  background: var(--dark-primary);
  border-radius: 8px;
  padding: 0.25rem;
}

.toggle-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
  font-weight: 500;
}

.toggle-btn.active {
  background: var(--success-green);
  color: white;
}

.toggle-btn:hover:not(.active) {
  color: white;
}

/* Schedule Views */
.schedule-view {
  padding: 1.5rem;
  transition: opacity 0.2s;
}

.schedule-view.hidden {
  display: none;
}

/* Schedule Items */
.schedule-item, .shift-history-item {
  background: var(--dark-primary);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--gray-700);
  transition: all 0.2s;
}

.schedule-item:hover, .shift-history-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: var(--gray-600);
}

.schedule-item.today {
  border-color: var(--orange-600);
  background: linear-gradient(135deg, var(--dark-primary), rgba(249, 115, 22, 0.05));
}

.schedule-header, .shift-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.schedule-date, .shift-date-time {
  flex: 1;
}

.date-main, .shift-date {
  font-weight: 600;
  color: white;
  font-size: 1rem;
}

.time-until {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

.schedule-status, .shift-type {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.schedule-status.scheduled, .shift-type.scheduled {
  background: rgba(59, 130, 246, 0.2);
  color: var(--blue-primary);
}

.schedule-status.active {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success-green);
}

.schedule-status.completed {
  background: rgba(156, 163, 175, 0.2);
  color: var(--gray-600);
}

.schedule-status.canceled {
  background: rgba(248, 113, 113, 0.2);
  color: var(--red-500);
}

.shift-type.unscheduled {
  background: rgba(249, 115, 22, 0.2);
  color: var(--orange-600);
}

.schedule-details, .shift-metrics {
  margin-bottom: 1rem;
}

.time-info {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.schedule-notes {
  background: var(--dark-secondary);
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-left: 3px solid var(--blue-primary);
}

.shift-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.metric-item {
  text-align: center;
}

.metric-value {
  display: block;
  font-weight: 600;
  color: white;
  font-size: 0.95rem;
}

.metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

.schedule-actions, .shift-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  flex: 1;
}

.action-btn.primary {
  background: var(--blue-primary);
  color: white;
}

.action-btn.primary:hover {
  background: var(--blue-hover);
}

.action-btn.secondary {
  background: var(--gray-700);
  color: var(--text-muted);
  border: 1px solid var(--gray-600);
}

.action-btn.secondary:hover {
  background: var(--gray-600);
  color: white;
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.empty-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.empty-subtext {
  font-size: 0.875rem;
  color: var(--text-muted);
  opacity: 0.8;
}

/* Mobile Calendar */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--gray-700);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  transition: background-color 0.2s;
}

.nav-btn:hover {
  background: var(--gray-600);
}

.month-label {
  font-size: 1rem;
  font-weight: 500;
  color: white;
  min-width: 140px;
  text-align: center;
}

.mobile-calendar {
  padding: 1.5rem;
}

.mobile-calendar-grid {
  background: var(--dark-primary);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gray-700);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--gray-700);
}

.weekday {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
  min-height: 60px;
  padding: 0.5rem;
  border: 1px solid var(--gray-700);
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calendar-day:hover {
  background: var(--gray-700);
}

.calendar-day.today {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--success-green);
}

.calendar-day.other-month {
  opacity: 0.3;
}

.calendar-day.has-schedule {
  background: rgba(59, 130, 246, 0.1);
}

.calendar-day.planned {
  border-left: 3px solid var(--blue-primary);
}

.calendar-day.in_progress {
  border-left: 3px solid var(--success-green);
}

.calendar-day.done {
  border-left: 3px solid var(--gray-600);
}

.calendar-day.canceled {
  border-left: 3px solid var(--red-500);
}

.day-number {
  font-weight: 600;
  color: white;
  font-size: 0.875rem;
}

.schedule-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}

.schedule-indicator.planned {
  background: var(--blue-primary);
}

.schedule-indicator.active {
  background: var(--success-green);
}

.schedule-indicator.completed {
  background: var(--gray-600);
}

.schedule-indicator.canceled {
  background: var(--red-500);
}

.multiple-indicator {
  position: absolute;
  bottom: 0.125rem;
  right: 0.125rem;
  background: var(--orange-600);
  color: white;
  font-size: 0.625rem;
  padding: 0.125rem 0.25rem;
  border-radius: 8px;
  font-weight: 600;
}

/* Calendar Legend */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--dark-primary);
  border-top: 1px solid var(--gray-700);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-dot.scheduled {
  background: var(--blue-primary);
}

.legend-dot.completed {
  background: var(--gray-600);
}

.legend-dot.active {
  background: var(--success-green);
}

.legend-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem;
}

.stat-card {
  background: var(--dark-primary);
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--gray-700);
  text-align: center;
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.stat-icon {
  font-size: 1.25rem;
}

.stat-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 0.25rem;
}

.stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Mobile Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.mobile-modal {
  background: var(--dark-secondary);
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--gray-700);
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--gray-700);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background-color 0.2s;
}

.modal-close:hover {
  background: var(--gray-600);
}

.modal-content {
  padding: 1.5rem;
}

.schedule-detail-card, .shift-detail-card {
  background: var(--dark-primary);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-700);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.detail-value {
  font-weight: 600;
  color: white;
  text-align: right;
  max-width: 60%;
  word-wrap: break-word;
}

.detail-value.success {
  color: var(--success-green);
}

.detail-value.scheduled {
  color: var(--blue-primary);
}

.detail-value.unscheduled {
  color: var(--orange-600);
}

.detail-value.status.active {
  color: var(--success-green);
}

.detail-value.status.completed {
  color: var(--gray-600);
}

.modal-action-btn {
  width: 100%;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-action-btn.primary {
  background: var(--blue-primary);
  color: white;
}

.modal-action-btn.primary:hover {
  background: var(--blue-hover);
}

/* Enhanced Mobile Responsive Styles */
@media (max-width: 768px) {
  /* Enhanced mobile driver calendar specific styles */
  .shift-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions-bar {
    flex-direction: column;
  }

  .start-shift-options {
    width: 100%;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .calendar-legend {
    justify-content: center;
  }

  .schedule-header, .shift-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .schedule-actions, .shift-actions {
    flex-direction: column;
    width: 100%;
  }

  .modal-overlay {
    padding: 0;
  }

  .mobile-modal {
    border-radius: 0;
    height: 100vh;
    max-height: none;
  }

  .calendar-day {
    min-height: 50px;
    padding: 0.25rem;
  }

  .day-number {
    font-size: 0.8rem;
  }

  .current-shift-card {
    padding: 1.25rem;
  }

  .shift-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .view-toggle {
    flex-direction: row;
    justify-content: stretch;
  }

  .toggle-btn {
    flex: 1;
    text-align: center;
  }
}

/* ===============================
   ENHANCED MOBILE-FIRST STYLES
   =============================== */

/* Mobile-optimized touch targets */
@media (max-width: 640px) {
  /* Larger buttons for better touch targets */
  button, .btn, [type="button"], [type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better tab navigation on mobile */
  .tab-button {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    min-height: 44px;
  }
  
  /* Improved card padding on mobile */
  .bg-dark-secondary {
    padding: 1rem;
  }
  
  /* Better table display on mobile */
  table {
    font-size: 0.85rem;
  }
  
  th, td {
    padding: 0.5rem 0.375rem !important;
  }
  
  /* Larger input fields for mobile */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    min-height: 44px;
    padding: 0.75rem !important;
  }
  
  /* Stack grids on mobile */
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  
  .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  
  /* Better spacing for mobile */
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .space-y-6 > * + * {
    margin-top: 1.25rem;
  }
  
  /* Larger icons for touch */
  .text-xl {
    font-size: 1.5rem;
  }
  
  /* Better header on mobile */
  header .py-4 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  /* Modal improvements */
  .fixed.inset-0 > div {
    margin: 0.5rem;
    max-height: calc(100vh - 1rem);
    border-radius: 1rem;
  }
  
  /* Better floating action buttons */
  .floating-button {
    width: 56px;
    height: 56px;
    bottom: 1.5rem;
    right: 1.5rem;
  }
  
  /* Quantity buttons */
  button.w-8, button.w-10 {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem;
  }
  
  /* Product cards on mobile */
  .product-card, .order-card {
    padding: 1rem;
  }
  
  /* Better list items on mobile */
  .py-2 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  /* Main content padding */
  main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Extra small screens (< 375px) */
@media (max-width: 374px) {
  .tab-button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  
  h1, .text-xl {
    font-size: 1.125rem !important;
  }
  
  h2, .text-lg {
    font-size: 1rem !important;
  }
  
  .text-2xl {
    font-size: 1.25rem !important;
  }
}

/* Touch-friendly scrollable tabs */
#tabNavigation {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#tabNavigation::-webkit-scrollbar {
  display: none;
}

/* Active tab indicator */
.tab-active {
  background: var(--blue-primary) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Better focus states for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  header {
    padding-top: env(safe-area-inset-top);
  }
  
  .floating-button {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}