/* AstomOS Design System - Modern Edition */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Фоны */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-base: #F1F5F9;
  --bg-card: rgba(255,255,255,0.9);
  --bg-card-hover: rgba(248,250,252,1);
  --bg-glass: rgba(15,23,42,0.03);

  /* Градиенты */
  --gradient-brand: #3B82F6;
  --gradient-header: #0F172A;
  --gradient-accent: linear-gradient(90deg,
    rgba(59,130,246,0.1) 0%,
    rgba(139,92,246,0.08) 50%,
    rgba(244,63,94,0.06) 100%
  );
  --gradient-mesh: rgba(15,23,42,0.02);
  --gradient-glow: rgba(59,130,246,0.08);

  /* Цвета текста */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-placeholder: #CBD5E1;
  --text-gradient: linear-gradient(135deg, #1E293B 0%, #475569 100%);

  /* Границы */
  --border-color: rgba(15,23,42,0.08);
  --border-color-strong: rgba(15,23,42,0.15);
  --border-glow: rgba(59,130,246,0.2);

  /* Тени */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
  --shadow-card: 0 4px 12px rgba(15,23,42,0.06);
  --shadow-hover: 0 8px 24px rgba(15,23,42,0.1);
  --shadow-glow: 0 0 20px rgba(59,130,246,0.12);
  
  /* Размеры */
  --max-width: 1540px;
  --border-radius-sm: 12px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  
  /* Цвета разделов - яркие насыщенные */
  --color-tours: #3B82F6;
  --color-tours-glow: rgba(59,130,246,0.4);
  --color-cars: #F43F5E;
  --color-cars-glow: rgba(244,63,94,0.4);
  --color-clients: #10B981;
  --color-clients-glow: rgba(16,185,129,0.4);
  --color-guides: #A855F7;
  --color-guides-glow: rgba(168,85,247,0.4);
  --color-users: #F59E0B;
  --color-users-glow: rgba(245,158,11,0.4);
  --color-settings: #8B5CF6;
  --color-settings-glow: rgba(139,92,246,0.4);
  --color-reports: #22C55E;
  --color-reports-glow: rgba(34,197,94,0.4);
  --color-finance: #EC4899;
  --color-finance-glow: rgba(236,72,153,0.4);
  --color-marketing: #A78BFA;
  --color-marketing-glow: rgba(167,139,250,0.4);
  --color-calendar: #14B8A6;
  --color-calendar-glow: rgba(20,184,166,0.4);
  --color-accounting: #FBBF24;
  --color-accounting-glow: rgba(251,191,36,0.4);
  --color-sources: #8B5CF6;
  --color-sources-glow: rgba(139,92,246,0.4);
  --color-hotels: #EC4899;
  --color-hotels-glow: rgba(236,72,153,0.4);
  --color-services: #F97316;
  --color-services-glow: rgba(249,115,22,0.4);
  --color-bookings: #6366F1;
  --color-bookings-glow: rgba(99,102,241,0.4);
  --color-tasks: #06B6D4;
  --color-tasks-glow: rgba(6,182,212,0.4);
  --color-danger: #EF4444;
  --color-danger-glow: rgba(239,68,68,0.4);
  --color-documents: #FBBF24;
  --color-documents-glow: rgba(251,191,36,0.4);
  --color-support: #06B6D4;
  --color-support-glow: rgba(6,182,212,0.4);
  --color-guide-cabinets: #6366F1;
  --color-guide-cabinets-glow: rgba(99,102,241,0.4);
  --color-salary: #0EA5E9;
  --color-salary-glow: rgba(14,165,233,0.4);

  /* Анимации */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  background: #F1F5F9;
  /* Prevent zoom on mobile */
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F1F5F9;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Noise texture overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.008;
  pointer-events: none;
  z-index: 1000;
}

/* TopBar Styles */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
}

@media (max-width: 1024px) {
  .top-bar {
    margin-left: 0;
    background: #1E293B;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* Белый текст на мобильном топ-баре */
  .top-bar-brand {
    color: #FFFFFF;
  }

  .brand-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
  }

  .nav-back-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: #FFFFFF;
  }

  .nav-back-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #FFFFFF;
  }

  /* Мобильная кнопка меню на темном фоне */
  .mobile-menu-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
  }

  .mobile-menu-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
  }

  .hamburger-line {
    background: #FFFFFF;
  }

  /* Все кнопки в mobile-actions на темном фоне */
  .notification-btn,
  .messages-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: #FFFFFF;
  }

  .notification-btn:hover,
  .messages-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    color: #FFFFFF;
  }

  .notification-btn ion-icon,
  .messages-btn ion-icon {
    color: #FFFFFF;
  }

  /* Кнопка incomplete-apps на темном фоне */
  .incomplete-apps-btn.no-issues {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: #FFFFFF;
  }

  .incomplete-apps-btn.no-issues:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    color: #FFFFFF;
  }

  .incomplete-apps-btn.no-issues ion-icon {
    color: #FFFFFF;
  }

  /* Кнопка incomplete-groups на темном фоне (когда есть проблемы - оставляем оранжевой) */
  /* Если нет проблем - делаем белой как другие кнопки */
  .incomplete-groups-btn.no-issues {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: #FFFFFF;
  }

  .incomplete-groups-btn.no-issues:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    color: #FFFFFF;
  }

  .incomplete-groups-btn.no-issues ion-icon {
    color: #FFFFFF;
  }

  /* Badge backgrounds - darker to stand out on dark top-bar */
  .notification-badge,
  .messages-badge,
  .incomplete-apps-badge,
  .incomplete-groups-badge {
    border-color: #1E293B;
  }

  /* Page header в top-bar на мобильных */
  .page-header-nav .page-title {
    color: #FFFFFF;
  }

  .page-header-nav .page-subtitle {
    color: rgba(255,255,255,0.7);
  }

  .page-header-icon {
    background: rgba(255,255,255,0.15);
  }
}

.top-bar-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.desktop-spacer {
  flex: 1;
}

@media (max-width: 1024px) {
  .desktop-spacer {
    display: none;
  }
}

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.3s var(--ease-out-expo);
}

.top-bar-brand:hover {
  transform: scale(1.02);
}

.brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  color: #FFFFFF;
}

.brand-badge ion-icon {
  color: #FFFFFF;
}

.brand-badge::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: #3B82F6;
  opacity: 0.4;
  filter: blur(8px);
  z-index: -1;
}

.brand-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Page Header in Navbar */
.page-header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.25s var(--ease-out-expo);
}

.nav-back-btn ion-icon {
  font-size: 20px;
}

.nav-back-btn:hover {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.3);
  color: var(--text-primary);
  transform: translateX(-2px);
}

.page-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.page-header-icon ion-icon {
  color: #FFFFFF;
}

.page-header-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Page Description */
.page-description {
  margin-bottom: 32px;
  animation: fadeInUp 0.6s var(--ease-out-expo);
}

.page-description p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.quick-search {
  flex: 1;
  max-width: 360px;
  position: relative;
}

.search-wrapper {
  position: relative;
  background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(139,92,246,0.2) 100%);
  border-radius: 14px;
  padding: 1px;
  height: 44px;
  transition: all 0.3s var(--ease-out-expo);
}

.search-wrapper:focus-within {
  background: linear-gradient(135deg, rgba(59,130,246,0.4) 0%, rgba(139,92,246,0.4) 100%);
  box-shadow: 0 0 24px rgba(59,130,246,0.2);
}

.search-inner {
  background: rgba(10,15,26,0.9);
  border-radius: 13px;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}

.search-input {
  flex: 1;
  background: var(--bg-secondary);
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.search-input::placeholder {
  color: var(--text-placeholder);
}

.search-input-icon {
  color: var(--text-muted);
  font-size: 18px;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(10,15,26,0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--border-color-strong);
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
  display: none;
  box-shadow: var(--shadow-hover);
}

.search-results.active {
  display: block;
  animation: slideDown 0.3s var(--ease-out-expo);
}

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

.search-result-item {
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(59,130,246,0.1);
}

.horizontal-menu {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  justify-content: center;
  padding: 4px;
}

.horizontal-menu::-webkit-scrollbar {
  display: none;
}

.menu-item {
  padding: 10px 16px;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s var(--ease-out-expo);
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}

.menu-item ion-icon {
  font-size: 18px;
}

.menu-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.menu-item.active {
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(139,92,246,0.15) 100%);
  color: var(--text-primary);
  border-color: rgba(59,130,246,0.3);
}

.menu-item.active::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 1px;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile Actions */
.mobile-actions {
  display: none !important;
}

.mobile-notification .notification-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.mobile-notification .notification-btn ion-icon {
  font-size: 22px;
}

.user-chip {
  padding: 8px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.user-chip ion-icon {
  font-size: 16px;
  color: var(--text-muted);
}

.logout-btn {
  padding: 10px 14px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 10px;
  color: #FCA5A5;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s var(--ease-out-expo);
}

.logout-btn ion-icon {
  font-size: 18px;
}

.logout-btn:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
  transform: translateY(-1px);
}

.accent-line {
  display: none;
}

/* Desktop Left Sidebar */
.desktop-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: #1E293B;
  border-right: none;
  display: flex;
  flex-direction: column;
  z-index: 101;
  transition: width 0.25s ease;
  box-shadow: 4px 0 20px rgba(15,23,42,0.08);
  overflow: hidden;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Sidebar collapse button */
.sidebar-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s;
}

.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.sidebar-collapse-btn .collapse-icon-closed {
  display: none;
}

/* Все текстовые элементы сайдбара — плавная анимация появления */
.desktop-sidebar .sidebar-nav-item span,
.desktop-sidebar .sidebar-brand .brand-text,
.desktop-sidebar .sidebar-section-title,
.desktop-sidebar .sidebar-user-info,
.desktop-sidebar .sidebar-logout-btn span,
.desktop-sidebar .sidebar-header-actions .theme-toggle-btn {
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.15s ease 0.2s, max-width 0.25s ease;
}

/* Collapsed state */
.desktop-sidebar.collapsed {
  width: 64px;
}

.desktop-sidebar.collapsed .sidebar-header {
  padding: 12px 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.desktop-sidebar.collapsed .sidebar-brand {
  justify-content: center;
}

.desktop-sidebar.collapsed .sidebar-brand .brand-text {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.05s ease, max-width 0.25s ease;
}

.desktop-sidebar.collapsed .sidebar-header-actions {
  justify-content: center;
}

.desktop-sidebar.collapsed .sidebar-header-actions .theme-toggle-btn {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.05s ease, max-width 0.25s ease;
}

.desktop-sidebar.collapsed .sidebar-nav {
  padding: 4px 8px;
}

.desktop-sidebar.collapsed .sidebar-nav-item {
  padding: 12px 0;
  justify-content: center;
  gap: 0;
  width: 48px;
  margin: 0 auto 4px auto;
}

.desktop-sidebar.collapsed .sidebar-nav-item span {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.05s ease, max-width 0.25s ease;
}

.desktop-sidebar.collapsed .sidebar-nav-item ion-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.desktop-sidebar.collapsed .sidebar-nav-item:hover {
  transform: none;
}

.desktop-sidebar.collapsed .sidebar-section-title {
  opacity: 0;
  max-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  transition: opacity 0.05s ease, max-width 0.25s ease;
}

.desktop-sidebar.collapsed .sidebar-footer {
  padding: 12px 8px;
  align-items: center;
}

.desktop-sidebar.collapsed .sidebar-user-chip {
  justify-content: center;
  padding: 10px 0;
  width: 48px;
  margin: 0 auto 8px auto;
  gap: 0;
}

.desktop-sidebar.collapsed .sidebar-user-info {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.05s ease, max-width 0.25s ease;
}

.desktop-sidebar.collapsed .sidebar-logout-btn {
  justify-content: center;
  padding: 10px 0;
  width: 48px;
  margin: 0 auto;
  gap: 0;
}

.desktop-sidebar.collapsed .sidebar-logout-btn span {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.05s ease, max-width 0.25s ease;
}

/* Body class for layout shift */
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .breadcrumb-bar {
  margin-left: 64px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFFFFF;
  transition: transform 0.3s var(--ease-out-expo);
}

.sidebar-brand .brand-text {
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
}

.sidebar-nav {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 6px;
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s var(--ease-out-expo);
}

.sidebar-nav-item ion-icon {
  font-size: 20px;
}

.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
  transform: translateX(4px);
}

.sidebar-nav-item.active {
  background: #3B82F6;
  color: #FFFFFF;
  border-left: none;
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 20px 16px 8px 16px;
  margin-top: 8px;
}

.sidebar-section-title:first-child {
  margin-top: 0;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: transparent;
}

.sidebar-user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  margin-bottom: 12px;
}

.sidebar-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}

.sidebar-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 10px;
  color: #EF4444;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.sidebar-logout-btn ion-icon {
  font-size: 18px;
}

.sidebar-logout-btn:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.3);
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .desktop-sidebar {
    display: none;
  }
}

/* Top Actions Block - правый нижний закругленный блок */
.top-actions-block {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #232c53;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  z-index: 999;
}

/* Группа кнопок действий (Добавить тур, Актуализация дат и т.д.) */
.action-buttons-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.action-buttons-group .btn-primary,
.action-buttons-group .btn-secondary {
  box-shadow: none;
  white-space: nowrap;
  transition: all 0.3s var(--ease-out-expo);
}

.action-buttons-group .btn-primary:hover,
.action-buttons-group .btn-secondary:hover {
  transform: translateY(-2px);
}

/* Разделитель между группами кнопок */
.actions-separator {
  width: 1px;
  height: 32px;
  background: var(--border-color);
  flex-shrink: 0;
}

/* Группа кнопок уведомлений */
.notification-buttons-group {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

.notification-buttons-group .incomplete-apps-wrapper,
.notification-buttons-group .messages-wrapper,
.notification-buttons-group .notification-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.action-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s var(--ease-out-expo);
  font-size: 20px;
  text-decoration: none;
  flex-shrink: 0;
}

.action-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.action-btn ion-icon {
  color: inherit;
}

/* Incomplete Apps Button - красный градиент когда есть проблемы */
#incomplete-apps-btn {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: 2px solid rgba(239,68,68,0.2);
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}

#incomplete-apps-btn:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  border-color: rgba(239,68,68,0.4);
  box-shadow: 0 6px 20px rgba(239,68,68,0.4);
}

#incomplete-apps-btn.no-issues {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
}

#incomplete-apps-btn.no-issues:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
}

/* Incomplete Groups Button - оранжевый градиент когда есть проблемы */
#incomplete-groups-btn {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  border: 2px solid rgba(249,115,22,0.2);
  box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}

#incomplete-groups-btn:hover {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
  border-color: rgba(249,115,22,0.4);
  box-shadow: 0 6px 20px rgba(249,115,22,0.4);
}

#incomplete-groups-btn.no-issues {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
}

#incomplete-groups-btn.no-issues:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
}

/* Пульсация для срочных */
#incomplete-apps-btn.has-urgent {
  animation: urgentPulse 2s ease-in-out infinite;
}

#incomplete-groups-btn.has-urgent {
  animation: urgentPulseGroups 2s ease-in-out infinite;
}

.action-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  background: white;
  color: #EF4444;
  font-size: 11px;
  font-weight: 800;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid #EF4444;
  box-shadow: 0 2px 8px rgba(239,68,68,0.4);
}

/* Бейдж для groups - оранжевый */
#incomplete-groups-count {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #78350F;
  border-color: #F97316;
  box-shadow: 0 2px 8px rgba(249,115,22,0.4);
}

/* Бейдж ближайших услуг — снизу справа, красный */
.upcoming-badge {
  top: auto;
  bottom: -6px;
  right: -6px;
}

#upcoming-services-count {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  border-color: #EF4444;
  box-shadow: 0 2px 8px rgba(239,68,68,0.5);
}

/* Бейджи для сообщений и уведомлений */
#messages-count {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  border-color: #10B981;
  box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}

#notification-count {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
  border-color: #3B82F6;
  box-shadow: 0 2px 8px rgba(59,130,246,0.4);
}

/* Dropdowns должны быть абсолютно позиционированы чтобы не влиять на layout */
.notification-buttons-group .messages-dropdown,
.notification-buttons-group .notification-dropdown {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  min-width: 320px;
  z-index: 1000;
}

@media (max-width: 1024px) {
  .top-actions-block {
    display: none !important;
  }
}

/* Breadcrumb Bar */
.breadcrumb-bar {
  position: sticky;
  top: 0;
  z-index: 95;
  background: #1E293B;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-left: 280px;
  transition: margin-left 0.25s ease;
  padding: 0 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
}

.breadcrumb-container {
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-item:hover {
  color: #FFFFFF;
}

.breadcrumb-item.active {
  color: #FFFFFF;
  font-weight: 600;
}

.breadcrumb-item ion-icon {
  font-size: 16px;
}

.breadcrumb-separator {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}

/* Breadcrumb with actions */
.breadcrumb-container-with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.breadcrumb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadcrumb-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 6px 10px;
  transition: all 0.2s ease;
}

.breadcrumb-filter-group:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

.breadcrumb-filter-group ion-icon {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
}

.breadcrumb-filter-input {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  width: 110px;
  font-family: inherit;
  padding: 0;
}

.breadcrumb-filter-input::placeholder {
  color: rgba(255,255,255,0.4);
}

.breadcrumb-filter-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

.breadcrumb-filter-separator {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

.breadcrumb-filter-reset {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FCA5A5;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.breadcrumb-filter-reset:hover {
  background: rgba(239,68,68,0.25);
  border-color: rgba(239,68,68,0.5);
  color: #FEE2E2;
  transform: scale(1.05);
}

.breadcrumb-filter-reset ion-icon {
  font-size: 18px;
}

/* Breadcrumb Search */
.breadcrumb-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-search-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 8px 14px;
  transition: all 0.2s ease;
  min-width: 300px;
}

.breadcrumb-search-group:hover,
.breadcrumb-search-group:focus-within {
  background: rgba(255,255,255,0.12);
  border-color: rgba(59,130,246,0.4);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.breadcrumb-search-group ion-icon {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}

.breadcrumb-search-input {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  width: 100%;
  font-family: inherit;
  padding: 0;
}

.breadcrumb-search-input::placeholder {
  color: rgba(255,255,255,0.4);
}

.breadcrumb-search-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}

.breadcrumb-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}

.breadcrumb-search-btn ion-icon {
  font-size: 18px;
}

@media (max-width: 1024px) {
  .breadcrumb-bar {
    position: relative;
    margin-left: 0;
    padding: 8px 16px;
    min-height: 56px;
  }

  .breadcrumb-container-with-actions {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .breadcrumb-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .breadcrumb-search-group {
    min-width: 100%;
    flex: 1;
  }

  .breadcrumb-search-form {
    width: 100%;
  }

  .breadcrumb-filter-group {
    flex: 1;
    min-width: 120px;
  }

  .breadcrumb-filter-input {
    width: 100%;
  }
}

/* App Layout - для управления sidebar + content */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: 280px;
  min-height: 100vh;
  transition: margin-left 0.25s ease;
}

@media (max-width: 1024px) {
  .main-content {
    margin-left: 0;
  }
}

/* Screen Component */
.screen {
  background: #F1F5F9;
  min-height: 100vh;
  position: relative;
  padding: 40px 24px 60px;
  overflow: hidden;
}

/* Mesh gradient background */
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

/* Animated gradient orbs */
.screen::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: transparent;
  animation: floatOrb 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-50px, 50px) scale(1.1); }
  50% { transform: translate(-100px, 0) scale(1); }
  75% { transform: translate(-50px, -50px) scale(0.9); }
}

.screen-ring {
  position: absolute;
  top: 60px;
  right: 60px;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
  animation: ringPulse 4s ease-in-out infinite;
}

.screen-ring::before {
  content: '';
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 50%;
}

.screen-ring::after {
  content: '';
  position: absolute;
  inset: 60px;
  border: 1px solid rgba(255,255,255,0.02);
  border-radius: 50%;
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.6; transform: scale(1.05) rotate(180deg); }
}

.screen-content {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Dashboard Header - Hero Section */
.dashboard-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 20px 0;
  position: relative;
}

.dashboard-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  animation: fadeInUp 0.8s var(--ease-out-expo);
}

.dashboard-brand-badge {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 32px rgba(59,130,246,0.3);
  position: relative;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(59,130,246,0.3); }
  50% { box-shadow: 0 8px 48px rgba(59,130,246,0.5), 0 0 0 8px rgba(59,130,246,0.1); }
}

.dashboard-brand-badge::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  background: var(--gradient-brand);
  opacity: 0.3;
  filter: blur(12px);
  z-index: -1;
}

.dashboard-brand-text {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #F8FAFC 0%, #94A3B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dashboard-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 0;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.1s both;
}

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

/* KPI Section */
.kpi-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.2s both;
}

@media (max-width: 1024px) {
  .kpi-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .kpi-section {
    grid-template-columns: 1fr;
  }
}

.kpi-card {
  background: #FFFFFF;
  backdrop-filter: none;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.kpi-card:hover {
  border-color: var(--border-color-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

.kpi-card:nth-child(1) { --kpi-color: var(--color-tours); }
.kpi-card:nth-child(2) { --kpi-color: var(--color-clients); }
.kpi-card:nth-child(3) { --kpi-color: var(--color-calendar); }
.kpi-card:nth-child(4) { --kpi-color: var(--color-finance); }

.kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--kpi-color);
  opacity: 0.6;
}

.kpi-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Section Title */
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.3s both;
}

.section-title-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.section-title-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-color-strong), transparent);
}

/* Tiles Grid */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

@media (min-width: 1600px) {
  .tiles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .tiles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .tiles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .tiles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .tiles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Make last tile stretch full width when odd number of tiles */
  .tiles-grid .tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .tile-content {
    padding: 16px;
    min-height: auto;
  }

  .tile-icon-wrapper {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 12px;
  }

  .tile-title {
    font-size: 15px;
  }

  .tile-description {
    font-size: 11px;
  }

  .tile-bullets {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 12px;
  }

  .tile-bullets li {
    font-size: 10px;
  }
}

/* Extra mobile optimization for very small screens (≤420px) */
@media (max-width: 420px) {
  .tiles-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Tile Component - Modern Card Design */
.tile {
  position: relative;
  cursor: pointer;
  text-decoration: none;
  display: block;
  border-radius: var(--border-radius-xl);
  transition: all 0.4s var(--ease-out-expo);
  animation: tileAppear 0.6s var(--ease-out-expo) both;
}

/* Staggered animation delays */
.tiles-grid .tile:nth-child(1) { animation-delay: 0.05s; }
.tiles-grid .tile:nth-child(2) { animation-delay: 0.1s; }
.tiles-grid .tile:nth-child(3) { animation-delay: 0.15s; }
.tiles-grid .tile:nth-child(4) { animation-delay: 0.2s; }
.tiles-grid .tile:nth-child(5) { animation-delay: 0.25s; }
.tiles-grid .tile:nth-child(6) { animation-delay: 0.3s; }
.tiles-grid .tile:nth-child(7) { animation-delay: 0.35s; }
.tiles-grid .tile:nth-child(8) { animation-delay: 0.4s; }
.tiles-grid .tile:nth-child(9) { animation-delay: 0.45s; }
.tiles-grid .tile:nth-child(10) { animation-delay: 0.5s; }
.tiles-grid .tile:nth-child(11) { animation-delay: 0.55s; }
.tiles-grid .tile:nth-child(12) { animation-delay: 0.6s; }

@keyframes tileAppear {
  from { 
    opacity: 0; 
    transform: translateY(30px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}


.tile-border {
  padding: 2px;
  border-radius: var(--border-radius-xl);
  background: var(--tile-gradient);
  height: 100%;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
}


.tile-content {
  background: #FFFFFF;
  backdrop-filter: none;
  border-radius: calc(var(--border-radius-xl) - 2px);
  padding: 40px 28px;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

/* Subtle shine effect */
.tile-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(59,130,246,0.03) 0%, transparent 100%);
  pointer-events: none;
}

/* Colored accent line at top */
.tile-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: var(--tile-color);
  border-radius: 0 0 2px 2px;
  opacity: 0.7;
}

.tile-icon-wrapper {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--tile-color) 0%, color-mix(in srgb, var(--tile-color) 70%, black) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  z-index: 1;
  transition: all 0.4s var(--ease-out-expo);
  flex-shrink: 0;
}


