/* OpsControl approved design propagation — after prototype gate approval
   Applies the signed-off Dashboard/Rota/Workforce design language to the remaining Workforce surfaces. */

:root{
  --oc-approved-navy:#061a35;
  --oc-approved-blue:#087cf0;
  --oc-approved-cyan:#16b6e8;
  --oc-approved-green:#12a866;
  --oc-approved-amber:#f0a414;
  --oc-approved-red:#e24545;
  --oc-approved-ink:#071b3e;
  --oc-approved-muted:#667993;
  --oc-approved-line:#dbe5ef;
  --oc-approved-soft:#f4f7fb;
  --oc-approved-soft-blue:#eef7ff;
  --oc-approved-radius:13px;
  --oc-approved-shadow:0 4px 14px rgba(16,45,78,.045);
}

/* Remaining desktop workspace screens */
#manager-verification,#manager-timesheets,#manager-patrols,#manager-incidents,#manager-sites,
#manager-finance,#manager-imports,#manager-access,#client-portal{
  max-width:1500px!important;margin:0 auto!important;
}
.oc-approved-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  margin:0 0 18px!important;padding:0!important;border:0!important;background:transparent!important;
}
.oc-approved-head-copy{min-width:0}
.oc-approved-kicker{
  color:var(--oc-approved-blue);font-size:12px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:6px
}
.oc-approved-head h1{margin:0!important;font-size:32px!important}
.oc-approved-head p{margin:5px 0 0!important;color:var(--oc-approved-muted)!important;font-size:15px!important}
.oc-approved-head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.oc-approved-legacy-head{display:none!important}

/* Shared cards, filters and data regions */
#manager-verification>.card,#manager-timesheets>.card,#manager-patrols>.card,#manager-incidents>.card,
#manager-sites>.card,#manager-finance>.card,#manager-imports>.card,#manager-access>.card,
#manager-sites #clientSiteList>.card,#manager-access #accessList>.card{
  border:1px solid var(--oc-approved-line)!important;border-radius:var(--oc-approved-radius)!important;
  box-shadow:var(--oc-approved-shadow)!important;background:#fff!important;padding:18px!important
}
#manager-timesheets>.card:first-of-type,#manager-finance>.card:first-of-type{
  padding:16px 18px!important
}
#manager-timesheets .field,#manager-finance .field,#manager-imports .field,#manager-access .field,
#manager-sites .field,#manager-verification .field{margin:10px 0!important}
#manager-timesheets input,#manager-timesheets select,
#manager-finance input,#manager-finance select,
#manager-imports input,#manager-imports select,#manager-imports textarea,
#manager-access input,#manager-access select,#manager-access textarea,
#manager-sites input,#manager-sites select,#manager-sites textarea,
#manager-verification textarea{
  min-height:42px!important;border:1px solid #cfdbe7!important;border-radius:9px!important;
  background:#fff!important;padding:9px 11px!important
}
#manager-verification textarea,#manager-imports textarea,#manager-access textarea,#manager-sites textarea{min-height:94px!important}
#manager-timesheets .notice,#manager-finance .notice,#manager-imports .notice,
#manager-access .notice,#manager-sites .notice,#manager-verification .notice{
  border-radius:10px!important;padding:11px 13px!important;font-size:13px!important;line-height:1.45!important
}
#manager-timesheets .employee-summary,#manager-finance .employee-summary,
#manager-sites .employee-summary,#manager-access .employee-summary{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:13px 0!important
}
.employee-summary .mini-stat,.employee-summary>.stat{
  border:1px solid var(--oc-approved-line)!important;border-radius:11px!important;background:#fff!important;
  box-shadow:none!important;padding:13px!important
}
.employee-summary .mini-stat span,.employee-summary>.stat>span{font-size:11px!important;color:var(--oc-approved-muted)!important}
.employee-summary .mini-stat b,.employee-summary>.stat>b{font-size:23px!important}

/* Attendance exception */
#manager-verification>.card:first-of-type{
  display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(260px,.55fr)!important;
  gap:14px 18px!important;align-items:start!important
}
#manager-verification>.card:first-of-type>.row{grid-column:1/-1;padding:0 0 12px!important}
#manager-verification>.card:first-of-type>.grid{grid-column:1}
#manager-verification>.card:first-of-type>.field{grid-column:1}
#manager-verification #verificationActions,#manager-verification #verifyMessage{grid-column:2}
#manager-verification #verificationActions{
  display:grid!important;gap:9px!important;padding:14px;border:1px solid var(--oc-approved-line);
  border-radius:11px;background:#fbfdff;margin-top:0!important
}
#manager-verification #verificationActions .btn{width:100%!important}
#manager-verification #verificationActions.verification-actions-hidden{display:none!important}
#manager-verification #verificationActions.review-approved{
  background:#eefbf3!important;border-color:#b7e4c7!important
}
#manager-verification #verificationActions.review-approved #approveVerificationBtn{
  background:#15803d!important;border-color:#15803d!important;color:#fff!important;opacity:1!important;cursor:default!important
}
#manager-verification #verificationActions.review-approved #rejectVerificationBtn{display:none!important}
#manager-verification #verificationActions.review-rejected{
  background:#fff3f2!important;border-color:#f1b9b5!important
}
#manager-verification #verificationActions.review-rejected #approveVerificationBtn{display:none!important}
#manager-verification #verificationActions.review-rejected #rejectVerificationBtn{
  display:block!important;background:#b42318!important;border-color:#b42318!important;color:#fff!important;opacity:1!important;cursor:default!important
}
#manager-verification #reason[readonly]{background:#f8fafc!important;color:#344054!important;cursor:default!important}
#manager-verification>.card+ .card{background:#f8fbfd!important;box-shadow:none!important}

/* Timesheets */
#manager-timesheets>.card:first-of-type .grid.grid-2{
  grid-template-columns:repeat(5,minmax(130px,1fr))!important;gap:10px!important;align-items:end!important
}
#timesheetList{padding:0!important;overflow:auto!important}
#timesheetList table{width:100%!important;border-collapse:collapse!important}
#timesheetList th{background:#f7f9fc!important;color:#60738b!important;padding:11px 12px!important}
#timesheetList td{padding:12px!important;border-top:1px solid #edf1f5!important}

/* Incidents */
#manager-incidents .incident-card,#manager-incidents .row{
  border-color:#edf1f5!important;border-radius:9px!important
}
#manager-incidents .incident-card{padding:14px!important}
#manager-incidents .actions{gap:7px!important}
#manager-incidents .status{font-size:12px!important}

/* Clients & Sites */
#manager-sites .oc-admin-tools{margin:0 0 14px!important}
#manager-sites .oc-admin-search input{height:42px!important;font-size:14px!important}
#manager-sites #clientSiteList{display:grid!important;gap:12px!important;margin-top:12px!important}
#manager-sites #clientSiteList>.card{margin:0!important}
#manager-sites .row{padding:12px 0!important}
#manager-sites .status{font-size:12px!important}
#manager-sites #clientFormCard,#manager-sites #siteFormCard,
#manager-sites #clientDetailCard,#manager-sites #siteDetailCard,
#manager-access #accessDetailCard{
  top:64px!important;max-height:calc(100vh - 64px)!important;
  border-radius:16px 0 0 16px!important;padding:22px!important
}

