/* Login card styling */
.login-card {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure sidebar is always visible for all authenticated users */
#sidebar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Toast System Styles */
.toast-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Ensure sidebar bottom section (user info and logout) is always visible */
#sidebar .border-t {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: white !important;
  border-top: 1px solid rgb(226 232 240) !important;
  padding: 1rem !important;
  margin-top: auto !important;
}

/* Ensure mobile dock is always visible */
#mobile-dock {
  display: none; /* Hidden by default on desktop */
}

/* Ensure sidebar is visible on all screen sizes */
@media (max-width: 1024px) {
  #sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  #sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* Ensure sidebar bottom section is visible on mobile */
  #sidebar .border-t {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: white !important;
    border-top: 1px solid rgb(226 232 240) !important;
    padding: 1rem !important;
    margin-top: auto !important;
  }
  
  /* Ensure user profile elements are visible on mobile */
  #sidebar .border-t .flex.items-center.gap-3 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure logout button is visible on mobile */
  #sidebar .border-t button[onclick*="confirmLogout"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgb(220 38 38) !important;
  }
}

/* Show mobile dock only on mobile devices */
.mobile #mobile-dock {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure logout buttons are always visible */
#sidebar button[onclick*="confirmLogout"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#mobile-dock a[href*="logout.php"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure user profile section in sidebar is always visible */
#sidebar .border-t .flex.items-center.gap-3 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure user avatar is visible */
#sidebar .border-t .w-8.h-8 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure user name and role are visible */
#sidebar .border-t .flex-1 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure logout button in sidebar is visible */
#sidebar .border-t button[onclick*="confirmLogout"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: rgb(220 38 38) !important;
}

/* Disable transforms/animations for iOS tap-glitch prone buttons */
.mobile .btn-noanim,
.mobile .btn-noanim:hover,
.mobile .btn-noanim:active {
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.mobile .btn-noanim svg { pointer-events: none !important; }
.modal-glass {
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Scrollbars for modal-glass containers */
.modal-glass *::-webkit-scrollbar {
  width: 8px;
}

.modal-glass *::-webkit-scrollbar-track {
  background: #e5e5e5;
  border-radius: 4px;
}

.modal-glass *::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 4px;
}

.modal-glass *::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Firefox scrollbar styling for modal-glass */
.modal-glass * {
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 #e5e5e5;
}

/* Ensure the scrollable modal container itself has proper scrollbars */
.modal-glass::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.modal-glass::-webkit-scrollbar-track {
  background: #e5e5e5;
  border-radius: 6px;
}
.modal-glass::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
}
.modal-glass::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}
.modal-glass {
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 #e5e5e5;
}

/* Seamless scrollbars for all modals (glass and non-glass) */
/* WebKit (Chrome, Safari, Edge) for non-glass modal contents */
[id^="modal-"] .bg-white:not(.modal-glass) *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[id^="modal-"] .bg-white:not(.modal-glass) *::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.6); /* slate-100 */
  border-radius: 6px;
}
[id^="modal-"] .bg-white:not(.modal-glass) *::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.6); /* slate-400 */
  border-radius: 6px;
  border: 1px solid rgba(241, 245, 249, 0.8);
}
[id^="modal-"] .bg-white:not(.modal-glass) *::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7); /* slate-500 */
}

/* Firefox for non-glass modal contents */
[id^="modal-"] .bg-white:not(.modal-glass) * {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.6) rgba(241, 245, 249, 0.4);
}

/* Time Tracking Tab Styles */
.tab-btn {
  @apply flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 border-b-2 border-transparent hover:text-slate-900 hover:border-slate-300 transition-colors duration-200;
}

.tab-btn.active {
  @apply text-blue-600 border-blue-600;
}

.tab-btn svg {
  @apply w-4 h-4;
}

/* Ensure modal scrollbars win over any generic ones */
.modal-glass *::-webkit-scrollbar-track { background: #e5e5e5 !important; }
.modal-glass *::-webkit-scrollbar-thumb { background: #c0c0c0 !important; border: 1px solid #d0d0d0 !important; }
.modal-glass * { scrollbar-color: #c0c0c0 #e5e5e5 !important; }

.logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ef4444; /* red */
  padding: 6px;
  border-radius: 0.375rem;
}
.logout-icon:hover { background: rgba(239,68,68,0.08); }
.logout-icon svg { display: block; }

/* Show header user info on desktop; hide only on mobile */
body:not(.mobile) .header-user-info { display: flex !important; }
.mobile .header-user-info { display: none !important; }
.mobile .mobile-footer-userinfo { display: none !important; }

.mobile-footer-userinfo { display: none; }
.mobile .mobile-footer-userinfo {
  display: block !important;
  position: fixed;
  left: 0.75rem; bottom: calc(env(safe-area-inset-bottom) + 0.75rem);
  z-index: 20;
}
.mobile .mobile-footer-userinfo .inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgb(226 232 240);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(2,6,23,0.08);
  backdrop-filter: blur(8px);
}
.admin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  padding: 6px;
  border-radius: 0.375rem;
}
.admin-icon:hover { background: rgba(37, 99, 235, 0.08); }
.admin-icon svg { display: block; }
/* Design tokens: Modern Unified Design System */
:root {
  /* === BRAND COLORS === */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  
  --accent-50: #fefdf8;
  --accent-100: #fef9e7;
  --accent-200: #fef3c7;
  --accent-300: #fde68a;
  --accent-400: #fcd34d;
  --accent-500: #fbbf24;
  --accent-600: #f59e0b;
  --accent-700: #d97706;
  --accent-800: #b45309;
  --accent-900: #92400e;
  
  /* === NEUTRAL COLORS === */
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  
  /* === SEMANTIC COLORS === */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  
  /* === SPACING === */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 0.75rem;   /* 12px */
  --spacing-lg: 1rem;      /* 16px */
  --spacing-xl: 1.5rem;    /* 24px */
  --spacing-2xl: 2rem;     /* 32px */
  --spacing-3xl: 3rem;     /* 48px */
  
  /* === TYPOGRAPHY === */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* === BORDER RADIUS === */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-base: 0.375rem; /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;
  
  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* === LAYOUT === */
  --container-padding: var(--spacing-lg);
  --page-max-width: 1200px;
  
  /* === MOBILE === */
  --mobile-breakpoint: 768px;
  --touch-target-min: 44px;
  --touch-target-padding: var(--spacing-md) var(--spacing-lg);
  --mobile-font-size-small: var(--font-size-xs);
  --mobile-font-size-base: 16px;
  --mobile-padding: var(--spacing-md);
  --mobile-margin: var(--spacing-md);
  
  /* === LEGACY COMPATIBILITY === */
  --cal-bg-day: var(--neutral-50);
  --cal-bg-weekday: var(--neutral-100);
  --cal-text-weekday: var(--neutral-500);
  --cal-bg-holiday: var(--error-100);
  --cal-text-holiday: var(--error-700);
  --cal-bg-has-due: var(--primary-50);
  --cal-bg-has-due-today: var(--primary-100);
  --cal-weeknum: var(--neutral-500);
  --badge-base-bg: var(--neutral-100);
  --badge-base-color: var(--neutral-700);
}
/* === GLOBAL STYLES === */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--neutral-800);
  background: linear-gradient(135deg, var(--neutral-50) 0%, white 100%);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Safe areas for base app content so it doesn't sit under the notch/Dynamic Island */
body > .min-h-screen {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Main container improvements */
main {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--container-padding);
  min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* Page header improvements */
header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Grid system improvements */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  main {
    padding: var(--spacing-md);
  }
}

/* Flex utilities */
.flex {
  display: flex;
}

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

.items-center {
  align-items: center;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-6 { gap: var(--spacing-xl); }
.gap-8 { gap: var(--spacing-2xl); }

/* Spacing utilities */
.space-y-2 > * + * { margin-top: var(--spacing-sm); }
.space-y-4 > * + * { margin-top: var(--spacing-lg); }
.space-y-6 > * + * { margin-top: var(--spacing-xl); }
.space-y-8 > * + * { margin-top: var(--spacing-2xl); }

.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-6 { margin-bottom: var(--spacing-xl); }
.mb-8 { margin-bottom: var(--spacing-2xl); }

.mt-2 { margin-top: var(--spacing-sm); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-6 { margin-top: var(--spacing-xl); }
.mt-8 { margin-top: var(--spacing-2xl); }

.p-2 { padding: var(--spacing-sm); }
.p-4 { padding: var(--spacing-lg); }
.p-6 { padding: var(--spacing-xl); }
.p-8 { padding: var(--spacing-2xl); }

/* Text utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

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

/* Color utilities */
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-800 { color: var(--neutral-800); }
.text-primary-600 { color: var(--primary-600); }
.text-success-600 { color: var(--success-600); }
.text-warning-600 { color: var(--warning-600); }
.text-error-600 { color: var(--error-600); }

/* Hidden utility */
.hidden { display: none !important; }

/* Responsive utilities */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
  .sm\:hidden { display: none; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* === MODERN BUTTON SYSTEM === */
.btn, .btn-primary, .btn-secondary, .btn-tertiary, .nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Primary Button - Brand accent */
.btn, .btn-primary {
  background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: var(--neutral-900);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-600);
}

.btn:hover, .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--accent-700);
}

