/* Extracted final layout contract layer from styles-layout.css. Keep this file loaded after styles-layout.css. */

/* Mobile UI refinement contract / Mobile header icon-sync contract:
   Compact chrome, color-selected filters, horizontal actions, and multi-column
   Store/Payment forms must stay stable across real mobile and preview mode. */
body:is(.mobile-layout-mode, .mobile-preview-mode).is-app-scrolled .topbar {
  background: rgba(248, 241, 239, .50) !important;
  border-bottom-color: rgba(226, 205, 204, .34) !important;
  box-shadow: 0 10px 26px rgba(42, 31, 34, .08) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions {
  grid-template-columns: minmax(118px, min(46vw, 176px)) minmax(0, 1fr) repeat(4, 34px) !important;
  gap: 5px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .admin-switcher {
  grid-column: 1 !important; gap: 0 !important; margin: 0 !important; min-width: 0 !important; width: auto !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .sync-health { grid-column: 3; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .notification-center { grid-column: 4; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .lang-icon { grid-column: 5; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .logout-icon-btn { grid-column: 6; }

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .admin-switcher span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions :is(.sync-trigger, .notification-trigger, .lang-icon, .logout-icon-btn) {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  overflow: visible !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .sync-trigger :is(b, em) {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .logout-icon-btn b {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .logout-icon-btn span {
  font-size: 15px !important;
  line-height: 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .lang-icon {
  grid-template-rows: 1fr !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .lang-icon span {
  font-size: 15px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-trigger {
  position: relative !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-trigger b {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-trigger span {
  transform: translateY(1px);
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .notification-trigger em {
  position: absolute !important;
  top: -5px !important;
  right: -2px !important;
  display: grid !important;
  place-items: center !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 4px !important;
  border: 1px solid rgba(255, 252, 250, .96) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.range-trigger-caret, .range-month-label span) {
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid currentColor !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-calendar-panel {
  position: fixed !important;
  top: max(88px, calc(env(safe-area-inset-top) + 78px)) !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: min(560px, calc(100dvh - 112px - env(safe-area-inset-bottom))) !important;
  padding: 8px !important;
  border-radius: 16px !important;
  overflow: auto !important;
  z-index: 90 !important;
}

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

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-boundary {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-boundary :is(span, b) {
  white-space: nowrap !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-boundary span {
  font-size: 10px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-boundary b {
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-calendar-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
  margin: 6px 0 4px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-month-label {
  justify-content: start !important;
  min-width: 0 !important;
  min-height: 32px !important;
  width: 100% !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-month-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 30px) !important;
  gap: 5px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-nav {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

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

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-weekdays span {
  min-width: 0 !important;
  font-size: 10px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-day {
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  border-radius: 8px !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) label {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  border: 1px solid rgba(226, 205, 204, .82) !important;
  border-radius: 12px !important;
  background: rgba(255, 253, 250, .92) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) label input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  margin: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) label:has(input[type="checkbox"]:checked) {
  border-color: rgba(151, 76, 98, .52) !important;
  background: rgba(151, 76, 98, .13) !important;
  color: var(--brand) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) label span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .record-action-cell {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(38px, max-content) !important;
  grid-template-columns: auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 8px !important;
  min-height: 54px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 7px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .record-action-cell::before {
  grid-row: 1 !important;
  margin: 0 4px 0 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .record-action-cell :is(.record-icon-action, .record-transfer-status-icon) {
  grid-row: 1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .record-bulk-toolbar > summary::after {
  flex: 0 0 auto !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row].customer-payment-row-card) {
  gap: 7px !important;
  padding: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) .field {
  gap: 4px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) .field > span {
  font-size: 10px !important;
  line-height: 1.08 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) :is(select, input) {
  min-height: 36px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) .customer-payment-row-card-fields {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: end !important;
}

@media (max-width: 374px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row]) .customer-payment-row-card-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

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

@media (max-width: 374px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-stat-grid > button {
  min-height: 70px !important;
  padding: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-stat-grid > button span {
  font-size: 10.5px !important;
  line-height: 1.1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-stat-grid > button b {
  font-size: clamp(20px, 6vw, 28px) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.store-db-manual-entry, .store-db-batch-photo-panel) > summary {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.store-db-manual-entry, .store-db-batch-photo-panel) > summary small {
  grid-column: 2 !important;
  justify-self: start !important;
  max-width: 100% !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.store-db-manual-grid, .shared-store-item-form .store-db-manual-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

@media (min-width: 620px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.store-db-manual-grid, .shared-store-item-form .store-db-manual-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-grid :is(.store-db-left-field, .store-db-right-field) {
  grid-column: auto !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-grid :is(.store-db-content-field, .store-db-remark-field, .store-db-branch-allocation-field, .store-db-manual-photo-field) {
  grid-column: 1 / -1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-manual-grid :is(input, select, textarea) {
  min-height: 36px !important;
  padding: 7px 9px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 0 8px 8px !important;
}

@media (min-width: 430px) {
  body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-controls :is(.btn, .store-db-file-button) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 7px 8px !important;
  font-size: 11px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-status {
  margin: 0 8px 8px !important;
  padding: 7px 9px !important;
  font-size: 11px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-list {
  padding: 0 8px 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-row {
  position: relative !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(78px, .7fr) minmax(0, 1fr) auto !important;
  gap: 6px !important;
  padding: 8px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-row input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  margin: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-row:has(input[type="checkbox"]:checked) {
  border-color: rgba(72, 132, 121, .62) !important;
  background: rgba(231, 247, 244, .95) !important;
  box-shadow: inset 0 0 0 2px rgba(72, 132, 121, .16) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-batch-photo-row small {
  grid-column: 1 / -1 !important;
  white-space: normal !important;
  line-height: 1.18 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-product-asset-row {
  grid-template-columns: minmax(0, 1fr) minmax(88px, .75fr) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-product-asset-row > input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.store-db-product-order, .store-db-product-primary) {
  position: relative !important;
  z-index: 2 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .store-db-product-primary input[type="checkbox"] {
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
}

/* Mobile popover/header correction contract:
   Card-payment fields stay hidden until card style is selected; fixed popovers
   must fit inside the phone viewport and never get clipped by their parent card. */
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.customer-payment-row-card, #editRecordForm [data-edit-customer-payment-row], .modal-card #editRecordForm [data-edit-customer-payment-row]) .customer-payment-row-card-fields.is-hidden {
  display: none !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar {
  gap: 5px !important;
  padding-top: max(6px, env(safe-area-inset-top)) !important;
  padding-bottom: 6px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-title h1 {
  font-size: clamp(19px, 5vw, 25px) !important;
  line-height: 1 !important;
  overflow-wrap: anywhere !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-title .badge {
  padding: 3px 8px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .topbar-actions .admin-switcher select {
  min-height: 34px !important;
  height: 34px !important;
  padding-block: 5px !important;
  padding-inline: 9px 24px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter)[open] > :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  top: clamp(210px, 34dvh, 300px) !important;
  width: auto !important;
  max-width: none !important;
  max-height: min(260px, 42dvh) !important;
  overflow: auto !important;
  transform: none !important;
  z-index: 130 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 8px !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(42, 31, 34, .2) !important;
}

body.mobile-preview-mode :is(.cs-multi-filter, .record-multi-filter, .task-multi-filter, .audit-multi-filter)[open] > :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) {
  left: 50% !important;
  right: auto !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: min(260px, calc(100dvh - 210px)) !important;
  transform: translateX(-50%) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-multi-panel, .record-multi-panel, .task-multi-panel, .audit-multi-panel) label {
  min-height: 34px !important;
  padding: 6px 8px !important;
}

body.mobile-layout-mode .range-calendar-panel {
  top: max(76px, calc(env(safe-area-inset-top) + 70px)) !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  max-height: min(430px, calc(100dvh - 92px - env(safe-area-inset-bottom))) !important;
}

body.mobile-preview-mode .range-calendar-panel {
  top: max(116px, calc(env(safe-area-inset-top) + 108px)) !important;
  left: 50% !important;
  right: auto !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: min(430px, calc(100dvh - 132px)) !important;
  transform: translateX(-50%) !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-footer {
  margin-top: 6px !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) .range-footer button { min-height: 30px !important; padding: 5px 8px !important; font-size: 11px !important; }

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row :is(.detail-item, .detail-item dd, .record-detail-text, .full-record) {
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.record-list-card, .deleted-records-card) .details-row :is(.detail-item dd, .record-detail-text, .full-record) {
  overflow-x: hidden !important;
}

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

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-compact-row .cs-mini-details, .cs-system-facts) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-mini-details span.is-long { grid-column: 1 / -1; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .cs-document-timeline { margin-top: 8px; }

body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.preview-guideline-split, .preview-guideline-grid, .branch-location-form), body:is(.mobile-layout-mode, .mobile-preview-mode) .branch-location-list > div:not(.empty) { grid-template-columns: 1fr !important; }
body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.preview-phone-panel, .branch-location-admin-panel, .branch-location-form, .branch-location-address-field, #branchLocationAddress) { min-width: 0; max-width: 100%; }
body:is(.mobile-layout-mode, .mobile-preview-mode) .branch-location-actions { grid-column: auto; justify-content: stretch; }

@media (max-width: 340px) { body:is(.mobile-layout-mode, .mobile-preview-mode) :is(.cs-compact-row .cs-mini-details, .cs-system-facts) { grid-template-columns: 1fr !important; } }