/* 📱 Mobile view: up to 768px */
@media (max-width: 768px) {
  
  /* --- Mobile Sidebar Styles --- */
  
  /* Default state: collapsed (off-canvas) */
  .sidebar {
    position: fixed; /* Use fixed to overlay content */
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 100;
    width: 250px; /* Full width when open */
    transform: translateX(-100%);
    padding: 1rem;
    white-space: normal; /* Allow content to wrap */
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
  }

  /* Open state: toggled by JS adds .open class */
  .sidebar.open {
    transform: translateX(0);
  }
  
  /* Show the toggle button */
  #sidebarToggle {
    display: block;
  }
  
  /* Adjust content padding to make space for toggle */
  .content {
    padding-top: 1.1rem; 
  }
  
  /* --- End Mobile Sidebar --- */


  table.table {
    display: none !important;
  }

  #treatTable,
  #invTable {
    display: none !important;
  }

  .client-cards,
  .appt-cards,
  .treat-cards,
  .invoice-cards {
    display: grid;
    gap: 0.6rem;
  }

  .client-card,
  .appt-card,
  .treat-card,
  .invoice-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.8rem;
  }
}

/* 🖥️ Desktop view: 769px and above */
@media (min-width: 769px) {
  
  /* --- Desktop Sidebar Styles --- */
  
  /* Default state: sidebar is OPEN (from style.css) */
  .sidebar {
    position: sticky; /* Back to sticky */
    transform: none !important; /* Remove mobile transform */
    width: 250px;
    padding: 1rem;
    box-shadow: none;
    white-space: nowrap; /* Prevent wrapping */
  }
  
  /* Collapsed state: .open class is ADDED by JS */
  /* This logic is counter-intuitive, but works with the same JS toggle */
  .sidebar.open {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }

  /* Hide content when collapsed (desktop) */
  .sidebar.open .brand,
  .sidebar.open nav {
     visibility: hidden;
     opacity: 0;
     transition: visibility 0s 0.3s, opacity 0.3s linear;
  }
  
  /* Ensure content is visible when open (desktop default) */
  .sidebar:not(.open) .brand,
  .sidebar:not(.open) nav {
     visibility: visible;
     opacity: 1;
     transition: opacity 0.3s linear;
  }
  
  /* Hide mobile-only toggle */
  #sidebarToggle {
    display: none;
  }
  
  /* Remove mobile padding */
  .content {
    padding-top: 1rem;
  }
  
  /* --- End Desktop Sidebar --- */
  
  .client-cards,
  .appt-cards,
  .treat-cards,
  .today-card,
  .invoice-cards{
    display: none !important;
  }

  #treatTable,
  #invTable {
    display: table !important;
  }
}