.btn:active, .btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  background: var(--accent-700);
}

/* Secondary Button - Neutral with subtle emphasis */
.btn-secondary, .nav-btn {
  background: var(--neutral-50);
  color: var(--neutral-700);
  border-color: var(--neutral-200);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover, .nav-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary:active, .nav-btn:active {
  transform: translateY(0);
  background: var(--neutral-200);
  box-shadow: var(--shadow-sm);
}

/* Tertiary Button - Minimal style */
.btn-tertiary {
  background: transparent;
  color: var(--neutral-600);
  border-color: transparent;
  box-shadow: none;
}

.btn-tertiary:hover {
  background: var(--neutral-100);
  color: var(--neutral-700);
  box-shadow: none;
  transform: none;
}

/* Button States */
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-tertiary:disabled,
.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

/* Special button variants */
.nav-btn.text-red-600 svg { 
  color: var(--error-600); 
  stroke: var(--error-600); 
}

/* Button loading state */
.btn-loading {
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: button-loading-spin 1s ease infinite;
}

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

/* Subtle inline button */
.btn-link { background: transparent !important; border: none !important; color: rgb(51 65 85) !important; padding: 2px 6px !important; border-radius: 0.25rem !important; }
.btn-link:hover { background: rgb(248 250 252) !important; text-decoration: underline; }
.btn-link.danger { color: #dc2626 !important; }

/* Red button variant */
.btn-red {
  background: #dc2626 !important; /* red-600 */
  color: #000 !important;
  border: none !important;
}
.btn-red:hover {
  background: #b91c1c !important; /* red-700 */
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.btn-red:active {
  background: #991b1b !important; /* red-800 */
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}

/* Modal close button styling */
.modal-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  background: #dc2626 !important; /* red-600 */
  color: #000 !important;
  border: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.modal-close-btn:hover {
  background: #b91c1c !important; /* red-700 */
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
}
.modal-close-btn:active {
  background: #991b1b !important; /* red-800 */
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2) !important;
}

/* === MODERN FORM SYSTEM === */
.input, .select, .textarea {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-300);
  background: var(--neutral-50);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--neutral-800);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  background: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--shadow-sm);
  transform: translateY(-1px);
}

.input:hover, .select:hover, .textarea:hover {
  border-color: var(--neutral-400);
  background: white;
}

.input::placeholder, .textarea::placeholder {
  color: var(--neutral-500);
  font-weight: var(--font-weight-normal);
}

/* Input States */
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--neutral-100);
  color: var(--neutral-500);
  cursor: not-allowed;
  border-color: var(--neutral-200);
}

.input.error, .select.error, .textarea.error {
  border-color: var(--error-500);
  background: var(--error-50);
}

.input.error:focus, .select.error:focus, .textarea.error:focus {
  border-color: var(--error-500);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), var(--shadow-sm);
}

.input.success, .select.success, .textarea.success {
  border-color: var(--success-500);
  background: var(--success-50);
}

.input.success:focus, .select.success:focus, .textarea.success:focus {
  border-color: var(--success-500);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1), var(--shadow-sm);
}

/* Labels */
.label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-700);
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-tight);
}

.label.required::after {
  content: "*";
  color: var(--error-500);
  margin-left: var(--spacing-xs);
}

/* Input Groups */
.input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.input-group-horizontal {
  flex-direction: row;
  align-items: center;
}

.input-group-horizontal .label {
  margin-bottom: 0;
  margin-right: var(--spacing-md);
  white-space: nowrap;
}

/* Search Input */
.input-search {
  padding-left: var(--spacing-3xl);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: var(--spacing-md) center;
  background-size: 16px 16px;
}

/* Help Text */
.help-text {
  font-size: var(--font-size-xs);
  color: var(--neutral-600);
  margin-top: var(--spacing-xs);
}

.help-text.error {
  color: var(--error-600);
}

.help-text.success {
  color: var(--success-600);
}

/* === MODERN TAB SYSTEM === */
.tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xl);
  background: var(--neutral-100);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--neutral-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn:hover {
  background: var(--neutral-200);
  color: var(--neutral-700);
}

.tab-btn.active {
  background: white;
  color: var(--primary-600);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
}

.tab-btn.active svg {
  color: var(--primary-600);
}

.tab-btn svg {
  width: 16px;
  height: 16px;
  color: inherit;
  transition: color var(--transition-fast);
}

/* Tab Panels */
.tab-panel {
  display: none;
  animation: tab-fade-in 0.2s ease-out;
}

.tab-panel.active {
  display: block;
}

/* Administration Tab Panels */
.admin-tab-panel {
  display: none;
  animation: tab-fade-in 0.2s ease-out;
}

.admin-tab-panel.active {
  display: block !important;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tab Variants */
.tabs-minimal {
  background: transparent;
  border-bottom: 2px solid var(--neutral-200);
  border-radius: 0;
  padding: 0;
  gap: var(--spacing-lg);
  box-shadow: none;
}

.tabs-minimal .tab-btn {
  background: transparent;
  border-radius: 0;
  padding: var(--spacing-md) 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.tabs-minimal .tab-btn:hover {
  background: transparent;
  border-bottom-color: var(--neutral-300);
}

.tabs-minimal .tab-btn.active {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--primary-500);
  box-shadow: none;
  color: var(--primary-600);
}

/* Pill tabs */
.tabs-pills {
  background: transparent;
  gap: var(--spacing-md);
  padding: 0;
  box-shadow: none;
}

.tabs-pills .tab-btn {
  border-radius: var(--radius-full);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--neutral-100);
}

.tabs-pills .tab-btn:hover {
  background: var(--neutral-200);
}

.tabs-pills .tab-btn.active {
  background: var(--primary-500);
  color: white;
  border: none;
}

/* Mobile tab optimizations */
.mobile .tab-panel {
  display: none !important;
}

.mobile .tab-panel.active {
  display: block !important;
}

.mobile .tabs {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile .tabs::-webkit-scrollbar {
  display: none;
}

.mobile .tab-btn {
  flex-shrink: 0;
  min-width: max-content;
}

/* Modal panels: consistent, scrollable on all devices (better on iPhone) */
#modal-edit-customer .bg-white,
#modal-edit-installation .bg-white,
#modal-edit-inspection .bg-white,
#modal-contact-details .bg-white,
#modal-month-selector .bg-white,

#view-new-installation .bg-white,
#view-new-inspection .bg-white {
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-panel {
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Prevent horizontal scrolling in inspection modal */
#modal-edit-inspection,
#modal-edit-inspection .absolute,
#modal-edit-inspection .bg-white,
#modal-edit-inspection .tab-panel,
#modal-edit-inspection .versions-list {
  overflow-x: hidden !important;
}
.mobile #modal-edit-inspection .bg-white { max-width: 100% !important; }

/* Prevent horizontal scrolling in "Neue Prüfung anlegen" view (iPhone) */
.mobile #view-new-inspection,
.mobile #view-new-inspection .card,
.mobile #view-new-inspection .grid,
.mobile #view-new-inspection .input,
.mobile #view-new-inspection textarea {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.mobile body { overflow-x: hidden !important; }
.mobile #view-new-inspection { touch-action: pan-y !important; }

/* Bottom sheet (mobile day due list) */
#modal-day-due .bg-white {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  animation: slideInUp 160ms ease-out;
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  z-index: 10002 !important;
}
/* New chooser bottom sheet styles */
#modal-new-chooser .bg-white {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  animation: slideInUp 160ms ease-out;
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  z-index: 10002 !important;
}

/* Desktop: center the new chooser and round all corners */
body:not(.mobile) #modal-new-chooser .absolute.inset-x-0.bottom-0 {
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body:not(.mobile) #modal-new-chooser .bg-white {
  border-radius: 1rem !important; /* all four corners */
}

