/* local Vazirmatn for all shared forms */
@font-face{font-family:Vazirmatn;src:url('/static/fonts/Vazirmatn.ttf?v=1') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
/* Shared ZABR primitives used by every web module. */
.zabr-core-toast{position:fixed;z-index:2147483000;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translate(-50%,-18px);width:min(92vw,520px);padding:12px 15px;border-radius:15px;border:1px solid rgba(255,255,255,.12);background:rgba(9,22,31,.97);color:#eefaff;font-family:inherit;font-size:13px;font-weight:800;line-height:1.75;text-align:center;box-shadow:0 16px 42px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.18s ease}.zabr-core-toast.show{opacity:1;transform:translate(-50%,0)}.zabr-core-toast.success{border-color:rgba(46,227,168,.28)}.zabr-core-toast.error{border-color:rgba(255,107,124,.34);color:#ffd8de}
.zabr-central-card{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.zabr-central-card:focus-visible{outline:2px solid rgba(42,212,240,.6);outline-offset:2px}
.zabr-detail-hero{display:flex;align-items:center;gap:10px;padding:14px;border-radius:18px;background:#10232d;border:1px solid rgba(255,255,255,.08);margin-bottom:10px}.zabr-detail-hero>div{min-width:0;display:grid;gap:3px}.zabr-detail-hero strong{font-size:16px}.zabr-detail-hero small{color:#8ca3ad;font-size:11px}.zabr-detail-section{background:#101d27;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:13px;margin-bottom:9px}.zabr-detail-section h5{margin:0 0 9px;font-size:12px;color:#9bb4be}.zabr-detail-row{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:42px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}.zabr-detail-row:first-of-type{border-top:0}.zabr-detail-row span{font-size:11px;color:#78919b}.zabr-detail-row b{font-size:12.5px;text-align:left;max-width:68%;overflow-wrap:anywhere}
@media(max-width:480px){.zabr-core-toast{font-size:12.5px}.zabr-detail-row span{font-size:11.5px}.zabr-detail-row b{font-size:13px}}
.zabr-central-detail,.zabr-central-detail-hero{touch-action:manipulation}.zabr-central-detail{overflow-wrap:anywhere}.zabr-central-detail-hero{isolation:isolate}

/* ZABR CENTRAL ICON TILE STANDARD V2 */
:root{
  --zabr-nav-h:82px;
  --zabr-nav-bg:rgba(7,18,27,.94);
  --zabr-nav-border:rgba(255,255,255,.075);
  --zabr-nav-muted:#8da6b0;
  --zabr-nav-text:#eefcff;
  --zabr-nav-cyan:#31d6ee;
  --zabr-nav-blue:#2d7ff9;
  --zabr-nav-active:linear-gradient(150deg,rgba(37,151,255,.30),rgba(40,216,238,.16));
  --zabr-nav-fab:linear-gradient(145deg,#39daf0,#237cff);
}
.zabr-svg-icon{
  width:1.45em!important;height:1.45em!important;min-width:1.45em!important;min-height:1.45em!important;
  display:inline-block!important;flex:0 0 auto!important;background:currentColor!important;
  -webkit-mask:var(--zabr-icon) center/contain no-repeat!important;mask:var(--zabr-icon) center/contain no-repeat!important;
  opacity:1!important;filter:none!important;vertical-align:-.22em!important;
}
.zabr-icon-lg{width:1.9em!important;height:1.9em!important;min-width:1.9em!important;min-height:1.9em!important}.zabr-icon-xl{width:2.3em!important;height:2.3em!important;min-width:2.3em!important;min-height:2.3em!important}
.nav,.worker-bottom-nav,.admin-bottom-nav,.bottom-nav{isolation:isolate!important;background:var(--zabr-nav-bg)!important;border-top:1px solid var(--zabr-nav-border)!important;box-shadow:0 -18px 42px rgba(0,0,0,.32)!important;backdrop-filter:blur(18px)!important}
.nav button,.worker-bottom-nav button,.admin-bottom-nav button,.bottom-nav .bottom-link{position:relative!important;min-height:64px!important;border-radius:18px!important;padding:8px 8px!important;color:var(--zabr-nav-muted)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-weight:900!important;font-size:12.5px!important;line-height:1.25!important;transition:background .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease!important}
.nav button .zabr-svg-icon,.worker-bottom-nav button .zabr-svg-icon,.admin-bottom-nav button .zabr-svg-icon,.bottom-nav .bottom-link .zabr-svg-icon,.nav button>span[data-zabr-icon],.worker-bottom-nav button>span[data-zabr-icon],.admin-bottom-nav button>span[data-zabr-icon]{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;margin:0!important;color:currentColor!important}
.nav button.active,.nav button[aria-current="page"],.worker-bottom-nav button.active,.admin-bottom-nav button.active,.bottom-nav .bottom-link.active,.bottom-nav .bottom-link[aria-current="page"]{background:var(--zabr-nav-active)!important;color:var(--zabr-nav-text)!important;box-shadow:inset 0 0 0 1px rgba(42,212,240,.18),0 10px 24px rgba(5,26,40,.26)!important}
.nav button.active::before,.nav button[aria-current="page"]::before,.worker-bottom-nav button.active::before,.admin-bottom-nav button.active::before,.bottom-nav .bottom-link.active::before{content:""!important;position:absolute!important;top:5px!important;left:50%!important;transform:translateX(-50%)!important;width:32px!important;height:4px!important;border-radius:99px!important;background:linear-gradient(90deg,var(--zabr-nav-cyan),var(--zabr-nav-blue))!important;box-shadow:0 0 12px rgba(49,214,238,.55)!important}
.nav button.active .zabr-svg-icon,.nav button[aria-current="page"] .zabr-svg-icon,.worker-bottom-nav button.active .zabr-svg-icon,.admin-bottom-nav button.active .zabr-svg-icon,.bottom-nav .bottom-link.active .zabr-svg-icon{color:#ffffff!important;filter:drop-shadow(0 3px 9px rgba(42,212,240,.35))!important}
.nav button:active,.worker-bottom-nav button:active,.admin-bottom-nav button:active,.bottom-nav .bottom-link:active{transform:translateY(1px) scale(.985)!important}
.nav .fab-wrap,.worker-fab-wrap{margin-top:-31px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;color:var(--zabr-nav-text)!important;font-weight:900!important;font-size:12.5px!important}.nav .fab,.worker-fab{width:84px!important;height:84px!important;min-width:84px!important;min-height:84px!important;border-radius:25px!important;background:var(--zabr-nav-fab)!important;color:#06232e!important;border:0!important;box-shadow:0 20px 36px rgba(34,142,255,.30),0 0 0 1px rgba(255,255,255,.08) inset!important;display:grid!important;place-items:center!important}.nav .fab .zabr-svg-icon,.worker-fab .zabr-svg-icon{width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important;color:#06232e!important;filter:drop-shadow(0 2px 0 rgba(255,255,255,.18))!important}.worker-fab-wrap>span,.nav .fab-wrap>span{color:var(--zabr-nav-text)!important;text-shadow:0 2px 10px rgba(0,0,0,.35)!important}
.qcard .ico .zabr-svg-icon,.driver-ico .zabr-svg-icon,.choice-btn .zabr-svg-icon,.cargo-choice-btn .zabr-svg-icon,.report-tab .zabr-svg-icon,.zr-type-icon .zabr-svg-icon,.history-simple-icon .zabr-svg-icon{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;color:currentColor!important}.qcard .ico,.driver-ico,.history-simple-icon,.zr-type-icon{background:linear-gradient(145deg,rgba(42,212,240,.18),rgba(45,127,249,.10))!important;border:1px solid rgba(42,212,240,.22)!important;color:#9ff3ff!important}.qcard:active,.driver-qcard:active{transform:scale(.985)!important}
@media(max-width:380px){.nav button,.worker-bottom-nav button,.admin-bottom-nav button,.bottom-nav .bottom-link{font-size:11.2px!important;padding-left:4px!important;padding-right:4px!important}.nav button .zabr-svg-icon,.worker-bottom-nav button .zabr-svg-icon,.admin-bottom-nav button .zabr-svg-icon{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}.nav .fab,.worker-fab{width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important}.nav .fab .zabr-svg-icon,.worker-fab .zabr-svg-icon{width:35px!important;height:35px!important}}

/* GPS TOP CONTROLS: keep inline SVGs visible, independent from central mask icons. */
#gpsControl .menu-toggle svg,#gpsControl .menu-item svg,.north-btn svg,.dock-btn svg,.fs-btn svg,#modeToggle svg{
  display:block!important;opacity:1!important;visibility:visible!important;background:transparent!important;
  -webkit-mask:none!important;mask:none!important;fill:none;stroke:currentColor!important;stroke-width:2!important;
  width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;
  color:currentColor!important;filter:none;position:relative;z-index:2;
}
#gpsControl .menu-item svg [fill="currentColor"],#gpsControl .menu-toggle svg [fill="currentColor"],.north-btn svg [fill="currentColor"],#modeToggle svg [fill="currentColor"]{
  fill:currentColor!important;stroke:none!important;
}
#gpsControl .menu-item.on svg{filter:drop-shadow(0 0 6px var(--accent))!important}
#gpsControl .menu-item,#gpsControl .menu-toggle{color:#edf9ff!important}


/* GPS TOP CONTROL FIX V2: help icon + single mode icon */
#modeToggle.mode-toggle svg{
  width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;
  fill:currentColor!important;stroke:currentColor!important;background:none!important;mask:none!important;-webkit-mask:none!important;
}
#modeToggle.mode-toggle .mode-live-icon{display:block!important}
#modeToggle.mode-toggle .mode-play-icon{display:none!important}
#modeToggle.mode-toggle.playback .mode-live-icon{display:none!important}
#modeToggle.mode-toggle.playback .mode-play-icon{display:block!important}
.ob-help svg{
  display:block!important;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  background:none!important;mask:none!important;-webkit-mask:none!important;opacity:1!important;visibility:visible!important;
}
.ob-help svg circle:last-child{fill:currentColor!important;stroke:none!important}
.ob-help::after{display:none!important}

/* ZABR central adaptive detail layout v6: short fields share rows; account/card/IBAN/media stay full-width. */
.zabr-detail-section,.detail-section.admin-detail-group,.admin-detail-group.zabr-detail-section{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(155px,100%),1fr))!important;
  gap:8px!important;
  padding:12px!important;
}
.zabr-detail-section>h5,.detail-section>h5,.admin-detail-group>h5{
  grid-column:1/-1!important;margin:0 0 2px!important;
}
.zabr-detail-row,.detail-section .zabr-detail-row,.admin-detail-group .zabr-detail-row{
  min-height:58px!important;padding:10px 11px!important;border:1px solid rgba(255,255,255,.055)!important;
  border-radius:14px!important;background:rgba(7,19,26,.38)!important;border-top:1px solid rgba(255,255,255,.055)!important;
  display:grid!important;grid-template-columns:1fr!important;align-content:center!important;gap:4px!important;
}
.zabr-detail-row span{font-size:10.8px!important;color:#7f98a2!important;line-height:1.45!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.zabr-detail-row b{font-size:13px!important;line-height:1.55!important;text-align:right!important;max-width:none!important;overflow-wrap:anywhere!important;color:#f1fbfd!important}
.zabr-detail-row[data-zabr-detail-kind="full"],.zabr-detail-row[data-zabr-detail-kind="account"],.zabr-detail-row[data-zabr-detail-kind="media"]{grid-column:1/-1!important}
.zabr-detail-row[data-zabr-detail-kind="account"] b{direction:ltr!important;text-align:right!important;font-variant-numeric:tabular-nums!important;letter-spacing:.2px!important}
.zabr-detail-row[data-zabr-detail-kind="money"]{border-color:rgba(46,227,168,.12)!important;background:rgba(46,227,168,.035)!important}
.zabr-detail-row[data-zabr-detail-kind="date"]{border-color:rgba(59,130,246,.12)!important;background:rgba(59,130,246,.032)!important}

/* ZABR central vivid semantic choice tiles v7: icons stay colorful and lively everywhere. */
:root{--zt-blue:54,151,255;--zt-cyan:34,211,238;--zt-green:30,205,151;--zt-violet:139,92,246;--zt-orange:245,158,11;--zt-pink:236,72,153;--zt-red:248,113,113;--zt-slate:125,145,165;--zt-lime:132,204,22;--zt-amber:251,191,36}
:where(.cargo-choice-btn,.choice-grid .choice-btn,.repair-issue-grid .choice-btn,.report-tab,.report-choice button,.flow-choice,.work-choice,.trade-picker-item,.unit-quick button,.money-preset-grid button,.new-action){
  --zt:var(--zt-blue);
  color:#d9edf4!important;
  border-color:rgba(var(--zt),.46)!important;
  background:radial-gradient(130% 150% at 8% -10%,rgba(var(--zt),.28),transparent 52%),linear-gradient(145deg,rgba(var(--zt),.105),rgba(7,18,25,.72) 68%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 8px 20px rgba(0,0,0,.12),0 0 22px rgba(var(--zt),.055)!important;
}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n+1){--zt:var(--zt-blue)}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n+2){--zt:var(--zt-green)}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n+3){--zt:var(--zt-violet)}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n+4){--zt:var(--zt-orange)}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n+5){--zt:var(--zt-pink)}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n+6){--zt:var(--zt-cyan)}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n+7){--zt:var(--zt-amber)}
:where(.cargo-choice-grid,.choice-grid,.flow-choice-list,.work-choice-grid,.trade-picker-grid)>:nth-child(8n){--zt:var(--zt-slate)}

