/* Mobile layout only. Theme colors, wallpaper and panel opacity stay unchanged. */
@media (max-width: 700px) {
  .layout, .content, .main, .auth-shell, .auth-story, .auth-form-side,
  .auth-form-wrap, .card, .site-card, .metrics, .charts-row, .site-grid {
    min-width: 0;
    max-width: 100%;
  }

  /* Wide records remain readable inside their own horizontal scroll container. */
  .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .topbar {
    height: auto;
    min-height: 61px;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .breadcrumb { min-width: 0; flex-wrap: wrap; }
  .breadcrumb strong { overflow-wrap: anywhere; }
  .top-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 8px; }
  .top-actions .help-button { min-height: 44px; padding: 8px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .top-actions .help-button .icon { flex-shrink: 0; }
  .top-actions .language-control { min-width: 0; }
  .language-control select { height: 44px; max-width: 125px; font-size: 16px; }

  .page-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-heading > div { min-width: 0; }
  .page-heading p { max-width: none; overflow-wrap: anywhere; }
  .eyebrow { overflow-wrap: anywhere; }
  .heading-actions { padding-top: 0; flex-wrap: wrap; }
  .heading-actions .button { min-height: 44px; height: 44px; padding: 8px 14px; font-size: 13px; }
  .button, .button.small, .table-tools .button {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .icon-button, .pagination .icon-button, .side-footer > .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
  .account-settings-button { width: 44px; height: 44px; flex-basis: 44px; }

  .filter-left, .filter-right { min-width: 0; max-width: 100%; }
  .filter-left { flex: 1 1 220px; }
  .filter-right { flex: 1 1 100%; }
  .site-filter-trigger { width: 100%; max-width: 100%; min-height: 44px; font-size: 13px; }
  .date-presets { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .date-presets button { min-width: 0; min-height: 44px; padding: 6px 5px; white-space: normal; font-size: 12px; }
  .date-fields.mobile-show { width: 100%; min-width: 0; flex-wrap: wrap; }
  .date-fields input { flex: 1 1 130px; min-width: 0; max-width: 100%; height: 44px; font-size: 16px; }
  .date-fields .icon-button { width: 44px; height: 44px; }
  .selected-time-range { overflow-wrap: anywhere; }

  /* A percentage bar always spans the full card width on phones. */
  .breakdown { display: grid; grid-template-columns: minmax(0,1fr); gap: 19px; padding: 14px 17px 21px; }
  .breakdown-row { min-width: 0; margin: 0; }
  .breakdown-head { min-width: 0; gap: 8px; }
  .breakdown-name { min-width: 0; overflow-wrap: anywhere; }
  .breakdown-name .mini-device { flex-shrink: 0; }
  .breakdown-count { flex-shrink: 0; white-space: nowrap; }
  .breakdown-empty { grid-column: 1; }
  .metric-top { align-items: flex-start; }
  .metric-top > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .metric-icon { flex-shrink: 0; }
  .metric-foot { flex-wrap: wrap; overflow-wrap: anywhere; }
  .card-header { min-width: 0; flex-wrap: wrap; }
  .card-header > div { min-width: 0; }
  .card-title, .card-subtitle { overflow-wrap: anywhere; }
  .chart-empty-label { white-space: normal; text-align: center; max-width: calc(100% - 40px); }

  .site-card { padding: 19px 17px; }
  .site-domain { white-space: normal; overflow-wrap: anywhere; }
  .site-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
  .site-stats > div { min-width: 0; }
  .site-stats strong { min-height: 28px; line-height: 28px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .site-stats .last-seen { display: flex; align-items: center; min-height: 28px; line-height: 1.5; }
  .site-stats small { line-height: 1.6; overflow-wrap: anywhere; }
  .site-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .site-integration-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .site-integration-actions .button { justify-content: center; min-width: 0; padding: 9px 10px; }
  .site-card-actions .site-actions-right { margin-left: 0; width: 100%; display: flex; justify-content: space-between; gap: 8px; }

  .table-tools { width: 100%; min-width: 0; flex-wrap: wrap; margin-left: 0; gap: 8px; }
  .search-form { flex: 1 1 190px; min-width: 0; max-width: 100%; min-height: 44px; }
  .search-form > .icon { flex-shrink: 0; }
  .search-form input { flex: 1; width: 0; min-width: 0; padding: 10px 7px; font-size: 16px; }
  .search-form button { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 8px; font-size: 12px; }
  .table-bottom { align-items: center; gap: 12px; }
  .table-bottom > span { min-width: 0; overflow-wrap: anywhere; }
  .pagination { margin-left: auto; flex-shrink: 0; }
  .visit-selection-bar, .history-selection-bar { flex-wrap: wrap; gap: 10px; }
  .visit-selection-actions, .history-selection-actions { min-width: 0; max-width: 100%; }
  .visit-selection-actions .button { min-height: 44px; }
  .column-filter-note > span { min-width: 0; flex-basis: 180px; }
  .column-filter-chip { min-height: 44px; white-space: normal; }
  .reserved-column-header { min-height: 44px; }
  .column-data-count { min-height: 44px; min-width: 44px; height: auto; line-height: 1.3; }
  .visit-checkbox input, .history-checkbox input { width: 22px; height: 22px; }

  /* Native date fields and translated labels must fit the same mobile form. */
  .field, .password-field { min-width: 0; max-width: 100%; }
  .field input, .field select, .login-history-filters .field input, .login-history-filters .field select {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .field label, .field small { overflow-wrap: anywhere; }
  .password-field input { padding-right: 48px; }
  .password-field .icon-button { right: 2px; top: 2px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .login-history-filters .field { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .history-filter-actions, .login-history-header-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }

  dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .modal-heading, .modal-body { min-width: 0; padding: 18px; }
  .modal-heading > div { min-width: 0; }
  .modal-heading :is(h2,p), .modal-note, .form-error { overflow-wrap: anywhere; }
  .modal-heading > .icon-button, .modal-note > .icon { flex-shrink: 0; }
  .modal-actions, .code-buttons, .empty-actions { min-width: 0; flex-wrap: wrap; }
  .modal-actions > .button { flex: 1 1 120px; justify-content: center; }
  .code-block { max-width: 100%; min-width: 0; overflow-x: auto; }
  .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-grid > div { min-width: 0; }
  .account-password-group legend { max-width: 100%; white-space: normal; }
  .ip-blocklist-toolbar { flex-wrap: wrap; }
  .site-test-check-heading { flex-wrap: wrap; gap: 8px; }
  .background-preview-footer { flex-wrap: wrap; }
  .background-footer-links { flex-shrink: 1; max-width: 100%; }
  .background-card-title { flex-wrap: wrap; }
  .background-card-title strong { overflow-wrap: anywhere; }

  .sidebar { width: min(280px,calc(100vw - 44px)); max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(18px,env(safe-area-inset-bottom)); }
  .nav-item { min-height: 44px; white-space: normal; }
  .side-footer { margin-top: 18px; }
  .auth-story, .auth-form-side { padding-left: 22px; padding-right: 22px; }
  .auth-form-wrap { max-width: 420px; }
  .auth-form-side { min-height: 0; padding-bottom: max(40px,env(safe-area-inset-bottom)); }
  .auth-description, .story-main p, .story-main h1 { overflow-wrap: anywhere; }
  .login-captcha-heading { flex-wrap: wrap; }
  .login-captcha-heading > span { min-width: 0; }
  .toast-region { left: 12px; right: 12px; bottom: max(12px,env(safe-area-inset-bottom)); max-width: none; }
  .toast { min-width: 0; overflow-wrap: anywhere; }
  .toast > .icon { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .main { padding: 20px 12px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .top-actions { flex-basis: 100%; width: 100%; justify-content: space-between; }
  .top-actions .help-button { flex: 1 1 70px; justify-content: center; min-width: 0; }
  .top-actions .language-control { margin-left: auto; }
  .heading-actions .button { flex: 1 1 110px; justify-content: center; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .metric { padding: 14px 11px; }
  .metric-value { font-size: clamp(23px,7vw,28px); }
  .metric-value.time-value { font-size: clamp(18px,5.3vw,22px); }
  .metric-top { font-size: 11px; gap: 5px; }
  .metric-icon { width: 23px; height: 23px; }
  .date-fields.mobile-show { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .date-fields.mobile-show > span { display: none; }
  .date-fields.mobile-show .icon-button { justify-self: end; }
  .login-history-filters .field, .login-history-filters .field:nth-child(3), .history-filter-actions { flex-basis: 100%; }
  .history-filter-actions .button { flex: 1; justify-content: center; }
  .table-bottom .pagination { margin-left: 0; width: 100%; justify-content: space-between; }
  .detail-grid { grid-template-columns: minmax(0,1fr); }
  .account-password-group { padding-left: 10px; padding-right: 10px; }
  .ip-blocklist-records li { grid-template-columns: minmax(0,1fr); }
  .ip-blocklist-records li > .button { grid-column: 1; grid-row: auto; justify-self: start; }
  .background-gallery { max-height: calc(100dvh - 320px); }
  .appearance-modal .modal-heading p { font-size: 11px; }
  .appearance-modal .modal-body { padding-left: 12px; padding-right: 12px; }
  .background-preview-footer { gap: 6px; }
  .background-footer-links { width: 100%; align-items: stretch; }
  .background-footer-links .button { text-align: left; justify-content: flex-start; }
}