/* iPhone: keep as bottom sheet but make it flush to the bottom (no hover gap) */
.mobile #modal-new-chooser .absolute.inset-x-0.bottom-0 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important; /* flush sheet to the screen bottom */
  z-index: 10002 !important; /* above overlay */
}
.mobile #modal-new-chooser .bg-white {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important; /* keep content above safe area */
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important; /* isolate sheet layer */
}
/* Respect iPhone safe area at the bottom */
#modal-day-due .absolute.inset-x-0.bottom-0,
#modal-new-chooser .absolute.inset-x-0.bottom-0,
#modal-calendar-action .absolute.inset-x-0.bottom-0,
#modal-logout-confirm .absolute.inset-x-0.bottom-0,
#modal-contact-details .absolute.inset-x-0.bottom-0,
#modal-delete-inspection .absolute.inset-x-0.bottom-0 {
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
}
/* Ensure overlay covers full viewport on iOS Safari */
#modal-day-due,
#modal-new-chooser,
#modal-calendar-action,
#modal-logout-confirm,
#modal-contact-details,
#modal-delete-inspection,
#view-new-installation,
#view-new-inspection {
  height: 100dvh !important; /* iOS 16+ dynamic viewport */
  padding-top: env(safe-area-inset-top); /* allow overlay to extend behind UI */
}
#modal-day-due > .absolute.inset-0,
#modal-new-chooser > .absolute.inset-0,
#modal-calendar-action > .absolute.inset-0,
#modal-logout-confirm > .absolute.inset-0,
#modal-contact-details > .absolute.inset-0,
#modal-delete-inspection > .absolute.inset-0,
#view-new-installation > .absolute.inset-0,
#view-new-inspection > .absolute.inset-0 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important; /* Use dynamic viewport */
  min-height: 100vh !important; /* Fallback */
  background: rgba(15, 23, 42, 0.25) !important; /* softer dim for glass */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 9990 !important;
  pointer-events: auto !important; /* ensure modal overlay captures touch */
}
/* When a modal is open, pin body to viewport height to avoid shrink */
body.modal-open {
  height: auto !important;
  min-height: 100vh !important;
  overflow: hidden !important; /* prevent background scroll */
}
.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgb(203 213 225);
  border-radius: 9999px;
  margin: 0 auto 0.5rem auto;
}
/* iOS-like action sheet */
.action-sheet { background: transparent; border-radius: 14px; overflow: hidden; }
.action-sheet-item {
  display: block; width: 100%; min-height: 48px;
  padding: 14px 16px; text-align: center;
  font-size: 17px; font-weight: 600; color: #0f172a;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.action-sheet .action-sheet-item + .action-sheet-item { border-top: 1px solid rgba(15,23,42,0.06); }
.action-sheet-item:active, .action-sheet-item:hover { background: rgba(255,255,255,0.25); }

/* Cancel button iOS-like shape */
#modal-new-chooser .btn-secondary.w-full,
#modal-calendar-action .btn-secondary.w-full {
  border-radius: 14px !important;
  height: 44px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
/* Prevent iOS active grey overlay on Cancel when sheet opens under finger */
.mobile #modal-new-chooser .btn-secondary.w-full,
.mobile #modal-new-chooser .btn-secondary.w-full:hover,
.mobile #modal-new-chooser .btn-secondary.w-full:active {
  background: #dc2626 !important; /* keep red */
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
@keyframes slideInUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.day-due-item {
  padding: 0.5rem 0.5rem;
  border: 1px solid rgb(241 245 249);
  border-radius: 0.5rem;
  background: #fff;
}
.day-due-item:active { background: rgb(248 250 252); }
.day-due-title { font-weight: 600; color: rgb(30 41 59); }
.day-due-sub { font-size: 0.8125rem; color: rgb(71 85 105); }
.badge-planned { background: rgba(34,197,94,0.15); color: #16a34a; border-radius: 9999px; padding: 2px 6px; font-size: 11px; }
.badge-unplanned { background: rgba(239,68,68,0.12); color: #dc2626; border-radius: 9999px; padding: 2px 6px; font-size: 11px; }
.badge-urgent { background: rgba(251,191,36,0.2); color: #b45309; border-radius: 9999px; padding: 2px 6px; font-size: 11px; }

/* iPhone explicit: ensure full-width panel spacing and centered content */
.mobile #modal-edit-customer .bg-white,
.mobile #modal-edit-installation .bg-white,
.mobile #modal-edit-inspection .bg-white {
  width: 100% !important;
}

/* Calendar action modal background styling */
#modal-calendar-action .bg-white {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  animation: slideInUp 160ms ease-out;
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  z-index: 10002 !important;
}

/* Calendar action modal responsive styling - identical to modal-new-chooser */
body:not(.mobile) #modal-calendar-action .absolute.inset-x-0.bottom-0 {
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body:not(.mobile) #modal-calendar-action .bg-white {
  border-radius: 1rem !important; /* all four corners */
}

.mobile #modal-calendar-action .absolute.inset-x-0.bottom-0 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important; /* flush sheet to the screen bottom */
}
.mobile #modal-calendar-action .bg-white {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important; /* keep content above safe area */
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Logout confirmation modal background styling - identical to modal-new-chooser */
#modal-logout-confirm .bg-white,
#modal-delete-inspection .bg-white,
#modal-generic-confirm .modal-glass {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  animation: slideInUp 160ms ease-out;
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  z-index: 10002 !important;
}

/* Logout confirmation modal responsive styling - identical to modal-new-chooser */
body:not(.mobile) #modal-logout-confirm .absolute.inset-x-0.bottom-0,
body:not(.mobile) #modal-delete-inspection .absolute.inset-x-0.bottom-0,
body:not(.mobile) #modal-generic-confirm .absolute.inset-x-0.bottom-0 {
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body:not(.mobile) #modal-logout-confirm .bg-white,
body:not(.mobile) #modal-delete-inspection .bg-white,
body:not(.mobile) #modal-generic-confirm .modal-glass {
  border-radius: 1rem !important; /* all four corners */
}

.mobile #modal-logout-confirm .absolute.inset-x-0.bottom-0,
.mobile #modal-delete-inspection .absolute.inset-x-0.bottom-0,
.mobile #modal-generic-confirm .absolute.inset-x-0.bottom-0 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important; /* flush sheet to the screen bottom */
}
.mobile #modal-logout-confirm .bg-white,
.mobile #modal-delete-inspection .bg-white,
.mobile #modal-generic-confirm .modal-glass {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important; /* keep content above safe area */
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Contact details modal responsive styling - identical to logout modal */
body:not(.mobile) #modal-contact-details .absolute.inset-x-0.bottom-0 {
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body:not(.mobile) #modal-contact-details .bg-white {
  border-radius: 1rem !important; /* all four corners */
}

.mobile #modal-contact-details .absolute.inset-x-0.bottom-0 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important; /* flush sheet to the screen bottom */
}
.mobile #modal-contact-details .bg-white {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important; /* keep content above safe area */
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Contact details modal background styling */
#modal-contact-details .bg-white {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  animation: slideInUp 160ms ease-out;
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  z-index: 10002 !important;
}

/* Header clock (desktop only) */
body:not(.mobile) .header-clock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #fcc40c;
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08);
}
/* Hide clock on mobile */
.mobile .header-clock { display: none !important; }

/* Hide calendar status filter on mobile */
.mobile #calendar-status-filter { display: none !important; }

/* User approvals modal styling */
#modal-user-approvals .modal-glass {
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  z-index: 10002 !important;
}

/* Desktop: center the user approvals modal */
body:not(.mobile) #modal-user-approvals .absolute.inset-x-0.bottom-0 {
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

body:not(.mobile) #modal-user-approvals .modal-glass {
  border-radius: 1rem !important; /* all four corners on desktop */
}

/* Mobile: keep as bottom sheet */
.mobile #modal-user-approvals .absolute.inset-x-0.bottom-0 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important;
}

.mobile #modal-user-approvals .modal-glass {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.mobile #modal-user-approvals .p-6 {
  padding: var(--mobile-padding) !important;
}

.mobile #modal-user-approvals .btn {
  min-height: var(--touch-target-min) !important;
  padding: var(--touch-target-padding) !important;
}





/* Desktop: make the header sticky */
body:not(.mobile) header {
  position: sticky;
  top: 0;
  z-index: 30; /* below modals (z-50) but above content */
  background: #ffffff; /* ensure solid bg over content */
}

/* Ensure main content (including customer Start) is scrollable */
main { overflow-y: auto; }
body, html { height: 100%; }