.cargo-choice-btn[data-cargo-value="cement"]{--zt:var(--zt-slate)}
.cargo-choice-btn[data-cargo-value="clinker"]{--zt:var(--zt-violet)}
.cargo-choice-btn[data-cargo-value="canola"],.cargo-choice-btn[data-cargo-value="meal"]{--zt:var(--zt-lime)}
.cargo-choice-btn[data-cargo-value="corn"]{--zt:var(--zt-amber)}
.cargo-choice-btn[data-cargo-value="gravel"]{--zt:var(--zt-orange)}
.cargo-choice-btn[data-cargo-value="sugar"]{--zt:var(--zt-pink)}
.cargo-choice-btn[data-cargo-value="iron"]{--zt:var(--zt-slate)}
.cargo-choice-btn[data-cargo-value="gypsum"]{--zt:var(--zt-cyan)}
.cargo-choice-btn[data-cargo-value="wheat"]{--zt:var(--zt-green)}
.cargo-choice-btn[data-cargo-value="other"]{--zt:var(--zt-blue)}
:where(.cargo-choice-btn,.choice-grid .choice-btn,.repair-issue-grid .choice-btn,.report-tab,.flow-choice,.work-choice,.trade-picker-item) :where(.zabr-svg-icon,svg){
  color:rgb(var(--zt))!important;opacity:1!important;filter:drop-shadow(0 0 10px rgba(var(--zt),.22)) drop-shadow(0 3px 7px rgba(var(--zt),.18))!important;
}
:where(.cargo-choice-btn.active,.choice-grid .choice-btn.active,.repair-issue-grid .choice-btn.active,.report-tab.active,.flow-choice.active,.work-choice.active,.trade-picker-item.active,[aria-pressed="true"].cargo-choice-btn,[aria-pressed="true"].choice-btn){
  border-color:rgba(var(--zt),.88)!important;background:radial-gradient(140% 165% at 8% -8%,rgba(var(--zt),.42),transparent 52%),linear-gradient(145deg,rgba(var(--zt),.25),rgba(7,18,25,.68) 70%)!important;box-shadow:0 10px 28px rgba(var(--zt),.18),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(var(--zt),.12)!important;color:#f7feff!important;
}
:where(.cargo-choice-btn.active,.choice-grid .choice-btn.active,.repair-issue-grid .choice-btn.active,.report-tab.active,.flow-choice.active,.work-choice.active,[aria-pressed="true"].cargo-choice-btn,[aria-pressed="true"].choice-btn) :where(.zabr-svg-icon,svg){
  color:rgb(var(--zt))!important;filter:drop-shadow(0 0 14px rgba(var(--zt),.45)) drop-shadow(0 3px 8px rgba(var(--zt),.24))!important;
}


