/* Study Bridge Mobile Layer (non‑breaking)
   Only activates on mobile widths, so desktop stays the same.
*/

:root{
  --sb-m-gap: 12px;
  --sb-m-radius: 16px;
  --sb-m-stroke: rgba(15,23,42,.12);
}

/* Comfortable tap targets */
@media (max-width: 820px){
  body{ -webkit-text-size-adjust: 100%; }
  a, button, input, select, textarea{ touch-action: manipulation; }
  button, .btn, .back-btn, a.btn{
    min-height: 44px;
  }
}

/* Generic “safe” table scrolling on mobile */
@media (max-width: 820px){
  .sb-table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sb-m-stroke);
    border-radius: var(--sb-m-radius);
    background: rgba(255,255,255,.85);
  }
  .sb-table-scroll > table{
    width: 100%;
    min-width: 720px; /* keeps columns readable; scroll activates */
    border-collapse: collapse;
  }
}

/* Forms */
@media (max-width: 820px){
  form{
    max-width: 100%;
  }
  input, select, textarea{
    width: 100%;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  .row, .grid, .form-row{
    grid-template-columns: 1fr !important;
  }
  .actions, .btn-row, .button-row{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-m-gap);
  }
  .actions > *, .btn-row > *, .button-row > *{
    flex: 1 1 auto;
  }
}

/* Cards / containers spacing */
@media (max-width: 820px){
  .container{ padding-left: 12px !important; padding-right: 12px !important; }
  .card{ padding: 14px !important; border-radius: var(--sb-m-radius) !important; }
  .topbar{ padding: 12px 12px !important; }
  .brand{ white-space: normal !important; text-align: center !important; }
}

/* Dashboard quick links grid (if present) */
@media (max-width: 820px){
  .links, .quick-links, .dash-links{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: var(--sb-m-gap) !important;
  }
}

/* Make wide chips/badges wrap */
@media (max-width: 820px){
  .badge, .pill, .chip{
    max-width: 100%;
    white-space: normal;
  }
}