.tile-icon-wrapper ion-icon {
  color: #FFFFFF;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.tile-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
  position: relative;
}

.tile-header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tile-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
}


.tile-description {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* Centered tile design */
.tile-icon-wrapper-center {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--tile-color) 0%, color-mix(in srgb, var(--tile-color) 70%, black) 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  position: relative;
  z-index: 1;
  transition: all 0.4s var(--ease-out-expo);
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.tile-icon-wrapper-center ion-icon {
  color: #FFFFFF;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.tile:hover .tile-icon-wrapper-center {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
}

.tile-title-center {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 12px 0;
  text-align: center;
}

.tile-description-center {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
}

/* Mobile optimization for centered tiles (≤480px) */
@media (max-width: 480px) {
  .tile-icon-wrapper-center {
    width: 56px;
    height: 56px;
    font-size: 28px;
    margin: 0 auto 16px;
    border-radius: 16px;
  }

  .tile-title-center {
    font-size: 15px;
    margin: 0 0 8px 0;
    letter-spacing: -0.2px;
  }

  .tile-description-center {
    font-size: 12px;
    line-height: 1.5;
  }

  .tile-content {
    padding: 14px 12px;
  }
}

.tile-bullets {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: #F8FAFC;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: auto;
  border: 1px solid var(--border-color);
  width: 100%;
}

.tile-bullets li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}


.tile-bullets li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tile-color);
  flex-shrink: 0;
  opacity: 0.7;
}

/* Tile Color Variants */
.tile-tours {
  --tile-color: var(--color-tours);
  --tile-gradient: linear-gradient(135deg, var(--color-tours) 0%, color-mix(in srgb, var(--color-tours) 60%, #8B5CF6) 100%);
  --tile-glow: 0 8px 40px var(--color-tours-glow);
  --tile-glow-color: var(--color-tours-glow);
}

.tile-excursions {
  --tile-color: #10B981;
  --tile-gradient: linear-gradient(135deg, #10B981 0%, color-mix(in srgb, #10B981 60%, #059669) 100%);
  --tile-glow: 0 8px 40px rgba(16, 185, 129, 0.3);
  --tile-glow-color: rgba(16, 185, 129, 0.3);
}

.tile-individuals {
  --tile-color: #8B5CF6;
  --tile-gradient: linear-gradient(135deg, #8B5CF6 0%, color-mix(in srgb, #8B5CF6 60%, #6D28D9) 100%);
  --tile-glow: 0 8px 40px rgba(139, 92, 246, 0.3);
  --tile-glow-color: rgba(139, 92, 246, 0.3);
}

.tile-cars {
  --tile-color: var(--color-cars);
  --tile-gradient: linear-gradient(135deg, var(--color-cars) 0%, color-mix(in srgb, var(--color-cars) 60%, #F59E0B) 100%);
  --tile-glow: 0 8px 40px var(--color-cars-glow);
  --tile-glow-color: var(--color-cars-glow);
}

.tile-clients {
  --tile-color: var(--color-clients);
  --tile-gradient: linear-gradient(135deg, var(--color-clients) 0%, color-mix(in srgb, var(--color-clients) 60%, #06B6D4) 100%);
  --tile-glow: 0 8px 40px var(--color-clients-glow);
  --tile-glow-color: var(--color-clients-glow);
}

.tile-guides {
  --tile-color: var(--color-guides);
  --tile-gradient: linear-gradient(135deg, var(--color-guides) 0%, color-mix(in srgb, var(--color-guides) 60%, #EC4899) 100%);
  --tile-glow: 0 8px 40px var(--color-guides-glow);
  --tile-glow-color: var(--color-guides-glow);
}

.tile-users {
  --tile-color: var(--color-users);
  --tile-gradient: linear-gradient(135deg, var(--color-users) 0%, color-mix(in srgb, var(--color-users) 60%, #F43F5E) 100%);
  --tile-glow: 0 8px 40px var(--color-users-glow);
  --tile-glow-color: var(--color-users-glow);
}

.tile-settings {
  --tile-color: var(--color-settings);
  --tile-gradient: linear-gradient(135deg, var(--color-settings) 0%, color-mix(in srgb, var(--color-settings) 60%, #3B82F6) 100%);
  --tile-glow: 0 8px 40px var(--color-settings-glow);
  --tile-glow-color: var(--color-settings-glow);
}

.tile-reports {
  --tile-color: var(--color-reports);
  --tile-gradient: linear-gradient(135deg, var(--color-reports) 0%, color-mix(in srgb, var(--color-reports) 60%, #14B8A6) 100%);
  --tile-glow: 0 8px 40px var(--color-reports-glow);
  --tile-glow-color: var(--color-reports-glow);
}

.tile-accounting {
  --tile-color: var(--color-accounting);
  --tile-gradient: linear-gradient(135deg, var(--color-accounting) 0%, color-mix(in srgb, var(--color-accounting) 60%, #F59E0B) 100%);
  --tile-glow: 0 8px 40px var(--color-accounting-glow);
  --tile-glow-color: var(--color-accounting-glow);
}

.tile-finance {
  --tile-color: var(--color-finance);
  --tile-gradient: linear-gradient(135deg, var(--color-finance) 0%, color-mix(in srgb, var(--color-finance) 60%, #A855F7) 100%);
  --tile-glow: 0 8px 40px var(--color-finance-glow);
  --tile-glow-color: var(--color-finance-glow);
}

.tile-marketing {
  --tile-color: var(--color-marketing);
  --tile-gradient: linear-gradient(135deg, var(--color-marketing) 0%, color-mix(in srgb, var(--color-marketing) 60%, #EC4899) 100%);
  --tile-glow: 0 8px 40px var(--color-marketing-glow);
  --tile-glow-color: var(--color-marketing-glow);
}

.tile-sources {
  --tile-color: var(--color-sources);
  --tile-gradient: linear-gradient(135deg, var(--color-sources) 0%, color-mix(in srgb, var(--color-sources) 60%, #A855F7) 100%);
  --tile-glow: 0 8px 40px var(--color-sources-glow);
  --tile-glow-color: var(--color-sources-glow);
}

.tile-hotels {
  --tile-color: var(--color-hotels);
  --tile-gradient: linear-gradient(135deg, var(--color-hotels) 0%, color-mix(in srgb, var(--color-hotels) 60%, #F472B6) 100%);
  --tile-glow: 0 8px 40px var(--color-hotels-glow);
  --tile-glow-color: var(--color-hotels-glow);
}

.tile-calendar {
  --tile-color: var(--color-calendar);
  --tile-gradient: linear-gradient(135deg, var(--color-calendar) 0%, color-mix(in srgb, var(--color-calendar) 60%, #22C55E) 100%);
  --tile-glow: 0 8px 40px var(--color-calendar-glow);
  --tile-glow-color: var(--color-calendar-glow);
}

.tile-services {
  --tile-color: var(--color-services);
  --tile-gradient: linear-gradient(135deg, var(--color-services) 0%, color-mix(in srgb, var(--color-services) 60%, #F59E0B) 100%);
  --tile-glow: 0 8px 40px var(--color-services-glow);
  --tile-glow-color: var(--color-services-glow);
}

.tile-bookings {
  --tile-color: var(--color-bookings);
  --tile-gradient: linear-gradient(135deg, var(--color-bookings) 0%, color-mix(in srgb, var(--color-bookings) 60%, #A855F7) 100%);
  --tile-glow: 0 8px 40px var(--color-bookings-glow);
  --tile-glow-color: var(--color-bookings-glow);
}

.tile-documents {
  --tile-color: var(--color-documents);
  --tile-gradient: linear-gradient(135deg, var(--color-documents) 0%, color-mix(in srgb, var(--color-documents) 60%, #F59E0B) 100%);
  --tile-glow: 0 8px 40px var(--color-documents-glow);
  --tile-glow-color: var(--color-documents-glow);
}

.tile-support {
  --tile-color: var(--color-support);
  --tile-gradient: linear-gradient(135deg, var(--color-support) 0%, color-mix(in srgb, var(--color-support) 60%, #3B82F6) 100%);
  --tile-glow: 0 8px 40px var(--color-support-glow);
  --tile-glow-color: var(--color-support-glow);
}

/* ============================================
   Booking Modal & Passenger Selection Styles
   ============================================ */
.modal.modal-booking {
  width: 70%;
  max-width: 1400px;
}
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.form-row-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  align-items: flex-end;
}
.passenger-selection {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.passenger-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}
.passenger-type:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.passenger-type-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.passenger-type-header ion-icon {
  font-size: 2.5rem;
  color: var(--accent-primary);
  background: rgba(59, 130, 246, 0.1);
  padding: 0.75rem;
  border-radius: var(--border-radius-md);
}
.passenger-type-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}
.passenger-type-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.passenger-counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-counter {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary);
  font-size: 1.25rem;
}
.btn-counter:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
  transform: scale(1.1);
}
.counter-input {
  width: 80px;
  text-align: center;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.5rem;
}
.room-selection {
  border-top: 2px solid var(--border-color);
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}
.room-selection-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.room-selection-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: var(--accent-primary);
  border-radius: 2px;
}
.room-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.room-type-option {
  position: relative;
  cursor: pointer;
}
.room-type-option input {
  position: absolute;
  opacity: 0;
}
.room-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  transition: all 0.3s ease;
  min-height: 140px;
  justify-content: center;
}
.room-type-option input:checked + .room-type-card {
  background: var(--bg-card);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.room-type-card ion-icon {
  font-size: 2rem;
  color: var(--text-secondary);
}
.room-type-option input:checked + .room-type-card ion-icon {
  color: var(--accent-primary);
}
.room-type-name {
  font-weight: 600;
  color: var(--text-primary);
}
.room-type-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}
.room-type-price {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-warning);
  margin-top: 0.5rem;
  text-align: center;
}
.room-type-price small {
  display: block;
  font-size: 0.625rem;
  font-weight: 400;
  opacity: 0.8;
}
.passengers-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
  max-height: 65vh;
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-base);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
}
.passengers-container::-webkit-scrollbar { width: 8px; }
.passengers-container::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 4px; }
.passengers-container::-webkit-scrollbar-thumb { background: var(--border-color-strong); border-radius: 4px; }
.passengers-container::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.passenger-form-section {
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}
.passenger-form-section:hover {
  border-color: var(--border-color-strong);
  box-shadow: var(--shadow-card);
}
.passenger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.passenger-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}
.passenger-title ion-icon {
  font-size: 1.5rem;
  color: var(--accent-primary);
}
.passenger-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.main-contact-badge {
  padding: 0.375rem 1rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.child-discount-badge {
  padding: 0.375rem 1rem;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: white;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* ============================================
   Terminal Styles (Activity Log)
   ============================================ */
.terminal-title {
  flex: 1;
  color: #a8a8a8;
  font-size: 0.875rem;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.terminal-title ion-icon { font-size: 1rem; }
.terminal-close-btn {
  background: transparent;
  border: none;
  color: #a8a8a8;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}
.terminal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.terminal-close-btn ion-icon { font-size: 1.25rem; }
.terminal-body {
  background: #1e1e1e;
  padding: 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  border-radius: 0 0 12px 12px;
}
.terminal-body::-webkit-scrollbar { width: 10px; }
.terminal-body::-webkit-scrollbar-track { background: #0d0d0d; }
.terminal-body::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 5px; }
.terminal-body::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.terminal-content { color: #d4d4d4; }
.terminal-entry {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #2d2d2d;
}
.terminal-entry:last-child { border-bottom: none; }
.terminal-prompt {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}
.terminal-user { color: #4ec9b0; font-weight: 600; }
.terminal-separator { color: #d4d4d4; }
.terminal-path { color: #569cd6; }
.terminal-symbol { color: #d4d4d4; margin-left: 0.25rem; }
.terminal-command {
  padding-left: 0.5rem;
  margin-bottom: 0.5rem;
  color: #d4d4d4;
}
.terminal-timestamp { color: #858585; margin-right: 0.5rem; }
.terminal-action { color: #dcdcaa; font-weight: 500; }
.terminal-subject { color: #ce9178; margin-left: 0.5rem; }
.terminal-output {
  padding-left: 1rem;
  color: #9cdcfe;
  margin-bottom: 0.25rem;
}
.terminal-output-prefix { color: #858585; margin-right: 0.5rem; }
.terminal-diff {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: #252525;
  border-left: 3px solid #569cd6;
  border-radius: 4px;
}
.terminal-diff-header {
  color: #569cd6;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.terminal-diff-header ion-icon { font-size: 1rem; }
.terminal-diff-line { margin: 0.25rem 0; padding-left: 1rem; }
.terminal-diff-removed {
  color: #f48771;
  background: rgba(244, 135, 113, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  display: inline-block;
}
.terminal-diff-added {
  color: #89d185;
  background: rgba(137, 209, 133, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  display: inline-block;
}
.terminal-empty { color: #858585; }
.terminal-empty .terminal-command { color: #dcdcaa; margin-bottom: 0.75rem; }

/* ============================================
   Hotels Section Styles
   ============================================ */
.hotels-section { margin-top: 1.5rem; }
.hotels-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.hotels-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.hotels-section-title ion-icon {
  font-size: 1.25rem;
  color: var(--accent-primary);
}
.btn-add-hotel {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1.25rem;
}
.btn-add-hotel:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.hotel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}
.hotel-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-card);
}
.hotel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.hotel-name {
  font-weight: 600;
  color: var(--text-primary);
}
.hotel-city {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.hotel-city ion-icon { font-size: 0.875rem; }
.hotel-card-actions {
  display: flex;
  gap: 0.25rem;
}
.btn-hotel-action {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
}
.btn-hotel-edit:hover { background: rgba(59, 130, 246, 0.1); color: var(--accent-primary); }
.btn-hotel-delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.hotel-card-body { padding: 1rem; }
.hotel-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.hotel-info-item ion-icon { font-size: 1rem; color: var(--text-muted); }
.hotel-room-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.hotel-room-types .room-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent-primary);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.hotels-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  background: var(--bg-card);
  border: 2px dashed var(--border-color);
  border-radius: 12px;
}
.hotels-empty-state ion-icon {
  font-size: 3.5rem;
  color: var(--text-muted);
  opacity: 0.5;
  margin-bottom: 1rem;
}
.hotels-empty-state p {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.hotels-empty-state span {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Responsive booking modals */
@media (max-width: 1400px) { .modal-booking { width: 80%; } }
@media (max-width: 1200px) {
  .modal-booking { width: 90%; }
  .form-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .modal-booking { width: 95%; max-width: none; }
  .room-types { grid-template-columns: repeat(2, 1fr); }
  .form-row-3 { grid-template-columns: 1fr; }
  .form-row-4 { grid-template-columns: 1fr; }
  .passenger-form-section { padding: 1.5rem; }
}
@media (max-width: 480px) {
  .modal-booking { width: 100%; margin: 0; border-radius: 0; height: 100vh; max-height: 100vh; }
  .room-types { grid-template-columns: 1fr; }
  .passenger-selection { grid-template-columns: 1fr; }
  .passenger-type { padding: 1.5rem; }
  .room-type-card { padding: 1.5rem 1rem; min-height: 120px; }
}

/* Disabled Tiles (Work in Progress) */
.tile.tile-disabled {
  opacity: 0.4 !important;
}

.tile.tile-disabled .tile-border {
  filter: saturate(0.4) brightness(0.7);
}


.tile.tile-disabled .tile-icon-wrapper {
  filter: grayscale(0.5);
}

.tile-badge-wip {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 12px;
  background: rgba(251,191,36,0.25);
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #FBBF24;
  z-index: 10;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header-icon {
  width: 48px;
  height: 48px;
  background: var(--gradient-brand);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 26px;
  box-shadow: 0 8px 24px rgba(59,130,246,0.25);
}

.section-header-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 14px;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header-description {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

.section-header-line {
  height: 1px;
  background: var(--gradient-accent);
  max-width: 400px;
  margin: 0 auto;
  opacity: 0.5;
}

/* Particles Background */
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #F1F5F9;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(148, 163, 184, 0.4), rgba(148, 163, 184, 0.1));
  box-shadow: 0 0 15px rgba(148, 163, 184, 0.3);
}

@keyframes drift {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(20px, -15px);
  }
  50% {
    transform: translate(-15px, 10px);
  }
  75% {
    transform: translate(10px, -20px);
  }
}

/* Login Page */
.login-screen {
  min-height: 100vh;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  z-index: 1;
}

.login-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(59,130,246,0.06) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.login-screen::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  pointer-events: none;
}

.login-card {
  max-width: 440px;
  width: 100%;
  background: #FFFFFF;
  backdrop-filter: none;
  border: 1px solid #E2E8F0;
  border-radius: var(--border-radius-xl);
  padding: 48px 40px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.08);
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.8s var(--ease-out-expo);
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.1), transparent);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.login-brand-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}

.login-brand-text {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #0F172A;
}

.login-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
}

.login-form-group {
  margin-bottom: 20px;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 16px;
  gap: 12px;
  transition: all 0.3s var(--ease-out-expo);
}

.login-input-wrapper:focus-within {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
  background: #FFFFFF;
}

.login-input-icon {
  font-size: 22px;
  color: #94A3B8;
}

.login-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
}

.login-input::placeholder {
  color: var(--text-placeholder);
}

.login-input-toggle {
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.login-input-toggle:hover {
  color: var(--text-primary);
}

.login-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border: none;
  border-radius: 14px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(59,130,246,0.4);
}

.login-btn:active {
  transform: translateY(0);
}

.login-meta {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.login-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 32px;
}

.error-message {
  color: #DC2626;
  font-size: 14px;
  margin-top: 10px;
  display: block;
}

/* Utilities */
.text-center {
  text-align: center;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* Selection color */
::selection {
  background: rgba(59,130,246,0.3);
  color: var(--text-primary);
}

/* ==========================================
   MOBILE RESPONSIVE STYLES
   ========================================== */

/* Desktop only elements */
@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }
  
  .desktop-header {
    display: none !important;
  }

  .mobile-brand {
    display: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .desktop-only {
    display: flex !important;
  }

  .mobile-brand {
    display: none !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }
  
  .mobile-sidebar,
  .mobile-menu-overlay {
    display: none !important;
  }
}

/* Mobile Menu Button (Hamburger) */
.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  padding: 12px;
}

.mobile-menu-btn:hover {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.3);
}

.hamburger-line {
  width: 20px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: all 0.3s var(--ease-out-expo);
}

/* Fixed Mobile Menu Button */
/* Mobile Floating Actions */
.mobile-floating-actions {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 997;
}

.mobile-floating-actions button,
.mobile-floating-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s var(--ease-out-expo);
  border: none;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px;
}

/* Скрываем иконки в мобильных кнопках */
.mobile-floating-actions ion-icon {
  display: none !important;
}

.mobile-floating-actions button:active,
.mobile-floating-actions a:active {
  transform: scale(0.95);
}

@media (max-width: 1024px) {
  .mobile-floating-actions {
    display: flex;
  }
}

@media (max-width: 480px) {
  .mobile-floating-actions {
    bottom: 16px;
    right: 16px;
    gap: 10px;
  }

  .mobile-floating-actions button,
  .mobile-floating-actions a {
    padding: 12px 18px;
    font-size: 13px;
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  .mobile-floating-actions {
    bottom: 12px;
    right: 12px;
    gap: 8px;
  }

  .mobile-floating-actions button,
  .mobile-floating-actions a {
    padding: 10px 16px;
    font-size: 12px;
    min-height: 40px;
  }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s var(--ease-out-expo);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Sidebar */
.mobile-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: #1E293B;
  border-left: 1px solid rgba(255,255,255,0.1);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 20px rgba(15,23,42,0.08);
}

.mobile-sidebar.active {
  transform: translateX(0);
}

/* Mobile Sidebar Header */
.mobile-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: transparent;
}

.mobile-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFFFFF;
}

.mobile-sidebar-brand .brand-badge {
  width: 38px;
  height: 38px;
  font-size: 20px;
}

.mobile-sidebar-brand .brand-text {
  font-size: 20px;
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
}

.mobile-sidebar-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.mobile-sidebar-close ion-icon {
  font-size: 24px;
}

.mobile-sidebar-close:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.3);
  color: #EF4444;
  transform: rotate(90deg);
}

/* Mobile Search */
.mobile-search {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.mobile-search .search-wrapper {
  max-width: none;
}

/* Mobile User Info */
.mobile-user-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  transition: background 0.2s ease;
}

.mobile-user-info:hover {
  background: rgba(255,255,255,0.12);
}

.mobile-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.mobile-user-avatar ion-icon {
  color: #FFFFFF;
}

.mobile-user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mobile-user-name {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-user-role {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* Mobile Navigation */
.mobile-nav {
  flex: 1;
  overflow-y: auto;
  padding: 20px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.mobile-nav::-webkit-scrollbar {
  width: 6px;
}

.mobile-nav::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.mobile-nav-section {
  padding: 0 8px;
  margin-bottom: 8px;
}

.mobile-nav-section-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
  padding: 20px 16px 8px 16px;
  margin-top: 8px;
}

.mobile-nav-section-title:first-child {
  margin-top: 0;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s var(--ease-out-expo);
  margin-bottom: 6px;
}

.mobile-nav-item ion-icon {
  font-size: 20px;
  transition: color 0.25s;
}

.mobile-nav-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
  transform: translateX(4px);
}

.mobile-nav-item.active {
  background: #3B82F6;
  color: #FFFFFF;
  border-left: none;
}

.mobile-nav-item.active ion-icon {
  color: #FFFFFF;
}

/* Mobile Sidebar Footer */
.mobile-sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: transparent;
}

.mobile-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 10px;
  color: #EF4444;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.mobile-logout-btn ion-icon {
  font-size: 18px;
}

.mobile-logout-btn:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.3);
  transform: translateY(-1px);
}

/* Mobile responsive adjustments */
@media (max-width: 1024px) {
  .top-bar-container {
    padding: 0;
  }
  
  .screen {
    padding: 24px 16px 40px;
  }
  
  .dashboard-brand-text {
    font-size: 36px;
  }
  
  .dashboard-brand-badge {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  
  .kpi-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .kpi-card {
    padding: 18px;
  }
  
  .kpi-value {
    font-size: 26px;
  }
  
  .tiles-grid {
    gap: 16px;
  }
  
  .tile-content {
    padding: 22px;
  }
  
  .section-title-text {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .dashboard-header {
    margin-bottom: 32px;
  }
  
  .dashboard-brand {
    flex-direction: column;
    gap: 12px;
  }
  
  .dashboard-brand-text {
    font-size: 28px;
  }
  
  .dashboard-subtitle {
    font-size: 15px;
  }
  
  .kpi-section {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .kpi-card {
    padding: 14px;
  }
  
  .kpi-value {
    font-size: 22px;
  }
  
  .kpi-label {
    font-size: 10px;
  }

  .tiles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  
  .tile-content {
    padding: 14px;
    min-height: auto;
  }

  .tile-icon-wrapper {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
  }

  .tile-title {
    font-size: 14px;
  }

  .tile-description {
    font-size: 10px;
  }
  
  .tile-bullets {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 12px;
  }
  
  .tile-bullets li {
    font-size: 11px;
  }
  
  .page-description p {
    font-size: 14px;
  }
  
  .section-title {
    margin-bottom: 20px;
  }
  
  .section-title-text {
    font-size: 18px;
  }
}

/* ==========================================
   PAGE HEADER & TABLE STYLES
   ========================================== */

/* Page Header Row */
.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s var(--ease-out-expo);
  margin-bottom: 8px;
}

.back-link ion-icon {
  font-size: 18px;
}

.back-link:hover {
  color: var(--text-primary);
  transform: translateX(-4px);
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin: 0;
}

.page-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--gradient-brand);
  border: none;
  border-radius: 14px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
}

.btn-primary ion-icon {
  font-size: 20px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,130,246,0.35);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #1e2a3b !important;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  color: #FFFFFF !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.btn-secondary ion-icon {
  color: #FFFFFF;
}

.btn-secondary:hover {
  background: #CBD5E1;
  color: var(--text-primary);
  border-color: #94A3B8;
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.btn-icon ion-icon {
  font-size: 20px;
}

.btn-icon:hover {
  background: rgba(15,23,42,0.08);
  color: var(--text-primary);
}

.btn-edit:hover {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.3);
  color: #60A5FA;
}

.btn-add:hover {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.3);
  color: #4ADE80;
}

.btn-delete:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.3);
  color: #F87171;
}

.btn-move:hover {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.3);
  color: #A78BFA;
}

/* Alert */
.alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 14px;
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 500;
  animation: slideDown 0.4s var(--ease-out-expo);
}

.alert ion-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.alert-success {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  color: #4ADE80;
}

/* Table Container */
.table-container {
  background: #FFFFFF;
  backdrop-filter: none;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: #1E293B;
}

.data-table th {
  padding: 16px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #FFFFFF;
  border-bottom: none;
}

.data-table th.th-id {
  width: 60px;
  text-align: center;
}

.data-table th.th-date {
  width: 180px;
}

.data-table th.th-actions {
  width: 100px;
  text-align: center;
}

.data-table tbody tr {
  transition: background 0.2s;
}

.data-table tbody tr:hover {
  background: #F8FAFC;
}

.data-table tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.data-table td {
  padding: 18px 20px;
  font-size: 15px;
  color: var(--text-primary);
}

.data-table td.td-id {
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
}

.tour-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tour-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.tour-icon ion-icon {
  color: #FFFFFF;
}

.td-date {
  color: var(--text-secondary);
  font-size: 14px;
}

.td-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.delete-form {
  display: inline-block;
  margin: 0;
}

/* Empty State */
.empty-state {
  padding: 80px 40px;
  text-align: center;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 40px;
  color: var(--text-muted);
}

.empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 15px;
  color: var(--text-muted);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 10001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease-out-expo);
  overflow-y: auto;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 100%;
  max-width: 580px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s var(--ease-out-expo);
  margin: auto;
  flex-shrink: 0;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

/* Modal form scrollable */
.modal-form {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.modal-form::-webkit-scrollbar {
  width: 6px;
}

.modal-form::-webkit-scrollbar-track {
  background: transparent;
}

.modal-form::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: #1E293B;
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.modal-title ion-icon {
  font-size: 24px;
  color: var(--accent-primary);
}

.modal-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.modal-close ion-icon {
  font-size: 24px;
}

.modal-close:hover {
  background: rgba(239,68,68,0.2);
  color: #FCA5A5;
  transform: rotate(90deg);
}

.modal-form {
  padding: 28px;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.form-input {
  width: 100%;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-strong);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.25s var(--ease-out-expo);
}

.form-input::placeholder {
  color: var(--text-placeholder);
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
  background: var(--bg-primary);
}

.form-input-static {
  width: 100%;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-strong);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-input-static ion-icon {
  font-size: 20px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  background: #1E293B;
}

/* Кнопки в modal-actions на темном фоне */
.modal-actions .btn-secondary {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.2);
}

.modal-actions .btn-secondary ion-icon {
  color: #FFFFFF;
}

.modal-actions .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.3);
}

/* btn-sm в modal-actions на темном фоне */
.modal-actions .btn-sm {
  color: #FFFFFF;
}

.modal-actions .btn-sm ion-icon {
  color: #FFFFFF;
}

/* Modal body */
.modal-body {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Client detail modal */
.client-detail-modal {
  padding: 0 !important;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}

.client-detail-section {
  padding: 28px 32px;
  background: var(--bg-card);
  margin: 16px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  transition: all 0.2s ease;
}

.client-detail-section:hover {
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}

.client-detail-section:first-child {
  margin-top: 20px;
}

.client-detail-section:last-child {
  margin-bottom: 20px;
}

/* Main info block */
.client-detail-main-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.client-detail-name-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-detail-name {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(135deg, #0F172A 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.8px;
}

.client-detail-age {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-detail-birthdate {
  color: var(--text-muted);
  font-size: 14px;
}

.client-detail-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.client-detail-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.04) 100%);
  border-radius: 14px;
  border: 1px solid rgba(16,185,129,0.15);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.client-detail-contact-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
}

.client-detail-contact-item:hover {
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.06) 100%);
  border-color: rgba(16,185,129,0.25);
  transform: translateX(2px);
}

.client-detail-contact-item ion-icon {
  font-size: 22px;
  color: #10B981;
  flex-shrink: 0;
}

.client-detail-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 24px;
  text-transform: none;
  letter-spacing: -0.3px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

.client-detail-section-title ion-icon {
  font-size: 22px;
  color: #10B981;
  background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.05) 100%);
  padding: 8px;
  border-radius: 10px;
}

.client-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.client-detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.client-detail-item:hover {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}

.client-detail-item-full {
  grid-column: 1 / -1;
}

.client-detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.client-detail-label ion-icon {
  font-size: 16px;
  color: var(--color-clients);
  opacity: 0.7;
}

.client-detail-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
}

.client-detail-link {
  color: var(--color-clients);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s var(--ease-out-expo);
}

.client-detail-link:hover {
  color: #22C55E;
  text-decoration: underline;
}

.client-detail-source-type {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}

.client-detail-room-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #10B981;
  font-size: 15px;
  font-weight: 600;
  background: rgba(16,185,129,0.08);
  padding: 6px 12px;
  border-radius: 8px;
}

.client-detail-room-type ion-icon {
  font-size: 18px;
}

/* Payment summary */
.payment-summary {
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(16,185,129,0.2);
  box-shadow: 0 2px 12px rgba(16,185,129,0.08);
  position: relative;
  overflow: hidden;
}

.payment-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10B981 0%, #059669 100%);
}

.payment-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.payment-row:first-child {
  padding-top: 0;
}

.payment-row:last-child {
  padding-bottom: 0;
}

.payment-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}

.payment-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.payment-value-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

.payment-row-total {
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.payment-row-total .payment-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.payment-value-total {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.payment-value-big {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.payment-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  margin: 16px 0;
}

.payment-row-discount .payment-value {
  color: #EF4444;
}

.payment-row-success .payment-value {
  color: #10B981;
}

.payment-row-warning .payment-value {
  color: #F59E0B;
}

.payment-row-remaining {
  background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(251,191,36,0.05) 100%);
  margin: 8px -16px -16px -16px;
  padding: 18px 20px;
  border-radius: 0 0 12px 12px;
  border-top: 2px dashed rgba(245,158,11,0.3);
}

.payment-row-remaining.payment-row-success {
  background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.05) 100%);
  border-top-color: rgba(16,185,129,0.3);
}

/* Client notes in modal */
.client-notes-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.client-note-block {
  background: linear-gradient(135deg, #FEF3C7 0%, #FEF9E7 100%);
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(251,191,36,0.3);
  border-left: 4px solid #F59E0B;
  box-shadow: 0 2px 8px rgba(245,158,11,0.1);
  position: relative;
  transition: all 0.2s ease;
}

.client-note-block:hover {
  box-shadow: 0 4px 12px rgba(245,158,11,0.15);
  transform: translateX(2px);
}

.client-note-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.client-note-header ion-icon {
  font-size: 18px;
  color: #F59E0B;
}

.client-note-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: -0.2px;
}

.client-note-text {
  font-size: 15px;
  color: #92400E;
  line-height: 1.7;
  margin: 0;
  padding-left: 28px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .client-detail-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .client-detail-section {
    padding: 20px;
  }

  .client-detail-name {
    font-size: 20px;
  }

  .client-detail-contact-item {
    font-size: 15px;
    padding: 10px 14px;
  }

  .client-detail-contact-item ion-icon {
    font-size: 18px;
  }

  .payment-summary {
    padding: 20px;
  }

  .payment-value-total {
    font-size: 18px;
  }

  .payment-value-big {
    font-size: 20px;
  }

  .client-note-text {
    padding-left: 0;
  }
}

/* Mobile table responsiveness */
@media (max-width: 768px) {
  .page-header-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .page-header-right {
    width: 100%;
  }
  
  .page-header-right .btn-primary {
    width: 100%;
    justify-content: center;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .data-table th,
  .data-table td {
    padding: 14px 16px;
  }
  
  .data-table th.th-date,
  .data-table td.td-date {
    display: none;
  }
  
  .tour-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
  }
  
  .data-table td {
    font-size: 14px;
  }
  
  .modal {
    max-width: 100%;
  }
  
  .modal-form {
    padding: 24px 20px;
  }
}

/* ==========================================
   ADDITIONAL TABLE STYLES
   ========================================== */

/* Clickable rows */
.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: rgba(59,130,246,0.05) !important;
}

/* Tour name with info */
.tour-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tour-title {
  font-weight: 600;
  color: var(--text-primary);
}

.tour-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* Page title with icon */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.page-title-icon ion-icon {
  color: #FFFFFF;
}

/* Date cell */
.date-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-icon {
  font-size: 20px;
  color: var(--color-calendar);
}

.td-date-main {
  font-weight: 600;
}

/* Price */
.price-value {
  font-weight: 700;
  color: var(--color-reports);
}

/* Seats badge */
.seats-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 0 10px;
  background: rgba(20, 184, 166, 0.4);;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.seats-badge.seats-full {
  background: rgba(16,185,129,0.2);
  color: #10B981;
}

.seats-badge.seats-booked {
  background: rgba(59, 130, 246, 0.2);
  color: #3B82F6;
}

.seats-badge.seats-available {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.seats-badge.seats-total {
  background: rgba(100, 116, 139, 0.15);
  color: #94A3B8;
}

.seats-badge.badge-groups {
  background: rgba(139, 92, 246, 0.2);
  color: #A855F7;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-green {
  background: rgba(34,197,94,0.15);
  color: #4ADE80;
}

.status-red {
  background: rgba(239,68,68,0.15);
  color: #F87171;
}

.status-gray {
  background: rgba(100,116,139,0.15);
  color: #94A3B8;
}

/* Form row (2 columns) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Form divider */
.form-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* Form sections */
.form-section {
  margin-bottom: 28px;
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.form-section-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.05) 100%);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent-primary);
}

.form-section-icon-repeat {
  background: linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(168,85,247,0.05) 100%);
  border-color: rgba(168,85,247,0.2);
  color: #A855F7;
}

.form-section-icon-groups {
  background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.05) 100%);
  border-color: rgba(16,185,129,0.2);
  color: #10B981;
}

.form-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.form-section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0 0;
}

.form-label ion-icon {
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--text-muted);
}