/* Central account / card / IBAN display.
   Same segmented rhythm as bank inputs; tap/click copies the canonical value. */
.zabr-account-display{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  direction:ltr!important;
  cursor:pointer!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:manipulation!important;
  text-align:left!important;
  overflow:hidden!important;
}
.zabr-account-segments{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  direction:ltr!important;
  font-variant-numeric:tabular-nums!important;
}
.zabr-account-segment,.zabr-account-prefix{
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 6px!important;
  border-radius:9px!important;
  border:1px solid rgba(42,212,240,.20)!important;
  background:#0a1b24!important;
  color:#eafaff!important;
  display:grid!important;
  place-items:center!important;
  font-style:normal!important;
  font-weight:900!important;
  font-size:clamp(11px,2.7vw,14px)!important;
  line-height:1!important;
  letter-spacing:0!important;
  box-sizing:border-box!important;
}
.zabr-account-segment{flex:2 1 0!important}
.zabr-account-segment[data-size="2"]{flex:1 1 0!important}
.zabr-account-prefix{
  flex:0 0 30px!important;
  width:30px!important;
  padding:0 2px!important;
  color:#9eeaf6!important;
  background:#12313d!important;
}
.zabr-account-method{
  flex:0 0 auto!important;
  font-style:normal!important;
  font-size:11px!important;
  font-weight:900!important;
  color:#8fa8b1!important;
  white-space:nowrap!important;
}
.zabr-account-copy-hint{
  flex:0 0 26px!important;
  width:26px!important;height:26px!important;
  border-radius:8px!important;
  display:grid!important;place-items:center!important;
  background:rgba(42,212,240,.08)!important;
  border:1px solid rgba(42,212,240,.16)!important;
  color:#8feafa!important;
  font-size:15px!important;
}
.zabr-account-display:active .zabr-account-segment,
.zabr-account-display:active .zabr-account-prefix{transform:scale(.98)}
.zabr-account-display:focus-visible{
  outline:3px solid rgba(42,212,240,.62)!important;
  outline-offset:3px!important;
  border-radius:11px!important;
}
.zabr-detail-row[data-zabr-account-ready="1"],
.detail-row[data-zabr-account-ready="1"],
.detail-cell[data-zabr-account-ready="1"],
.summary-row[data-zabr-account-ready="1"]{
  grid-column:1/-1!important;
}
.zabr-account-summary-row{grid-column:1/-1!important}
@media(max-width:380px){
  .zabr-account-display{gap:4px!important}
  .zabr-account-segments{gap:2px!important}
  .zabr-account-segment,.zabr-account-prefix{
    height:32px!important;min-height:32px!important;
    padding:0 3px!important;font-size:10.5px!important;border-radius:8px!important;
  }
  .zabr-account-prefix{flex-basis:26px!important;width:26px!important}
  .zabr-account-copy-hint{flex-basis:24px!important;width:24px!important;height:24px!important;font-size:13px!important}
  .zabr-account-method{font-size:10px!important}
}