/* Site detail and Site Setup are information-dense: give them a substantially wider desktop workspace. */
@media(min-width:821px){
  #manager-sites.oc-admin-phase5 #siteDetailCard{
    width:min(900px,76vw)!important;
    max-width:none!important;
  }
  #manager-sites.oc-admin-phase5 #siteFormCard{
    width:min(980px,80vw)!important;
    max-width:none!important;
  }
}

/* Payroll & Billing */
.oc-finance-banner{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0 0 14px!important}
.oc-finance-stat{
  padding:14px!important;border-radius:11px!important;border:1px solid var(--oc-approved-line)!important;
  box-shadow:none!important
}
.oc-finance-stat span{font-size:11px!important}.oc-finance-stat b{font-size:24px!important;margin-top:5px!important}
#manager-finance>.grid.grid-2{gap:12px!important}
#manager-finance #financeList{padding:0!important;overflow:auto!important}

/* Imports */
#manager-imports>.notice{margin:0 0 10px!important}
#manager-imports .import-type-grid{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:9px!important;margin:14px 0!important
}
#manager-imports .import-type-card{
  min-height:130px!important;padding:14px!important;border:1px solid var(--oc-approved-line)!important;
  border-radius:11px!important;background:#fff!important
}
#manager-imports .import-type-card.active{
  border-color:#76baf7!important;background:#f1f8ff!important;box-shadow:inset 0 0 0 1px #76baf7!important
}
#manager-imports .import-type-card h3{font-size:16px!important}
#manager-imports .import-type-card .tiny{font-size:12px!important}
#manager-imports .import-stepbar{gap:7px!important;margin:14px 0!important}
#manager-imports .import-step{padding:10px 12px!important;font-size:12px!important;border-radius:8px!important}
#manager-imports .import-file-box{padding:22px!important;border-radius:12px!important}

/* User Access */
#manager-access #managementUserAdmin{margin-top:12px!important}
#manager-access .oc-admin-tools{margin:0 0 14px!important}
#manager-access #accessList{margin-top:12px!important}
#manager-access #accessList>.card{margin:0 0 10px!important}

/* Client Portal — signed-off visual language, calmer than admin */
#client-portal.oc-client-canonical{max-width:1460px!important}
#client-portal .oc-ref-client-head{
  display:flex!important;justify-content:space-between!important;align-items:flex-end!important;
  margin:0 0 14px!important;padding:0!important
}
#client-portal .oc-ref-client-head h1{font-size:32px!important;margin:0!important}
#client-portal .oc-ref-client-head p{font-size:15px!important;color:var(--oc-approved-muted)!important}
#client-portal .client-portal-hero,#client-portal .client-context-bar{display:none!important}
#client-portal .oc-client-tabs{
  position:static!important;margin:0 0 14px!important;padding:6px 8px!important;
  border:1px solid var(--oc-approved-line)!important;border-radius:11px!important;box-shadow:none!important
}
#client-portal .oc-client-tabs button{font-size:13px!important;min-height:40px!important;padding:9px 12px!important}
#client-portal .oc-client-tabs button.active{background:#eaf5ff!important;color:#076bc7!important}
#client-portal .oc-client-overview{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0 0 12px!important
}
#client-portal .oc-client-overview-card{
  padding:14px!important;border:1px solid var(--oc-approved-line)!important;
  border-radius:11px!important;box-shadow:none!important
}
#client-portal .oc-client-overview-card span{font-size:11px!important}
#client-portal .oc-client-overview-card b{font-size:25px!important}
#client-portal .oc-client-overview-card small{font-size:11px!important}
#client-portal .oc-client-shortcuts{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;margin:0 0 14px!important
}
#client-portal .oc-client-shortcut{
  min-height:86px!important;padding:13px!important;border:1px solid var(--oc-approved-line)!important;
  border-radius:11px!important;box-shadow:none!important;font-size:12px!important
}
#client-portal .oc-client-shortcut b{font-size:13px!important}
#client-portal>.card{
  border:1px solid var(--oc-approved-line)!important;border-radius:12px!important;
  box-shadow:var(--oc-approved-shadow)!important;padding:18px!important
}
#client-portal .client-summary{
  display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:9px!important;margin:0 0 14px!important
}
#client-portal .client-summary>*{
  border:1px solid var(--oc-approved-line)!important;border-radius:10px!important;background:#fff!important;padding:12px!important
}
#client-portal .client-site-grid,#client-portal .client-report-grid,#client-portal .client-commercial-grid{gap:12px!important}
#client-portal .client-report-card,#client-portal .client-site-card,#client-portal .client-commercial-card{
  border:1px solid var(--oc-approved-line)!important;border-radius:11px!important;box-shadow:none!important
}

/* Officer mobile — mobile first, calmer and larger */
body.officer-mode{font-size:15px!important;background:#f4f7fb!important}
#officer-shifts.oc-officer-canonical{max-width:760px!important;margin:0 auto!important}
.oc-officer-focus{
  padding:17px 18px!important;border-radius:15px!important;margin:0 0 12px!important;
  background:linear-gradient(145deg,#06234a,#0a4d8c)!important
}
.oc-officer-focus .oc-kicker{font-size:11px!important}
.oc-officer-focus h2{font-size:24px!important;margin:5px 0!important}
.oc-officer-focus p{font-size:13px!important}
.oc-officer-focus-meta .status{font-size:11.5px!important}
.oc-officer-focus-actions .btn{min-height:42px!important}
.oc-officer-quick-card{font-size:12px!important;padding:13px!important}
.oc-officer-quick-card b{font-size:13px!important}
.officer-view-toolbar{padding:10px!important;border-radius:11px!important}
.officer-shift-card{padding:14px!important;border-radius:11px!important}
.officer-screen h1{font-size:28px!important}.officer-screen h2{font-size:19px!important}
.officer-screen p,.officer-screen .muted{font-size:13.5px!important}
.officer-screen .card{padding:16px!important;border-radius:12px!important}
@media(max-width:560px){
  body.officer-mode .main{padding:10px 10px 84px!important}
  .oc-officer-focus{padding:15px!important}
  .oc-officer-focus h2{font-size:22px!important}
  .oc-officer-focus p{font-size:12.5px!important}
  .officer-calendar-day-head{font-size:12px!important}
  .officer-calendar-shift{font-size:12.5px!important}
  .oc-officer-bottom-nav{height:72px!important}
  .oc-officer-bottom-nav button{
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.15!important;
    letter-spacing:0!important
  }
  .oc-officer-bottom-nav button span{font-size:18px!important;line-height:1!important}
}

/* Responsive remainder */
@media(max-width:1180px){
  #manager-timesheets>.card:first-of-type .grid.grid-2{grid-template-columns:repeat(3,minmax(130px,1fr))!important}
  #manager-imports .import-type-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #client-portal .client-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .oc-approved-head{align-items:flex-start;flex-direction:column}
  #manager-verification>.card:first-of-type{grid-template-columns:1fr!important}
  #manager-verification #verificationActions,#manager-verification #verifyMessage{grid-column:1!important}
  #manager-timesheets>.card:first-of-type .grid.grid-2{grid-template-columns:1fr 1fr!important}
  #manager-timesheets .employee-summary,#manager-finance .employee-summary,
  #manager-sites .employee-summary,#manager-access .employee-summary{grid-template-columns:1fr 1fr!important}
  #manager-imports .import-type-grid{grid-template-columns:1fr 1fr!important}
  #client-portal .oc-client-overview{grid-template-columns:1fr 1fr!important}
  #client-portal .oc-client-shortcuts{grid-template-columns:1fr 1fr!important}
}
@media(max-width:560px){
  #manager-timesheets>.card:first-of-type .grid.grid-2{grid-template-columns:1fr!important}
  #manager-imports .import-type-grid{grid-template-columns:1fr!important}
  #client-portal .client-summary{grid-template-columns:1fr 1fr!important}
}


/* Phase 1 Patrols */
#manager-patrols .patrol-ops-summary{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;margin:0 0 14px!important
}
#manager-patrols .patrol-ops-summary .status{
  display:block!important;padding:13px!important;border:1px solid var(--oc-approved-line)!important;
  border-radius:11px!important;background:#fff!important;font-size:12.5px!important
}
#manager-patrols .patrol-ops-toolbar{
  display:flex!important;gap:8px!important;margin:0 0 12px!important
}
#manager-patrols .patrol-ops-toolbar input{
  min-height:42px!important;max-width:380px!important;font-size:14px!important;
  border:1px solid #cfdbe7!important;border-radius:9px!important
}
#manager-patrols .patrol-ops-filter{
  min-height:40px!important;padding:8px 12px!important;border-radius:9px!important;
  font-size:12.5px!important
}
#manager-patrols .patrol-ops-filter.active{
  background:#eaf5ff!important;color:#076bc7!important;border-color:#bcdcf9!important
}
#manager-patrols .patrol-ops-table th{
  padding:11px 12px!important;font-size:11.5px!important;background:#f7f9fc!important
}
#manager-patrols .patrol-ops-table td{
  padding:12px!important;font-size:13.5px!important
}
#manager-patrols .patrol-ops-table .patrol-main{font-size:13.5px!important}
#manager-patrols .patrol-ops-table .patrol-sub{font-size:11px!important}
@media(max-width:900px){
  #manager-patrols .patrol-ops-summary{grid-template-columns:1fr 1fr!important}
}


