/* Shared mobile behavior for account access, the client portal and admin. */
@media (max-width: 800px) {
  body.admin-page .admin-toolbox {
    display: flex;
    width: calc(100% - 20px);
    max-width: 1440px;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 10px auto 0;
    padding: 0;
  }

  body.admin-page .admin-toolbox .admin-global-search {
    order: -1;
    flex: 0 0 100%;
    min-width: 0;
  }

  body.admin-page .admin-toolbox .admin-global-search input { min-width: 0; }
  body.admin-page .admin-toolbox .admin-global-search kbd { display: none; }

  /* These controls were previously display:none below 800px. */
  body.admin-page .admin-toolbox .admin-tool-menu {
    display: block;
    position: static;
    min-width: 0;
  }

  body.admin-page .admin-toolbox .admin-tool-menu > summary {
    min-height: 44px;
    height: 44px;
    padding: 0 10px;
    font-size: 12px;
  }

  body.admin-page .admin-toolbox .admin-tool-menu > summary span,
  body.admin-page .admin-toolbox .admin-tool-menu > summary b { font-size: inherit; }

  body.admin-page .admin-toolbox .admin-tool-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    width: auto;
    max-height: min(68dvh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.admin-page .admin-toolbox .admin-dashboard-return {
    order: 10;
    min-height: 44px;
    margin-left: auto;
  }

  body.admin-page .admin-toolbox :is(.admin-live-chat-shortcut, .admin-analytics-shortcut) {
    min-height: 44px;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container,
  body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container > * {
    min-width: 0;
  }

  body.admin-page :is(.admin-table-container, .admin-services-page .admin-table-container,
    .ops-table-wrap, .analytics-table-wrap, .rbac-table-wrap, .discount-table-wrap,
    .campaign-table, .billing-mail__table-wrap, .affiliate-table-wrap, .table-responsive),
  body:is(.dashboard-page, .portal-service-page) .table-responsive {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  body.admin-page :is(.billing-admin__heading, .admin-user-heading, .admin-create-user__heading,
    .ops-section-title, .admin-utility-hero, .provisioning-hero, .job-health-hero) {
    min-width: 0;
  }

  body.admin-page :is(.billing-admin__heading, .admin-user-heading, .admin-create-user__heading,
    .provisioning-hero, .job-health-hero) > :first-child,
  body:is(.dashboard-page, .portal-service-page) :is(.portal-ticket-thread__header, .ticket-center__hero) > :first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    font-size: 16px !important;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) :is(button, a, summary, select) {
    touch-action: manipulation;
  }
}

@media (max-width: 600px) {
  body.admin-page .billing-admin { width: calc(100% - 20px); }
  body.admin-page :is(.year-report-shell, .ops-records, .revenue-breakdown-shell) { padding: 14px; }
  body.admin-page .admin-page-links { min-width: 0; flex-wrap: wrap; }
  body.admin-page .admin-page-links a { min-height: 44px; }
  body.admin-page .admin-search-hero { grid-template-columns: minmax(0, 1fr); }
  body.admin-page .admin-search-hero button { min-height: 44px; }
  body.admin-page .billing-ops-actions button { min-height: 44px !important; }
  body.admin-page .rbac-assignment-form select { min-width: 0; }

  body.dashboard-page #newTicketModal .modal-dialog,
  body.dashboard-page #changePasswordModal .modal-dialog {
    max-width: calc(100vw - 16px);
    margin: 8px auto;
  }

  body.dashboard-page #newTicketModal .modal-content,
  body.dashboard-page #changePasswordModal .modal-content {
    max-height: calc(100dvh - 16px);
    overflow: hidden;
  }

  body.dashboard-page #newTicketModal .modal-body,
  body.dashboard-page #changePasswordModal .modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.dashboard-page #newTicketModal .form-control,
  body.dashboard-page #changePasswordModal .form-control { font-size: 16px !important; }

  body.dashboard-page .portal-ticket-drawer.is-expanded { height: 100dvh; }
  body.dashboard-page .portal-ticket-thread__reply textarea { min-width: 0; font-size: 16px; }
  body.dashboard-page .portal-ticket-message { width: min(92%, 780px); }
  body.dashboard-page .ticket-center__hero > div:last-child { flex-wrap: wrap; width: 100%; }
  body.dashboard-page .ticket-center__reply { grid-template-columns: minmax(0, 1fr); }
  body.dashboard-page .ticket-center__reply button { min-height: 44px; }

  body.admin-page .live-support__chat-head { align-items: flex-start; flex-wrap: wrap; }
  body.admin-page .live-support__chat-actions { flex-wrap: wrap; }
  body.admin-page .live-support__reply { grid-template-columns: minmax(0, 1fr); }
  body.admin-page .live-support__reply button { min-height: 44px; }
}

