/* Mobile-only refinements. Keep desktop layout untouched. */
.document-type-filter-mobile {
  display: none;
}

@media (max-width: 640px) {
  /* Date field: allow the full dd.mm.yyyy value to remain visible on phones. */
  .document-header-row .header-date-field {
    width: 100%;
  }

  .document-header-row .date-control {
    width: 100%;
  }

  .document-header-row .document-date-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 16px;
  }

  /* Document journal: compact type select instead of horizontal pills. */
  .document-type-filter {
    display: none;
  }

  .document-type-filter-mobile {
    display: block;
    margin: -6px 0 12px;
  }

  .document-type-select-form .field {
    margin: 0;
  }

  /* Dates must always share the first row equally on a phone. */
  .journal-filter-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .journal-filter-form > .field {
    min-width: 0;
  }

  .journal-filter-form > .field:nth-of-type(1),
  .journal-filter-form > .field:nth-of-type(2) {
    width: 100%;
  }

  .journal-filter-form > .field:nth-of-type(3),
  .journal-filter-actions {
    grid-column: 1 / -1;
  }

  .journal-filter-form input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Split range: a larger touch area with a thin, stable visual track. */
  .split-range-wrap {
    margin-top: 10px;
  }

  .split-range {
    height: 34px;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
  }

  .split-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, #d8d8dd 0 var(--split-percent), #3273dc var(--split-percent) 100%);
  }

  .split-range::-webkit-slider-thumb {
    margin-top: -8px;
  }

  .split-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, #d8d8dd 0 var(--split-percent), #3273dc var(--split-percent) 100%);
  }

  .split-range-caption {
    margin-top: 1px;
  }

  /* Supplier details are secondary on mobile and stay compact until requested. */
  .tmc-mobile-supplier-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .tmc-mobile-supplier-section .tmc-section-side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0;
    color: #55555b;
    cursor: pointer;
    user-select: none;
  }

  .tmc-mobile-supplier-section .tmc-section-side-title:active {
    color: #222226;
  }

  .tmc-mobile-supplier-section .tmc-section-content {
    padding-bottom: 14px;
  }

  .tmc-mobile-supplier-section.is-mobile-collapsed .tmc-section-content {
    display: none;
  }

  .tmc-mobile-supplier-chevron {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #f1f1f3;
    color: #77777d;
    font-size: .72rem;
    transition: transform .16s ease, background .16s ease, color .16s ease;
  }

  .tmc-mobile-supplier-section:not(.is-mobile-collapsed) .tmc-mobile-supplier-chevron {
    transform: rotate(90deg);
    background: #e8e8eb;
    color: #2f3034;
  }
}