/* Phase 1 shell acceptance — keep navigation readable without clipped/awkward scroll states. */
@media(min-width:821px) and (min-height:760px){
  #sidebar .oc-ref-sidebrand{padding:16px 14px 9px!important}
  #sidebar .oc-ref-wordmark{font-size:20px!important}
  #sidebar .oc-ref-tenant{
    margin:4px 9px 8px!important;
    padding:8px 9px!important;
  }
  #sidebar .oc-ref-tenant-logo{width:36px!important;height:36px!important}
  #sidebar .oc-ref-tenant-copy small{font-size:8.5px!important}
  #sidebar .oc-ref-tenant-copy b{font-size:13px!important}
  #sidebar .oc-ref-tenant-copy span{font-size:10px!important}
  #sidebar .oc-ref-nav{
    padding:0 8px 5px!important;
    overflow-y:auto!important;
    scrollbar-gutter:stable;
  }
  #sidebar .oc-ref-group{margin:2px 0 5px!important}
  #sidebar .oc-ref-group-title{
    padding:3px 9px 2px!important;
    font-size:9.5px!important;
    line-height:1.2!important;
  }
  #sidebar .oc-ref-nav button{
    min-height:36px!important;
    padding:7px 9px!important;
    font-size:14px!important;
    line-height:1.18!important;
    gap:8px!important;
  }
  #sidebar button[data-ops-screen]{
    font-size:14px!important;
  }
  #sidebar .oc-ref-nav-icon{
    width:18px!important;
    height:18px!important;
    font-size:12px!important;
  }
  #sidebar .oc-ref-footer{
    padding:8px 12px!important;
    font-size:10.5px!important;
  }
  #sidebar .oc-ref-footer-row{padding:3px 1px!important}
  #sidebar .oc-ref-avatar{width:28px!important;height:28px!important}
}


