/* Final mobile consistency layer. Desktop styles are intentionally untouched. */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Unified entry screens: student, teacher, curator, administration and main admin. */
  body.auth-page {
    min-height: 100svh !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: center !important;
    padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  }

  body.auth-page > .container,
  body.auth-page > .teacher-login-container,
  body.auth-page > .curator-login-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding: 26px 22px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(218,224,233,.95) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 34px rgba(31,46,75,.10) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body.auth-page h1 {
    margin: 0 0 18px !important;
    font-size: clamp(23px, 7vw, 28px) !important;
    line-height: 1.08 !important;
    color: #273449 !important;
    text-align: center !important;
  }

  body.auth-page form { width: 100%; margin: 0 !important; }

  body.auth-page input[type="text"],
  body.auth-page input[type="password"] {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 0 12px !important;
    padding: 11px 13px !important;
    border: 1px solid #d8dee7 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #273449 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body.auth-page input:focus {
    outline: none !important;
    border-color: #9fb3d2 !important;
    box-shadow: 0 0 0 3px rgba(51,95,158,.09) !important;
  }

  body.auth-page .btn,
  body.auth-page button.btn,
  body.auth-page a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 11px 14px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  body.auth-page .legal-footer {
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: static !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 0 max(4px, env(safe-area-inset-bottom)) !important;
  }

  /* Landing screen uses the same card and button geometry as role logins. */
  body.landing-page > .container { padding-top: 24px !important; padding-bottom: 24px !important; }
  body.landing-page > .container .btn { margin-top: 9px !important; }

  /* Teacher / curator / administration role panels share one mobile header + cards. */
  .role-workspace-shell {
    width: 100% !important;
    max-width: none !important;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }

  .role-workspace-shell .role-identity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    min-width: 0 !important;
  }

  .role-workspace-shell .role-identity > div { min-width: 0 !important; flex: 1 1 auto !important; }
  .role-workspace-shell .role-identity h1 {
    margin: 4px 0 3px !important;
    font-size: clamp(24px, 7vw, 29px) !important;
    line-height: 1.05 !important;
  }
  .role-workspace-shell .role-identity p {
    margin: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }
  .role-workspace-shell .role-logout {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: 11px !important;
  }

  .role-workspace-shell .role-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    border-radius: 17px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  .role-workspace-shell .role-card__head { gap: 10px !important; margin-bottom: 12px !important; }
  .role-workspace-shell .role-card h2 { font-size: 16px !important; }
  .role-workspace-shell .class-grid,
  .role-workspace-shell .class-chips { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }
  .role-workspace-shell .subject-grid,
  .role-workspace-shell .subject-choice-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Student dashboard: same compact header/card rhythm without removing statistics. */
  body.student-role-home { background: #f5f7fb !important; }
  body.student-role-home .student-home {
    width: 100% !important;
    max-width: none !important;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }
  body.student-role-home .student-home__head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  body.student-role-home .student-home__head > div { min-width: 0 !important; flex: 1 1 auto !important; }
  body.student-role-home .student-home h1 {
    margin: 4px 0 3px !important;
    font-size: clamp(23px, 6.8vw, 28px) !important;
    line-height: 1.05 !important;
  }
  body.student-role-home .student-home__head p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.student-role-home .ghost-button {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
  }
  body.student-role-home .stats-card,
  body.student-role-home .subjects-card {
    padding: 14px !important;
    border-radius: 17px !important;
  }

  /* Main admin panel: same visual density as the other role panels on phones. */
  body.admin-role-home { background: #f5f7fb !important; }
  body.admin-role-home .wrap {
    min-height: 100svh !important;
    align-items: flex-start !important;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }
  body.admin-role-home .frame {
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.admin-role-home .frame > .d-flex:first-child {
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  body.admin-role-home .frame > .d-flex:first-child > div { min-width: 0 !important; }
  body.admin-role-home .frame h1 { font-size: clamp(24px, 7vw, 29px) !important; line-height: 1.05 !important; }
  body.admin-role-home .frame > hr { display: none !important; }
  body.admin-role-home .frame > .row { --bs-gutter-x: 0 !important; --bs-gutter-y: 10px !important; }
  body.admin-role-home .card {
    border: 1px solid #e4e8ef !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 26px rgba(31,46,75,.05) !important;
  }
  body.admin-role-home .card-body { padding: 15px !important; }
}

@media (max-width: 360px) {
  body.auth-page { padding-left: max(10px, env(safe-area-inset-left)) !important; padding-right: max(10px, env(safe-area-inset-right)) !important; }
  body.auth-page > .container,
  body.auth-page > .teacher-login-container,
  body.auth-page > .curator-login-container { padding: 22px 16px !important; }
  .role-workspace-shell .role-logout,
  body.student-role-home .ghost-button { padding: 8px 9px !important; font-size: 11px !important; }
}

@media (max-width: 768px) and (max-height: 620px) {
  body.auth-page { align-items: start !important; }
  body.auth-page > .container,
  body.auth-page > .teacher-login-container,
  body.auth-page > .curator-login-container { align-self: start !important; margin-top: 10px !important; margin-bottom: 10px !important; }
}