/* Vula 0.3.63 — consolidated responsive application shell + mobile action fixes */
.vula-mobile-topbar,
.vula-mobile-nav-toggle,
.vula-mobile-nav-backdrop{display:none}

@media (max-width:1050px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body.vula-app-body{min-width:0!important;margin:0!important;padding:0!important}

  /* One predictable app shell on tablet/mobile. */
  body.vula-app-body .vula-shell{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:100dvh!important}
  body.vula-app-body .vula-main{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:100dvh!important;margin:0!important;padding:84px 18px 28px!important;overflow:visible!important}

  /* Branded app bar always remains visible. */
  body.vula-app-body .vula-mobile-topbar{display:flex!important;position:fixed!important;left:0!important;right:0!important;top:0!important;height:64px!important;z-index:10040!important;align-items:center!important;justify-content:space-between!important;padding:8px 14px!important;background:#0d2430!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 8px 24px rgba(13,36,48,.12)!important}
  .vula-mobile-brand{display:flex!important;align-items:center!important;width:128px!important;height:46px!important;overflow:hidden!important;text-decoration:none!important}
  .vula-mobile-brand img{display:block!important;width:116px!important;max-width:116px!important;height:auto!important;max-height:42px!important;object-fit:contain!important;object-position:left center!important}

  /* Hamburger belongs to the topbar, never floats over page content. */
  body.vula-app-body .vula-mobile-nav-toggle{display:flex!important;position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important;padding:0!important;margin:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;background:#132d39!important;box-shadow:none!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}
  .vula-mobile-nav-toggle span,.vula-mobile-nav-toggle:before,.vula-mobile-nav-toggle:after{content:""!important;display:block!important;position:absolute!important;width:20px!important;height:2px!important;border-radius:2px!important;background:#fff!important;transition:.2s ease!important}
  .vula-mobile-nav-toggle:before{transform:translateY(-6px)!important}.vula-mobile-nav-toggle:after{transform:translateY(6px)!important}
  body.vula-mobile-nav-open .vula-mobile-nav-toggle span{opacity:0!important}
  body.vula-mobile-nav-open .vula-mobile-nav-toggle:before{transform:rotate(45deg)!important}
  body.vula-mobile-nav-open .vula-mobile-nav-toggle:after{transform:rotate(-45deg)!important}

  /* Off-canvas navigation begins below the topbar. */
  body.vula-app-body .vula-sidebar{display:flex!important;position:fixed!important;left:0!important;top:64px!important;bottom:0!important;width:min(310px,88vw)!important;max-width:88vw!important;height:calc(100dvh - 64px)!important;min-height:0!important;z-index:10030!important;transform:translate3d(-105%,0,0)!important;transition:transform .22s ease!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;box-shadow:18px 0 50px rgba(0,0,0,.22)!important;padding-bottom:18px!important}
  body.vula-mobile-nav-open .vula-sidebar{transform:translate3d(0,0,0)!important}
  body.vula-app-body .vula-sidebar .vula-brand-image{display:none!important}
  body.vula-app-body .vula-sidebar .vula-nav{padding-bottom:24px!important}
  body.vula-app-body .vula-mobile-nav-backdrop{display:block!important;position:fixed!important;left:0!important;right:0!important;top:64px!important;bottom:0!important;z-index:10020!important;background:rgba(5,18,24,.48)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:.2s ease!important}
  body.vula-mobile-nav-open .vula-mobile-nav-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  body.vula-mobile-nav-open{overflow:hidden!important}

  /* All application grids must be allowed to shrink. */
  .vula-main *{min-width:0}
  .vula-dashboard-grid,.unit-layout,.menu-layout,.event-task-grid,.access-allocation-grid,.venue-layout,.venue-setup-grid,.profile-layout,.availability-layout,.calendar-layout,.reports-layout,.event-overview-grid,.event-layout,.vula-two-col,.vula-split-grid,.profile-grid,.vendor-profile-grid,.setup-grid,.event-ops-grid,.manager-command-grid,.ops-planning-grid,.vehicles-grid,.readiness-summary-grid{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
  .vula-grid,.vendor-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vula-card,.vula-form-card,.setup-profile-card,.product-config-section,.modifier-group-card{width:100%!important;max-width:100%!important;min-width:0!important}
  .vula-form-grid,.vula-form-grid.two,.vula-form-grid.three,.vula-form-grid.one{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .vula-field,.menu-config-field,input,select,textarea{max-width:100%!important;min-width:0!important}
  .vula-top,.vula-card-head,.event-hero{gap:12px!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .event-hero{flex-direction:column!important}

  /* Horizontal components can scroll without widening the page. */
  .vula-tabs{display:flex!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  .vula-tabs::-webkit-scrollbar{display:none!important}
  .table-card,.access-table-wrap,.vula-table-wrap,.product-library-table,.menu-product-table{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}

  /* Floating edit controls become contained overlays. */
  .vula-row-actions details[open]>.vula-edit-popover,.vehicle-driver-edit[open]>.vula-edit-popover,.staff-id-edit[open]>.vula-edit-popover,.unit-photo-edit[open]>form,.menu-image-edit[open]>form{position:fixed!important;left:12px!important;right:12px!important;top:82px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 104px)!important;overflow:auto!important;z-index:10100!important;padding:16px!important;border-radius:16px!important;background:#fff!important;box-shadow:0 22px 60px rgba(13,36,48,.24)!important}
}

@media (max-width:700px){
  body.vula-app-body .vula-mobile-topbar{height:60px!important;padding:7px 10px!important}
  .vula-mobile-brand{width:112px!important;height:44px!important}.vula-mobile-brand img{width:104px!important;max-width:104px!important}
  body.vula-app-body .vula-mobile-nav-toggle{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important}
  body.vula-app-body .vula-sidebar{top:60px!important;height:calc(100dvh - 60px)!important}
  body.vula-app-body .vula-mobile-nav-backdrop{top:60px!important}
  body.vula-app-body .vula-main{padding:76px 12px 22px!important}

  .vula-grid,.vendor-card-grid,.vula-form-grid,.vula-form-grid.two,.vula-form-grid.three,.vula-form-grid.one{grid-template-columns:minmax(0,1fr)!important}
  .vula-card,.vula-form-card{padding:16px!important;border-radius:16px!important}
  .vula-top{margin-bottom:18px!important}.vula-top h1{font-size:29px!important;line-height:1.06!important;letter-spacing:-.03em!important}.vula-page-sub{font-size:13px!important;line-height:1.5!important}
  .vula-top>.vula-btn,.vula-card-head>.vula-btn{width:100%!important;justify-content:center!important}
  .vula-btn{min-height:42px}.vula-btn.small{min-height:36px}

  /* Rows become useful cards rather than compressed desktop rows. */
  .unit-profile-row{display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;gap:10px 12px!important;align-items:start!important}
  .unit-profile-row .unit-specs{grid-column:1/-1!important;margin-left:62px!important;justify-content:flex-start!important;display:flex!important;flex-wrap:wrap!important;gap:6px!important}
  .unit-profile-row .vula-row-actions{grid-column:1/-1!important;margin-left:62px!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:6px!important}
  .vendor-access-pass,.vendor-access-pass-grid{grid-template-columns:minmax(0,1fr)!important}
  .overview-outstanding-events>a,.availability-layout .vula-list-row{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .availability-layout .record-actions-inline,.vula-row-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:7px!important}

  /* Forms and product/menu editors become a single vertical flow. */
  .product-meta-grid,.product-meta-secondary,.product-save-row,.product-editor-grid,.product-details-grid,.modifier-editor-row,.tier-add-form,.addon-option-form{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%!important}
  .product-save-row>.vula-btn,.product-save-row>form,.product-save-row>form .vula-btn,.tier-add-form .vula-btn,.addon-option-form .vula-btn{width:100%!important;max-width:none!important}
  .menu-topbar,.menu-library-toolbar,.filter-toolbar,.search-filter-row,.vula-calendar-toolbar,.calendar-toolbar{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .menu-topbar input,.menu-library-toolbar input,.filter-toolbar input,.search-filter-row input{width:100%!important;min-width:100%!important}

  /* Tables remain horizontally scrollable only where a true table is necessary. */
  .vula-table{min-width:720px!important}
  .product-library-card .catalog-table-head,.product-library-card .product-table-head{display:none!important}
  .product-library-card .product-library-grid,.product-library-card .product-library-table{overflow:visible!important;border:0!important}
  .product-library-card .product-library-row{border:1px solid #e3e9ed!important;border-radius:14px!important;margin:0 0 10px!important;overflow:hidden!important;background:#fff!important}
  .product-library-card .product-library-row>.product-library-main.product-table-row,.product-library-card .product-table-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px 12px!important;min-width:0!important;width:100%!important;padding:14px!important}
  .product-library-card .product-col-name{grid-column:1/-1!important}.product-library-card .product-col-category,.product-library-card .product-col-price,.product-library-card .product-col-dietary{grid-column:1!important;text-align:left!important}.product-library-card .product-col-actions{grid-column:2!important;grid-row:2/5!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}

  .availability-calendar-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important}.availability-calendar-nav{width:100%!important;display:flex!important;justify-content:space-between!important}
  .profile-menu-row-rich,.profile-modifier-group{grid-template-columns:minmax(0,1fr)!important}.profile-menu-price{text-align:left!important}.profile-menu-item-copy>span{white-space:normal!important}
}

@media (max-width:430px){
  body.vula-app-body .vula-main{padding-left:10px!important;padding-right:10px!important}
  .vula-card,.vula-form-card{padding:14px!important}
  .unit-profile-row .unit-specs,.unit-profile-row .vula-row-actions{margin-left:0!important}
  .product-library-card .product-library-row>.product-library-main.product-table-row,.product-library-card .product-table-row{grid-template-columns:minmax(0,1fr)!important}
  .product-library-card .product-col-actions{grid-column:1!important;grid-row:auto!important;justify-content:flex-start!important}
}


/* ================= v0.3.63 — mobile document rows, non-wrapping status pills & dismissible popovers ================= */
/* Status pills are atomic UI labels: never split words across lines. */
.vula-pill{white-space:nowrap!important;flex-shrink:0!important}

/* Close control added to edit/photo popovers by the app script. Hidden on desktop; useful on contained mobile overlays. */
.vula-popover-close{display:none}

@media (max-width:700px){
  /* Compliance document library: flexible content + fixed action rail on every row. */
  .compliance-layout .vula-list-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 128px!important;
    gap:14px!important;
    align-items:start!important;
    padding:16px 2px!important;
  }
  .compliance-layout .vula-list-row>div:first-child{grid-column:1!important;min-width:0!important;padding-right:2px!important}
  .compliance-layout .vula-list-row>div:first-child strong{display:block!important;line-height:1.4!important}
  .compliance-layout .vula-list-row>div:first-child span{line-height:1.45!important;overflow-wrap:anywhere!important}
  .compliance-layout .document-date-status{
    grid-column:2!important;
    width:128px!important;
    min-width:128px!important;
    max-width:128px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:end!important;
    align-content:start!important;
    gap:9px!important;
  }
  .compliance-layout .document-date-status>.vula-pill{justify-self:end!important;margin:0!important}
  .compliance-layout .document-date-status>.vula-row-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    width:128px!important;
    min-width:128px!important;
    margin:0!important;
  }
  .compliance-layout .document-date-status>.vula-row-actions details,
  .compliance-layout .document-date-status>.vula-row-actions>form{flex:0 0 auto!important;margin:0!important}
  .compliance-layout .document-date-status>.vula-row-actions summary,
  .compliance-layout .document-date-status>.vula-row-actions .vula-delete-btn{white-space:nowrap!important}

  /* Standard compliance tags (Missing / On file etc.) keep their shape. */
  .standard-doc-row{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important}
  .standard-doc-row>.vula-pill{white-space:nowrap!important;align-self:start!important}

  /* Every edit/photo overlay can be dismissed without saving. */
  .vula-row-actions details[open]>.vula-edit-popover,
  .vehicle-driver-edit[open]>.vula-edit-popover,
  .staff-id-edit[open]>.vula-edit-popover,
  .unit-photo-edit[open]>form,
  .menu-image-edit[open]>form{padding-top:48px!important}
  .vula-popover-close{
    display:inline-flex!important;
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    z-index:5!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    padding:0!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #dfe5e7!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#10232d!important;
    font:500 22px/1 Arial,sans-serif!important;
    cursor:pointer!important;
    box-shadow:0 2px 8px rgba(13,36,48,.06)!important;
  }
}

@media (max-width:390px){
  .compliance-layout .vula-list-row{grid-template-columns:minmax(0,1fr) 116px!important;gap:10px!important}
  .compliance-layout .document-date-status,
  .compliance-layout .document-date-status>.vula-row-actions{width:116px!important;min-width:116px!important;max-width:116px!important}
}