/* Audit remediation 2026-09-21 — officer mobile focus-card contrast */
body.officer-mode .oc-officer-focus{
  background-color:#07182f!important;
  background:linear-gradient(135deg,#07182f,#0b4f86)!important;
  color:#fff!important;
  border-color:#0b4f86!important;
}
body.officer-mode .oc-officer-focus .oc-kicker{color:#91d7ff!important}
body.officer-mode .oc-officer-focus h2{color:#fff!important}
body.officer-mode .oc-officer-focus p{color:#d6e9f7!important}
body.officer-mode .oc-officer-focus .status.neutral{color:#455873!important}
body.officer-mode .oc-officer-focus .status.ok{color:#027A48!important}
body.officer-mode .oc-officer-focus .status.warn{color:#B54708!important}
body.officer-mode .oc-officer-focus .status.danger{color:#B42318!important}


/* 2026-09-21 tenant branding repair — Tornado reverse logo */
html[data-tenant-slug="tornado-fm"] .tenant-mark.has-logo,
html[data-tenant-slug="tornado-fm"] .oc-ref-tenant-logo{
  background:#071a2f!important;
  border-color:#173a5a!important;
}
html[data-tenant-slug="tornado-fm"] .tenant-brand-img,
html[data-tenant-slug="tornado-fm"] .oc-ref-tenant-logo img{
  object-fit:contain!important;
}


/* Desktop readability baseline
   The reference UI originally compressed the main workspace typography to 8–12px.
   Keep the navigation density, but make operational content comfortably readable at 100% browser zoom. */
@media(min-width:821px){
  .main{font-size:14px!important;line-height:1.45!important}
  .main p,.main .muted{font-size:13px!important;line-height:1.45!important}
  .main .tiny{font-size:12px!important;line-height:1.4!important}
  .main h1{font-size:30px!important;line-height:1.15!important}
  .main h2{font-size:21px!important;line-height:1.2!important}
  .main h3{font-size:16px!important;line-height:1.25!important}
  .main label{font-size:13px!important;line-height:1.3!important}
  .main input,.main select,.main textarea{font-size:13.5px!important;line-height:1.35!important}
  .main .btn,.main button{font-size:13px!important;line-height:1.25!important}
  .main .status{font-size:12px!important;line-height:1.25!important}
  .main .notice{font-size:13px!important;line-height:1.45!important}
  .main table{font-size:13px!important}
  .main table th{font-size:11.5px!important;line-height:1.35!important}
  .main table td{font-size:13px!important;line-height:1.4!important}

  /* Dashboard/reference components had additional compressed typography. */
  #manager-dashboard.oc-ref-control-room .oc-ops-header p{font-size:13px!important}
  #manager-dashboard.oc-ref-control-room>.grid.grid-4 .stat{font-size:12.5px!important}
  #manager-dashboard.oc-ref-control-room>.grid.grid-4 .stat b{font-size:25px!important}
  .dashboard-open-hint{font-size:11.5px!important}
  .oc-ref-panel-head b{font-size:13.5px!important}
  .oc-ref-panel-head a,.oc-ref-panel-head button{font-size:12px!important}
  .oc-ref-activity-row{font-size:12px!important;line-height:1.4!important}
  .oc-ref-activity-row b{font-size:12.5px!important}
  .oc-ref-legend{font-size:11.5px!important}
  .oc-ref-alertchip{font-size:12px!important}
  .oc-ref-alertchip b{font-size:12.5px!important}

  /* Workforce/admin/reference pages. */
  .oc-workforce-head p{font-size:13px!important}
  .oc-workforce-tab{font-size:13px!important}
  .oc-workforce-hint{font-size:12.5px!important}
  .oc-task-card b{font-size:13px!important}
  .oc-task-card span{font-size:11.5px!important}
  .oc-filter-chip{font-size:11.5px!important}
  .oc-officer-search input{font-size:12.5px!important}
  .oc-workforce-table{font-size:12.5px!important}
  .oc-workforce-table th{font-size:11px!important}
  .oc-workforce-person b{font-size:12.5px!important}
  .oc-workforce-person small{font-size:11px!important}
  .oc-today-head span{font-size:11.5px!important}
  .oc-action-row{font-size:12.5px!important}
  .oc-admin-search input{font-size:13px!important}
  .oc-admin-tabs button{font-size:12.5px!important}
  .oc-finance-stat span{font-size:11.5px!important}
  .oc-import-progress{font-size:12.5px!important}
  #manager-imports.oc-admin-phase5 .import-step{font-size:12px!important}

  /* Top workspace controls outside the sidebar. */
  .topbar .oc-search input{font-size:13px!important}
  .workspace-switch-label{font-size:10px!important}
  .workspace-switch-name{font-size:13px!important}
  .tenant-portal-name{font-size:11px!important}
  .role-pill{font-size:12px!important}
}


/* Desktop density pass
   Preserve the larger readable type at 100% zoom, but remove unnecessary white space. */
@media(min-width:821px){
  .main{padding:12px 14px 24px!important}

  #manager-dashboard{
    max-width:1500px!important;
    margin:0 auto!important;
  }
  #manager-dashboard h1{margin-bottom:3px!important}
  #manager-dashboard h2{margin-bottom:4px!important}
  #manager-dashboard p{margin-top:3px!important;margin-bottom:6px!important}

  /* Cards and KPI tiles: tighter without reducing text size. */
  #manager-dashboard .card{padding:14px!important}
  #manager-dashboard>.grid.grid-4{
    gap:10px!important;
    margin-top:12px!important;
    margin-bottom:10px!important;
  }
  #manager-dashboard>.grid.grid-4 .stat{
    min-height:68px!important;
    padding:11px 13px!important;
  }
  #manager-dashboard>.grid.grid-4 .stat b{margin-top:3px!important}
  #manager-dashboard>.grid.grid-2{
    gap:10px!important;
    margin-top:10px!important;
  }

  /* Reference dashboard panels. */
  #manager-dashboard .oc-ref-livegrid{
    gap:10px!important;
    margin:0 0 10px!important;
  }
  #manager-dashboard .oc-ref-bottomgrid{
    gap:10px!important;
    margin-top:0!important;
  }
  #manager-dashboard .oc-ref-panel-head{
    padding:8px 11px!important;
  }
  #manager-dashboard .oc-ref-map{height:190px!important}
  #manager-dashboard .oc-ref-activity{padding:2px 10px!important}
  #manager-dashboard .oc-ref-activity-row{padding:6px 0!important}
  #manager-dashboard .oc-ref-coverage{padding:9px 11px!important}
  #manager-dashboard .oc-ref-alertchips{padding:9px!important;gap:7px!important}
  #manager-dashboard .oc-ref-alertchip{padding:7px 8px!important}

  /* Share/access cards and nested dashboard boxes. */
  #manager-dashboard .site-box,
  #manager-dashboard .sandbox-card,
  #manager-dashboard .client-portal-access{
    padding:12px!important;
  }
  #manager-dashboard .row{padding-top:8px!important;padding-bottom:8px!important}
  #manager-dashboard .actions{margin-top:8px!important}

  /* General operational screens: reduce excessive vertical gaps while retaining readability. */
  .oc-approved-head{margin-bottom:12px!important}
  #manager-verification>.card,#manager-timesheets>.card,#manager-patrols>.card,#manager-incidents>.card,
  #manager-sites>.card,#manager-finance>.card,#manager-imports>.card,#manager-access>.card{
    padding:15px!important;
  }
  #manager-timesheets .field,#manager-finance .field,#manager-imports .field,#manager-access .field,
  #manager-sites .field,#manager-verification .field{margin:8px 0!important}
}

/* PGFM live-test: Clients & Sites scalable directory.
   Separate operational site lookup from client management so large estates remain usable. */
#manager-sites .oc-directory-tools{
  display:block!important;
  margin:0 0 8px!important;
}
#manager-sites .oc-directory-topline{
  display:grid!important;
  grid-template-columns:auto minmax(280px,1fr) auto!important;
  gap:9px!important;
  align-items:center!important;
}
#manager-sites .oc-directory-tabs{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  padding:3px!important;
  border:1px solid var(--oc-approved-line)!important;
  border-radius:9px!important;
  background:#fff!important;
}
#manager-sites .oc-directory-tabs button{
  border:0!important;
  background:transparent!important;
  color:#52647a!important;
  border-radius:7px!important;
  min-height:34px!important;
  padding:6px 11px!important;
  font-size:12.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#manager-sites .oc-directory-tabs button.active{
  background:#eaf5ff!important;
  color:#076bc7!important;
}
#manager-sites .oc-directory-tabs button span{
  margin-left:4px!important;
  font-size:11px!important;
  font-weight:800!important;
  color:inherit!important;
}
#manager-sites .oc-directory-search{
  max-width:none!important;
  min-width:0!important;
}
#manager-sites .oc-directory-search input{
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  font-size:13px!important;
}
#manager-sites .oc-directory-result-meta{
  min-width:105px!important;
  text-align:right!important;
  color:var(--oc-approved-muted)!important;
  font-size:12px!important;
  white-space:nowrap!important;
}
#manager-sites .oc-directory-filterbar{
  display:flex!important;
  align-items:flex-end!important;
  gap:7px!important;
  margin-top:7px!important;
  flex-wrap:wrap!important;
}
#manager-sites .oc-directory-filter{
  display:grid!important;
  gap:3px!important;
  min-width:150px!important;
  margin:0!important;
}
#manager-sites .oc-directory-filter[hidden]{
  display:none!important;
}
#manager-sites .oc-directory-filter>span{
  font-size:10.5px!important;
  line-height:1.1!important;
  font-weight:800!important;
  color:var(--oc-approved-muted)!important;
  text-transform:uppercase!important;
  letter-spacing:.035em!important;
}
#manager-sites .oc-directory-filter select{
  min-height:34px!important;
  height:34px!important;
  padding:5px 30px 5px 9px!important;
  font-size:12px!important;
  border-radius:8px!important;
}
#manager-sites .oc-directory-page-size{
  min-width:82px!important;
  margin-left:auto!important;
}
#manager-sites .oc-directory-summary{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  flex-wrap:wrap!important;
  margin:0 0 8px!important;
  min-height:34px!important;
  border:1px solid var(--oc-approved-line)!important;
  border-radius:9px!important;
  background:#fff!important;
  overflow:hidden!important;
}
#manager-sites .oc-directory-summary span{
  display:inline-flex!important;
  align-items:baseline!important;
  gap:4px!important;
  padding:7px 11px!important;
  color:var(--oc-approved-muted)!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
