/* Extracted filter/date-range layout layer from styles-layout.css. Keep this file loaded after styles-layout-documents.css. */

/* Filter layout contract: filters wrap into compact rows instead of squeezing controls. */
@media (min-width: 901px) {
  body:not(.mobile-preview-mode) :is(.record-filter-bar, .audit-filter-bar, .cs-filter-bar) .field > span {
    font-size: 11px;
    line-height: 1.1;
  }

  body:not(.mobile-preview-mode) .task-filters .range-trigger {
    min-height: 46px;
    padding-inline: 10px;
  }
}

/* P0 filter/date-range guardrails: compact, two-column dropdowns across modules. */
:is(.cs-multi-filter > div.cs-multi-panel, .record-multi-filter > div.record-multi-panel, .task-multi-filter > div.task-multi-panel, .audit-multi-filter > div.audit-multi-panel) {
  display: grid !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  z-index: 3200 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  box-sizing: border-box !important;
  width: min(320px, calc(100vw - 28px)) !important;
  min-width: min(240px, calc(100vw - 28px)) !important;
  max-width: min(320px, calc(100vw - 28px)) !important;
  max-height: min(340px, calc(100vh - 140px)) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

:is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter):not([open]) > :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) {
  display: none !important;
}

:is(.cs-multi-filter > div.cs-multi-panel, .record-multi-filter > div.record-multi-panel, .task-multi-filter > div.task-multi-panel, .audit-multi-filter > div.audit-multi-panel) label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  min-width: 0 !important;
}

:is(.cs-multi-filter > div.cs-multi-panel, .record-multi-filter > div.record-multi-panel, .task-multi-filter > div.task-multi-panel, .audit-multi-filter > div.audit-multi-panel) span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.2;
}

.date-range-control .range-trigger {
  min-height: 44px;
  min-width: 0 !important;
  padding: 7px 10px;
  gap: 8px;
  border-radius: 14px;
}

.date-range-control .calendar-icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 15px;
  flex: 0 0 28px !important;
}

.date-range-control .range-picker-label {
  gap: 1px;
  min-width: 0 !important;
  overflow: hidden !important;
}

.date-range-control .range-picker-label small {
  font-size: 9px;
  line-height: 1;
}

