/* JST HPEC system-wide responsive foundation.  Brand colors/layout stay page-owned. */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden}body{min-width:0;overflow-x:hidden}
img,svg,canvas,video{max-width:100%;height:auto}
iframe{max-width:100%;border:0}
input,select,textarea,button{max-width:100%}
.system-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.system-table-scroll>table{min-width:max-content}
.table-responsive,.dataTables_wrapper{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dataTables_wrapper .row{margin-left:0;margin-right:0;max-width:100%}
.dataTables_wrapper .dataTables_scroll{max-width:100%}
.dataTables_empty{text-align:center!important;white-space:normal!important}
.system-datatable-filler{color:transparent!important;pointer-events:none}
.modal-dialog{margin:1rem auto}.modal-body{overflow-wrap:anywhere}

@media (max-width:991.98px){
  .container,.container-fluid,.main,main{max-width:100%}
  .row{--bs-gutter-x:1rem}
  .card,.modal-content{max-width:100%}
  .btn,.btn-sm,button,[role="button"]{min-height:40px}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{min-height:40px}
  .modal-dialog{width:auto;max-width:calc(100% - 1.5rem);margin:.75rem auto}
}

@media (max-width:768px){
  body{font-size:16px}
  /* The shared desktop shell is a flex layout.  Explicitly release its
     min-content width so dashboard cards or tables cannot push the phone
     viewport wider than the device. */
  .wrapper{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important}
  .right-content,#rightContent{flex:0 1 100%!important;width:100%!important;max-width:100%!important;min-width:0!important}
  .sidebar{width:250px!important;left:-250px!important;padding:15px!important;box-shadow:2px 0 14px rgba(0,0,0,.2)!important;z-index:1050!important}
  .sidebar.show{left:0!important}
  .sidebar .menu-item{justify-content:flex-start!important;min-height:44px}
  .sidebar .menu-item span{display:inline!important}
  #toggleSidebar,[data-sidebar-toggle],.system-responsive-toggle{display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;touch-action:manipulation}
  .system-responsive-toggle{position:fixed;top:10px;left:12px;z-index:1040;border:0;border-radius:6px;background:#fff;color:#075c33;font-size:24px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.18)}
  .topbar{left:0!important;padding-left:12px!important;padding-right:12px!important}
  .main,main{margin-left:0!important;width:100%!important;max-width:100%!important;min-width:0!important;flex:0 1 auto!important;padding-left:12px!important;padding-right:12px!important}
  .main>.row,.main>.row>*{min-width:0!important;max-width:100%}
  .header-green,.page-header{padding:16px!important}
  .header-green .d-flex,.page-header .d-flex,.search-actions,.filter-actions{flex-wrap:wrap!important;gap:8px}
  .header-green .btn,.page-header .btn,.search-actions .btn,.filter-actions .btn{flex:1 1 150px}
  .form-row,.filter-row,.search-row{gap:12px!important}
  .form-row>*,.filter-row>*,.search-row>*{min-width:min(100%,240px)!important}
  .pagination{flex-wrap:wrap;gap:4px}
  .dataTables_length,.dataTables_filter,.dataTables_info,.dataTables_paginate{float:none!important;text-align:left!important;margin:8px 0!important}
  .dataTables_filter input{width:100%!important;max-width:100%!important}
  .table th,.table td{white-space:nowrap}
  .modal-dialog{max-width:calc(100% - 1rem);margin:.5rem auto}
  .modal-header,.modal-body,.modal-footer{padding:14px}
  .topbar-content{gap:8px;min-width:0}
  .topbar-actions,.topbar-welcome{min-width:0}
  .topbar-welcome .welcome-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .fleet-location-map-frame,.fleet-location-map-modal-frame{max-width:100%;overflow:hidden}
  .fleet-location-map-frame iframe{width:100%!important;min-height:188px}
  .fleet-location-map-modal{padding:8px!important}
  .fleet-location-map-dialog{width:100%!important;max-width:100%!important;max-height:calc(100vh - 16px)!important}
  .fleet-location-map-modal-frame iframe{width:100%!important;height:min(56vh,420px)!important}
  /* Dashboard phone composition: compact identity header and two contained
     metric cards per row.  Data and links remain the existing live controls. */
  .topbar{min-height:104px!important;background:linear-gradient(135deg,#a8e3b6 0%,#91d9ad 100%)!important;padding:14px 12px!important}
  .topbar-content{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(132px,154px)!important;align-items:center!important;gap:10px!important}
  .topbar-content>.d-flex{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;min-width:0}
  #toggleSidebar{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;margin:0!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.25)!important;color:#fff!important;font-size:1.75rem!important;box-shadow:none!important}
  .topbar-welcome{min-width:0!important;gap:8px}
  .topbar-welcome .admin-icon{width:48px!important;height:48px!important;min-width:48px!important;margin:0!important;font-size:1.4rem;background:#0b9b63!important;box-shadow:0 5px 12px rgba(5,92,51,.18)}
  .welcome-text{min-width:0}
  .topbar-welcome .welcome-hello{color:#356c55!important;font-size:.78rem!important;line-height:1.1}
  .topbar-welcome .welcome-name{font-size:1.02rem;line-height:1.15;overflow-wrap:anywhere}
  .fleet-location-host{min-width:0}
  .fleet-location-toggle{width:100%!important;min-height:64px!important;padding:9px 10px!important;border-radius:13px!important;background:#fff!important;box-shadow:0 5px 16px rgba(5,92,51,.1)!important}
  .fleet-location-toggle>span{min-width:0;text-align:left}
  .fleet-location-toggle strong{font-size:.9rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fleet-location-toggle small{font-size:.7rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-actions{display:none!important}
  .dashboard-header{margin:14px 0 16px!important;padding:22px 18px!important;border-radius:20px!important;border-left:5px solid #087940!important;background:#fff!important;box-shadow:0 8px 22px rgba(17,51,36,.08)!important}
  .dashboard-header h1{margin:0 0 8px!important;font-size:clamp(1.5rem,7vw,2rem)!important;line-height:1.1!important;color:#075c33!important}
  .dashboard-header h1 i{margin-right:.35rem!important}
  .dashboard-header p{margin:0!important;font-size:1rem!important;line-height:1.42!important;color:#5f6c78!important}
  /* Admin dashboard statistics: two contained cards per row on phones. */
  .main>.row.g-3.mb-4{margin-left:0!important;margin-right:0!important;--bs-gutter-x:.75rem;row-gap:.75rem}
  .main>.row.g-3.mb-4>[class*="col-"]{width:50%!important;max-width:50%!important;padding-left:calc(var(--bs-gutter-x)/2)!important;padding-right:calc(var(--bs-gutter-x)/2)!important}
  .main>.row.g-3.mb-4 .small-card{width:100%!important;min-width:0!important;min-height:146px!important;height:100%!important;border-radius:18px!important;box-shadow:0 7px 18px rgba(17,51,36,.09)!important}
  .main>.row.g-3.mb-4 .small-card-content{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;padding:15px 12px!important}
  .main>.row.g-3.mb-4 .small-card-icon{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;font-size:1.5rem!important}
  .main>.row.g-3.mb-4 .small-card-info{min-width:0!important}
  .main>.row.g-3.mb-4 .small-card-title{font-size:.69rem!important;line-height:1.15!important;overflow-wrap:anywhere}
  .main>.row.g-3.mb-4 .small-card-count{font-size:1.72rem!important;line-height:1.05!important}
  .main>.row.g-3.mb-4 .small-card-subtext{margin:.28rem 0!important;font-size:.72rem!important;line-height:1.2!important;overflow-wrap:anywhere}
  .main>.row.g-3.mb-4 .small-card-trend{font-size:.76rem!important;white-space:normal!important}
  .mobile-dashboard-location{display:block!important;margin:0 0 16px!important;padding:17px!important;border-radius:20px!important;background:#fff!important;box-shadow:0 7px 18px rgba(17,51,36,.08)!important}
  .mobile-dashboard-location>h2{display:flex;align-items:center;gap:10px;margin:0 0 14px!important;color:#075c33!important;font-size:1.25rem!important;font-weight:700!important}
  .mobile-dashboard-location>h2 i{font-size:1.45rem}
  .mobile-dashboard-location-content{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(112px,.85fr);align-items:stretch;gap:12px}
  .mobile-dashboard-location-facts{min-width:0}
  .mobile-dashboard-location-facts h3{margin:0 0 7px!important;color:#17344e!important;font-size:1.05rem!important}
  .mobile-dashboard-location-facts p{margin:0 0 4px!important;color:#75879b!important;font-size:.8rem!important;line-height:1.35!important;overflow-wrap:anywhere}
  .mobile-dashboard-location .fleet-location-map-frame,.mobile-dashboard-location .fleet-location-placeholder{min-height:116px!important;margin:0!important;border-radius:14px!important;overflow:hidden}
  .mobile-dashboard-location .fleet-location-map-frame iframe{display:block;width:100%!important;height:116px!important;min-height:116px!important}
  .mobile-dashboard-location .fleet-location-placeholder{display:flex;align-items:center;padding:10px!important;font-size:.74rem!important;line-height:1.35!important;color:#687785!important;background:#f2f8f4!important}
  .ai-fleet-insights{margin-bottom:16px!important}
  .ai-fleet-insights .card-header{padding:17px 17px 0!important;align-items:center!important}
  .ai-fleet-insights .card-header h5{font-size:1.2rem!important;color:#075c33!important}
  .ai-fleet-insights .card-header .btn{flex:0 0 auto!important;min-height:36px!important;font-size:.72rem!important}
  .ai-fleet-insights .card-body{padding:14px 17px 17px!important}
}

@media (max-width:359px){
  .topbar-content{grid-template-columns:minmax(0,1fr) 124px!important;gap:7px!important}
  .topbar-content>.d-flex{grid-template-columns:46px minmax(0,1fr)!important;gap:7px!important}
  #toggleSidebar{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;font-size:1.45rem!important}
  .topbar-welcome .admin-icon{display:none!important}
  .topbar-welcome .welcome-name{font-size:.94rem!important}
  .fleet-location-toggle{min-height:58px!important;padding:8px!important}
  .fleet-location-toggle strong{font-size:.8rem!important}
  .fleet-location-toggle small{font-size:.64rem!important}
  .main>.row.g-3.mb-4{--bs-gutter-x:.5rem}
  .main>.row.g-3.mb-4 .small-card{min-height:144px!important}
  .main>.row.g-3.mb-4 .small-card-content{grid-template-columns:42px minmax(0,1fr)!important;gap:6px!important;padding:13px 8px!important}
  .main>.row.g-3.mb-4 .small-card-icon{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;font-size:1.3rem!important}
  .main>.row.g-3.mb-4 .small-card-title{font-size:.62rem!important}
  .main>.row.g-3.mb-4 .small-card-count{font-size:1.55rem!important}
  .main>.row.g-3.mb-4 .small-card-subtext,.main>.row.g-3.mb-4 .small-card-trend{font-size:.67rem!important}
  .mobile-dashboard-location{padding:14px!important}
  .mobile-dashboard-location-content{grid-template-columns:minmax(0,1fr) 104px;gap:8px}
}