#manager-sites .oc-directory-summary span+span{
  border-left:1px solid #edf1f5!important;
}
#manager-sites .oc-directory-summary b{
  color:#0a2547!important;
  font-size:14px!important;
}
#manager-sites #clientSiteList{
  display:block!important;
  margin-top:0!important;
}
#manager-sites .oc-directory-table-card{
  border:1px solid var(--oc-approved-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:var(--oc-approved-shadow)!important;
}
#manager-sites .oc-directory-table-scroll{
  width:100%!important;
  overflow:auto!important;
}
#manager-sites .oc-directory-table{
  width:100%!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
  margin:0!important;
}
#manager-sites .oc-directory-table th{
  background:#f7f9fc!important;
  color:#60738b!important;
  border-bottom:1px solid var(--oc-approved-line)!important;
  padding:8px 10px!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.035em!important;
  text-align:left!important;
  white-space:nowrap!important;
}
#manager-sites .oc-directory-table td{
  border-top:1px solid #edf1f5!important;
  padding:8px 10px!important;
  height:48px!important;
  font-size:12.5px!important;
  line-height:1.25!important;
  vertical-align:middle!important;
  color:#18314f!important;
}
#manager-sites .oc-directory-table tbody tr:first-child td{
  border-top:0!important;
}
#manager-sites .oc-directory-table tbody tr:hover{
  background:#f9fcff!important;
}
#manager-sites .oc-directory-primary{
  font-weight:700!important;
  min-width:0!important;
}
#manager-sites .oc-directory-primary .site-name-link{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:12.75px!important;
  line-height:1.25!important;
}
#manager-sites .oc-directory-primary small{
  display:block!important;
  margin-top:2px!important;
  color:var(--oc-approved-muted)!important;
  font-size:10.5px!important;
  font-weight:500!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#manager-sites .oc-directory-text-link{
  border:0!important;
  background:none!important;
  padding:0!important;
  min-height:0!important;
  color:#0a6fc2!important;
  font:inherit!important;
  font-weight:700!important;
  text-align:left!important;
  cursor:pointer!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#manager-sites .oc-directory-text-link:disabled{
  color:var(--oc-approved-muted)!important;
  cursor:default!important;
}
#manager-sites .oc-directory-location{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:#52647a!important;
}
#manager-sites .oc-directory-table .status{
  display:inline-flex!important;
  align-items:center!important;
  min-height:23px!important;
  padding:3px 7px!important;
  font-size:10.5px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
#manager-sites .oc-directory-actions-cell{
  text-align:right!important;
  white-space:nowrap!important;
}
#manager-sites .oc-directory-actions-cell .btn{
  min-height:30px!important;
  height:30px!important;
  padding:5px 9px!important;
  font-size:11.5px!important;
  white-space:nowrap!important;
}
#manager-sites .oc-directory-row-actions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:5px!important;
}
#manager-sites .oc-sites-table th:nth-child(1){width:19%!important}
#manager-sites .oc-sites-table th:nth-child(2){width:15%!important}
#manager-sites .oc-sites-table th:nth-child(3){width:31%!important}
#manager-sites .oc-sites-table th:nth-child(4){width:9%!important}
#manager-sites .oc-sites-table th:nth-child(5){width:10%!important}
#manager-sites .oc-sites-table th:nth-child(6){width:8%!important}
#manager-sites .oc-sites-table th:nth-child(7){width:8%!important}
#manager-sites .oc-clients-table th:nth-child(1){width:31%!important}
#manager-sites .oc-clients-table th:nth-child(2),
#manager-sites .oc-clients-table th:nth-child(3),
#manager-sites .oc-clients-table th:nth-child(4){width:11%!important}
#manager-sites .oc-clients-table th:nth-child(5){width:12%!important}
#manager-sites .oc-clients-table th:nth-child(6){width:24%!important}
#manager-sites .oc-directory-pager{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  min-height:42px!important;
  padding:6px 9px!important;
  border-top:1px solid var(--oc-approved-line)!important;
  background:#fbfcfe!important;
  color:var(--oc-approved-muted)!important;
  font-size:11.5px!important;
}
#manager-sites .oc-directory-pager .btn{
  min-height:30px!important;
  height:30px!important;
  padding:5px 9px!important;
  font-size:11.5px!important;
}
#manager-sites .oc-directory-empty{
  display:grid!important;
  gap:4px!important;
  place-items:start!important;
  padding:22px!important;
  border:1px solid var(--oc-approved-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--oc-approved-muted)!important;
  font-size:12.5px!important;
}
#manager-sites .oc-directory-empty b{
  color:#18314f!important;
  font-size:13.5px!important;
}

@media(max-width:1100px){
  #manager-sites .oc-directory-topline{
    grid-template-columns:auto minmax(220px,1fr)!important;
  }
  #manager-sites .oc-directory-result-meta{
    grid-column:1/-1!important;
    text-align:left!important;
  }
  #manager-sites .oc-directory-table{
    min-width:900px!important;
  }
  #manager-sites .oc-clients-table{
    min-width:760px!important;
  }
}
@media(max-width:820px){
  #manager-sites .oc-directory-topline{
    grid-template-columns:1fr!important;
  }
  #manager-sites .oc-directory-tabs{
    width:max-content!important;
  }
  #manager-sites .oc-directory-result-meta{
    text-align:left!important;
  }
  #manager-sites .oc-directory-filterbar{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  #manager-sites .oc-directory-filter,
  #manager-sites .oc-directory-page-size{
    min-width:0!important;
    width:100%!important;
    margin-left:0!important;
  }
  #manager-sites .oc-directory-summary{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
  }
  #manager-sites .oc-directory-summary span{
    flex:0 0 auto!important;
  }
}
@media(max-width:560px){
  #manager-sites .oc-directory-filterbar{
    grid-template-columns:1fr!important;
  }
}

/* Test Point 17 — Officer desktop quick-navigation cleanup.
   The reference Officer quick-action strip is a mobile-only control. Without its
   mobile stylesheet it falls back to unstyled browser buttons on wider screens. */
@media(min-width:561px){
  body.officer-mode #ocRefOfficerQuick{
    display:none!important;
  }
}

/* Test Point 18 preparation — Company Admin summary containment.
   User-access and legacy workforce summaries must never leak beneath unrelated
   operational screens. Workforce uses its own current-action surface. */
body:not([data-oc-screen="manager-access"]) #accessSummary{
  display:none!important;
}
body[data-oc-screen="manager-access"] #accessSummary{
  display:grid!important;
}
body[data-oc-screen="manager-employees"] #employeeSummary{
  display:none!important;
}
#manager-employees .oc-workforce-layout>aside{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
@media(min-width:821px){
  #manager-employees .oc-actions-title{
    margin:12px 0 7px!important;
  }
  #manager-employees .oc-today-card{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:0!important;
  }
  #manager-employees .oc-today-head{
    grid-column:1/-1!important;
    padding:8px 10px!important;
  }
  #manager-employees .oc-action-row{
    grid-template-columns:22px 24px minmax(0,1fr) 14px!important;
    gap:6px!important;
    min-height:52px!important;
    padding:8px 10px!important;
    border-bottom:0!important;
    border-right:1px solid #edf1f5!important;
    overflow:hidden!important;
  }
  #manager-employees .oc-action-row:last-child{
    border-right:0!important;
  }
}
@media(min-width:821px) and (max-width:1100px){
  #manager-employees .oc-today-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #manager-employees .oc-action-row:nth-of-type(2n){
    border-right:0!important;
  }
  #manager-employees .oc-action-row:nth-of-type(n+4){
    border-top:1px solid #edf1f5!important;
  }
}