.date-range-control .range-picker-label b {
  display: block !important;
  font-size: 12px;
  line-height: 1.1;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Final floating-filter guardrail: dropdowns must overlay tables/cards without clipping. */
.cs-document-database-card,
.record-list-card,
.deleted-records-card,
.task-section,
.audit-log-card,
.cs-filter-bar,
.record-filter-bar,
.task-filters,
.audit-filter-bar {
  overflow: visible !important;
}

.cs-filter-bar,
.record-filter-bar,
.task-filters,
.audit-filter-bar {
  position: relative !important;
  z-index: 60 !important;
}

.record-list-card .table-wrap,
.record-list-card .compact-table,
.deleted-records-card .table-wrap,
.deleted-records-card .compact-table {
  position: relative;
  z-index: 1;
}

.cs-multi-filter,
.record-multi-filter,
.task-multi-filter,
.audit-multi-filter {
  position: relative !important;
  overflow: visible !important;
}

.cs-multi-filter[open],
.record-multi-filter[open],
.task-multi-filter[open],
.audit-multi-filter[open] {
  z-index: 3200 !important;
}

.cs-multi-filter[data-cs-multi="module"] > div.cs-multi-panel,
.cs-multi-filter[data-cs-multi="createdBy"] > div.cs-multi-panel,
.cs-multi-filter[data-cs-multi="issuedBy"] > div.cs-multi-panel,
.cs-multi-filter[data-cs-multi="approvedBy"] > div.cs-multi-panel,
.record-multi-filter[data-record-multi="createdBy"] > div.record-multi-panel,
.record-multi-filter[data-record-multi="issuedBy"] > div.record-multi-panel,
.record-multi-filter[data-record-multi="approvedBy"] > div.record-multi-panel,
.record-multi-filter[data-record-multi="paymentStyle"] > div.record-multi-panel,
.task-multi-filter[data-task-multi="createdBy"] > div.task-multi-panel,
.task-multi-filter[data-task-multi="issuedBy"] > div.task-multi-panel,
.task-multi-filter[data-task-multi="approvedBy"] > div.task-multi-panel,
.task-multi-filter[data-task-multi="status"] > div.task-multi-panel,
.audit-multi-filter[data-audit-multi="action"] > div.audit-multi-panel,
.audit-multi-filter[data-audit-multi="actor"] > div.audit-multi-panel,
.audit-multi-filter[data-audit-multi="targetType"] > div.audit-multi-panel {
  left: auto !important;
  right: 0 !important;
}

/* P0 final filter contract: never force a filter row wider than the page. */
body:not(.mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.05fr) repeat(4, minmax(150px, .85fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: minmax(44px, auto) !important;
  gap: 8px 10px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

body:not(.mobile-preview-mode) :is(.cs-filter-bar > input, .record-filter-search, .task-filters > input, .audit-filter-bar .field:first-child) {
  grid-column: 1 !important;
  grid-row: span 2 !important;
  min-width: 0 !important;
  min-height: 100% !important;
}

body:not(.mobile-preview-mode) :is(.cs-filter-bar > input, .record-filter-search input, .task-filters > input, .audit-filter-bar .field:first-child input) {
  min-height: 100% !important;
}

body:not(.mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) .date-range-control {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 200px !important;
  justify-self: stretch !important;
}

body:not(.mobile-preview-mode) .record-filter-reset,
body:not(.mobile-preview-mode) .audit-clear-filter,
body:not(.mobile-preview-mode) #csResetWindow {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 120px !important;
  justify-self: stretch !important;
}

@media (max-width: 1180px) {
  body:not(.mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) {
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(145px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :is(.cs-filter-bar > input, .record-filter-search, .task-filters > input, .audit-filter-bar .field:first-child) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 48px !important;
  }

  :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) .date-range-control {
    grid-column: span 1 !important;
    max-width: 100% !important;
  }
}

/* P3 mobile guard: real phones and desktop Preview Guideline phone preview share these final rules. */
body:is(.mobile-layout-mode, .mobile-preview-mode) {
  overflow-x: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.main, .app-main, .content, .page, .module-page) {
  max-width: 100%;
  overflow-x: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.main, .app-main)::after {
  content: "";
  display: block;
  height: calc(108px + env(safe-area-inset-bottom));
}

body:is(.mobile-layout-mode, .mobile-preview-mode).has-modal-open {
  overflow: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-backdrop {
  align-items: flex-start !important;
  justify-items: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(10px, env(safe-area-inset-top)) 8px calc(16px + env(safe-area-inset-bottom)) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-card {
  width: min(560px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom));
  padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
}

@supports (height: 100svh) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-card {
    max-height: calc(100svh - 20px) !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-actions {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100%;
  margin-top: 12px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-actions .btn {
  width: 100%;
  min-height: 50px;
  white-space: normal;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar > input, .record-filter-search, .task-filters > input, .audit-filter-bar .field:first-child) {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) :is(.date-range-control, .record-filter-reset, .audit-clear-filter),
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) #csResetWindow {
  grid-column: span 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (min-width: 390px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-filter-bar, .record-filter-bar, .task-filters, .audit-filter-bar) .date-range-control {
    grid-column: span 2 !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter) > :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) {
  width: min(340px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(380px, calc(100dvh - 156px)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  overflow: auto !important;
  z-index: 60;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.task-board, .task-board.task-summary-grid, #taskResults .task-board, #taskResults .task-board.task-summary-grid) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.task-card, .task-summary-card) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-card :is(h3, .badge, .status, dt, dd) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .task-summary-list div {
  grid-template-columns: minmax(92px, .38fr) minmax(0, 1fr) !important;
  align-items: start;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-document-panel, .cs-doc-group, .cs-compact-row, .cs-compact-main, .cs-mini-details, .cs-system-facts, .cs-payment-row-list, .task-payment-rows, .task-payment-row-detail) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-document-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-document-summary span {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
  gap: 2px;
  min-height: 48px;
  padding: 8px 10px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-document-summary :is(b, small) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-mini-details span, .cs-system-facts span) {
  display: grid !important;
  grid-template-columns: minmax(86px, .42fr) minmax(0, 1fr);
  gap: 6px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-mini-details b, .cs-system-facts b, .task-payment-row-detail dd, .audit-log-item *) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .audit-bulk-row {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .audit-bulk-select-inline {
  width: 58px;
  min-width: 58px;
  min-height: 50px;
  padding: 0 !important;
  justify-content: center !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .audit-bulk-select-inline span {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .audit-log-item {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .audit-log-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.audit-detail-grid, .audit-change-grid) {
  grid-template-columns: minmax(0, 1fr) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .calendar {
  overflow-x: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .calendar-day {
  min-width: 0 !important;
  padding: 6px 4px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .calendar :is(.event, .more-events) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
}

@media (max-width: 430px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.task-summary-list div, .cs-mini-details span, .cs-system-facts span) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 340px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-document-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Customer Payment invoice controls must stay inside the card on real phones and preview mode. */
@media (max-width: 760px) {
  .customer-payment-invoice-reset-row {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden;
  }

  .customer-payment-compact-invoice {
    grid-template-columns: minmax(70px, .34fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .customer-payment-compact-invoice .field,
  .customer-payment-compact-invoice .invoice-number-control,
  .customer-payment-compact-invoice .invoice-digit-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .customer-payment-compact-invoice select {
    min-height: 40px;
    height: 40px;
    padding-inline: 8px;
  }

  .customer-payment-compact-invoice .invoice-digit-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 40px !important;
    height: 40px;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden;
  }

  .customer-payment-compact-invoice .invoice-lock-window,
  .customer-payment-compact-invoice .invoice-lock-window .invoice-digit {
    min-width: 0;
    min-height: 32px !important;
    height: 32px;
    border-radius: 12px;
  }

  .customer-payment-compact-invoice .invoice-lock-window .invoice-digit {
    font-size: clamp(15px, 4.6vw, 17px);
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .customer-payment-invoice-reset-row {
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .customer-payment-compact-invoice {
  grid-template-columns: minmax(70px, .34fr) minmax(0, 1fr) !important;
  gap: 7px !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .customer-payment-compact-invoice :is(.field, .invoice-number-control, .invoice-digit-row) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .customer-payment-compact-invoice select {
  min-height: 40px;
  height: 40px;
  padding-inline: 8px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .customer-payment-compact-invoice .invoice-digit-row {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  min-height: 40px !important;
  height: 40px;
  gap: 3px !important;
  padding: 3px !important;
  overflow: hidden;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .customer-payment-compact-invoice :is(.invoice-lock-window, .invoice-lock-window .invoice-digit) {
  min-width: 0;
  min-height: 32px !important;
  height: 32px;
  border-radius: 12px;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .customer-payment-compact-invoice .invoice-lock-window .invoice-digit {
  font-size: clamp(15px, 4.6vw, 17px);
}

/* Document Database final placement: keep business details, payment rows, and proof
   in the same right-side content area for CS/SO shared records. */
.cs-compact-row {
  grid-template-columns: minmax(230px, .22fr) minmax(0, 1fr) !important;
  align-items: start !important;
}

.cs-compact-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.cs-compact-content .cs-mini-details,
.cs-compact-content .cs-payment-row-list,
.cs-compact-content .cs-photo-strip,
.cs-compact-content .kk-ordering-history {
  grid-column: 1 / -1 !important;
  min-width: 0;
  max-width: 100%;
}

.cs-compact-content .cs-payment-row-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 8px;
}

.cs-compact-content .cs-photo-strip {
  justify-content: flex-start;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-compact-row {
  grid-template-columns: 1fr !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-compact-content {
  grid-template-columns: 1fr !important;
  gap: 7px;
  overflow: visible;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-compact-content .cs-payment-row-list {
  grid-template-columns: 1fr !important;
}

/* Customer Payment edit desktop head: keep quantity/date/branch/issued-by on one row. */
body:not(.mobile-preview-mode):not(.mobile-layout-mode) .modal-card #editRecordForm .customer-payment-details-head {
  display: grid !important;
  grid-template-columns:
    minmax(150px, .8fr)
    minmax(160px, .8fr)
    minmax(170px, .9fr)
    minmax(190px, 1fr) !important;
  align-items: end !important;
  gap: 10px !important;
}

body:not(.mobile-preview-mode):not(.mobile-layout-mode) .modal-card #editRecordForm .customer-payment-details-head .customer-payment-staff-grid {
  display: contents !important;
}

body:not(.mobile-preview-mode):not(.mobile-layout-mode) .modal-card #editRecordForm .customer-payment-details-head .field {
  min-width: 0 !important;
  margin: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-card #editRecordForm .customer-payment-details-head {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .modal-card #editRecordForm .customer-payment-details-head .customer-payment-staff-grid {
  display: contents !important;
}

/* Amount wheel inputs must not inherit regular select/input padding in edit modal. */
.modal-card #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-number-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.modal-card #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field input.amount-digit,
.modal-card #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field input.amount-cent-digit {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.modal-card #editRecordForm [data-edit-customer-payment-row] .customer-payment-amount-field .amount-lock-window {
  min-width: 0 !important;
  overflow: hidden !important;
}