/* Orange Finance mobile view layer v0.5.6.6.115
   Loaded last. Desktop CSS is untouched; this file only applies at mobile/tablet widths. */

@media (max-width: 782px){
  html{height:auto!important;min-height:100%;overflow-x:hidden;}
  body.of-body{height:auto!important;min-height:100dvh!important;overflow-x:hidden!important;overflow-y:auto!important;background:var(--of-bg,#f6f6f4)!important;}
  body.of-body.admin-bar{height:auto!important;}
  body.of-body.admin-bar .of-app,
  body.of-body.admin-bar .of-main,
  body.of-body.admin-bar .of-sidebar{height:auto!important;}

  .of-app{display:block!important;height:auto!important;min-height:100dvh!important;overflow:visible!important;}
  .of-main{width:100%!important;height:auto!important;min-height:100dvh!important;overflow:visible!important;}
  .of-content{height:auto!important;min-height:calc(100dvh - 66px)!important;overflow:visible!important;padding:14px!important;}

  /* Off-canvas mobile sidebar. Uses the existing collapse toggle: collapsed = hidden, expanded = open. */
  .of-sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:min(86vw,310px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    flex-basis:auto!important;
    z-index:10080!important;
    padding:14px 12px 20px!important;
    transform:translateX(0)!important;
    transition:transform .22s ease, box-shadow .22s ease!important;
    box-shadow:18px 0 48px rgba(15,23,42,.28)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.of-body.admin-bar .of-sidebar{top:0!important;height:100dvh!important;}
  .of-app.of-is-collapsed .of-sidebar{transform:translateX(-105%)!important;width:min(86vw,310px)!important;flex-basis:auto!important;}
  .of-app:not(.of-is-collapsed)::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.42);
    z-index:10070;
  }
  .of-brand{justify-content:flex-start!important;padding:6px 8px 12px!important;}
  .of-brand-text{display:block!important;color:#fff!important;line-height:1.25!important;}
  .of-nav{gap:7px!important;}
  .of-nav-group{margin:14px 8px 6px!important;text-align:left!important;font-size:10px!important;letter-spacing:.08em!important;}
  .of-nav-item,
  .of-app.of-is-collapsed .of-nav-item{
    height:44px!important;
    min-height:44px!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    gap:10px!important;
    padding:0 12px!important;
    border-radius:14px!important;
  }
  .of-nav-item span,
  .of-app.of-is-collapsed .of-nav-item span{
    display:inline!important;
    font-size:14px!important;
    line-height:1.2!important;
    text-align:left!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .of-nav-item .of-icon{width:21px!important;height:21px!important;flex:0 0 21px!important;}
  .of-nav-item .of-nav-badge{position:static!important;margin-left:auto!important;}

  /* Topbar compression */
  .of-topbar{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    min-height:62px!important;
    padding:10px 12px!important;
    gap:8px!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:saturate(180%) blur(10px);
  }
  .of-top-toggle{display:inline-flex!important;margin-right:6px!important;flex:0 0 40px!important;width:40px!important;height:40px!important;border-radius:14px!important;}
  .of-topbar-left{display:flex!important;align-items:center!important;min-width:0!important;flex:1 1 auto!important;}
  .of-page-title{font-size:17px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;}
  .of-topbar-right{flex:0 0 auto!important;gap:6px!important;min-width:0!important;}
  .of-topbar-refresh-btn{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;justify-content:center!important;border-radius:14px!important;}
  .of-topbar-refresh-btn span,
  .of-topbar-refresh-btn .of-refresh-label{display:none!important;}
  .of-top-link{min-height:40px!important;height:40px!important;padding:0 10px!important;border-radius:14px!important;}
  .of-top-link-settings span:last-child,
  .of-top-link-profile span:last-child{display:none!important;}
  .of-notif-bell{width:40px!important;height:40px!important;border-radius:14px!important;}
  .of-notif-panel{position:fixed!important;top:66px!important;right:10px!important;left:10px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 82px)!important;z-index:10120!important;border-radius:18px!important;}

  /* Core layouts */
  .of-onboard,.of-section-head,.of-panel-head{align-items:flex-start!important;flex-direction:column!important;gap:10px!important;}
  .of-onboard{padding:13px!important;}
  .of-progress{font-size:12px!important;}
  .of-kpis,.of-ops-kpis,.of-fleet-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .of-kpi,.of-fleet-kpi{border-radius:16px!important;padding:13px!important;min-width:0!important;}
  .of-kpi-value,.of-fleet-kpi strong{font-size:25px!important;}
  .of-dashboard-grid,.of-fm-grid,.of-vehicles .of-split,.of-fleet-layout,.of-fleet-active-trips .of-fat-layout,.of-fleet-incidents .of-fleet-layout,.of-inbox-split{grid-template-columns:1fr!important;gap:12px!important;}
  .of-panel{border-radius:18px!important;padding:13px!important;margin-bottom:12px!important;}
  .of-panel-body{font-size:13px!important;}
  .of-panel-actions{width:100%!important;display:flex!important;flex-direction:column!important;gap:8px!important;align-items:stretch!important;}
  .of-panel-actions .of-input,.of-panel-actions .of-btn,.of-panel-actions a.of-btn{width:100%!important;}
  .of-section-head .of-btn,.of-panel-head .of-btn,.of-panel-head a.of-btn{width:100%!important;justify-content:center!important;text-align:center!important;}

  .of-create-grid,.of-quick-grid,.of-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .of-create-tile{height:auto!important;min-height:82px!important;border-radius:16px!important;}
  .of-row{grid-template-columns:auto minmax(0,1fr)!important;gap:10px!important;}
  .of-row-meta,.of-row-chip{grid-column:2!important;justify-self:start!important;}

  /* Forms, filters, modals and drawers */
  .of-grid,.of-grid.two,.of-grid.three,.of-grid.four,.of-grid.five,.of-grid2,.of-grid-2,.of-grid-3,.of-grid-form,
  .of-fr-drawer-grid,.of-fm-card-meta,.of-fi-meta,.of-petty-form-grid,.of-exp-form-grid,.of-fuel-form-grid,.of-inbox-modal .of-form-grid{
    grid-template-columns:1fr!important;
  }
  .of-input,.of-inp,input[type=text],input[type=email],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important; /* prevents iOS zoom */
  }
  .of-modal,.of-exp-create-modal,.of-petty-modal,.of-fleet-modal,.of-fleet-action-modal,.of-fleet-return-modal,.of-fr-drawer,.of-dept-modal{z-index:10150!important;}
  .of-modal-card,.of-modal-dialog,.of-fleet-modal-card,.of-fleet-action-card,.of-fleet-return-card,.of-fr-drawer .of-modal-card,.of-fm-modal .of-modal-card{
    width:calc(100vw - 18px)!important;
    max-width:calc(100vw - 18px)!important;
    max-height:calc(100dvh - 18px)!important;
    margin:9px auto!important;
    border-radius:18px!important;
  }
  .of-modal-head,.of-modal-foot{padding:12px!important;gap:8px!important;}
  .of-modal-body{padding:12px!important;max-height:calc(100dvh - 142px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;}
  .of-modal-foot{flex-direction:column-reverse!important;}
  .of-modal-foot .of-btn{width:100%!important;justify-content:center!important;}

  /* Tables become safe horizontal scrollers by default; selected fleet/report tables become cards below. */
  .of-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:16px!important;}
  table.of-table{min-width:720px!important;}

  /* Fleet Request page: priority mobile rebuild */
  .of-fleet .of-fleet-hero{padding:18px!important;border-radius:20px!important;align-items:flex-start!important;gap:14px!important;flex-direction:column!important;}
  .of-fleet-hero-copy{align-items:flex-start!important;gap:12px!important;}
  .of-fleet-hero h2{font-size:24px!important;line-height:1.1!important;margin:0!important;}
  .of-fleet-hero p{font-size:14px!important;line-height:1.4!important;margin:6px 0 0!important;}
  .of-fleet-new{width:100%!important;justify-content:center!important;min-height:46px!important;}
  .of-staff-fleet-availability{margin:12px 0!important;}
  .of-staff-fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .of-staff-fleet-card{border-radius:16px!important;padding:14px!important;}
  .of-staff-fleet-card-top{gap:8px!important;margin-bottom:12px!important;}
  .of-staff-fleet-name{font-size:14px!important;line-height:1.16!important;}
  .of-staff-fleet-pill{font-size:10px!important;padding:6px 8px!important;}
  .of-staff-fleet-meta{font-size:12px!important;padding:9px 0!important;gap:8px!important;}
  .of-fleet-table thead{display:none!important;}
  .of-fleet-table,.of-fleet-table tbody,.of-fleet-table tr,.of-fleet-table td{display:block!important;width:100%!important;min-width:0!important;}
  .of-fleet-table{min-width:0!important;border-spacing:0!important;}
  .of-fleet-table tr{border:1px solid #edf2f7!important;border-radius:16px!important;background:#fff!important;padding:12px!important;margin:0 0 10px!important;box-shadow:0 8px 20px rgba(15,23,42,.035)!important;}
  .of-fleet-table td{border:0!important;padding:6px 0!important;}
  .of-fleet-table td:before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-weight:800;margin-bottom:3px;}
  .of-fleet-actions,.of-fleet-action-buttons{display:flex!important;flex-direction:column!important;gap:8px!important;}
  .of-fleet-table .of-btn{width:100%!important;justify-content:center!important;}
  .of-repeat-head{flex-direction:column!important;align-items:stretch!important;gap:8px!important;}
  .of-repeat-head .of-btn{width:100%!important;}
  .of-fleet-stop-row,.of-fleet-passenger-row,.of-fleet-external-row{grid-template-columns:1fr!important;gap:8px!important;}

  /* Active Trips / Fleet operations mobile containment */
  .of-fat-board{grid-template-columns:1fr!important;gap:12px!important;}
  .of-fat-trip-card{border-radius:18px!important;padding:14px!important;}
  .of-fat-trip-head,.of-fat-vehicle,.of-fat-time{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;}
  .of-fat-route{grid-template-columns:1fr!important;gap:5px!important;}
  .of-fat-route b{display:none!important;}
  .of-fat-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  .of-fat-actions .of-btn{width:100%!important;justify-content:center!important;}
  .of-fm-card-grid,.of-fi-card-grid{grid-template-columns:1fr!important;}
  .of-health-meter{grid-template-columns:1fr!important;justify-items:start!important;}

  /* Fleet reports mobile */
  .of-fleet-reports .of-fr-filter-grid{grid-template-columns:1fr!important;gap:10px!important;}
  .of-fleet-reports .of-fr-run{width:100%!important;}
  .of-fr-table{min-width:0!important;table-layout:auto!important;}
  .of-fr-table thead{display:none!important;}
  .of-fr-table,.of-fr-table tbody,.of-fr-table tr,.of-fr-table td{display:block!important;width:100%!important;}
  .of-fr-table tbody tr{border-radius:16px!important;margin-bottom:10px!important;padding:10px!important;}
  .of-fr-table tbody td{border:0!important;padding:7px!important;border-radius:0!important;white-space:normal!important;}
  .of-fr-route-cell,.of-fr-primary strong,.of-fr-primary small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
  .of-fr-action-group{justify-content:flex-start!important;flex-direction:column!important;}
  .of-fr-action-group .of-btn{width:100%!important;}
  .of-fr-pager,.of-list-pager{flex-direction:column!important;align-items:stretch!important;}
  .of-fr-pages,.of-pages{flex-wrap:wrap!important;}

  /* Files, vehicles, inbox, reports and other modules */
  .of-fm-toolbar,.of-fm-tools{flex-direction:column!important;align-items:stretch!important;width:100%!important;}
  .of-fm-search{width:100%!important;}
  .of-fm-files{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .of-fm-preview{height:180px!important;}
  .of-vehicles-actions{width:100%!important;flex-direction:column!important;align-items:stretch!important;}
  .of-vehicles-search,.of-vehicles-new{width:100%!important;min-width:0!important;}
  .of-vehicles-stats,.of-veh-grid{grid-template-columns:1fr!important;}
  .of-inbox-list{max-height:none!important;}
  .of-inbox-thread{max-height:none!important;}
  .of-inbox-msg{max-width:100%!important;}
  .of-reports-summary,.of-reports-grid,.of-reports-kpis{grid-template-columns:1fr!important;}

  /* Admin-like pages inside app */
  .of-admin .of-grid,.of-admin .of-grid-2,.of-admin .of-grid-3{grid-template-columns:1fr!important;max-width:100%!important;}
  .of-admin table{display:block!important;width:100%!important;overflow-x:auto!important;}
}

@media (max-width: 560px){
  .of-content{padding:10px!important;}
  .of-topbar{padding:9px 10px!important;}
  .of-page-title{font-size:16px!important;}
  .of-kpis,.of-ops-kpis,.of-fleet-kpi-grid{grid-template-columns:1fr!important;}
  .of-create-grid,.of-quick-grid,.of-support-grid{grid-template-columns:1fr!important;}
  .of-staff-fleet-grid{grid-template-columns:1fr!important;}
  .of-staff-fleet-card-top{align-items:flex-start!important;}
  .of-staff-fleet-name{font-size:15px!important;}
  .of-fm-files{grid-template-columns:1fr!important;}
  .of-chip-row{gap:7px!important;}
  .of-chip{font-size:12px!important;padding:7px 9px!important;}
  .of-modal-card,.of-modal-dialog,.of-fleet-modal-card,.of-fleet-action-card,.of-fleet-return-card{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;margin:5px auto!important;border-radius:16px!important;}
}


/* Orange Finance full mobile hardening layer v0.5.6.6.114
   This section intentionally stays mobile-only and loads after the desktop app styles. */
@media (max-width: 782px){
  *,*::before,*::after{box-sizing:border-box;}
  html,body{width:100%;max-width:100%;}
  body.of-body{touch-action:manipulation;}
  img,svg,canvas,video,iframe{max-width:100%;height:auto;}
  a,button,.of-btn,.of-nav-item,.of-chip,.of-page-btn{min-height:40px;}
  .of-content > *{max-width:100%;}

  /* Shell containment: no desktop-width page leaking horizontally. */
  .of-main,.of-content,.of-panel,.of-card,.of-pane,.of-pane-inner,.of-section-head,.of-panel-head,.of-panel-body,
  .of-dashboard-grid,.of-dashboard-ops-section,.of-col-main,.of-col-side{min-width:0!important;max-width:100%!important;}
  .of-content{width:100%!important;}
  .of-app:not(.of-is-mobile) .of-main{width:100%!important;}

  /* Topbar: preserve core controls but prevent desktop overflow. */
  .of-topbar{width:100%!important;max-width:100%!important;overflow:visible!important;}
  .of-topbar-left,.of-topbar-right{min-width:0!important;}
  .of-topbar-right{gap:5px!important;}
  .of-topbar-right > *{flex:0 0 auto!important;}
  .of-top-link,.of-notif-bell,.of-topbar-refresh-btn,.of-top-toggle{box-shadow:none!important;}
  .of-page-title + *,.of-section-sub{max-width:100%!important;overflow-wrap:anywhere!important;}

  /* Universal app grid/flex fallbacks for hidden inline/module CSS. */
  [class*="grid"],[class*="Grid"],[class*="-grid"],[class*="_grid"]{min-width:0!important;}
  .of-grid,.of-grid2,.of-grid-2,.of-grid-3,.of-grid-4,.of-grid-form,.of-form-grid,.of-create-grid,.of-quick-grid,
  .of-support-grid,.of-dashboard-grid,.of-reports-summary,.of-reports-grid,.of-reports-kpis,.of-summary-grid,
  .of-fuel-kpis,.of-petty-kpis,.of-todo-stats,.of-vehicles-stats,.of-veh-stats-grid,.of-fm-grid,.of-fm-folders,.of-fm-files,
  .of-files-grid,.of-supplies-meta-grid,.of-supplies-split,.of-supplies-toolbar,.of-inline-form,
  .of-exp-grid,.of-exp-form,.of-set-rules,.of-set-row,.of-set-editor,.of-exp-row,.of-exp-row-meta,
  .of-petty-split,.of-petty-form,.of-petty-form-row,.of-petty-detail-head,.of-petty-dl-row,
  .of-fuel-route-grid,.of-fuel-stop-row,.of-fuel-journey-head,.of-fuel-journey-card,
  .of-ledger-row,.of-ledger-staff-row,.of-ledger-staff-cards,.of-ledger-top-filters,.of-ledger-staff-filters,
  .of-profile-hero,.of-profile-form,.of-profile-links,.of-profile-meta-row,.of-profile-actions,
  .of-departments .of-grid-2,.of-departments .of-split,.of-vehicles .of-split,.of-expenses .of-split,.of-fuel .of-split,.of-ledger .of-split,
  .of-split,.of-split-left,.of-split-right{grid-template-columns:1fr!important;}

  /* Inline styles with repeat(2/3/4) must collapse without editing PHP. */
  .of-grid-form[style],.of-form-grid[style],.of-grid-2[style],.of-grid-3[style],.of-grid[style],.of-inline-form[style],
  form[style*="grid-template-columns"],div[style*="grid-template-columns"]{grid-template-columns:1fr!important;max-width:100%!important;}
  [style*="grid-column"]{max-width:100%!important;}

  /* Action rows become tap-friendly stacks. */
  .of-actions,.of-actions-row,.of-panel-actions,.of-section-actions,.of-form-actions,.of-set-actions,.of-exp-actions,
  .of-petty-actions,.of-petty-detail-actions,.of-fuel-head,.of-petty-head,.of-exp-head,.of-files-head,.of-files-top,
  .of-vehicles-head,.of-supplies-actions,.of-supplies-inline-actions,.of-supplies-section-head,.of-notif-toolbar,
  .of-reports-filter-row,.of-petty-toolbar,.of-fuel-head,.of-fleet-filter-row,.of-fi-filters,.of-fm-filters,.of-fr-filters{
    flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%!important;
  }
  .of-actions > *,.of-actions-row > *,.of-panel-actions > *,.of-section-actions > *,.of-form-actions > *,
  .of-exp-actions > *,.of-petty-actions > *,.of-supplies-actions > *,.of-notif-toolbar > *,
  .of-reports-filter-row > *,.of-petty-toolbar > *,.of-fleet-filter-row > *,.of-fi-filters > *,.of-fm-filters > *,.of-fr-filters > *{
    width:100%!important;max-width:100%!important;min-width:0!important;justify-content:center!important;
  }
  .of-btn,.of-input,.of-select,.of-inp,.of-textarea,.of-mini-select,select,input,textarea{min-width:0!important;max-width:100%!important;}

  /* Cards and dashboard widgets should feel mobile-native, not squeezed desktop cards. */
  .of-kpis,.of-ops-kpis,.of-fleet-kpi-grid,.of-fat-command-kpis,.of-fr-kpis,.of-fm-kpis,.of-veh-stats-grid,
  .of-fuel-kpis,.of-petty-kpis,.of-todo-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .of-card,.of-kpi,.of-fleet-kpi,.of-summary-card,.of-fuel-kpi,.of-petty-kpi,.of-todo-stat,.of-veh-stat-card,.of-op-card,
  .of-info-card,.of-profile-mini-card,.of-supplies-section,.of-metric{border-radius:16px!important;padding:13px!important;min-width:0!important;}
  .of-card h2,.of-card h3,.of-panel-title,.of-section-title{font-size:16px!important;line-height:1.2!important;overflow-wrap:anywhere!important;}
  .of-kpi-value,.of-summary-value,.of-petty-kpi-val,.of-veh-stat-value{font-size:24px!important;line-height:1.05!important;}

  /* Tables: contain every table. Known row/card tables get mobile cards where labels exist. */
  .of-table-wrap,.of-vehicles-table-wrap,.of-files-wrap,.of-files-table,.of-set-table,.of-exp-table,.of-petty-table,.of-fuel-table,
  .of-supplies table,.of-admin table,.widefat,.striped{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  table,.of-table,.of-vehicles-table,.of-exp-table,.of-petty-table,.of-fuel-table,.of-files-table,.of-set-table{max-width:100%!important;}
  .of-table th,.of-table td,.widefat th,.widefat td{white-space:nowrap;}
  .of-table td,.of-table th{font-size:12px!important;}

  /* Fleet Requests: show requested staff-safe availability and make request rows readable. */
  .of-staff-fleet-availability{display:block!important;width:100%!important;max-width:100%!important;margin:12px 0 14px!important;}
  .of-staff-fleet-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .of-staff-fleet-card{min-width:0!important;overflow:hidden!important;}
  .of-staff-fleet-card-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important;}
  .of-staff-fleet-name{min-width:0!important;overflow-wrap:anywhere!important;}
  .of-staff-fleet-pill{white-space:nowrap!important;flex:0 0 auto!important;}
  .of-staff-fleet-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;}
  .of-staff-fleet-meta span:first-child{min-width:0!important;color:#64748b!important;}
  .of-staff-fleet-meta span:last-child{min-width:0!important;text-align:right!important;overflow-wrap:anywhere!important;}

  /* Fleet command / active trips / reports: mobile containment without changing desktop logic. */
  .of-fat-command-hero,.of-fat-command-toolbar,.of-fat-card-top,.of-fat-card-body,.of-fat-card-actions,.of-fat-availability-row,
  .of-fat-alert-strip,.of-fat-trip-head,.of-fat-vehicle,.of-fat-time,.of-fr-detail-hero,.of-fm-card-head,.of-fi-card-head,
  .of-detail-top,.of-detail-grid{flex-direction:column!important;align-items:stretch!important;gap:10px!important;}
  .of-fat-command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .of-fat-vehicle-grid,.of-fat-board,.of-fm-card-grid,.of-fi-card-grid,.of-fr-detail-grid,.of-fr-drawer-grid{grid-template-columns:1fr!important;}
  .of-fat-toolbar-actions,.of-fat-toolbar-actions .of-input{width:100%!important;max-width:100%!important;min-width:0!important;}
  .of-fat-vehicle-card,.of-fat-trip-card,.of-fm-card,.of-fi-card{min-height:0!important;width:100%!important;}
  .of-fat-card-meta{grid-template-columns:1fr!important;gap:4px!important;}
  .of-fat-card-meta b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
  .of-fr-mini-row,.of-fr-mini-table.passengers .of-fr-mini-row{grid-template-columns:1fr!important;}

  /* Expenses */
  .of-exp-typebar,.of-tabs,.of-chipbar,.of-chips,.of-petty-chipbar{display:flex!important;overflow-x:auto!important;gap:8px!important;padding-bottom:4px!important;-webkit-overflow-scrolling:touch!important;}
  .of-exp-typebar > *,.of-tabs > *,.of-chipbar > *,.of-chips > *,.of-petty-chipbar > *{flex:0 0 auto!important;white-space:nowrap!important;}
  .of-exp-row{display:block!important;border-radius:16px!important;padding:12px!important;}
  .of-exp-row-right{margin-top:10px!important;align-items:flex-start!important;}
  .of-exp-att-row,.of-petty-att-row,.of-file-row{grid-template-columns:1fr!important;gap:8px!important;}

  /* Petty Cash */
  .of-petty-row,.of-petty-tr{display:block!important;border-radius:16px!important;padding:12px!important;margin-bottom:10px!important;}
  .of-petty-right,.of-right{margin-top:10px!important;align-items:flex-start!important;text-align:left!important;}
  .of-stepper{overflow-x:auto!important;padding-bottom:6px!important;}
  .of-step{min-width:96px!important;}

  /* Fuel */
  .of-fuel-card,.of-fuel-journey-card,.of-fuel-route-card{border-radius:16px!important;padding:12px!important;}
  .of-fuel-row-route,.of-fuel-route-stops{grid-template-columns:1fr!important;}
  .of-fuel-stop-row{display:block!important;}
  .of-fuel-search{width:100%!important;}

  /* Files */
  .of-fm-shell,.of-files-wrap{grid-template-columns:1fr!important;display:grid!important;gap:12px!important;}
  .of-fm-left,.of-fm-center,.of-fm-right,.of-files-box{min-width:0!important;width:100%!important;}
  .of-fm-files,.of-fm-folders,.of-files-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .of-fm-file,.of-fm-folder,.of-folder,.of-file-row{min-width:0!important;}
  .of-fm-file-name,.of-fm-folder-name,.of-file-name,.of-folder-name{white-space:normal!important;overflow-wrap:anywhere!important;}

  /* Vehicles */
  .of-vehicles-table thead{display:none!important;}
  .of-vehicles-table,.of-vehicles-table tbody,.of-vehicles-table tr,.of-vehicles-table td{display:block!important;width:100%!important;min-width:0!important;}
  .of-vehicles-table tr{border:1px solid #edf2f7!important;border-radius:16px!important;background:#fff!important;padding:12px!important;margin:0 0 10px!important;}
  .of-vehicles-table td{border:0!important;padding:6px 0!important;white-space:normal!important;}
  .of-vehicle-cell{align-items:flex-start!important;}
  .of-veh-card,.of-veh-grid{min-width:0!important;width:100%!important;}

  /* Inbox */
  .of-inbox-split{display:grid!important;grid-template-columns:1fr!important;}
  .of-inbox-filters,.of-actions-end{flex-direction:column!important;align-items:stretch!important;width:100%!important;}
  .of-inbox-item{border-radius:16px!important;}
  .of-inbox-msg{max-width:100%!important;width:100%!important;}
  .of-inbox-compose{position:static!important;}

  /* Ledger / Reports / Profile / Notifications / Supplies / Departments / Todo */
  .of-ledger-row,.of-ledger-staff-row{display:block!important;padding:12px!important;border-radius:16px!important;}
  .of-ledger-staff-actions{margin-top:10px!important;display:flex!important;flex-direction:column!important;gap:8px!important;}
  .of-ledger-staff-actions .of-btn{width:100%!important;}
  .of-notif-item{grid-template-columns:12px minmax(0,1fr)!important;gap:10px!important;}
  .of-notif-search input,.of-reports-filters .of-input,.of-reports-filters select{width:100%!important;}
  .of-profile-avatar-lg{width:82px!important;height:82px!important;}
  .of-profile-hero-main{flex-direction:column!important;align-items:flex-start!important;}
  .of-supplies-row{display:block!important;padding:12px!important;border-radius:16px!important;}
  .of-supplies-inline-actions{margin-top:10px!important;}
  .of-todo-row{grid-template-columns:36px minmax(0,1fr)!important;}
  .of-todo-actions{grid-column:1 / -1!important;display:flex!important;flex-direction:column!important;gap:8px!important;margin-top:8px!important;}
  .of-todo-actions .of-btn{width:100%!important;}

  /* Modals and drawers: full mobile viewport, scroll inside body only. */
  .of-modal,.of-exp-action-modal,.of-exp-pay-modal,.of-exp-receipt-modal,.of-exp-close-modal,.of-exp-create-modal,.of-exp-settings-modal,
  .of-petty-modal,.of-fleet-modal,.of-fleet-action-modal,.of-fleet-return-modal,.of-fleet-detail-modal,.of-fleet-detail-drawer,.of-fr-drawer,
  .of-dept-modal,.of-fm-modal,.of-inbox-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:0!important;align-items:stretch!important;justify-content:stretch!important;overflow:hidden!important;}
  .of-modal-backdrop,.of-fleet-drawer-backdrop{position:absolute!important;inset:0!important;}
  .of-modal-card,.of-modal-dialog,.of-exp-create-modal .of-modal-card,.of-petty-modal .of-modal-dialog,.of-fleet-modal-card,
  .of-fleet-action-card,.of-fleet-return-card,.of-fleet-detail-modal .of-fleet-drawer-card,.of-fleet-drawer-card,.of-fr-drawer .of-modal-card,
  .of-dept-modal .of-modal-card,.of-fm-modal .of-modal-card,.of-inbox-modal .of-modal-card{
    width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
  }
  .of-modal-head,.of-modal-foot,.of-fleet-drawer-head,.of-fleet-drawer-actions{flex:0 0 auto!important;padding:12px!important;}
  .of-modal-body,.of-fleet-drawer-body{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;padding:12px!important;}
  .of-modal-title{font-size:17px!important;line-height:1.2!important;}

  /* Admin/plugin settings screens if displayed in app container. */
  .of-admin,.of-card,.wrap{max-width:100%!important;}
  .of-admin .of-grid-2,.of-admin .of-grid-3,.of-admin .of-settings-grid,.of-admin .of-modules-grid{grid-template-columns:1fr!important;}
  .of-admin input,.of-admin select,.of-admin textarea{width:100%!important;max-width:100%!important;}
}

@media (max-width: 560px){
  .of-kpis,.of-ops-kpis,.of-fleet-kpi-grid,.of-fat-command-kpis,.of-fr-kpis,.of-fm-kpis,.of-veh-stats-grid,
  .of-fuel-kpis,.of-petty-kpis,.of-todo-stats{grid-template-columns:1fr!important;}
  .of-staff-fleet-grid,.of-fm-files,.of-fm-folders,.of-files-grid{grid-template-columns:1fr!important;}
  .of-topbar-right .of-top-link-settings,.of-topbar-right .of-top-link-profile{width:40px!important;padding:0!important;justify-content:center!important;}
  .of-topbar-right .of-top-link-settings .of-icon,.of-topbar-right .of-top-link-profile .of-icon{margin:0!important;}
  .of-card,.of-kpi,.of-panel{border-radius:15px!important;padding:12px!important;}
  .of-content{padding:10px!important;}
  .of-fat-command-hero,.of-fleet-hero{padding:14px!important;}
  .of-fat-command-hero h2,.of-fleet-hero h2{font-size:22px!important;}
}

/* Orange Finance complete module mobile certification layer v0.5.6.6.115
   Explicit coverage for every shipped module: dashboard, fleet, fuel, supplies, expenses,
   petty cash, ledger, files, vehicles, inbox, notifications, departments, todo, profile,
   reports, support and admin settings. Desktop remains untouched. */
@media (max-width: 782px){
  .of-body, .of-app, .of-main, .of-content{max-width:100vw!important;overflow-x:hidden!important;}
  .of-content{display:block!important;}
  .of-panel, .of-panel-body, .of-card, .of-table-wrap, .of-modal-body{min-width:0!important;max-width:100%!important;}
  .of-btn, button, input, select, textarea{max-width:100%!important;}

  /* Route/module wrappers */
  .of-fuel,.of-supplies,.of-expenses,.of-petty,.of-ledger,.of-files,.of-vehicles,.of-inbox,.of-notifications,.of-departments,.of-todo-page,.of-profile,.of-reports,.of-fleet,.of-admin{width:100%!important;max-width:100%!important;min-width:0!important;}
  .of-split,.of-fuel .of-split,.of-supplies .of-supplies-split,.of-expenses .of-split,.of-petty-split,.of-ledger .of-split,.of-vehicles .of-split,.of-inbox-split,.of-departments .of-split,.of-profile .of-split{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
  .of-split-left,.of-split-right,.of-col-main,.of-col-side,.of-ledger-staff-panel,.of-ledger-details,.of-supplies-details,.of-fuel-detail,.of-vehicles-detail,.of-inbox-side,.of-inbox-main{width:100%!important;max-width:100%!important;min-width:0!important;}

  /* Universal headers/actions/searches */
  .of-panel-head,.of-section-head,.of-fuel-head,.of-petty-head,.of-exp-head,.of-vehicles-head,.of-files-head,.of-files-top,.of-supplies-toolbar,.of-supplies-section-head,.of-reports-head,.of-dept-row-top,.of-profile-hero-main,.of-ledger-staff-head,.of-ledger-module-head{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%!important;
  }
  .of-panel-actions,.of-actions,.of-actions-row,.of-form-actions,.of-exp-actions,.of-petty-actions,.of-petty-detail-actions,.of-supplies-actions,.of-supplies-inline-actions,.of-fuel-detail-actions,.of-files-actions,.of-vehicles-actions,.of-inbox-filters,.of-notif-toolbar,.of-reports-filter-row,.of-ledger-top-filters,.of-ledger-staff-filters,.of-todo-toolbar,.of-fm-toolbar,.of-fm-tools,.of-fm-tabs,.of-fi-filters,.of-fm-filters,.of-fr-filters{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:9px!important;width:100%!important;max-width:100%!important;
  }
  .of-panel-actions > *,.of-actions > *,.of-actions-row > *,.of-form-actions > *,.of-exp-actions > *,.of-petty-actions > *,.of-supplies-actions > *,.of-supplies-inline-actions > *,.of-fuel-detail-actions > *,.of-files-actions > *,.of-vehicles-actions > *,.of-inbox-filters > *,.of-notif-toolbar > *,.of-reports-filter-row > *,.of-ledger-top-filters > *,.of-ledger-staff-filters > *,.of-todo-toolbar > *,.of-fm-toolbar > *,.of-fm-tools > *,.of-fm-tabs > *,.of-fi-filters > *,.of-fm-filters > *,.of-fr-filters > *{
    width:100%!important;max-width:100%!important;min-width:0!important;justify-content:center!important;
  }
  .of-fuel-search,.of-petty-search,.of-expenses-search,.of-vehicles-search,.of-notif-search,.of-ledger-q,.of-inbox-filter,.of-todo-search,.of-fm-search{width:100%!important;min-width:0!important;max-width:100%!important;}

  /* Form grids and inline grids */
  .of-form-grid,.of-grid-form,.of-grid,.of-grid-2,.of-grid-3,.of-grid2,.of-profile-form,.of-profile-links,.of-profile-meta-row,.of-supplies .of-form-grid,.of-supplies .of-modal .of-form-grid,.of-supplies-meta-grid,.of-exp-form,.of-exp-grid,.of-petty-form,.of-petty-form-row,.of-fuel-route-grid,.of-fuel-stop-row,.of-fuel-journey-head,.of-fuel-journey-card,.of-fuel-route-card,.of-departments .of-grid-2,.of-inline-form,.of-set-editor,.of-set-row,.of-set-rules{
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;max-width:100%!important;
  }
  .of-field-span-2,[class*="field-span"],.of-supplies .of-field-span-2{grid-column:auto!important;}
  .of-inline-form{display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  .of-field-actions{display:flex!important;align-items:stretch!important;}
  .of-field-actions .of-btn{width:100%!important;}
  .of-input,.of-inp,.of-select,.of-mini-select,.of-textarea,input[type="text"],input[type="email"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="search"],select,textarea{width:100%!important;min-width:0!important;max-width:100%!important;font-size:16px!important;}

  /* KPI/card grids */
  .of-kpis,.of-ops-kpis,.of-dashboard-grid,.of-create-grid,.of-quick-grid,.of-support-grid,.of-fuel-kpis,.of-petty-kpis,.of-todo-stats,.of-vehicles-stats,.of-veh-stats-grid,.of-fleet-kpi-grid,.of-fat-command-kpis,.of-fr-kpis,.of-fm-kpis,.of-ledger-staff-cards,.of-fm-card-grid,.of-fi-card-grid,.of-fat-board,.of-fat-vehicle-grid,.of-files-grid,.of-fm-folders,.of-fm-files{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;max-width:100%!important;
  }
  .of-kpi,.of-op-card,.of-create-tile,.of-quick-wrap,.of-support-tile,.of-card,.of-fuel-kpi,.of-petty-kpi,.of-todo-stat,.of-veh-stat-card,.of-ledger-staff-card,.of-fm-card,.of-fi-card,.of-fat-trip-card,.of-fat-vehicle-card,.of-folder,.of-file-row,.of-fm-folder,.of-fm-file,.of-supplies-section,.of-metric{min-width:0!important;max-width:100%!important;overflow:hidden!important;}

  /* Fuel request page */
  .of-fuel-table{min-width:0!important;width:100%!important;border-spacing:0!important;table-layout:auto!important;}
  .of-fuel-table thead{display:none!important;}
  .of-fuel-table,.of-fuel-table tbody,.of-fuel-table tr,.of-fuel-table td{display:block!important;width:100%!important;min-width:0!important;}
  .of-fuel-table tbody tr{border:1px solid rgba(17,17,17,.10)!important;border-radius:16px!important;background:#fff!important;padding:12px!important;margin:0 0 10px!important;}
  .of-fuel-table tbody td{display:flex!important;justify-content:space-between!important;gap:12px!important;border:0!important;padding:7px 0!important;white-space:normal!important;border-radius:0!important;background:transparent!important;overflow-wrap:anywhere!important;}
  .of-fuel-table tbody td::before{flex:0 0 94px!important;text-align:left!important;}
  .of-fuel-files{display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  .of-file-pill{width:100%!important;justify-content:center!important;white-space:normal!important;text-align:center!important;}
  .of-fuel-route-grid > div,.of-fuel-route-stop{min-width:0!important;overflow-wrap:anywhere!important;}
  .of-fuel-stops-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;}

  /* Supplies */
  .of-supplies-row{display:block!important;width:100%!important;border:1px solid #e7e3dc!important;border-radius:16px!important;background:#fff!important;padding:12px!important;margin:0 0 10px!important;overflow-wrap:anywhere!important;}
  .of-supplies-item-title{font-size:18px!important;line-height:1.2!important;overflow-wrap:anywhere!important;}
  .of-supplies .of-metric{padding:12px!important;}
  .of-supplies .of-empty-state{padding:16px!important;border-radius:16px!important;}
  .of-supplies-request-modal,.of-supplies-receive-modal,.of-supplies-stock-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;overflow:hidden!important;z-index:10150!important;}

  /* Expenses */
  .of-exp-typebar,.of-exp-chips,.of-chips,.of-tabs,.of-chipbar{display:flex!important;flex-direction:row!important;overflow-x:auto!important;white-space:nowrap!important;gap:8px!important;padding-bottom:5px!important;-webkit-overflow-scrolling:touch!important;}
  .of-exp-typebar > *,.of-exp-chips > *,.of-chips > *,.of-tabs > *,.of-chipbar > *{flex:0 0 auto!important;width:auto!important;}
  .of-exp-row,.of-exp-box,.of-set-row,.of-set-group{display:block!important;width:100%!important;border-radius:16px!important;padding:12px!important;overflow-wrap:anywhere!important;}
  .of-exp-row-meta,.of-exp-row-right{display:block!important;width:100%!important;margin-top:8px!important;text-align:left!important;}
  .of-exp-att-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}

  /* Petty cash */
  .of-petty-row,.of-petty-tr{display:block!important;width:100%!important;border:1px solid rgba(17,17,17,.10)!important;border-radius:16px!important;background:#fff!important;padding:12px!important;margin:0 0 10px!important;}
  .of-petty-left,.of-petty-right,.of-petty-meta,.of-petty-submeta{display:block!important;width:100%!important;text-align:left!important;margin-top:6px!important;}
  .of-petty-detail-block,.of-petty-file-row,.of-petty-tl-row{display:block!important;width:100%!important;border-radius:14px!important;overflow-wrap:anywhere!important;}
  .of-stepper{display:flex!important;overflow-x:auto!important;gap:8px!important;padding-bottom:6px!important;}
  .of-step{flex:0 0 104px!important;min-width:104px!important;}

  /* Ledger / reports */
  .of-ledger-row,.of-ledger-staff-row,.of-ledger-module-group,.of-ledger-date-group{display:block!important;width:100%!important;border-radius:16px!important;padding:12px!important;overflow-wrap:anywhere!important;}
  .of-ledger-kv,.of-ledger-module-head,.of-ledger-staff-row-meta{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;}
  .of-ledger-staff-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin-top:10px!important;}
  .of-reports-presets,.of-reports-summary{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .of-reports-chart-wrap,.of-reports-chart{width:100%!important;max-width:100%!important;overflow-x:auto!important;}
  .of-reports-table{display:block!important;width:100%!important;overflow-x:auto!important;}

  /* Files */
  .of-fm-shell,.of-files-wrap{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
  .of-fm-left,.of-fm-center,.of-fm-right,.of-files-box{width:100%!important;max-width:100%!important;min-width:0!important;}
  .of-fm-preview{height:auto!important;min-height:140px!important;max-height:260px!important;overflow:auto!important;}
  .of-fm-breadcrumbs,.of-files-crumbs{display:flex!important;overflow-x:auto!important;white-space:nowrap!important;gap:6px!important;padding-bottom:4px!important;}
  .of-file-name,.of-folder-name,.of-fm-file-name,.of-fm-folder-name{white-space:normal!important;overflow-wrap:anywhere!important;}

  /* Vehicles */
  .of-veh-grid,.of-vehicles-stats{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .of-vehicles-table{min-width:0!important;width:100%!important;border-spacing:0!important;}
  .of-vehicles-table thead{display:none!important;}
  .of-vehicles-table,.of-vehicles-table tbody,.of-vehicles-table tr,.of-vehicles-table td{display:block!important;width:100%!important;}
  .of-vehicles-table tr{border:1px solid #edf2f7!important;border-radius:16px!important;background:#fff!important;padding:12px!important;margin-bottom:10px!important;}
  .of-vehicles-table td{border:0!important;padding:6px 0!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .of-vehicle-cell{display:flex!important;align-items:flex-start!important;gap:10px!important;}

  /* Inbox / notifications / departments / todo / profile */
  .of-inbox-list{max-height:none!important;overflow:visible!important;}
  .of-inbox-thread{max-height:none!important;overflow:visible!important;padding-right:0!important;}
  .of-inbox-msg{max-width:100%!important;width:100%!important;}
  .of-inbox-modal .of-form-grid{grid-template-columns:1fr!important;}
  .of-notif-item{display:grid!important;grid-template-columns:12px minmax(0,1fr)!important;gap:10px!important;align-items:start!important;}
  .of-notif-item-main,.of-notif-item-msg,.of-notif-item-title{min-width:0!important;overflow-wrap:anywhere!important;}
  .of-dept-row,.of-todo-row{width:100%!important;max-width:100%!important;overflow:hidden!important;}
  .of-todo-row{grid-template-columns:36px minmax(0,1fr)!important;}
  .of-todo-actions{grid-column:1/-1!important;display:flex!important;flex-direction:column!important;gap:8px!important;}
  .of-profile-avatar-wrap,.of-profile-actions{width:100%!important;align-items:flex-start!important;}
  .of-profile-links,.of-profile-settings{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}

  /* All tables not explicitly converted must at least be contained. */
  table,.of-table,.widefat,.striped{max-width:100%!important;}
  .of-table-wrap,.of-table-responsive,.of-admin table,.of-supplies table,.of-files-table,.of-set-table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .of-table th,.of-table td,.widefat th,.widefat td{white-space:nowrap;font-size:12px!important;}

  /* Modals, including module-specific supply/expense/fuel/petty/fleet modals. */
  .of-modal,.of-exp-action-modal,.of-exp-pay-modal,.of-exp-receipt-modal,.of-exp-close-modal,.of-exp-create-modal,.of-exp-settings-modal,.of-petty-modal,.of-fleet-modal,.of-fleet-action-modal,.of-fleet-return-modal,.of-fleet-detail-modal,.of-fleet-detail-drawer,.of-fr-drawer,.of-dept-modal,.of-fm-modal,.of-inbox-modal,.of-supplies-request-modal,.of-supplies-receive-modal,.of-supplies-stock-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:0!important;margin:0!important;align-items:stretch!important;justify-content:stretch!important;overflow:hidden!important;z-index:10150!important;}
  .of-modal-card,.of-modal-dialog,.of-exp-action-card,.of-exp-create-modal .of-modal-card,.of-petty-modal .of-modal-dialog,.of-fleet-modal-card,.of-fleet-action-card,.of-fleet-return-card,.of-fleet-drawer-card,.of-fr-drawer .of-modal-card,.of-dept-modal .of-modal-card,.of-fm-modal .of-modal-card,.of-inbox-modal .of-modal-card,.of-supplies-request-modal .of-modal-card,.of-supplies-receive-modal .of-modal-card,.of-supplies-stock-modal .of-modal-card{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  .of-modal-head,.of-modal-foot,.of-fleet-drawer-head,.of-fleet-drawer-actions{flex:0 0 auto!important;padding:12px!important;}
  .of-modal-body,.of-fleet-drawer-body{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;padding:12px!important;}
  .of-modal-foot{display:flex!important;flex-direction:column-reverse!important;gap:8px!important;align-items:stretch!important;}
  .of-modal-foot .of-btn,.of-modal-head .of-btn{width:100%!important;justify-content:center!important;}
}

@media (max-width: 560px){
  .of-kpis,.of-ops-kpis,.of-dashboard-grid,.of-create-grid,.of-quick-grid,.of-support-grid,.of-fuel-kpis,.of-petty-kpis,.of-todo-stats,.of-vehicles-stats,.of-veh-stats-grid,.of-fleet-kpi-grid,.of-fat-command-kpis,.of-fr-kpis,.of-fm-kpis,.of-ledger-staff-cards,.of-fm-card-grid,.of-fi-card-grid,.of-fat-board,.of-fat-vehicle-grid,.of-files-grid,.of-fm-folders,.of-fm-files{grid-template-columns:1fr!important;}
  .of-content{padding:10px!important;}
  .of-panel,.of-card,.of-kpi,.of-op-card,.of-supplies-section,.of-metric{padding:12px!important;border-radius:15px!important;}
  .of-page-title{font-size:16px!important;}
  .of-panel-title,.of-section-title,.of-card h2,.of-card h3{font-size:15px!important;}
  .of-fuel-table tbody td,.of-petty-row,.of-exp-row,.of-supplies-row,.of-ledger-row,.of-vehicles-table td{font-size:12px!important;}
}

/* Mobile shell drawer hardening v0.5.6.6.119 */
@media (max-width: 782px){
  body.of-mobile-drawer-open{overflow:hidden!important;touch-action:none!important;}
  .of-app.of-is-mobile{position:relative!important;}
  .of-app.of-is-mobile .of-sidebar{will-change:transform!important;}
  .of-app.of-is-mobile.of-is-collapsed::before{display:none!important;content:none!important;}
  .of-app.of-is-mobile:not(.of-is-collapsed)::before{cursor:pointer!important;touch-action:none!important;}
  .of-app.of-is-mobile:not(.of-is-collapsed) .of-main{pointer-events:none!important;}
  .of-app.of-is-mobile:not(.of-is-collapsed) .of-sidebar{pointer-events:auto!important;}
  .of-app.of-is-mobile .of-topbar{z-index:10020!important;}
  .of-app.of-is-mobile:not(.of-is-collapsed) .of-topbar{z-index:10060!important;}
  .of-app.of-is-mobile .of-top-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:22px!important;font-weight:800!important;line-height:1!important;color:#111827!important;background:#fff!important;border:1px solid rgba(17,24,39,.10)!important;}
  .of-app.of-is-mobile:not(.of-is-collapsed) .of-top-toggle{position:fixed!important;top:12px!important;right:12px!important;left:auto!important;z-index:10130!important;background:#fff!important;box-shadow:0 14px 34px rgba(15,23,42,.22)!important;}
  body.admin-bar .of-app.of-is-mobile:not(.of-is-collapsed) .of-top-toggle{top:12px!important;}
  .of-app.of-is-mobile:not(.of-is-collapsed) .of-top-toggle::before{content:'×';font-size:30px;line-height:1;}
  .of-app.of-is-mobile:not(.of-is-collapsed) .of-top-toggle{font-size:0!important;}
  .of-app.of-is-mobile .of-sidebar{overscroll-behavior:contain!important;}
  .of-app.of-is-mobile .of-nav{padding-bottom:28px!important;}
  .of-app.of-is-mobile .of-brand{padding-right:54px!important;}
}

@media (max-width: 782px){
  .of-staff-fleet-thumb{height:104px!important;border-radius:14px!important;margin-bottom:12px!important;}
  .of-fat-card-thumb{height:108px!important;border-radius:14px!important;margin-bottom:12px!important;}
  .of-vehicle-avatar.has-image{width:44px!important;height:44px!important;}
}

/* v0.5.6.6.119: keep vehicle images compact on mobile. */
@media (max-width:782px){
  .of-staff-fleet-thumb{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important;border-radius:11px!important;font-size:20px!important;}
  .of-fat-card-thumb{width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important;border-radius:12px!important;font-size:21px!important;}
  .of-fat-card-top{align-items:center!important;flex-direction:row!important;}
}


/* v0.5.6.6.119: override earlier mobile image placeholder rules. */
@media (max-width: 782px){
  .of-staff-fleet-thumb{width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important;margin:0!important;border-radius:11px!important;font-size:20px!important;}
  .of-fat-card-thumb{width:48px!important;height:48px!important;min-width:48px!important;flex:0 0 48px!important;margin:0!important;border-radius:12px!important;font-size:21px!important;}
  .of-fat-card-top{align-items:center!important;flex-direction:row!important;gap:10px!important;}
}

/* v0.5.6.6.123: mobile dashboard density + iPhone drawer safe-area fixes. */
@media (max-width: 782px){
  /* Staff dashboard KPI/summary cards: keep two per row on phone instead of one huge card. */
  .of-kpis,
  .of-ops-kpis,
  .of-fuel-kpis,
  .of-petty-kpis,
  .of-todo-stats,
  .of-vehicles-stats,
  .of-veh-stats-grid,
  .of-fleet-kpi-grid,
  .of-fat-command-kpis,
  .of-fr-kpis,
  .of-fm-kpis,
  .of-ledger-staff-cards{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .of-kpi,
  .of-op-card,
  .of-fuel-kpi,
  .of-petty-kpi,
  .of-todo-stat,
  .of-veh-stat-card,
  .of-fleet-kpi,
  .of-ledger-staff-card{
    min-height:118px!important;
    padding:13px!important;
  }
  .of-kpi-label{font-size:12px!important;line-height:1.25!important;overflow-wrap:anywhere!important;}
  .of-kpi-value{font-size:26px!important;line-height:1.05!important;}
  .of-kpi-sub{font-size:11.5px!important;line-height:1.3!important;overflow-wrap:anywhere!important;}

  /* Quick action tiles: two per row in normal portrait mobile. */
  .of-create-grid,
  .of-quick-grid,
  .of-support-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .of-create-tile,
  .of-quick,
  .of-support-tile{
    min-height:76px!important;
    height:auto!important;
    padding:10px 8px!important;
  }
  .of-create-label{font-size:11.5px!important;line-height:1.25!important;}

  /* iPhone/Safari form drawer protection: do not let header/browser bars hide top or bottom controls. */
  .of-fleet-modal,
  .of-fleet-action-modal,
  .of-fleet-return-modal,
  .of-fleet-detail-modal,
  .of-fleet-detail-drawer,
  .of-fr-drawer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:calc(62px + env(safe-area-inset-top,0px))!important;
    bottom:env(safe-area-inset-bottom,0px)!important;
    width:100vw!important;
    height:auto!important;
    max-height:none!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:10180!important;
  }
  .of-fleet-modal-card,
  .of-fleet-action-card,
  .of-fleet-return-card,
  .of-fleet-drawer-card,
  .of-fr-drawer .of-modal-card{
    width:100vw!important;
    max-width:100vw!important;
    height:100%!important;
    max-height:100%!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .of-fleet-modal-card .of-modal-body,
  .of-fleet-action-card .of-modal-body,
  .of-fleet-return-card .of-modal-body,
  .of-fleet-drawer-body,
  .of-fr-drawer .of-modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;
  }
  .of-modal-foot,
  .of-fleet-drawer-actions{
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Landscape phones: quick action block should be a compact 3-column grid, not long skinny columns. */
@media (max-width: 980px) and (orientation: landscape){
  .of-dashboard-grid{grid-template-columns:1fr!important;gap:12px!important;}
  .of-create-grid,
  .of-quick-grid,
  .of-support-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .of-create-tile,
  .of-quick,
  .of-support-tile{
    min-height:74px!important;
    height:auto!important;
    padding:9px 8px!important;
  }
}

/* v0.5.6.6.124 mobile fixed topbar reset
   Keep the topbar pinned on iPhone/Android while the page content scrolls underneath. */
@media (max-width: 782px){
  body.of-body{
    padding-top:0!important;
  }
  .of-main{
    padding-top:calc(62px + env(safe-area-inset-top, 0px))!important;
  }
  .of-topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-height:62px!important;
    height:calc(62px + env(safe-area-inset-top, 0px))!important;
    padding-top:calc(10px + env(safe-area-inset-top, 0px))!important;
    z-index:10060!important;
    transform:none!important;
    will-change:auto!important;
    backface-visibility:hidden!important;
    -webkit-transform:translateZ(0)!important;
  }
  .of-content{
    min-height:calc(100dvh - 62px - env(safe-area-inset-top, 0px))!important;
  }
  .of-notif-panel{
    top:calc(68px + env(safe-area-inset-top, 0px))!important;
  }
  .of-app:not(.of-is-collapsed)::before,
  .of-sidebar{
    z-index:10080!important;
  }
}

/* v0.5.6.6.125: real mobile viewport + fixed topbar + drawer/footer hard stop.
   Previous builds changed the CSS but the plugin version/cache stayed at .121, so browsers/PWA could keep the old mobile.css.
   This block is intentionally loaded at the absolute end and uses app-specific selectors. */
@media (max-width: 782px){
  :root{
    --of-mobile-topbar-h: 70px;
    --of-mobile-safe-top: env(safe-area-inset-top, 0px);
    --of-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --of-real-vh: 100dvh;
  }

  html,
  body.of-body{
    width:100%!important;
    max-width:100%!important;
    min-height:var(--of-real-vh)!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:none!important;
  }

  body.of-body .of-app,
  body.of-body .of-main{
    width:100%!important;
    min-height:var(--of-real-vh)!important;
    overflow:visible!important;
    transform:none!important;
    perspective:none!important;
    contain:none!important;
  }

  body.of-body .of-topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:calc(var(--of-mobile-topbar-h) + var(--of-mobile-safe-top))!important;
    min-height:calc(var(--of-mobile-topbar-h) + var(--of-mobile-safe-top))!important;
    padding-top:calc(10px + var(--of-mobile-safe-top))!important;
    padding-bottom:8px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    z-index:12000!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid rgba(17,24,39,.10)!important;
    box-shadow:0 6px 20px rgba(15,23,42,.06)!important;
    transform:none!important;
    -webkit-transform:translate3d(0,0,0)!important;
  }

  body.of-body .of-main{
    padding-top:calc(var(--of-mobile-topbar-h) + var(--of-mobile-safe-top))!important;
  }

  body.of-body .of-content{
    padding-top:14px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    padding-bottom:calc(24px + var(--of-mobile-safe-bottom))!important;
    overflow:visible!important;
  }

  /* Staff dashboard cards: force the requested two-column mobile layout. */
  body.of-body .of-kpis,
  body.of-body .of-ops-kpis,
  body.of-body .of-fuel-kpis,
  body.of-body .of-petty-kpis,
  body.of-body .of-todo-stats,
  body.of-body .of-vehicles-stats,
  body.of-body .of-veh-stats-grid,
  body.of-body .of-fleet-kpi-grid,
  body.of-body .of-fat-command-kpis,
  body.of-body .of-fr-kpis,
  body.of-body .of-fm-kpis,
  body.of-body .of-ledger-staff-cards{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.of-body .of-kpi,
  body.of-body .of-op-card,
  body.of-body .of-fleet-kpi,
  body.of-body .of-card.of-kpi{
    min-width:0!important;
    min-height:112px!important;
    height:auto!important;
    padding:12px!important;
    border-radius:16px!important;
  }

  body.of-body .of-kpi-label,
  body.of-body .of-kpi-sub{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  body.of-body .of-kpi-value{
    font-size:25px!important;
    line-height:1.05!important;
  }

  /* Quick Actions: portrait = 2 columns, landscape = overridden to 3 columns below. */
  body.of-body .of-create-grid,
  body.of-body .of-quick-grid,
  body.of-body .of-support-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.of-body .of-create-tile,
  body.of-body .of-quick,
  body.of-body .of-support-tile{
    min-width:0!important;
    min-height:76px!important;
    height:auto!important;
    padding:10px 8px!important;
    border-radius:15px!important;
    text-align:center!important;
  }

  /* All app modals/drawers on mobile must live below the fixed topbar and above the browser footer. */
  body.of-body .of-modal,
  body.of-body .of-exp-action-modal,
  body.of-body .of-exp-pay-modal,
  body.of-body .of-exp-receipt-modal,
  body.of-body .of-exp-close-modal,
  body.of-body .of-exp-create-modal,
  body.of-body .of-exp-settings-modal,
  body.of-body .of-petty-modal,
  body.of-body .of-fleet-modal,
  body.of-body .of-fleet-action-modal,
  body.of-body .of-fleet-return-modal,
  body.of-body .of-fleet-detail-modal,
  body.of-body .of-fleet-detail-drawer,
  body.of-body .of-fr-drawer,
  body.of-body .of-dept-modal,
  body.of-body .of-fm-modal,
  body.of-body .of-inbox-modal,
  body.of-body .of-supplies-request-modal,
  body.of-body .of-supplies-receive-modal,
  body.of-body .of-supplies-stock-modal{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:calc(var(--of-mobile-topbar-h) + var(--of-mobile-safe-top))!important;
    bottom:0!important;
    width:100vw!important;
    height:calc(var(--of-real-vh) - var(--of-mobile-topbar-h) - var(--of-mobile-safe-top))!important;
    max-height:calc(var(--of-real-vh) - var(--of-mobile-topbar-h) - var(--of-mobile-safe-top))!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    z-index:13000!important;
    transform:none!important;
  }

  body.of-body .of-modal-card,
  body.of-body .of-modal-dialog,
  body.of-body .of-exp-action-card,
  body.of-body .of-exp-create-modal .of-modal-card,
  body.of-body .of-petty-modal .of-modal-dialog,
  body.of-body .of-fleet-modal-card,
  body.of-body .of-fleet-action-card,
  body.of-body .of-fleet-return-card,
  body.of-body .of-fleet-drawer-card,
  body.of-body .of-fr-drawer .of-modal-card,
  body.of-body .of-dept-modal .of-modal-card,
  body.of-body .of-fm-modal .of-modal-card,
  body.of-body .of-inbox-modal .of-modal-card,
  body.of-body .of-supplies-request-modal .of-modal-card,
  body.of-body .of-supplies-receive-modal .of-modal-card,
  body.of-body .of-supplies-stock-modal .of-modal-card{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.of-body .of-modal-head,
  body.of-body .of-fleet-drawer-head{
    flex:0 0 auto!important;
    min-height:auto!important;
    padding:12px 12px 10px!important;
    gap:8px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(15,23,42,.10)!important;
  }

  body.of-body .of-modal-body,
  body.of-body .of-fleet-drawer-body{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding:12px 12px calc(96px + var(--of-mobile-safe-bottom))!important;
    box-sizing:border-box!important;
  }

  body.of-body .of-modal-foot,
  body.of-body .of-fleet-drawer-actions{
    flex:0 0 auto!important;
    position:sticky!important;
    bottom:0!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column-reverse!important;
    gap:8px!important;
    padding:10px 12px calc(14px + var(--of-mobile-safe-bottom))!important;
    background:#fff!important;
    border-top:1px solid rgba(15,23,42,.10)!important;
    box-shadow:0 -8px 20px rgba(15,23,42,.05)!important;
  }

  body.of-body .of-modal-foot .of-btn,
  body.of-body .of-modal-head .of-btn,
  body.of-body .of-fleet-drawer-actions .of-btn,
  body.of-body .of-fleet-drawer-head .of-btn{
    width:100%!important;
    min-height:42px!important;
    justify-content:center!important;
  }
}

@media (max-width: 980px) and (orientation: landscape){
  body.of-body .of-create-grid,
  body.of-body .of-quick-grid,
  body.of-body .of-support-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body.of-body .of-create-tile,
  body.of-body .of-quick,
  body.of-body .of-support-tile{
    min-height:70px!important;
    padding:8px 6px!important;
  }
}

/* v0.5.6.6.127 fuel gauge helper */
.of-fleet-gauge-hint{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(251,146,60,.24);
  border-radius:14px;
  background:rgba(255,247,237,.72);
  color:#374151;
}
.of-fleet-gauge-hint strong{display:block;font-size:12px;line-height:1.2;color:#111827;}
.of-fleet-gauge-hint small{display:block;font-size:11px;line-height:1.25;color:#6b7280;margin-top:2px;}
.of-fleet-gauge-hint img{width:56px;height:42px;object-fit:cover;border-radius:10px;border:1px solid rgba(17,24,39,.08);margin-left:auto;}
.of-gauge-reference img,.of-current-vehicle-image img{object-fit:cover;}
@media (max-width: 640px){
  .of-fleet-gauge-hint{align-items:flex-start;}
  .of-fleet-gauge-hint img{width:72px;height:52px;}
}