/* Test Point 19 — active Officer shift becomes the operational home. */
#officer-active .officer-active-hero{
  padding:18px!important;
}
#officer-active .officer-active-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}
#officer-active .officer-active-head h1{
  margin:6px 0 3px!important;
}
#officer-active .officer-active-status{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin-top:5px!important;
}
#officer-active .officer-active-status>span:last-child{
  color:#60758d!important;
  font-size:12px!important;
}
#officer-active .officer-active-actions-title{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:18px 0 8px!important;
  padding-top:14px!important;
  border-top:1px solid #e5edf4!important;
}
#officer-active .officer-active-actions-title>b{
  font-size:16px!important;
}
#officer-active .officer-active-actions-title>span{
  color:#60758d!important;
  font-size:12px!important;
  text-align:right!important;
}
#officer-active .officer-active-action-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
#officer-active .officer-active-action{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  min-height:72px!important;
  padding:11px 12px!important;
  border:1px solid #dbe6f0!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#0b2848!important;
  text-align:left!important;
  cursor:pointer!important;
}
#officer-active .officer-active-action:hover,
#officer-active .officer-active-action:focus-visible{
  border-color:#1590ea!important;
  background:#f5fbff!important;
  outline:none!important;
}
#officer-active .officer-active-action{
  position:relative!important;
  padding-right:34px!important;
}
#officer-active .officer-active-action:after{
  content:'›'!important;
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:#087bd5!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:800!important;
}
#officer-active .officer-active-action:active{
  transform:translateY(1px)!important;
}
#officer-active .patrol-status-action{
  border:1px solid #efdba9!important;
  cursor:pointer!important;
  font:inherit!important;
  font-weight:800!important;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease!important;
}
#officer-active .patrol-status-action:hover,
#officer-active .patrol-status-action:focus-visible{
  border-color:#d9a92f!important;
  box-shadow:0 0 0 3px rgba(217,169,47,.16)!important;
  outline:none!important;
}
#officer-active .patrol-status-action:active{
  transform:translateY(1px)!important;
}
#officer-active .officer-action-target{
  outline:3px solid #1590ea!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 5px rgba(21,144,234,.12)!important;
}
#officer-active .officer-active-action-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  border-radius:9px!important;
  background:#eaf5ff!important;
  color:#087bd5!important;
  font-size:17px!important;
  font-weight:800!important;
}
#officer-active .officer-active-action>span:last-child{
  min-width:0!important;
}
#officer-active .officer-active-action b{
  display:block!important;
  font-size:13px!important;
  line-height:1.25!important;
}
#officer-active .officer-active-action small{
  display:block!important;
  margin-top:3px!important;
  color:#60758d!important;
  font-size:11px!important;
  line-height:1.3!important;
}
#officer-active .officer-active-clockout{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:12px!important;
  padding:12px!important;
  border:1px solid #dbe6f0!important;
  border-radius:10px!important;
  background:#f8fbfd!important;
}
#officer-active .officer-active-clockout>div{
  display:grid!important;
  gap:2px!important;
}
#officer-active .officer-active-clockout>div>span{
  color:#60758d!important;
  font-size:11.5px!important;
}
#officer-active #activeWelfarePanel,
#officer-active #activePatrolPanel{
  scroll-margin-top:18px!important;
}
@media(max-width:820px){
  #officer-active .officer-active-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #officer-active .officer-active-actions-title{
    display:grid!important;
  }
  #officer-active .officer-active-actions-title>span{
    text-align:left!important;
  }
}
@media(max-width:520px){
  #officer-active .officer-active-hero{
    padding:12px!important;
  }
  #officer-active .officer-active-head>.btn{
    display:none!important;
  }
  #officer-active .officer-active-action{
    min-height:68px!important;
    padding:9px!important;
    gap:8px!important;
  }
  #officer-active .officer-active-action-icon{
    flex-basis:30px!important;
    width:30px!important;
    height:30px!important;
  }
  #officer-active .officer-active-clockout{
    display:grid!important;
  }
  #officer-active .officer-active-clockout .btn{
    width:100%!important;
  }
}

/* Officer patrol due notifications use the same visual urgency model as Welfare,
   but remain distinct so simultaneous Welfare/Patrol tasks are clear. */
