@charset "UTF-8";
/* Layout only. Console colours, active themes, data and navigation stay owned by
   their components. Scope also keeps storefront and printed invoices unchanged. */
@media screen {
  body.is-dashboard :is(.ec-console,.xp-workspace) {
    min-width: 0;
    width: 100%;
  }

  /* A wide table or fieldset must not enlarge an ancestor grid track. */
  body.is-dashboard :is(.ec-console,.xp-workspace) :is(
    .ec-main,.ec-page-content,.ec-column,.ec-card,.xp-main,.p-dashboard-content,
    .p-card,.p-form,.p-content-grid,.p-service-grid,.p-ticket-grid,
    .xp-content-layout,.xp-pricing-layout,.xp-customer-service,.xp-provider-layout,
    .xp-wallet-grid,.xp-wallet-adjust-grid,.es-profile-layout,.ecr-page,
    .pc-layout,.pc-editor,.pc-response,.pc-history-items,.email-service-page
  ) {
    min-width: 0;
    max-width: 100%;
  }

  body.is-dashboard :is(.p-form,.xp-form-grid,.es-form-grid,.pc-object,.pc-fields,.xp-schema-object) > *,
  body.is-dashboard :is(.ec-console,.xp-workspace,.xp-dialog,.site-dialog) fieldset {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
  }
  body.is-dashboard :is(.ec-console,.xp-workspace,.xp-dialog,.site-dialog) legend {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.is-dashboard :is(.ec-console,.xp-workspace,.xp-dialog,.site-dialog) :is(
    input:not([type=checkbox]):not([type=radio]),select,textarea
  ) {
    min-width: 0;
    max-width: 100%;
  }

  body.is-dashboard :is(.p-table-wrap,.ec-table-scroll,.ecr-table-scroll,.pc-result-scroll) {
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  body.is-dashboard :is(.pc-result-data,.pc-key-values,.xp-provider-output,.xp-record-detail) {
    min-width: 0;
    max-width: 100%;
  }
  body.is-dashboard :is(.pc-result-data,.pc-key-values,.xp-provider-output,.xp-record-detail,.ecr-api-documentation) pre,
  body.is-dashboard .xp-json-result {
    max-width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  body.is-dashboard :is(.p-card,.ec-card,.p-section-heading,.ec-overview-heading,.ec-page-heading,
    .email-service-card,.xp-dialog,.site-dialog) :is(h1,h2,h3,p,dd),
  body.is-dashboard :is(.p-detail-list,.xp-provider-fields,.pc-key-values,.ecr-info-grid,.es-funding-info) :is(code,dd),
  body.is-dashboard :is(.ec-resource-label,.ec-recent-orders,.ec-renewals,.es-fulfillment-copy) strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.is-dashboard :is(.ec-console,.xp-workspace,.xp-dialog,.site-dialog) :is(
    .p-button,.p-text-button,.ec-icon-button,.ec-link,.xp-close,.icon-button
  ),
  body.is-dashboard :is(.ec-create summary,.ec-create>div>button,.xp-content-tabs>button) {
    min-width: 44px;
    min-height: 44px;
  }
  body.is-dashboard :is(.ec-console,.xp-workspace,.xp-dialog,.site-dialog) .p-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  body.is-dashboard :is(.p-service-actions,.xp-inline-actions,.xp-form-actions,
    .xp-invoice-actions,.xp-panel-login-actions,.xp-report-filter-actions,
    .ecr-action-bar,.es-commerce-actions,.email-service-actions,.ec-profile-actions,
    .ec-pagination,.xp-pagination,.xp-report-pagination,.pc-pagination,.ecr-pagination) {
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px;
  }
  body.is-dashboard :is(.p-card-heading,.ec-card-head,.p-section-heading,.ec-overview-heading,.ec-page-heading) {
    min-width: 0;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  body.is-dashboard :is(.p-card-heading,.ec-card-head,.p-section-heading,.ec-overview-heading,.ec-page-heading) > div {
    min-width: 0;
    max-width: 100%;
  }

  /* Five existing children: icon/label, then PIN/copy/refresh. Keep both
     controls large even in the 228px desktop sidebar. */
  body.is-dashboard .ec-console .ec-support-pin {
    display: grid;
    grid-template-columns: 16px minmax(0,1fr) 44px 44px;
    align-items: center;
    gap: 4px 5px;
  }
  body.is-dashboard .ec-console .ec-support-pin > svg { grid-column: 1; grid-row: 1; }
  body.is-dashboard .ec-console .ec-support-pin > span { grid-column: 2/-1; grid-row: 1; }
  body.is-dashboard .ec-console .ec-support-pin > code { grid-column: 1/3; grid-row: 2; margin: 0; }
  body.is-dashboard .ec-console .ec-support-pin [data-pin-copy] { grid-column: 3; grid-row: 2; }
  body.is-dashboard .ec-console .ec-support-pin [data-pin-rotate] { grid-column: 4; grid-row: 2; }
  body.is-dashboard .ec-console .ec-support-pin .ec-icon-button { width: 44px; height: 44px; }

  body.is-dashboard .ec-console .ec-top-balance strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.is-dashboard :is(.ec-console,.xp-workspace) :is(.p-empty,.ec-empty,.ecr-empty,.es-fulfillment-empty) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Dialogs are attached to body, outside the console grid. */
  body.is-dashboard :is(.site-dialog,.xp-dialog) {
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  body.is-dashboard .xp-dialog[open] { display: flex; flex-direction: column; }
  body.is-dashboard .xp-dialog > header { min-width: 0; flex: 0 0 auto; }
  body.is-dashboard .xp-dialog > header > div { min-width: 0; }
  body.is-dashboard .xp-dialog .xp-dialog-body {
    min-height: 0;
    min-width: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

@media screen and (min-width: 801px) {
  body.is-dashboard .ec-console .ec-sidebar { height: 100dvh; min-height: 0; }
}
@media screen and (min-width: 901px) {
  body.is-dashboard .portal-host .xp-sidebar { height: 100dvh; min-height: 0; }
}

/* The content is narrower than the viewport while a desktop sidebar exists. */
@media screen and (max-width: 1100px) {
  body.is-dashboard .ec-console .ec-topbar { flex-wrap: wrap; align-items: center; }
  body.is-dashboard .ec-console .ec-search-trigger { flex: 1 1 190px; }
  body.is-dashboard .ec-console .ec-topbar-actions {
    flex: 1 1 340px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body.is-dashboard :is(.ec-console,.xp-workspace) :is(
    .p-service-grid,.p-ticket-grid,.p-lead-grid,.xp-wallet-adjust-grid,
    .xp-customer-service,.pc-layout,.xp-provider-layout
  ) { grid-template-columns: minmax(0,1fr); }
  body.is-dashboard .pc-picker { position: static; max-height: none; }
  body.is-dashboard .pc-picker > [data-pc-list] { max-height: 290px; overflow-y: auto; }
  body.is-dashboard .xp-workspace .xp-report-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media screen and (max-width: 800px) {
  body.is-dashboard .ec-console .ec-mobile-actions { flex-wrap: wrap; }
  body.is-dashboard .ec-console .ec-mobile-actions > :is(a,button) {
    flex: 1 1 120px;
    white-space: normal;
  }
  body.is-dashboard .portal-host .xp-side-bottom { flex-wrap: wrap; }
  body.is-dashboard .portal-host .xp-side-bottom > :is(a,button) {
    min-height: 44px;
    white-space: normal;
  }
}

@media screen and (max-width: 600px) {
  body.is-dashboard .ec-console .ec-topbar { align-items: stretch; }
  body.is-dashboard .ec-console .ec-search-trigger { width: 100%; max-width: none; flex-basis: 100%; }
  body.is-dashboard .ec-console .ec-topbar-actions { width: 100%; flex-basis: 100%; gap: 8px; }
  body.is-dashboard .ec-console .ec-top-balance { margin-right: auto; max-width: 100%; }
  body.is-dashboard .ec-console .ec-create > div { max-width: calc(100vw - 32px); }
  body.is-dashboard .ec-console .ec-mobile-navigation,
  body.is-dashboard .portal-host .xp-mobile-section { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
  body.is-dashboard :is(.ec-console,.xp-workspace) :is(
    .es-form-grid,.xp-form-grid,.xp-report-filters,.ecr-info-grid,.ecr-records,
    .xp-provider-fields,.xp-resource-grid,.pc-fields>div,.pc-object
  ) { grid-template-columns: minmax(0,1fr); }
  body.is-dashboard .es-form-grid .es-span-two { grid-column: auto; }
  body.is-dashboard :is(.p-services-filter,.ecr-market-toolbar,.ecr-api-toolbar,.xp-toolbar) {
    flex-wrap: wrap;
    align-items: stretch;
  }
  body.is-dashboard :is(.p-services-filter,.ecr-market-toolbar,.ecr-api-toolbar) > label {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  body.is-dashboard .xp-toolbar .xp-search { min-width: 0; width: 100%; max-width: none; }
  body.is-dashboard .ec-console .ec-heading-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.is-dashboard :is(.ec-console,.xp-workspace) .p-detail-list > div {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 6px;
  }
  body.is-dashboard :is(.ec-console,.xp-workspace) .p-detail-list dd {
    max-width: 100%;
    margin: 0;
    text-align: left;
  }
  body.is-dashboard :is(.p-service-actions,.xp-form-actions,.xp-panel-login-actions,.email-service-actions) > .p-button {
    flex: 1 1 160px;
  }
  body.is-dashboard :is(.ec-console,.xp-workspace,.xp-dialog,.site-dialog) :is(
    input:not([type=checkbox]):not([type=radio]),select,textarea
  ) { font-size: 16px !important; }
  body.is-dashboard .xp-dialog > header { padding: 20px; gap: 12px; }
  body.is-dashboard .xp-dialog .xp-dialog-body { padding: 20px; }
  body.is-dashboard :is(.site-dialog,.xp-dialog) :is(.xp-form-grid,.xp-detail-grid,.es-form-grid) {
    grid-template-columns: minmax(0,1fr);
  }
}

@media screen and (max-width: 420px) {
  body.is-dashboard :is(.ec-console,.xp-workspace) :is(
    .ec-stats,.p-stats-grid,.xp-stat-grid,.xp-report-stats,.ec-heading-actions,.ec-security-grid
  ) { grid-template-columns: minmax(0,1fr); }
  body.is-dashboard .ec-console .ec-stat { min-height: 0; }
  body.is-dashboard .ec-console .ec-login-list > div { flex-wrap: wrap; }
  body.is-dashboard .ec-console .ec-login-list time { margin-left: auto; max-width: 100%; }
  body.is-dashboard .ec-console .ec-renewals > button { flex-wrap: wrap; }
  body.is-dashboard :is(.ec-pagination,.xp-pagination,.xp-report-pagination,.pc-pagination,.ecr-pagination) > div {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.is-dashboard .pc-picker { grid-template-columns: minmax(0,1fr); }
  body.is-dashboard .pc-picker > [data-pc-count] { text-align: left; }
}