/* Mobile styles (below 900px) */
@media (max-width: 900px) {
  .main-nav {
    margin-bottom: 1rem;
  }

  .main-nav .nav-header {
    width: 100%;
    padding: 0.5rem 0;
  }

  /* Show org name on mobile, hide app name */
  .main-nav .brand-desktop {
    display: none;
  }

  .main-nav .brand-mobile {
    display: inline;
  }

  /* Show "Change Organisation" on mobile, hide org name */
  .main-nav .org-desktop {
    display: none;
  }

  .main-nav .org-mobile {
    display: inline;
  }

  /* Show hamburger icon on mobile */
  .main-nav .nav-toggle-label {
    display: block;
  }

  /* Hide menu by default on mobile */
  .main-nav .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--uchu-yang);
    border: 1px solid var(--uchu-gray);
    border-radius: 4px;
    padding: 1rem 0;
    margin-top: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* Show menu when checkbox is checked */
  .main-nav .nav-toggle-checkbox:checked~.nav-menu {
    display: flex;
  }

  .main-nav .nav-links,
  .main-nav .nav-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .main-nav .nav-links {
    margin-left: 0;
    border-bottom: 1px solid var(--uchu-gray);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .main-nav .nav-links li,
  .main-nav .nav-actions li {
    width: 100%;
    padding: 0.5rem 0;
  }

  .main-nav .nav-links li a,
  .main-nav .nav-actions li a {
    display: block;
    padding: 0.5rem 1rem;
  }

  /* Show logout/settings text on mobile, hide icons */
  .main-nav .logout-text,
  .main-nav .settings-text {
    display: inline;
  }

  .main-nav .nav-actions form button i {
    display: none;
  }

  /* Reset button for mobile logout */
  .main-nav .nav-actions form button[type="submit"] {
    background: none !important;
    border: none !important;
    margin: 0 !important;
    text-align: left !important;
    color: var(--uchu-red) !important;
    cursor: pointer;
  }

  .main-nav .nav-actions form button[type="submit"]:hover {
    background: none;
    text-decoration: underline;
  }

  div.container-fluid,
  nav.container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  /* Schedule grid - maintain minimum column widths for scrolling */
  .schedule-grid {
    grid-template-columns: max-content repeat(14, minmax(100px, 1fr));
  }

  .schedule-slots {
    grid-template-columns: repeat(56, minmax(15px, 1fr));
  }

  /* Hide middle columns on list tables */
  .list-table th:nth-child(2),
  .list-table td:nth-child(2),
  .list-table th:nth-child(3),
  .list-table td:nth-child(3),
  .list-table th:nth-child(4),
  .list-table td:nth-child(4),
  .list-table th:nth-child(5),
  .list-table td:nth-child(5) {
    display: none;
  }

  .staff-form-layout {
    flex-direction: column;
    gap: 1rem;
  }

  /* Show settings in nav-links on mobile, hide cog button */
  .main-nav .settings-mobile {
    display: list-item;
  }

  .main-nav .settings-desktop {
    display: none;
  }

  /* Schedule nav - Today button above left buttons */
  .schedule-nav .btn-today {
    top: -1.75rem;
  }

  /* Tables - horizontal scroll */
  #staff-table,
  #students-table,
  #availability-section {
    overflow-x: auto;
  }

  /* Availability table - compact on mobile */
  .availability-table th,
  .availability-table td {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .availability-table input[type="time"] {
    width: 5.5rem;
    font-size: 0.875rem;
    padding: 0.1rem;
    background-image: none;
  }

  .availability-table .day-cell {
    font-size: 0;
  }

  .availability-table .day-cell::before {
    content: attr(data-short);
    font-size: 0.875rem;
  }

  /* Settings layout */
  .settings-layout {
    flex-direction: column;
    gap: 1rem;
  }

  .settings-menu {
    width: 100%;
  }

  .settings-menu nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .settings-menu nav li {
    margin-bottom: 0;
  }

  /* Availability visual grid - mobile */
  .availability-grid-visual {
    overflow-x: auto;
  }

  .avail-header {
    grid-template-columns: 3rem repeat(14, 4.5rem);
    min-width: calc(3rem + 56 * 1.125rem);
  }

  .avail-row {
    grid-template-columns: 3rem 1fr;
    min-width: calc(3rem + 56 * 1.125rem);
  }

  .avail-day-label {
    font-size: 0;
    padding: 0.25rem;
    justify-content: center;
    background-color: oklch(97% 0.002 286);
  }

  .avail-day-label::before {
    content: attr(data-short);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .avail-hour-label {
    font-size: 0.65rem;
    padding: 0.25rem 0;
  }

  .avail-slots {
    grid-template-columns: repeat(56, 1.125rem);
  }

  .avail-cell {
    min-height: 2rem;
  }
}