/* ============================================================================
   TABLET OPTIMIZATION (769px - 1024px)
   Comprehensive tablet support for Ma Nox Atlantik Admin Portal
   ============================================================================ */

/* ============================================================================
   TABLET NAVIGATION & SIDEBAR
   ============================================================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* Show Hamburger Menu on Tablets */
  .mobile-menu-toggle {
    display: flex !important;
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 1001 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    outline: none !important;
    border-radius: 12px !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  .mobile-menu-toggle svg {
    width: 24px !important;
    height: 24px !important;
    color: white !important;
  }

  .mobile-menu-toggle:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
    transform: translateY(-1px) !important;
  }

  .mobile-menu-toggle:active {
    transform: translateY(0) !important;
  }

  /* Show Mobile Overlay on Tablets */
  .mobile-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
  }

  .mobile-overlay.active {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* Hide Sidebar by Default on Tablets */
  body nav.sidebar,
  body .sidebar,
  nav.sidebar,
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    height: 100vh !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%) !important;
    will-change: transform !important;
  }

  /* Show Sidebar When Open - MAXIMUM SPECIFICITY */
  body nav.sidebar.mobile-open,
  body .sidebar.mobile-open,
  nav.sidebar.mobile-open,
  .sidebar.mobile-open {
    transform: translateX(0) !important;
    left: 0 !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Full Width Main Content on Tablets */
  body {
    padding-top: 0 !important;
    overflow-x: hidden !important;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Admin Container Full Width */
  .admin-container {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent body scroll when sidebar is open */
  body.sidebar-open {
    overflow: hidden !important;
  }

  /* ============================================================================
     SIDEBAR TEXT SIZE IMPROVEMENTS FOR TABLET
     ============================================================================ */

  /* Main navigation items - larger text for better readability */
  .nav-item {
    font-size: 1.05rem !important;  /* Up from default ~1rem */
    padding: 0.75rem 1.25rem !important;  /* More comfortable touch target */
    min-height: 44px !important;  /* Apple's recommended touch target */
  }

  /* User section - larger text */
  .sidebar-user .user-name {
    font-size: 1rem !important;  /* Up from 0.95rem */
  }

  .sidebar-user .user-role {
    font-size: 0.85rem !important;  /* Up from 0.75rem */
  }

  /* Submenu items - larger text */
  .nav-subitem {
    font-size: 0.95rem !important;  /* Up from 0.88rem */
    padding: 0.55rem 1rem !important;  /* More padding */
    min-height: 44px !important;
  }

  /* Nested submenu items - larger text */
  .nav-nested-subitem {
    font-size: 0.9rem !important;  /* Up from 0.85rem */
    padding: 0.5rem 0.85rem !important;  /* More padding */
    min-height: 40px !important;
  }

  /* Arrow indicators - slightly larger */
  .nav-arrow {
    font-size: 0.75rem !important;
  }

  /* All page sections full width */
  .page-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Modern content cards full width */
  .modern-content-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ============================================================================
     DASHBOARD PAGE - TABLET
     ============================================================================ */

  /* Dashboard Header */
  .modern-dashboard-header {
    flex-direction: column !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .header-left,
  .header-right {
    width: 100% !important;
  }

  /* Center the notification bell icon on tablet */
  .header-right {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Center notifications modal on tablet */
  #notificationsModal.modal-overlay {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #notificationsModal .modal-container {
    margin: 0 auto !important;
  }

  /* Stats Grid - 2 Columns */
  .modern-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .modern-stat-card {
    padding: 1.25rem !important;
  }

  /* Charts Section */
  .modern-charts-section {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Quick Actions - 2 Columns */
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     CALENDAR PAGE - TABLET
     ============================================================================ */

  /* Calendar Header Container */
  #calendar .modern-content-card > div[style*="flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Calendar Title Section */
  #calendar .modern-content-card > div[style*="flex"] > div:first-child {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  /* Calendar Controls - Filters Side by Side on Tablet */
  .calendar-controls {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* Individual Filter Groups - Equal Width Side by Side */
  .calendar-controls > div,
  .calendar-controls .filter-group {
    flex: 1 !important;
    min-width: 180px !important;
  }

  /* Filter Labels and Selects */
  .calendar-controls .filter-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.25rem !important;
  }

  .calendar-controls .filter-group label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
  }

  .calendar-controls .filter-group select {
    width: 100% !important;
    min-height: 40px !important;
  }

  /* Calendar Navigation - Improved Layout */
  .calendar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  /* Top Row: Navigation Controls and Month/Year - Centered */
  .nav-controls-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
  }

  .nav-controls {
    display: flex !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .nav-controls .nav-btn,
  .nav-controls .today-btn {
    min-width: 44px !important;
    height: 44px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  .month-year {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Bottom Row: View Toggles - Full Width with Better Spacing */
  .view-toggles {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
  }

  .view-toggles .view-btn {
    padding: 0.625rem !important;
    font-size: 0.875rem !important;
    min-height: 40px !important;
    white-space: nowrap !important;
    text-transform: capitalize !important;
  }

  .view-toggles .view-btn.active {
    font-weight: 600 !important;
  }

  /* Month/Week/Day Buttons */
  .calendar-header {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* ============================================================================
     BOOKINGS PAGE - TABLET
     ============================================================================ */

  /* Bookings Filter Grid - Ultra Compact Layout */
  #bookings .modern-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Row 1: Search (2 cols) | Date From (1 col) | Date To (1 col) */

  /* Search - Span 2 Columns */
  #bookings .modern-filter-grid > div:nth-child(1) {
    grid-column: span 2 !important;
  }

  /* Status - Second Row, First Column */
  #bookings .modern-filter-grid > div:nth-child(2) {
    grid-column: 1 / span 1 !important;
    grid-row: 2 !important;
  }

  /* Date From - First Row, Third Column */
  #bookings .modern-filter-grid > div:nth-child(3) {
    grid-column: 3 / span 1 !important;
    grid-row: 1 !important;
  }

  /* Date To - First Row, Fourth Column */
  #bookings .modern-filter-grid > div:nth-child(4) {
    grid-column: 4 / span 1 !important;
    grid-row: 1 !important;
  }

  /* Buttons Container - Second Row, Span Remaining 3 Columns */
  #bookings .modern-filter-grid > div:nth-child(5) {
    grid-column: 2 / span 3 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    align-items: end !important;
  }

  /* Form Groups - Consistent Styling */
  #bookings .modern-filter-grid .form-group {
    margin-bottom: 0 !important;
  }

  #bookings .modern-filter-grid .form-group label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
  }

  /* Input and Select Fields */
  #bookings .modern-filter-grid select,
  #bookings .modern-filter-grid input[type="date"],
  #bookings .modern-filter-grid .search-input {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Search Input Container */
  #bookings .modern-filter-grid .search-bar {
    margin: 0 !important;
  }

  /* Buttons - Side by Side */
  #bookings .modern-filter-grid button {
    width: 100% !important;
    padding: 0.625rem 0.5rem !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Hide button icons on tablet for more space */
  #bookings .modern-filter-grid button svg {
    display: none !important;
  }

  /* Bookings Table - Compact Action Buttons */
  #bookings table td:last-child,
  #bookings table th:last-child {
    width: auto !important;
    min-width: 180px !important;
  }

  #bookings table td:last-child {
    white-space: nowrap !important;
  }

  /* Action Buttons Container - Force Horizontal Layout */
  #bookings .action-buttons-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.25rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  #bookings table td:last-child button,
  #bookings table td:last-child a {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0.5rem !important;
    min-height: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
  }

  /* Hide button text, keep only icons */
  #bookings .action-buttons-group button svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  #bookings .action-buttons-group button {
    font-size: 0 !important;
  }

  #bookings .action-buttons-group button svg {
    font-size: 18px !important;
  }

  /* Booking Details Modal - Enhanced for Tablet */
  .booking-modal {
    width: 90% !important;
    max-width: 680px !important;
    margin: 2rem auto !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  .booking-modal .modal-header {
    padding: 1.25rem !important;
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 10 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .booking-modal .modal-header h2 {
    font-size: 1.25rem !important;
  }

  .booking-modal .modal-body {
    padding: 1.25rem !important;
  }

  /* Booking Details Grid Layout */
  .booking-modal .modal-body > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Full width sections */
  .booking-modal .modal-body > div:has(> div:only-child),
  .booking-modal .modal-body > div > div:only-child {
    grid-column: 1 / -1 !important;
  }

  /* Field labels and values */
  .booking-modal .modal-body label,
  .booking-modal .modal-body > div > div > div:first-child {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    margin-bottom: 0.25rem !important;
  }

  .booking-modal .modal-body > div > div > div:last-child,
  .booking-modal .modal-body strong {
    font-size: 0.95rem !important;
    color: #1f2937 !important;
  }

  /* Assign Provider Section */
  .booking-modal .modal-body select,
  .booking-modal .modal-body button {
    font-size: 0.875rem !important;
    padding: 0.625rem 1rem !important;
    min-height: 42px !important;
  }

  /* Modal footer/buttons */
  .booking-modal .modal-footer {
    padding: 1rem 1.25rem !important;
    border-top: 1px solid #e5e7eb !important;
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
  }

  .booking-modal .modal-footer button {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
  }

  /* ============================================================================
     CUSTOMERS PAGE - TABLET
     ============================================================================ */

  /* Customer Cards */
  .customer-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Customer Modal */
  .customer-modal {
    width: 95% !important;
    max-width: 650px !important;
  }

  /* ============================================================================
     SERVICES/TOURS PAGE - TABLET
     ============================================================================ */

  /* Tours Filter Grid */
  #tours .modern-filter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  #tours .modern-filter-grid > div:nth-child(1) {
    grid-column: 1 / -1 !important; /* Search full width */
  }

  #tours .modern-filter-grid > div:nth-child(2) {
    grid-column: 1 !important; /* Category */
  }

  #tours .modern-filter-grid > div:nth-child(3) {
    grid-column: 2 !important; /* Status */
  }

  #tours .modern-filter-grid > div:nth-child(4) {
    grid-column: 1 / -1 !important; /* Buttons full width */
  }

  /* Service Cards */
  .service-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     INVOICES PAGE - TABLET
     ============================================================================ */

  /* Invoice Stats - 2 Columns */
  #invoices > div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Invoice Filter Grid */
  #invoices .modern-filter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  #invoices .modern-filter-grid > div:nth-child(3) {
    grid-column: 1 / -1 !important; /* Search full width */
  }

  #invoices .modern-filter-grid > div:nth-child(4) {
    grid-column: 1 / -1 !important; /* Buttons full width */
  }

  /* ============================================================================
     REPORTS PAGE - TABLET
     ============================================================================ */

  /* Reports Stats Grid - 2 Columns */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Reports Filter Grid - Updated for 5 elements */
  #reports .modern-filter-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }

  #reports .modern-filter-grid > div:nth-child(1) {
    grid-column: 1 !important; /* Report Period */
    grid-row: 1 !important;
  }

  #reports .modern-filter-grid > div:nth-child(2) {
    grid-column: 2 !important; /* Date Based On */
    grid-row: 1 !important;
  }

  #reports .modern-filter-grid > div:nth-child(3) {
    grid-column: 3 !important; /* Date From */
    grid-row: 1 !important;
  }

  #reports .modern-filter-grid > div:nth-child(4) {
    grid-column: 1 !important; /* Date To */
    grid-row: 2 !important;
  }

  #reports .modern-filter-grid > div:nth-child(5) {
    grid-column: 2 / -1 !important; /* Buttons - span 2 columns */
    grid-row: 2 !important;
    display: flex !important;
    gap: 0.75rem !important;
    align-items: end !important;
  }

  #reports .modern-filter-grid > div:nth-child(5) button {
    flex: 1 !important;
  }

  /* ============================================================================
     EMAIL LOGS PAGE - TABLET
     ============================================================================ */

  /* Email Logs Filter Grid */
  #email-logs .modern-filter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  #email-logs .modern-filter-grid > div:nth-child(1) {
    grid-column: 1 !important; /* Status */
  }

  #email-logs .modern-filter-grid > div:nth-child(2) {
    grid-column: 2 !important; /* Template */
  }

  #email-logs .modern-filter-grid > div:nth-child(3) {
    grid-column: 1 / -1 !important; /* Search full width */
  }

  #email-logs .modern-filter-grid > div:nth-child(4) {
    grid-column: 1 / -1 !important; /* Date Range full width */
  }

  #email-logs .modern-filter-grid > div:nth-child(5) {
    grid-column: 1 / -1 !important; /* Buttons */
    display: flex !important;
    gap: 0.75rem !important;
  }

  /* ============================================================================
     QR SCANNER PAGE - TABLET
     ============================================================================ */

  /* QR Scanner Layout - Side by Side */
  .qr-scanner-layout {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  /* Scanner Card */
  .qr-scanner-card {
    padding: 1.5rem !important;
  }

  /* Stats Cards - 2x2 Grid */
  #stats-cards-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     USER MANAGEMENT PAGE - TABLET
     ============================================================================ */

  /* MFA Section */
  #mfaDisabledState > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* User Cards */
  .user-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     SETTINGS PAGES - TABLET
     ============================================================================ */

  /* Settings Grid */
  .settings-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Settings Cards */
  .settings-card {
    padding: 1.25rem !important;
  }

  /* Form Grids */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Two Column Forms */
  .form-grid-2col {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     TABLES - TABLET OPTIMIZATION
     ============================================================================ */

  /* Horizontal Scroll for Tables */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .data-table {
    min-width: 800px !important;
    font-size: 0.875rem !important;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 0.875rem !important;
    white-space: nowrap !important;
  }

  /* ============================================================================
     MODALS - TABLET
     ============================================================================ */

  /* General Modal Sizing and Positioning */
  /* DO NOT touch modal-overlay display property - let JavaScript control it */

  .modal-overlay {
    backdrop-filter: blur(3px) !important;
  }

  /* Center modal using absolute positioning instead of flexbox */
  .modal-overlay .modal {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 700px !important;
    max-height: 90vh !important;
    margin: 0 !important;
  }

  .modal-overlay .modal-content {
    padding: 0 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e5e7eb !important;
  }

  .modal-overlay .modal-header {
    padding: 1.25rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 10 !important;
  }

  .modal-overlay .modal-body {
    padding: 1.25rem !important;
    max-height: calc(90vh - 140px) !important;
    overflow-y: auto !important;
  }

  .modal-overlay .modal-footer {
    padding: 1.25rem !important;
    border-top: 1px solid #e5e7eb !important;
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
  }

  /* ============================================================================
     CARDS & CONTENT BLOCKS - TABLET
     ============================================================================ */

  /* Content Cards */
  .modern-content-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }

  .card-header {
    padding: 1rem !important;
  }

  /* Stat Cards */
  .stat-card {
    padding: 1.25rem !important;
  }

  .stat-icon {
    width: 52px !important;
    height: 52px !important;
  }

  /* ============================================================================
     BUTTONS & FORMS - TABLET
     ============================================================================ */

  /* Button Sizing */
  .btn {
    min-height: 44px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9375rem !important;
  }

  .btn-sm {
    min-height: 36px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .btn-lg {
    min-height: 52px !important;
    padding: 1rem 1.75rem !important;
    font-size: 1rem !important;
  }

  /* Form Controls */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
  }

  /* Form Labels */
  label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* ============================================================================
     TYPOGRAPHY - TABLET
     ============================================================================ */

  /* Page Titles */
  .page-title,
  .modern-page-title {
    font-size: 1.75rem !important;
  }

  /* Section Titles */
  .modern-section-title,
  .section-title {
    font-size: 1.25rem !important;
  }

  /* Card Titles */
  .card-title {
    font-size: 1.125rem !important;
  }

  /* Subtitles */
  .card-subtitle,
  .modern-page-subtitle {
    font-size: 0.9375rem !important;
  }

  /* ============================================================================
     SPACING & LAYOUT - TABLET
     ============================================================================ */

  /* Page Sections */
  .page-section {
    padding: 0 !important;
  }

  /* Grid Gaps */
  .u-gap-1 {
    gap: 0.75rem !important;
  }

  .u-gap-2 {
    gap: 1rem !important;
  }

  .u-gap-3 {
    gap: 1.25rem !important;
  }

  /* Margin Bottom */
  .u-mb-1 {
    margin-bottom: 0.75rem !important;
  }

  .u-mb-2 {
    margin-bottom: 1rem !important;
  }

  .u-mb-3 {
    margin-bottom: 1.25rem !important;
  }

  .u-mb-4 {
    margin-bottom: 1.5rem !important;
  }

  /* ============================================================================
     PAGINATION - TABLET
     ============================================================================ */

  .pagination-controls {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }

  .pagination-btn {
    min-height: 44px !important;
    padding: 0.75rem 1.25rem !important;
  }

  /* ============================================================================
     CHARTS & GRAPHS - TABLET
     ============================================================================ */

  .chart-container {
    height: 300px !important;
  }

  .chart-filters {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* ============================================================================
     SPECIFIC PAGE ADJUSTMENTS
     ============================================================================ */

  /* Booking Calendar - Tablet View */
  .calendar-wrapper {
    padding: 0 !important;
  }

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

  /* Service Categories */
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Pickup Locations */
  .locations-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     SCHEDULE NEW REPORT - MODAL - TABLET
     ============================================================================ */

  /* Schedule New Report Modal - 2-column grid for specific fields */
  #newReportModal .form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* Frequency/Time/Timezone row - preserve inline grid (quarter | quarter | half) */
  #newReportModal .form-grid > div[style*="grid-template-columns: 1fr 1fr 2fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 2fr !important;
    gap: 1rem !important;
  }

  /* Modal footer - Add padding for button spacing */
  #newReportModal .modal-footer {
    padding: 1.25rem 1.5rem !important;
  }

  /* ============================================================================
     EMAIL LOGS - FILTERS - TABLET
     ============================================================================ */

  /* Email Logs - Reorganize filters for tablet */
  #email-logs .modern-filter-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* First row: Filter by Status, Filter by Template, Search Email */
  #email-logs .modern-filter-grid .form-group:nth-child(1),
  #email-logs .modern-filter-grid .form-group:nth-child(2),
  #email-logs .modern-filter-grid .form-group:nth-child(3) {
    grid-column: auto !important;
  }

  /* Second row: Date Range spans 2 columns */
  #email-logs .modern-filter-grid .form-group:nth-child(4) {
    grid-column: 1 / 3 !important;
  }

  /* Second row: Buttons span 1 column */
  #email-logs .modern-filter-grid .form-group:nth-child(5) {
    grid-column: 3 / 4 !important;
  }

  /* Mass Mailing */
  .mailing-grid {
    grid-template-columns: 1fr !important;
  }

  /* Support Tickets */
  .tickets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Knowledge Base */
  .kb-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Gallery Management */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     WEBSITE PAGES - TABLET OPTIMIZATIONS
     ============================================================================ */

  /* Reviews Management - Filters in one row */
  #reviews-management .modern-filter-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    gap: 1rem !important;
  }

  #reviews-management .modern-filter-grid .form-group:nth-child(1),
  #reviews-management .modern-filter-grid .form-group:nth-child(2),
  #reviews-management .modern-filter-grid .form-group:nth-child(3) {
    grid-column: auto !important;
  }

  #reviews-management .modern-filter-grid .form-group:nth-child(4) {
    grid-column: auto !important;
    display: flex !important;
    gap: 0.75rem !important;
  }

  /* Contact Submissions - Optimize filters */
  #contact-submissions > div:first-of-type > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 1rem !important;
    align-items: end !important;
  }

  #contact-submissions > div:first-of-type > div:last-child > div:first-child {
    grid-column: 1 / 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  #contact-submissions > div:first-of-type > div:last-child > div:last-child {
    grid-column: 3 / 4 !important;
  }

  /* Website Settings - Tabs responsive */
  #website-settings .tabs-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  #website-settings .tab-button {
    flex: 0 1 auto !important;
    min-width: fit-content !important;
  }

  /* Website Settings - Site Info Tab - Compact layout */
  #site-info-tab .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* Website Settings - Branding Tab - More compact color pickers */
  #branding-tab .form-grid:first-of-type {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }

  /* Website Settings - Branding Tab - Logo and Hero side by side */
  #branding-tab > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  /* Website Settings - Content Tab - Compact form fields */
  #content-tab .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Website Settings - Contact Tab - Two columns */
  #contact-tab .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* Reduce form-group margins in website settings */
  #website-settings .form-group {
    margin-bottom: 1rem !important;
  }

  /* Reduce section spacing in website settings */
  #website-settings .modern-section-title {
    margin-bottom: 1rem !important;
  }

  /* ============================================================================
     USER MODAL - TABLET OPTIMIZATIONS
     ============================================================================ */

  /* User Modal - Service Provider Fields - Compact layout */
  #providerFieldsSection .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* ============================================================================
     SCHEDULES MODAL - TABLET OPTIMIZATIONS
     ============================================================================ */

  /* Schedules Modal - Reorganize top section */
  #customerModal .filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* Schedules Modal - Action buttons in one row */
  #customerModal .filters > div:first-child {
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* Schedules Modal - View toggle buttons in one row */
  #customerModal .filters > div:last-child {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
    width: auto !important;
  }

  /* Schedules Modal - Calendar navigation - horizontal layout */
  .schedule-calendar .calendar-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    padding: 0.75rem 1rem !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
  }

  .schedule-calendar .calendar-nav h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    flex: 0 0 auto !important;
  }

  .schedule-calendar .calendar-nav button {
    padding: 0.5rem 1rem !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Edit Service Modal - Service Details Tab - Compact 2-column layout */

  /* Override all form-grids to be 2-column layout */
  #tourTabDetails .form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Service Name - spans both columns */
  #tourTabDetails > .form-grid:nth-of-type(1) > .form-group:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  /* Category - spans both columns */
  #tourTabDetails > .form-grid:nth-of-type(1) > .form-group:nth-child(2) {
    grid-column: 1 / -1 !important;
  }

  /* Duration and Location - side by side */
  #tourTabDetails > .form-grid:nth-of-type(2) > .form-group:nth-child(1),
  #tourTabDetails > .form-grid:nth-of-type(2) > .form-group:nth-child(2) {
    grid-column: auto !important;
  }

  /* Adult Price and Child Price - side by side */
  #tourTabDetails > .form-grid:nth-of-type(3) > .form-group:nth-child(1),
  #tourTabDetails > .form-grid:nth-of-type(3) > .form-group:nth-child(2) {
    grid-column: auto !important;
  }

  /* Senior Price - spans both columns */
  #tourTabDetails > .form-grid:nth-of-type(3) > .form-group:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  /* Min and Max Participants - side by side */
  #tourTabDetails > .form-grid:nth-of-type(4) > .form-group:nth-child(1),
  #tourTabDetails > .form-grid:nth-of-type(4) > .form-group:nth-child(2) {
    grid-column: auto !important;
  }

  /* Difficulty and Status - side by side */
  #tourTabDetails > .form-grid:nth-of-type(4) > .form-group:nth-child(3),
  #tourTabDetails > .form-grid:nth-of-type(4) > .form-group:nth-child(4) {
    grid-column: auto !important;
  }

  /* Remove internal padding from form groups */
  #tourTabDetails .form-group {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Reduce label margins */
  #tourTabDetails .form-group label {
    margin-bottom: 0.375rem !important;
  }

  /* Description field - full width */
  #tourTabDetails > .form-group:last-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ============================================================================
     TOUCH IMPROVEMENTS
     ============================================================================ */

  /* Better Touch Targets */
  a,
  button,
  .btn,
  .clickable {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
  }

  /* Smooth Transitions */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  button:active,
  .btn:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }

  /* ============================================================================
     SAFE AREA ADJUSTMENTS (iPad with notch)
     ============================================================================ */

  .main-content {
    padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
  }

  .sidebar.mobile-open {
    padding-left: env(safe-area-inset-left) !important;
  }

  /* ============================================================================
     QR SCANNER PAGE - TABLET
     ============================================================================ */

  /* Stats Cards - Single Row of 4 Cards */
  #qr-scanner #stats-cards-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }

  /* Make stat cards more compact for 4-column layout */
  #qr-scanner .stat-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  /* Icon circles - smaller */
  #qr-scanner .stat-card > div > div:first-child {
    width: 52px !important;
    height: 52px !important;
  }

  #qr-scanner .stat-card > div > div:first-child svg {
    width: 26px !important;
    height: 26px !important;
  }

  /* Stat numbers - smaller */
  #qr-scanner .stat-card > div > div:last-child > div:first-child {
    font-size: 28px !important;
  }

  /* Stat labels - smaller */
  #qr-scanner .stat-card > div > div:last-child > div:last-child {
    font-size: 11px !important;
  }

  /* Decorative circles - smaller */
  #qr-scanner .stat-card > div:first-child,
  #qr-scanner .stat-card > div:nth-child(2) {
    width: 90px !important;
    height: 90px !important;
  }

  /* ============================================================================
     EMAIL NOTIFICATIONS - TABLET
     ============================================================================ */

  /* Email Configuration Grid - 2 Columns Side by Side */
  #email-notifications .email-config-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Config Group - Each section */
  #email-notifications .config-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Config Group Title */
  #email-notifications .config-group h3 {
    font-size: 1rem !important;
    margin: 0 0 0.5rem 0 !important;
  }

  /* Form Groups - Full width within each config group */
  #email-notifications .config-group .form-group {
    margin-bottom: 0.75rem !important;
  }

  /* Form Row - Port and Security side-by-side */
  #email-notifications .config-group .form-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Input Fields */
  #email-notifications .form-group input,
  #email-notifications .form-group select {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Labels */
  #email-notifications .form-group label {
    display: flex !important;
    align-items: center !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Small text under SMTP config */
  #email-notifications .config-group small {
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
  }

  /* ============================================================================
     MASS MAILING PAGE - TABLET
     ============================================================================ */

  /* Statistics Cards - 4 Cards Per Row */
  #mass-mailing .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }

  /* Make stat cards more compact for 4-column layout */
  #mass-mailing .stat-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }

  /* Stat icons - smaller */
  #mass-mailing .stat-icon {
    width: 52px !important;
    height: 52px !important;
  }

  #mass-mailing .stat-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Stat values - smaller */
  #mass-mailing .stat-info h3 {
    font-size: 1.75rem !important;
  }

  /* Stat labels - smaller */
  #mass-mailing .stat-info p {
    font-size: 0.8rem !important;
  }

  /* ============================================================================
     PICKUP LOCATIONS - MANAGE SERVICES MODAL - TABLET
     ============================================================================ */

  /* Manage Pickup Services Modal - Compact Layout */
  #managePickupServicesModal .modal-content {
    max-height: 80vh !important;
    height: fit-content !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Modal header - Compact */
  #managePickupServicesModal .modal-header {
    flex-shrink: 0 !important;
    padding: 1.25rem !important;
  }

  /* Services checkbox list - Auto height with scrolling if needed */
  #managePickupServicesModal #servicesCheckboxList {
    max-height: 50vh !important;
    min-height: 60px !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Modal body - Compact and flexible */
  #managePickupServicesModal .modal-body {
    padding: 1.25rem !important;
    flex: 0 1 auto !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Description text - Compact */
  #managePickupServicesModal .modal-body > p {
    margin-bottom: 1rem !important;
    flex-shrink: 0 !important;
  }

  /* Buttons container - Compact spacing */
  #managePickupServicesModal .modal-body > div:last-child {
    margin-top: 1rem !important;
    padding-top: 0.75rem !important;
    flex-shrink: 0 !important;
  }

  /* ============================================================================
     PICKUP LOCATIONS - EDIT/ADD LOCATION MODAL - TABLET
     ============================================================================ */

  /* Edit/Add Pickup Location Modal - Compact Layout */
  #pickupLocationModal .modal-content {
    max-height: 85vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Modal header - Compact */
  #pickupLocationModal .modal-header {
    flex-shrink: 0 !important;
    padding: 1.25rem !important;
  }

  /* Tour checkbox list - Auto height with scrolling if needed */
  #pickupLocationModal #pickupTourCheckboxList {
    max-height: 35vh !important;
    min-height: 60px !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Modal body - Compact and flexible with scroll */
  #pickupLocationModal .modal-body {
    padding: 1.25rem !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Form - Flexible */
  #pickupLocationModal #pickupLocationForm {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Form groups - Compact spacing */
  #pickupLocationModal .form-group {
    margin-bottom: 0.75rem !important;
  }

  /* Buttons container - Fixed at bottom, always visible */
  #pickupLocationModal .modal-body form > div:last-child {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    flex-shrink: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    background: white !important;
  }

  /* ============================================================================
     PRICING RULES - MODAL - TABLET
     ============================================================================ */

  /* Pricing Rule Modal Wrapper - Constrain height */
  #pricingRuleModal {
    height: auto !important;
    max-height: 90vh !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* Pricing Rule Modal Backdrop */
  #pricingRuleModal::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: -1 !important;
  }

  /* Pricing Rule Modal - Compact Layout */
  #pricingRuleModal .modal-content {
    max-height: 90vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e5e7eb !important;
  }

  /* Modal header - Compact */
  #pricingRuleModal .modal-header {
    flex-shrink: 0 !important;
    padding: 1rem 1.25rem !important;
  }

  /* Tours checkbox list - Smaller for better fit */
  #pricingRuleModal #pricingRuleToursList {
    max-height: 25vh !important;
    min-height: 60px !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Modal body - Scrollable with proper flex */
  #pricingRuleModal .modal-body {
    padding: 1rem 1.25rem !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Form - Flexible */
  #pricingRuleModal #pricingRuleForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  /* Form groups - Compact spacing */
  #pricingRuleModal .form-group {
    margin-bottom: 0.75rem !important;
  }

  /* Reduce spacing for conditional field containers */
  #pricingRuleModal #groupSizeFields,
  #pricingRuleModal #earlyBirdFields,
  #pricingRuleModal #lastMinuteFields,
  #pricingRuleModal #seasonalFields {
    margin-bottom: 0.5rem !important;
  }

  /* Buttons container - Sticky at bottom */
  #pricingRuleModal .modal-body form > div:last-child {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    flex-shrink: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    background: white !important;
    position: sticky !important;
    bottom: 0 !important;
  }

  /* ============================================================================
     TOURS PAGE - TABLET
     ============================================================================ */

  /* Tours Filter Grid - Filters side by side, buttons below */
  #tours .modern-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Search - First column */
  #tours .modern-filter-grid > div:nth-child(1) {
    grid-column: 1 !important;
  }

  /* Category - Second column */
  #tours .modern-filter-grid > div:nth-child(2) {
    grid-column: 2 !important;
  }

  /* Status - Third column */
  #tours .modern-filter-grid > div:nth-child(3) {
    grid-column: 3 !important;
  }

  /* Buttons Container - Full width, second row */
  #tours .modern-filter-grid > div:nth-child(4) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Form Groups */
  #tours .modern-filter-grid .form-group {
    margin-bottom: 0 !important;
  }

  #tours .modern-filter-grid .form-group label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
  }

  /* Select and Input Fields */
  #tours .modern-filter-grid select,
  #tours .modern-filter-grid .search-input {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Search Bar */
  #tours .modern-filter-grid .search-bar {
    margin: 0 !important;
  }

  /* Buttons - Equal Width */
  #tours .modern-filter-grid button {
    width: 100% !important;
    padding: 0.625rem 0.5rem !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Hide button icons on tablet for more space */
  #tours .modern-filter-grid button svg {
    display: none !important;
  }

  /* ============================================================================
     INVOICES PAGE - TABLET
     ============================================================================ */

  /* Invoices Filter Grid - Filters side by side, buttons below */
  #invoices .modern-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Status - First column */
  #invoices .modern-filter-grid > div:nth-child(1) {
    grid-column: 1 !important;
  }

  /* Payment Status - Second column */
  #invoices .modern-filter-grid > div:nth-child(2) {
    grid-column: 2 !important;
  }

  /* Search - Third column */
  #invoices .modern-filter-grid > div:nth-child(3) {
    grid-column: 3 !important;
  }

  /* Buttons Container - Full width, second row */
  #invoices .modern-filter-grid > div:nth-child(4) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Form Groups */
  #invoices .modern-filter-grid .form-group {
    margin-bottom: 0 !important;
  }

  #invoices .modern-filter-grid .form-group label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
  }

  /* Select and Input Fields */
  #invoices .modern-filter-grid select,
  #invoices .modern-filter-grid input[type="text"] {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Buttons - Equal Width */
  #invoices .modern-filter-grid button {
    width: 100% !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-height: 40px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Statistics Cards - Single Row of 4 Cards */
  #invoices > div:nth-child(2) {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }

  /* Make stat cards more compact for 4-column layout */
  #invoices > div:nth-child(2) > div {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }

  /* Icon circles - smaller */
  #invoices > div:nth-child(2) > div > div > div:first-child {
    width: 52px !important;
    height: 52px !important;
  }

  #invoices > div:nth-child(2) > div > div > div:first-child svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Stat values - smaller */
  #invoices > div:nth-child(2) > div > div > div:last-child > div:first-child {
    font-size: 1.75rem !important;
  }

  /* Stat labels - smaller */
  #invoices > div:nth-child(2) > div > div > div:last-child > div:last-child {
    font-size: 0.8rem !important;
  }

  /* ============================================================================
     REPORTS PAGE - TABLET
     ============================================================================ */

  /* Reports Filter Grid - 3 columns layout */
  #reports .modern-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Report Period - First row, first column */
  #reports .modern-filter-grid > div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Date Based On - First row, second column */
  #reports .modern-filter-grid > div:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* Date From - First row, third column */
  #reports .modern-filter-grid > div:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  /* Date To - Second row, first column */
  #reports .modern-filter-grid > div:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* Buttons Container - Second row, spanning columns 2-3 */
  #reports .modern-filter-grid > div:nth-child(5) {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    align-items: end !important;
  }

  /* Form Groups */
  #reports .modern-filter-grid .form-group {
    margin-bottom: 0 !important;
  }

  #reports .modern-filter-grid .form-group label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
  }

  /* Select and Input Fields */
  #reports .modern-filter-grid select,
  #reports .modern-filter-grid input[type="date"] {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Buttons - Equal Width */
  #reports .modern-filter-grid button {
    width: 100% !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-height: 40px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Statistics Cards - 4 Cards Per Row */
  #reports .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }

  /* Make stat cards more compact for 4-column layout */
  #reports .stat-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }

  /* Stat icons - smaller */
  #reports .stat-icon {
    width: 52px !important;
    height: 52px !important;
  }

  #reports .stat-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Stat values - smaller */
  #reports .stat-info h3 {
    font-size: 1.75rem !important;
  }

  /* Stat labels - smaller */
  #reports .stat-info p {
    font-size: 0.8rem !important;
  }

  /* ============================================================================
     GENERAL SETTINGS PAGE - TABLET
     ============================================================================ */

  /* Business Information - 2 Column Grid */
  #general-settings .content-section .form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Form Groups */
  #general-settings .form-group {
    margin-bottom: 0 !important;
  }

  /* Input Fields */
  #general-settings .form-group input,
  #general-settings .form-group select,
  #general-settings .form-group textarea {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Labels */
  #general-settings .form-group label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Logo Upload Container - Full Width */
  #general-settings .form-group.full-width {
    grid-column: 1 / -1 !important;
  }

  /* ============================================================================
     USER MODAL - TABLET
     ============================================================================ */

  /* User Modal - First Name and Last Name side-by-side */
  #userModal .modal-body form > .form-grid:nth-of-type(1) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Email and Role side-by-side */
  #userModal .modal-body form > .form-grid:nth-of-type(2) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }

  /* Checkboxes side-by-side - DO NOT break layout */
  #userModal .modal-body form > .form-grid:nth-of-type(3) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }

  /* Keep checkbox styling intact */
  #userModal .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  #userModal .form-check input[type="checkbox"] {
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
  }

  #userModal .form-check label {
    margin-bottom: 0 !important;
    cursor: pointer !important;
  }

  /* Input Fields */
  #userModal .form-group input:not([type="checkbox"]),
  #userModal .form-group select {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Labels (not checkbox labels) */
  #userModal .form-group label:not(.form-check label) {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
  }

  /* Password Section - Keep vertical */
  #userModal #passwordSection {
    margin-top: 1rem !important;
  }

  /* ============================================================================
     USER MANAGEMENT PAGE - TABLET
     ============================================================================ */

  /* MFA Disabled State - Horizontal Layout */
  #mfaDisabledState > div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 2rem !important;
    align-items: center !important;
  }

  /* MFA Description - Left side */
  #mfaDisabledState > div > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Enable MFA Button - Right side, compact */
  #mfaDisabledState > div > button {
    white-space: nowrap !important;
    padding: 0.75rem 1.5rem !important;
    min-height: 44px !important;
  }

}

/* ============================================================================
   END TABLET OPTIMIZATION
   ============================================================================ */