/* iPhone: center logo and make header sticky */
.mobile header {
  position: sticky !important;
  top: env(safe-area-inset-top) !important;
  z-index: 30 !important;
}

/* Ensure black text on primary buttons inside customer day-due modal */
#modal-day-due .btn { color: #000 !important; }

/* Customer To-Do modal desktop/mobile responsive styling */
body:not(.mobile) #modal-customer-todos .absolute.inset-x-0.bottom-0 {
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

body:not(.mobile) #modal-customer-todos .modal-glass {
  border-radius: 1rem !important; /* all four corners on desktop */
  max-height: 80vh !important;
}

.mobile #modal-customer-todos .absolute.inset-x-0.bottom-0 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important;
}

.mobile #modal-customer-todos .modal-glass {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  max-height: 85vh !important;
}

.mobile #modal-customer-todos .p-6 {
  padding: 1rem !important;
}

.mobile #modal-customer-todos #customer-todos-content {
  max-height: 70vh !important;
  -webkit-overflow-scrolling: touch !important;
}

.mobile #modal-customer-todos .btn {
  min-height: 44px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
}



/* Date Picker Styles for Holidays and Weekends */
.date-picker::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Custom date picker styling for weekends and holidays */
.date-picker[type="date"]::-webkit-datetime-edit-fields-wrapper {
  background: transparent;
}

.date-picker[type="date"]::-webkit-datetime-edit {
  background: transparent;
}

/* Weekend styling (Saturday = 6, Sunday = 0) */
.date-picker[type="date"]::-webkit-datetime-edit-day-field:in-range::-webkit-datetime-edit-fields-wrapper {
  color: #dc2626; /* Red for weekends */
}

/* Holiday styling will be handled by JavaScript */
.date-picker.holiday {
  color: #dc2626 !important;
  font-weight: bold;
}

.date-picker.weekend {
  color: #dc2626 !important;
  font-weight: bold;
}

/* Calendar dropdown styling for weekends and holidays */
.date-picker::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* Style the calendar dropdown itself */
.date-picker::-webkit-calendar-picker-indicator {
  position: relative;
}

/* Custom calendar styling for weekends and holidays */
.date-picker::-webkit-calendar-picker-indicator::-webkit-calendar-picker {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Weekend days in calendar (Saturday = 6, Sunday = 0) */
.date-picker::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day:not([selected])[data-weekday="0"],
.date-picker::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day:not([selected])[data-weekday="6"] {
  color: #dc2626 !important;
  font-weight: bold;
}

/* Holiday days in calendar */
.date-picker::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day.holiday {
  color: #dc2626 !important;
  font-weight: bold;
  background-color: rgba(220, 38, 38, 0.1) !important;
}

/* Weekend days in calendar with holiday */
.date-picker::-webkit-calendar-picker-indicator::-webkit-calendar-picker-day.weekend.holiday {
  color: #dc2626 !important;
  font-weight: bold;
  background-color: rgba(220, 38, 38, 0.2) !important;
}



/* Customer To-Do modal content scroll */
#modal-customer-todos #customer-todos-content {
  max-height: calc(80vh - 64px) !important; /* subtract header inside modal */
  overflow-y: auto !important;
}

/* Defect badges */
.defect-ok { background: rgba(16,185,129,0.15); color: #059669; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.defect-warn { background: rgba(245,158,11,0.15); color: #b45309; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.defect-bad { background: rgba(239,68,68,0.15); color: #b91c1c; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; }

.mobile .header-main-row { 
  display: flex !important; 
  flex-direction: row !important; 
  align-items: center !important; 
  justify-content: center !important; /* center the logo */
  gap: 0.5rem !important; /* reduce gap from gap-4 */
}
.mobile .header-logo { 
  justify-content: center !important; /* center logo */
  width: auto !important; 
  flex: none !important; 
  align-self: center !important;
}

/* iPhone: move logout icon to right edge of header row */
.mobile .header-main-row { position: relative; }
.mobile #logout-icon { margin-left: auto !important; display: inline-flex !important; align-items: center !important; }

/* footer userinfo removed */

/* Remove main padding for centered creation dialogs */

#view-new-installation {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}

#view-new-inspection {
  position: absolute;
  top: 3.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}

/* New dialogs now use edit-modal structure; no mobile overrides needed */

/* (removed section) */

/* (removed sticky header overrides; handled by modal scrolling) */

/* Better wrapping for long diff content */
.version-diff .diff-values { word-break: break-word; }

/* Versions panel: fixed controls and scrollable list */
.versions-panel { position: relative; }
.versions-controls { position: sticky; background: #fff; z-index: 10; padding: 0.25rem 0; }
.versions-controls-bottom { bottom: 0; border-top: 1px solid rgb(226 232 240); margin-top: 0.5rem; }
.versions-list { max-height: 60vh; overflow-y: auto; padding-right: 0.25rem; }

/* === MODERN TOAST SYSTEM === */
#toast {
  position: fixed;
  right: var(--spacing-lg);
  bottom: var(--spacing-lg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  pointer-events: none;
  max-width: 420px;
}

.mobile #toast {
  bottom: calc(env(safe-area-inset-bottom) + var(--spacing-lg));
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  max-width: none;
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  color: var(--neutral-800);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  background: white;
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  animation: toast-slide-in 0.3s ease-out;
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.toast-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--neutral-400);
}

.toast-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Toast variants */
.toast-item.toast-success {
  background: var(--success-50);
  border-color: var(--success-200);
  color: var(--success-800);
}

.toast-item.toast-success::before {
  background: var(--success-500);
}

.toast-item.toast-error {
  background: var(--error-50);
  border-color: var(--error-200);
  color: var(--error-800);
}

.toast-item.toast-error::before {
  background: var(--error-500);
}

.toast-item.toast-warning {
  background: var(--warning-50);
  border-color: var(--warning-200);
  color: var(--warning-800);
}

.toast-item.toast-warning::before {
  background: var(--warning-500);
}

.toast-item.toast-info {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-800);
}

.toast-item.toast-info::before {
  background: var(--primary-500);
}

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
  line-height: var(--line-height-normal);
}

.toast-close {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-base);
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-item.toast-removing {
  animation: toast-slide-out 0.2s ease-in forwards;
}

/* Sticky modal action bar (bottom-right buttons) */
.modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem 0;
  background: #fff;
  border-top: 1px solid rgb(226 232 240);
}

/* Ensure equal heights for inputs in edit inspection form */
#form-edit-inspection input.input,
#form-edit-inspection select.input { height: 44px !important; }
#form-edit-inspection textarea.input {
  box-sizing: border-box !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
}

/* (Removed 75% height override; fixed height applied above) */

/* Dark mode support for sticky controls */
body.dark .versions-controls { background: #0f172a !important; }
body.dark .versions-controls-top { border-bottom-color: #1e293b !important; }
body.dark .versions-controls-bottom { border-top-color: #1e293b !important; }

/* Diff styles */
.version-diff { margin-top: 0.5rem; }
.diff-table { display: grid; grid-template-columns: max-content 1fr 20px 1fr; gap: 6px 8px; align-items: start; }
.diff-head { font-size: 0.75rem; font-weight: 600; color: rgb(71 85 105); padding-bottom: 4px; border-bottom: 1px solid rgb(226 232 240); display: flex; align-items: center; min-height: 1.75rem; }
.diff-row2 { display: contents; }
.diff-field { font-size: 0.8125rem; color: rgb(71 85 105); align-self: center; word-break: break-word; }
.diff-val { font-size: 0.875rem; display: flex; justify-content: center; word-break: break-word; }
.diff-head.center { justify-content: center; text-align: center; }
.badge-good { display: inline-block; padding: 2px 6px; border-radius: 9999px; background: rgba(34,197,94,0.15); color: #16a34a; font-weight: 600; }
.badge-bad { display: inline-block; padding: 2px 6px; border-radius: 9999px; background: rgba(239,68,68,0.12); color: #dc2626; text-decoration: line-through; }
.diff-head.diff-arrow { justify-content: center; font-size: 0.875rem; }
.diff-arrow { text-align: center; color: rgb(100 116 139); font-size: 0.875rem; line-height: 1; }
.label-muted { color: rgb(100 116 139); font-size: 0.75rem; margin-right: 6px; }

/* Mobile-friendly versions layout */
@media (max-width: 768px) {
  .diff-table { grid-template-columns: 1fr; gap: 6px 0; }
  .diff-head { display: none; }
  .diff-row2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    justify-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-radius: 10px;
    padding: 10px;
  }
  .diff-row2 .diff-field {
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgb(51 65 85);
    margin-bottom: 2px;
  }
  .diff-row2 .label-muted { display: none !important; }
  .diff-row2 .diff-val { justify-content: center; text-align: center; }
  .diff-row2 .diff-arrow { display: block; text-align: center; color: rgb(100 116 139); padding: 2px 0; }
}

/* Versions lists: tighter max-height on mobile and consistent padding */
.versions-list { max-height: 60vh; overflow-y: auto; padding-right: 0.25rem; }
@media (max-width: 768px) {
  .versions-list { max-height: 55vh !important; padding-right: 0.5rem !important; }
}

/* === MODERN TABLE SYSTEM === */
.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
}

.table thead {
  background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
}

.table thead th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--spacing-lg) var(--spacing-lg);
  border-bottom: 2px solid var(--neutral-200);
  position: relative;
  white-space: nowrap;
}

.table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.table thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.table tbody tr {
  transition: all var(--transition-fast);
  border-bottom: 1px solid var(--neutral-100);
}

.table tbody tr:hover {
  background: var(--neutral-50);
}

.table tbody tr:last-child {
  border-bottom: none;
}

.table tbody td {
  padding: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--neutral-700);
  vertical-align: middle;
  line-height: var(--line-height-normal);
}

