/* Phone layout comes after the module styles so every page shares one menu rail. */
.mobile-storage-status,
.mobile-menu-backdrop,
.reservation-scroll-hint {
  display: none;
}

@media screen and (max-width: 900px), screen and (max-width: 1000px) and (hover: none) and (pointer: coarse) {
  html, body { min-width: 0; overflow-x: hidden; }
  html {
    scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px));
  }

  body.mobile-menu-active { overflow: hidden; }
  .app-shell { display: block; padding-bottom: 0; }

  .sidebar {
    position: fixed;
    inset: calc(10px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) auto max(10px, env(safe-area-inset-left, 0px));
    z-index: 1600;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 6px;
    border: 1px solid #c5d7e5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px #07223814;
    pointer-events: auto;
  }

  .mobile-menu-toggle,
  .app-shell.mobile-menu-open .mobile-menu-toggle {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: auto;
    height: 44px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #bdd3e4;
    border-radius: 10px;
    background: #f7fbff;
    color: #083c66;
    font-weight: 700;
    box-shadow: none;
  }
  .app-shell.mobile-menu-open .mobile-menu-toggle { background: #ffffff14; color: #fff; border-color: #a8cfee55; }

  .mobile-menu-toggle > span:not(.mobile-menu-toggle-icon) {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-size: 15px;
  }

  .mobile-menu-toggle-icon,
  .mobile-menu-toggle-icon::before,
  .mobile-menu-toggle-icon::after { display: block; width: 20px; height: 2px; border-radius: 999px; background: currentColor; }
  .mobile-menu-toggle-icon { position: relative; }
  .mobile-menu-toggle-icon::before, .mobile-menu-toggle-icon::after { content: ''; position: absolute; left: 0; }
  .mobile-menu-toggle-icon::before { top: -6px; }
  .mobile-menu-toggle-icon::after { top: 6px; }
  .app-shell.mobile-menu-open .mobile-menu-toggle-icon { background: transparent; }
  .app-shell.mobile-menu-open .mobile-menu-toggle-icon::before { top: 0; transform: rotate(45deg); }
  .app-shell.mobile-menu-open .mobile-menu-toggle-icon::after { top: 0; transform: rotate(-45deg); }

  .mobile-storage-status {
    display: block;
    margin: 0 8px 0 0;
    color: #526a7a;
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .mobile-storage-status.is-error { color: #a32132; font-weight: 700; }
  .mobile-storage-status.is-pending { color: #815900; }
  .mobile-storage-status.is-ok { color: #19724d; }
  .sidebar .brand, .sidebar #role-menu-section, .sidebar .user-block { display: none; }

  .app-shell.mobile-menu-open .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1599;
    background: #07223866;
  }

  .app-shell.mobile-menu-open .sidebar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: auto;
    max-width: 360px;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 10px;
    overflow: hidden;
    gap: 10px;
    border: 1px solid #a8cfee55;
    background: linear-gradient(180deg, #07467d, #042f59);
    box-shadow: 0 16px 40px #07223847;
  }

  .app-shell.mobile-menu-open .mobile-storage-status { color: #fff; }
  .app-shell.mobile-menu-open .sidebar #role-menu-section {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    min-height: 0;
    align-self: stretch;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .app-shell.mobile-menu-open .track-list { display: grid; grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; }
  .app-shell.mobile-menu-open .user-block {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    padding: 8px;
  }
  .sidebar .user-block .storage-status-label { display: none; }
  .sidebar .current-user-label { font-size: 12px; overflow-wrap: anywhere; }
  .sidebar .sidebar-logout-button { min-height: 44px; grid-row: auto; }
  .sidebar button { min-height: 44px; }

  .main-panel {
    min-width: 0;
    overflow-x: hidden;
    margin-left: 0;
    padding: calc(88px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .main-panel::after { display: none; }
  .topbar, .section-header { flex-direction: column; align-items: stretch; }
  .topbar-actions { width: 100%; }

  .main-panel > section { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .main-panel > section > * { min-width: 0; max-width: 100%; }
  .admin-programmes-page { padding-top: 0; }
  .reservations-page > .topbar { padding-left: 0; }
  .admin-users-tabs { flex-wrap: wrap; }
  .admin-users-list, .admin-users-table-wrap, .rights-matrix-wrap { min-width: 0; max-width: 100%; }
  .admin-users-table-wrap, .rights-matrix-wrap { overscroll-behavior-x: contain; }
  .roster-matrix-sticky-head { display: none; }
  .roster-matrix-wrap { overflow: auto; max-height: 70dvh; }
  .roster-matrix-sticky-head + .roster-matrix-wrap .roster-matrix-table thead { display: table-header-group; }
  .roster-matrix-table thead th { position: sticky; top: 0; z-index: 3; }
  .admin-users-controls { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .field-block { min-width: 0; }

  .lesson-observation-shell { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .lesson-observation-shell > *, .lesson-observation-toolbar > * { min-width: 0; max-width: 100%; }
  .lesson-observation-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-observation-meta-field, .lesson-observation-meta input { min-width: 0; max-width: 100%; }
  .lesson-observation-toolbar { flex-direction: column; align-items: stretch; }
  .lesson-observation-toolbar-actions { justify-content: flex-start; }
  .lesson-observation-privacy-pill { white-space: normal; }
  .lesson-observation-domain { padding: 12px 10px; }
  .lesson-observation-domain-head { grid-template-columns: 28px minmax(0, 1fr); }
  .lesson-observation-rating-head, .lesson-observation-note-head { display: none; }
  .lesson-observation-row { grid-template-columns: minmax(0, 1fr); margin-left: 0; gap: 8px; padding: 10px 0; }
  .lesson-observation-ratings { grid-template-columns: repeat(5, minmax(0, 44px)); gap: 5px; width: 100%; max-width: 240px; }
  .lesson-observation-rating, .lesson-observation-rating span { width: 44px; height: 44px; }
  .lesson-observation-note-toggle { width: 44px; height: 44px; }
  .lesson-observation-note-row { margin-left: 0; }

  .main-panel input:not([type='checkbox']):not([type='radio']),
  .main-panel select, .main-panel textarea,
  .login-card input { font-size: 16px; }
  .main-panel input:not([type='checkbox']):not([type='radio']),
  .main-panel select, .login-card input { min-height: 44px; }
  .main-panel button, .login-card button { min-height: 44px; }
  .main-panel :focus-visible, .sidebar :focus-visible { outline: 3px solid #1682c4; outline-offset: 3px; }

  /* Safe alignment keeps the start of a tall login form reachable above a keyboard. */
  .login-screen { align-items: safe center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
  .login-card { position: relative; z-index: 1; }
  .login-ornament { pointer-events: none; }

  .reservation-category, .reservation-week-controls > button,
  .reservation-sync button { min-height: 44px; }
  .reservation-week-controls > button:first-child,
  .reservation-week-controls > button:nth-child(3) { min-width: 44px; }
  .reservation-scroll-hint { display: block; margin: 0 0 8px; color: #526a7a; font-size: 13px; }
  .reservation-grid-scroll { overscroll-behavior: contain; }
  .reservation-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .reservation-dialog input, .reservation-dialog select, .reservation-dialog textarea { font-size: 16px; min-height: 44px; }
  .reservation-dialog button { min-height: 44px; }
}

@media screen and (max-width: 600px) {
  .lesson-observation-meta { grid-template-columns: minmax(0, 1fr); }
  .roster-matrix-table th:first-child, .roster-matrix-table td:first-child { width: 140px; min-width: 140px; overflow-wrap: anywhere; }
  #roster-controls, #roster-controls.roster-retakes-controls { grid-template-columns: minmax(0, 1fr); }
  #roster-controls.roster-retakes-controls .roster-period-options { flex-wrap: wrap; }
  .reservation-week-controls { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .reservation-week-controls > button:last-child { grid-column: 1 / -1; }
  .reservation-form-grid { grid-template-columns: minmax(0, 1fr); }
  .reservation-form-grid .wide { grid-column: auto; }
}

@media print {
  .mobile-storage-status, .mobile-menu-backdrop, .reservation-scroll-hint { display: none !important; }
}