/* OpsControl full interface audit layer — 2026-09-21
   Loaded last. Owns desktop page geometry and the shared typography scale. */
:root{
  --oc-audit-sidebar:224px;
  --oc-audit-body:14px;
  --oc-audit-small:12px;
  --oc-audit-label:13px;
}

html,body,#app{max-width:100%;overflow-x:hidden}
body{font-size:var(--oc-audit-body)!important}
#app,.shell,.main,.screen{box-sizing:border-box!important}

@media(min-width:821px){
  #app{width:100%!important;max-width:100vw!important}
  #app>.topbar{
    margin-left:var(--oc-audit-sidebar)!important;
    width:calc(100% - var(--oc-audit-sidebar))!important;
    max-width:calc(100vw - var(--oc-audit-sidebar))!important;
    box-sizing:border-box!important;
  }
  #app>.shell{
    display:block!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    padding-left:var(--oc-audit-sidebar)!important;
    box-sizing:border-box!important;
  }
  #app #sidebar{
    position:fixed!important;
    left:0!important;top:0!important;bottom:0!important;
    width:var(--oc-audit-sidebar)!important;
    height:100vh!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    z-index:80!important;
  }
  #app .main{
    margin:0!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding:18px 20px 38px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  #app .main>.screen{
    margin:0!important;
    left:auto!important;right:auto!important;inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  #app .main>.screen.active{display:block!important}
  #app .main>.screen>*{max-width:100%;box-sizing:border-box}
}

/* Sidebar: readable and proportional to the workspace. */
.oc-ref-sidebrand{padding:18px 14px 12px!important;flex:0 0 auto}
.oc-ref-wordmark{font-size:20px!important}
.oc-ref-tagline{font-size:7.5px!important;line-height:1.2!important}
.oc-ref-tenant{margin:8px 10px 14px!important;padding:10px!important;flex:0 0 auto}
.oc-ref-tenant-logo{width:40px!important;height:40px!important;font-size:11px!important}
.oc-ref-tenant-copy small{font-size:9px!important;line-height:1.25!important}
.oc-ref-tenant-copy b{font-size:13px!important;line-height:1.3!important}
.oc-ref-tenant-copy span{font-size:10.5px!important;line-height:1.35!important}
.oc-ref-nav{
  flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  padding:0 9px 12px!important;
}
.oc-ref-group{margin:7px 0 12px!important}
.oc-ref-group-title{padding:6px 9px 5px!important;font-size:10px!important;line-height:1.2!important}
.sidebar .oc-ref-nav button,
.oc-ref-client-nav button{
  min-height:42px!important;padding:9px 10px!important;
  font-size:13.5px!important;line-height:1.25!important;
  gap:9px!important;
}
.oc-ref-nav-icon{width:20px!important;height:20px!important;font-size:13px!important}
.oc-ref-footer{
  position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
  flex:0 0 auto!important;margin-top:auto!important;
  padding:11px 13px!important;font-size:11px!important;line-height:1.35!important;
}
.oc-ref-footer-row{gap:9px!important;padding:5px 2px!important}
.oc-ref-avatar{width:31px!important;height:31px!important;font-size:10px!important}

/* Shared workspace typography scale. */
.main{font-size:var(--oc-audit-body)!important;line-height:1.42!important}
.main h1{font-size:29px!important;line-height:1.15!important;margin-top:0}
.main h2{font-size:20px!important;line-height:1.22!important}
.main h3{font-size:16px!important;line-height:1.25!important}
.main p,.main .muted{font-size:13px!important;line-height:1.45!important}
.main .tiny{font-size:11.5px!important;line-height:1.4!important}
.main label{font-size:12.5px!important;line-height:1.3!important}
.main input,.main select,.main textarea{font-size:13px!important}
.main .btn,.main button{font-size:12.5px!important}
.main .status{font-size:11px!important;line-height:1.25!important}
.main .notice{font-size:12px!important;line-height:1.4!important}
.main table{font-size:12px!important}
.main table th{font-size:10.5px!important;line-height:1.3!important}
.main table td{font-size:12px!important;line-height:1.35!important}

/* Header / utility bar */
.oc-search input{font-size:12.5px!important}
.workspace-switch-label{font-size:9px!important}
.workspace-switch-name{font-size:12px!important}
.tenant-portal-name{font-size:10px!important}
.role-pill{font-size:11px!important}

/* Control Room */
#manager-dashboard.oc-ref-control-room .oc-ops-header h1{font-size:29px!important}
#manager-dashboard.oc-ref-control-room .oc-ops-header p{font-size:12px!important}
#manager-dashboard.oc-ref-control-room>.grid.grid-4 .stat{font-size:11px!important}
#manager-dashboard.oc-ref-control-room>.grid.grid-4 .stat b{font-size:23px!important}
.dashboard-open-hint{font-size:10px!important}
.oc-ref-panel-head b{font-size:13px!important}
.oc-ref-panel-head a,.oc-ref-panel-head button{font-size:10.5px!important}
.oc-ref-map-label{font-size:10px!important}
.oc-ref-activity-row{font-size:10.5px!important;grid-template-columns:46px 10px 1fr!important}
.oc-ref-activity-row b{font-size:11.5px!important}
.oc-ref-legend{font-size:10px!important}
.oc-ref-alertchip{font-size:10.5px!important}
.oc-ref-alertchip b{font-size:11.5px!important}