.form-label-hint {
  font-weight: 400;
  color: var(--text-muted);
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.form-value {
  padding: 12px 16px;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

/* Recurrence cards */
.recurrence-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.recurrence-card {
  cursor: pointer;
}

.recurrence-card input[type="radio"] {
  display: none;
}

.recurrence-card-inner {
  position: relative;
  padding: 18px;
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recurrence-card:hover .recurrence-card-inner {
  border-color: var(--accent-primary);
  background: rgba(59,130,246,0.03);
}

.recurrence-card input[type="radio"]:checked + .recurrence-card-inner {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.02) 100%);
  box-shadow: 0 4px 20px rgba(59,130,246,0.15);
}

.recurrence-card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.05) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent-primary);
  transition: all 0.25s ease;
}

.recurrence-card-icon-weekly {
  background: linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(168,85,247,0.05) 100%);
  color: #A855F7;
}

.recurrence-card-icon-monthly {
  background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(245,158,11,0.05) 100%);
  color: #F59E0B;
}

.recurrence-card input[type="radio"]:checked + .recurrence-card-inner .recurrence-card-icon {
  transform: scale(1.05);
}

.recurrence-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recurrence-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.recurrence-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.recurrence-card-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent-primary);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s ease;
}

.recurrence-card input[type="radio"]:checked + .recurrence-card-inner .recurrence-card-check {
  opacity: 1;
  transform: scale(1);
}

/* Recurrence settings panel */
.recurrence-settings {
  margin-top: 16px;
  animation: slideDown 0.3s ease;
}

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

.recurrence-settings-inner {
  padding: 24px;
  background: linear-gradient(135deg, rgba(168,85,247,0.05) 0%, rgba(59,130,246,0.03) 100%);
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: 16px;
}

#monthly-options .recurrence-settings-inner {
  background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, rgba(245,158,11,0.02) 100%);
  border-color: rgba(245,158,11,0.15);
}

/* Weekdays grid */
.weekdays-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.weekday-chip {
  cursor: pointer;
}

.weekday-chip input[type="checkbox"] {
  display: none;
}

.weekday-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 0 16px;
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.weekday-chip:hover span {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.weekday-chip input[type="checkbox"]:checked + span {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.weekday-chip-weekend span {
  color: #F59E0B;
}

.weekday-chip-weekend input[type="checkbox"]:checked + span {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}

/* Monthdays grid */
.monthdays-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.monthday-chip {
  cursor: pointer;
}

.monthday-chip input[type="checkbox"] {
  display: none;
}

.monthday-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.monthday-chip:hover span {
  border-color: #F59E0B;
  color: var(--text-primary);
}

.monthday-chip input[type="checkbox"]:checked + span {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
  transform: scale(1.02);
}

/* Modal XL size */
.modal-xl {
  max-width: 720px;
}

/* Button large */
.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
}

@media (max-width: 768px) {
  .recurrence-cards {
    grid-template-columns: 1fr;
  }
  
  .recurrence-card-inner {
    flex-direction: row;
    align-items: center;
  }
  
  .monthdays-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .weekdays-grid {
    gap: 8px;
  }
  
  .weekday-chip span {
    min-width: 42px;
    padding: 0 12px;
  }
}

/* Select input */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 48px;
  cursor: pointer;
}

/* Modal large */
.modal-lg {
  max-width: 560px;
}

/* Text muted utility */
.text-muted {
  color: var(--text-muted);
}

/* Mobile departures table */
@media (max-width: 768px) {
  /* На мобильных оставляем дату выезда, дату возврата, занято мест и действия */
  #tour-departures-table th:nth-child(1),
  #tour-departures-table td:nth-child(1),
  #tour-departures-table th:nth-child(4),
  #tour-departures-table td:nth-child(4),
  #tour-departures-table th:nth-child(6),
  #tour-departures-table td:nth-child(6),
  #departure-days-table th:nth-child(1),
  #departure-days-table td:nth-child(1),
  #departure-days-table th:nth-child(4),
  #departure-days-table td:nth-child(4),
  #departure-days-table th:nth-child(6),
  #departure-days-table td:nth-child(6) {
    display: none;
  }

  .page-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-title-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 14px;
  }
}

/* ==========================================
   DEPARTURE DETAIL PAGE STYLES
   ========================================== */

/* Detail Grid */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Detail Card */
.detail-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.detail-card-full {
  grid-column: 1 / -1;
}

.detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  background: #1E293B;
  border-bottom: none;
  min-height: 56px;
}

.detail-card-header ion-icon {
  font-size: 24px;
  color: #FFFFFF;
}

.detail-card-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  flex: 1;
}

.detail-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-card-title ion-icon {
  font-size: 24px;
  color: #FFFFFF;
}

.detail-card-title h3 {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

/* Контейнер для кнопок действий */
.detail-card-actions button {
  padding: 10px 16px;
  font-size: 14px;
}

.detail-card-actions button ion-icon {
  font-size: 18px;
  color: #FFFFFF;
}

/* Кнопки внутри header на темном фоне */
.detail-card-header .btn-secondary {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.2);
}

.detail-card-header .btn-secondary ion-icon {
  color: #FFFFFF;
}

.detail-card-header .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.3);
}

/* btn-sm в header на темном фоне */
.detail-card-header .btn-sm ion-icon {
  color: #FFFFFF;
}

/* Hotels Section Header */
.hotels-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  background: #1E293B;
  border-bottom: none;
  min-height: 56px;
  border-radius: 8px 8px 0 0;
}

.hotels-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.hotels-section-title ion-icon {
  font-size: 24px;
  color: #FFFFFF;
}

.hotels-section-header .btn-add-hotel {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.hotels-section-header .btn-add-hotel:hover {
  transform: scale(1.1);
  color: #F0F0F0;
}

.hotels-section-header .btn-add-hotel ion-icon {
  color: #FFFFFF;
  font-size: 24px;
}

/* Available Rooms Section */
.available-rooms-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  padding: 16px 24px;
  background: #1E293B;
  border-radius: 8px;
  margin-left: -24px;
  margin-right: -24px;
  margin-top: 0;
  margin-bottom: 24px;
  min-height: 56px;
}

.available-rooms-title ion-icon {
  font-size: 24px;
  color: #FFFFFF;
}

.detail-card-body {
  padding: 24px;
}

/* Filter Card */
.filter-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(139,92,246,0.05) 100%);
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(59,130,246,0.08);
  position: relative;
  overflow: hidden;
}

.filter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
}

.filter-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.filter-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 24px;
  box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}

.filter-card-title-group {
  flex: 1;
}

.filter-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.filter-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.filter-card-body {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.filter-inputs-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-input-group {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.filter-label ion-icon {
  font-size: 16px;
  color: #3B82F6;
}

.filter-date-input {
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 12px;
}

.filter-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 20px;
  margin-bottom: 12px;
}

.filter-reset-btn {
  white-space: nowrap;
  padding: 12px 20px;
}

@media (max-width: 768px) {
  .filter-card {
    padding: 20px;
  }

  .filter-card-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .filter-card-title {
    font-size: 16px;
  }

  .filter-inputs-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-input-group {
    min-width: 100%;
  }

  .filter-separator {
    display: none;
  }

  .filter-reset-btn {
    width: 100%;
  }
}

/* Info Cards Row (horizontal info cards) */
.info-cards-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.info-card-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  flex: 1;
  min-width: 180px;
}

.info-card-mini ion-icon {
  font-size: 24px;
  color: var(--accent-primary);
}

.info-card-mini > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-card-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.info-card-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Group Cell */
.group-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-icon {
  font-size: 24px;
  color: var(--accent-primary);
}

/* Page Title Icon Group */
.page-title-icon-group {
  background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
}

.page-title-icon-sources {
  background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
}

/* Source name cell */
.source-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.source-name ion-icon {
  font-size: 20px;
}

/* Source type badge */
.source-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid;
}

/* Source type grid for selection */
.source-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.source-type-option {
  cursor: pointer;
}

.source-type-option input[type="radio"] {
  display: none;
}

.source-type-option-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  text-align: center;
}

.source-type-option:hover .source-type-option-inner {
  border-color: var(--type-color);
  color: var(--type-color);
}

.source-type-option input[type="radio"]:checked + .source-type-option-inner {
  background: var(--type-color);
  border-color: var(--type-color);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--type-color) 40%, transparent);
}

@media (max-width: 640px) {
  .source-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .info-cards-row {
    flex-direction: column;
  }
  
  .info-card-mini {
    min-width: auto;
  }
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 640px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.info-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.info-value.price-value {
  color: var(--color-reports);
}

/* Select with add button */
.select-with-add {
  display: flex;
  gap: 10px;
}

.select-with-add .form-select {
  flex: 1;
}

.btn-add {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.2);
  color: #4ADE80;
}

.btn-add:hover {
  background: rgba(34,197,94,0.2);
  border-color: rgba(34,197,94,0.4);
}

.btn-add-inline {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4ADE80;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-add-inline ion-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.btn-add-inline:hover {
  background: rgba(34,197,94,0.2);
  border-color: rgba(34,197,94,0.4);
  color: #4ADE80;
}

.btn-edit {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.2);
  color: #3B82F6;
}

.btn-edit:hover {
  background: rgba(59,130,246,0.2);
  border-color: rgba(59,130,246,0.4);
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Client name in table */
.client-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-name-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.client-note-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.td-arrival,
.td-departure {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 150px;
}

.client-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.client-avatar ion-icon {
  color: #FFFFFF;
}

.client-info-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg-glass);
  border-radius: 16px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
}

.client-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.client-avatar-lg ion-icon {
  color: #FFFFFF;
}

