/* Mobile admin: prevent intrinsic widths from expanding cards and form fields. */
@media (max-width:820px) {
  #classesView > .hub-toolbar > .hub-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:1fr;
    align-items:stretch;
    gap:8px;
    width:100%;
    min-width:0;
  }
  #classesView > .hub-toolbar > .hub-actions > button,
  #classesView > .hub-toolbar > .hub-actions #hubHistory {
    grid-column:auto;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:48px;
    height:100%;
    margin:0;
    padding:10px 8px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.7px;
    white-space:normal;
    text-align:center;
  }
  #proView {width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  #proView > .pro-grid {
    width:100%;
    min-width:0;
    max-width:100%;
    grid-template-columns:minmax(0,1fr);
    box-sizing:border-box;
  }
  #proView .pro-card {min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
  #proView .pro-card :is(h3,p) {min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #proView .pro-card > [data-setting] {width:auto;max-width:100%;min-width:0;align-self:flex-start;margin-top:10px}
  body dialog.pro-dialog {box-sizing:border-box;min-width:0;max-width:calc(100vw - 24px)}
  body dialog.pro-dialog .pro-form {min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr)}
  body dialog.pro-dialog .pro-form > * {min-width:0;max-width:100%;box-sizing:border-box}
  body dialog.pro-dialog .pro-form :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
    font-size:16px;
  }
  body dialog.pro-dialog .pro-form input[type=date] {
    -webkit-appearance:none;
    appearance:none;
    display:block;
    padding:0 10px;
    height:44px;
    min-height:44px;
    margin:0;
    border-radius:0;
    text-align:left;
  }
  body dialog.pro-dialog input[type=date]::-webkit-date-and-time-value {min-width:0;text-align:left}
  body dialog.pro-dialog input[type=date]::-webkit-datetime-edit {min-width:0;padding:0}
  :root[data-admin-theme=light] body dialog.pro-dialog input[type=date] {border-radius:6px}
}