/* Shared responsive behavior for the approved ERP master design. */
html,body{max-width:100%}
/* Reusable layouts for future ERP forms and reports. */
.erp-form-grid,.erp-voucher-grid,.erp-search-grid,.erp-report-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.erp-voucher-layout,.erp-statement-layout,.erp-drilldown-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:10px}
.erp-report-toolbar,.erp-statement-toolbar,.erp-upload-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.erp-report-toolbar .erp-search,.erp-statement-toolbar .erp-search{flex:1 1 280px;min-width:180px}
.erp-attachment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.erp-report-table,.erp-statement-table,.erp-drilldown-table{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.erp-report-table table,.erp-statement-table table,.erp-drilldown-table table{min-width:850px}
@media(max-width:900px){.erp-voucher-layout,.erp-statement-layout,.erp-drilldown-layout{grid-template-columns:1fr}.erp-attachment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.erp-form-grid,.erp-voucher-grid,.erp-search-grid,.erp-report-filters,.erp-attachment-grid{grid-template-columns:1fr}.erp-report-toolbar>button,.erp-statement-toolbar>button,.erp-upload-toolbar>button{flex:1 1 auto}.erp-report-toolbar .erp-search,.erp-statement-toolbar .erp-search{flex-basis:100%}}
@media(max-width:1100px){.app-shell{display:block!important;min-width:0!important}.app-shell>.main,main,.main{grid-column:auto!important;margin-left:0!important;width:100%!important;min-width:0!important}.sidebar{display:flex!important;position:fixed!important;inset:0 auto 0 0!important;width:213px!important;max-width:82vw!important;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 32px rgba(0,22,49,.28);z-index:100!important}.sidebar.open{transform:translateX(0)}.mobile-menu,.shared-menu-toggle{display:inline-flex!important;flex:0 0 36px;width:36px;height:36px;padding:0!important;font-size:20px!important;background:#fff!important;color:var(--erp-nav,#062e60)!important;border:1px solid var(--erp-border,#c9ddf3)!important}}
@media(max-width:900px){
html,body{overflow-x:hidden}body{min-width:0!important}.app-shell{display:block!important;min-width:0!important}.app-shell>.main,main,.main{grid-column:auto!important;margin-left:0!important;width:100%!important;min-width:0!important}
.sidebar{display:flex!important;position:fixed!important;inset:0 auto 0 0!important;width:213px!important;max-width:82vw!important;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 32px rgba(0,22,49,.28);z-index:100!important}.sidebar.open{transform:translateX(0)}.sidebar>.brand,.sidebar .dubai-mark{width:213px!important;max-width:100%!important}
.mobile-menu,.shared-menu-toggle{display:inline-flex!important;flex:0 0 36px;width:36px;height:36px;padding:0!important;font-size:20px!important;background:#fff!important;color:var(--erp-nav,#062e60)!important;border:1px solid var(--erp-border,#c9ddf3)!important}
  main,.main{--erp-topbar-height:52px}.topbar{height:var(--erp-topbar-height)!important;min-height:var(--erp-topbar-height)!important;padding:7px 10px!important;gap:8px!important;background:linear-gradient(100deg,color-mix(in srgb,var(--erp-accent,#087aff) 16%,white),color-mix(in srgb,var(--erp-accent,#087aff) 4%,white))!important;background-image:none!important}.erp-page-scroll,.dashboard-page{height:calc(100vh - var(--erp-topbar-height))!important}.topbar>*{opacity:1!important}.search{width:auto!important;max-width:none!important;min-width:0!important;flex:1!important;height:36px!important}.search input{min-width:0!important;text-overflow:ellipsis}.search kbd{display:none!important}.top-actions{flex:0 0 auto!important;margin-left:0!important;gap:7px!important}.top-actions>b,.top-actions>svg,.top-actions>span:not(.avatar):not(.language),.top-actions .notice-icon,.top-actions .profile,.top-actions .user,.top-actions i{display:none!important}.top-actions .language{display:inline!important}.top-actions .avatar{display:inline-flex!important}
.content,.dashboard-content{min-width:0!important;padding-left:10px!important;padding-right:10px!important}.hero,.job-hero{height:auto!important;min-height:142px!important;background-size:cover!important;background-position:center!important}.hero-content{max-width:100%!important}.hero-right{width:100%!important;min-width:0!important;margin-left:0!important;padding:0 12px 9px!important;background:transparent!important}.hero-right>p,.hero-note{display:none!important}.hero-buttons,.hero-actions{position:static!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;background:transparent!important;padding:0!important}
.kpis,.metrics,.dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.overview,.job-grid,.details-layout,.lower-grid,.appearance-layout,.daily-insight-row{grid-template-columns:1fr!important}.overview-rail{grid-template-columns:1fr!important}.detail-rail,.summary-stack{grid-template-columns:repeat(3,minmax(0,1fr))!important}.right-stack{grid-template-rows:auto!important}.information,.details,.panel,.card{max-width:100%;min-width:0}#jobForm,.form-columns{grid-template-columns:1fr 1fr!important;gap:12px!important}
.tabs,.subtabs,.preview-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.tabs button,.subtabs button,.preview-tabs button{flex:0 0 auto}.table-wrap,.table-scroll{max-width:100%;overflow:auto!important;-webkit-overflow-scrolling:touch}.table-wrap table,.table-scroll table{min-width:850px!important}.appearance-content,.settings-panel{min-height:0!important}.settings-panel form{gap:12px!important;padding:16px!important}.overview-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dash-panels-top,.dash-panels-bottom{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dash-panels>.card,.dash-panels-top>.card,.dash-panels-bottom>.card{display:block!important;height:238px!important}.dash-footer{flex-wrap:wrap;gap:8px;height:auto!important;min-height:48px;padding:10px!important}.compare-button{display:none!important}
}
@media(max-width:600px){
.topbar>.mobile-menu,.topbar>.shared-menu-toggle{align-self:center!important;margin:0!important}.sidebar{left:0!important;right:auto!important}
.top-actions .language{display:none!important}.top-actions .avatar{width:30px!important;height:30px!important}.hero,.job-hero{min-height:0!important}.hero-content{padding:10px!important}.hero h1,.job-title h1{font-size:20px!important}.hero h2,.job-title h2{font-size:13px!important}.hero p,.job-title p{font-size:9px!important;line-height:1.45}.title-row,.job-title,.title-line{gap:8px!important}.job-icon{width:44px!important;height:46px!important;flex:0 0 44px}.hero-right,.hero-actions{padding:0 10px 9px!important}.hero-buttons,.hero-actions{width:100%!important;justify-content:flex-start!important;gap:6px!important}.hero-buttons button,.hero-actions button{height:32px!important;min-width:0!important;padding:5px 8px!important;font-size:10px!important}.content,.dashboard-content{padding:8px!important}
.kpis,.metrics,.dash-metrics{gap:7px!important}.kpi,.metric,.dash-metrics .metric{height:auto!important;min-height:88px!important;padding:9px!important;gap:8px!important}.kpi-icon,.metric-icon,.dash-metrics .metric-icon{width:40px!important;height:40px!important;flex:0 0 40px!important;font-size:20px!important}.kpi strong,.metric strong,.dash-metrics .metric strong{font-size:14px!important;white-space:normal!important}.kpi small,.kpi em,.metric small,.metric em{font-size:9px!important}#jobForm,.form-columns,.settings-panel form{grid-template-columns:1fr!important}.field-column>label,.field-column:nth-child(2)>label,.form-col label,.settings-panel label{grid-template-columns:108px minmax(0,1fr)!important}.overview-rail,.detail-rail,.summary-stack{grid-template-columns:1fr!important}.route-map{padding-left:10px!important;padding-right:10px!important}.route-line,.route-path{transform:scale(.8)}.route-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}.route-stats>div{padding:8px 6px!important}.quick-grid,.quick>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}.overview-tabs{grid-template-columns:1fr!important}.overview-tabs button{height:52px!important;padding:7px 12px!important}.dash-panels-top,.dash-panels-bottom{grid-template-columns:1fr!important}.dash-panels>.card,.dash-panels-top>.card,.dash-panels-bottom>.card{height:238px!important}.standard-note{margin:8px 0 16px!important;padding:12px!important}.preview-card{padding:12px!important}.preview-card>label{grid-template-columns:98px minmax(0,1fr)!important}.erp-action-row{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:10px!important}
}
@media(max-width:380px){.kpis,.metrics,.dash-metrics{grid-template-columns:1fr!important}.field-column>label,.field-column:nth-child(2)>label,.form-col label,.settings-panel label,.preview-card>label{grid-template-columns:1fr!important;gap:4px!important}.preview-card input,.preview-card select{grid-column:1!important}.search{padding-left:8px!important;padding-right:8px!important}}
@media(min-width:901px) and (max-width:1250px){.dashboard-content{min-width:0!important}.dash-panels-top{grid-template-columns:1.25fr 1fr .9fr!important}.dash-panels-bottom{grid-template-columns:1.1fr 1fr .9fr!important}}
@media(min-width:901px) and (max-width:1100px){.dashboard-content>*{min-width:0;max-width:100%}.kpis,.metrics,.dash-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}.overview-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}.overview-tabs button,.dash-metrics .metric{min-width:0!important}.dash-panels-top,.dash-panels-bottom{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Keep shared forms inside narrow phone viewports. */
@media(max-width:600px){.information,#jobForm,.field-column,.field-column>label,.form-col,.form-col>label{min-width:0!important;max-width:100%!important}.field-column input,.field-column select,.field-column textarea,.form-col input,.form-col select,.form-col textarea{width:100%!important;min-width:0!important;max-width:100%!important}.hero p,.job-title p{white-space:normal!important;overflow-wrap:anywhere}}
@media(max-width:1100px){.ff-report-workspace .ff-report-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.ff-report-workspace .ff-footer{grid-template-columns:minmax(0,1fr) auto}.ff-report-workspace .ff-record{grid-column:1/-1}}
@media(max-width:600px){.ff-report-workspace .ff-report-filters{grid-template-columns:minmax(0,1fr)}.ff-report-workspace .ff-footer{grid-template-columns:minmax(0,1fr)}.ff-report-workspace .ff-actions{display:flex}.ff-report-workspace .ff-actions .ff-field{max-width:100%;flex:1}.ff-report-workspace .ff-result{min-height:260px}.ff-report-workspace .ff-shell{max-width:100%}}

/* Touch tablets use the same overlay navigation as phones. Keep the top header
   visible above the drawer so opening the menu never covers or offsets it. */
@media(max-width:1280px),(any-pointer:coarse) and (max-width:1535px){
  .app-shell{display:block!important;min-width:0!important}
  .app-shell>.main,main,.main{grid-column:auto!important;margin-left:0!important;width:100%!important;min-width:0!important}
  .topbar{position:relative!important;z-index:130!important}
  .sidebar{display:flex!important;position:fixed!important;inset:52px auto 0 0!important;height:calc(100dvh - 52px)!important;width:213px!important;max-width:82vw!important;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 32px rgba(0,22,49,.28);z-index:120!important}
  .sidebar.open{transform:translateX(0)}
  .mobile-menu,.shared-menu-toggle{display:inline-flex!important;flex:0 0 36px;width:36px;height:36px;padding:0!important;font-size:20px!important;background:#fff!important;color:var(--erp-nav,#062e60)!important;border:1px solid var(--erp-border,#c9ddf3)!important}
}