.client-name-lg {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.client-meta-lg {
  font-size: 14px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.td-notes {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Pricing table cells */
.td-travel-info {
  max-width: 180px;
}

.travel-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.travel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.travel-icon-arrival {
  color: #10B981;
  font-size: 14px;
}

.travel-icon-departure {
  color: #F59E0B;
  font-size: 14px;
}

.td-price,
.td-discount,
.td-prepayment,
.td-remaining {
  white-space: nowrap;
}

.price-value {
  font-weight: 600;
  color: var(--text-primary);
}

.discount-badge {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.prepayment-value {
  color: #10B981;
  font-weight: 500;
}

.remaining-value {
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
}

.remaining-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.remaining-paid {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.client-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.seats-badge-sm {
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* Discount input group */
.discount-input-group {
  display: flex;
  gap: 0;
}

.discount-input-group .form-input:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
}

.discount-type-select {
  width: 60px !important;
  min-width: 60px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
  text-align: center;
}

/* Input with suffix */
.input-with-suffix {
  position: relative;
  display: flex;
}

.input-with-suffix .form-input {
  padding-right: 36px;
}

.input-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

/* Remaining display */
.remaining-display {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  padding: 0 16px;
}

.remaining-display .remaining-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.remaining-display.remaining-pending .remaining-amount {
  color: #F59E0B;
}

.remaining-display.remaining-paid .remaining-amount {
  color: #10B981;
}

/* Form row 4 columns */
.form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .form-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .form-row-4 {
    grid-template-columns: 1fr;
  }
}

/* Empty state small */
.empty-state-sm {
  padding: 40px 20px;
  text-align: center;
}

.empty-state-sm ion-icon.empty-state-icon-sm {
  font-size: 48px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.empty-state-sm p {
  color: var(--text-muted);
  margin: 0;
}

/* Button SM */
.btn-sm {
  padding: 10px 16px;
  font-size: 14px;
}

.btn-sm ion-icon {
  font-size: 18px;
  color: #000000;
}

/* Status large */
.status-lg {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 12px;
}

/* Calendar icon for page title */
.page-title-icon-calendar {
  background: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);
  box-shadow: 0 8px 24px rgba(20,184,166,0.3);
}

/* Alert error */
.alert-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  color: #F87171;
}

/* Date info in table */
.date-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Tour name link in table */
.tour-name-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: opacity 0.2s;
}

.tour-name-link:hover {
  opacity: 0.8;
}

/* Responsive detail cards */
@media (max-width: 640px) {
  .detail-card-header {
    padding: 16px 20px;
    flex-wrap: wrap;
  }

  .detail-card-body {
    padding: 20px;
  }

  .info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .info-value {
    font-size: 16px;
  }

  .detail-card-header .btn-primary {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Мобильная версия для кнопок действий */
  .detail-card-actions {
    flex-direction: column !important;
    width: 100%;
  }

  .detail-card-actions button {
    width: 100%;
    justify-content: center;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .detail-card-actions button ion-icon {
    font-size: 18px !important;
  }
}

/* ==========================================
   PLACEHOLDER PAGE STYLES
   ========================================== */

.placeholder-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  position: relative;
  text-align: center;
  padding: 40px 20px;
}

.placeholder-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  animation: fadeInUp 0.8s var(--ease-out-expo);
}

.placeholder-icon {
  width: 120px;
  height: 120px;
  border-radius: 36px;
  background: linear-gradient(135deg, var(--placeholder-color) 0%, color-mix(in srgb, var(--placeholder-color) 60%, black) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  font-size: 56px;
  box-shadow: 0 16px 48px var(--placeholder-glow);
  position: relative;
  animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.placeholder-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 42px;
  background: linear-gradient(135deg, var(--placeholder-color) 0%, transparent 60%);
  opacity: 0.3;
  filter: blur(16px);
  z-index: -1;
}

.placeholder-icon ion-icon {
  color: #FFFFFF;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.placeholder-title {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.placeholder-description {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}

.placeholder-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 16px;
  margin-bottom: 40px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FBBF24;
  box-shadow: 0 0 12px rgba(251,191,36,0.6);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.placeholder-status span {
  font-size: 15px;
  font-weight: 700;
  color: #FBBF24;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.placeholder-features {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 28px 32px;
  margin-bottom: 40px;
  text-align: left;
}

.placeholder-features h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.feature-list li ion-icon {
  font-size: 20px;
  color: var(--color-reports);
  flex-shrink: 0;
}

.feature-list li:hover {
  color: var(--text-primary);
}

.btn-back-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color-strong);
  border-radius: 16px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s var(--ease-out-expo);
}

.btn-back-home ion-icon {
  font-size: 22px;
  transition: transform 0.3s var(--ease-out-expo);
}

.btn-back-home:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-glow);
  color: var(--text-primary);
}

.btn-back-home:hover ion-icon {
  transform: translateX(-4px);
}

/* Decorations */
.placeholder-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.decoration-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 50%;
  animation: ringRotate 30s linear infinite;
}

.decoration-ring-2 {
  width: 800px;
  height: 800px;
  animation-direction: reverse;
  animation-duration: 45s;
}

@keyframes ringRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.decoration-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Mobile placeholder */
@media (max-width: 768px) {
  .placeholder-icon {
    width: 100px;
    height: 100px;
    font-size: 48px;
    border-radius: 28px;
    margin-bottom: 24px;
  }
  
  .placeholder-title {
    font-size: 32px;
  }
  
  .placeholder-description {
    font-size: 15px;
  }
  
  .placeholder-features {
    padding: 24px 20px;
  }
  
  .feature-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .feature-list li {
    font-size: 14px;
  }
  
  .decoration-ring,
  .decoration-ring-2 {
    display: none;
  }
}

/* ==========================================
   CALENDAR PAGE STYLES
   ========================================== */

.calendar-page {
  animation: fadeInUp 0.6s var(--ease-out-expo);
}

/* Calendar Type Switcher */
.calendar-type-switcher {
  display: flex;
  gap: 12px;
  margin: 20px 0 24px;
  padding: 6px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: fit-content;
}

.type-switch-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s var(--ease-out-expo);
  background: transparent;
  border: 1px solid transparent;
}

.type-switch-btn ion-icon {
  font-size: 20px;
}

.type-switch-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.type-switch-btn.active {
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(59,130,246,0.1) 100%);
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 4px 12px rgba(139,92,246,0.2);
}

/* Calendar Header */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.calendar-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.calendar-title-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 24px rgba(20,184,166,0.3);
}

.calendar-title-icon ion-icon {
  color: #FFFFFF;
}

.calendar-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin: 0;
}

.calendar-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}

/* Calendar Navigation */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.25s var(--ease-out-expo);
}

.calendar-nav-btn ion-icon {
  font-size: 22px;
}

.calendar-nav-btn:hover {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.3);
  color: var(--text-primary);
}

.calendar-current-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}

.month-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: capitalize;
}

.year-name {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.calendar-today-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--gradient-brand);
  border-radius: 12px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.25s var(--ease-out-expo);
  box-shadow: 0 4px 16px rgba(59,130,246,0.25);
}

.calendar-today-btn ion-icon {
  font-size: 18px;
}

.calendar-today-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,130,246,0.35);
}

/* Calendar exit fullscreen button (fixed, visible only in fs mode) */
.calendar-exit-fs-btn {
  display: none;
}

body.calendar-fs-active .calendar-exit-fs-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1001;
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: all 0.25s var(--ease-out-expo);
}

body.calendar-fs-active .calendar-exit-fs-btn:hover {
  background: var(--color-calendar);
  border-color: var(--color-calendar);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20,184,166,0.35);
}

body.calendar-fs-active .calendar-exit-fs-btn ion-icon {
  font-size: 18px;
}

/* Calendar fullscreen button in top actions bar */
.calendar-fullscreen-topbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  flex-shrink: 0;
}

body.calendar-fs-active .calendar-fullscreen-topbtn {
  display: none;
}

/* Unassigned tours calendar styles */
.unassigned-group-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.unassigned-tour-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unassigned-group-name {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-guide-cell .unassigned-icons {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: 6px;
  flex-shrink: 0;
}

.unassigned-icon {
  font-size: 16px;
  color: #d1d5db;
  opacity: 0.5;
}

.unassigned-icon.assigned {
  color: #10b981;
  opacity: 1;
}

/* Unassigned grid — no left sidebar column */
.calendar-grid.unassigned-grid .calendar-header-row {
  display: flex;
}

.calendar-grid.unassigned-grid .calendar-header-row .calendar-guide-header {
  display: none;
}

/* Unassigned row — dynamic height based on lane count */
.calendar-row.unassigned-row .calendar-day-cell {
  height: var(--row-height, 56px);
  min-height: var(--row-height, 56px);
}

.departure-block.unassigned-departure {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}

.departure-block.unassigned-departure .departure-name {
  font-size: 9px;
  font-weight: 600;
}

.departure-block.unassigned-departure.no-clients {
  opacity: 0.45;
}

.departure-icons {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.dep-icon {
  font-size: 11px;
  color: #9ca3af;
}

.dep-icon.assigned {
  color: #10b981;
}

/* Fullscreen mode — скрываем интерфейс */
body.calendar-fs-active .desktop-sidebar,
body.calendar-fs-active .top-bar,
body.calendar-fs-active .breadcrumb-bar,
body.calendar-fs-active .top-actions-block,
body.calendar-fs-active .mobile-floating-actions {
  display: none !important;
}

body.calendar-fs-active .app-layout {
  display: block;
}

body.calendar-fs-active .main-content {
  padding: 0;
  margin-left: 0;
}

body.calendar-fs-active .screen {
  padding: 0;
  min-height: 100vh;
  overflow: visible;
}

body.calendar-fs-active .screen-content {
  max-width: none;
  margin: 0;
}

body.calendar-fs-active .calendar-page {
  padding: 20px 24px;
  min-height: 100vh;
  animation: none;
}

body.calendar-fs-active .calendar-fab-fullscreen {
  z-index: 1001;
}

/* Calendar Legend */
.calendar-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.calendar-legend::-webkit-scrollbar {
  display: none;
}

.legend-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Calendar Container */
.calendar-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.calendar-container::-webkit-scrollbar {
  height: 8px;
}

.calendar-container::-webkit-scrollbar-track {
  background: transparent;
}

.calendar-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.calendar-grid {
  overflow-x: visible;
}

/* Calendar Rows */
.calendar-row {
  display: flex;
  min-width: max-content;
}

.calendar-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

/* Calendar Cells */
.calendar-cell {
  flex-shrink: 0;
  padding: 0;
  position: relative;
}

.calendar-guide-header,
.calendar-guide-cell {
  width: 300px;
  min-width: 200px;
  padding: 12px 16px;
  border-right: 1px solid var(--border-color);
  position: sticky;
  left: 0;
  z-index: 10;
}

.calendar-guide-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.calendar-guide-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
}

.guide-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.guide-avatar ion-icon {
  color: #FFFFFF;
}

.guide-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Day Header */
.calendar-day-header {
  width: 48px;
  min-width: 48px;
  padding: 12px 4px;
  text-align: center;
}

.calendar-day-header.weekend {
  background: rgba(239,68,68,0.05);
}

.calendar-day-header.today {
  background: rgba(59,130,246,0.15);
}

.day-number {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.calendar-day-header.weekend .day-number {
  color: #F87171;
}

.calendar-day-header.today .day-number {
  color: #3B82F6;
}

.day-name {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Day Cell */
.calendar-day-cell {
  width: 48px;
  min-width: 48px;
  height: 56px;
  border-right: 1px solid var(--border-color);
  position: relative;
  overflow: visible;
}

.calendar-day-cell.weekend {
  background: rgba(239,68,68,0.03);
}

.calendar-day-cell.today {
  background: rgba(59,130,246,0.08);
}

.calendar-day-cell.today::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #3B82F6;
}

/* Background day number inside cell */
.cell-day-bg {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0.18;
  z-index: 1;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.calendar-day-cell.weekend .cell-day-bg {
  color: #EF4444;
}

.calendar-day-cell.today .cell-day-bg {
  color: #3B82F6;
  opacity: 0.35;
}

/* Departure Block */
.departure-block {
  position: absolute;
  top: 4px;
  left: 4px;
  transform: none;
  height: 36px;
  width: calc(var(--departure-span) * 48px - 8px);
  background: linear-gradient(135deg, var(--departure-color) 0%, color-mix(in srgb, var(--departure-color) 70%, black) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.25s var(--ease-out-expo);
  overflow: hidden;
  text-decoration: none;
}

.departure-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
}

.departure-block:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  z-index: 20;
}

.departure-name {
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  flex: 1;
  min-width: 0;
}

.departure-seats {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.2);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  letter-spacing: 0.3px;
}

/* Day Off Block */
.day-off-block {
  position: absolute;
  top: 4px;
  left: 4px;
  height: 36px;
  width: calc(var(--departure-span) * 48px - 8px);
  background: repeating-linear-gradient(
    -45deg,
    #374151,
    #374151 6px,
    #4B5563 6px,
    #4B5563 12px
  );
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  z-index: 5;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
}

.day-off-block > ion-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}

.day-off-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-off-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.day-off-block:hover .day-off-actions {
  opacity: 1;
}

.day-off-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
  font-size: 12px;
}

.day-off-btn:hover {
  background: rgba(255,255,255,0.3);
}

.day-off-btn-danger:hover {
  background: rgba(239,68,68,0.5);
}

/* Days Off Management Section */
.calendar-days-off-section {
  background: var(--surface-1, #1e2030);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.days-off-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.days-off-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
}

.days-off-title ion-icon {
  font-size: 20px;
  color: #6B7280;
}

.days-off-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-off-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
}

.day-off-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(107,114,128,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 16px;
  flex-shrink: 0;
}

.day-off-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-off-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #f1f5f9);
}

.day-off-dates {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
}

.day-off-reason {
  font-size: 12px;
  color: #9CA3AF;
  font-style: italic;
}

.days-off-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary, #94a3b8);
  font-size: 14px;
  padding: 8px 0;
}

.btn-danger-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-danger-icon:hover {
  background: rgba(239,68,68,0.2);
}


/* Calendar Stats */
.calendar-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  transition: all 0.3s var(--ease-out-expo);
}

.stat-card:hover {
  border-color: var(--border-color-strong);
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-icon ion-icon {
  color: #FFFFFF;
}

.stat-icon-guides {
  background: linear-gradient(135deg, #A855F7 0%, #8B5CF6 100%);
}

.stat-icon-tours {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
}

.stat-icon-days {
  background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
}

.stat-icon-busy {
  background: linear-gradient(135deg, #F43F5E 0%, #DC2626 100%);
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Calendar Mobile */
@media (max-width: 1024px) {
  .calendar-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .calendar-nav {
    width: 100%;
    justify-content: space-between;
  }

  /* Hide legend on mobile - info is visible in cards */
  .calendar-legend-sections {
    display: none;
  }

  .calendar-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  /* Type Switcher Mobile */
  .calendar-type-switcher {
    width: 100%;
    margin: 16px 0 20px;
  }

  .type-switch-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
    font-size: 13px;
  }

  .type-switch-btn ion-icon {
    font-size: 18px;
  }

  /* Header Mobile */
  .calendar-header-left {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .calendar-title {
    font-size: 20px;
  }

  .calendar-subtitle {
    font-size: 12px;
  }

  .calendar-title-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    border-radius: 14px;
  }

  .calendar-nav {
    width: 100%;
  }

  .calendar-nav-btn {
    width: 40px;
    height: 40px;
  }

  .calendar-nav-btn ion-icon {
    font-size: 20px;
  }

  .calendar-current-month {
    min-width: 100px;
  }

  .month-name {
    font-size: 17px;
  }

  .year-name {
    font-size: 12px;
  }

  .calendar-today-btn span {
    display: none;
  }

  .calendar-today-btn {
    padding: 12px;
    width: 44px;
    height: 44px;
    justify-content: center;
  }

  .calendar-today-btn ion-icon {
    font-size: 20px;
  }
  
  .calendar-guide-header,
  .calendar-guide-cell {
    width: 140px;
    min-width: 140px;
    padding: 10px 12px;
  }
  
  .guide-avatar {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-radius: 8px;
  }
  
  .guide-name {
    font-size: 12px;
  }
  
  .calendar-day-header {
    width: 40px;
    min-width: 40px;
    padding: 10px 2px;
  }
  
  .day-number {
    font-size: 14px;
  }
  
  .day-name {
    font-size: 9px;
  }
  
  .calendar-day-cell {
    width: 40px;
    min-width: 40px;
    height: 48px;
  }
  
  .departure-block {
    height: 32px;
    width: calc(var(--departure-span) * 40px - 6px);
    left: 3px;
    padding: 0 6px;
  }

  .day-off-block {
    height: 32px;
    width: calc(var(--departure-span) * 40px - 6px);
    left: 3px;
    padding: 0 6px;
  }
  
  .departure-name {
    font-size: 9px;
  }
  
  .calendar-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .stat-card {
    padding: 16px;
    gap: 12px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 12px;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .stat-label {
    font-size: 11px;
  }

  /* Hide desktop calendar on mobile, show mobile cards */
  .desktop-calendar {
    display: none;
  }

  .mobile-calendar-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
  }
}

@media (min-width: 641px) {
  .mobile-calendar-cards {
    display: none;
  }
}

@media (max-width: 1024px) {
  /* Mobile Section */
  .mobile-calendar-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(139,92,246,0.03) 100%);
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 14px;
    margin-bottom: 4px;
  }

  .mobile-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }

  .mobile-section-icon ion-icon {
    color: #FFFFFF;
  }

  .mobile-section-icon.guides-icon {
    background: linear-gradient(135deg, #A855F7 0%, #8B5CF6 100%);
  }

  .mobile-section-icon.drivers-icon {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  }

  .mobile-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.3px;
  }

  /* Personnel Card */
  .mobile-personnel-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .mobile-personnel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-surface-secondary);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-personnel-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
  }

  .mobile-personnel-avatar ion-icon {
    color: #FFFFFF;
  }

  .mobile-personnel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-driver-name-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .mobile-personnel-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .mobile-car-number {
    font-size: 12px;
    font-weight: 600;
    color: #10B981;
    background: rgba(16,185,129,0.1);
    padding: 3px 8px;
    border-radius: 6px;
  }

  .mobile-personnel-stats {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  /* Departures List */
  .mobile-departures-list {
    display: flex;
    flex-direction: column;
  }

  .mobile-departure-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-departure-item:last-child {
    border-bottom: none;
  }

  .mobile-departure-item:active {
    background: var(--bg-surface-secondary);
  }

  .mobile-departure-color {
    width: 4px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .mobile-departure-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-departure-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-departure-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    line-height: 1.3;
  }

  .mobile-departure-seats {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    letter-spacing: 0.3px;
  }

  .mobile-departure-date,
  .mobile-departure-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
  }

  .mobile-departure-date ion-icon,
  .mobile-departure-group ion-icon {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  /* Unassigned Icon */
  .mobile-section-icon.unassigned-icon {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  }

  /* Staff badges for unassigned view */
  .mobile-departure-staff {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }

  .staff-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
  }

  .staff-badge ion-icon {
    font-size: 14px;
    flex-shrink: 0;
  }

  .staff-badge.assigned {
    background: rgba(16,185,129,0.1);
    color: #10B981;
  }

  .staff-badge.not-assigned {
    background: rgba(239,68,68,0.1);
    color: #EF4444;
  }

  /* Days Off Section Mobile */
  .calendar-days-off-section {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .day-off-item {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }

  .day-off-info {
    min-width: 0;
    flex: 1;
  }

  .day-off-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .day-off-dates {
    font-size: 11px;
  }

  .day-off-reason {
    font-size: 11px;
  }

  /* No Departures State */
  .mobile-no-departures {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
  }

  .mobile-no-departures ion-icon {
    font-size: 24px;
  }

  /* Empty State */
  .mobile-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
  }

  .mobile-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(59,130,246,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #3B82F6;
    margin-bottom: 16px;
  }

  .mobile-empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
  }

  .mobile-empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
  }
}

/* Extra Small Screens */
@media (max-width: 480px) {
  .mobile-section-header {
    padding: 12px 14px;
  }

  .mobile-section-icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .mobile-section-title {
    font-size: 16px;
  }

  .mobile-personnel-header {
    padding: 12px 14px;
  }

  .mobile-personnel-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .mobile-personnel-name {
    font-size: 14px;
  }

  .mobile-personnel-stats {
    font-size: 12px;
  }

  .mobile-departure-item {
    padding: 12px 14px;
  }

  .mobile-departure-name {
    font-size: 14px;
  }

  .mobile-departure-seats {
    font-size: 12px;
    padding: 3px 8px;
  }

  .mobile-departure-date,
  .mobile-departure-group {
    font-size: 12px;
  }

  .mobile-departure-date ion-icon,
  .mobile-departure-group ion-icon {
    font-size: 15px;
  }

  .mobile-car-number {
    font-size: 11px;
    padding: 2px 6px;
  }
}

/* Ultra Small Screens (360px and below) */
@media (max-width: 360px) {
  /* Page spacing */
  .calendar-page {
    padding: 0;
  }

  /* Type Switcher */
  .calendar-type-switcher {
    margin: 12px 0 16px;
    padding: 4px;
    gap: 8px;
  }

  .type-switch-btn {
    padding: 10px 12px;
    font-size: 12px;
    gap: 6px;
  }

  .type-switch-btn ion-icon {
    font-size: 16px;
  }

  /* Header */
  .calendar-header {
    gap: 16px;
    margin-bottom: 16px;
  }

  .calendar-title-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 12px;
  }

  .calendar-title {
    font-size: 18px;
  }

  .calendar-subtitle {
    font-size: 11px;
  }

  .calendar-nav-btn {
    width: 36px;
    height: 36px;
  }

  .calendar-nav-btn ion-icon {
    font-size: 18px;
  }

  .calendar-current-month {
    min-width: 80px;
  }

  .month-name {
    font-size: 15px;
  }

  .year-name {
    font-size: 11px;
  }

  .calendar-today-btn {
    width: 40px;
    height: 40px;
    padding: 10px;
  }

  .calendar-today-btn ion-icon {
    font-size: 18px;
  }

  /* Mobile Cards */
  .mobile-calendar-cards {
    gap: 16px;
    margin-bottom: 16px;
  }

  .mobile-section-header {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }

  .mobile-section-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
    border-radius: 10px;
  }

  .mobile-section-title {
    font-size: 15px;
  }

  /* Personnel Card */
  .mobile-personnel-card {
    border-radius: 12px;
  }

  .mobile-personnel-header {
    padding: 10px 12px;
    gap: 10px;
  }

  .mobile-personnel-avatar {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
  }

  .mobile-driver-name-wrapper {
    gap: 6px;
  }

  .mobile-personnel-name {
    font-size: 13px;
  }

  .mobile-car-number {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
  }

  .mobile-personnel-stats {
    font-size: 11px;
  }

  /* Departure Item */
  .mobile-departure-item {
    padding: 10px 12px;
    gap: 10px;
  }

  .mobile-departure-color {
    width: 3px;
  }

  .mobile-departure-content {
    gap: 6px;
  }

  .mobile-departure-header-row {
    gap: 8px;
  }

  .mobile-departure-name {
    font-size: 13px;
    line-height: 1.4;
  }

  .mobile-departure-seats {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 6px;
  }

  .mobile-departure-date,
  .mobile-departure-group {
    font-size: 11px;
    gap: 5px;
  }

  .mobile-departure-date ion-icon,
  .mobile-departure-group ion-icon {
    font-size: 14px;
  }

  /* No Departures */
  .mobile-no-departures {
    padding: 20px 12px;
    gap: 8px;
    font-size: 13px;
  }

  .mobile-no-departures ion-icon {
    font-size: 20px;
  }

  /* Empty State */
  .mobile-empty-state {
    padding: 40px 20px;
  }

  .mobile-empty-icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
    margin-bottom: 12px;
  }

  .mobile-empty-state h3 {
    font-size: 16px;
  }

  .mobile-empty-state p {
    font-size: 13px;
  }

  /* Stats */
  .calendar-stats {
    gap: 10px;
  }

  .stat-card {
    padding: 14px;
    gap: 10px;
    border-radius: 14px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
  }

  .stat-value {
    font-size: 18px;
  }

  .stat-label {
    font-size: 10px;
  }

  /* Stats single column on ultra small */
  .calendar-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Days Off ultra small */
  .calendar-days-off-section {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .days-off-title {
    font-size: 14px;
  }

  .day-off-item {
    padding: 8px 10px;
    gap: 8px;
  }

  .day-off-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-radius: 6px;
  }

  .day-off-name {
    font-size: 12px;
  }

  .day-off-dates {
    font-size: 10px;
  }

  .btn-danger-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  /* Staff badges ultra small */
  .staff-badge {
    font-size: 11px;
    padding: 2px 6px;
  }

  .staff-badge ion-icon {
    font-size: 12px;
  }
}

/* ==========================================
   GUIDES PAGE STYLES
   ========================================== */

/* Page title icon for guides */
.page-title-icon-guides {
  background: linear-gradient(135deg, #A855F7 0%, #8B5CF6 100%);
  box-shadow: 0 8px 24px rgba(168,85,247,0.3);
}

/* Guide info in table */
.guide-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.guide-photo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.guide-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #A855F7 0%, #8B5CF6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guide-avatar-placeholder span {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
}

.guide-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guide-fullname {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.guide-shortname {
  font-size: 12px;
  color: var(--text-muted);
}

/* Phone link */
.phone-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.phone-link:hover {
  color: var(--color-tours);
}

/* Passport preview */
.passport-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(34,197,94,0.1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #4ADE80;
}

.passport-preview ion-icon {
  font-size: 16px;
}

/* Departures badge */
.departures-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  background: rgba(168,85,247,0.15);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #A855F7;
}

