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

   The portal navigation is a drawer: on the staff pages it is the tab row (nav.cl-tabs), on the
   admin pages the sidebar (nav.ad-nav). base_staff.html puts x-data="mobileNav" on .cl-page, the
   menu button (.stf-menu) sits in the header and .stf-scrim dims the page behind the open drawer. */

/* Mobile-only elements stay out of the desktop layout. */
@media (min-width: 1024px) {
  .stf-menu,
  .stf-scrim {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* The closed drawer waits just off screen: it must not widen the page. */
  .cl-page {
    overflow-x: clip;
  }

  /* ---- header ---- */
  .cl-page .cl-nav {
    padding-inline: 12px;
  }

  .cl-page .cl-nav__box {
    position: relative;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px;
    block-size: auto;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.86);
  }

  .cl-page .cl-nav__logo {
    inline-size: auto;
    justify-content: flex-start;
    min-inline-size: 0;
  }

  .cl-page .cl-nav__links:empty {
    display: none;
  }

  .cl-page .cl-nav__tools {
    margin-inline-start: auto;
    gap: 4px;
    block-size: auto;
  }

  .cl-page .cl-nav__tools .cl-drop {
    position: static;
  }

  .cl-page .cl-nav__tools .cl-menu {
    inset-inline-end: 0;
    inline-size: min(320px, calc(100% - 8px));
    min-inline-size: 0;
  }

  .cl-page .cl-nav__tools .cl-notif {
    inline-size: auto;
  }

  .cl-page .cl-lang button {
    min-block-size: 44px;
    padding-inline: 10px;
  }

  .cl-page .cl-bell__btn {
    inline-size: 44px;
    block-size: 44px;
  }

  .cl-page .cl-user__btn {
    block-size: 44px;
    min-inline-size: 44px;
  }

  .cl-page .cl-user__copy,
  .cl-page .cl-user__chev {
    display: none;
  }

  /* ---- menu button ---- */
  .stf-menu {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-primary-900);
    cursor: pointer;
  }

  .stf-menu:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .stf-menu__bars,
  .stf-menu__bars::before,
  .stf-menu__bars::after {
    display: block;
    inline-size: 22px;
    block-size: 2px;
    background: currentColor;
  }

  .stf-menu__bars {
    position: relative;
  }

  .stf-menu__bars::before,
  .stf-menu__bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .stf-menu__bars::before {
    inset-block-start: -7px;
  }

  .stf-menu__bars::after {
    inset-block-start: 7px;
  }

  /* ---- drawer: the staff tab row and the admin sidebar ---- */
  .cl-page .cl-tabs,
  .cl-page .ad-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    inline-size: min(300px, 84vw);
    max-inline-size: none;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 72px 12px 24px;
    overflow-y: auto;
    border: 0;
    background: var(--color-white);
    box-shadow: 0 0 24px rgba(1, 28, 27, 0.25);
    visibility: hidden;
    transform: translateX(-105%);
    transition:
      transform 0.2s ease,
      visibility 0s linear 0.2s;
  }

  [dir="rtl"] .cl-page .cl-tabs,
  [dir="rtl"] .cl-page .ad-nav {
    transform: translateX(105%);
  }

  .cl-page.is-nav-open .cl-tabs,
  .cl-page.is-nav-open .ad-nav {
    visibility: visible;
    transform: none;
    transition:
      transform 0.2s ease,
      visibility 0s;
  }

  .cl-page .cl-tab,
  .cl-page .ad-nav__item {
    inline-size: 100%;
    min-block-size: 48px;
    box-sizing: border-box;
    white-space: normal;
    justify-content: flex-start;
    padding-inline: 16px;
  }

  /* The admin sidebar shrinks to icons between 901 and 1024 px: show its labels in the drawer. */
  .cl-page .ad-nav__item span {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .cl-page .ad-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 16px;
  }

  .stf-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(1, 28, 27, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .cl-page.is-nav-open .stf-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- page gutters ---- */
  .cl-page .cl-welcome,
  .cl-page .cl-footer {
    padding-inline: 16px;
  }

  .cl-page .dash,
  .cl-page .req {
    padding-inline: 16px;
  }

  .cl-page .cl-welcome__title {
    font-size: 22px;
  }

  .cl-page .cl-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ---- summary card ---- */
  .st-stats .req-stats__head {
    flex-wrap: wrap;
    padding-inline: 16px;
  }

  .st-stats .req-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
  }

  .st-stats .req-tiles__rule {
    display: none;
  }

  .st-stats .req-tile {
    padding: 10px;
  }

  .st-stats .req-tile h3 {
    font-size: 14px;
  }

  /* ---- cards and filters ---- */
  .req-card {
    padding: 16px;
    min-inline-size: 0;
  }

  .req-top {
    flex-wrap: wrap;
    gap: 12px;
    block-size: auto;
  }

  .req-top::after {
    inline-size: 100%;
  }

  .req-tabs {
    max-inline-size: 100%;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
  }

  .req-tab {
    flex: none;
    min-block-size: 44px;
  }

  .req-new {
    min-block-size: 44px;
  }

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

  .req-filters__main {
    flex-direction: column;
    align-items: stretch;
  }

  .req-sort {
    justify-content: space-between;
  }

  .req-field,
  .req-field--search,
  .req-field--service,
  .req-field--date,
  .req-field--sort {
    inline-size: 100%;
    min-block-size: 44px;
    box-sizing: border-box;
  }

  .req-foot {
    flex-wrap: wrap;
    gap: 8px;
    block-size: auto;
    padding: 12px 16px;
  }

  .req-scrollbar {
    display: none;
  }

  .req-page {
    min-inline-size: 44px;
    block-size: 44px;
  }

  /* ---- tables scroll inside their card ---- */
  .dash-table,
  .req-table {
    max-inline-size: 100%;
    overflow-x: auto;
  }

  .req-table::before {
    display: none;
  }

  .dash-card {
    min-inline-size: 0;
  }

  /* ---- order, task and ticket pages ---- */
  .rq-detail,
  .st-cols,
  .stk-cols {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-4);
  }

  .rq-timeline,
  .st-detail .rq-timeline,
  .stk-side {
    inline-size: auto;
    max-inline-size: 100%;
  }

  .rq-summary,
  .rq-timeline {
    padding: 16px;
    gap: 20px;
  }

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

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

  .rq-facts dd {
    overflow-wrap: anywhere;
  }

  .rq-actions .dash-btn,
  .dash-btn {
    min-block-size: 44px;
  }

  .st-dialog__card {
    padding: 20px;
    inline-size: 100%;
  }

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