/* Workforce */
.oc-workforce-head h1{font-size:29px!important}
.oc-workforce-head p{font-size:12.5px!important}
.oc-workforce-tab{font-size:12px!important}
.oc-workforce-hint{font-size:11.5px!important}
.oc-common-title,.oc-actions-title{font-size:13px!important}
.oc-task-card b{font-size:12px!important}
.oc-task-card span{font-size:10.5px!important}
.oc-toolbar-top h2{font-size:15px!important}
.oc-filter-chip{font-size:10.5px!important}
.oc-officer-search input{font-size:11.5px!important}
.oc-workforce-table{font-size:11.5px!important}
.oc-workforce-table th{font-size:10px!important}
.oc-workforce-person b{font-size:11px!important}
.oc-workforce-person small{font-size:9.5px!important}
.oc-today-head b{font-size:13px!important}
.oc-today-head span{font-size:10px!important}
.oc-action-row{font-size:11px!important}

/* Administration / finance / imports / sites / access */
.oc-admin-search input{font-size:12px!important}
.oc-admin-tabs button{font-size:12px!important}
#manager-finance.oc-admin-phase5>.notice.warn,
#manager-imports.oc-admin-phase5>.notice,
#manager-access.oc-admin-phase5>.notice{font-size:12px!important}
.oc-finance-stat span{font-size:10.5px!important}
.oc-finance-stat b{font-size:21px!important}
.oc-import-progress{font-size:12px!important}
#manager-imports.oc-admin-phase5 .import-step{font-size:11.5px!important}

/* Page containment: no screen is allowed to slide under the fixed navigation. */
#manager-dashboard,#manager-rota,#manager-verification,#manager-timesheets,
#manager-patrols,#manager-incidents,#manager-employees,#manager-sites,
#manager-finance,#manager-imports,#manager-access,#client-portal{
  margin-left:0!important;left:auto!important;right:auto!important;
  transform:none!important;width:100%!important;max-width:100%!important;
  min-width:0!important;box-sizing:border-box!important;
}
#manager-imports>*,#manager-finance>*,#manager-access>*,#manager-sites>*,
#manager-timesheets>*,#manager-verification>*,#client-portal>*{
  max-width:100%!important;box-sizing:border-box!important;
}
#manager-imports>div:first-child,
#manager-finance>div:first-child,
#manager-access>div:first-child,
#manager-sites>div:first-child,
#manager-timesheets>div:first-child,
#manager-verification>div:first-child{
  margin-left:0!important;margin-right:0!important;transform:none!important;
}

/* Client Portal had legacy layout offsets. Give it a deterministic flow. */
#client-portal{padding:0!important;min-height:0!important}
#client-portal .client-portal-hero,
#client-portal .client-context-bar{display:none!important}
#client-portal .oc-ref-client-head{display:block!important;margin:0 0 10px!important;padding:0!important}
#client-portal .oc-ref-client-head h1{font-size:29px!important;margin:0 0 3px!important}
#client-portal .oc-ref-client-head p{font-size:13px!important;margin:0!important}
#client-portal .oc-client-tabs{
  position:static!important;top:auto!important;
  margin:0 0 10px!important;padding:4px 6px!important;
  width:100%!important;max-width:100%!important;
}
#client-portal .oc-client-tabs button{font-size:11.5px!important;min-height:38px!important}
#client-portal #clientPortalPreviewControls,
#client-portal #ocRefClientDashboard,
#client-portal>.card,
#client-portal #clientPortalSummary{
  margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important;
}
.oc-ref-client-kpi{font-size:10.5px!important}
.oc-ref-client-kpi b{font-size:21px!important}
.oc-ref-report b{font-size:11px!important}
.oc-ref-report small{font-size:9.5px!important}
.oc-ref-report button{font-size:10.5px!important}
.oc-ref-chart-month:after{font-size:10px!important}

/* Drawer overlays stay independent of the page column. */
#employeeFormCard.oc-workforce-drawer,
#manager-sites.oc-admin-phase5 #clientFormCard,
#manager-sites.oc-admin-phase5 #siteFormCard,
#manager-sites.oc-admin-phase5 #clientDetailCard,
#manager-sites.oc-admin-phase5 #siteDetailCard,
#manager-access.oc-admin-phase5 #accessDetailCard{
  box-sizing:border-box!important;
}

@media(max-width:1180px) and (min-width:821px){
  :root{--oc-audit-sidebar:208px}
  .sidebar .oc-ref-nav button,.oc-ref-client-nav button{font-size:12.5px!important}
}
@media(max-width:820px){
  #app>.shell{padding-left:0!important}
  #app .main{margin:0!important;width:100%!important}
  .sidebar .oc-ref-nav button,.oc-ref-client-nav button{font-size:13px!important}
}