/* Phone and tablet layout (below 1024 px) for the admin area. Every rule sits inside a
   max-width media query of 1023px or less, so the desktop design (1024 px and up) is unchanged. */

@media (max-width: 1023px) {
  /* ---- page frame: one column, the sidebar becomes a scrolling strip of buttons ---- */
  .ad-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 16px 20px;
    gap: var(--gap-4);
  }

  /* the sidebar itself is the drawer base_staff.html and mobile-staff.css open from the menu button */

  /* ---- cards: less padding so the content keeps its width ---- */
  .ad-main .dash-recent,
  .ad-main .req-card,
  .ad-main .stk-card {
    padding: 16px 14px 20px;
    gap: var(--gap-4);
  }

  .ad-main .rq-summary {
    padding: 16px 14px;
    gap: var(--gap-4);
  }

  .ad-main .dash-recent__head {
    flex-wrap: wrap;
    gap: var(--gap-2);
    margin-inline: 0;
  }

  .ad-main .st-detail {
    padding-inline: 0;
  }

  .ad-main .rq-summary__head {
    flex-wrap: wrap;
  }

  .ad-main .rq-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .ad-main .st-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-main .st-pair,
  .ad-main .st-cols,
  .ad-main .ad-tpl,
  .ad-main .ad-quote__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-main .ad-ltr {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* ---- statistics: tiles and the KPI row wrap ---- */
  .ad-main .dash-tiles,
  .ad-main .req-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    block-size: auto;
    padding: 8px 0;
    gap: var(--gap-2);
  }

  .ad-main .dash-tiles__rule,
  .ad-main .req-tiles__rule {
    display: none;
  }

  .ad-main .dash-tile__head h3 {
    font-size: 14px;
  }

  .ad-main .dash-kpis {
    flex-direction: column;
  }

  .ad-main .dash-total,
  .ad-main .dash-sectors {
    flex: none;
    inline-size: 100%;
    min-block-size: 0;
  }

  .ad-bars__row {
    grid-template-columns: minmax(70px, 38%) minmax(0, 1fr) auto;
  }

  /* ---- toolbars: stack, fields full width, targets 44 px ---- */
  .ad-main .ad-orders-bar,
  .ad-main .sl-invbar,
  .ad-main .req-top {
    flex-wrap: wrap;
    block-size: auto;
    align-items: stretch;
    gap: var(--gap-3);
  }

  .ad-main .req-filters,
  .ad-main .ad-filters {
    flex-direction: column;
    align-items: stretch;
    block-size: auto;
    padding-inline: 0;
  }

  .ad-main .req-filters > *,
  .ad-main .ad-filters > * {
    flex: none;
    block-size: auto;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .ad-filters .req-field--search,
  .ad-filters--wide .req-field--search,
  .ad-main .req-field--select,
  .ad-main .req-field--service,
  .ad-main .req-field--date,
  .ad-main .req-field--sort {
    inline-size: 100%;
  }

  .ad-main .req-field {
    min-block-size: 44px;
  }

  .ad-main .req-field select,
  .ad-main .req-field input {
    min-inline-size: 0;
    max-inline-size: 100%;
    block-size: 42px;
    min-block-size: 40px;
  }

  .ad-main .req-sort {
    flex-wrap: wrap;
  }

  .ad-main .dash-btn,
  .ad-main .inv-btn {
    min-block-size: 44px;
  }

  .ad-orders-bar .dash-btn,
  .ad-form__actions .dash-btn {
    flex: 1 1 auto;
  }

  .ad-main .dash-link {
    min-block-size: 40px;
    display: inline-flex;
    align-items: center;
  }

  .ad-main .rq-actions .dash-btn {
    flex: 1 1 100%;
  }

  .ad-main .req-foot {
    flex-wrap: wrap;
    block-size: auto;
    justify-content: center;
    gap: var(--gap-3);
    padding: 12px;
  }

  .ad-main .req-page {
    min-inline-size: 40px;
    min-block-size: 40px;
  }

  /* ---- tabs scroll sideways inside their own strip ---- */
  .ad-main .req-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-inline-size: 100%;
    scrollbar-width: none;
  }

  .ad-main .req-tab {
    flex: none;
    white-space: nowrap;
    min-block-size: 44px;
  }

  /* ---- wide tables: every one scrolls inside its card, never the page ---- */
  .ad-main .dash-table,
  .ad-main .req-table,
  .ad-main .inv-lines__table,
  .ad-main .st-branches__table {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ad-main .ad-orders-wrap,
  .ad-main .sl-wrap,
  .ad-main .ad-tabs {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* the grid tables set a min width on the table element; the wrapper does the scrolling */
  .ad-main .dash-table__head,
  .ad-main .dash-row {
    min-inline-size: 100%;
  }

  .ad-main .ad-table--prices .dash-table__head,
  .ad-main .ad-table--prices .dash-row {
    min-inline-size: 420px;
  }

  .ad-main .ads-retention .dash-table__head,
  .ad-main .ads-retention .ads-row {
    min-inline-size: 0;
  }

  .ad-main .ad-table--templates {
    min-inline-size: 0;
  }

  .ad-main .ad-table--templates .dash-table__head,
  .ad-main .ad-table--templates .dash-row {
    min-inline-size: 640px;
  }

  /* ---- forms: one field per row ---- */
  .ad-form__grid,
  .ad-picks,
  .ad-provider .ad-facts,
  .ads-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-main .st-input,
  .ad-main .st-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .ad-main .st-field select,
  .ad-main .st-field textarea,
  .ad-main .ad-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .ad-main .ad-form select,
  .ad-main .ad-form textarea {
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 44px;
    box-sizing: border-box;
    font-size: 16px; /* below 16 px iOS zooms the page when a field is focused */
  }

  .ad-main .ad-form input[type="file"] {
    max-inline-size: 100%;
  }

  .ad-main .ad-block,
  .ad-main fieldset {
    min-inline-size: 0;
    padding: var(--gap-3);
  }

  .ad-main .ad-item {
    padding: var(--gap-3);
  }

  .ad-main .ad-check {
    min-block-size: 44px;
  }

  .ad-main .ad-check input[type="checkbox"],
  .ad-main .ad-picks input[type="checkbox"] {
    inline-size: 22px;
    block-size: 22px;
  }

  .ad-main .st-field,
  .ad-main .st-pick {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-main .ad-hint,
  .ad-main .st-muted {
    overflow-wrap: anywhere;
  }

  .ad-main .ad-form__actions {
    flex-direction: column-reverse;
  }

  .ad-main .ad-form__actions .dash-btn {
    inline-size: 100%;
  }

  /* the rich text editor toolbar wraps and its buttons stay tappable */
  .ad-main .ad-tool {
    min-inline-size: 40px;
    min-block-size: 40px;
  }

  .ad-main .ad-tool--text {
    min-inline-size: 40px;
  }

  /* ---- retention, settings ---- */
  .ads-lead,
  .ads-facts,
  .ads-notices {
    margin-inline: 0;
    padding-inline: 0;
  }

  .ads-run {
    flex-wrap: wrap;
    padding-inline: 0;
  }

  .ads-notice {
    flex-wrap: wrap;
  }

  .ads-days {
    min-block-size: 44px;
    font-size: 16px;
  }

  /* ---- email template page ---- */
  .ad-pv__html {
    max-inline-size: 100%;
  }

  .ad-mail-hint {
    padding: 12px;
  }

  /* ---- invoice page (the client invoice sheet inside the admin layout) ---- */
  .ad-main .inv-detail,
  .ad-main .inv-sheet,
  .ad-main .inv-doc {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .ad-main .inv-sheet {
    padding-inline: 0;
    gap: var(--gap-4);
  }

  .ad-main .inv-head {
    flex-wrap: wrap;
    padding: 16px 14px;
  }

  .ad-main .inv-doc {
    padding: 16px 14px 20px;
    gap: var(--gap-4);
  }

  .ad-main .inv-seller {
    flex-direction: column;
    align-items: stretch;
  }

  .ad-main .inv-seller__rule {
    display: none;
  }

  .ad-main .inv-seller__facts {
    inline-size: 100%;
  }

  .ad-main .inv-seller__facts dl > div {
    flex-wrap: wrap;
  }

  .ad-main .inv-qr {
    align-self: center;
  }

  .ad-main .inv-top,
  .ad-main .inv-panels,
  .ad-main .inv-boxes {
    flex-direction: column;
  }

  .ad-main .inv-box__row {
    flex-direction: column;
  }

  .ad-main .inv-box {
    min-inline-size: 0;
    padding: 8px;
  }

  .ad-main .inv-panel {
    flex-direction: column;
    padding: 12px;
  }

  .ad-main .inv-field,
  .ad-main .inv-field--scope,
  .ad-main .inv-field--date,
  .ad-main .inv-field--status,
  .ad-main .inv-field--cr,
  .ad-main .inv-field--unified {
    flex: none;
    inline-size: 100%;
    box-sizing: border-box;
  }

  .ad-main .inv-label {
    white-space: normal;
  }

  .ad-main .inv-value {
    overflow-wrap: anywhere;
  }

  .ad-main .inv-lines__head,
  .ad-main .inv-lines__row {
    min-inline-size: 560px;
    grid-template-columns: minmax(170px, 2fr) repeat(4, minmax(80px, 1fr));
  }

  .ad-main .inv-totals {
    align-self: stretch;
    inline-size: 100%;
  }

  .ad-main .inv-totals__row {
    block-size: auto;
    min-block-size: 56px;
    padding-block: 8px;
  }

  .ad-main .inv-totals__row b {
    flex: none;
    inline-size: auto;
    min-inline-size: 90px;
  }

  /* ---- dialogs fit the screen ---- */
  #settings-dialog .cl-dialog__card,
  #settings-dialog .st-dialog__card {
    inline-size: calc(100vw - 24px);
    max-inline-size: 480px;
    padding: 20px 16px;
    box-sizing: border-box;
    max-block-size: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

/* frosted glass is expensive on phones: below 1024 px the page falls back to a plain surface */
@media (max-width: 1023px) {
  .cl-dialog,
  .ad-layout :is(.ad-nav, .dash-card, .req-card) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}