.th-departures {
  width: 100px;
  text-align: center;
}

.td-departures {
  text-align: center;
}

/* Actions row */
.actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* Edit button */
.btn-edit {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.2);
  color: #60A5FA;
}

.btn-edit:hover {
  background: rgba(59,130,246,0.2);
  border-color: rgba(59,130,246,0.4);
}

/* File upload */
.file-upload-wrapper {
  position: relative;
}

.file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  background: var(--bg-glass);
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  text-align: center;
}

.file-upload-label ion-icon {
  font-size: 40px;
  color: var(--text-muted);
}

.file-upload-label span {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.file-hint {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.file-upload-label:hover {
  border-color: rgba(59,130,246,0.4);
  background: rgba(59,130,246,0.05);
}

.file-upload-label:hover ion-icon {
  color: var(--color-tours);
}

.file-preview {
  display: none;
  margin-top: 16px;
}

.file-preview.has-image {
  display: block;
}

.file-preview img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  object-fit: cover;
}

/* Form row 3 columns */
.form-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .form-row-3 {
    grid-template-columns: 1fr;
  }
}

/* Td passport */
.td-passport {
  min-width: 120px;
}

/* Mobile guides */
@media (max-width: 900px) {
  .th-departures,
  .td-departures {
    display: none;
  }
  
  .td-passport {
    display: none;
  }
}

@media (max-width: 640px) {
  .guide-photo,
  .guide-avatar-placeholder,
  .client-photo,
  .client-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  
  .guide-avatar-placeholder span,
  .client-avatar-placeholder span {
    font-size: 14px;
  }
  
  .guide-fullname,
  .client-fullname {
    font-size: 14px;
  }
  
  .guide-info,
  .client-info {
    gap: 10px;
  }
  
  .actions-row {
    gap: 4px;
  }
  
  .btn-icon {
    width: 36px;
    height: 36px;
  }
  
  .btn-icon ion-icon {
    font-size: 18px;
  }
}

/* ==========================================
   CLIENTS PAGE STYLES
   ========================================== */

/* Page title icon for clients */
.page-title-icon-clients {
  background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  box-shadow: 0 8px 24px rgba(16,185,129,0.3);
}

/* Page title icon for users */
.page-title-icon-users {
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  box-shadow: 0 8px 24px rgba(245,158,11,0.3);
}

/* Client info in table */
.client-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.client-photo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.client-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.client-avatar-placeholder span {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
}

/* User avatar badge for users page */
.user-avatar-badge {
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
}

.user-avatar-badge ion-icon {
  font-size: 20px;
  color: #FFFFFF;
}

.client-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.client-fullname {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.client-address {
  font-size: 12px;
  color: var(--text-muted);
}

/* Email link */
.email-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.email-link:hover {
  color: var(--color-clients);
}

/* Gender badge */
.gender-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 12px;
  transition: all 0.2s ease;
}

.gender-badge:hover {
  transform: scale(1.05);
}

.gender-badge.gender-m {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
  color: #3B82F6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.gender-badge.gender-f {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.08) 100%);
  color: #EC4899;
  border: 1px solid rgba(236, 72, 153, 0.2);
}

.gender-badge ion-icon {
  font-size: 16px;
}

/* Age badge */
.age-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #8B5CF6;
  margin-left: 6px;
}

.th-age {
  width: 100px;
  text-align: center;
}

.td-age {
  text-align: center;
}

/* Green departures badge */
.departures-badge-green {
  background: rgba(16,185,129,0.15);
  color: #10B981;
}

/* Mobile clients */
@media (max-width: 900px) {
  .th-age,
  .td-age {
    display: none;
  }
}

@media (max-width: 768px) {
  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    display: none;
  }
}

/* Autocomplete styles */
input[list] {
  position: relative;
}

input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
}

datalist {
  display: none;
}

input[list]:valid + datalist {
  display: block;
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-card);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
  margin-top: 4px;
}

input[list]:focus + datalist {
  display: block;
}

datalist option {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-primary);
}

datalist option:hover {
  background: var(--bg-secondary);
}

/* Collection points in catalog table */
.td-collection-points {
  max-width: 200px;
}

.collection-points-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collection-point-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.collection-point-item ion-icon {
  font-size: 14px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.collection-point-more {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Collection point input in modals */
.collection-point-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.collection-point-input .form-input {
  flex: 1;
}

.collection-point-input .btn-icon {
  flex-shrink: 0;
}

/* ========================================
   USER MANAGEMENT STYLES
   ======================================== */

/* Tabs */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  font-weight: 500;
  position: relative;
  bottom: -1px;
}

.tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
}

.tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab ion-icon {
  font-size: 20px;
}

/* User Table Styles */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar ion-icon {
  font-size: 22px;
  color: white;
}

.user-name {
  font-weight: 600;
  color: var(--text-primary);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.badge-role {
  background: rgba(99,102,241,0.15);
  color: #818CF8;
  border: 1px solid rgba(99,102,241,0.2);
}

.badge-success {
  background: rgba(34,197,94,0.15);
  color: #4ADE80;
  border: 1px solid rgba(34,197,94,0.2);
}

.badge-secondary {
  background: rgba(156,163,175,0.15);
  color: #9CA3AF;
  border: 1px solid rgba(156,163,175,0.2);
}

/* Roles Grid */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.role-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  transition: all 0.3s var(--ease-out-expo);
}

.role-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.role-card-header {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.role-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.role-icon ion-icon {
  font-size: 24px;
  color: white;
}

.role-info {
  flex: 1;
}

.role-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.role-description {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.role-stats {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.role-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 14px;
}

.role-stat ion-icon {
  font-size: 18px;
}

.role-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Permissions Grid */
.permissions-grid {
  display: grid;
  gap: 24px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}

.permission-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.permission-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.08) 100%);
  border-bottom: 1px solid var(--border-color-strong);
  border-radius: 8px 8px 0 0;
}

.permission-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.3px;
}

.permission-group-title ion-icon {
  font-size: 20px;
  color: var(--primary-color);
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.checkbox-wrapper input[type="checkbox"]:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.checkbox-wrapper input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border-color: #3B82F6;
  box-shadow: 0 0 12px rgba(59,130,246,0.4);
}

.checkbox-wrapper input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-wrapper input[type="checkbox"]:indeterminate {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border-color: #F59E0B;
  box-shadow: 0 0 12px rgba(245,158,11,0.4);
}

.checkbox-wrapper input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 2px;
  background: white;
  border: none;
  transform: none;
}

.permission-list {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.permission-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.permission-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-glow);
}

.permission-item input[type="checkbox"] {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.permission-item input[type="checkbox"]:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.permission-item input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-color: #10B981;
  box-shadow: 0 0 12px rgba(16,185,129,0.4);
}

.permission-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.permission-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.permission-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.permission-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Form Hint */
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Alert Danger */
.alert-danger {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  color: #F87171;
}

/* Button Migrate */
.btn-migrate:hover {
  background: rgba(168,85,247,0.15);
  border-color: rgba(168,85,247,0.3);
  color: #A78BFA;
}

/* Button Document */
.btn-document:hover {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.3);
  color: #60A5FA;
}

/* Alert Info */
.alert-info {
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.2);
  color: #60A5FA;
}

/* Tabs Navigation */
.tabs-navigation {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  position: relative;
}

.tab-item ion-icon {
  font-size: 18px;
}

.tab-item:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.tab-item.active {
  color: var(--color-guides);
  border-bottom-color: var(--color-guides);
}

.tab-item.active:hover {
  background: rgba(34,211,238,0.05);
}

/* Driver Avatar Placeholder */
.driver-avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.driver-avatar-placeholder ion-icon {
  font-size: 24px;
  color: #FFFFFF;
}

/* Car Number Badge */
.car-number-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(251,146,60,0.1);
  border: 1px solid rgba(251,146,60,0.2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #FB923C;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
  letter-spacing: 0.5px;
}

/* Mobile Tabs */
@media (max-width: 768px) {
  .tabs-navigation {
    margin-bottom: 16px;
    gap: 4px;
  }

  .tab-item {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
  }

  .tab-item ion-icon {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .tab-item {
    padding: 9px 10px;
    font-size: 12px;
    gap: 6px;
  }

  .tab-item ion-icon {
    font-size: 16px;
  }
}

/* Calendar Section Headers */
.calendar-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  left: 0;
  z-index: 10;
}

.calendar-section-header .section-icon {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.calendar-section-header .section-title {
  font-weight: 700;
}

/* Driver Avatar */
.driver-avatar {
  background: linear-gradient(135deg, #FB923C 0%, #F97316 100%) !important;
}

/* Guide Name Wrapper for Drivers with Car Numbers */
.guide-name-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guide-car-number {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

/* Legend Sections Container */
.calendar-legend-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.calendar-legend .legend-label ion-icon {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Stat Icon Drivers */
.stat-icon-drivers {
  background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);
}

/* Calendar Empty State */
.calendar-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.calendar-empty-state .empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.calendar-empty-state .empty-state-icon ion-icon {
  font-size: 40px;
  color: var(--text-muted);
}

.calendar-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.calendar-empty-state p {
  font-size: 14px;
  color: var(--text-muted);
}

/* Mobile Calendar Adjustments */
@media (max-width: 768px) {
  .calendar-legend-sections {
    gap: 12px;
  }
  
  .calendar-section-header {
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .guide-car-number {
    font-size: 10px;
  }
}

/* Actualization Modal Styles */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: var(--text-primary);
}

.checkbox-label:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-color-strong);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-tours);
}

.select-all-label {
  font-weight: 600;
  border-color: var(--border-color-strong);
  margin-bottom: 12px;
}

.tours-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

.tours-checklist::-webkit-scrollbar {
  width: 6px;
}

.tours-checklist::-webkit-scrollbar-track {
  background: var(--bg-glass);
  border-radius: 3px;
}

.tours-checklist::-webkit-scrollbar-thumb {
  background: var(--border-color-strong);
  border-radius: 3px;
}

.tours-checklist::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.tour-checkbox-label {
  margin: 0;
}

/* =============================================
   ACTIVITY LOG (История действий)
   ============================================= */

.activity-log-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-glass);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
}

.activity-log-item {
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--color-tours);
  transition: all 0.3s var(--ease-out-expo);
}

.activity-log-item:hover {
  background: var(--bg-card-hover);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.activity-log-item:last-child {
  margin-bottom: 0;
}

.activity-log-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.activity-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.activity-log-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-tours);
  letter-spacing: 0.03em;
}