/* =====================================================================
   ZABR CENTRAL COMPACT FIELD GRID v1
   One layout rule for driver/admin/building/future forms and details.
   Short fields share rows. Long text, media, account and action areas
   intentionally keep a full row.
   ===================================================================== */
:root{
  --zabr-field-grid-min:180px;
  --zabr-field-grid-gap:8px;
}
@media(max-width:600px){
  :root{--zabr-field-grid-min:138px;--zabr-field-grid-gap:8px}
}
@media(max-width:300px){
  :root{--zabr-field-grid-min:100%;--zabr-field-grid-gap:7px}
}

/* Detail sections created by ZabrDetails may contain a nested .detail-grid.
   The nested grid MUST span the whole section; previously it occupied one
   parent column and made every field stack down the right side. */
.zabr-detail-section > .detail-grid,
.admin-detail-group > .detail-grid,
.detail-section.admin-detail-group > .detail-grid{
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(var(--zabr-field-grid-min),100%),1fr))!important;
  grid-auto-flow:row dense!important;
  gap:var(--zabr-field-grid-gap)!important;
  align-items:stretch!important;
  align-content:start!important;
}
.zabr-detail-section > .detail-grid > .detail-cell,
.admin-detail-group > .detail-grid > .detail-cell{
  grid-column:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}