.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-lg);
}

.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-lg);
}

/* Table variants */
.table-compact tbody td,
.table-compact thead th {
  padding: var(--spacing-md);
}

.table-compact {
  font-size: var(--font-size-xs);
}

/* Sortable table enhancements */
.table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
}

.table thead th.sortable:hover {
  background: var(--neutral-200);
  color: var(--neutral-800);
}

.table thead th.sortable:active {
  background: var(--neutral-300);
}

/* Sort indicators */
.sort-icon {
  font-size: var(--font-size-xs);
  margin-left: var(--spacing-sm);
  opacity: 0.5;
  transition: all var(--transition-fast);
}

.sort-icon.active {
  opacity: 1;
  color: var(--primary-600);
}

.sort-icon.asc::after {
  content: "↑";
}

.sort-icon.desc::after {
  content: "↓";
}

/* Table actions */
.table-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-300);
  background: white;
  color: var(--neutral-600);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.table-action-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
  border-color: var(--neutral-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.table-action-btn.primary {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-600);
}

.table-action-btn.primary:hover {
  background: var(--primary-600);
  border-color: var(--primary-700);
}

.table-action-btn.danger {
  background: var(--error-500);
  color: white;
  border-color: var(--error-600);
}

.table-action-btn.danger:hover {
  background: var(--error-600);
  border-color: var(--error-700);
}

/* Status indicators in tables */
.table-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.table-status.success {
  background: var(--success-100);
  color: var(--success-700);
}

.table-status.warning {
  background: var(--warning-100);
  color: var(--warning-700);
}

.table-status.error {
  background: var(--error-100);
  color: var(--error-700);
}

.table-status.neutral {
  background: var(--neutral-100);
  color: var(--neutral-700);
}

/* Responsive table wrapper */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: var(--radius-base);
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--radius-base);
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

/* Scrollable booking table in Buchungsbeleg modal */
.overflow-y-auto.max-h-96::-webkit-scrollbar {
  width: 8px;
}

.overflow-y-auto.max-h-96::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: var(--radius-base);
}

.overflow-y-auto.max-h-96::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--radius-base);
}

.overflow-y-auto.max-h-96::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

/* Ensure sticky header works properly in scrollable table */
.overflow-y-auto.max-h-96 thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 0 var(--neutral-200);
}

/* === MODERN CARD SYSTEM === */
.card {
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-xl);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--neutral-300);
  transform: translateY(-1px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--neutral-200);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-800);
  line-height: var(--line-height-tight);
  margin: 0;
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin-top: var(--spacing-xs);
  line-height: var(--line-height-normal);
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.card-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--neutral-100);
}

/* Card Variants */
.card-elevated {
  box-shadow: var(--shadow-lg);
  border: none;
}

.card-elevated:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.card-flat {
  box-shadow: none;
  border: 1px solid var(--neutral-200);
}

.card-primary {
  border-color: var(--primary-200);
  background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
}

.card-success {
  border-color: var(--success-200);
  background: linear-gradient(135deg, var(--success-50) 0%, white 100%);
}

.card-warning {
  border-color: var(--warning-200);
  background: linear-gradient(135deg, var(--warning-50) 0%, white 100%);
}

.card-error {
  border-color: var(--error-200);
  background: linear-gradient(135deg, var(--error-50) 0%, white 100%);
}

/* Compact Card */
.card-compact {
  padding: var(--spacing-lg);
}

.card-compact .card-header {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
}

.card-compact .card-title {
  font-size: var(--font-size-base);
}

/* Statistics Cards */
.stat-card {
  background: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-500) 0%, var(--accent-500) 100%);
}

.stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--primary-300);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-800);
  line-height: var(--line-height-tight);
}

.stat-value.stat-primary {
  color: var(--primary-600);
}

.stat-value.stat-success {
  color: var(--success-600);
}

.stat-value.stat-warning {
  color: var(--warning-600);
}

.stat-value.stat-error {
  color: var(--error-600);
}

/* Card Inner (Legacy support) */
.card-inner {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}
/* Calendar title toast holder */
.calendar-title-wrap { position: relative; }
.toast-calendar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast-calendar .toast-item {
  pointer-events: auto;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  color: #0f172a;
  font-weight: 600;
  background: #f4f4f4;
  border: 1px solid #e5e5e5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  cursor: pointer;
}

/* Mobile calendar toast positioning */
.mobile .toast-calendar {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 1rem) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

.mobile .toast-calendar .toast-item {
  text-align: center !important;
  max-width: 90vw !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
}

/* iPhone: add slight extra right padding for day-due items to keep buttons away from edge */
.mobile #modal-day-due .day-due-item {
  padding-right: 0.75rem !important;
}