.activity-log-user {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  background: var(--bg-glass);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.activity-log-text {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.activity-log-user-inline {
  font-weight: 600;
  color: var(--color-tours);
  margin-right: 0.25rem;
}

.activity-log-text strong {
  color: var(--color-clients);
  font-weight: 600;
}

.activity-log-description {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
}

.activity-log-changes {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-glass);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.activity-log-changes small {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.activity-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  text-align: center;
}

.activity-log-empty ion-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.activity-log-empty p {
  font-size: 0.95rem;
  margin: 0;
}

/* Scrollbar для activity log */
.activity-log-container::-webkit-scrollbar {
  width: 6px;
}

.activity-log-container::-webkit-scrollbar-track {
  background: var(--bg-glass);
  border-radius: 3px;
}

.activity-log-container::-webkit-scrollbar-thumb {
  background: var(--border-color-strong);
  border-radius: 3px;
}

.activity-log-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Адаптивность для activity log */
@media (max-width: 768px) {
  .activity-log-container {
    max-height: 300px;
    padding: 0.75rem;
  }

  .activity-log-item {
    padding: 0.75rem;
  }

  .activity-log-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .activity-log-text {
    font-size: 0.875rem;
  }
}

/* Tile Tasks color */
.tile-tasks {
  --tile-color: var(--color-tasks);
  --tile-gradient: linear-gradient(135deg, var(--color-tasks) 0%, color-mix(in srgb, var(--color-tasks) 60%, #14B8A6) 100%);
  --tile-glow: 0 8px 40px var(--color-tasks-glow);
  --tile-glow-color: var(--color-tasks-glow);
}

/* Tile Deletions color */
.tile-danger {
  --tile-color: var(--color-danger);
  --tile-gradient: linear-gradient(135deg, var(--color-danger) 0%, color-mix(in srgb, var(--color-danger) 60%, #DC2626) 100%);
  --tile-glow: 0 8px 40px var(--color-danger-glow);
  --tile-glow-color: var(--color-danger-glow);
}

.tile-guide-cabinets {
  --tile-color: var(--color-guide-cabinets);
  --tile-gradient: linear-gradient(135deg, var(--color-guide-cabinets) 0%, color-mix(in srgb, var(--color-guide-cabinets) 60%, #A855F7) 100%);
  --tile-glow: 0 8px 40px var(--color-guide-cabinets-glow);
  --tile-glow-color: var(--color-guide-cabinets-glow);
}

/* Tile Salary color */
.tile-salary {
  --tile-color: var(--color-salary);
  --tile-gradient: linear-gradient(135deg, var(--color-salary) 0%, color-mix(in srgb, var(--color-salary) 60%, #2563EB) 100%);
  --tile-glow: 0 8px 40px var(--color-salary-glow);
  --tile-glow-color: var(--color-salary-glow);
}

/* Clickable sidebar user chip */
a.sidebar-user-chip {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
a.sidebar-user-chip:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
}
a.mobile-user-info {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
a.mobile-user-info:hover {
  background: rgba(0,0,0,0.03);
}

/* Notifications */
.notification-wrapper {
  position: relative;
}

.notification-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease-out-expo);
  padding: 0;
}

.notification-btn ion-icon {
  font-size: 20px;
}

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

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}

.notification-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 500px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.notification-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.mark-all-read {
  font-size: 13px;
  color: var(--text-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.mark-all-read:hover {
  background: rgba(59,130,246,0.1);
}

.notification-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.notification-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  gap: 12px;
}

.notification-item:hover {
  background: rgba(255,255,255,0.03);
}

.notification-item.unread {
  background: rgba(59,130,246,0.05);
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  color: white;
}

.notification-icon.task-assigned {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
}

.notification-icon.task-completion-request {
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
}

.notification-icon.task-approved {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
}

.notification-icon.task-rejected {
  background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
}

.notification-icon.task-message {
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
}

.notification-icon.task-status-changed {
  background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%);
}

.notification-icon.deletion-request {
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
}

.notification-icon.task-cancelled {
  background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.notification-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.notification-empty ion-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 12px;
}

.notification-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.notification-footer a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-link);
  text-decoration: none;
  transition: color 0.2s;
}

/* Upcoming Services Panel */
.upcoming-services-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.upcoming-service-item {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.upcoming-service-item:hover {
  background: rgba(255,255,255,0.04);
}

.upcoming-service-item.urgency-red {
  background: rgba(239,68,68,0.07);
  border-left: 3px solid #ef4444;
}

.upcoming-service-item.urgency-yellow {
  background: rgba(245,158,11,0.07);
  border-left: 3px solid #f59e0b;
}

.upcoming-service-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.urgency-red .upcoming-service-dot { background: #ef4444; }
.urgency-yellow .upcoming-service-dot { background: #f59e0b; }

.upcoming-service-info {
  flex: 1;
  min-width: 0;
}

.upcoming-service-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-service-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-service-days {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
}

.urgency-red .upcoming-service-days { background: rgba(239,68,68,0.15); color: #ef4444; }
.urgency-yellow .upcoming-service-days { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* Messages (Mail icon) */
.messages-wrapper {
  position: relative;
}

.messages-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease-out-expo);
  padding: 0;
}

.messages-btn ion-icon {
  font-size: 20px;
}

.messages-btn:hover {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.3);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.messages-btn.has-messages {
  color: #10B981;
}

.messages-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}

.messages-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 500px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.messages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.messages-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.mark-all-messages-read {
  font-size: 13px;
  color: var(--text-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.mark-all-messages-read:hover {
  background: rgba(16,185,129,0.1);
}

.messages-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.message-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  gap: 12px;
}

.message-item:hover {
  background: rgba(255,255,255,0.03);
}

.message-item.unread {
  background: rgba(16,185,129,0.05);
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  color: white;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-sender {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.message-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.message-time {
  font-size: 12px;
  color: var(--text-muted);
}

.message-unread-count {
  font-size: 11px;
  font-weight: 600;
  color: #10B981;
  background: rgba(16,185,129,0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.messages-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.messages-empty ion-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 12px;
}

/* Mobile Messages */
.mobile-messages .messages-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.mobile-messages .messages-btn ion-icon {
  font-size: 22px;
}

/* Date search filter styles */
.search-filters-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.04) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  margin: 20px;
}

.search-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.search-filters-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-filters-title ion-icon {
  font-size: 20px;
  color: rgba(59, 130, 246, 0.8);
}

.search-filters {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.search-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.search-filter-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.search-filter-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-filter-icon {
  position: absolute;
  left: 12px;
  font-size: 18px;
  color: rgba(59, 130, 246, 0.6);
  pointer-events: none;
  z-index: 1;
}

.search-filter-input {
  width: 100%;
  padding: 11px 12px 11px 40px;
  background: var(--bg-glass);
  border: 1.5px solid var(--border-color-strong);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.search-filter-input::placeholder {
  color: var(--text-placeholder);
}

.search-filter-input:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(59, 130, 246, 0.4);
}

.search-filter-input:focus {
  outline: none;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.search-filter-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 300;
}

.search-filter-reset {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  padding: 0;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease-out;
}

.search-filter-reset:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #DC2626;
}

.search-filter-reset ion-icon {
  font-size: 20px;
}

.search-filter-info {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  border-left: 3px solid rgba(59, 130, 246, 0.5);
  display: none;
  align-items: center;
  gap: 8px;
}

/* ==========================================
   HOTEL BLOCKS STYLES (for departure form)
   ========================================== */

#hotels-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

#hotels-container:empty {
  display: none;
}

.hotel-block {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s var(--ease-out-expo);
}

.hotel-block:hover {
  border-color: var(--border-color-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.hotel-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.05) 100%);
  border-bottom: 1px solid var(--border-color);
}

.hotel-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.hotel-block-title ion-icon {
  font-size: 20px;
  color: #667eea;
}

.hotel-block-content {
  padding: 20px;
}

.hotel-block-content .form-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

/* Select styling to match input fields */
.hotel-block .hotel-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
  cursor: pointer;
}

.hotel-block .hotel-select:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.hotel-block .hotel-select:focus {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(59, 130, 246, 0.5);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hotel-block .hotel-select option {
  background: #1e293b;
  color: var(--text-primary);
  padding: 8px;
}

/* Mobile responsiveness for hotel blocks */
@media (max-width: 768px) {
  .hotel-block-header {
    padding: 14px 16px;
  }

  .hotel-block-content {
    padding: 16px;
  }

  .hotel-block-title {
    font-size: 14px;
  }
  
  .hotel-block .form-row {
    grid-template-columns: 1fr;
  }
}

/* Search Bar Styles */
.search-bar-container {
  margin-bottom: 24px;
}

.search-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  font-size: 20px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 14px 48px 14px 48px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Outfit', sans-serif;
  transition: all 0.3s var(--ease-out-expo);
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.search-input::placeholder {
  color: var(--text-placeholder);
}

.search-clear {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 20px;
  transition: color 0.2s ease;
  cursor: pointer;
  z-index: 1;
}

.search-clear:hover {
  color: var(--text-primary);
}

.search-form .btn-primary {
  padding: 14px 24px;
  white-space: nowrap;
  min-width: 120px;
  background: #1E293B;
  border: 1px solid rgba(255,255,255,0.1);
}

.search-form .btn-primary:hover {
  background: #2d3f5f;
  border-color: rgba(255,255,255,0.2);
}

.search-results-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

.search-results-info strong {
  color: var(--text-primary);
  font-weight: 600;
}

.reset-search-link {
  color: var(--color-tours);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.reset-search-link:hover {
  color: #60A5FA;
  text-decoration: underline;
}

/* Mobile responsiveness for search */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .search-form .btn-primary {
    width: 100%;
  }

  .search-results-info {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ==========================================================================
   Pagination Styles - Global
   ========================================================================== */

.pagination-wrapper {
  margin: 3rem auto 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.pagination-nav {
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-item {
  display: inline-block;
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-strong);
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s var(--ease-out-expo);
  cursor: pointer;
}

.page-link:hover {
  background: var(--bg-primary);
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.page-item.active .page-link {
  background: #1E293B;
  border-color: #1E293B;
  color: white;
  pointer-events: none;
}

.page-item.disabled .page-link {
  background: var(--bg-glass);
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.page-link ion-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.page-link.dots {
  pointer-events: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 8px;
}

@media (max-width: 768px) {
  .pagination-wrapper {
    margin: 2rem auto 1.5rem;
  }

  .page-link {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .page-link ion-icon {
    font-size: 16px;
  }
}

/* ==========================================================================
   Incomplete Applications Indicator Button
   ========================================================================== */

.incomplete-apps-wrapper {
  position: relative;
}

.incomplete-apps-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  border: 2px solid rgba(239,68,68,0.2);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--ease-out-expo);
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}

.incomplete-apps-btn ion-icon {
  font-size: 20px;
}

.incomplete-apps-btn:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  border-color: rgba(239,68,68,0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239,68,68,0.4);
}

/* Когда нет незаполненных заявок - стиль как у колокольчика */
.incomplete-apps-btn.no-issues {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  box-shadow: none;
}

.incomplete-apps-btn.no-issues:hover {
  background: var(--bg-secondary);
  border-color: var(--text-link);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.incomplete-apps-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: white;
  color: #EF4444;
  font-size: 11px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid #EF4444;
  box-shadow: 0 2px 8px rgba(239,68,68,0.4);
  animation: none;
}

/* Пульсация для срочных заявок */
.incomplete-apps-btn.has-urgent {
  animation: urgentPulse 2s ease-in-out infinite;
}

.incomplete-apps-btn.has-urgent .incomplete-apps-badge {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
  }
  50% {
    box-shadow: 0 4px 24px rgba(239,68,68,0.6), 0 0 0 4px rgba(239,68,68,0.2);
  }
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(239,68,68,0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 2px 12px rgba(239,68,68,0.6);
  }
}

/* Mobile styles */
@media (max-width: 767px) {
  .incomplete-apps-btn {
    width: 38px;
    height: 38px;
  }

  .incomplete-apps-btn ion-icon {
    font-size: 20px;
  }

  .incomplete-apps-badge {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

/* ==========================================================================
   Incomplete Groups Indicator Button
   ========================================================================== */

.incomplete-groups-wrapper {
  position: relative;
}

.incomplete-groups-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: white;
  border: 2px solid rgba(249,115,22,0.2);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--ease-out-expo);
  box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}

.incomplete-groups-btn ion-icon {
  font-size: 20px;
}

.incomplete-groups-btn:hover {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
  border-color: rgba(249,115,22,0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249,115,22,0.4);
}

/* Когда нет групп требующих назначения - стиль как у колокольчика */
.incomplete-groups-btn.no-issues {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  box-shadow: none;
}

.incomplete-groups-btn.no-issues:hover {
  background: var(--bg-secondary);
  border-color: var(--text-link);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.incomplete-groups-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #78350F;
  font-size: 10px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid #F97316;
  box-shadow: 0 2px 8px rgba(249,115,22,0.4);
  animation: none;
}

/* Пульсация для срочных групп */
.incomplete-groups-btn.has-urgent {
  animation: urgentPulseGroups 2s ease-in-out infinite;
}

.incomplete-groups-btn.has-urgent .incomplete-groups-badge {
  animation: badgePulseGroups 2s ease-in-out infinite;
}

@keyframes urgentPulseGroups {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(249,115,22,0.3);
  }
  50% {
    box-shadow: 0 4px 24px rgba(249,115,22,0.6), 0 0 0 4px rgba(249,115,22,0.2);
  }
}

@keyframes badgePulseGroups {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(249,115,22,0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 2px 12px rgba(249,115,22,0.6);
  }
}

/* Mobile styles */
@media (max-width: 767px) {
  .incomplete-groups-btn {
    width: 38px;
    height: 38px;
  }

  .incomplete-groups-btn ion-icon {
    font-size: 20px;
  }

  .incomplete-groups-badge {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

/* Client Tours Modal */
.client-tours-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.client-tours-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.client-tours-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.client-tours-placeholder {
  width: 80px;
  height: 80px;
  font-size: 24px;
}

.client-tours-details h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.client-tours-details p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 4px 0;
}

.client-tours-details ion-icon {
  font-size: 18px;
  color: var(--text-muted);
}

.tours-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tour-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: all 0.3s var(--ease-out-expo);
}

.tour-card:hover {
  border-color: var(--border-color-strong);
  transform: translateY(-2px);
}

.tour-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(59,130,246,0.1);
  border-bottom: 1px solid var(--border-color);
}

.tour-card-number {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59,130,246,0.2);
  color: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.tour-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex-grow: 1;
}

.tour-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tour-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tour-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.tour-info-item ion-icon {
  font-size: 22px;
  color: var(--text-muted);
  margin-top: 2px;
  flex-shrink: 0;
}

.tour-info-item > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.tour-info-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.tour-info-value {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
}

.tour-notes {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 10px;
  margin-top: 4px;
}

.tour-notes ion-icon {
  font-size: 20px;
  color: #FBBF24;
  margin-top: 2px;
  flex-shrink: 0;
}

.tour-notes span {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.loading-spinner ion-icon {
  font-size: 48px;
  animation: spin 1.5s linear infinite;
}

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

.loading-spinner span {
  font-size: 16px;
}

.client-row:hover {
  background: rgba(59,130,246,0.05);
}

.client-row:active {
  background: rgba(59,130,246,0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .tour-info-row {
    grid-template-columns: 1fr;
  }
  
  .client-tours-header {
    flex-direction: column;
    text-align: center;
  }
}

.tour-card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background: rgba(0,0,0,0.1);
}

.btn-tour-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s var(--ease-out-expo);
  cursor: pointer;
  width: 100%;
}

.btn-tour-link:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  border-color: rgba(59,130,246,0.5);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}

.btn-tour-link ion-icon {
  font-size: 18px;
  transition: transform 0.3s var(--ease-out-expo);
}

.btn-tour-link:hover ion-icon {
  transform: translateX(2px);
}

/* Common Booking Info - стиль идентичный карточкам клиентов */
.common-booking-info {
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  border: 1px solid var(--border-color);
  margin-top: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.common-booking-info:hover {
  border-color: var(--border-color-strong);
  box-shadow: var(--shadow-card);
}

/* Gender selector - минималистичный стиль как у других полей */
.gender-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.gender-selector.has-error .gender-card {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.gender-option {
  cursor: pointer;
}

.gender-option input[type="radio"] {
  display: none;
}

.gender-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  text-align: center;
  transition: all 0.25s var(--ease-out-expo, ease);
  background: var(--bg-glass);
}

.gender-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.05);
}

.gender-option input[value="F"] ~ .gender-card:hover {
  border-color: rgba(236, 72, 153, 0.3);
  background: rgba(236, 72, 153, 0.05);
}

.gender-option input[type="radio"]:checked + .gender-card {
  color: white;
  border-color: transparent;
}

.gender-option input[value="M"]:checked + .gender-card {
  background: #3B82F6;
}

.gender-option input[value="F"]:checked + .gender-card {
  background: #EC4899;
}

.gender-card ion-icon {
  font-size: 1.25rem;
}

.gender-card span {
  font-size: 15px;
  font-weight: 500;
}

/* ==========================================
   MOBILE ADAPTATION FOR CLIENTS TABLE IN GROUP
   ========================================== */

/* Tablet: Hide less important columns */
@media (max-width: 1200px) {
  /* Hide arrival/departure column on tablets */
  .data-table-compact th:nth-child(5),
  .data-table-compact td:nth-child(5) {
    display: none;
  }
}

@media (max-width: 1024px) {
  /* Hide source column on smaller tablets */
  .data-table-compact th:nth-child(4),
  .data-table-compact td:nth-child(4) {
    display: none;
  }

  /* Make room select more compact */
  .room-select {
    font-size: 13px;
    padding: 6px 8px;
  }
}

/* Mobile: Optimize for small screens */
@media (max-width: 768px) {
  /* Hide manager column on mobile */
  .data-table-compact th:nth-child(3),
  .data-table-compact td:nth-child(3) {
    display: none;
  }

  /* Hide room column on mobile */
  .data-table-compact th:nth-child(7),
  .data-table-compact td:nth-child(7) {
    display: none;
  }

  /* Make client name column more compact */
  .client-name {
    gap: 8px;
  }

  .client-avatar {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .client-name-with-badges {
    font-size: 14px;
  }

  .client-meta-stacked {
    font-size: 12px;
  }

  .client-note-hint {
    font-size: 11px;
  }

  /* Make finance column more compact */
  .finances-compact {
    font-size: 12px;
  }

  .finance-label {
    font-size: 11px;
  }

  .finance-value {
    font-size: 12px;
  }

  /* Compact action buttons */
  .action-buttons-row {
    gap: 4px;
  }

  .btn-icon-action {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Adjust ID column width */
  .data-table-compact td.td-id {
    font-size: 13px;
  }
}

/* Extra small mobile: Ultra compact mode */
@media (max-width: 480px) {
  /* Stack table cells vertically for ultra-compact display */
  .data-table-compact {
    font-size: 13px;
  }

  .data-table-compact thead {
    display: none;
  }

  .data-table-compact tbody tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-card);
  }

  .data-table-compact tbody tr.room-group-separator {
    display: none;
  }

  .data-table-compact tbody td {
    display: block;
    border: none;
    padding: 8px 0;
    text-align: left !important;
  }

  .data-table-compact td.td-id {
    position: absolute;
    top: 12px;
    left: 12px;
    width: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-surface);
    border-radius: 6px;
  }

  .data-table-compact td.td-name {
    margin-top: 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
  }

  .data-table-compact td.td-finances {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
  }

  .data-table-compact td.td-finances::before {
    content: "Финансы";
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .data-table-compact td.td-actions {
    padding-top: 12px;
    margin-top: 8px;
  }

  .action-buttons-row {
    justify-content: flex-start;
    gap: 8px;
  }

  .btn-icon-action {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* Hide all other columns that are not explicitly shown */
  .data-table-compact td:nth-child(3),
  .data-table-compact td:nth-child(4),
  .data-table-compact td:nth-child(5),
  .data-table-compact td:nth-child(7) {
    display: none;
  }
}

/* ==========================================
   DEPARTURE DAYS FILTER STYLES
   ========================================== */

.search-filter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.04) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 14px;
  margin-bottom: 20px;
}

.search-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.search-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.filter-label ion-icon {
  font-size: 14px;
  color: rgba(59, 130, 246, 0.7);
}

.filter-input {
  padding: 11px 14px !important;
  background: var(--bg-glass) !important;
  border: 1.5px solid var(--border-color-strong) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.filter-input:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.filter-input:focus {
  outline: none !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.btn-small {
  padding: 10px 16px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Enhanced date cell styling */
.date-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-cell .date-icon {
  font-size: 18px;
  color: rgba(59, 130, 246, 0.7);
  flex-shrink: 0;
}

.date-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.date-day {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: capitalize;
}

/* Time cell styling */
.time-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.time-cell ion-icon {
  font-size: 16px;
  color: rgba(59, 130, 246, 0.6);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.status-active {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.status-completed {
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
}

.status-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

/* Improved table columns for departure days */
.td-groups,
.td-booked,
.td-total,
.td-available,
.td-status {
  text-align: center;
}

.td-date-main .date-cell {
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

/* Client table meta styles */
.client-meta-stacked {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.client-meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.collection-point-badge-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.manager-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manager-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.source-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.source-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.application-number {
  font-size: 12px;
  color: var(--text-muted);
}

/* Finance summary styles */
.finance-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 2px 0;
}

.finance-label {
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 11px;
}

.finance-value {
  font-weight: 600;
  color: var(--text-primary);
}

.discount-text {
  color: #EF4444 !important;
}

.finances-compact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.finance-row-main {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

.finance-row-discount .finance-value {
  color: #EF4444;
}

.finance-row-prepayment .finance-value {
  color: #3B82F6;
}

.finance-row-total {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.remaining-pending {
  color: #F59E0B !important;
  font-weight: 700;
}

.remaining-paid {
  color: #10B981 !important;
  font-weight: 700;
}

/* Action buttons row */
.action-buttons-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.btn-icon-action {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-action-edit {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
  border-color: rgba(59, 130, 246, 0.2);
}

.btn-action-edit:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.btn-action-migrate {
  background: rgba(167, 139, 250, 0.1);
  color: #A78BFA;
  border-color: rgba(167, 139, 250, 0.2);
}

.btn-action-migrate:hover {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
}

.btn-action-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.2);
}

.btn-action-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Responsive adjustments for filter */
@media (max-width: 768px) {
  .search-filter-section {
    padding: 12px 16px;
  }

  .search-filter-row {
    gap: 10px;
  }

  .search-filter-group {
    min-width: 160px;
  }

  .filter-input {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  .date-day {
    font-size: 11px;
    color: var(--text-muted);
  }

  .date-value {
    font-size: 14px;
    font-weight: 600;
  }

  /* Оптимизация для мобильных: убираем иконки календаря */
  .date-icon,
  .time-cell ion-icon {
    display: none;
  }

  /* Сокращаем названия колонок */
  #tour-departures-table th:nth-child(2),
  #departure-days-table th:nth-child(2) {
    font-size: 11px;
  }

  #tour-departures-table th:nth-child(3),
  #departure-days-table th:nth-child(3) {
    font-size: 11px;
  }

  /* Уменьшаем gap в date-cell без иконки */
  .date-cell {
    gap: 0;
  }

  /* Компактнее отображение даты */
  .date-info {
    gap: 0;
  }
}

/* ==========================================
   COMPREHENSIVE MOBILE OPTIMIZATION
   ========================================== */

/* Safe area support for devices with notch */
@supports (padding: env(safe-area-inset-top)) {
  .top-bar {
    padding-top: env(safe-area-inset-top);
  }

  .mobile-sidebar {
    padding-top: env(safe-area-inset-top);
  }

  .mobile-sidebar-footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .mobile-floating-actions {
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: calc(20px + env(safe-area-inset-right));
  }

  .pwa-install-banner {
    bottom: calc(env(safe-area-inset-bottom));
  }

  .screen {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  /* Modal overlay учитывает safe-area на iOS */
  @media (max-width: 1024px) {
    .modal-overlay {
      padding-top: calc(60px + env(safe-area-inset-top)) !important;
    }

    .modal {
      min-height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
      min-height: calc(100dvh - 60px - env(safe-area-inset-top)) !important;
    }
  }
}

/* PWA standalone mode specific styles */
@media (display-mode: standalone) {
  .pwa-install-banner {
    display: none !important;
  }

  body {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Allow text selection only in input/textarea elements */
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* PWA Install Banner Styles */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1E293B;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-out-expo);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.pwa-install-banner.visible {
  transform: translateY(0);
}

.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.pwa-install-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.pwa-install-icon ion-icon {
  color: #FFFFFF;
}

.pwa-install-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pwa-install-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.pwa-install-text span {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-install-btn {
  padding: 10px 20px;
  background: #3B82F6;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.pwa-install-btn:hover {
  background: #2563EB;
  transform: translateY(-1px);
}

.pwa-install-dismiss {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.25s ease;
}

.pwa-install-dismiss:hover {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}

/* ==========================================
   MOBILE TOUCH OPTIMIZATION
   ========================================== */

/* Increase touch targets to minimum 44px */
@media (max-width: 1024px) {
  /* Disable hover effects on touch devices for performance */
  .tile:hover {
    transform: none;
  }

  .kpi-card:hover {
    transform: none;
  }

  .stat-card:hover {
    transform: none;
  }

  /* Active states for touch feedback */
  .tile:active {
    transform: scale(0.98);
  }

  .kpi-card:active {
    transform: scale(0.98);
  }

  .sidebar-nav-item:active {
    transform: none;
  }

  /* Disable heavy animations on mobile for performance */
  .particles-container {
    display: none !important;
  }

  /* Body noise texture - disable on mobile */
  body::before {
    display: none;
  }

  /* Reduce animation complexity */
  .screen-ring {
    display: none;
  }

  /* Ensure tables scroll horizontally */
  .table-container,
  .data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .table-container::-webkit-scrollbar,
  .data-table-wrapper::-webkit-scrollbar {
    display: none;
  }

  /* Ensure all tables have minimum width */
  .data-table {
    min-width: 100%;
  }

  /* Fix: breadcrumb bar on mobile without sidebar */
  .breadcrumb-bar {
    position: relative;
    margin-left: 0;
  }

  /* Top bar adjustments for mobile */
  .top-bar {
    margin-left: 0;
  }

  .top-bar-container {
    padding: 10px 12px;
  }

  /* Mobile actions visible */
  .mobile-actions {
    display: flex !important;
    align-items: center;
    gap: 4px;
  }

  /* Hide desktop spacer */
  .desktop-spacer {
    display: none;
  }

  /* Mobile brand visible */
  .mobile-brand {
    display: flex !important;
  }

  /* Mobile menu button visible */
  .mobile-menu-btn {
    display: flex !important;
  }

  /* Ensure mobile notification/message buttons are touch-friendly */
  .incomplete-groups-btn,
  .incomplete-apps-btn,
  .messages-btn,
  .notification-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* App layout adjustments */
  .app-layout {
    margin-left: 0;
  }

  .main-content {
    margin-left: 0;
    padding: 0;
  }
}

/* ==========================================
   MOBILE FORM OPTIMIZATION
   ========================================== */

@media (max-width: 768px) {
  /* Prevent zoom on input focus (iOS) - ensure 16px minimum */
  .form-input,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Form groups - less margin on mobile */
  .form-group {
    margin-bottom: 18px;
  }

  /* Form inputs - larger touch targets */
  .form-input {
    padding: 14px 16px;
    border-radius: 12px;
  }

  /* No sidebar margin on mobile */
  body.sidebar-collapsed .main-content,
  body.sidebar-collapsed .breadcrumb-bar {
    margin-left: 0;
  }

  /* Breadcrumb bar mobile */
  .breadcrumb-bar {
    position: relative;
    padding: 0 12px;
    min-height: 48px;
  }

  .breadcrumbs {
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb-item {
    font-size: 13px;
    flex-shrink: 0;
  }

  /* Breadcrumb with actions on mobile */
  .breadcrumb-container-with-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
  }

  .breadcrumb-actions {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .breadcrumb-actions::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb-filter-group {
    flex-shrink: 0;
  }

  /* Full width buttons on mobile */
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* Don't full-width if inside specific containers */
  .action-buttons-row .btn-primary,
  .action-buttons-row .btn-secondary,
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary,
  .breadcrumb-actions .btn-primary,
  .breadcrumb-actions .btn-secondary,
  .detail-card-actions .btn-primary,
  .detail-card-actions .btn-secondary {
    width: auto;
  }
}

/* ==========================================
   MOBILE MODAL OPTIMIZATION
   ========================================== */

@media (max-width: 640px) {
  /* Full screen modals on mobile */
  .modal-overlay {
    padding: 0;
    padding-top: 60px;
    align-items: flex-start;
  }

  .modal {
    max-width: 100%;
    border-radius: 0;
    border-radius: 16px 16px 0 0;
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
    display: flex;
    flex-direction: column;
  }

  .modal-xl,
  .modal-lg {
    max-width: 100%;
  }

  .modal-header {
    padding: 16px 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .modal-title {
    font-size: 18px;
  }

  .modal-form {
    padding: 20px 16px;
    padding-bottom: 140px;
    max-height: none;
    flex: 1;
    overflow-y: auto;
  }

  .modal-actions {
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-direction: column;
    gap: 10px;
  }

  .modal-actions .btn-primary,
  .modal-actions .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  .modal-body {
    max-height: none;
    padding: 16px;
    padding-bottom: 140px;
  }

  /* Client detail modal on mobile */
  .client-detail-modal {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Убедимся что модалка поверх всех элементов */
  .modal-overlay {
    z-index: 10001 !important;
  }

  /* Модалка должна занимать весь экран на мобильных */
  .modal-overlay.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

/* Дополнительные адаптации модалок для маленьких экранов */
@media (max-width: 480px) {
  .modal-overlay {
    padding-top: 56px !important;
  }

  .modal {
    min-height: calc(100vh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .modal-header {
    padding: 14px 16px !important;
  }

  .modal-title {
    font-size: 16px !important;
  }

  .modal-form {
    padding: 16px 14px !important;
    padding-bottom: 140px !important;
  }

  .modal-body {
    padding: 14px !important;
    padding-bottom: 140px !important;
  }

  .modal-actions {
    padding: 14px 16px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .modal-actions .btn-primary,
  .modal-actions .btn-secondary {
    padding: 12px 16px !important;
    font-size: 14px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 15px;
    padding: 12px 14px;
  }

  .form-label {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .modal-overlay {
    padding-top: 52px !important;
  }

  .modal {
    min-height: calc(100vh - 52px) !important;
    min-height: calc(100dvh - 52px) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .modal-header {
    padding: 12px 14px !important;
  }

  .modal-title {
    font-size: 15px !important;
  }

  .modal-form {
    padding: 14px 12px !important;
    padding-bottom: 140px !important;
  }

  .modal-body {
    padding: 12px !important;
    padding-bottom: 140px !important;
  }

  .modal-actions {
    padding: 12px 14px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .modal-actions .btn-primary,
  .modal-actions .btn-secondary {
    padding: 11px 14px !important;
    font-size: 13px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 14px;
    padding: 11px 12px;
  }

  .form-label {
    font-size: 12px;
  }
}

/* ==========================================
   MOBILE TABLE / DATA CARDS
   ========================================== */

@media (max-width: 640px) {
  /* Main screen padding */
  .screen {
    padding: 16px 12px 80px;
  }

  /* Page header on mobile */
  .page-header-row {
    flex-direction: column;
    gap: 16px;
  }

  .page-header-right {
    width: 100%;
  }

  .page-title {
    font-size: 22px;
  }

  .page-title-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 14px;
  }

  /* Data tables scroll wrapper */
  .data-table {
    min-width: 100%;
  }

  .data-table th,
  .data-table td {
    padding: 12px 14px;
    font-size: 13px;
  }

  /* Search filter on mobile */
  .search-filter-section {
    padding: 12px;
  }

  .search-filter-row {
    flex-direction: column;
    gap: 10px;
  }

  .search-filter-group {
    min-width: unset;
    width: 100%;
  }

  /* Calendar type switcher */
  .calendar-type-switcher {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
  }

  .type-switch-btn {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
    min-width: 0;
  }

  .type-switch-btn span {
    display: none;
  }

  /* Calendar legend scrollable */
  .calendar-legend {
    gap: 10px;
    padding: 12px 14px;
  }

  /* Info grid on mobile */
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Notification/Messages dropdowns on mobile */
  .notification-dropdown,
  .messages-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: unset !important;
    max-height: 70vh;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  }

  /* Tour info cards on mobile */
  .tour-info-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Detail card on mobile */
  .detail-card-header {
    padding: 14px 16px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .detail-card-body {
    padding: 16px;
  }

  .detail-card-actions {
    width: 100%;
    flex-direction: column;
  }

  .detail-card-actions button,
  .detail-card-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   EXTRA SMALL MOBILE (< 375px)
   ========================================== */

@media (max-width: 375px) {
  .screen {
    padding: 12px 8px 80px;
  }

  .top-bar-container {
    padding: 8px;
  }

  .mobile-sidebar-brand .brand-text {
    font-size: 16px;
  }

  .dashboard-brand-text {
    font-size: 24px;
  }

  .page-title {
    font-size: 20px;
  }

  .kpi-section {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .kpi-card {
    padding: 12px;
  }

  .kpi-value {
    font-size: 20px;
  }

  .tiles-grid {
    gap: 10px;
  }

  .tile-content {
    padding: 12px;
  }

  .tile-icon-wrapper {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 8px;
  }

  .tile-title {
    font-size: 13px;
  }

  .tile-description {
    font-size: 9px;
  }

  .tile-bullets {
    padding: 10px;
    gap: 6px 8px;
  }

  .tile-bullets li {
    font-size: 9px;
  }

  .modal-header {
    padding: 14px 16px;
  }

  .modal-form {
    padding: 16px 12px;
  }

  .modal-actions {
    padding: 14px 16px;
  }

  .pwa-install-banner {
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }

  .pwa-install-actions {
    width: 100%;
    justify-content: stretch;
  }

  .pwa-install-btn {
    flex: 1;
  }
}

/* ==========================================
   MOBILE SCROLLING AND PERFORMANCE
   ========================================== */

/* Smooth scrolling on touch devices */
.mobile-nav,
.modal-body,
.modal-form,
.notification-list,
.messages-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent pull-to-refresh on PWA */
@media (display-mode: standalone) {
  html {
    overscroll-behavior-y: contain;
  }
}

/* Hide scrollbars on mobile but keep scrolling */
@media (max-width: 1024px) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* Only show scrollbar for main content on large modals */
  .modal-form::-webkit-scrollbar,
  .modal-body::-webkit-scrollbar {
    width: 4px;
  }

  .modal-form::-webkit-scrollbar-thumb,
  .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
  }
}

/* ==========================================
   MOBILE TYPOGRAPHY
   ========================================== */

@media (max-width: 640px) {
  .section-title-text {
    font-size: 18px;
  }

  .placeholder-title {
    font-size: 26px;
    letter-spacing: -1px;
  }

  .placeholder-description {
    font-size: 14px;
  }

  .placeholder-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
    border-radius: 22px;
    margin-bottom: 20px;
  }

  .placeholder-status {
    padding: 10px 18px;
    margin-bottom: 24px;
  }

  .placeholder-status span {
    font-size: 12px;
  }

  .btn-back-home {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* ==========================================
   MOBILE-SPECIFIC UTILITIES
   ========================================== */

/* Hide on mobile, show on desktop */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on desktop, show on mobile */
@media (min-width: 769px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* Force horizontal scroll container for tables */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -12px;
  padding: 0 12px;
}

@media (max-width: 768px) {
  .table-scroll-wrapper {
    margin: 0 -16px;
    padding: 0 16px;
  }
}

/* Touch-optimized links and buttons */
@media (pointer: coarse) {
  a, button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Exceptions for small inline elements */
  .breadcrumb-item,
  .breadcrumb-separator,
  .legend-item,
  .tag,
  .badge,
  .action-badge,
  .notification-badge,
  .messages-badge,
  .incomplete-groups-badge,
  .incomplete-apps-badge {
    min-height: unset;
    min-width: unset;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================
   LANDSCAPE MOBILE
   ========================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .mobile-sidebar {
    width: 100%;
    max-width: 100%;
  }

  .mobile-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .modal {
    min-height: auto;
  }

  .modal-form {
    max-height: 60vh;
  }

  .pwa-install-banner {
    padding: 10px 16px;
  }
}

/* ==========================================
   DARK THEME FOR MOBILE SYSTEM UI
   ========================================== */

/* ==========================================
   MOBILE TOURS CARDS
   ========================================== */

/* Hide mobile cards on desktop */
.mobile-tours-cards {
  display: none;
}

/* Show mobile cards and hide table on mobile */
@media (max-width: 1024px) {
  .desktop-tours-table {
    display: none !important;
  }

  .mobile-tours-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .tour-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    -webkit-tap-highlight-color: transparent;
  }

  .tour-mobile-card:active {
    transform: scale(0.98);
    background: var(--bg-secondary);
  }

  /* Header with icon, title and meta */
  .tour-mobile-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .tour-mobile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .tour-mobile-icon ion-icon {
    font-size: 24px;
    color: white;
  }

  .tour-mobile-title-wrapper {
    flex: 1;
    min-width: 0;
  }

  .tour-mobile-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.3;
  }

  .tour-mobile-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .tour-mobile-departures {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .tour-mobile-departures ion-icon {
    font-size: 16px;
  }

  .tour-mobile-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-link);
  }

  /* Collection points */
  .tour-mobile-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-glass);
    border-radius: 12px;
    border: 1px solid var(--border-color);
  }

  .tour-mobile-point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
  }

  .tour-mobile-point ion-icon {
    font-size: 18px;
    color: var(--text-link);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .tour-mobile-point span {
    flex: 1;
  }

  .tour-mobile-point-more {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    padding-left: 26px;
  }

  .tour-mobile-point-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
  }

  .tour-mobile-point-empty ion-icon {
    font-size: 18px;
    opacity: 0.5;
  }

  /* Actions */
  .tour-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
  }

  .btn-icon-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-icon-mobile ion-icon {
    font-size: 20px;
  }

  .btn-icon-mobile:active {
    transform: scale(0.95);
  }

  .btn-move-mobile {
    background: var(--bg-glass);
    border-color: var(--border-color);
    color: var(--text-secondary);
  }

  .btn-move-mobile:active {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.3);
    color: var(--text-link);
  }

  .btn-edit-mobile {
    background: var(--bg-glass);
    border-color: var(--border-color);
    color: var(--text-link);
  }

  .btn-edit-mobile:active {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
    color: var(--text-link);
  }

  .btn-add-mobile {
    background: var(--bg-glass);
    border-color: var(--border-color);
    color: #22C55E;
  }

  .btn-add-mobile:active {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.3);
    color: #16A34A;
  }

  .btn-delete-mobile {
    background: var(--bg-glass);
    border-color: var(--border-color);
    color: #EF4444;
    margin-left: auto;
  }

  .btn-delete-mobile:active {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: #DC2626;
  }
}

/* Extra small mobile adjustments */
@media (max-width: 375px) {
  .tour-mobile-card {
    padding: 12px;
    gap: 10px;
  }

  .tour-mobile-icon {
    width: 40px;
    height: 40px;
  }

  .tour-mobile-icon ion-icon {
    font-size: 22px;
  }

  .tour-mobile-title {
    font-size: 15px;
  }

  .tour-mobile-meta {
    gap: 8px;
  }

  .tour-mobile-departures,
  .tour-mobile-price {
    font-size: 13px;
  }

  .tour-mobile-points {
    padding: 10px;
    gap: 6px;
  }

  .tour-mobile-point {
    font-size: 13px;
  }

  .btn-icon-mobile {
    width: 38px;
    height: 38px;
  }

  .btn-icon-mobile ion-icon {
    font-size: 18px;
  }
}

/* ==========================================
   MOBILE EXCURSIONS CARDS
   ========================================== */

/* Hide mobile cards on desktop */
.mobile-excursions-cards {
  display: none;
}

/* Show mobile cards and hide table on mobile */
@media (max-width: 1024px) {
  .desktop-excursions-table {
    display: none !important;
  }

  .mobile-excursions-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .excursion-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    -webkit-tap-highlight-color: transparent;
  }

  .excursion-mobile-card:active {
    transform: scale(0.98);
    background: var(--bg-secondary);
  }

  /* Header with icon, title and meta */
  .excursion-mobile-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .excursion-mobile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .excursion-mobile-icon ion-icon {
    font-size: 24px;
    color: white;
  }

  .excursion-mobile-title-wrapper {
    flex: 1;
    min-width: 0;
  }

  .excursion-mobile-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.3;
  }

  .excursion-mobile-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .excursion-mobile-days {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .excursion-mobile-days ion-icon {
    font-size: 16px;
  }

  .excursion-mobile-price {
    font-size: 15px;
    font-weight: 700;
    color: #10B981;
  }

  /* Description */
  .excursion-mobile-description {
    padding: 12px;
    background: var(--bg-glass);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  /* Actions */
  .excursion-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
  }
}

/* Extra small mobile adjustments */
@media (max-width: 375px) {
  .excursion-mobile-card {
    padding: 12px;
    gap: 10px;
  }

  .excursion-mobile-icon {
    width: 40px;
    height: 40px;
  }

  .excursion-mobile-icon ion-icon {
    font-size: 22px;
  }

  .excursion-mobile-title {
    font-size: 15px;
  }

  .excursion-mobile-meta {
    gap: 8px;
  }

  .excursion-mobile-days,
  .excursion-mobile-price {
    font-size: 13px;
  }

  .excursion-mobile-description {
    padding: 10px;
    font-size: 13px;
  }
}

/* ==========================================
   MOBILE DEPARTURE CARDS
   ========================================== */

/* Hide mobile cards on desktop */
.mobile-departures-cards {
  display: none;
}

/* Show mobile cards and hide table on mobile */
@media (max-width: 1024px) {
  .desktop-departures-table {
    display: none !important;
  }

  .mobile-departures-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .departure-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    -webkit-tap-highlight-color: transparent;
  }

  .departure-mobile-card:active {
    transform: scale(0.98);
    background: var(--bg-secondary);
  }

  /* Dates section */
  .departure-mobile-dates {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.04) 100%);
    border-radius: 12px;
    border: 1px solid rgba(59,130,246,0.15);
  }

  .departure-mobile-date-item {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .departure-mobile-date-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .departure-mobile-date-icon.return {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  }

  .departure-mobile-date-icon ion-icon {
    font-size: 20px;
    color: white;
  }

  .departure-mobile-date-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .departure-mobile-date-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .departure-mobile-date-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
  }

  .departure-mobile-date-day {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .departure-mobile-arrow {
    flex-shrink: 0;
    color: var(--text-link);
    opacity: 0.5;
  }

  .departure-mobile-arrow ion-icon {
    font-size: 20px;
  }

  /* Stats section */
  .departure-mobile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .departure-mobile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-glass);
    border-radius: 12px;
    border: 1px solid var(--border-color);
  }

  .departure-mobile-stat ion-icon {
    font-size: 22px;
    color: var(--text-link);
    opacity: 0.8;
  }

  .departure-mobile-stat .stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .departure-mobile-stat .stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .departure-mobile-stat .stat-value.badge-groups {
    color: #3B82F6;
  }

  .departure-mobile-stat .stat-value.seats-booked {
    color: #F59E0B;
  }

  .departure-mobile-stat .stat-value.seats-available {
    color: #10B981;
  }

  .departure-mobile-stat .stat-value.seats-full {
    color: #EF4444;
  }

  /* Actions */
  .departure-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
  }
}

/* Extra small mobile adjustments */
@media (max-width: 375px) {
  .departure-mobile-card {
    padding: 12px;
    gap: 10px;
  }

  .departure-mobile-dates {
    padding: 10px;
    gap: 8px;
  }

  .departure-mobile-date-icon {
    width: 32px;
    height: 32px;
  }

  .departure-mobile-date-icon ion-icon {
    font-size: 18px;
  }

  .departure-mobile-date-label {
    font-size: 10px;
  }

  .departure-mobile-date-value {
    font-size: 14px;
  }

  .departure-mobile-date-day {
    font-size: 11px;
  }

  .departure-mobile-arrow ion-icon {
    font-size: 18px;
  }

  .departure-mobile-stats {
    gap: 6px;
  }

  .departure-mobile-stat {
    padding: 10px 6px;
    gap: 4px;
  }

  .departure-mobile-stat ion-icon {
    font-size: 20px;
  }

  .departure-mobile-stat .stat-label {
    font-size: 10px;
  }

  .departure-mobile-stat .stat-value {
    font-size: 14px;
  }
}

/* ==========================================
   MOBILE DEPARTURE DAYS CARDS (EXCURSIONS)
   ========================================== */

/* Hide mobile cards on desktop */
.mobile-departure-days-cards {
  display: none;
}

/* Show mobile cards and hide table on mobile */
@media (max-width: 1024px) {
  .desktop-departure-days-table {
    display: none !important;
  }

  .mobile-departure-days-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .departure-day-mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    -webkit-tap-highlight-color: transparent;
  }

  .departure-day-mobile-card:active {
    transform: scale(0.98);
    background: var(--bg-secondary);
  }

  /* Header with date and time */
  .departure-day-mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(5,150,105,0.04) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16,185,129,0.15);
  }

  .departure-day-mobile-date {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .departure-day-mobile-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .departure-day-mobile-icon ion-icon {
    font-size: 20px;
    color: white;
  }

  .departure-day-mobile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .departure-day-mobile-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .departure-day-mobile-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
  }

  .departure-day-mobile-day {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  /* Time section */
  .departure-day-mobile-time {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-left: 12px;
    border-left: 2px solid rgba(16,185,129,0.2);
  }

  .departure-day-mobile-time-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .departure-day-mobile-time-icon ion-icon {
    font-size: 18px;
    color: white;
  }

  .departure-day-mobile-time-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Stats section */
  .departure-day-mobile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .departure-day-mobile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-glass);
    border-radius: 12px;
    border: 1px solid var(--border-color);
  }

  .departure-day-mobile-stat ion-icon {
    font-size: 22px;
    color: #10B981;
    opacity: 0.8;
  }

  .departure-day-mobile-stat .stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .departure-day-mobile-stat .stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .departure-day-mobile-stat .stat-value.badge-groups {
    color: #10B981;
  }

  .departure-day-mobile-stat .stat-value.seats-booked {
    color: #F59E0B;
  }

  .departure-day-mobile-stat .stat-value.seats-available {
    color: #10B981;
  }

  .departure-day-mobile-stat .stat-value.seats-full {
    color: #EF4444;
  }

  /* Actions */
  .departure-day-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
  }
}

/* Extra small mobile adjustments */
@media (max-width: 375px) {
  .departure-day-mobile-card {
    padding: 12px;
    gap: 10px;
  }

  .departure-day-mobile-header {
    padding: 10px;
    gap: 8px;
  }

  .departure-day-mobile-icon {
    width: 32px;
    height: 32px;
  }

  .departure-day-mobile-icon ion-icon {
    font-size: 18px;
  }

  .departure-day-mobile-time-icon {
    width: 28px;
    height: 28px;
  }

  .departure-day-mobile-time-icon ion-icon {
    font-size: 16px;
  }

  .departure-day-mobile-label {
    font-size: 10px;
  }

  .departure-day-mobile-value {
    font-size: 14px;
  }

  .departure-day-mobile-day {
    font-size: 11px;
  }

  .departure-day-mobile-stats {
    gap: 6px;
  }

  .departure-day-mobile-stat {
    padding: 10px 6px;
    gap: 4px;
  }

  .departure-day-mobile-stat ion-icon {
    font-size: 20px;
  }

  .departure-day-mobile-stat .stat-label {
    font-size: 10px;
  }

  .departure-day-mobile-stat .stat-value {
    font-size: 14px;
  }
}

/* ==========================================
   MOBILE GROUP PAGE OPTIMIZATION
   ========================================================================== */

@media (max-width: 390px) {
  /* Detail grid - single column on mobile */
  .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Detail cards */
  .detail-card {
    border-radius: 16px !important;
    padding: 0 !important;
  }

  .detail-card-header {
    padding: 14px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .detail-card-title {
    flex: 1 1 100%;
  }

  .detail-card-title h3 {
    font-size: 16px !important;
  }

  .detail-card-body {
    padding: 16px !important;
  }

  .detail-card-actions {
    flex: 1 1 100%;
    justify-content: flex-start !important;
  }

  /* Info grid */
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .info-item {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .info-label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  .info-value {
    font-size: 16px !important;
  }

  /* Form groups */
  .form-group {
    margin-bottom: 16px !important;
  }

  .form-label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* Select with add button */
  .select-with-add {
    gap: 8px !important;
  }

  .select-with-add .form-select {
    flex: 1;
  }

  .select-with-add .btn-icon {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    min-height: 44px;
  }

  .btn-sm {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 40px;
  }

  .btn-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .btn-icon ion-icon {
    font-size: 20px !important;
  }

  /* Data table - make it scrollable horizontally */
  .data-table-compact {
    font-size: 13px !important;
  }

  .data-table-compact th,
  .data-table-compact td {
    padding: 10px 8px !important;
  }

  .data-table-compact .th-checkbox {
    width: 36px !important;
  }

  /* Table wrapper for horizontal scroll */
  .detail-card-body > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .detail-card-body > table::-webkit-scrollbar {
    height: 6px;
  }

  .detail-card-body > table::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
  }

  /* Bulk actions bar */
  .bulk-actions-bar {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .bulk-actions-info {
    font-size: 14px !important;
  }

  .bulk-actions-buttons {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px !important;
  }

  .bulk-actions-buttons .btn-sm {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Client row actions - stack vertically */
  .td-actions {
    display: flex !important;
    flex-direction: column;
    gap: 4px !important;
    padding: 8px !important;
  }

  /* Modals */
  .modal {
    max-width: 95% !important;
    margin: 10px !important;
    max-height: calc(100vh - 20px) !important;
  }

  .modal-xl,
  .modal-lg {
    max-width: 95% !important;
  }

  .modal-header {
    padding: 14px 16px !important;
  }

  .modal-title {
    font-size: 17px !important;
  }

  .modal-form {
    padding: 16px !important;
  }

  .modal-actions {
    padding: 14px 16px !important;
    gap: 8px !important;
    flex-direction: column;
  }

  .modal-actions .btn-primary,
  .modal-actions .btn-secondary {
    width: 100%;
  }

  /* Form sections in modals */
  .form-section {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  .form-section-header {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .form-section-title {
    font-size: 15px !important;
  }

  .form-section-subtitle {
    font-size: 13px !important;
  }

  /* Form rows - stack on mobile */
  .form-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .form-row .form-group {
    flex: 1 1 100% !important;
  }

  /* Checkbox labels */
  .checkbox-label {
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  /* Alert messages */
  .alert {
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .alert ion-icon {
    font-size: 20px !important;
  }

  /* Client cards (if using cards instead of table) */
  .client-card {
    padding: 14px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  /* Status badges */
  .status-badge,
  .seats-badge {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Make tables more mobile-friendly - hide less important columns */
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 10;
  }

  /* Compact table on mobile */
  .table-container {
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Extra small screens */
@media (max-width: 375px) {
  .detail-card-header {
    padding: 12px !important;
  }

  .detail-card-body {
    padding: 12px !important;
  }

  .detail-card-title h3 {
    font-size: 15px !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  .btn-sm {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .info-value {
    font-size: 15px !important;
  }

  .modal {
    margin: 5px !important;
    max-height: calc(100vh - 10px) !important;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 15px !important;
    padding: 10px 12px !important;
  }
}

/* ==============================================
   Mobile Clients Cards - Group Pages
   ============================================== */

/* Desktop: show table, hide cards */
.desktop-clients-table {
  display: block;
}

.mobile-clients-cards {
  display: none;
}

@media (max-width: 1024px) {
  /* Mobile: hide table, show cards */
  .desktop-clients-table {
    display: none;
  }

  .mobile-clients-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  /* Client Mobile Card */
  .client-mobile-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .client-mobile-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  /* Header with checkbox and number */
  .client-mobile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
  }

  .client-checkbox-mobile {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .client-mobile-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 35px;
  }

  /* Main client info section */
  .client-mobile-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    cursor: pointer;
  }

  .client-mobile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .client-mobile-avatar ion-icon {
    font-size: 24px;
    color: #FFFFFF;
  }

  .client-mobile-info {
    flex: 1;
    min-width: 0;
  }

  .client-mobile-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .client-mobile-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .client-mobile-phone ion-icon {
    font-size: 16px;
    color: var(--text-muted);
  }

  .client-mobile-phone a {
    color: var(--text-secondary);
    text-decoration: none;
  }

  /* Details section */
  .client-mobile-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }

  .client-mobile-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .client-mobile-detail-item ion-icon {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .client-mobile-detail-item span {
    flex: 1;
    word-break: break-word;
  }

  .client-mobile-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid #3B82F6;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
  }

  .client-mobile-note ion-icon {
    font-size: 18px;
    color: #3B82F6;
    flex-shrink: 0;
    margin-top: 1px;
  }

  /* Finances section */
  .client-mobile-finances {
    background: var(--bg-surface-secondary);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .finance-mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
  }

  .finance-mobile-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
  }

  .finance-mobile-label {
    color: var(--text-secondary);
    font-weight: 500;
  }

  .finance-mobile-value {
    color: var(--text-primary);
    font-weight: 600;
  }

  .finance-mobile-row-total {
    padding-top: 10px;
    margin-top: 4px;
  }

  .finance-mobile-row-total .finance-mobile-label {
    font-weight: 600;
    color: var(--text-primary);
  }

  .finance-mobile-row-total .finance-mobile-value {
    font-size: 16px;
  }

  .finance-value-bold {
    font-weight: 700;
  }

  /* Actions section */
  .client-mobile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .btn-icon-mobile {
    flex: 1;
    min-width: calc(25% - 6px);
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-icon-mobile ion-icon {
    font-size: 20px;
  }

  .btn-edit-mobile {
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.3);
  }

  .btn-edit-mobile:active {
    background: rgba(59, 130, 246, 0.1);
    transform: scale(0.95);
  }

  .btn-contract-mobile {
    color: #10B981;
    border-color: rgba(16, 185, 129, 0.3);
  }

  .btn-contract-mobile:active {
    background: rgba(16, 185, 129, 0.1);
    transform: scale(0.95);
  }

  .btn-migrate-mobile {
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.3);
  }

  .btn-migrate-mobile:active {
    background: rgba(245, 158, 11, 0.1);
    transform: scale(0.95);
  }

  .btn-add-mobile {
    color: #22C55E;
    border-color: rgba(34, 197, 94, 0.3);
  }

  .btn-add-mobile:active {
    background: rgba(34, 197, 94, 0.1);
    transform: scale(0.95);
  }

  .btn-delete-mobile {
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.3);
  }

  .btn-delete-mobile:active {
    background: rgba(239, 68, 68, 0.1);
    transform: scale(0.95);
  }

  /* Total card */
  .client-mobile-total {
    background: #FFFFFF;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 14px;
    margin-top: 8px;
  }

  .client-mobile-total-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
  }

  .client-mobile-total-header strong {
    font-size: 15px;
    color: var(--text-primary);
  }

  .client-mobile-total .client-mobile-finances {
    background: rgba(255, 255, 255, 0.5);
  }
}

/* ==============================================
   Mobile Clients List Cards - Clients Index Page
   ============================================== */

/* Desktop: show table, hide cards */
.desktop-clients-list-table {
  display: block;
}

.mobile-clients-list-cards {
  display: none;
}

@media (max-width: 1024px) {
  /* Mobile: hide table, show cards */
  .desktop-clients-list-table {
    display: none;
  }

  .mobile-clients-list-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  /* Client List Mobile Card */
  .client-list-mobile-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    position: relative;
  }

  .client-list-mobile-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  /* Number badge */
  .client-list-mobile-number {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-secondary);
    padding: 4px 10px;
    border-radius: 12px;
  }

  /* Main client info */
  .client-list-mobile-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 45px;
  }

  .client-list-mobile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-surface-secondary);
  }

  .client-list-mobile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .client-list-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
  }

  .client-list-mobile-info {
    flex: 1;
    min-width: 0;
  }

  .client-list-mobile-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    word-break: break-word;
  }

  .client-list-mobile-address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .client-list-mobile-address ion-icon {
    font-size: 16px;
    flex-shrink: 0;
  }

  /* Contacts section */
  .client-list-mobile-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    background: var(--bg-surface-secondary);
    border-radius: 8px;
  }

  .client-list-mobile-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }

  .client-list-mobile-contact-item ion-icon {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .client-list-mobile-contact-item a {
    color: var(--text-secondary);
    text-decoration: none;
    word-break: break-all;
  }

  /* Meta section */
  .client-list-mobile-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
  }

  .client-list-mobile-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
  }

  .client-list-mobile-meta-item ion-icon {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .client-list-mobile-meta-item .departures-badge {
    font-weight: 600;
    color: var(--text-primary);
  }

  /* Actions section */
  .client-list-mobile-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }

  .client-list-mobile-actions .btn-icon-mobile {
    flex: 1;
  }

  .client-list-mobile-actions form {
    flex: 1;
    display: flex;
  }

  .client-list-mobile-actions form .btn-icon-mobile {
    width: 100%;
  }
}

