/* ZABR Mobile Layout Guard v1
   Central mobile-width/RTL/form/detail rules for every non-map page. */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  :is(main,section,article,form,fieldset,
      .app,.admin.app,.worker-app,.worker-driver-app,.driver-admin-app,.admin-driver-app,
      .admin-content-scroll,.admin-page,.page,.records-area,.records-content,
      .detail-view,.detail-section,.detail-grid,.detail-cell,.admin-detail-hero,
      .dialog-body,#modalBody,.modal-body,.sheet-body,.sheet-content,
      .form,.form-grid,.report-form,.report-form-card,.payment-details-host,
      .repair-management-box,.zabr-form,.trip-drawer,.zabr-barnameh-embed) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  img, video {
    max-width: 100%;
  }

  /* Bottom sheets / details must use the phone width, not a desktop column. */
  dialog.admin-sheet,
  dialog.worker-sheet,
  dialog.zdlg-form,
  dialog.zdlg-native,
  .sheet.overlay .sheet-panel,
  .repair-management-modal .repair-management-box,
  .driver-modal,
  .z-modal-box,
  .zconfirm-sheet,
  .tf-sheet,
  .zabr-al-sheet {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  dialog.admin-sheet,
  dialog.worker-sheet {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .sheet.overlay .sheet-panel,
  .driver-modal,
  .repair-management-modal .repair-management-box,
  .z-modal-box {
    margin-inline: auto !important;
  }

  /* The repeated half-empty details bug: every detail grid is one full-width column. */
  :is(.detail-grid,.history-simple-grid,.filter-sheet-grid,.repair-issue-grid,
      .payment-details-host,.report-form-grid,.driver-account-form,
      .rc-grid4,.rc-grid2,.zabr-form .grid,.zabr-form .amount-grid,
      .zabr-form .route-box,.zabr-form .calculation,
      .tf-grid,.tf-photos,.tf-shot .tf-top,.tf-shot .tf-pair,
      .tf-shot .tf-row2,.tf-shot .tf-stats,.trip-deduction-row) {
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
  }

  .detail-view,
  .detail-section,
  .detail-grid,
  .detail-cell,
  .admin-detail-hero,
  .payment-details-host,
  .readonly-modal {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .detail-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(86px,.75fr) minmax(0,1.25fr) !important;
    align-items: start !important;
    gap: 10px !important;
  }
  .detail-row > * {
    min-width: 0 !important;
    max-width: none !important;
    overflow-wrap: anywhere;
  }
  .detail-row b,
  .detail-row strong {
    width: 100% !important;
    max-width: none !important;
  }

  /* Forms: a phone should never keep a desktop two-column input layout. */
  :is(.form-grid,.field-pair,.driver-modal .tf-grid,.driver-modal .tf-photos,
      .zabr-form .grid,.zabr-form .amount-grid,.zabr-form .route-box,
      .zabr-form .calculation,.report-form,.report-form-card) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  :is(input,select,textarea,.input,.select,.note-input,.date-btn,.btn,.primary,.outline) {
    max-width: 100%;
  }
  form, fieldset {
    width: 100%;
  }

  /* Tabs: readable and full width; no tiny six-column desktop tabs. */
  body:not(.driver-admin-body) .record-tabs {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  body:not(.driver-admin-body) .record-tabs button {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
  :is(.report-tabs,.tabs) {
    width: 100% !important;
    max-width: 100% !important;
    overscroll-behavior-inline: contain;
  }
  .report-tabs {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  :is(.history-tabs,.history-status-tabs,.salary-tabs) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tables may scroll inside their own box, never move the whole page sideways. */
  :is(.table-wrap,.z-table-wrap,.repair-table-wrap) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards/rows must be allowed to shrink inside RTL grids. */
  :is(.card,.zr-card,.zr-row,.zr-main,.zr-title-stack,.history-simple-card,
      .history-simple-title,.candidate-info,.driver-sheet-copy,
      .trade-current-copy,.worker-welcome-brand,.admin-brand) {
    min-width: 0 !important;
  }

  .zr-row.zr-has-value {
    grid-template-columns: 50px minmax(0,1fr) !important;
  }
  .zr-row.zr-has-value .zr-value {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    border-right: 0 !important;
    padding-right: 0 !important;
    align-items: flex-start !important;
  }

  /* Embedded barname/detail drawer. */
  .zabr-barnameh-embed .trip-drawer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .zabr-barnameh-embed :is(.hero-grid,.modal-actions) {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

/* ===== Login: one mobile screen, no pointless scroll. ===== */
@media (max-width: 620px) {
  body.portal-login {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  body.portal-login .zp-shell {
    height: 100dvh !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: max(6px,env(safe-area-inset-top)) 8px max(6px,env(safe-area-inset-bottom)) !important;
  }
  body.portal-login .zp-login {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }
  body.portal-login .zp-login-pane {
    order: 1;
    flex: 0 0 auto;
    min-height: 0 !important;
  }
  body.portal-login .zp-login-visual {
    order: 2;
    flex: 1 1 auto;
    min-height: 92px !important;
    border-radius: 20px !important;
    background-position: center 48% !important;
  }
  body.portal-login .zp-visual-brand {
    display: none !important;
  }
  body.portal-login .zp-visual-copy {
    right: 9px !important;
    left: 9px !important;
    bottom: 9px !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
  }
  body.portal-login .zp-visual-copy h3 {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  body.portal-login .zp-visual-copy p {
    display: none !important;
  }
  body.portal-login .zp-auth-card {
    max-width: none !important;
    padding: 10px 13px 11px !important;
    border-radius: 20px !important;
  }
  body.portal-login .zp-auth-head .mini-logo {
    width: 58px !important;
    height: 58px !important;
    border-radius: 17px !important;
  }
  body.portal-login .zp-auth-head h1 {
    margin: 5px 0 0 !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
  }
  body.portal-login .zp-auth-head p {
    display: none !important;
  }
  body.portal-login .zp-login-status {
    margin-top: 6px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
  }
  body.portal-login .zp-field {
    margin-top: 8px !important;
  }
  body.portal-login .zp-field label {
    margin-bottom: 4px !important;
    font-size: 10.5px !important;
  }
  body.portal-login .zp-input-wrap {
    min-height: 46px !important;
    border-radius: 14px !important;
  }
  body.portal-login .zp-input-wrap input {
    height: 44px !important;
    font-size: 16px !important;
  }
  body.portal-login .zp-primary,
  body.portal-login .zp-google {
    min-height: 46px !important;
    margin-top: 7px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
  }
  body.portal-login .zp-login-links {
    margin-top: 4px !important;
  }
  body.portal-login .zp-divider {
    margin: 7px 0 0 !important;
  }
  body.portal-login .zp-security {
    display: none !important;
  }
}

/* ===== Dashboard: six main modules visible without initial mobile scroll. ===== */
@media (max-width: 620px) {
  body.portal-dashboard {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  body.portal-dashboard .zp-shell {
    height: 100dvh !important;
    width: 100% !important;
    padding: max(5px,env(safe-area-inset-top)) 7px max(5px,env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  body.portal-dashboard .zp-dashboard,
  body.portal-dashboard .zp-main {
    height: 100% !important;
    min-height: 0 !important;
  }
  body.portal-dashboard .zp-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  body.portal-dashboard .zp-userbar {
    flex: 0 0 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    border-radius: 16px !important;
  }
  body.portal-dashboard .zp-dashboard-brand-mini img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }
  body.portal-dashboard .zp-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
  body.portal-dashboard .zp-user strong {
    font-size: 11px !important;
  }
  body.portal-dashboard .zp-user small {
    font-size: 9px !important;
  }
  body.portal-dashboard .zp-user-actions .zp-pill {
    min-height: 36px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }
  body.portal-dashboard .zp-hero {
    flex: 0 0 104px !important;
    min-height: 104px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background-position: center 52% !important;
  }
  body.portal-dashboard .zp-hero-copy {
    padding: 11px 13px !important;
  }
  body.portal-dashboard .zp-kicker {
    font-size: 9px !important;
  }
  body.portal-dashboard .zp-hero h1 {
    margin-top: 1px !important;
    font-size: 19px !important;
    line-height: 1.28 !important;
  }
  body.portal-dashboard .zp-hero p {
    margin-top: 3px !important;
    font-size: 9.5px !important;
    line-height: 1.45 !important;
    max-width: 62% !important;
  }
  body.portal-dashboard .zp-modules {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(0,1fr) !important;
    gap: 6px !important;
  }
  body.portal-dashboard .zp-module {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 9px !important;
    border-radius: 16px !important;
  }
  body.portal-dashboard .zp-module-head {
    gap: 5px !important;
  }
  body.portal-dashboard .zp-module h3 {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  body.portal-dashboard .zp-module p {
    display: none !important;
  }
  body.portal-dashboard .zp-module-icon {
    width: 35px !important;
    height: 35px !important;
    border-radius: 11px !important;
  }
  body.portal-dashboard .zp-module-icon img {
    width: 20px !important;
    height: 20px !important;
  }
  body.portal-dashboard .zp-module-go {
    width: 28px !important;
    height: 28px !important;
    left: 7px !important;
    bottom: 7px !important;
    font-size: 17px !important;
  }
  body.portal-dashboard .zp-dashboard-foot {
    display: none !important;
  }
}

@media (max-width: 370px) {
  body.portal-dashboard .zp-modules {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.portal-dashboard .zp-module h3 {
    font-size: 10.5px !important;
  }
}


/* ===== ZABR Mobile Layout Engine runtime layer v2 =====
   Works from .zme-mobile, not only CSS media queries, so Android WebView and
   mobile browsers cannot fall back to desktop split layouts. */
html.zme-mobile,
html.zme-mobile body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}

html.zme-mobile body > *,
html.zme-mobile :is(main,section,article,form,fieldset,.page,.app,.z-app){
  min-width:0!important;
}

/* Universal mobile sheet/detail positioning. This intentionally neutralizes
   stale left:50% / transform combinations from desktop components. */
html.zme-mobile .sheet.overlay{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  max-width:none!important;
}

html.zme-mobile .sheet.overlay > .sheet-panel{
  position:absolute!important;
  inset:auto 6px 0 6px!important;
  left:6px!important;
  right:6px!important;
  bottom:0!important;
  top:auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  transform:none!important;
  max-height:min(94dvh,var(--zme-vh,94dvh))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:24px 24px 0 0!important;
  box-sizing:border-box!important;
}

/* Standalone sheets may use bottom/transform as their CLOSED state.
   Never override that state globally. Only constrain their size. */
html.zme-mobile .zme-sheet:not(.sheet-panel){
  max-width:calc(100vw - 12px)!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

html.zme-mobile dialog.zme-surface{
  width:calc(100% - 12px)!important;
  max-width:calc(100% - 12px)!important;
  min-width:0!important;
  margin:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
}

html.zme-mobile .zme-surface,
html.zme-mobile .zme-surface *,
html.zme-mobile .zme-detail,
html.zme-mobile .zme-detail *{
  box-sizing:border-box;
}

html.zme-mobile .zme-detail,
html.zme-mobile .zme-detail :is(.detail-view,.detail-section,.detail-grid,.detail-cell,.readonly-state,.admin-detail-hero),
html.zme-mobile :is(.detail-view,.detail-section,.detail-grid,.detail-cell,.readonly-state,.admin-detail-hero){
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

html.zme-mobile .zme-field-grid,
html.zme-mobile :is(.detail-grid,.history-simple-grid,.filter-sheet-grid,.repair-issue-grid,
  .payment-details-host,.report-form-grid,.driver-account-form,.form-grid,.field-pair,
  .rc-grid4,.rc-grid2,.tf-grid,.tf-photos,.trip-deduction-row){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

html.zme-mobile .zme-form,
html.zme-mobile .zme-form :is(.field,label,input,select,textarea,fieldset,.input-group,.form-group){
  min-width:0!important;
  max-width:100%!important;
}

html.zme-mobile :is(input,select,textarea,button,.btn,.primary,.outline){
  max-width:100%;
}

html.zme-mobile .detail-row{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(82px,.75fr) minmax(0,1.25fr)!important;
  gap:10px!important;
  align-items:start!important;
}

html.zme-mobile .detail-row > *{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

html.zme-mobile .detail-row :is(b,strong){
  width:100%!important;
  max-width:none!important;
}

/* Dynamic tabs stay usable even when six or more are created later. */
html.zme-mobile .zme-tabs{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
html.zme-mobile body:not(.driver-admin-body) .record-tabs,
html.zme-mobile .report-tabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
}
html.zme-mobile .zme-tabs > *{
  min-width:0!important;
}

/* Tables never make the whole page wider. */
html.zme-mobile .zme-table-host{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
html.zme-mobile .zme-table-host > table{
  max-width:none!important;
}

/* Records with side metrics collapse instead of squeezing content into half width. */
html.zme-mobile .zr-row.zr-has-value{
  grid-template-columns:50px minmax(0,1fr)!important;
}
html.zme-mobile .zr-row.zr-has-value .zr-value{
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
  padding-right:0!important;
  border-right:0!important;
  align-items:flex-start!important;
}

/* Embedded/master-detail drawers use the full phone canvas. */
html.zme-mobile .trip-drawer,
html.zme-mobile .zabr-barnameh-embed .trip-drawer{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  transform:none!important;
}
html.zme-mobile .zabr-barnameh-embed :is(.hero-grid,.modal-actions){
  grid-template-columns:minmax(0,1fr)!important;
}

/* Keep map engines untouched; only their surrounding dialogs can be normalized. */
html.zme-mobile :is(#map,.maplibregl-map,.mapboxgl-map,.leaflet-container,.gps-map,[data-map-root]){
  max-width:none!important;
}



/* Calendar/date pickers own their visibility state. Never let the universal
   mobile sheet engine force a closed picker on-screen. */
html.zme-mobile .jcal-sheet:not(.open){
  bottom:-120%!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important;
}
html.zme-mobile .jcal-sheet.open{
  pointer-events:auto!important;
}


/* ===== ZABR Mobile Density Engine v1 =====
   Short fields pack side-by-side; long text/media/actions stay full-width. */
html.zme-mobile .zme-dense-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  align-items:start!important;
}

html.zme-mobile .zme-dense-grid > .zme-compact-item{
  grid-column:auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:100%!important;
}

html.zme-mobile .zme-dense-grid > .zme-wide-item{
  grid-column:1 / -1!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}

html.zme-mobile .zme-dense-grid > label,
html.zme-mobile .zme-dense-grid > .field,
html.zme-mobile .zme-dense-grid > .form-group,
html.zme-mobile .zme-dense-grid > .input-group{
  margin-top:0!important;
  margin-bottom:0!important;
}

html.zme-mobile .zme-dense-grid > label :is(input,select),
html.zme-mobile .zme-dense-grid > .field :is(input,select){
  min-height:46px!important;
}

html.zme-mobile .zme-dense-grid > .detail-cell,
html.zme-mobile .zme-dense-grid > .stat,
html.zme-mobile .zme-dense-grid > .history-simple-box{
  min-width:0!important;
}

/* Compact read-only detail sections: two short facts per row on phones. */
html.zme-mobile .detail-section.zme-detail-pack{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}

html.zme-mobile .detail-section.zme-detail-pack > h5{
  grid-column:1 / -1!important;
  margin:0 0 2px!important;
}

html.zme-mobile .detail-section.zme-detail-pack > .detail-row{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:3px!important;
  min-height:66px!important;
  margin:0!important;
  padding:9px 10px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.025)!important;
}

html.zme-mobile .detail-section.zme-detail-pack > .detail-row.zme-wide-item{
  grid-column:1 / -1!important;
  min-height:auto!important;
}

html.zme-mobile .detail-section.zme-detail-pack > .detail-row span{
  width:100%!important;
  max-width:100%!important;
  flex:none!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  color:#7f98a3!important;
}

html.zme-mobile .detail-section.zme-detail-pack > .detail-row b,
html.zme-mobile .detail-section.zme-detail-pack > .detail-row strong{
  width:100%!important;
  max-width:100%!important;
  flex:none!important;
  text-align:right!important;
  font-size:12.5px!important;
  line-height:1.55!important;
  overflow-wrap:anywhere!important;
}

/* Existing central rules used to force all mobile forms to one column.
   Density classes intentionally override those rules after runtime classification. */
html.zme-mobile .zme-field-grid.zme-dense-grid,
html.zme-mobile :is(.form-grid,.field-pair,.detail-grid,.history-simple-grid,
  .filter-sheet-grid,.repair-issue-grid,.payment-details-host,.report-form-grid,
  .driver-account-form,.rc-grid4,.rc-grid2,.tf-grid,.trip-deduction-row).zme-dense-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Useful fixed compact groups that are safe even before JS classification. */
html.zme-mobile :is(.history-simple-grid,.stats,.field-pair){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Slightly wider phones/tablets can fit three genuinely-short fields. */
@media (min-width:540px) and (max-width:768px){
  html.zme-mobile .zme-dense-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  html.zme-mobile .detail-section.zme-detail-pack{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Very narrow phones keep two columns but reduce internal spacing instead of
   returning to huge vertical single-column forms. */
@media (max-width:360px){
  html.zme-mobile .zme-dense-grid,
  html.zme-mobile .detail-section.zme-detail-pack{
    gap:6px!important;
  }
  html.zme-mobile .detail-section.zme-detail-pack > .detail-row{
    padding:8px!important;
  }
}



/* ===== ZABR Structural Density Fallback v1 =====
   Works even before/without runtime classification. It targets structure,
   not a specific page, so approvals/details/forms across all modules inherit it. */
@media (max-width:768px){
  html.zme-mobile :is(
    .detail-grid,.form-grid,.field-pair,.filter-sheet-grid,.report-form-grid,
    .driver-account-form,.history-simple-grid,.payment-details-host,
    .repair-issue-grid,.trip-deduction-row,.rc-grid4,.rc-grid2,.tf-grid,.stats
  ){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    align-items:start!important;
  }

  /* Generic .grid is compact only when it really contains form/detail/stat fields. */
  html.zme-mobile .grid:has(> label),
  html.zme-mobile .grid:has(> .field),
  html.zme-mobile .grid:has(> .detail-cell),
  html.zme-mobile .grid:has(> .stat),
  html.zme-mobile form:has(> label + label){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
  }

  /* Every short direct child can share a row. */
  html.zme-mobile :is(
    .detail-grid,.form-grid,.field-pair,.filter-sheet-grid,.report-form-grid,
    .driver-account-form,.history-simple-grid,.payment-details-host,
    .repair-issue-grid,.trip-deduction-row,.rc-grid4,.rc-grid2,.tf-grid,.stats
  ) > *{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Long/semantic content is always full width. */
  html.zme-mobile :is(
    .detail-grid,.form-grid,.field-pair,.filter-sheet-grid,.report-form-grid,
    .driver-account-form,.history-simple-grid,.payment-details-host,
    .repair-issue-grid,.trip-deduction-row,.rc-grid4,.rc-grid2,.tf-grid,.stats,
    .grid
  ) > :is(
    .zme-wide-item,.wide,.full,.full-width,.notice,.error,.actions,.attachments,
    .upload,.preview,.media-view,.summary,.empty,.wizard-actions,
    h1,h2,h3,h4,h5,h6,hr,fieldset,button[type="submit"],.primary.wide,.btn.wide
  ){
    grid-column:1 / -1!important;
    width:100%!important;
  }

  /* Parent containers with genuinely-long controls also span full width. */
  html.zme-mobile :is(
    .detail-grid,.form-grid,.field-pair,.filter-sheet-grid,.report-form-grid,
    .driver-account-form,.payment-details-host,.repair-issue-grid,
    .trip-deduction-row,.grid
  ) > :has(textarea),
  html.zme-mobile :is(
    .detail-grid,.form-grid,.field-pair,.filter-sheet-grid,.report-form-grid,
    .driver-account-form,.payment-details-host,.repair-issue-grid,
    .trip-deduction-row,.grid
  ) > :has(input[type="file"]),
  html.zme-mobile :is(
    .detail-grid,.form-grid,.field-pair,.filter-sheet-grid,.report-form-grid,
    .driver-account-form,.payment-details-host,.repair-issue-grid,
    .trip-deduction-row,.grid
  ) > :has(video,.upload,.attachments,.preview,.media-view){
    grid-column:1 / -1!important;
    width:100%!important;
  }

  /* Read-only approval/detail cards are compact by default. */
  html.zme-mobile .detail-grid > .detail-cell{
    min-height:86px!important;
    padding:10px 11px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:4px!important;
  }

  html.zme-mobile .detail-grid > .detail-cell > span{
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.45!important;
  }

  html.zme-mobile .detail-grid > .detail-cell > strong{
    font-size:13px!important;
    line-height:1.55!important;
    overflow-wrap:anywhere!important;
  }
}

@media (min-width:540px) and (max-width:768px){
  html.zme-mobile :is(
    .detail-grid,.form-grid,.field-pair,.filter-sheet-grid,.report-form-grid,
    .driver-account-form,.history-simple-grid,.payment-details-host,
    .repair-issue-grid,.trip-deduction-row,.rc-grid4,.rc-grid2,.tf-grid,.stats
  ){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}



/* ===== ZABR Universal Fit Engine v1 =====
   Applies to mobile + desktop + browser zoom. Surfaces are clamped to the
   *visual* viewport so dialogs/forms never disappear off-screen or leave a
   fake empty half caused by stale fixed coordinates. */
html{
  --zme-vv-left:0px;
  --zme-vv-top:0px;
}

.zme-fit-surface{
  box-sizing:border-box!important;
  max-width:calc(var(--zme-vw,100vw) - 20px)!important;
  max-height:calc(var(--zme-vh,100dvh) - 20px)!important;
  overscroll-behavior:contain;
}

html.zme-desktop dialog.zme-fit-surface{
  position:fixed!important;
  left:calc(var(--zme-vv-left,0px) + (var(--zme-vw,100vw) / 2))!important;
  top:calc(var(--zme-vv-top,0px) + (var(--zme-vh,100dvh) / 2))!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  width:min(860px,calc(var(--zme-vw,100vw) - 24px))!important;
  max-width:calc(var(--zme-vw,100vw) - 24px)!important;
  max-height:calc(var(--zme-vh,100dvh) - 24px)!important;
  overflow:auto!important;
  border-radius:24px!important;
}

html.zme-desktop dialog.zme-fit-surface > :is(.dialog-body,.modal-body,#modalBody,.detail-view,.zdlg-surface){
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
}

html.zme-desktop .zme-dense-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:10px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  align-items:start!important;
}

html.zme-desktop .zme-dense-grid > .zme-wide-item{
  grid-column:1 / -1!important;
  width:100%!important;
}

html.zme-desktop .detail-section.zme-detail-pack{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:10px!important;
}

html.zme-desktop .detail-section.zme-detail-pack > h5,
html.zme-desktop .detail-section.zme-detail-pack > .zme-wide-item{
  grid-column:1 / -1!important;
}

/* Central semantic detail tiles — same meaning = same visual language. */
.detail-cell[data-tone="info"]{
  background:linear-gradient(145deg,rgba(38,90,120,.16),rgba(12,31,42,.96))!important;
  border-color:rgba(78,167,215,.18)!important;
}
.detail-cell[data-tone="route"]{
  background:linear-gradient(145deg,rgba(21,113,145,.17),rgba(10,31,40,.96))!important;
  border-color:rgba(42,212,240,.22)!important;
}
.detail-cell[data-tone="money"]{
  background:linear-gradient(145deg,rgba(37,115,173,.18),rgba(12,31,45,.96))!important;
  border-color:rgba(73,165,255,.23)!important;
}
.detail-cell[data-tone="deduction"]{
  background:linear-gradient(145deg,rgba(156,91,21,.18),rgba(46,30,15,.96))!important;
  border-color:rgba(255,180,92,.26)!important;
}
.detail-cell[data-tone="success"]{
  background:linear-gradient(145deg,rgba(18,121,88,.18),rgba(11,39,33,.96))!important;
  border-color:rgba(46,227,168,.26)!important;
}
.detail-cell[data-tone="company"]{
  background:linear-gradient(145deg,rgba(100,72,171,.18),rgba(30,23,55,.96))!important;
  border-color:rgba(181,140,255,.25)!important;
}
.detail-cell[data-tone="identity"]{
  background:linear-gradient(145deg,rgba(94,69,151,.15),rgba(26,23,45,.96))!important;
  border-color:rgba(181,140,255,.19)!important;
}
.detail-cell[data-tone="meta"],
.detail-cell[data-tone="status"]{
  background:linear-gradient(145deg,rgba(111,132,145,.10),rgba(18,31,39,.96))!important;
  border-color:rgba(170,196,208,.12)!important;
}
.detail-cell[data-tone="danger"]{
  background:linear-gradient(145deg,rgba(151,46,62,.17),rgba(46,21,27,.96))!important;
  border-color:rgba(255,107,124,.26)!important;
}


html.zme-desktop :is(
  .sheet-panel,.driver-modal,.z-modal-box,.repair-management-box,
  .readonly-modal,.zdlg-surface,.worker-sheet,.admin-sheet
).zme-fit-surface:not(dialog){
  position:fixed!important;
  left:calc(var(--zme-vv-left,0px) + (var(--zme-vw,100vw) / 2))!important;
  top:calc(var(--zme-vv-top,0px) + (var(--zme-vh,100dvh) / 2))!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  width:min(860px,calc(var(--zme-vw,100vw) - 24px))!important;
  max-width:calc(var(--zme-vw,100vw) - 24px)!important;
  max-height:calc(var(--zme-vh,100dvh) - 24px)!important;
  overflow:auto!important;
  border-radius:24px!important;
  box-sizing:border-box!important;
}

/* Payment destination is a semantic vertical flow.
   The central density engine must never place the selector beside the
   card/IBAN/account entry field. Every block owns a complete row. */
html .payment-details-host,
html.zme-mobile .payment-details-host,
html.zme-desktop .payment-details-host,
html.zme-mobile .payment-details-host.zme-dense-grid,
html.zme-desktop .payment-details-host.zme-dense-grid,
html.zme-mobile .payment-details-host.zme-field-grid.zme-dense-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
html .payment-details-host > :is(
  .payment-switch,.bank-field,.payment-owner-note,
  .payee-other-toggle,.payee-other-box
),
html.zme-mobile .payment-details-host > :is(
  .payment-switch,.bank-field,.payment-owner-note,
  .payee-other-toggle,.payee-other-box
),
html.zme-desktop .payment-details-host > :is(
  .payment-switch,.bank-field,.payment-owner-note,
  .payee-other-toggle,.payee-other-box
){
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}


/* Central content-fit rule v2.
   Forms/details must consume only their real content height. This prevents
   inherited 300px/100vh step heights and stretched grid rows from creating
   empty scroll space inside sheets on mobile or desktop. */
.zme-fit-surface :is(
  form,.zme-form,.detail-view,.zme-detail,.dialog-body,.modal-body,#modalBody,
  .wizard-step,.work-wizard-step,[data-zabr-step]
){
  min-height:0!important;
}
.zme-fit-surface :is(form,.zme-form,.detail-view,.zme-detail){
  height:auto!important;
}
.zme-fit-surface :is(
  .detail-grid,.form-grid,.field-pair,.zme-dense-grid,.zme-field-grid,
  .history-simple-grid,.filter-sheet-grid,.report-form-grid
){
  align-content:start!important;
  grid-auto-rows:min-content!important;
}
.zme-fit-surface :is(.wizard-step,.work-wizard-step,[data-zabr-step]).active{
  height:auto!important;
  align-content:start!important;
}