/* iOS Home-Screen Web-App fixes */
html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 0;
  -webkit-text-size-adjust: 100%;
}

#app,
.app,
.content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app {
  min-height: calc(100dvh - env(safe-area-inset-top));
}

/* Nothing should create an accidental horizontal scroll area on small screens. */
.card,
.row,
.admin-user,
.inline-form,
.form-grid,
.toolbar,
.top,
.modal,
.content > * {
  min-width: 0;
  max-width: 100%;
}

img,
iframe,
input,
select,
textarea,
button {
  max-width: 100%;
  box-sizing: border-box;
}

/* iOS Safari can still zoom focused controls at borderline sizes; 17px gives
   it a little breathing room on the login form and all other inputs. */
input,
select,
textarea,
button {
  font-size: 16px !important;
}

input::placeholder,
textarea::placeholder {
  font-size: 16px;
}

@media (max-width: 700px) {
  /* Keep vertical spacing between content cards consistent throughout the app. */
  .content {
    gap: 20px !important;
  }

  .grid,
  .grade-layout {
    gap: 20px !important;
    row-gap: 20px !important;
  }

  .admin-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 0 !important;
  }

  .admin-section + .card,
  .card + .admin-section {
    margin-top: 0 !important;
  }

  /* Admin account rows must be allowed to wrap instead of being clipped on the right. */
  .admin-user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow: visible;
  }

  .admin-user > div:first-child {
    flex: 1 1 120px;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .admin-user .reset-form {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
  }

  .admin-user .reset-form input {
    width: 100%;
    min-width: 0;
  }

  .admin-user .reset-form .button,
  .admin-user > .button {
    min-width: 0;
    white-space: normal;
    flex: 0 0 auto;
  }

  .admin-user > .button.danger {
    margin-left: auto;
  }

  .inline-form,
  .toolbar,
  .form-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .inline-form > *,
  .toolbar > *,
  .form-actions > * {
    min-width: 0;
    max-width: 100%;
  }

  .card,
  .modal {
    overflow-wrap: anywhere;
  }

  /* Navigation: stable height and equal-width items so switching views can't
     resize the bar. Long labels intentionally use two lines. */
  .side {
    box-sizing: border-box !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 9px) !important;
    min-height: calc(76px + env(safe-area-inset-bottom) + 9px) !important;
    height: calc(76px + env(safe-area-inset-bottom) + 9px) !important;
  }

  .side .nav {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    flex: 0 0 56px !important;
    overflow: hidden !important;
  }

  .side .nav button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 5px 2px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .side .nav-icon {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
  }

  .side .nav-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 11px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    font-size: 10px !important;
  }

  .nav-mobile-break {
    display: inline !important;
  }

  .grades-empty-toolbar {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .grades-empty-toolbar .button {
    flex: 0 0 auto !important;
  }

  .content {
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }

  .class-file-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .class-file-form textarea,
  .class-file-form input[type='file'],
  .class-file-form select,
  .class-file-form button {
    width: 100%;
  }

  .file-row {
    align-items: flex-start;
  }

  .file-main {
    min-width: 0;
    flex: 1 1 180px;
  }

  .file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
  }

  .file-note {
    margin-top: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Prevent desktop-only break spans from affecting wider layouts. */
.nav-mobile-break {
  display: none;
}

/* Theme switch: animate the existing UI instead of rerendering it abruptly. */
html.theme-animating,
html.theme-animating body,
html.theme-animating .app,
html.theme-animating .side,
html.theme-animating .content,
html.theme-animating .top,
html.theme-animating .card,
html.theme-animating .row,
html.theme-animating .button,
html.theme-animating .icon-btn,
html.theme-animating .avatar,
html.theme-animating input,
html.theme-animating select,
html.theme-animating textarea,
html.theme-animating .tabs,
html.theme-animating .tab {
  transition:
    background-color 320ms ease,
    color 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-animating,
  html.theme-animating body,
  html.theme-animating .app,
  html.theme-animating .side,
  html.theme-animating .content,
  html.theme-animating .top,
  html.theme-animating .card,
  html.theme-animating .row,
  html.theme-animating .button,
  html.theme-animating .icon-btn,
  html.theme-animating .avatar,
  html.theme-animating input,
  html.theme-animating select,
  html.theme-animating textarea,
  html.theme-animating .tabs,
  html.theme-animating .tab {
    transition: none !important;
  }
}