/* ==============================================
   Mobile Guides/Drivers/Cars Cards
   ============================================== */

/* Desktop: show tables, hide cards */
.desktop-guides-table,
.desktop-drivers-table,
.desktop-cars-table {
  display: block;
}

.mobile-guides-cards,
.mobile-drivers-cards,
.mobile-cars-cards {
  display: none;
}

@media (max-width: 1024px) {
  /* Mobile: hide tables, show cards */
  .desktop-guides-table,
  .desktop-drivers-table,
  .desktop-cars-table {
    display: none;
  }

  .mobile-guides-cards,
  .mobile-drivers-cards,
  .mobile-cars-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  /* Common mobile card styles */
  .guide-mobile-card,
  .driver-mobile-card,
  .car-mobile-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
  }

  /* Number badge */
  .guide-mobile-number,
  .driver-mobile-number,
  .car-mobile-number {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-secondary);
    padding: 4px 10px;
    border-radius: 12px;
  }

  /* Main section */
  .guide-mobile-main,
  .driver-mobile-main,
  .car-mobile-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 45px;
  }

  /* Avatar */
  .guide-mobile-avatar,
  .driver-mobile-avatar,
  .car-mobile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .guide-mobile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .guide-avatar-placeholder-mobile {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
  }

  .driver-mobile-avatar,
  .car-mobile-avatar {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  }

  .driver-mobile-avatar ion-icon,
  .car-mobile-avatar ion-icon {
    font-size: 28px;
    color: #FFFFFF;
  }

  /* Info section */
  .guide-mobile-info,
  .driver-mobile-info,
  .car-mobile-info {
    flex: 1;
    min-width: 0;
  }

  .guide-mobile-name,
  .driver-mobile-name,
  .car-mobile-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    word-break: break-word;
  }

  .guide-mobile-shortname,
  .driver-mobile-car,
  .car-mobile-seats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .driver-mobile-car ion-icon,
  .car-mobile-seats ion-icon {
    font-size: 16px;
  }

  /* Details section */
  .guide-mobile-details,
  .driver-mobile-details,
  .car-mobile-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-surface-secondary);
    border-radius: 8px;
  }

  .guide-mobile-detail-item,
  .driver-mobile-detail-item,
  .car-mobile-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .guide-mobile-detail-item ion-icon,
  .driver-mobile-detail-item ion-icon,
  .car-mobile-detail-item ion-icon {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .guide-mobile-detail-item a,
  .driver-mobile-detail-item a {
    color: var(--text-secondary);
    text-decoration: none;
  }

  .text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .departures-badge,
  .usage-badge {
    font-weight: 600;
    color: var(--text-primary);
  }

  /* Actions section */
  .guide-mobile-actions,
  .driver-mobile-actions,
  .car-mobile-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }

  .guide-mobile-actions .btn-icon-mobile,
  .driver-mobile-actions .btn-icon-mobile,
  .car-mobile-actions .btn-icon-mobile {
    flex: 1;
  }

  .guide-mobile-actions form,
  .driver-mobile-actions form,
  .car-mobile-actions form {
    flex: 1;
    display: flex;
  }

  .guide-mobile-actions form .btn-icon-mobile,
  .driver-mobile-actions form .btn-icon-mobile,
  .car-mobile-actions form .btn-icon-mobile {
    width: 100%;
  }
}

