/* Shared mobile layout safeguards. Desktop rules remain unchanged. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
img, svg, canvas, video { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.table-wrap, .calendar-wrap, .mapping-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }

@media (max-width: 650px) {
  body { overflow-x: hidden; }

  main,
  .wrap,
  .header-inner,
  header > div {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  header .header-inner,
  header > .wrap,
  header > div {
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }

  .brand,
  .brand-area,
  .brand-link,
  .page-brand,
  .header-title {
    min-width: 0;
    max-width: 100%;
  }

  .brand-description,
  .page-brand > span {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .card,
  section,
  form,
  fieldset {
    min-width: 0;
    max-width: 100%;
  }

  .row,
  .actions,
  .card-head,
  .section-header,
  .calendar-actions,
  .filters,
  .timezone {
    max-width: 100%;
    flex-wrap: wrap;
  }

  form input:not([type="checkbox"]):not([type="radio"]),
  form select,
  form textarea {
    width: 100%;
    min-width: 0 !important;
  }

  .actions > button,
  .actions > a,
  form > button,
  .card-head > .action {
    min-height: 42px;
  }

  .item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .item-actions {
    flex-wrap: wrap;
  }

  .modal,
  .modal-content,
  dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  table { max-width: none; }

  /* Home / My properties: use a true phone layout instead of a scaled desktop layout. */
  html[data-page] .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  html[data-page] .brand-description { display: none; }
  html[data-page] .brand { font-size: 17px; white-space: nowrap; }
  html[data-page] .brand-area { gap: 7px; min-width: 0; }
  html[data-page] .home-link { width: 34px; height: 34px; }
  html[data-page] .user-area { gap: 2px; justify-content: flex-end; }
  html[data-page] .user-area a,
  html[data-page] .user-area button { padding: 7px 5px; font-size: 12px; white-space: nowrap; }

  html[data-page] main { padding-top: 24px; padding-bottom: 42px; }
  html[data-page] .page-heading { gap: 16px; margin-bottom: 18px; }
  html[data-page] .page-heading h1 { font-size: 25px; }
  html[data-page] .page-heading p { font-size: 13px; line-height: 1.45; }
  html[data-page] .heading-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  html[data-page] .heading-actions .settings-link {
    justify-content: center;
    padding: 10px 4px;
    min-width: 0;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }

  html[data-page] .home-calendar { padding: 14px; border-radius: 13px; }
  html[data-page] .calendar-toolbar { display: block; margin-bottom: 14px; }
  html[data-page] .calendar-toolbar h2 { font-size: 21px; }
  html[data-page] .calendar-toolbar p { font-size: 12px; line-height: 1.45; }
  html[data-page] .calendar-toolbar-right { width: 100%; margin: 14px 0 0; }
  html[data-page] .calendar-actions {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px 54px;
    gap: 7px;
    width: 100%;
  }
  html[data-page] .calendar-actions select { grid-column: 1 / -1; width: 100%; max-width: none; }
  html[data-page] .calendar-actions strong { min-width: 0; align-self: center; font-size: 14px; }
  html[data-page] .calendar-actions button { padding: 9px 5px; min-width: 0; }

  html[data-page] .calendar-summary-row { display: block; margin: 12px 0 8px; }
  html[data-page] .calendar-legend { gap: 8px 12px; font-size: 11px; }
  html[data-page] .calendar-display-control { width: 100%; margin: 4px 0 0; font-size: 11px; }
  html[data-page] .calendar-display-control select { flex: 1; min-width: 0; padding: 7px 26px 7px 8px; }
  html[data-page] .calendar-selected-summary { margin-top: 10px; font-size: 12px; line-height: 1.4; }
  html[data-page] .calendar-scroll-hint { display: none; }
  html[data-page] .calendar-wrap { overflow-x: hidden; }
  html[data-page] .calendar-grid {
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  html[data-page] .calendar-weekday { padding: 7px 2px; font-size: 11px; }
  html[data-page] .calendar-day {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 29px 3px 4px;
  }
  html[data-page] .calendar-number { top: 4px; left: 4px; margin: 0; font-size: 12px; }
  html[data-page] .calendar-day.today .calendar-number { width: 23px; height: 23px; }
  html[data-page] .calendar-markers { gap: 3px 4px; margin-top: 4px; }
  html[data-page] .calendar-status-dot { width: 11px; height: 11px; }
  html[data-page] .calendar-marker { gap: 1px; }
  html[data-page] .calendar-marker-count { font-size: 9px; }
  html[data-page] .home-calendar[data-calendar-display="bars"] .calendar-markers .calendar-status-dot { height: 5px; }
  html[data-page] .home-calendar[data-calendar-display="vertical"] .calendar-markers { gap: 4px; }
  html[data-page] .home-calendar[data-calendar-display="vertical"] .calendar-markers .calendar-status-dot { width: 7px; height: 17px; }
  html[data-page] .home-calendar[data-calendar-display="segmented"] .calendar-markers .calendar-status-dot { height: 9px; }
  html[data-page] .home-calendar[data-calendar-display="badges"] .calendar-marker { min-width: 20px; min-height: 18px; padding: 2px 5px; }
  html[data-page] .home-calendar[data-calendar-display="badges"] .calendar-legend .calendar-status-dot {
    width: 20px; height: 18px; font-size: 9px;
  }
  html[data-page] .calendar-detail {
    width: min(280px, calc(100vw - 32px));
    max-height: min(62dvh, 520px);
    padding: 13px;
    border-radius: 10px;
  }
  html[data-page] .calendar-detail-head h3 { font-size: 15px; }
}