.oc-patrol-headsup{
  position:fixed!important;right:18px!important;bottom:18px!important;z-index:1210!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;
  width:min(430px,calc(100vw - 32px))!important;padding:12px 14px!important;
  border:1px solid #8fcdf0!important;border-left:5px solid #1687d9!important;border-radius:12px!important;
  background:#f3faff!important;box-shadow:0 14px 34px rgba(15,42,68,.18)!important;
}
.oc-patrol-headsup>div:first-child{display:grid!important;gap:3px!important;min-width:0!important}
.oc-patrol-headsup b{font-size:13px!important;color:#075985!important}
.oc-patrol-headsup span{font-size:11.5px!important;color:#52677d!important}
.oc-patrol-headsup-actions{display:flex!important;gap:6px!important;flex:0 0 auto!important}
.oc-patrol-alert-banner{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  margin:10px 0 0!important;padding:11px 12px!important;border:1px solid #8fcdf0!important;
  border-left:5px solid #1687d9!important;border-radius:10px!important;background:#f3faff!important;
}
.oc-patrol-alert-banner.overdue{border-color:#f3a6a6!important;border-left-color:#d92d20!important;background:#fff5f5!important}
.oc-patrol-alert-banner>div{display:grid!important;gap:2px!important}
.oc-patrol-alert-banner b{font-size:13px!important;color:#075985!important}
.oc-patrol-alert-banner.overdue b{color:#a61b1b!important}
.oc-patrol-alert-banner span{font-size:11.5px!important;color:#52677d!important}
.oc-patrol-modal-backdrop{
  position:fixed!important;inset:0!important;z-index:1410!important;display:grid!important;place-items:center!important;
  padding:18px!important;background:rgba(4,22,42,.55)!important;backdrop-filter:blur(2px)!important;
}
.oc-patrol-modal{
  position:relative!important;width:min(440px,100%)!important;padding:22px!important;
  border:1px solid #8fcdf0!important;border-top:5px solid #1687d9!important;border-radius:14px!important;
  background:#fff!important;box-shadow:0 20px 60px rgba(4,22,42,.28)!important;
}
.oc-patrol-modal-backdrop.overdue .oc-patrol-modal{border-color:#f3a6a6!important;border-top-color:#d92d20!important}
.oc-patrol-modal-kicker{margin-bottom:6px!important;color:#075985!important;font-size:10.5px!important;font-weight:900!important;letter-spacing:.09em!important}
.oc-patrol-modal-backdrop.overdue .oc-patrol-modal-kicker{color:#b42318!important}
.oc-patrol-modal h2{margin:0 34px 6px 0!important;font-size:24px!important;line-height:1.15!important}
.oc-patrol-modal-name{font-size:16px!important;font-weight:900!important;color:#0a2547!important}
.oc-patrol-modal-site{margin-top:2px!important;font-size:13px!important;font-weight:700!important;color:#52677d!important}
.oc-patrol-modal-time{margin-top:3px!important;color:#60758d!important;font-size:12px!important}
.oc-patrol-modal-location{
  margin-top:14px!important;padding:10px 11px!important;border:1px solid #bee1f5!important;border-radius:9px!important;
  background:#f3faff!important;color:#185d82!important;font-size:11.5px!important;line-height:1.4!important;
}
.oc-patrol-modal-actions{display:flex!important;justify-content:flex-end!important;gap:8px!important;margin-top:18px!important;flex-wrap:wrap!important}
.oc-patrol-modal-close{
  position:absolute!important;top:10px!important;right:10px!important;display:grid!important;place-items:center!important;
  width:30px!important;height:30px!important;border:0!important;border-radius:50%!important;background:#f2f5f8!important;
  color:#43566e!important;font-size:20px!important;line-height:1!important;cursor:pointer!important;
}
#officerActivePatrolAction{position:relative!important}
#officerActivePatrolAction.patrol-upcoming{border-color:#8fcdf0!important;background:#f3faff!important}
#officerActivePatrolAction.patrol-due{border-color:#1687d9!important;background:#edf8ff!important}
#officerActivePatrolAction.patrol-overdue{border-color:#d92d20!important;background:#fff5f5!important}
#officerActivePatrolAction[data-patrol-badge]::after{
  content:attr(data-patrol-badge)!important;position:absolute!important;top:6px!important;right:6px!important;
  display:grid!important;place-items:center!important;min-width:20px!important;height:20px!important;padding:0 5px!important;
  border-radius:999px!important;background:#1687d9!important;color:#fff!important;font-size:10px!important;font-weight:900!important;
}
#officerActivePatrolAction.patrol-overdue[data-patrol-badge]::after{background:#d92d20!important}
#ocNotifyBtn{position:relative!important}
#ocNotifyBtn.has-live-notifications::after{
  content:attr(data-live-count)!important;position:absolute!important;top:-5px!important;right:-5px!important;
  display:grid!important;place-items:center!important;min-width:18px!important;height:18px!important;padding:0 4px!important;
  border-radius:999px!important;background:#d92d20!important;color:#fff!important;font-size:9px!important;font-weight:900!important;
  box-shadow:0 0 0 2px #fff!important;
}
@media(max-width:560px){
  .oc-patrol-headsup{right:10px!important;bottom:76px!important;width:calc(100vw - 20px)!important;display:grid!important;gap:9px!important}
  .oc-patrol-headsup-actions{justify-content:flex-end!important}
  .oc-patrol-alert-banner{display:grid!important;margin:8px 0 0!important}
  .oc-patrol-alert-banner .btn{width:100%!important}
  .oc-patrol-modal-backdrop{align-items:end!important;padding:10px!important}
  .oc-patrol-modal{width:100%!important;padding:18px 14px 14px!important;border-radius:14px 14px 10px 10px!important}
  .oc-patrol-modal h2{font-size:21px!important}
  .oc-patrol-modal-actions{display:grid!important;grid-template-columns:1fr!important}
  .oc-patrol-modal-actions .btn{width:100%!important}
}

/* Test Point 19 — in-app Officer welfare notifications. */
.oc-welfare-headsup{
  position:fixed!important;
  right:18px!important;
  bottom:18px!important;
  z-index:1200!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  width:min(430px,calc(100vw - 32px))!important;
  padding:12px 14px!important;
  border:1px solid #f4c56a!important;
  border-left:5px solid #f59e0b!important;
  border-radius:12px!important;
  background:#fffaf0!important;
  box-shadow:0 14px 34px rgba(15,42,68,.18)!important;
}
.oc-welfare-headsup>div:first-child{
  display:grid!important;
  gap:3px!important;
  min-width:0!important;
}
.oc-welfare-headsup b{font-size:13px!important;color:#7a4700!important}
.oc-welfare-headsup span{font-size:11.5px!important;color:#6d5a39!important}
.oc-welfare-headsup-actions{
  display:flex!important;
  gap:6px!important;
  flex:0 0 auto!important;
}
.oc-welfare-alert-banner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:10px 0 0!important;
  padding:11px 12px!important;
  border:1px solid #f4c56a!important;
  border-left:5px solid #f59e0b!important;
  border-radius:10px!important;
  background:#fffaf0!important;
}
.oc-welfare-alert-banner.overdue{
  border-color:#f3a6a6!important;
  border-left-color:#d92d20!important;
  background:#fff5f5!important;
}
.oc-welfare-alert-banner>div{
  display:grid!important;
  gap:2px!important;
}
.oc-welfare-alert-banner b{font-size:13px!important;color:#7a4700!important}
.oc-welfare-alert-banner.overdue b{color:#a61b1b!important}
.oc-welfare-alert-banner span{font-size:11.5px!important;color:#675b48!important}
.oc-welfare-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:1400!important;
  display:grid!important;
  place-items:center!important;
  padding:18px!important;
  background:rgba(4,22,42,.55)!important;
  backdrop-filter:blur(2px)!important;
}
.oc-welfare-modal{
  position:relative!important;
  width:min(440px,100%)!important;
  padding:22px!important;
  border:1px solid #f4c56a!important;
  border-top:5px solid #f59e0b!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 20px 60px rgba(4,22,42,.28)!important;
}
.oc-welfare-modal-backdrop.overdue .oc-welfare-modal{
  border-color:#f3a6a6!important;
  border-top-color:#d92d20!important;
}
.oc-welfare-modal-kicker{
  margin-bottom:6px!important;
  color:#9a5a00!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}
.oc-welfare-modal-backdrop.overdue .oc-welfare-modal-kicker{color:#b42318!important}
.oc-welfare-modal h2{
  margin:0 34px 6px 0!important;
  font-size:24px!important;
  line-height:1.15!important;
}
.oc-welfare-modal-site{
  font-size:16px!important;
  font-weight:800!important;
  color:#0a2547!important;
}
.oc-welfare-modal-time{
  margin-top:3px!important;
  color:#60758d!important;
  font-size:12px!important;
}
.oc-welfare-modal-location{
  margin-top:14px!important;
  padding:10px 11px!important;
  border:1px solid #bee8ea!important;
  border-radius:9px!important;
  background:#f0fbfb!important;
  color:#17666b!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
.oc-welfare-modal-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin-top:18px!important;
  flex-wrap:wrap!important;
}
.oc-welfare-modal-close{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:0!important;
  border-radius:50%!important;
  background:#f2f5f8!important;
  color:#43566e!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
}
#officerActiveWelfareAction{
  position:relative!important;
}
#officerActiveWelfareAction.welfare-upcoming{
  border-color:#f2cf86!important;
  background:#fffaf2!important;
}
#officerActiveWelfareAction.welfare-due{
  border-color:#f59e0b!important;
  background:#fff9eb!important;
}
#officerActiveWelfareAction.welfare-overdue{
  border-color:#d92d20!important;
  background:#fff5f5!important;
}
#officerActiveWelfareAction[data-welfare-badge]::after{
  content:attr(data-welfare-badge)!important;
  position:absolute!important;
  top:6px!important;
  right:6px!important;
  display:grid!important;
  place-items:center!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:#f59e0b!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
}
#officerActiveWelfareAction.welfare-overdue[data-welfare-badge]::after{
  background:#d92d20!important;
}
#ocOfficerBottomNav [data-oc-off-nav="officer-shifts"]{
  position:relative!important;
}
.oc-welfare-nav-badge{
  position:absolute!important;
  top:4px!important;
  right:calc(50% - 22px)!important;
  display:grid!important;
  place-items:center!important;
  min-width:17px!important;
  height:17px!important;
  padding:0 4px!important;
  border-radius:999px!important;
  background:#f59e0b!important;
  color:#fff!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 0 0 2px #fff!important;
}
.oc-welfare-nav-badge.overdue{background:#d92d20!important}
@media(max-width:560px){
  .oc-welfare-headsup{
    right:10px!important;
    bottom:76px!important;
    width:calc(100vw - 20px)!important;
    display:grid!important;
    gap:9px!important;
  }
  .oc-welfare-headsup-actions{
    justify-content:flex-end!important;
  }
  .oc-welfare-alert-banner{
    display:grid!important;
    margin:8px 0 0!important;
  }
  .oc-welfare-alert-banner .btn{
    width:100%!important;
  }
  .oc-welfare-modal-backdrop{
    align-items:end!important;
    padding:10px!important;
  }
  .oc-welfare-modal{
    width:100%!important;
    padding:18px 14px 14px!important;
    border-radius:14px 14px 10px 10px!important;
  }
  .oc-welfare-modal h2{font-size:21px!important}
  .oc-welfare-modal-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .oc-welfare-modal-actions .btn{
    width:100%!important;
  }
}


/* 2026-09-25 live test — explicit two-step attendance GPS workflow */
#officer-clock .attendance-action-card{padding-bottom:20px!important}
#officer-clock .attendance-step{display:flex;align-items:flex-start;gap:12px;border:1px solid #dbe5ef;border-radius:10px;padding:12px 13px;margin:14px 0 10px;background:#f8fafc}
#officer-clock .attendance-step-number{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#dfe7ef;color:#455873;font-weight:900;font-size:13px}
#officer-clock .attendance-step b{display:block;color:#0A1A2E;font-size:14px;margin-top:1px}
#officer-clock .attendance-step span:not(.attendance-step-number){display:block;color:#667085;font-size:12px;margin-top:3px;line-height:1.35}
#officer-clock .attendance-step.active{background:#eef8ff;border-color:#9fd4f7}
#officer-clock .attendance-step.active .attendance-step-number{background:#0b78d0;color:#fff}
#officer-clock .attendance-step.complete{background:#ecfdf3;border-color:#abefc6}
#officer-clock .attendance-step.complete .attendance-step-number{background:#027a48;color:#fff}
#officer-clock .attendance-step.locked{opacity:.68}
#officer-clock .attendance-geo-box{margin-top:10px!important}
#officer-clock .attendance-location-actions,#officer-clock .attendance-confirm-actions{display:block!important;width:100%!important;margin-top:12px!important}
#officer-clock .attendance-location-btn,#officer-clock .attendance-confirm-btn{width:100%!important;min-height:54px!important;font-size:15px!important;border-radius:10px!important}
#officer-clock .attendance-location-btn{background:#0878d8!important;color:#fff!important;box-shadow:0 6px 16px rgba(8,120,216,.2)!important}
#officer-clock .attendance-location-btn:not(:disabled):hover{background:#0668bd!important}
#officer-clock .attendance-confirm-btn:disabled{background:#d9e2ec!important;color:#6b778c!important;opacity:1!important}
#officer-clock .attendance-confirm-btn:not(:disabled){background:#0A1A2E!important;color:#fff!important;box-shadow:0 6px 16px rgba(10,26,46,.18)!important}
#officer-clock .attendance-location-help{margin-top:14px;border-top:1px solid #e6edf3;padding-top:12px;color:#52647a;font-size:12px;line-height:1.5}
#officer-clock .attendance-location-help summary{cursor:pointer;font-weight:800;color:#334e68}
@media(max-width:520px){
  #officer-clock .attendance-action-card{padding:16px!important}
  #officer-clock .attendance-location-btn,#officer-clock .attendance-confirm-btn{min-height:58px!important;font-size:16px!important}
  #officer-clock .attendance-step{padding:12px!important}

  /* After GPS is checked, keep the final attendance CTA visible above
     the Officer bottom navigation. */
  #officer-clock.attendance-location-ready .attendance-action-card{padding-bottom:104px!important}
  #officer-clock.attendance-location-ready .attendance-confirm-actions{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    z-index:1001!important;
    width:auto!important;
    margin:0!important;
    padding:8px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid #dbe5ef!important;
    border-radius:12px!important;
    box-shadow:0 -6px 20px rgba(7,24,47,.14)!important;
    backdrop-filter:blur(8px)
  }
  #officer-clock.attendance-location-ready .attendance-confirm-btn{width:100%!important}
}


/* Patrol policy editor stays inside the existing Site Details drawer. */
#manager-sites #siteDetailCard > #sitePatrolCard.site-patrol-in-drawer{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
#manager-sites #siteDetailCard > #sitePatrolCard.site-patrol-in-drawer > .row:first-child{
  position:sticky!important;
  top:-22px!important;
  z-index:3!important;
  margin:0 -22px 14px!important;
  padding:16px 22px!important;
  background:#fff!important;
  border-bottom:1px solid #e4ebf1!important;
}
#manager-sites #siteDetailCard > #sitePatrolCard.site-patrol-in-drawer .field-readonly{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  padding:10px 12px!important;
  border:1px solid #d9e2ea!important;
  border-radius:8px!important;
  background:#f8fafc!important;
  color:#455873!important;
  font-size:13px!important;
}
#manager-sites #siteDetailCard > #sitePatrolCard.site-patrol-in-drawer .grid.grid-2{
  gap:12px!important;
}
#manager-sites #siteDetailCard > #sitePatrolCard.site-patrol-in-drawer .actions{
  flex-wrap:wrap!important;
}
@media(max-width:820px){
  #manager-sites #siteDetailCard > #sitePatrolCard.site-patrol-in-drawer > .row:first-child{
    top:-16px!important;
    margin:0 -16px 12px!important;
    padding:14px 16px!important;
  }
}


/* Patrol checkpoint photo evidence */
.patrol-photo-action{display:grid;gap:6px;margin-top:9px}
.patrol-photo-btn{width:100%;min-height:44px;border-color:#8cb8d8!important;background:#eef8ff!important;color:#0b4f7a!important}
.patrol-photo-btn:not(:disabled):hover{background:#dff1ff!important}
.patrol-photo-ok{display:block;margin-top:7px;color:#027a48;font-size:11px;font-weight:800}
.patrol-photo-evidence{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px;border:1px solid #dce7ee;border-radius:9px;background:#f8fbfd;color:#0b4f7a;text-decoration:none;font-size:11px;font-weight:800;width:max-content;max-width:100%}
.patrol-photo-evidence img{width:92px;height:68px;object-fit:cover;border-radius:7px;border:1px solid #d4e0e8;background:#eef3f6}
.patrol-photo-evidence:hover{border-color:#8cb8d8;background:#eef8ff}
@media(max-width:520px){
  .patrol-photo-btn{min-height:50px;font-size:14px!important}
  .patrol-photo-evidence{width:100%}
  .patrol-photo-evidence img{width:84px;height:64px}
}