/* ==============================================
   Mobile Hotels Cards
   ============================================== */

/* Desktop: show table, hide cards */
.desktop-hotels-table {
  display: block;
}

.mobile-hotels-cards {
  display: none;
}

@media (max-width: 1024px) {
  /* Mobile: hide table, show cards */
  .desktop-hotels-table {
    display: none;
  }

  .mobile-hotels-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  /* Hotel mobile card */
  .hotel-mobile-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
    cursor: pointer;
  }

  .hotel-mobile-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  /* Number badge */
  .hotel-mobile-number {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-secondary);
    padding: 4px 10px;
    border-radius: 12px;
  }

  /* Header with icon and name */
  .hotel-mobile-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-right: 95px;
    position: relative;
  }

  .hotel-mobile-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .hotel-mobile-icon ion-icon {
    font-size: 24px;
    color: #FFFFFF;
  }

  .hotel-mobile-info {
    flex: 1;
    min-width: 0;
  }

  .hotel-mobile-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    word-break: break-word;
  }

  .hotel-mobile-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .hotel-mobile-location ion-icon {
    font-size: 16px;
  }

  .hotel-mobile-header .status-badge {
    position: absolute;
    top: 0;
    right: 0;
  }

  /* Details section */
  .hotel-mobile-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-surface-secondary);
    border-radius: 8px;
  }

  .hotel-mobile-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .hotel-mobile-detail-item ion-icon {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .hotel-mobile-detail-item a {
    color: var(--text-secondary);
    text-decoration: none;
  }

  .stars-display-mobile {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .star-icon-mobile {
    color: #F59E0B;
    font-size: 16px;
  }

  .hotel-price {
    font-weight: 600;
    color: var(--text-primary);
  }

  /* Actions section */
  .hotel-mobile-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }

  .hotel-mobile-actions .btn-icon-mobile {
    flex: 1;
  }

  .hotel-mobile-actions form {
    flex: 1;
    display: flex;
  }

  .hotel-mobile-actions form .btn-icon-mobile {
    width: 100%;
  }

  .btn-view-mobile {
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.3);
  }

  .btn-view-mobile:active {
    background: rgba(59, 130, 246, 0.1);
    transform: scale(0.95);
  }
}

/* ==========================================
   USERS PAGE MOBILE STYLES
   ========================================== */

/* Desktop: show table, hide cards */
.desktop-users-table {
  display: block;
}

.mobile-users-cards {
  display: none;
}

@media (max-width: 1024px) {
  /* Mobile: hide table, show cards */
  .desktop-users-table {
    display: none;
  }

  .mobile-users-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  /* User Mobile Card */
  .user-mobile-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .user-mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-surface-secondary);
    border-bottom: 1px solid var(--border-color);
    position: relative;
  }

  .user-mobile-number {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 4px 10px;
    border-radius: 8px;
  }

  .user-mobile-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
  }

  .user-mobile-avatar ion-icon {
    color: #FFFFFF;
  }

  .user-mobile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 50px;
  }

  .user-mobile-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
  }

  .user-mobile-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
  }

  /* Details section */
  .user-mobile-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }

  .user-mobile-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .user-mobile-detail-item ion-icon {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .user-mobile-email,
  .user-mobile-phone {
    color: var(--text-secondary);
    text-decoration: none;
    word-break: break-word;
  }

  .user-mobile-email:active,
  .user-mobile-phone:active {
    color: #3B82F6;
  }

  /* Actions section */
  .user-mobile-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
  }

  .btn-mobile {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .btn-mobile ion-icon {
    font-size: 18px;
  }

  .btn-mobile:active:not(:disabled) {
    transform: scale(0.95);
  }

  .btn-mobile-edit {
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.3);
  }

  .btn-mobile-edit:active {
    background: rgba(59, 130, 246, 0.1);
  }

  .btn-mobile-delete {
    width: 100%;
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.3);
  }

  .btn-mobile-delete:active:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
  }
}

/* Small Screens */
@media (max-width: 480px) {
  .user-mobile-header {
    padding: 12px 14px;
  }

  .user-mobile-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .user-mobile-name {
    font-size: 14px;
  }

  .user-mobile-date {
    font-size: 11px;
  }

  .user-mobile-number {
    font-size: 12px;
    padding: 3px 8px;
  }

  .user-mobile-details {
    padding: 12px 14px;
    gap: 8px;
  }

  .user-mobile-detail-item {
    font-size: 13px;
  }

  .user-mobile-detail-item ion-icon {
    font-size: 16px;
  }

  .user-mobile-actions {
    padding: 10px 14px;
    gap: 6px;
  }

  .btn-mobile {
    padding: 9px 12px;
    font-size: 13px;
  }

  .btn-mobile ion-icon {
    font-size: 16px;
  }
}

/* Ultra Small Screens */
@media (max-width: 360px) {
  .user-mobile-header {
    padding: 10px 12px;
  }

  .user-mobile-avatar {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
  }

  .user-mobile-info {
    padding-right: 45px;
  }

  .user-mobile-name {
    font-size: 13px;
  }

  .user-mobile-date {
    font-size: 10px;
  }

  .user-mobile-number {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 6px;
  }

  .user-mobile-details {
    padding: 10px 12px;
  }

  .user-mobile-detail-item {
    font-size: 12px;
  }

  .user-mobile-detail-item ion-icon {
    font-size: 15px;
  }

  .user-mobile-actions {
    padding: 10px 12px;
    flex-direction: column;
  }

  .btn-mobile {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}

/* Agent Portal Button */
.agent-portal-btn {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important;
  color: white !important;
  border: none !important;
}

.agent-portal-btn:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
  transform: translateY(-1px);
}

.agent-portal-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.2s ease;
}

.agent-portal-mobile-btn:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Hide "Главная" breadcrumb on mobile dashboard, but keep search */
@media (max-width: 1024px) {
  /* Hide only breadcrumbs when single item (dashboard page), keep search visible */
  .breadcrumbs:has(.breadcrumb-item:only-child) {
    display: none !important;
  }
}

/* ==========================================
   PREVENT MOBILE ZOOM - COMPREHENSIVE
   ========================================== */

/* Prevent double-tap zoom on all interactive elements */
a, button, input, textarea, select, label, .btn-primary, .btn-secondary, .btn-icon, .tile, .card, .clickable {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

/* Prevent text selection that triggers zoom */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Allow text selection only where needed */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Prevent zoom on input focus (iOS fix) */
@media (max-width: 1024px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ========================================
   Theme Toggle Button
   ======================================== */

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  flex-shrink: 0;
  position: relative;
}

.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
  transform: scale(1.05);
}

.theme-toggle-btn ion-icon {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-icon-light {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.theme-icon-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-icon-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-icon-dark {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.mobile-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========================================
   Dark Theme
   ======================================== */

[data-theme="dark"] {
  --bg-primary: #1E293B;
  --bg-secondary: #1E293B;
  --bg-base: #1E293B;
  --bg-card: rgba(30,41,59,0.95);
  --bg-card-hover: rgba(51,65,85,1);
  --bg-glass: rgba(255,255,255,0.03);

  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-placeholder: #475569;
  --text-gradient: linear-gradient(135deg, #F1F5F9 0%, #CBD5E1 100%);

  --border-color: rgba(255,255,255,0.08);
  --border-color-strong: rgba(255,255,255,0.15);
  --border-glow: rgba(59,130,246,0.3);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 20px rgba(59,130,246,0.2);

  --gradient-mesh: rgba(255,255,255,0.01);
  --gradient-glow: rgba(59,130,246,0.12);
}

/* Body & HTML */
[data-theme="dark"] body {
  background: #1E293B;
  color: var(--text-primary);
}

[data-theme="dark"] html {
  background: #1E293B;
}

/* Noise overlay - reduce on dark */
[data-theme="dark"] body::before {
  opacity: 0.015;
}

/* Top Bar & Breadcrumb - keep original colors */

/* Desktop sidebar - keep original colors */

/* Screen area */
[data-theme="dark"] .screen {
  background: #1E293B;
}

[data-theme="dark"] .screen::before,
[data-theme="dark"] .screen::after {
  background: transparent;
}

[data-theme="dark"] .screen-ring {
  border-color: rgba(255,255,255,0.02);
}

/* Breadcrumb - keep original colors */

/* Cards */
[data-theme="dark"] .detail-card {
  background: rgba(30,41,59,0.95);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .detail-card-header {
  background: #0B1120;
}

[data-theme="dark"] .detail-card-body {
  background: transparent;
}

[data-theme="dark"] .filter-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.08) 100%);
  border-color: rgba(59,130,246,0.2);
}

/* Info Grid */
[data-theme="dark"] .info-label {
  color: var(--text-muted);
}

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

/* Tables */
[data-theme="dark"] .data-table thead {
  background: #0B1120;
}

[data-theme="dark"] .data-table tbody tr:hover {
  background: rgba(59,130,246,0.06);
}

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

[data-theme="dark"] .data-table tbody tr:not(:last-child) {
  border-bottom-color: rgba(255,255,255,0.06);
}

/* Forms */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1E293B;
  border-color: rgba(255,255,255,0.12);
  color: #F1F5F9;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background: #253347;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #475569;
}

[data-theme="dark"] .form-input-static {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
  color: #F1F5F9;
}

[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

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

/* Modals */
[data-theme="dark"] .modal {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .modal-header {
  background: #0B1120;
  border-bottom-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .modal-body {
  background: #1E293B;
  color: var(--text-primary);
}

[data-theme="dark"] .modal-actions {
  background: #0B1120;
  border-top-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,0.8);
}

[data-theme="dark"] .client-detail-modal {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}

/* Buttons */
[data-theme="dark"] .btn-secondary {
  background: #253347 !important;
  border-color: rgba(255,255,255,0.15);
  color: #F1F5F9 !important;
}

[data-theme="dark"] .btn-secondary:hover {
  background: #334155 !important;
  border-color: rgba(255,255,255,0.25);
  color: #FFFFFF !important;
}

[data-theme="dark"] .btn-secondary ion-icon {
  color: #F1F5F9;
}

/* Status badges */
[data-theme="dark"] .status-badge {
  border-color: rgba(255,255,255,0.1);
}

/* Tabs & Filter buttons */
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .filter-btn {
  color: var(--text-secondary);
  background: transparent;
}

[data-theme="dark"] .tab-btn:hover,
[data-theme="dark"] .filter-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}

[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .filter-btn.active {
  background: rgba(59,130,246,0.15);
  color: #3B82F6;
}

/* Pagination */
[data-theme="dark"] .pagination-btn {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}

[data-theme="dark"] .pagination-btn:hover {
  background: #253347;
  color: var(--text-primary);
}

[data-theme="dark"] .pagination-btn.active {
  background: #3B82F6;
  color: #FFFFFF;
}

/* Search */
[data-theme="dark"] .search-inner {
  background: rgba(10,15,26,0.95);
}

[data-theme="dark"] .search-input {
  background: transparent;
  color: #F1F5F9;
}

/* Floating actions block */
[data-theme="dark"] .top-actions-block {
  background: rgba(15,23,42,0.95);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .action-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}

[data-theme="dark"] .action-btn:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
}

/* Notifications & Messages dropdowns */
[data-theme="dark"] .notification-dropdown,
[data-theme="dark"] .messages-dropdown {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .notification-item,
[data-theme="dark"] .message-item {
  border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .notification-item:hover,
[data-theme="dark"] .message-item:hover {
  background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .notification-header,
[data-theme="dark"] .messages-header {
  border-bottom-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .notification-footer {
  border-top-color: rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.5);
}

/* Hotel cards */
[data-theme="dark"] .hotel-card,
[data-theme="dark"] .room-card {
  background: #253347;
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .hotel-card:hover,
[data-theme="dark"] .room-card:hover {
  background: #2D3F56;
  border-color: rgba(255,255,255,0.12);
}

/* Finance blocks */
[data-theme="dark"] .finances-total-inline {
  background: rgba(30,41,59,0.8);
  border-color: rgba(255,255,255,0.08);
}

/* PWA install banner */
[data-theme="dark"] .pwa-install-banner {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
}

/* Select with add */
[data-theme="dark"] .select-with-add .btn-add {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.3);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0F172A;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Catalog & list cards */
[data-theme="dark"] .catalog-card,
[data-theme="dark"] .list-card,
[data-theme="dark"] .tour-card,
[data-theme="dark"] .departure-card,
[data-theme="dark"] .group-card,
[data-theme="dark"] .client-card,
[data-theme="dark"] .guide-card,
[data-theme="dark"] .user-card {
  background: rgba(30,41,59,0.95);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .catalog-card:hover,
[data-theme="dark"] .list-card:hover,
[data-theme="dark"] .tour-card:hover,
[data-theme="dark"] .departure-card:hover,
[data-theme="dark"] .group-card:hover,
[data-theme="dark"] .client-card:hover,
[data-theme="dark"] .guide-card:hover,
[data-theme="dark"] .user-card:hover {
  background: rgba(51,65,85,1);
  border-color: rgba(255,255,255,0.12);
}

/* Dashboard cards */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .widget-card {
  background: rgba(30,41,59,0.95);
  border-color: rgba(255,255,255,0.08);
}

/* Delete/Deletion modal */
[data-theme="dark"] .deletion-modal,
[data-theme="dark"] .confirm-modal {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
}

/* Task cards */
[data-theme="dark"] .task-card,
[data-theme="dark"] .task-item {
  background: rgba(30,41,59,0.95);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .task-card:hover,
[data-theme="dark"] .task-item:hover {
  background: rgba(51,65,85,1);
}

/* Calendar */
[data-theme="dark"] .calendar-cell {
  background: #1E293B;
  border-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .calendar-cell:hover {
  background: #253347;
}

[data-theme="dark"] .calendar-header {
  background: #0B1120;
}

/* Chips & Tags */
[data-theme="dark"] .chip,
[data-theme="dark"] .tag {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}

/* Tooltips */
[data-theme="dark"] .tooltip {
  background: #334155;
  color: #F1F5F9;
}

/* Empty states */
[data-theme="dark"] .empty-state {
  color: var(--text-muted);
}

/* Links */
[data-theme="dark"] a {
  color: inherit;
}

/* Mobile sidebar - keep original colors */

[data-theme="dark"] .mobile-user-info {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}

/* Mobile floating actions */
[data-theme="dark"] .mobile-floating-actions {
  background: rgba(15,23,42,0.95);
  border-color: rgba(255,255,255,0.1);
}

/* Action modal */
[data-theme="dark"] .action-modal {
  background: #1E293B;
}

[data-theme="dark"] .action-modal-header {
  background: #0B1120;
}

/* Nav back button, page header, search - keep original colors */

/* Fix data-table hover to not be light */
[data-theme="dark"] .data-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* Ensure dark mode inputs in date picker */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Select2 / Choices.js if used */
[data-theme="dark"] .choices__inner,
[data-theme="dark"] .select2-container--default .select2-selection {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .choices__list--dropdown,
[data-theme="dark"] .select2-dropdown {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.12) !important;
}

[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme="dark"] .select2-results__option--highlighted {
  background: rgba(59,130,246,0.2) !important;
  color: #F1F5F9 !important;
}

/* === Additional Dark Theme Overrides === */

/* KPI Cards */
[data-theme="dark"] .kpi-card {
  background: #1E293B;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

[data-theme="dark"] .kpi-card:hover {
  border-color: rgba(255,255,255,0.15);
}

[data-theme="dark"] .kpi-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
}

/* Tile Content (dashboard) */
[data-theme="dark"] .tile-content {
  background: #1E293B;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

[data-theme="dark"] .tile-bullets {
  background: #0F172A;
  border-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .tile-bullets li {
  color: var(--text-secondary);
}

/* Table Container */
[data-theme="dark"] .table-container {
  background: #1E293B;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Client Detail */
[data-theme="dark"] .client-detail-item:hover {
  background: #253347;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

[data-theme="dark"] .client-detail-modal {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
}

[data-theme="dark"] .client-detail-section {
  background: rgba(30,41,59,0.95);
  border-color: rgba(255,255,255,0.08);
}

/* Mobile Cards */
[data-theme="dark"] .mobile-personnel-card,
[data-theme="dark"] .mobile-empty-state,
[data-theme="dark"] .client-mobile-card,
[data-theme="dark"] .client-mobile-total,
[data-theme="dark"] .client-list-mobile-card,
[data-theme="dark"] .guide-mobile-card,
[data-theme="dark"] .driver-mobile-card,
[data-theme="dark"] .car-mobile-card,
[data-theme="dark"] .hotel-mobile-card,
[data-theme="dark"] .user-mobile-card {
  background: #1E293B;
  border-color: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .mobile-personnel-card:hover,
[data-theme="dark"] .client-mobile-card:hover,
[data-theme="dark"] .client-list-mobile-card:hover,
[data-theme="dark"] .guide-mobile-card:hover,
[data-theme="dark"] .driver-mobile-card:hover,
[data-theme="dark"] .car-mobile-card:hover,
[data-theme="dark"] .hotel-mobile-card:hover,
[data-theme="dark"] .user-mobile-card:hover {
  background: #253347;
}

/* Alert styles */
[data-theme="dark"] .alert-info {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.25);
  color: #93C5FD;
}

[data-theme="dark"] .alert-warning {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.25);
  color: #FCD34D;
}

[data-theme="dark"] .alert-success {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.25);
  color: #4ADE80;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.25);
  color: #FCA5A5;
}

/* Incomplete apps badge */
[data-theme="dark"] .incomplete-apps-badge,
[data-theme="dark"] .action-badge {
  background: #EF4444;
  color: #FFFFFF;
}

/* Login page (auth layout) */
[data-theme="dark"] .login-card {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .login-input-wrapper {
  background: #0F172A;
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .login-input-wrapper:focus-within {
  background: #152036;
  border-color: #3B82F6;
}

/* Dropdown menus */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .context-menu {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .context-menu-item:hover {
  background: rgba(59,130,246,0.1);
}

/* Checkboxes & radio */
[data-theme="dark"] .checkbox-wrapper input[type="checkbox"] {
  background: #0F172A;
  border-color: rgba(255,255,255,0.2);
}

[data-theme="dark"] .checkbox-wrapper input[type="checkbox"]:checked {
  background: #3B82F6;
  border-color: #3B82F6;
}

/* Tab content */
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tabs-content {
  background: transparent;
  color: var(--text-primary);
}

/* Pagination info */
[data-theme="dark"] .pagination-info {
  color: var(--text-muted);
}

/* Toast/Snackbar */
[data-theme="dark"] .toast,
[data-theme="dark"] .snackbar {
  background: #334155;
  color: #F1F5F9;
  border-color: rgba(255,255,255,0.1);
}

/* Loading/skeleton */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .loading-placeholder {
  background: linear-gradient(90deg, #1E293B 25%, #253347 50%, #1E293B 75%);
}

/* General white background overrides */
[data-theme="dark"] .bg-white,
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background-color: #FFFFFF"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"] {
  background: #1E293B !important;
}

/* Ensure text visibility */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-primary {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .text-secondary {
  color: #94A3B8 !important;
}

[data-theme="dark"] .text-muted {
  color: #64748B !important;
}

/* Search results dropdown */
[data-theme="dark"] .search-results,
[data-theme="dark"] #search-results {
  background: #1E293B;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

[data-theme="dark"] .search-result-item:hover {
  background: rgba(59,130,246,0.1);
}

/* Fix specific hardcoded backgrounds */
[data-theme="dark"] .data-table tbody tr:hover {
  background: rgba(59,130,246,0.06);
}

/* Highlight rows */
[data-theme="dark"] tr.highlight,
[data-theme="dark"] .row-highlight {
  background: rgba(59,130,246,0.08);
}

/* General section backgrounds */
[data-theme="dark"] .section,
[data-theme="dark"] .content-section {
  background: transparent;
}

/* Fix detail-card-actions in dark mode */
[data-theme="dark"] .detail-card-actions .btn-primary {
  color: #FFFFFF;
}

/* Ensure all card bodies have dark backgrounds */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
  background: rgba(30,41,59,0.95);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.08);
}

/* Accent line - keep original */

/* Fix for particles container */
[data-theme="dark"] .particles-container {
  background: #1E293B;
}

/* ===== CLIENTS FILTER PANEL ===== */
.search-bar-container {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}

.search-bar-container .search-input-wrapper {
  flex: 1;
}

.filter-active-dot {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  flex-shrink: 0;
}

.clients-filter-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--border-radius-sm);
  padding: 20px;
  margin-bottom: 16px;
}

.clients-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.filter-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
  margin-bottom: 6px;
}

.filter-group-title ion-icon:first-child {
  font-size: 16px;
  color: var(--color-primary, #3b82f6);
}

.filter-group-title span {
  flex: 1;
}

.filter-chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.filter-group-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 4px 4px 8px;
}

.filter-group-misc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-subgroup-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.filter-subgroup-title ion-icon {
  font-size: 14px;
}

.filter-inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 3px 0;
  white-space: nowrap;
}

.filter-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #3b82f6;
  flex-shrink: 0;
}

.filter-actions {
  display: flex;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.pagination-wrapper-mobile {
  display: none;
}

@media (max-width: 768px) {
  .clients-filter-grid {
    grid-template-columns: 1fr;
  }

  .search-bar-container {
    flex-wrap: wrap;
  }

  .search-bar-container .search-input-wrapper {
    flex: 1 1 100%;
  }

  .pagination-wrapper {
    display: none;
  }

  .pagination-wrapper-mobile {
    display: flex;
    justify-content: center;
    margin: 16px 0;
  }
}

[data-theme="dark"] .filter-group-title {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .clients-filter-panel {
  background: var(--bg-secondary);
  border-color: rgba(255,255,255,0.1);
}

/* Commission field in sources */
.commission-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.commission-input-group .commission-value-input {
  flex: 1;
}

.commission-type-toggle {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.commission-type-btn {
  cursor: pointer;
}

.commission-type-btn input[type="radio"] {
  display: none;
}

.commission-type-btn span {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  transition: all 0.2s;
  user-select: none;
}

.commission-type-btn input[type="radio"]:checked + span {
  background: #3B82F6;
  color: #fff;
}

.commission-type-btn:hover span {
  background: var(--bg-tertiary);
}

.commission-type-btn input[type="radio"]:checked + span:hover {
  background: #3B82F6;
}

/* Commission badge in table */
.commission-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.commission-percent {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.commission-fixed {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
}