/* Inventory tabs styling for modern look */
.inventory-tabs { gap: 0.25rem; border-bottom: none; background: rgb(248 250 252); padding: 0.5rem; border-radius: 0.5rem; }
.inventory-tabs .tab-btn { background: transparent; border: none; color: rgb(100 116 139); font-weight: 600; padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.inventory-tabs .tab-btn.active { background: #fff; color: rgb(30 41 59); box-shadow: 0 1px 2px rgba(0,0,0,0.06); border: 1px solid rgb(226 232 240); }
.inventory-tabs .tab-btn:hover { background: rgba(148,163,184,0.08); }

/* Search input refinement */
.input-search { border-color: rgb(203 213 225); background: #fff; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.input-search:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }

/* Ensure table headers are centered */
.table th.text-center { text-align: center !important; }

/* Accordion styles */
.accordion-header { transition: background-color 0.15s ease, color 0.15s ease; }
.accordion-header:hover { background: rgb(248 250 252); }
.accordion-panel { background: #fff; border-top: 1px solid rgb(241 245 249); }
.accordion-header, .inspection-acc-header { -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer; }
.mobile .accordion-header, .mobile .inspection-acc-header { min-height: 44px !important; }

/* Lock background scroll when modal is open */
body.modal-open { overflow: hidden !important; }

/* Long panel UX: sticky subheader + back-to-top */
.accordion-panel {
  max-height: 70vh;
  overflow-y: auto;
  position: relative;
}
.panel-subheader {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid rgb(226 232 240);
  padding: 0.5rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-subheader-title { font-weight: 600; color: rgb(51 65 85); font-size: 0.9375rem; }
.panel-back-to-top {
  position: sticky;
  bottom: 0.5rem;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}
.panel-back-to-top .to-top-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.panel-back-to-top.show .to-top-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Utility: prevent text wrapping */
.nowrap { white-space: nowrap !important; }

/* Navigation button styling */
[data-navigate-installation] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: #fcc40c !important; /* Primary yellow color */
  color: #000 !important;
  border: none !important;
  transition: background-color 0.15s ease !important;
}

[data-navigate-installation]:hover {
  background: #e0b20b !important; /* Darker yellow for hover */
}

[data-navigate-installation] svg {
  width: 14px !important;
  height: 14px !important;
}

/* === MODERN BADGE SYSTEM === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Badge variants */
.badge-primary {
  background: var(--primary-100);
  color: var(--primary-700);
  border-color: var(--primary-200);
}

.badge-secondary {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border-color: var(--neutral-200);
}

.badge-success, .badge-active {
  background: var(--success-100);
  color: var(--success-700);
  border-color: var(--success-200);
}

.badge-warning {
  background: var(--warning-100);
  color: var(--warning-700);
  border-color: var(--warning-200);
}

.badge-error, .badge-danger {
  background: var(--error-100);
  color: var(--error-700);
  border-color: var(--error-200);
}

.badge-inactive {
  background: var(--neutral-100);
  color: var(--neutral-500);
  border-color: var(--neutral-200);
}

/* Badge sizes */
.badge-sm {
  padding: 2px var(--spacing-xs);
  font-size: 0.625rem;
}

.badge-lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* Status badges with icons */
.badge-status {
  position: relative;
  padding-left: var(--spacing-lg);
}

.badge-status::before {
  content: "";
  position: absolute;
  left: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* Specialized status badges */
.badge-planned, .defect-ok {
  background: var(--success-100);
  color: var(--success-700);
  border-color: var(--success-200);
}

.badge-unplanned, .defect-bad {
  background: var(--error-100);
  color: var(--error-700);
  border-color: var(--error-200);
}

.badge-urgent, .defect-warn {
  background: var(--warning-100);
  color: var(--warning-700);
  border-color: var(--warning-200);
}

/* Legacy badge support */
.badge-good {
  background: var(--success-100);
  color: var(--success-700);
  border-color: var(--success-200);
}

.badge-bad {
  background: var(--error-100);
  color: var(--error-700);
  border-color: var(--error-200);
  text-decoration: line-through;
  opacity: 0.7;
}

/* Interactive badges */
.badge-interactive {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.badge-interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: currentColor;
}

.badge-interactive:active {
  transform: translateY(0);
}

/* Toggle switch for active state */
.toggle-switch {
  width: 44px; height: 24px; border-radius: 9999px;
  background: rgba(148,163,184,0.5);
  position: relative; cursor: pointer;
  display: inline-flex; align-items: center; transition: background-color .15s ease;
  border: 1px solid rgba(148,163,184,0.35);
}
.toggle-switch[aria-checked="true"], .toggle-switch.active { background: #22c55e; border-color: #16a34a; }
.toggle-switch .toggle-knob {
  width: 20px; height: 20px; border-radius: 9999px; background: #fff;
  position: absolute; left: 2px; transition: left .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle-switch[aria-checked="true"] .toggle-knob, .toggle-switch.active .toggle-knob { left: 22px; }



/* Calendar Styles */
#calendar-container.calendar-grid, #customer-calendar-container.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 1px !important;
  background: rgb(226 232 240) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}

/* Customer compact calendar - use mobile size */
#customer-calendar-container.calendar-grid.compact .calendar-day {
  min-height: 48px !important;
  padding: 0.25rem !important;
  font-size: 0.75rem !important;
}

#customer-calendar-container.calendar-grid.compact .calendar-weekday {
  font-size: 0.7rem !important;
  padding: 0.375rem !important;
}

#customer-calendar-container.calendar-grid.compact {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: rgb(226 232 240);
  border-radius: 0.5rem;
  overflow: hidden;
}

.calendar-day {
  background: var(--cal-bg-day) !important;
  min-height: 60px !important;
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
  position: relative !important;
}

.calendar-weekday {
  background: var(--cal-bg-weekday) !important;
  color: var(--cal-text-weekday) !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.375rem 0 !important;
}

.calendar-day.other-month {
  background: rgb(248 250 252) !important;
  color: rgb(148 163 184) !important;
}

.calendar-day.today {
  background: #fde68a !important;
  font-weight: 600 !important;
}

.calendar-day.holiday {
  background: var(--cal-bg-holiday) !important;
}

.calendar-day.holiday .calendar-day-number {
  color: var(--cal-text-holiday) !important;
}

.calendar-holiday-name {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: calc(0.7rem - 2px) !important;
  color: rgb(185 28 28) !important; /* red-700 */
  text-align: center !important;
  pointer-events: none !important;
}

/* KW display bottom-right on Mondays */
.calendar-week-number {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  font-size: 0.375em !important; /* increased by 50% from 0.25em */
  color: var(--cal-weeknum) !important;
}

.calendar-day.has-due {
  background: var(--cal-bg-has-due) !important;
}

.calendar-day.has-due.today {
  background: var(--cal-bg-has-due-today) !important;
}

.calendar-day-number {
  font-weight: 500 !important;
  margin-bottom: 0.25rem !important;
}

/* Minimal count indicator for mobile calendar cells */
.calendar-count-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9999px !important;
  background: rgb(51 65 85) !important; /* slate-700 */
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.mobile .calendar-count-dot { position: absolute !important; top: 4px !important; right: 4px !important; }

/* Weekend (SA, SO) day numbers in red */
.calendar-day.weekend .calendar-day-number {
  color: rgb(185 28 28) !important; /* red-700 */
}

.calendar-due-item {
  font-size: 0.7rem !important;
  color: rgb(220 38 38) !important;
  background: rgb(254 226 226) !important;
  padding: 0.0625rem 0.25rem !important;
  border-radius: 0.25rem !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.calendar-due-item:hover {
  background: rgb(254 202 202) !important;
}

.calendar-due-item.urgent {
  background: rgb(254 202 202) !important;
  color: rgb(185 28 28) !important;
  font-weight: 500 !important;
}

/* Planned items appear green */
.calendar-due-item.planed {
  background: rgb(220 252 231) !important; /* green-100 */
  color: rgb(22 101 52) !important; /* green-700 */
}

/* iPhone: compact calendar entries */
.mobile .calendar-day {
  padding: 0.25rem !important;
  min-height: 48px !important;
}
.mobile .calendar-due-item { font-size: 0.625rem !important; padding: 0.0625rem 0.25rem !important; }
.mobile .calendar-due-item img { width: 14px !important; height: 14px !important; }
.mobile .calendar-day-number { font-size: 0.75rem !important; }
.mobile .calendar-holiday-name { font-size: 0.6rem !important; }
.mobile .calendar-week-number { font-size: 0.3em !important; }

.calendar-due-item.planed.urgent {
  background: rgb(187 247 208) !important; /* green-200 when urgent */
  color: rgb(21 128 61) !important; /* green-600 */
}

/* Mobile-only elements */
.mobile-only {
  display: none;
}
.mobile .mobile-only {
  display: inline-flex !important;
}

/* Hide desktop logout on mobile */
.mobile #logout-icon {
  display: none !important;
}

/* ===== MOBILE STYLES - CONSOLIDATED ===== */

/* Mobile Touch Targets */
.mobile .nav-btn,
.mobile .btn,
.mobile .btn-secondary,
.mobile .modal-close-btn {
  padding: var(--touch-target-padding) !important;
  min-height: var(--touch-target-min) !important;
}

/* Fix for "neue.." dialog button glitch - ensure buttons are not covered */
.mobile .btn-link { 
  padding: 0.375rem 0.5rem !important; 
}

/* Fix for "neue..." dialog button glitch - replace with action-sheet-item style */

.mobile #view-new-installation .modal-close-btn,
.mobile #view-new-inspection .modal-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: white !important;
  background: #dc2626 !important;
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  transition: none !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}


.mobile #view-new-installation .modal-close-btn:hover,
.mobile #view-new-inspection .modal-close-btn:hover {
  background: #dc2626 !important; /* no hover color change to avoid iOS hover sticky */
  transform: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

.mobile #view-new-customer .modal-close-btn:active,
.mobile #view-new-installation .modal-close-btn:active,
.mobile #view-new-inspection .modal-close-btn:active {
  background: #dc2626 !important;
  transform: none !important;
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.02) !important; /* subtle press without layout change */
}

/* Ensure button container doesn't interfere */
.mobile #view-new-customer .flex.items-center.gap-2,
.mobile #view-new-installation .flex.items-center.gap-2,
.mobile #view-new-inspection .flex.items-center.gap-2 {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  will-change: transform !important;
  transform: translateZ(0) !important; /* promote to own layer to avoid iOS repaint artifacts */
}

/* Ensure SVG icons in modal-close-btn are properly styled */
.mobile #view-new-customer .modal-close-btn svg,
.mobile #view-new-installation .modal-close-btn svg,
.mobile #view-new-inspection .modal-close-btn svg {
  color: white !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* iOS tap-highlight and pointer events fix for icon-only buttons */
.mobile #view-new-customer .modal-close-btn *,
.mobile #view-new-installation .modal-close-btn *,
.mobile #view-new-inspection .modal-close-btn * {
  -webkit-tap-highlight-color: transparent !important;
}
.mobile #view-new-customer .modal-close-btn svg,
.mobile #view-new-installation .modal-close-btn svg,
.mobile #view-new-inspection .modal-close-btn svg {
  pointer-events: none !important;
}

