/* ================================================
   TRUSTCRM MOBILE ENHANCEMENTS
   Comprehensive mobile optimization for all devices
   ================================================ */

/* =================================
   DESKTOP - Hide Mobile Elements
   ================================= */
.mobile-quick-stats-wrapper,
.mobile-bottom-sheet-overlay {
  display: none;
}

/* =================================
   MOBILE BREAKPOINTS
   ================================= */

/* Tablet breakpoint (1024px) */
@media screen and (max-width: 1024px) {
  /* Tablet styles */
  .page-container {
    padding: 16px 12px;
  }

  .stats-container {
    gap: 0;
  }

  .dashboard-top-section {
    gap: 16px;
  }

  /* Header adjustments for tablet */
  .header {
    padding: 0 24px;
  }

  .search-container {
    max-width: 380px;
  }

  .header-icon-group {
    gap: 4px;
  }

  .header-icon-btn {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width: 768px) {
  /* Mobile landscape and smaller tablets */
  /* =================================
     MOBILE HORIZONTAL STATS - FINAL FIX
     ================================= */

  /* Reduce page container padding to minimize wasted space */
  .page-container {
    padding: 12px 8px !important;
  }

  .dashboard-top-section {
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  /* Main stats container - vertical stacking of sections */
  .stats-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .stats-container::-webkit-scrollbar {
    display: none !important;
  }

  /* Stats section - vertical stacking, remove background, reduce spacing */
  .stats-section {
    margin-bottom: 16px !important;
    flex: none !important;
    min-width: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .section-header {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    border: none !important;
    text-transform: capitalize !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .section-header::before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Mobile theme colors for section headers - colored dot only */
  .stats-section.general-theme .section-header::before { background-color: #475569 !important; }
  .stats-section.green-theme .section-header::before { background-color: #059669 !important; }
  .stats-section.orange-theme .section-header::before { background-color: #D97706 !important; }
  .stats-section.purple-theme .section-header::before { background-color: #2563EB !important; }
  .stats-section.red-theme .section-header::before { background-color: #DC2626 !important; }

  /* Dark mode for section headers on mobile */
  body.dark-mode .section-header {
    color: var(--dm-text-secondary) !important;
  }

  body.dark-mode .stats-section.general-theme .section-header::before { background-color: #9CA3AF !important; }
  body.dark-mode .stats-section.green-theme .section-header::before { background-color: #34D399 !important; }
  body.dark-mode .stats-section.orange-theme .section-header::before { background-color: #FBBF24 !important; }
  body.dark-mode .stats-section.purple-theme .section-header::before { background-color: #60A5FA !important; }
  body.dark-mode .stats-section.red-theme .section-header::before { background-color: #F87171 !important; }

  /* Horizontal scroll container for cards - optimized for mobile */
  .stats-scroll-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 8px !important;
    scroll-padding-right: 8px !important;
    width: auto !important;
    min-width: 100% !important;
  }

  .stats-scroll-container::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual stat cards - smaller, more compact for mobile */
  .stat-card {
    background-color: #FFFFFF !important;
    padding: 10px 12px !important;
    min-width: 130px !important;
    max-width: 160px !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important;
    scroll-snap-align: start !important;
  }

  .stat-label {
    font-size: 12px !important;
    color: #4B5563 !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    width: 100% !important;
    word-wrap: break-word !important;
  }

  .stat-label::before {
    display: none !important;
  }

  .stat-value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.dark-mode .stat-value {
    color: var(--dm-text-primary) !important;
  }

  body.dark-mode .stat-card {
    background: var(--dm-surface-color) !important;
    border-color: var(--dm-border-color) !important;
  }

  body.dark-mode .stat-card h4,
  body.dark-mode .stat-label {
    color: var(--dm-text-secondary) !important;
  }

  body.dark-mode .stat-card p {
    color: var(--dm-text-primary) !important;
  }

  /* Legacy support for old stat-group structure (if still used) */
  .stat-group {
    min-width: 280px !important;
    max-width: 300px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 12px;
    scroll-snap-align: start;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.05);
    backdrop-filter: blur(8px);
  }

  body.dark-mode .stat-group {
    background: var(--dm-surface-color) !important;
    border-color: var(--dm-border-color) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
  }

  body.dark-mode .stat-group h4 {
    color: var(--dm-text-secondary) !important;
    border-bottom-color: var(--dm-border-color) !important;
  }

  .stat-group h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: left;
  }

  .stat-card h4 {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
  }

  .stat-card p {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #1F2937 !important;
  }  
  /* =================================
     HEADER MOBILE OPTIMIZATION
     Perfect responsive header for all devices
     ================================= */
  
  /* Main header container - OVERRIDE Forms.css flex-direction: column */
  .header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 60px !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }

  /* Row 1: Logo, Toggle, Mobile Icons, User Menu */
  .logo-link {
    order: 1 !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin-right: 0 !important;
  }

  .logo-img {
    height: 30px !important;
    width: auto !important;
  }

  .logo-text {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  /* Mobile Actions Toggle (Search/Actions button) */
  #mobile-actions-toggle {
    display: inline-flex !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
  }

  #mobile-actions-toggle:hover,
  #mobile-actions-toggle.active {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
  }

  #mobile-actions-toggle svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Mobile Header Icons (Notification + Inbox) */
  .header-mobile-icons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    order: 3 !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-mobile-icons .header-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-radius: 10px !important;
    flex-direction: row !important;
  }

  .header-mobile-icons .header-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* User Info - stays in top row */
  #user-info {
    order: 4 !important;
    margin-left: 10px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  #user-menu-toggle {
    padding: 4px !important;
  }

  .user-avatar-container {
    width: 38px !important;
    height: 38px !important;
  }

  #user-menu-arrow {
    display: none !important;
  }

  /* User menu dropdown positioning */
  #user-menu {
    right: 0 !important;
    left: auto !important;
    width: 220px !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* Hide desktop notification/inbox in header-center on mobile */
  .header-center #notification-bell-btn,
  .header-center #chat-inbox-btn {
    display: none !important;
  }

  /* Row 2: Header Center (Collapsible) - CRITICAL: Must be hidden by default */
  .header-center {
    order: 10 !important;
    flex-basis: 100% !important;
    width: calc(100% + 32px) !important;
    margin: 12px -16px -12px -16px !important;
    padding: 16px !important;
    background-color: var(--surface-color) !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    display: none !important;
    flex-grow: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .header-center.is-open {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    animation: headerSlideDown 0.2s ease-out;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 16px !important;
    margin: 12px -16px -12px -16px !important;
    border-top: 1px solid var(--border-color) !important;
  }

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

  /* Search container inside header-center */
  .header-center .search-container {
    max-width: none !important;
    width: 100% !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
    flex-grow: 1 !important;
  }

  .header-center #search-input {
    padding: 10px 12px !important;
    font-size: 15px !important;
    width: 100% !important;
  }

  .header-center #search-button {
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  }

  .header-center #clear-search-button {
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* Icon Group - Grid layout for actions */
  .header-center .header-icon-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  /* Header icon buttons in the collapsed area */
  .header-center .header-icon-group .header-icon-btn {
    width: 100% !important;
    height: 52px !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
    background-color: var(--background-light) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.15s ease !important;
  }

  .header-center .header-icon-group .header-icon-btn:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
  }

  .header-center .header-icon-group .header-icon-btn:active {
    transform: scale(0.96);
  }

  .header-center .header-icon-group .header-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* Add New dropdown styling */
  .header-center .header-icon-group .add-new-dropdown {
    display: flex !important;
    grid-column: span 1 !important;
  }

  .header-center .header-icon-group .add-new-dropdown .header-icon-btn {
    width: 100% !important;
  }

  .header-center .add-new-dropdown .dropdown-menu {
    right: auto !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    top: auto !important;
    min-width: 140px !important;
  }

  /* Manager actions - display as grid items */
  .header-center .header-icon-group .manager-actions {
    display: contents !important;
  }
  /* =================================
     PAGE LAYOUT MOBILE
     ================================= */
  .page-container {
    padding: 12px 16px;
  }

  .dashboard-top-section {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }

  .right-column-container {
    flex: none;
    width: 100%;
    order: -1; /* Show above stats on mobile */
  }

  /* =================================
     MOBILE QUICK STATS CARDS
     ================================= */
  .mobile-quick-stats-wrapper {
    display: block;
    width: 100%;
    margin-bottom: 0;
    order: -2; /* Show above right-column-container */
  }

  .mobile-quick-stats-details {
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
  }

  /* Cards will show/hide with the Quick Stats details on mobile */
  .mobile-quick-stats-wrapper:has(details[open]) + .right-column-container {
    display: flex;
  }

  .mobile-quick-stats-wrapper:has(details:not([open])) + .right-column-container {
    display: none;
  }

  /* Fallback for browsers that don't support :has() */
  @supports not selector(:has(*)) {
    .mobile-quick-stats-wrapper + .right-column-container {
      display: flex;
    }
  }

  .mobile-quick-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
    list-style: none;
  }

  .mobile-quick-stats-header::-webkit-details-marker {
    display: none;
  }

  .mobile-chevron-icon {
    width: 16px;
    height: 16px;
    color: #6b7280;
    transition: transform 0.2s ease;
  }

  .mobile-quick-stats-details[open] .mobile-chevron-icon {
    transform: rotate(180deg);
  }

  /* Transform existing leaderboard containers into mobile cards */
  .right-column-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 16px 8px;
    margin-left: -8px; /* Compensate for page-container left padding */
    margin-right: -8px; /* Compensate for page-container right padding */
    scroll-padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .right-column-container::-webkit-scrollbar {
    display: none;
  }

  /* Top Agent Card - Yellow Theme */
  #daily-points-leaderboard.leaderboard-container {
    flex-shrink: 0;
    min-width: 140px;
    max-width: 140px;
    background: linear-gradient(to bottom right, #fef9c3, #fef3c7);
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }

  #daily-points-leaderboard.leaderboard-container:active {
    transform: scale(0.95);
  }

  #daily-points-leaderboard.leaderboard-container h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #92400e;
    margin: 0 0 8px 0;
  }

  #daily-points-leaderboard.leaderboard-container h3::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
  }

  #daily-points-leaderboard.leaderboard-container .leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  #daily-points-leaderboard.leaderboard-container .leaderboard-item {
    display: none; /* Hide all items by default */
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
  }

  #daily-points-leaderboard.leaderboard-container .leaderboard-item:first-child {
    display: flex; /* Show only first item */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Add "Tap to view all" text after first item */
  #daily-points-leaderboard.leaderboard-container .leaderboard-item:first-child::after {
    content: 'Tap to view all';
    font-size: 11px;
    color: #b45309;
    font-weight: 500;
    margin-top: 4px;
  }

  #daily-points-leaderboard.leaderboard-container .leaderboard-broker {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    max-width: 100%;
  }

  #daily-points-leaderboard.leaderboard-container .leaderboard-points {
    font-size: 12px;
    color: #b45309;
    background: transparent;
    padding: 0;
    min-width: auto;
  }

  #daily-points-leaderboard.leaderboard-container .leaderboard-item:first-child .leaderboard-points {
    font-size: 16px;
    font-weight: 700;
    color: #d97706;
  }

  /* Top Marketer Card - Blue Theme */
  #daily-marketer-leaderboard.leaderboard-container {
    flex-shrink: 0;
    min-width: 140px;
    max-width: 140px;
    background: linear-gradient(to bottom right, #dbeafe, #dbeafe);
    border: 1px solid #60a5fa;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }

  #daily-marketer-leaderboard.leaderboard-container:active {
    transform: scale(0.95);
  }

  #daily-marketer-leaderboard.leaderboard-container h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #1e40af;
    margin: 0 0 8px 0;
  }

  #daily-marketer-leaderboard.leaderboard-container h3::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
  }

  #daily-marketer-leaderboard.leaderboard-container .leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  #daily-marketer-leaderboard.leaderboard-container .leaderboard-item {
    display: none; /* Hide all items by default */
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
  }

  #daily-marketer-leaderboard.leaderboard-container .leaderboard-item:first-child {
    display: flex; /* Show only first item */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Add "Tap to view all" text after first item */
  #daily-marketer-leaderboard.leaderboard-container .leaderboard-item:first-child::after {
    content: 'Tap to view all';
    font-size: 11px;
    color: #2563eb;
    font-weight: 500;
    margin-top: 4px;
  }

  #daily-marketer-leaderboard.leaderboard-container .leaderboard-broker {
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    max-width: 100%;
  }

  #daily-marketer-leaderboard.leaderboard-container .leaderboard-points {
    font-size: 12px;
    color: #2563eb;
    background: transparent;
    padding: 0;
    min-width: auto;
  }

  #daily-marketer-leaderboard.leaderboard-container .leaderboard-item:first-child .leaderboard-points {
    font-size: 16px;
    font-weight: 700;
    color: #3b82f6;
  }

  /* Today's Showings Card - Purple Theme */
  #todays-showings-container {
    flex-shrink: 0;
    min-width: 140px;
    max-width: 140px;
    background: linear-gradient(to bottom right, #f3e8ff, #f3e8ff);
    border: 1px solid #a78bfa;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }

  #todays-showings-container:active {
    transform: scale(0.95);
  }

  #todays-showings-container .meetings-today-banner h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6b21a8;
    margin: 0 0 8px 0;
  }

  #todays-showings-container .meetings-today-banner h4 {
    position: relative;
  }

  #todays-showings-container .meetings-today-banner h4::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: 6px;
  }

  #todays-showings-container .meetings-today-list {
    counter-reset: showing-count 0;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
  }

  #todays-showings-container .meetings-today-item {
    counter-increment: showing-count;
  }

  /* Show count instead of list items */
  #todays-showings-container .meetings-today-banner::after {
    content: counter(showing-count);
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #6b21a8;
    margin-top: 8px;
  }

  #todays-showings-container::after {
    content: 'Tap to view';
    display: block;
    font-size: 11px;
    color: #7c3aed;
    font-weight: 500;
    margin-top: 4px;
  }

  #todays-showings-container .meetings-today-item .time {
    font-size: 12px;
    font-weight: 600;
    color: #a855f7;
    margin-right: 0;
  }

  #todays-showings-container .meetings-today-item strong {
    font-size: 14px;
    font-weight: 600;
    color: #6b21a8;
  }

  #todays-showings-container .meetings-today-item small {
    font-size: 11px;
    color: #7c3aed;
  }

  /* Today's Meetings Card - Green Theme */
  #todays-meetings-container {
    flex-shrink: 0;
    min-width: 140px;
    max-width: 140px;
    background: linear-gradient(to bottom right, #dcfce7, #dcfce7);
    border: 1px solid #4ade80;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }

  #todays-meetings-container:active {
    transform: scale(0.95);
  }

  #todays-meetings-container .meetings-today-banner h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #166534;
    margin: 0 0 8px 0;
  }

  #todays-meetings-container .meetings-today-banner h4 {
    position: relative;
  }

  #todays-meetings-container .meetings-today-banner h4::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: 6px;
  }

  #todays-meetings-container .meetings-today-list {
    counter-reset: meeting-count 0;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
  }

  #todays-meetings-container .meetings-today-item {
    counter-increment: meeting-count;
  }

  /* Show count instead of list items */
  #todays-meetings-container .meetings-today-banner::after {
    content: counter(meeting-count);
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #166534;
    margin-top: 8px;
  }

  #todays-meetings-container::after {
    content: 'Tap to view';
    display: block;
    font-size: 11px;
    color: #15803d;
    font-weight: 500;
    margin-top: 4px;
  }

  #todays-meetings-container .meetings-today-item .time {
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    margin-right: 0;
  }

  #todays-meetings-container .meetings-today-item strong {
    font-size: 14px;
    font-weight: 600;
    color: #166534;
  }

  #todays-meetings-container .meetings-today-item small {
    font-size: 11px;
    color: #15803d;
  }

  /* Hide desktop leaderboard styling on mobile */
  .right-column-container .leaderboard-container {
    max-height: none;
    overflow: visible;
    background: none; /* Remove desktop background */
    border: none; /* Remove desktop border */
    box-shadow: none; /* Remove desktop shadow */
    padding: 0; /* Remove desktop padding - will be set by card styles */
    margin-bottom: 0; /* Remove desktop margin */
  }

  /* =================================
     SCHEDULED TIMELINE MOBILE CARD
     ================================= */
  .right-column-container .scheduled-timeline-widget {
    flex-shrink: 0;
    min-width: 160px;
    max-width: 160px;
    max-height: none !important;
    background: linear-gradient(to bottom right, #ede9fe, #ddd6fe);
    border: 1px solid #a78bfa;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    order: -1; /* Show before Top Agent */
  }

  .right-column-container .scheduled-timeline-widget::before {
    display: none; /* Hide gradient top bar on mobile */
  }

  .right-column-container .scheduled-timeline-widget:active {
    transform: scale(0.95);
  }

  .right-column-container .scheduled-timeline-widget .timeline-header {
    padding: 0;
    background: transparent;
    border: none;
  }

  .right-column-container .scheduled-timeline-widget .timeline-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #5b21b6;
    margin: 0 0 8px 0;
  }

  .right-column-container .scheduled-timeline-widget .timeline-title::before {
    font-size: 14px;
  }

  .right-column-container .scheduled-timeline-widget .timeline-tabs {
    display: none; /* Hide tabs on mobile card */
  }

  .right-column-container .scheduled-timeline-widget .timeline-content {
    display: none; /* Hide timeline items on mobile card */
  }

  /* Show mobile summary instead */
  .right-column-container .scheduled-timeline-widget .timeline-header::after {
    content: attr(data-mobile-summary);
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #5b21b6;
    margin-bottom: 4px;
  }

  .right-column-container .scheduled-timeline-widget .timeline-title::after {
    content: 'Tap to view all';
    display: block;
    font-size: 11px;
    color: #7c3aed;
    font-weight: 500;
    margin-top: 8px;
    position: absolute;
    bottom: 12px;
    left: 12px;
  }

  .right-column-container .scheduled-timeline-widget {
    position: relative;
    min-height: 100px;
  }

  .right-column-container .leaderboard-container::before {
    display: none;
  }

  /* Override desktop meetings/showings container styling */
  .right-column-container #todays-meetings-container,
  .right-column-container #todays-showings-container {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  /* Override desktop meetings/showings styling on mobile - use card styling instead */
  #todays-meetings-container .meetings-today-banner,
  #todays-showings-container .meetings-today-banner {
    margin: 0;
    padding: 0;
  }

  #todays-meetings-container .meetings-today-banner h4,
  #todays-showings-container .meetings-today-banner h4 {
    margin: 0 0 8px 0;
  }

  /* Ensure right-column-container shows as cards when mobile wrapper is present */
  .mobile-quick-stats-wrapper + .right-column-container {
    padding: 0 0 16px 8px;
    margin-left: -8px; /* Compensate for page-container left padding */
    margin-right: -8px; /* Compensate for page-container right padding */
    scroll-padding-right: 0;
  }

  /* Hide desktop view elements on mobile */
  .right-column-container .leaderboard-container h3::before,
  .right-column-container .marketer-record-card h3::before {
    display: none;
  }

  /* =================================
     MOBILE BOTTOM SHEET
     ================================= */
  .mobile-bottom-sheet-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .mobile-bottom-sheet-overlay.show {
    display: block;
    opacity: 1;
  }

  .mobile-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }

  .mobile-bottom-sheet-overlay.show .mobile-bottom-sheet {
    transform: translateY(0);
  }

  .mobile-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
  }

  .mobile-bottom-sheet-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-bottom-sheet-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    border-radius: 8px;
    transition: background-color 0.2s;
  }

  .mobile-bottom-sheet-close:hover {
    background-color: #f3f4f6;
  }

  .mobile-bottom-sheet-close svg {
    width: 20px;
    height: 20px;
  }

  .mobile-bottom-sheet-content {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }

  /* Bottom Sheet List Items */
  .bottom-sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
    gap: 12px;
  }

  .bottom-sheet-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .bottom-sheet-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
  }

  .bottom-sheet-rank.rank-1 {
    background-color: #FFD700;
  }

  .bottom-sheet-rank.rank-2 {
    background-color: #C0C0C0;
  }

  .bottom-sheet-rank.rank-3 {
    background-color: #CD7F32;
  }

  .bottom-sheet-rank.rank-other {
    background-color: #6b7280;
  }

  .bottom-sheet-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  .bottom-sheet-item-name {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
  }

  .bottom-sheet-item-detail {
    font-size: 12px;
    color: #6b7280;
  }

  .bottom-sheet-item-right {
    text-align: right;
    flex-shrink: 0;
  }

  .bottom-sheet-points {
    font-size: 18px;
    font-weight: 700;
    color: #6366f1;
  }

  .bottom-sheet-item-label {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Bottom Sheet Tabs for Scheduled */
  .bottom-sheet-tabs {
    display: flex;
    gap: 6px;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bottom-sheet-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 20px;
    background: #f3f4f6;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
  }

  .bottom-sheet-tab .tab-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
  }

  .bottom-sheet-tab .tab-count {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    background: #e5e7eb;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
  }

  .bottom-sheet-tab.active {
    background: #6366f1;
  }

  .bottom-sheet-tab.active .tab-label {
    color: white;
  }

  .bottom-sheet-tab.active .tab-count {
    background: rgba(255,255,255,0.25);
    color: white;
  }

  .bottom-sheet-scheduled-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Showings/Meetings/Scheduled Bottom Sheet Items */
  .bottom-sheet-showing-item,
  .bottom-sheet-meeting-item,
  .bottom-sheet-scheduled-item {
    padding: 12px;
    background-color: #f9fafb;
    border-radius: 8px;
    margin-bottom: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .bottom-sheet-scheduled-item:active {
    background-color: #f3f4f6;
  }

  .bottom-sheet-item-status.task-type {
    background-color: #f3f4f6;
    color: #4b5563;
  }

  .bottom-sheet-item-status.followup-type {
    background-color: #dcfce7;
    color: #166534;
  }

  .bottom-sheet-item-status.meeting-type {
    background-color: #fae8ff;
    color: #86198f;
  }

  .bottom-sheet-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .bottom-sheet-item-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #6366f1;
    font-size: 13px;
  }

  .bottom-sheet-item-time svg {
    width: 14px;
    height: 14px;
  }

  .bottom-sheet-item-status {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background-color: #dcfce7;
    color: #166534;
  }

  .bottom-sheet-item-client {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .bottom-sheet-item-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
  }

  .bottom-sheet-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
  }

  .bottom-sheet-item-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .bottom-sheet-item-meta-item svg {
    width: 14px;
    height: 14px;
  }

  /* Empty state */
  .bottom-sheet-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 14px;
  }

  /* =================================
     FILTERS MOBILE OPTIMIZATION
     ================================= */
  #toggle-filters-btn {
    top: 70px;
    width: 32px;
    height: 32px;
    padding: 6px;
  }

  #filters-panel {
    width: 100%;
    max-width: 320px;
  }

  .filters-panel-header {
    padding: 12px 16px;
  }

  .filters-panel-header h4 {
    font-size: 16px;
  }

  #filter-bar {
    padding: 16px;
    gap: 16px;
  }

  .filter-group {
    gap: 6px;
  }

  .filter-group label {
    font-size: 13px;
  }

  .custom-select-toggle {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .custom-select-options {
    max-height: 200px;
    font-size: 14px;
  }

  .custom-option {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Date inputs mobile */
  .date-range-group input {
    height: 48px;
    padding: 12px 14px 12px 40px;
    font-size: 14px;
  }

  /* Time filter pills */
  .time-filter-pills {
    flex-direction: column;
    gap: 6px;
    padding: 8px;
  }

  .time-pill {
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
  }

  /* =================================
     UNIT CARDS MOBILE OPTIMIZATION
     ================================= */
  .unit-card-modern {
    min-height: auto !important;
    max-height: none !important;
  }

  .unit-card-image-header {
    height: 180px !important;
  }

  .unit-card-body {
    padding: 10px 12px !important;
  }

  .unit-info-grid {
    gap: 5px !important;
  }

  .info-item-compact {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  .spec-badge {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  .unit-card-footer {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  .meta-date,
  .meta-user {
    font-size: 10px !important;
  }

  .details-btn-modern {
    font-size: 12px !important;
    height: 32px !important;
    padding: 0 12px !important;
  }

  .share-unit-btn-modern,
  .download-unit-btn-modern {
    width: 28px !important;
    height: 28px !important;
  }

  /* Override any conflicting styles */
  .card-grid-container {
    padding: 12px !important;
    gap: 12px !important;
  }

  .lead-card {
    margin-bottom: 16px;
    border-radius: 16px;
    min-height: auto;
  }

  .lead-card-header {
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .lead-card-header h3 {
    display: flex;
    font-size: 15px;
    flex: 1;
    margin: 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .rating-pill, .reminder-pill {
    font-size: 10px;
    padding: 4px 8px;
    margin-left: 4px;
    margin-top: 0;
  }

  .lead-card-body {
    padding: 12px 16px;
    gap: 12px;
  }

  .card-info-item {
    gap: 4px;
  }

  .card-info-label {
    font-size: 10px;
  }

  .card-info-value {
    font-size: 13px;
  }

  .phone-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .phone-display img {
    width: 20px;
    height: 20px;
  }

  .last-follow-up-note {
    font-size: 12px;
    padding: 8px 10px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-height: 60px;
    overflow-y: auto;
  }

  .lead-card-footer {
    padding: 12px 16px;
  }

  .action-group {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .action-group select,
  .details-btn,
  .assign-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* =================================
     BATCH ACTIONS MOBILE
     ================================= */
  #batch-actions-container {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
  }

  #selection-count {
    font-size: 14px;
    text-align: center;
  }

  .custom-multiselect {
    width: 100%;
  }

  #batch-assign-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  /* =================================
     TABLE MOBILE OPTIMIZATION
     ================================= */
  .table-container {
    border-radius: 8px;
    overflow: hidden;
  }

  .table-header {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .table-header h2 {
    font-size: 16px;
  }

  .results-count {
    font-size: 12px;
    margin-left: 0;
  }

  /* =================================
     PAGINATION MOBILE
     ================================= */
  .pagination-controls {
    gap: 6px;
    padding: 16px 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-btn {
    min-width: 38px;
    height: 38px;
    font-size: 14px;
    border-radius: 8px;
  }

  .pagination-ellipsis {
    padding: 0 4px;
    font-size: 12px;
  }

  /* =================================
     MODAL MOBILE OPTIMIZATION
     ================================= */
  .modal {
    padding: 0 !important;
    align-items: flex-start;
    padding-top: 0 !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: none !important;
    max-height: 100vh !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
  }

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

  .modal-header {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    position: sticky;
    top: 0;
    background: var(--surface-color);
    z-index: 10;
  }

  .modal-header h3 {
    font-size: 16px;
    order: 2;
  }

  .modal-header-left {
    width: 100%;
    justify-content: space-between;
    order: 1;
  }

  .modal-header-switcher {
    margin-left: 0;
    gap: 8px;
  }

  .switcher-btn {
    width: 36px;
    height: 36px;
  }

  .switcher-btn img {
    width: 20px;
    height: 20px;
  }

  .close-button {
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .modal-body {
    padding: 16px;
    max-height: calc(100vh - 120px);
    /* No extra bottom spacing - safe area handled by modal-footer if present */
  }

  /* Modal Headers - Keep horizontal layout on mobile for all modals */
  .modal-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0;
  }

  .modal-header h3 {
    order: 0;
    font-size: 16px;
    margin: 0;
  }

  .modal-header-left {
    order: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .modal-header-actions {
    order: 1;
    gap: 8px;
  }

  /* Notifications Modal Header - Keep horizontal layout on mobile */
  .notifications-modal-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0;
  }

  .notifications-modal-header h3 {
    order: 0;
    font-size: 16px;
  }

  .notifications-modal-header-actions {
    gap: 8px;
  }

  /* Modal grid mobile */
  .modal-grid-container {
    display: block !important;
    gap: 16px;
  }

  .modal-grid-column {
    margin-bottom: 16px;
  }

  .info-group {
    gap: 8px;
    margin-bottom: 16px;
  }

  .info-label {
    font-size: 11px;
  }

  .info-value {
    font-size: 14px;
    padding: 8px 12px;
  }

  .phone-display {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Modal forms mobile */
  .modal-body textarea,
  .modal-body input[type="text"],
  .modal-body input[type="tel"],
  .modal-body input[type="date"],
  .modal-body input[type="time"],
  .modal-body select {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .modal-body textarea {
    min-height: 80px;
  }

  /* =================================
     MODAL TABS MOBILE
     ================================= */
  .modal-tabs {
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

  .tab-button {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
    min-width: max-content;
  }

  .tab-content {
    padding: 16px;
  }

  /* =================================
     CHAT MOBILE OPTIMIZATION
     ================================= */
  .chat-log {
    max-height: 250px;
    padding: 12px;
    gap: 12px;
    overscroll-behavior: contain; /* Prevents parent from scrolling */
  }

  .chat-message-bubble {
    max-width: 90%;
    padding: 10px 12px;
    font-size: 14px;
  }

  .chat-sender-info {
    margin-bottom: 4px;
    gap: 6px;
  }

  .chat-sender-info strong {
    font-size: 13px;
  }

  .chat-sender-info .timestamp {
    font-size: 11px;
  }

  .chat-message-text {
    min-height: 80px;
    padding: 12px;
    font-size: 14px;
  }

  .chat-form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .chat-form-actions button{
    width: 100%;
    height: 44px;
    font-size: 14px;
  }
  #mention-suggestions {
    max-height: 120px; /* Use a fixed pixel height to prevent overflow when keyboard is open */
    overflow-y: auto;   /* Explicitly ensure vertical scrolling is enabled */
    -webkit-overflow-scrolling: touch; /* Improves scrolling feel on iOS */
    overscroll-behavior: contain; /* THIS IS THE FIX: Prevents the scroll from escaping to the parent */
  }
  /* =================================
     FOLLOW-UP TAB MOBILE
     ================================= */
  .followup-container-grid {
    flex-direction: column;
    gap: 16px;
  }

  .followup-sidebar-col {
    flex: none;
    order: -1; /* Show status first on mobile */
  }

  .followup-notes-stream {
    max-height: 200px;
    margin-bottom: 12px;
  }

  .note-author {
    font-size: 12px;
  }

  .note-timestamp {
    font-size: 10px;
  }

  .note-body {
    padding: 8px 12px;
    font-size: 13px;
  }

  #new-note-textarea {
    min-height: 60px;
    padding: 12px 50px 12px 14px;
    font-size: 14px;
  }

  #note-submit-btn {
    right: 6px;
    bottom: 6px;
    height: 32px;
    font-size: 13px;
    padding: 0 12px;
  }

  /* =================================
     SCHEDULE TAB MOBILE
     ================================= */
  .quick-schedule-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .quick-schedule-btn {
    padding: 10px 8px;
    font-size: 12px;
    text-align: center;
  }

  .quick-schedule-btn.custom-time-btn {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .reminder-section {
    margin-top: 16px;
    padding-top: 16px;
  }

  .reminder-section-header {
    font-size: 14px;
    margin-bottom: 12px;
  }

  #reminders-list {
    gap: 8px;
  }

  .reminder-list-item {
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .reminder-info strong {
    font-size: 12px;
  }

  .reminder-info .timestamp {
    font-size: 10px;
  }

  .complete-btn-primary {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* =================================
     RATING BUTTONS MOBILE
     ================================= */
  .lead-rating-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .rating-btn {
    padding: 12px 8px;
    font-size: 13px;
    min-height: 44px;
  }

  /* =================================
     STAGE UPDATER MOBILE
     ================================= */
  .stage-tabs {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
  }

  .stage-tab-btn {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .stage-tab-content {
    gap: 8px !important;
  }

  .sub-stage-btn {
    padding: 10px 12px;
    font-size: 12px;
    width: 100%;
    margin-bottom: 6px;
    text-align: center;
  }

  /* =================================
     MULTISELECT MOBILE
     ================================= */
  .editable-multiselect {
    padding: 12px;
  }

  .editable-multiselect .label {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .editable-multiselect .pills {
    min-height: 44px;
    padding: 8px;
  }

  .editable-multiselect .pill {
    font-size: 12px;
    padding: 4px 8px;
  }

  .editable-multiselect .option {
    padding: 12px;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* =================================
     LEADERBOARD MOBILE
     ================================= */
  .leaderboard-container {
    padding: 16px;
    max-height: none;
    margin-bottom: 16px;
  }

  .leaderboard-container h3 {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .leaderboard-item {
    padding: 10px 12px;
    gap: 8px;
  }

  .leaderboard-broker {
    font-size: 12px;
    max-width: none;
  }

  .leaderboard-points {
    font-size: 16px;
    padding: 6px 12px;
  }

  /* =================================
     MEETINGS TODAY MOBILE
     ================================= */
  .meetings-today-item {
    padding: 8px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .meetings-today-item .time {
    font-size: 12px;
    margin-right: 0;
  }

  .meetings-today-item strong {
    font-size: 14px;
  }

  .meetings-today-item small {
    font-size: 11px;
  }
}

/* =================================
   MOBILE PORTRAIT (PHONES)
   ================================= */
@media screen and (max-width: 480px) {
  /* Extra small mobile optimizations */
  .page-container {
    padding: 8px 12px;
  }

  /* Header - Extra small screens */
  .header {
    padding: 8px 12px;
    min-height: 52px;
    gap: 0;
  }

  .logo-text {
    font-size: 16px;
  }

  .logo-img {
    height: 26px;
  }

  #mobile-actions-toggle {
    width: 36px;
    height: 36px;
    padding: 6px;
  }

  #mobile-actions-toggle svg {
    width: 20px;
    height: 20px;
  }

  .header-mobile-icons {
    gap: 4px;
    margin-left: 6px;
  }

  .header-mobile-icons .header-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 6px;
  }

  .header-mobile-icons .header-icon-btn svg {
    width: 18px;
    height: 18px;
  }

  #user-info {
    margin-left: 4px;
  }

  .user-avatar-container {
    width: 32px;
    height: 32px;
  }

  /* Header center - extra small screens - must maintain hidden state */
  .header-center {
    width: calc(100% + 24px) !important;
    /* Keep hidden state from 768px */
  }

  .header-center.is-open {
    gap: 12px !important;
    margin: 10px -12px -8px -12px !important;
    padding: 12px !important;
  }

  .header-center .search-container {
    padding: 3px 5px !important;
  }

  .header-center #search-input {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  .header-center #search-button {
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  .header-center .header-icon-group {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .header-center .header-icon-group .header-icon-btn {
    height: 48px !important;
    font-size: 9px !important;
    padding: 6px 3px !important;
    border-radius: 8px !important;
  }

  .header-center .header-icon-group .header-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Additional unit card optimizations for small phones */
  .unit-card-image-header {
    height: 140px !important;
  }

  .unit-card-body {
    padding: 8px 10px !important;
  }

  .info-item-compact {
    font-size: 10px !important;
    padding: 5px 6px !important;
  }

  .spec-badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  .details-btn-modern {
    font-size: 11px !important;
    height: 30px !important;
  }

  /* Stats container extra small screens - optimize spacing */
  .stats-container {
    padding: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  /* Further reduce spacing on very small screens */
  .stats-section {
    margin-bottom: 12px !important;
  }

  .section-header {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .section-header::before {
    width: 8px !important;
    height: 8px !important;
  }

  .stats-scroll-container {
    gap: 8px !important;
    margin: 0 -8px 0 -8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    scroll-padding-left: 8px !important;
    scroll-padding-right: 8px !important;
  }

  .stat-card {
    padding: 10px !important;
    min-width: 115px !important;
    max-width: 140px !important;
    border-radius: 8px !important;
  }

  .stat-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
    line-height: 1.3 !important;
  }

  .stat-value {
    font-size: 14px !important;
    color: #1F2937 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Smaller scroll indicator for extra small screens */
  .stats-container::after {
    right: 6px;
    width: 10px;
    height: 10px;
  }

  .stat-group {
    min-width: 250px;
    max-width: 270px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .stat-group h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .stat-card {
    padding: 10px 12px;
    min-width: 120px;
  }

  .stat-card h4 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    white-space: normal;
    word-wrap: break-word;
  }

  .stat-card p {
    font-size: 14px;
    background: #eef2ff;
    padding: 4px 8px;
    border-radius: 6px;
  }

  /* Cards optimization */
  .card-grid-container {
    padding: 12px;
    gap: 12px;
  }

  .lead-card {
    margin-bottom: 12px;
  }

  .lead-card-header,
  .lead-card-body,
  .lead-card-footer {
    padding: 10px 12px;
  }

  /* Modal adjustments */
  .modal {
    padding: 0 !important;
  }

  .modal-body {
    padding: 12px;
  }

  /* Filter panel */
  #filters-panel {
    max-width: 280px;
  }

  #filter-bar {
    padding: 12px;
  }

  /* Quick schedule pills smaller grid */
  .quick-schedule-pills {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Batch actions */
  #batch-actions-container {
    padding: 10px 12px;
  }

  /* Search results */
  .search-result-item {
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .search-result-status {
    align-self: flex-start;
    min-width: auto;
  }
}

/* =================================
   LANDSCAPE MOBILE SPECIFIC
   ================================= */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .modal-content {
    position: relative;
    bottom: auto;
    border-radius: 16px;
    max-height: 90vh;
  }

  .modal-body {
    max-height: calc(90vh - 80px);
  }

  .followup-notes-stream {
    max-height: 150px;
  }

  .chat-log {
    max-height: 180px;
  }

  /* Landscape header - more compact */
  .header {
    min-height: 48px;
    padding: 6px 16px;
  }

  .logo-img {
    height: 24px;
  }

  .logo-text {
    font-size: 16px;
  }

  #mobile-actions-toggle,
  .header-mobile-icons .header-icon-btn {
    width: 34px;
    height: 34px;
    padding: 6px;
  }

  .user-avatar-container {
    width: 30px;
    height: 30px;
  }

  .header-center.is-open {
    position: fixed;
    top: 52px;
    left: 16px;
    right: 16px;
    z-index: 1000;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    margin: 0;
    width: auto;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }

  .header-icon-group {
    grid-template-columns: repeat(5, 1fr);
  }

  .header-icon-group .header-icon-btn {
    height: 44px;
  }
}

/* =================================
   DARK MODE MOBILE OVERRIDES
   ================================= */

/* Dark mode header mobile styles */
body.dark-mode .header-center {
  background-color: var(--dm-surface-color);
  border-color: var(--dm-border-color);
}

body.dark-mode .header-center.is-open {
  background-color: var(--dm-surface-color);
  border-top-color: var(--dm-border-color);
}

body.dark-mode #mobile-actions-toggle {
  background-color: var(--dm-surface-color);
  border-color: var(--dm-border-color);
  color: var(--dm-text-secondary);
}

body.dark-mode #mobile-actions-toggle:hover,
body.dark-mode #mobile-actions-toggle.active {
  background-color: var(--dm-background-light);
  border-color: var(--dm-primary-color);
  color: var(--dm-primary-color);
}

body.dark-mode .header-mobile-icons .header-icon-btn {
  background-color: var(--dm-surface-color);
  border-color: var(--dm-border-color);
  color: var(--dm-text-secondary);
}

body.dark-mode .header-mobile-icons .header-icon-btn:hover {
  background-color: var(--dm-background-light);
  border-color: var(--dm-primary-color);
  color: var(--dm-primary-color);
}

@media screen and (max-width: 768px) {
  body.dark-mode .header-icon-group .header-icon-btn {
    background-color: var(--dm-background-light);
    border-color: var(--dm-border-color);
    color: var(--dm-text-secondary);
  }

  body.dark-mode .header-icon-group .header-icon-btn:hover {
    background-color: var(--dm-surface-color);
    border-color: var(--dm-primary-color);
    color: var(--dm-primary-color);
  }

  body.dark-mode .search-container {
    background-color: var(--dm-surface-color);
    border-color: var(--dm-border-color);
  }

  body.dark-mode #search-input {
    color: var(--dm-text-primary);
  }

  body.dark-mode #search-input::placeholder {
    color: var(--dm-text-secondary);
  }
}

body.dark-mode .modal-header {
  background-color: var(--dm-surface-color);
}

/* Dark mode scroll indicator */
body.dark-mode .stats-container::after {
  background: linear-gradient(90deg, transparent 0%, var(--dm-primary-color) 100%);
}

/* Dark mode stat group shadows */
@media screen and (max-width: 768px) {
  body.dark-mode .stat-group {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    background: var(--dm-surface-color) !important;
    border-color: var(--dm-border-color) !important;
  }

  body.dark-mode .stat-group-title {
    color: var(--dm-text-secondary) !important;
  }

  body.dark-mode .stats-container {
    background: var(--dm-surface-color) !important;
    border-color: var(--dm-border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  body.dark-mode .stat-card {
    background: var(--dm-background-light) !important;
    border-color: var(--dm-border-color) !important;
  }

  body.dark-mode .stat-label {
    color: var(--dm-text-secondary) !important;
  }

  body.dark-mode .stat-value {
    color: var(--dm-primary-color) !important;
    background: rgba(99, 102, 241, 0.15) !important;
  }
}

@media screen and (max-width: 480px) {
  body.dark-mode .stat-group {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    background: var(--dm-surface-color) !important;
    border-color: var(--dm-border-color) !important;
  }

  body.dark-mode .stat-group-title {
    color: var(--dm-text-secondary) !important;
  }

  body.dark-mode .stats-container {
    background: var(--dm-surface-color) !important;
    border-color: var(--dm-border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  body.dark-mode .stat-card {
    background: var(--dm-background-light) !important;
    border-color: var(--dm-border-color) !important;
  }

  body.dark-mode .stat-label {
    color: var(--dm-text-secondary) !important;
  }

  body.dark-mode .stat-value {
    color: var(--dm-primary-color) !important;
    background: rgba(99, 102, 241, 0.15) !important;
  }
}

/* =================================
   TOUCH OPTIMIZATIONS
   ================================= */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .stat-card,
  .lead-card,
  .page-btn,
  .tab-button,
  .rating-btn,
  .sub-stage-btn,
  .details-btn,
  .assign-btn,
  .complete-btn-primary {
    min-height: 44px;
  }

  /* Remove hover effects on touch devices */
  .stat-card:hover,
  .lead-card:hover,
  .page-btn:hover,
  .header-icon-btn:hover {
    transform: none;
    box-shadow: initial;
  }

  /* Add touch feedback */
  .stat-card:active,
  .lead-card:active,
  .page-btn:active,
  .header-icon-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Hide scroll indicator on touch devices since they typically show scrollbars */
  .stats-container::after {
    display: none;
  }
}

/* =================================
   ACCESSIBILITY IMPROVEMENTS
   ================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .modal-content {
    animation: none;
  }

  .lead-card,
  .stat-card,
  .page-btn {
    transition: none;
  }

  /* Hide scroll indicator animation for reduced motion */
  .stats-container::after {
    animation: none !important;
    opacity: 0.5 !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .border-color {
    border-width: 2px;
  }

  .stat-card,
  .lead-card,
  .modal-content {
    border-width: 2px;
  }

  .rating-pill,
  .reminder-pill {
    border: 2px solid currentColor;
  }
}

/* =================================
   PRINT STYLES (MOBILE)
   ================================= */
@media print {
  .header,
  .modal,
  #filters-panel,
  #toggle-filters-btn,
  .pagination-controls,
  .chat-form-actions,
  .action-group {
    display: none !important;
  }

  .page-container {
    padding: 0;
  }

  .lead-card,
  .stat-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }
}

/* =================================
   PERFORMANCE OPTIMIZATIONS
   ================================= */
@media screen and (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  .lead-card,
  .stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Optimize scrolling */
  .modal-body,
  .chat-log,
  .followup-notes-stream {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* GPU acceleration for smooth animations */
  .modal-content,
  .header-center,
  .filters-panel {
    transform: translateZ(0);
    will-change: transform;
  }
}

/* =================================
   SAFE AREA INSETS (iPhone X+)
   Comprehensive iOS-only safe area support
   ================================= */
/* Legacy support for older iOS versions using constant() */
@supports (padding-top: constant(safe-area-inset-top)) {
  .header {
    padding-top: calc(0px + constant(safe-area-inset-top));
    padding-left: calc(32px + constant(safe-area-inset-left));
    padding-right: calc(32px + constant(safe-area-inset-right));
  }

  .modal-content {
    /* Removed padding-bottom - modal is fixed at bottom: 0, padding creates white space */
    padding-left: calc(0px + constant(safe-area-inset-left));
    padding-right: calc(0px + constant(safe-area-inset-right));
  }

  .page-container {
    padding-left: calc(12px + constant(safe-area-inset-left));
    padding-right: calc(12px + constant(safe-area-inset-right));
  }

  /* Bottom positioned elements */
  .modal-footer,
  .chat-form-actions {
    padding-bottom: calc(16px + constant(safe-area-inset-bottom));
  }
}

/* Modern support using env() - iOS only, automatically 0 on other platforms */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Header safe area - already handled in Dashboard.css but enhance here for consistency */
  .header {
    padding-top: calc(0px + env(safe-area-inset-top));
    padding-left: calc(32px + env(safe-area-inset-left));
    padding-right: calc(32px + env(safe-area-inset-right));
  }

  /* Modal safe area support */
  .modal-content {
    /* Removed padding-bottom - modal is fixed at bottom: 0, padding creates white space */
    /* Safe area padding should be applied to inner content elements (modal-footer, modal-body) instead */
    padding-left: calc(0px + env(safe-area-inset-left));
    padding-right: calc(0px + env(safe-area-inset-right));
  }

  /* Page container safe area */
  .page-container {
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }

  /* Fixed position elements safe area support */
  .modal,
  .filters-panel,
  #filters-panel {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Bottom positioned elements */
  .modal-footer,
  .chat-form-actions {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* Tablet responsive adjustments */
  @media (max-width: 960px) {
    .header {
      padding-top: calc(10px + env(safe-area-inset-top));
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }

    .page-container {
      padding-left: calc(12px + env(safe-area-inset-left));
      padding-right: calc(12px + env(safe-area-inset-right));
    }
  }

  /* Mobile responsive adjustments */
  @media (max-width: 768px) {
    .header {
      padding-top: calc(10px + env(safe-area-inset-top));
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }

    .header-center {
      margin-left: calc(-16px - env(safe-area-inset-left));
      margin-right: calc(-16px - env(safe-area-inset-right));
      width: calc(100% + 32px + env(safe-area-inset-left) + env(safe-area-inset-right));
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
  }

  /* Small mobile responsive adjustments */
  @media (max-width: 480px) {
    .header {
      padding-top: calc(8px + env(safe-area-inset-top));
      padding-left: calc(12px + env(safe-area-inset-left));
      padding-right: calc(12px + env(safe-area-inset-right));
    }

    .header-center {
      margin-left: calc(-12px - env(safe-area-inset-left));
      margin-right: calc(-12px - env(safe-area-inset-right));
      width: calc(100% + 24px + env(safe-area-inset-left) + env(safe-area-inset-right));
      padding-left: calc(12px + env(safe-area-inset-left));
      padding-right: calc(12px + env(safe-area-inset-right));
    }
  }
}

/* =================================
   UTILITIES AND HELPERS
   ================================= */
@media screen and (max-width: 768px) {
  /* Mobile-only utilities */
  .mobile-hidden {
    display: none !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

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

  .mobile-stack {
    flex-direction: column !important;
  }

  /* Spacing utilities for mobile */
  .mobile-p-0 { padding: 0 !important; }
  .mobile-p-1 { padding: 8px !important; }
  .mobile-p-2 { padding: 12px !important; }
  .mobile-p-3 { padding: 16px !important; }

  .mobile-m-0 { margin: 0 !important; }
  .mobile-m-1 { margin: 8px !important; }
  .mobile-m-2 { margin: 12px !important; }
  .mobile-m-3 { margin: 16px !important; }

  /* Text size utilities for mobile */
  .mobile-text-xs { font-size: 11px !important; }
  .mobile-text-sm { font-size: 12px !important; }
  .mobile-text-base { font-size: 14px !important; }
  .mobile-text-lg { font-size: 16px !important; }
}

/* ============================================
   DARK MODE - MOBILE SCHEDULED TIMELINE
   ============================================ */
@media screen and (max-width: 768px) {
  body.dark-mode .right-column-container .scheduled-timeline-widget {
    background: linear-gradient(to bottom right, #312e81, #4c1d95);
    border-color: #6366f1;
  }

  body.dark-mode .right-column-container .scheduled-timeline-widget .timeline-title {
    color: #c7d2fe;
  }

  body.dark-mode .right-column-container .scheduled-timeline-widget .timeline-header::after {
    color: #e0e7ff;
  }

  body.dark-mode .right-column-container .scheduled-timeline-widget .timeline-title::after {
    color: #a5b4fc;
  }
}

/* ============================================
   DARK MODE - MOBILE BOTTOM SHEET
   ============================================ */
@media screen and (max-width: 768px) {
  body.dark-mode .mobile-bottom-sheet-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  body.dark-mode .mobile-bottom-sheet {
    background: var(--dm-surface-color);
    border-color: var(--dm-border-color);
  }

  body.dark-mode .mobile-bottom-sheet-header {
    background: var(--dm-surface-color);
    border-bottom-color: var(--dm-border-color);
  }

  body.dark-mode #bottom-sheet-title {
    color: var(--dm-text-primary);
  }

  body.dark-mode #close-bottom-sheet,
  body.dark-mode .mobile-bottom-sheet-close {
    color: var(--dm-text-secondary);
  }

  body.dark-mode #close-bottom-sheet:hover,
  body.dark-mode .mobile-bottom-sheet-close:hover {
    background: var(--dm-background-light);
    color: var(--dm-text-primary);
  }

  body.dark-mode .bottom-sheet-tabs {
    border-bottom-color: var(--dm-border-color);
  }

  body.dark-mode .bottom-sheet-tab {
    background: var(--dm-background-light);
  }

  body.dark-mode .bottom-sheet-tab .tab-label {
    color: var(--dm-text-secondary);
  }

  body.dark-mode .bottom-sheet-tab .tab-count {
    background: var(--dm-border-color);
    color: var(--dm-text-secondary);
  }

  body.dark-mode .bottom-sheet-tab.active {
    background: var(--dm-primary-color);
  }

  body.dark-mode .bottom-sheet-tab.active .tab-label,
  body.dark-mode .bottom-sheet-tab.active .tab-count {
    color: white;
  }

  body.dark-mode .bottom-sheet-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.25);
  }

  body.dark-mode .bottom-sheet-scheduled-item,
  body.dark-mode .bottom-sheet-meeting-item,
  body.dark-mode .bottom-sheet-showing-item,
  body.dark-mode .bottom-sheet-item {
    background: var(--dm-background-light);
    border-color: var(--dm-border-color);
  }

  body.dark-mode .bottom-sheet-scheduled-item:active,
  body.dark-mode .bottom-sheet-meeting-item:active,
  body.dark-mode .bottom-sheet-showing-item:active,
  body.dark-mode .bottom-sheet-item:active {
    background: var(--dm-surface-color);
  }

  body.dark-mode .bottom-sheet-item-header {
    color: var(--dm-text-secondary);
  }

  body.dark-mode .bottom-sheet-item-time {
    color: var(--dm-text-secondary);
  }

  body.dark-mode .bottom-sheet-item-client {
    color: var(--dm-text-primary);
  }

  body.dark-mode .bottom-sheet-item-status {
    color: var(--dm-text-secondary);
  }

  body.dark-mode .bottom-sheet-item-status.task-type {
    background: rgba(156, 163, 175, 0.2);
    color: #9CA3AF;
  }

  body.dark-mode .bottom-sheet-item-status.followup-type {
    background: rgba(52, 211, 153, 0.2);
    color: #34D399;
  }

  body.dark-mode .bottom-sheet-item-status.meeting-type {
    background: rgba(232, 121, 249, 0.2);
    color: #E879F9;
  }

  body.dark-mode .bottom-sheet-empty {
    color: var(--dm-text-secondary);
  }

  body.dark-mode .mobile-bottom-sheet-content {
    background: var(--dm-surface-color);
  }

  /* Dark mode for bottom sheet item details */
  body.dark-mode .bottom-sheet-item-name {
    color: var(--dm-text-primary);
  }

  body.dark-mode .bottom-sheet-item-detail {
    color: var(--dm-text-secondary);
  }

  body.dark-mode .bottom-sheet-item-points {
    color: var(--dm-primary-color);
  }

  body.dark-mode .bottom-sheet-item-info {
    color: var(--dm-text-primary);
  }

  /* Dark mode Right column container on mobile */
  body.dark-mode .right-column-container {
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Dark mode leaderboard cards on mobile */
  body.dark-mode .right-column-container .leaderboard-container {
    background: linear-gradient(to bottom right, #1e3a5f, #1e40af);
    border-color: #3b82f6;
  }

  body.dark-mode .right-column-container .leaderboard-container h3 {
    color: #bfdbfe;
  }

  body.dark-mode .right-column-container .leaderboard-container .leaderboard-item {
    background: rgba(30, 58, 138, 0.4);
  }

  body.dark-mode .right-column-container .leaderboard-container .leaderboard-broker {
    color: #e0e7ff;
  }

  body.dark-mode .right-column-container .leaderboard-container .leaderboard-points {
    background: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
  }

  /* Dark mode quick stats cards */
  body.dark-mode .right-column-container #todays-meetings-container,
  body.dark-mode .right-column-container #todays-showings-container {
    background: linear-gradient(to bottom right, #164e63, #0e7490);
    border-color: #22d3d1;
  }

  body.dark-mode .right-column-container #todays-meetings-container h4,
  body.dark-mode .right-column-container #todays-showings-container h4 {
    color: #a7f3d0;
  }

  body.dark-mode .right-column-container .meetings-today-item,
  body.dark-mode .right-column-container .showings-today-item {
    background: rgba(20, 184, 166, 0.15);
  }

  body.dark-mode .right-column-container .meetings-today-item .time,
  body.dark-mode .right-column-container .showings-today-item .time {
    color: #5eead4;
  }

  body.dark-mode .right-column-container .meetings-today-item strong,
  body.dark-mode .right-column-container .showings-today-item strong {
    color: #ccfbf1;
  }

  body.dark-mode .right-column-container .meetings-today-item small,
  body.dark-mode .right-column-container .showings-today-item small {
    color: #99f6e4;
  }
}