/* Account/card/IBAN is the deliberate exception: one full row so all
   segmented digits stay readable and tappable. */
.zabr-detail-section > .detail-grid > .detail-cell[data-zabr-account-ready="1"],
.admin-detail-group > .detail-grid > .detail-cell[data-zabr-account-ready="1"],
.zabr-detail-section > .detail-grid > .detail-cell[data-zabr-detail-kind="account"],
.admin-detail-group > .detail-grid > .detail-cell[data-zabr-detail-kind="account"]{
  grid-column:1/-1!important;
}

/* Driver/read-only details often have direct .detail-row children instead
   of a nested grid. They use the exact same compact central layout. */
.detail-section:has(> .detail-row){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(var(--zabr-field-grid-min),100%),1fr))!important;
  grid-auto-flow:row dense!important;
  gap:var(--zabr-field-grid-gap)!important;
  align-content:start!important;
}
.detail-section:has(> .detail-row) > h5{
  grid-column:1/-1!important;
}
.detail-section:has(> .detail-row) > .detail-row{
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  padding:9px 10px!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:3px!important;
  align-content:center!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:13px!important;
}
.detail-section:has(> .detail-row) > :not(h5):not(.detail-row){
  grid-column:1/-1!important;
}

/* Generic forms that are themselves .form-grid plus nested grids.
   JS adds .zabr-form-ux to operational forms, so this is central and
   does not depend on page-specific CSS. */