/* Unify modal-close-btn interaction on touch devices (no transforms like logout/action-sheet) */
@media (hover: none) {
  .mobile .modal-close-btn,
  .mobile .modal-close-btn:hover,
  .mobile .modal-close-btn:active {
    transform: none !important;
    box-shadow: none !important;
  }
  .mobile .modal-close-btn {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
  }
}

/* Mobile Form Elements */
.mobile .input,
.mobile input[type="date"],
.mobile input[type="number"],
.mobile select,
.mobile textarea {
  padding: var(--mobile-padding) !important;
  font-size: var(--mobile-font-size-base) !important; /* Prevents zoom on iOS */
  min-height: var(--touch-target-min) !important;
}

/* Mobile Cards */
.mobile .card {
  padding: var(--mobile-padding) !important;
  margin-bottom: var(--mobile-margin) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.mobile .card-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* Show "Monatsübersicht" text on all devices */
section:first-child .card-title,
#view-dashboard section:first-child h2.card-title {
  display: block !important;
}

/* Mobile Tables and Lists */
.mobile .table {
  display: none !important;
  font-size: var(--mobile-font-size-small) !important;
}

.mobile .table thead th {
  font-size: 0.625rem !important;
  padding: 0.375rem 0.5rem !important;
}

.mobile .table tbody td {
  font-size: var(--mobile-font-size-small) !important;
  padding: 0.375rem 0.5rem !important;
}

/* Mobile List Views */
.mobile #inspections-list,
.mobile #customers-list {
  display: block !important;
}

.mobile .inspections-table-container {
  display: none !important;
}

/* Mobile Form Controls */
.mobile #inspection-filter {
  display: none !important;
}

.mobile #inspection-search {
  width: 75% !important; /* Decrease search field width by 25% on mobile */
}

/* Mobile Pagination */
.mobile .pagination-text {
  display: none !important;
}

.mobile .pagination-icon {
  display: inline-block !important;
}

/* Desktop Pagination */
.pagination-text {
  display: inline-block;
}

.pagination-icon {
  display: none;
}

/* Fix pagination layout on mobile - ensure horizontal alignment */
.mobile .pagination {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.mobile #inspection-page-info {
  order: 2 !important;
  flex-shrink: 0 !important;
}

.mobile .calendar-day {
  min-height: 50px !important;
  padding: 0.25rem !important;
  font-size: 0.75rem !important;
}

.mobile .calendar-day-number {
  font-size: 0.75rem !important;
}

.mobile .calendar-due-item {
  font-size: 0.625rem !important;
  padding: 0.125rem !important;
}

.mobile .badge {
  font-size: 0.625rem !important;
  padding: 0.125rem 0.375rem !important;
}

/* Mobile-optimized calendar navigation buttons */
.mobile .btn-secondary {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
}

.mobile .btn-secondary img {
  width: 20px !important;
  height: 20px !important;
}

.mobile .btn-secondary:hover {
  background: rgb(248 250 252) !important;
}

.mobile .btn-secondary:active {
  background: rgb(241 245 249) !important;
  transform: scale(0.95) !important;
}

/* Mobile layout adjustments - Apple Design Philosophy */
.mobile nav {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1rem !important;
}



/* Mobile calendar navigation layout */
.mobile .flex.items-center.gap-2 {
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.mobile .flex.items-center.gap-2 .btn-secondary {
  flex: 1 !important;
  min-width: auto !important;
  max-width: 60px !important;
}

.mobile nav .nav-btn {
  min-width: 0 !important;
  justify-content: center !important;
  background: rgba(248, 250, 252, 0.6) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 1rem !important;
  margin: 0 !important;
  min-height: 40px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  color: rgb(71 85 105) !important;
  width: 60px !important;
  height: 30px !important;
  backdrop-filter: blur(8px) !important;
}

/* Mobile nav layout - distribute buttons evenly */
.mobile nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Mobile: reduce header padding and hide user info */
.mobile header .max-w-7xl {
  padding: 0.5rem 1rem 0 1rem !important; /* reduced from py-4 */
}

.mobile .header-user-info {
  display: none !important; /* completely hide user info section */
}

/* Mobile: reduce margin below header row */
.mobile .header-main-row {
  margin-bottom: 0 !important; /* removed mb-4 completely */
}

/* Mobile: reduce main content top padding */
.mobile main {
  padding-top: 0 !important; /* completely remove top padding */
  padding-bottom: 0.75rem !important; /* keep some bottom padding */
}

.mobile nav .nav-btn:hover {
  background: rgba(241, 245, 249, 0.8) !important;
  transform: scale(1.05) !important;
  backdrop-filter: blur(12px) !important;
}

.mobile nav .nav-btn:active {
  background: rgba(226, 232, 240, 0.7) !important;
  transform: scale(0.98) !important;
  backdrop-filter: blur(10px) !important;
}

.mobile nav .nav-btn.active {
  background: rgba(37, 99, 235, 0.9) !important;
  color: white !important;
  font-weight: 600 !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

/* Mobile home button - smaller width */
.mobile nav .nav-btn[data-view="dashboard"] {
  width: 44px !important;
  padding: 0.5rem !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

.mobile nav .nav-btn[data-view="dashboard"] img {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

/* Mobile logout button - red icon only */
.mobile #logout-nav {
  color: #dc2626 !important; /* red-600 */
}

.mobile #logout-nav:hover {
  color: #b91c1c !important; /* red-700 */
}

.mobile #logout-nav:active {
  color: #991b1b !important; /* red-800 */
}

.mobile header {
  padding: 0 !important; /* no header padding */
}

.mobile main {
  padding: 0.75rem !important;
}

.mobile header .max-w-7xl {
  padding: 0.125rem 1rem !important; /* very minimal padding for header */
}

.mobile main .max-w-7xl {
  padding: 0.75rem !important;
}

.mobile header {
  border-bottom: 1px solid rgb(226 232 240) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

/* Mobile list views */
.mobile #due-list,
.mobile #customers-list {
  display: block !important;
}

/* Mobile modal adjustments */
.mobile #modal-edit-customer,
.mobile #modal-edit-installation,
.mobile #modal-edit-inspection {
  padding: 0.5rem !important;
}

/* Mobile header improvements */
.mobile header .flex-col {
  gap: 0.5rem !important;
}

.mobile header .text-xs {
  font-size: 0.75rem !important;
}

/* Mobile login page improvements */
@media (max-width: 640px) {
  .min-h-screen.flex {
    padding: 1rem !important;
  }
  
  .max-w-md {
    width: 100% !important;
  }
  
  .bg-white.rounded-xl {
    padding: 1rem !important;
  }
}

.mobile #modal-edit-customer .bg-white,
.mobile #modal-edit-installation .bg-white,
.mobile #modal-edit-inspection .bg-white {
  max-width: 95vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 1rem !important;
}

/* Mobile form adjustments */
.mobile form {
  gap: 1rem !important;
}

.mobile form .col-span-2 {
  grid-column: span 1 !important;
}

.mobile form .sm\:col-span-2 {
  grid-column: span 1 !important;
}

.mobile form .sm\:grid-cols-2 {
  grid-template-columns: 1fr !important;
}

.mobile form .sm\:grid-cols-3 {
  grid-template-columns: 1fr !important;
}

/* Mobile toast */
.mobile #toast {
  top: calc(env(safe-area-inset-top) + 1rem) !important;
  bottom: auto !important;
  right: 1rem !important;
  left: 1rem !important;
  justify-content: center !important;
  align-items: center !important;
  max-height: calc(100vh - env(safe-area-inset-top) - 2rem) !important;
  overflow-y: visible !important;
}

.mobile #toast .toast-item {
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
  text-align: center !important;
  max-width: 90% !important;
  min-height: var(--touch-target-min) !important;
  word-wrap: break-word !important;
  /* Ensure touch target for dismissing */
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Ensure mobile toasts stack properly with new system */
.mobile #toast .toast-item:not(:last-child) {
  margin-bottom: 0.5rem !important;
}



/* Mobile dock button optimization */
.mobile .dock-btn {
  min-height: var(--touch-target-min) !important;
  min-width: var(--touch-target-min) !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Sortable table styles */
.sort-icon {
  font-size: 0.75rem;
  margin-left: 0.25rem;
  opacity: 0.5;
}

.sort-icon.active {
  opacity: 1;
}

.sort-icon.asc::after {
  content: "↑";
}

.sort-icon.desc::after {
  content: "↓";
}

/* Static width for calendar month display */
#calendar-month {
  width: 145px !important;
  text-align: center !important;
  display: inline-block !important;
}