@media (max-width: 380px) {
  body.admin-page .admin-toolbox :is(.admin-live-chat-shortcut, .admin-analytics-shortcut) {
    flex: 1 1 calc(50% - 4px);
    font-size: 11px;
  }

  body.admin-page .admin-toolbox .admin-tool-menu { flex: 1 1 auto; }
  body.admin-page .admin-toolbox .admin-tool-menu > summary { justify-content: center; }
  body.admin-page .admin-toolbox .admin-dashboard-return { flex: 1 1 100%; }
}

/* Phone layouts must shrink their contents, rather than clip a desktop grid. */
@media (max-width: 800px) {
  body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container {
    padding-inline: 12px;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container :is(section, article, header, nav, form, details, div, label) {
    min-width: 0;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container :is(h1, h2, h3, p, dd, small, strong, code, a, label) {
    overflow-wrap: anywhere;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) :is(button, .btn, .admin-form-btn, .admin-copy-id, .admin-page-links a) {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) summary {
    min-height: 44px;
    padding-block: 10px;
    cursor: pointer;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
  }

  body.admin-page .provisioning-links { flex-wrap: wrap; }
  body.admin-page .provisioning-actions label { min-width: 0; }
  body.admin-page .ops-manual-entry label { min-width: 0; }
  body.admin-page .ops-manual-entry :is(input:not([type='checkbox']):not([type='radio']), select, textarea) { width: 100%; }
  body.admin-page .ops-manual-entry > summary small { display: block; margin-top: 6px; font-weight: 400; }
}

@media (max-width: 600px) {
  body.admin-page :is(.billing-admin, .provisioning-page) { width: 100%; padding-inline: 0; }
  body.admin-page :is(.ops-manual-entry form, .provisioning-actions, .provisioning-actions .provisioning-ready) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.admin-page .provisioning-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin-page :is(.ops-filter, .provisioning-links, .billing-ops-actions) { gap: 10px; }
  body.admin-page .ops-filter label { flex: 1 1 100%; }
  body.admin-page .ops-filter :is(input, select) { width: 100%; }
  body.admin-page .ops-section-title { align-items: flex-start; flex-wrap: wrap; }
  body.admin-page .admin-impersonate-launch { flex-direction: column; align-items: stretch; gap: 16px; }
  body.admin-page .rbac-current { width: 100%; min-width: 0; }
}

@media (max-width: 800px) {
  /* The desktop stats flex basis became 680px of height in a column layout. */
  body.dashboard-page .dashboard-stats { flex: 0 1 auto; }

  body.admin-page .admin-services-page .admin-filters {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.admin-page .admin-services-page .admin-filter-group {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.admin-page .admin-services-page :is(.admin-filter-input, .admin-filter-select) {
    width: 100% !important;
    min-height: 44px !important;
  }

  body.dashboard-page :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select) { min-height: 44px !important; }
  body.admin-page .admin-addon-editor__remove {
    position: static;
    justify-self: end;
    width: 44px;
    height: 44px;
    grid-column: 1 / -1;
  }

  body:is(.admin-page, .dashboard-page, .portal-service-page) .modal-dialog {
    width: auto;
    max-width: calc(100vw - 16px);
    margin: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
    min-height: 0;
  }
  body:is(.admin-page, .dashboard-page, .portal-service-page) .modal-content {
    min-width: 0;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
  }
  body:is(.admin-page, .dashboard-page, .portal-service-page) .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:is(.admin-page, .dashboard-page, .portal-service-page) :is(.modal-header, .modal-footer) {
    flex-shrink: 0;
    gap: 10px;
  }
  body:is(.admin-page, .dashboard-page, .portal-service-page) .modal-header > :first-child { min-width: 0; overflow-wrap: anywhere; }
  body:is(.admin-page, .dashboard-page, .portal-service-page) .modal-header .btn-close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body.dashboard-page .account-security__codes {
    columns: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  body.dashboard-page .account-security__codes li { padding: 8px; overflow-wrap: anywhere; }
  body.dashboard-page .account-security__session { flex-wrap: wrap; }
  body:is(.login-page, .register-page) #mfaForm + form button { min-height: 44px; padding: 10px; }
}

@media (max-width: 600px) {
  body.admin-page .admin-impersonation-callout { flex-direction: column; align-items: stretch; gap: 16px; }
  body.admin-page .admin-impersonation-callout form { width: 100%; }
  body.admin-page .admin-impersonation-callout button { width: 100%; }
  body.admin-page .admin-notification-list > article > div > div { flex-wrap: wrap; gap: 6px; }
  body.admin-page .live-support__chat-person { width: 100%; }
  body.admin-page .live-support__chat-actions { width: 100%; gap: 10px; }
  body.admin-page .live-support__chat-actions button { flex: 1 1 auto; }
}

@media (max-width: 800px) {
  body:is(.admin-page, .dashboard-page, .portal-service-page) :is(button, .btn, .admin-form-btn) { min-height: 44px !important; }
  body.admin-page .live-support__workspace { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  body.admin-page .live-support__queue { border-right: 0; }
  body.admin-page .live-support__queue :is([data-visitor-queue], [data-ticket-queue], [data-ticket-archive]) {
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.admin-page .live-support__conversation {
    height: min(620px, 80dvh);
    min-height: 360px;
    scroll-margin-top: calc(var(--navbar-height, 96px) + 12px);
  }
  body.admin-page .live-support__messages { min-height: 0; }
  body.admin-page .live-support__reply { flex-shrink: 0; }
  body.admin-page .live-support__context {
    display: block;
    border-left: 0;
    border-top: 1px solid var(--ui-line, #19465e);
  }
  body.dashboard-page .portal-ticket-drawer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Long account identifiers also need to fit the narrower desktop layout. */
body.admin-page .admin-user-heading > div:first-child { min-width: 0; flex: 1; }
body.admin-page .admin-user-heading :is(h1, p),
body.admin-page .rbac-current :is(strong, small) { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  body.admin-page .admin-toolbox {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 24px);
    gap: 10px;
    padding: 0;
  }
  body.admin-page .admin-toolbox .admin-global-search { order: -1; flex: 0 0 100%; min-width: 0; }
  body.admin-page .admin-toolbox .admin-global-search input { min-width: 0; }
  body.admin-page .admin-toolbox .admin-dashboard-return { margin-left: auto; }
}

@media (max-width: 800px) {
  body.admin-page .dispute-card footer { flex-wrap: wrap; }
  body.admin-page .dispute-card footer small { white-space: normal; min-width: 0; }
}

.panel-table-scroll-hint { display: none; }
@media (max-width: 1100px) {
  body:is(.admin-page, .dashboard-page, .portal-service-page) .panel-table-scroll-hint:not([hidden]) {
    display: block;
    margin: 8px 0;
    color: var(--ui-muted, #8fb4c8);
    font-size: 12px;
    line-height: 1.5;
  }
  body:is(.admin-page, .dashboard-page, .portal-service-page) [role='region'][tabindex='0']:focus-visible {
    outline: 2px solid var(--ui-accent, #38b9ff);
    outline-offset: 3px;
  }
}

@media (max-width: 1100px) {
  body.admin-page .admin-toolbox .admin-tool-menu { position: static; }
  body.admin-page .admin-toolbox .admin-tool-popover {
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: min(390px, 100%);
    max-height: min(68dvh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 800px) {
  body.admin-page .admin-services-page .admin-form-btn-xs {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  body.admin-page :is(#serviceModal, #planModal) .modal-dialog {
    width: calc(100% - 16px) !important;
    margin: calc(8px + env(safe-area-inset-top)) auto calc(8px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  body.admin-page :is(#serviceModal, #planModal) .modal-content {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  body.admin-page :is(.admin-modal-header, .admin-modal-footer) { flex-shrink: 0; }
  body.admin-page .admin-modal-footer { display: flex; flex-wrap: wrap; gap: 10px; }
  body.admin-page .admin-modal-footer button { flex: 1 1 120px; }
}

.panel-popover-close { display: none; }
@media (max-width: 800px) {
  /* Keep utility menus inside short/landscape and keyboard-sized viewports. */
  body.admin-page .admin-toolbox .admin-tool-popover {
    position: fixed;
    top: calc(104px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  body.admin-page .admin-tool-popover > header { gap: 10px; }
  body.admin-page .admin-tool-popover > header strong { min-width: 0; overflow-wrap: anywhere; }
  body.admin-page .admin-tool-popover .panel-popover-close {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--ui-line, #24516c);
    border-radius: 8px;
    background: var(--ui-panel-raised, #0b2738);
    color: var(--ui-text, #eef8ff);
    font-size: 28px;
    line-height: 1;
  }
}

/* Some older buttons use SVG utility sizes absent from the bundled CSS. */
body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container :is(button, .admin-form-btn, .btn) > svg {
  width: 1.125em;
  height: 1.125em;
  flex: 0 0 1.125em;
}

@media (max-width: 800px) {
  body.admin-page .admin-services-page .admin-card-button { min-height: 44px !important; }
  body.admin-page #imageUploadModal .modal-dialog {
    width: calc(100% - 16px) !important;
    margin: calc(8px + env(safe-area-inset-top)) auto calc(8px + env(safe-area-inset-bottom)) !important;
  }
  body.admin-page .admin-form-buttons { flex-wrap: wrap; gap: 10px; }
  body.admin-page .admin-form-buttons > button { flex: 1 1 140px; }
}

@media (max-width: 800px) {
  body.dashboard-page #dashboardTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    overflow: visible;
  }
  body.dashboard-page #dashboardTabs .nav-item { min-width: 0; margin: 0; }
  body.dashboard-page #dashboardTabs .nav-link { width: 100%; white-space: normal; }
  body.dashboard-page #dashboardTabs .nav-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  body.admin-page .live-support__workspace { height: auto; }
  body.admin-page .live-support__queue { max-height: none; overflow: visible; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container :is(section, article, header, nav, form, details, div, label) { min-width: 0; }
  body:is(.admin-page, .dashboard-page, .portal-service-page) > main.container :is(h1, h2, h3, p, dd, small, strong, code, a, label) { overflow-wrap: anywhere; }
  body:is(.admin-page, .dashboard-page, .portal-service-page) :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  body.admin-page .ops-manual-entry label { min-width: 0; }
  body.admin-page .ops-manual-entry :is(input:not([type='checkbox']):not([type='radio']), select, textarea) { width: 100%; }
}
@media (max-width: 991px) {
  body.dashboard-page .dashboard-stats { flex: 0 1 auto; }
}

body.admin-page .admin-services-page .admin-filter-label { flex-shrink: 0; }
@media (min-width: 801px) {
  body.admin-page #imageUploadModal .modal-dialog { min-height: 0; max-height: calc(100dvh - 140px); }
  body.admin-page #imageUploadModal .modal-content { max-height: calc(100dvh - 140px); overflow: hidden; }
  body.admin-page #imageUploadModal .modal-body { min-height: 0; overflow-y: auto; }
}

/* iPhone focus zoom is triggered by small text in editable controls. Keep a
   readable size without disabling the person's own pinch-to-zoom controls. */
@media (max-width: 1100px) {
  body:is(.login-page, .register-page, .admin-page, .dashboard-page, .portal-service-page)
    :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='button']):not([type='submit']):not([type='reset']), select, textarea),
  #loginModal :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    font-size: 16px !important;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  body:is(.login-page, .register-page) .login-modern,
  body:is(.login-page, .register-page) .login-modern__shell,
  body:is(.login-page, .register-page) .login-modern__shell :is(.login-modern__panel, form, label, .login-modern__input) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  body:is(.login-page, .register-page) .login-modern__input input {
    flex: 1 1 0;
    width: 100%;
    line-height: 1.5;
  }
  body:is(.login-page, .register-page) .login-modern__options { flex-wrap: wrap; }
  body:is(.login-page, .register-page) .login-modern__shell :is(input, select, textarea) { scroll-margin-block: 24px; }
}

@media (max-width: 560px) {
  body:is(.login-page, .register-page) .login-modern__panel { padding: 24px 16px; }
  body:is(.login-page, .register-page) .login-modern__panel-head { margin-bottom: 22px; }
  body:is(.login-page, .register-page) .login-modern__form { gap: 16px; }
}

@media (max-width: 1100px) and (pointer: coarse) {
  /* Desktop height-based zoom shrank fields again on landscape phones/tablets. */
  body:is(.login-page, .register-page) .login-modern__shell {
    zoom: 1;
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
  body:is(.login-page, .register-page) .login-modern__welcome { display: none; }
  body:is(.login-page, .register-page) .login-modern {
    min-height: 0;
    place-items: start center;
    padding: 16px max(14px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
}