form.zabr-form-ux.form-grid,
.zabr-form-ux .form-grid,
.zabr-form-ux .grid,
.zabr-form-ux .field-pair{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(var(--zabr-field-grid-min),100%),1fr))!important;
  grid-auto-flow:row dense!important;
  gap:10px!important;
  align-items:start!important;
  align-content:start!important;
}
form.zabr-form-ux.form-grid > :is(label,.field),
.zabr-form-ux .form-grid > :is(label,.field),
.zabr-form-ux .grid > .field,
.zabr-form-ux .field-pair > .field{
  grid-column:auto!important;
  min-width:0!important;
  width:auto!important;
  margin-top:0!important;
}

/* Full-row semantic content only. */
form.zabr-form-ux.form-grid > :is(
  section,fieldset,details,.full,.notice,.actions,.error,.payment-details-host,
  [data-payment-details],[data-zabr-kind="long"],[data-zabr-kind="address"],
  [data-zabr-kind="media"],[data-zabr-kind="account"],.upload,.wizard-summary
),
.zabr-form-ux :is(.grid,.form-grid,.field-pair) > :is(
  .full,section,fieldset,details,.notice,.actions,.error,.payment-details-host,
  [data-payment-details],[data-zabr-kind="long"],[data-zabr-kind="address"],
  [data-zabr-kind="media"],[data-zabr-kind="account"],.upload,.wizard-summary
),
form.zabr-form-ux.form-grid > label:has(textarea),
form.zabr-form-ux.form-grid > label:has(input[type="file"]),
.zabr-form-ux :is(.grid,.form-grid,.field-pair) > label:has(textarea),
.zabr-form-ux :is(.grid,.form-grid,.field-pair) > label:has(input[type="file"]){
  grid-column:1/-1!important;
}

/* Choice/media/account components own their internal grid and should span
   the form width, while their own buttons/segments remain compact. */
.zabr-form-ux :is(
  .choice-grid,.cargo-choice-grid,.repair-issue-grid,.work-choice-grid,
  .flow-choice-list,.payment-details-host,[data-payment-details]
){
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
}


/* ZABR CENTRAL SINGLE-FAB BOTTOM NAV
   Same driver FAB engine, for screens with one primary bottom action. */
.nav.zabr-single-fab-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  width:min(480px,100%)!important;
  min-height:calc(var(--zabr-nav-h) + env(safe-area-inset-bottom,0px))!important;
  padding:8px 18px calc(10px + env(safe-area-inset-bottom,0px))!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  z-index:40!important;
}
.nav.zabr-single-fab-nav .fab-wrap{
  justify-self:center!important;
  align-self:end!important;
  min-width:110px!important;
}
.nav.zabr-single-fab-nav .fab{
  cursor:pointer!important;
  padding:0!important;
  text-decoration:none!important;
}

.nav.zabr-single-fab-nav[hidden]{display:none!important}