/* Mobile calendar month selector optimizations */
.mobile #calendar-month {
  width: 120px !important;
  padding: 0.5rem !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
}

.mobile #calendar-month:hover {
  background: rgb(248 250 252) !important;
}

.mobile #calendar-month:active {
  background: rgb(241 245 249) !important;
  transform: scale(0.95) !important;
}

/* Mobile month/year selector modal optimizations */
.mobile #modal-month-selector .bg-white {
  max-width: 95vw !important;
  max-height: 90vh !important;
  padding: 1.5rem !important;
  margin: 1rem !important;
}

.mobile #modal-month-selector .text-3xl {
  font-size: 2rem !important;
}

.mobile #modal-month-selector .min-w-\[120px\] {
  min-width: 100px !important;
}

.mobile #slider-prev,
.mobile #slider-next {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0.75rem !important;
  touch-action: manipulation !important;
}

.mobile #slider-prev:active,
.mobile #slider-next:active {
  transform: scale(0.9) !important;
  background: rgb(241 245 249) !important;
}

.mobile #slider-ok {
  min-height: 48px !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  touch-action: manipulation !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #2563eb !important;
  color: white !important;
  border: none !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.mobile #slider-ok:active {
  transform: scale(0.95) !important;
  background: #1d4ed8 !important;
}

/* Mobile calendar navigation layout improvements - Apple Design */
.mobile .flex.items-center.gap-2 {
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1rem !important;
}

.mobile .flex.items-center.gap-2 .btn-secondary {
  flex: none !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  padding: 0.5rem !important;
  border-radius: 0.5rem !important;
  background: rgb(248 250 252) !important;
  border: 1px solid rgb(226 232 240) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.15s ease !important;
}

.mobile .flex.items-center.gap-2 .btn-secondary:hover {
  background: rgb(241 245 249) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.mobile .flex.items-center.gap-2 .btn-secondary:active {
  background: rgb(226 232 240) !important;
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.mobile #calendar-month {
  flex: 1 !important;
  min-width: 100px !important;
  max-width: 140px !important;
  background: rgb(248 250 252) !important;
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 0.5rem !important;
  margin: 0 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.15s ease !important;
}

.mobile #calendar-month:hover {
  background: rgb(241 245 249) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.mobile #calendar-month:active {
  background: rgb(226 232 240) !important;
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Mobile calendar controls spacing */
.mobile .justify-end {
  justify-content: center !important;
}

.mobile .mb-4 {
  margin-bottom: 1rem !important;
}

/* Mobile contact details button optimizations */
.mobile .btn-secondary[data-contact-details] {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
  background: rgb(248 250 252) !important;
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.15s ease !important;
}

.mobile .btn-secondary[data-contact-details]:hover {
  background: rgb(241 245 249) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.mobile .btn-secondary[data-contact-details]:active {
  background: rgb(226 232 240) !important;
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.mobile .btn-secondary[data-contact-details] img {
  width: 16px !important;
  height: 16px !important;
}

/* Mobile contact details modal optimizations - removed conflicting rules that override bottom sheet behavior */

.mobile #modal-contact-details .text-lg {
  font-size: 1.25rem !important;
}

.mobile #modal-contact-details .text-base {
  font-size: 1rem !important;
}

.mobile #modal-contact-details .space-y-4 > div {
  margin-bottom: 1.5rem !important;
}

.mobile #modal-contact-details .space-y-4 > div:last-child {
  margin-bottom: 0 !important;
}

.mobile #modal-contact-details a[href^="mailto:"],
.mobile #modal-contact-details a[href^="tel:"] {
  font-size: 1rem !important;
  padding: 0.5rem 0 !important;
  display: inline-block !important;
  min-height: 44px !important;
  touch-action: manipulation !important;
}

.mobile #modal-contact-details a[href^="mailto:"]:active,
.mobile #modal-contact-details a[href^="tel:"]:active {
  transform: scale(0.95) !important;
}

/* Mobile contact details layout improvements */
.mobile .flex.items-center.justify-between {
  gap: 0.75rem !important;
  padding: 0.25rem 0 !important;
}

.mobile .flex.items-center.justify-between span {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile Dock Menu */
#mobile-dock {
  display: none;
}

.mobile #mobile-dock {
  display: block !important;
}

/* iPhone: make logout icon red while keeping white background */
.mobile #mobile-dock a[aria-label="Abmelden"] svg {
  color: #dc2626 !important; /* red-600 */
}
.mobile #mobile-dock a[aria-label="Abmelden"]:hover svg {
  color: #b91c1c !important; /* red-700 */
}
.mobile #mobile-dock a[aria-label="Abmelden"]:active svg {
  color: #991b1b !important; /* red-800 */
}

/* iPhone: hide 'Admin' text label under admin badge in dock */
.mobile #mobile-dock #admin-badge-mobile .dock-label {
  display: none !important;
}

/* iPhone: double the admin badge icon size in dock */
.mobile #mobile-dock #admin-badge-mobile svg {
  width: 40px !important;
  height: 40px !important;
}

/* iPhone: admin badge color by role */
.mobile #mobile-dock #admin-badge-mobile[data-admin="1"] svg { color: #16a34a !important; }
.mobile #mobile-dock #admin-badge-mobile[data-admin="1"]:hover svg { color: #15803d !important; }
.mobile #mobile-dock #admin-badge-mobile[data-admin="1"]:active svg { color: #166534 !important; }
.mobile #mobile-dock #admin-badge-mobile[data-admin="0"] svg { color: #dc2626 !important; }
.mobile #mobile-dock #admin-badge-mobile[data-admin="0"]:hover svg { color: #b91c1c !important; }
.mobile #mobile-dock #admin-badge-mobile[data-admin="0"]:active svg { color: #991b1b !important; }

.dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: rgb(71 85 105);
  transition: all 0.2s ease;
  min-height: 60px;
  min-width: 60px;
  -webkit-tap-highlight-color: transparent;
}

.dock-btn:hover {
  background: rgba(148, 163, 184, 0.1);
  color: rgb(30 41 59);
  transform: scale(1.05);
}

.dock-btn:active {
  background: rgba(148, 163, 184, 0.2);
  transform: scale(0.95);
}

.dock-btn.active {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

.dock-btn svg {
  display: block;
  transition: transform 0.2s ease;
}




.dock-btn:hover svg {
  transform: scale(1.1);
}

.dock-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure main content doesn't overlap with dock */
.mobile main {
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important; /* leave room for dock + user info */
}

/* Hide top navigation on mobile */
.mobile nav {
  display: none !important;
}

.mobile header {
  display: none !important;
}

/* Statistics Cards for Billing Dashboard */
.stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  transition: box-shadow 0.2s;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
}

.stat-value.stat-primary {
  color: #3b82f6;
}

.card-inner {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 1rem;
}

/* Vertical Tab System */
.user-tab-btn {
  transition: all 0.2s ease;
  border-radius: 0.375rem;
}

.user-tab-btn:hover {
  background-color: rgba(148, 163, 184, 0.1);
  color: rgb(30, 41, 59);
}

.user-tab-btn.active {
  background-color: transparent;
  color: rgb(30, 41, 59);
  font-size: 1.125rem; /* +1 size (from 1rem to 1.125rem) */
  font-weight: 700; /* bold */
  border-left: 3px solid #fcc40c; /* same yellow as sidebar */
}

.user-tab-btn.active:hover {
  background-color: rgba(148, 163, 184, 0.1);
}

.user-tab-panel {
  display: block;
}

.user-tab-panel.hidden {
  display: none;
}

/* Database Vertical Tab System */
.database-tab-btn {
  transition: all 0.2s ease;
  border-radius: 0.375rem;
}

.database-tab-btn:hover {
  background-color: rgba(148, 163, 184, 0.1);
  color: rgb(30, 41, 59);
}

.database-tab-btn.active {
  background-color: transparent;
  color: rgb(30, 41, 59);
  font-size: 1.125rem; /* +1 size (from 1rem to 1.125rem) */
  font-weight: 700; /* bold */
  border-left: 3px solid #fcc40c; /* same yellow as sidebar */
}

.database-tab-btn.active:hover {
  background-color: rgba(148, 163, 184, 0.1);
}

.database-tab-panel {
  display: block;
}

.database-tab-panel.hidden {
  display: none;
}