/* OpsControl Prototype Gate — Dashboard + Rota + Workforce
   Approved UX/UI implementation brief v1.0 · 21 Sep 2026
   Presentation only: business logic remains in the existing application. */

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

html,body{background:var(--ocp-soft)!important}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  color:var(--ocp-ink)!important;
  font-size:16px!important;
  line-height:1.45!important;
}
*{box-sizing:border-box}

/* Shared application shell */
@media(min-width:821px){
  #app>.topbar{
    height:64px!important;min-height:64px!important;
    margin-left:var(--ocp-sidebar)!important;
    width:calc(100% - var(--ocp-sidebar))!important;
    padding:10px 22px!important;background:#fff!important;
    border-bottom:1px solid var(--ocp-line)!important;
  }
  #app>.shell{
    padding-left:var(--ocp-sidebar)!important;
    width:100%!important;max-width:100vw!important;
  }
  #app #sidebar{
    width:var(--ocp-sidebar)!important;
    background:linear-gradient(180deg,#061a35 0%,#071d3b 100%)!important;
  }
  #app .main{
    width:100%!important;max-width:none!important;
    padding:24px 26px 44px!important;
    background:var(--ocp-soft)!important;
  }
}
.oc-ref-sidebrand{padding:21px 16px 14px!important}
.oc-ref-wordmark{font-size:21px!important;letter-spacing:-.03em!important}
.oc-ref-tagline{font-size:8px!important;letter-spacing:.16em!important}
.oc-ref-tenant{margin:8px 10px 15px!important;padding:10px 11px!important;border-radius:12px!important}
.oc-ref-tenant-copy small{font-size:9px!important}
.oc-ref-tenant-copy b{font-size:13.5px!important}
.oc-ref-tenant-copy span{font-size:10.5px!important}
.oc-ref-group-title{
  font-size:10px!important;letter-spacing:.12em!important;
  color:#86a3c0!important;padding:8px 10px 5px!important;
}
.sidebar .oc-ref-nav button{
  min-height:43px!important;padding:10px 11px!important;
  font-size:14px!important;font-weight:650!important;
  border-radius:9px!important;color:#d9e7f6!important;
}
.sidebar .oc-ref-nav button:hover{background:rgba(255,255,255,.065)!important}
.sidebar .oc-ref-nav button.active{
  background:linear-gradient(90deg,#087cf0,#0a67d6)!important;
  color:#fff!important;box-shadow:none!important;outline:0!important;
}
.oc-ref-nav-icon{width:20px!important;font-size:13px!important;color:#bfe5fb!important}
.oc-ref-footer{font-size:11.5px!important;padding:13px 14px!important}
.oc-ref-footer-row b{font-size:12px!important}

.oc-search{width:min(440px,38vw)!important}
.oc-search input{height:40px!important;font-size:13px!important;border-radius:10px!important}
.workspace-switch{min-height:44px!important;border-radius:11px!important}
.workspace-switch-name{font-size:12.5px!important}
.workspace-switch-label{font-size:9px!important}
.tenant-portal-name{font-size:10px!important}
.role-pill{font-size:11px!important;padding:7px 10px!important}

/* Master type scale from the implementation brief */
.main h1{font-size:32px!important;line-height:1.12!important;font-weight:750!important;letter-spacing:-.025em!important}
.main h2{font-size:23px!important;line-height:1.2!important;font-weight:700!important;letter-spacing:-.015em!important}
.main h3{font-size:17px!important;line-height:1.25!important;font-weight:700!important}
.main p,.main .muted{font-size:15px!important;line-height:1.48!important}
.main .tiny{font-size:12.5px!important;line-height:1.42!important}
.main label{font-size:13.5px!important;font-weight:650!important}
.main input,.main select,.main textarea{font-size:14.5px!important}
.main button,.main .btn{font-size:14px!important;font-weight:650!important}
.main table{font-size:14px!important}
.main table th{font-size:12.5px!important;letter-spacing:.025em!important}
.main table td{font-size:14px!important}
.main .status{font-size:12px!important;font-weight:650!important}
.main .notice{font-size:13px!important}
.card,.stat,.oc-ref-panel,.oc-officer-panel,.oc-today-card{
  border:1px solid var(--ocp-line)!important;
  border-radius:var(--ocp-radius)!important;
  box-shadow:var(--ocp-shadow)!important;
  background:#fff!important;
}
.btn{min-height:40px!important;border-radius:9px!important;padding:9px 14px!important}
.btn-primary{background:var(--ocp-blue)!important;border-color:var(--ocp-blue)!important}
.btn-secondary{background:#eaf5ff!important;color:#075cae!important;border-color:#d7eafb!important}

/* Prototype page headers */
.oc-proto-pagehead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  margin:0 0 18px;padding:0 0 4px;
}
.oc-proto-pagehead .oc-proto-kicker{
  color:var(--ocp-blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;margin-bottom:6px
}
.oc-proto-pagehead h1{margin:0!important}
.oc-proto-pagehead p{margin:5px 0 0!important;color:var(--ocp-muted)!important}
.oc-proto-head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.oc-proto-legacy-head{display:none!important}
.oc-proto-quick{position:relative}
.oc-proto-quick>button{min-width:142px}
.oc-proto-quick-menu{
  display:none;position:absolute;right:0;top:47px;z-index:30;
  min-width:210px;padding:7px;border:1px solid var(--ocp-line);border-radius:11px;background:#fff;
  box-shadow:0 12px 30px rgba(9,32,62,.14)
}
.oc-proto-quick.open .oc-proto-quick-menu{display:grid}
.oc-proto-quick-menu button{
  border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:7px;color:var(--ocp-ink)
}
.oc-proto-quick-menu button:hover{background:#eef6ff}

/* Dashboard prototype */
#manager-dashboard.oc-proto-dashboard{max-width:1500px!important;margin:0 auto!important}
.oc-proto-dashboard .oc-proto-pagehead{align-items:center}
.oc-proto-dashboard-title small{
  display:block;color:var(--ocp-blue);font-size:13px;font-weight:750;margin-bottom:4px
}
.oc-proto-dashboard-title h1{font-size:34px!important;max-width:800px}
.oc-proto-kpi-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;margin:0 0 14px!important
}
.oc-proto-kpi-grid>.stat{
  position:relative;min-height:118px!important;padding:17px 17px 14px!important;
  font-size:13px!important;color:#3e526b!important;overflow:hidden
}
.oc-proto-kpi-grid>.stat b{
  display:block!important;font-size:31px!important;line-height:1!important;
  color:var(--ocp-ink)!important;margin:13px 0 8px!important
}
.oc-proto-kpi-grid>.stat .dashboard-open-hint{font-size:11.5px!important;color:var(--ocp-blue)!important}
.oc-proto-kpi-icon{
  position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;font-size:20px;background:#eef7ff;color:var(--ocp-blue)
}
.oc-proto-kpi-grid>.stat.ocp-danger .oc-proto-kpi-icon{background:#fff0f0;color:var(--ocp-red)}
.oc-proto-kpi-grid>.stat.ocp-warn .oc-proto-kpi-icon{background:#fff7e8;color:var(--ocp-amber)}
.oc-proto-kpi-grid>.stat.ocp-ok .oc-proto-kpi-icon{background:#eafaf3;color:var(--ocp-green)}

.oc-proto-needs-wrap{margin:0 0 14px}
.oc-proto-needs-title{
  display:flex;align-items:center;justify-content:space-between;margin:0 0 8px
}
.oc-proto-needs-title b{font-size:14px}
.oc-proto-needs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px
}
.oc-proto-needs>.stat{
  min-height:74px!important;padding:11px 13px!important;font-size:12px!important;
  box-shadow:none!important;background:#fff!important
}
.oc-proto-needs>.stat b{display:block!important;font-size:21px!important;margin:5px 0 0!important}
.oc-proto-needs .dashboard-open-hint{display:none!important}
.oc-proto-data-stat{display:none!important}

.oc-proto-dashboard #ocRefLiveGrid{
  display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(220px,.55fr) minmax(0,.95fr)!important;
  gap:12px!important;margin:0!important
}
.oc-proto-dashboard #ocRefLiveGrid>.oc-ref-panel{min-height:312px!important}
.oc-proto-dashboard .oc-ref-panel-head{
  min-height:48px!important;padding:12px 14px!important;border-bottom:1px solid var(--ocp-line)!important
}
.oc-proto-dashboard .oc-ref-panel-head b{font-size:15px!important}
.oc-proto-dashboard .oc-ref-panel-head button{font-size:12px!important;color:var(--ocp-blue)!important}
.oc-proto-map-canvas{
  height:263px;position:relative;overflow:hidden;
  background:
    linear-gradient(27deg,transparent 46%,rgba(147,182,207,.35) 47%,rgba(147,182,207,.35) 49%,transparent 50%) 0 0/96px 72px,
    linear-gradient(-20deg,transparent 47%,rgba(171,199,216,.35) 48%,rgba(171,199,216,.35) 50%,transparent 51%) 0 0/126px 94px,
    #edf4f3
}
.oc-proto-map-canvas:before,.oc-proto-map-canvas:after{
  content:"";position:absolute;background:rgba(116,173,210,.22);border-radius:999px;transform:rotate(-12deg)
}
.oc-proto-map-canvas:before{width:115%;height:12px;left:-8%;top:41%}
.oc-proto-map-canvas:after{width:85%;height:8px;left:12%;top:68%;transform:rotate(19deg)}
.oc-proto-map-city{position:absolute;left:48%;top:53%;font-size:13px;font-weight:800;color:#51697c}
.oc-proto-map-pin{
  position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--ocp-blue);border:3px solid #fff;box-shadow:0 3px 7px rgba(0,0,0,.18);z-index:2
}
.oc-proto-map-pin.p1{left:18%;top:63%}.oc-proto-map-pin.p2{left:41%;top:41%;background:var(--ocp-green)}
.oc-proto-map-pin.p3{left:67%;top:66%;background:var(--ocp-red)}.oc-proto-map-pin.p4{left:73%;top:27%;background:var(--ocp-green)}
.oc-proto-map-key{
  position:absolute;right:12px;bottom:10px;display:grid;gap:5px;padding:8px 9px;background:rgba(255,255,255,.93);
  border:1px solid var(--ocp-line);border-radius:9px;font-size:10.5px;color:#455a70;z-index:3
}
.oc-proto-map-key span:before{content:"●";margin-right:6px;color:var(--ocp-green)}
.oc-proto-map-key span:nth-child(2):before{color:var(--ocp-blue)}
.oc-proto-map-key span:nth-child(3):before{color:var(--ocp-red)}

.oc-proto-coverage-panel{display:flex;flex-direction:column}
.oc-proto-coverage-body{display:grid;place-items:center;flex:1;padding:16px}
.oc-proto-donut{
  --pct:0;position:relative;width:138px;height:138px;border-radius:50%;
  background:conic-gradient(var(--ocp-green) calc(var(--pct)*1%),#e9eef4 0);
  display:grid;place-items:center
}
.oc-proto-donut:after{content:"";position:absolute;width:94px;height:94px;border-radius:50%;background:#fff}
.oc-proto-donut strong,.oc-proto-donut small{position:relative;z-index:2;text-align:center}
.oc-proto-donut strong{font-size:30px;line-height:1;color:var(--ocp-ink)}
.oc-proto-donut small{font-size:10.5px;color:var(--ocp-muted);margin-top:-22px}
.oc-proto-coverage-copy{text-align:center;margin-top:13px}
.oc-proto-coverage-copy b{display:block;font-size:14px}
.oc-proto-coverage-copy span{display:block;font-size:11.5px;color:var(--ocp-muted);margin-top:3px}

.oc-proto-dashboard #ocRefActivity{padding:4px 14px 10px!important}
.oc-proto-dashboard .oc-ref-activity-row{
  grid-template-columns:46px 10px 1fr!important;gap:9px!important;
  padding:11px 0!important;font-size:11.5px!important
}
.oc-proto-dashboard .oc-ref-activity-row b{font-size:12px!important}
.oc-proto-dashboard .oc-ref-activity-row span{font-size:10.5px!important}
.oc-proto-dashboard #ocRefControlBottom{display:none!important}
.oc-proto-dashboard>.grid.grid-2{display:none!important}

/* Rota prototype */
#manager-rota.oc-proto-rota{max-width:1500px!important;margin:0 auto!important}
.oc-proto-rota>.card.oc-proto-rota-card{padding:0!important;overflow:hidden}
.oc-proto-rota-card .week-toolbar{padding:18px 18px 13px!important}
.oc-proto-rota-card .week-toolbar h2{font-size:20px!important;margin:0 0 3px!important}
.oc-proto-rota-card .week-label{font-size:14px!important;font-weight:650!important}
.oc-proto-rota-card>.hr{margin:0!important}
.oc-proto-rota-coverage{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:14px 18px;
  border-bottom:1px solid var(--ocp-line);background:#fbfdff
}
.oc-proto-day-summary{
  min-height:100px;padding:10px;border:1px solid var(--ocp-line);border-radius:11px;background:#fff;
  display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center
}
.oc-proto-day-summary b{font-size:13px}.oc-proto-day-summary small{font-size:10.5px;color:var(--ocp-muted)}
.oc-proto-day-ring{
  --p:0;width:44px;height:44px;border-radius:50%;grid-row:1/3;grid-column:2;
  background:conic-gradient(var(--ring,var(--ocp-green)) calc(var(--p)*1%),#e8eef4 0);
  display:grid;place-items:center;font-size:9px;font-weight:800;color:var(--ocp-ink);position:relative
}
.oc-proto-day-ring:after{content:"";position:absolute;width:31px;height:31px;background:#fff;border-radius:50%}
.oc-proto-day-ring span{position:relative;z-index:1}
.oc-proto-day-summary.warn{--ring:var(--ocp-amber)}.oc-proto-day-summary.danger{--ring:var(--ocp-red)}
.oc-proto-day-summary .oc-proto-day-state{grid-column:1/3;font-size:10px;font-weight:700;color:#4d6077}
.oc-proto-rota .rota-filters{
  display:none!important;padding:14px 18px 6px!important;margin:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto!important
}
.oc-proto-rota.oc-proto-filters-open .rota-filters{display:grid!important}
.oc-proto-rota .filter-note{display:none!important}
.oc-proto-rota #rotaSummary{padding:10px 18px 12px!important;gap:8px!important}
.oc-proto-rota #rotaSummary .mini-stat{padding:10px 12px!important;border-radius:10px!important}
.oc-proto-rota #rotaSummary .mini-stat span{font-size:10.5px!important}
.oc-proto-rota #rotaSummary .mini-stat b{font-size:20px!important}
.oc-proto-rota .week-scroll{padding:0 18px 18px!important}
.oc-proto-rota .week-grid{gap:9px!important}
.oc-proto-rota .day-column{
  border:1px solid var(--ocp-line)!important;border-radius:11px!important;background:#f8fbfe!important;padding:10px!important
}
.oc-proto-rota .day-column.today{border:2px solid var(--ocp-blue)!important;background:#f1f9ff!important}
.oc-proto-rota .day-head b{font-size:14px!important}.oc-proto-rota .day-head span{font-size:11.5px!important}
.oc-proto-rota .shift-card{
  border:1px solid #dce6ef!important;border-radius:10px!important;padding:10px!important;background:#fff!important;box-shadow:none!important
}
.oc-proto-rota .shift-time{font-size:13px!important}.oc-proto-rota .shift-officer{font-size:14px!important}
.oc-proto-rota .shift-site{font-size:12px!important}
.oc-proto-more-actions{position:relative!important;margin-top:8px!important;display:flex!important;justify-content:flex-end!important}
.oc-proto-more-actions>.oc-proto-more-button{
  width:34px!important;height:32px!important;min-height:32px!important;padding:0!important;border:1px solid var(--ocp-line)!important;
  background:#fff!important;color:var(--ocp-ink)!important;border-radius:8px!important
}
.oc-proto-shift-menu{
  display:none;position:absolute;right:0;top:36px;z-index:20;min-width:150px;padding:6px;
  border:1px solid var(--ocp-line);border-radius:9px;background:#fff;box-shadow:0 10px 24px rgba(16,45,78,.14)
}
.oc-proto-more-actions.open .oc-proto-shift-menu{display:grid}
.oc-proto-shift-menu .btn{display:block!important;width:100%!important;text-align:left!important;margin:0!important;border:0!important;background:transparent!important;color:var(--ocp-ink)!important}
.oc-proto-shift-menu .btn:hover{background:#eff7ff!important}
.oc-proto-filter-button.active{background:#eaf5ff!important;color:#075cae!important}

/* Workforce prototype */
#manager-employees{max-width:1500px!important;margin:0 auto!important}
.oc-workforce-head{padding:0 0 14px!important;border:0!important;background:transparent!important;box-shadow:none!important}
.oc-workforce-head .oc-screen-kicker{font-size:12px!important;letter-spacing:.11em!important}
.oc-workforce-head h1{font-size:32px!important}
.oc-workforce-head p{font-size:15px!important}
.oc-workforce-head .btn-outline{display:none!important}
.oc-workforce-tabs{
  margin:0 0 12px!important;border:0!important;border-bottom:1px solid var(--ocp-line)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important
}
.oc-workforce-tab{
  min-height:44px!important;padding:10px 14px!important;font-size:13.5px!important;border-radius:0!important
}
.oc-workforce-tab.active{background:transparent!important;box-shadow:inset 0 -3px 0 var(--ocp-blue)!important;color:#076bc7!important}
.oc-workforce-hint{font-size:12.5px!important;min-height:42px!important;padding:10px 12px!important;margin-bottom:14px!important}
.oc-workforce-layout{grid-template-columns:minmax(0,1fr) 300px!important;gap:14px!important}
.oc-common-title,.oc-actions-title{font-size:14px!important;margin-bottom:8px!important}
.oc-common-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;margin-bottom:14px!important}
.oc-task-card{
  min-height:118px!important;padding:13px!important;border-radius:11px!important;box-shadow:none!important;
  border:1px solid var(--ocp-line)!important;background:#fff!important
}
.oc-task-icon{width:36px!important;height:36px!important;font-size:17px!important}
.oc-task-card b{font-size:13.5px!important}.oc-task-card>span:last-child{font-size:11.5px!important}
.oc-officer-panel{overflow:hidden!important}
.oc-officer-toolbar{padding:12px 13px!important}
.oc-toolbar-top h2{font-size:17px!important}
.oc-filter-chip{font-size:11.5px!important;min-height:34px!important}
.oc-officer-search input{height:35px!important;font-size:12.5px!important}
.oc-workforce-table th{padding:10px 12px!important;font-size:11px!important}
.oc-workforce-table td{padding:10px 12px!important;font-size:13px!important}
.oc-workforce-person b{font-size:13px!important}
.oc-workforce-person small{font-size:10.5px!important}
.oc-today-card{overflow:hidden!important}
.oc-today-head{padding:12px 13px!important}
.oc-today-head b{font-size:14px!important}.oc-today-head span{font-size:10.5px!important}
.oc-action-row{font-size:12px!important;padding:12px 13px!important}
.oc-action-count{font-size:13px!important}
.oc-workforce-table .oc-assignment-main{display:block;font-weight:650;color:var(--ocp-ink)}
.oc-workforce-table .oc-assignment-sub{display:block;font-size:10.5px;color:var(--ocp-muted);margin-top:2px}
.oc-workforce-table .oc-row-actions .btn{min-width:36px!important;height:34px!important;min-height:34px!important;padding:0 9px!important}

/* Responsive prototype gate */
@media(max-width:1230px) and (min-width:821px){
  :root{--ocp-sidebar:205px}
  .oc-proto-dashboard #ocRefLiveGrid{grid-template-columns:1.2fr .65fr!important}
  .oc-proto-dashboard #ocRefLiveGrid>.oc-ref-panel:last-child{grid-column:1/3}
  .oc-workforce-layout{grid-template-columns:1fr!important}
  .oc-workforce-layout aside{display:none}
  .oc-common-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .oc-proto-rota-coverage{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px) and (min-width:821px){
  .oc-proto-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .oc-proto-needs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  body{font-size:15px!important}
  #app .main{padding:16px 14px 36px!important}
  .oc-proto-pagehead{align-items:flex-start;flex-direction:column}
  .oc-proto-kpi-grid,.oc-proto-needs{grid-template-columns:1fr 1fr!important}
  .oc-proto-dashboard #ocRefLiveGrid{grid-template-columns:1fr!important}
  .oc-proto-dashboard #ocRefLiveGrid>.oc-ref-panel:last-child{grid-column:auto}
  .oc-proto-rota-coverage{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}
  .oc-proto-rota .week-toolbar{padding:14px!important}
  .oc-proto-rota .week-nav{width:100%;justify-content:flex-start!important}
  .oc-proto-rota .rota-filters{grid-template-columns:1fr!important}
  .oc-proto-rota .week-scroll{padding:0 12px 12px!important}
  .oc-workforce-layout{grid-template-columns:1fr!important}
  .oc-workforce-layout aside{display:none}
  .oc-common-grid{grid-template-columns:1fr 1fr!important}
}


/* Prototype gate conflict fixes — override legacy Phase 3/reference selectors */
#manager-dashboard.oc-ref-control-room.oc-proto-dashboard>.oc-proto-pagehead,
#manager-rota.oc-proto-rota>.oc-proto-pagehead{
  display:flex!important;
}
#manager-dashboard.oc-proto-dashboard>.oc-ops-header,
#manager-dashboard.oc-proto-dashboard>.oc-ops-tabs,
#manager-rota.oc-proto-rota>.oc-ops-header,
#manager-rota.oc-proto-rota>.oc-ops-tabs,
#manager-dashboard.oc-proto-dashboard>.oc-proto-legacy-head,
#manager-rota.oc-proto-rota>.oc-proto-legacy-head{
  display:none!important;
}
#manager-dashboard.oc-ref-control-room.oc-proto-dashboard>.grid.grid-4.oc-proto-kpi-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;margin:0 0 14px!important;
}
#manager-dashboard.oc-ref-control-room.oc-proto-dashboard>.grid.grid-4.oc-proto-kpi-grid>.stat{
  display:block!important;min-height:118px!important;padding:17px 17px 14px!important;
  font-size:13px!important;
}
#manager-dashboard.oc-ref-control-room.oc-proto-dashboard>.grid.grid-4.oc-proto-kpi-grid>.stat b{
  font-size:31px!important;margin:13px 0 8px!important;
}
#manager-dashboard.oc-ref-control-room.oc-proto-dashboard .dashboard-open-hint{
  font-size:11.5px!important;
}
#manager-dashboard.oc-proto-dashboard>.oc-proto-needs-wrap{display:block!important}
#manager-dashboard.oc-proto-dashboard>.oc-proto-needs-wrap .stat{
  display:block!important;font-size:12.5px!important;padding:12px 14px!important;
}
#manager-dashboard.oc-proto-dashboard>.oc-proto-needs-wrap .stat b{
  font-size:22px!important;margin:6px 0 0!important;
}

#manager-rota.oc-proto-rota:not(.oc-proto-filters-open) .rota-filters{
  display:none!important;
}
#manager-rota.oc-proto-rota.oc-proto-filters-open .rota-filters{
  display:grid!important;
}
.oc-proto-day-summary>div:first-child b,
.oc-proto-day-summary>div:first-child small{display:block!important}
.oc-proto-day-summary>div:first-child b{font-size:14px!important;line-height:1.2!important}
.oc-proto-day-summary>div:first-child small{font-size:11px!important;margin-top:3px!important}
.oc-proto-day-summary .oc-proto-day-state{font-size:10.5px!important;line-height:1.3!important}

#manager-employees .oc-workforce-table td{font-size:14px!important}
#manager-employees .oc-workforce-table th{font-size:12px!important}
#manager-employees .oc-workforce-person b{font-size:13.5px!important}
#manager-employees .oc-workforce-person small{font-size:11px!important}
#manager-employees .oc-action-row{font-size:12.5px!important}
#sidebar .oc-ref-nav button{font-size:14.5px!important}


/* Final prototype Dashboard owns presentation while legacy nodes remain as hidden live data sources. */
#manager-dashboard.oc-proto-dashboard>#ocProtoDashboardSurface{
  display:block!important;width:100%!important;max-width:1500px!important;margin:0 auto!important;
}
#manager-dashboard.oc-proto-dashboard>:not(#ocProtoDashboardSurface){display:none!important}
#ocProtoDashboardSurface .oc-proto-pagehead{display:flex!important;margin-bottom:16px!important}
#ocProtoDashboardSurface .oc-proto-pagehead h1{font-size:34px!important}
#ocProtoDashboardSurface .oc-proto-kpi-grid{margin-bottom:14px!important}
#ocProtoDashboardSurface .oc-proto-livegrid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.55fr) minmax(0,.95fr);
  gap:12px;margin-bottom:14px
}
#ocProtoDashboardSurface .oc-proto-livegrid>.oc-ref-panel{min-height:312px}
#ocProtoDashboardSurface .oc-proto-needs{margin-top:0!important}
#ocProtoDashboardSurface .oc-proto-needs-card{
  min-height:82px;padding:13px 14px;border:1px solid var(--ocp-line);border-radius:var(--ocp-radius);background:#fff
}
#ocProtoDashboardSurface .oc-proto-needs-card span{display:block;font-size:12px;color:#40556e}
#ocProtoDashboardSurface .oc-proto-needs-card strong{display:block;font-size:23px;line-height:1;margin-top:8px;color:var(--ocp-ink)}
#ocProtoDashboardSurface .oc-proto-needs-card small{display:block;margin-top:7px;font-size:10.5px;color:var(--ocp-muted)}
#ocProtoDashboardSurface .oc-proto-kpi-card{
  position:relative;min-height:118px;padding:17px;border:1px solid var(--ocp-line);border-radius:var(--ocp-radius);background:#fff
}
#ocProtoDashboardSurface .oc-proto-kpi-card>span{display:block;font-size:13px;color:#40556e}
#ocProtoDashboardSurface .oc-proto-kpi-card>strong{display:block;font-size:31px;line-height:1;margin:13px 0 9px;color:var(--ocp-ink)}
#ocProtoDashboardSurface .oc-proto-kpi-card>a,
#ocProtoDashboardSurface .oc-proto-kpi-card>button,
#ocProtoDashboardSurface .oc-proto-needs-card button{border:0;background:transparent;padding:0;font:inherit;font-size:11.5px;font-weight:700;color:var(--ocp-blue);cursor:pointer;text-align:left}
#ocProtoDashboardSurface .oc-proto-kpi-card .oc-proto-kpi-icon{position:absolute}
#ocProtoDashboardSurface .oc-proto-activity{padding:4px 14px 10px}
#ocProtoDashboardSurface .oc-proto-activity-row{
  display:grid;grid-template-columns:10px minmax(0,1fr);gap:9px;align-items:start;padding:11px 0;border-bottom:1px solid #edf1f5
}
#ocProtoDashboardSurface .oc-proto-activity-row:last-child{border-bottom:0}
#ocProtoDashboardSurface .oc-proto-activity-row i{width:8px;height:8px;border-radius:50%;background:var(--ocp-blue);margin-top:5px}
#ocProtoDashboardSurface .oc-proto-activity-heading{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
#ocProtoDashboardSurface .oc-proto-activity-heading b{display:inline;font-size:12px;line-height:1.35}
#ocProtoDashboardSurface .oc-proto-activity-row .oc-proto-activity-badge{
  display:inline-flex!important;margin:0!important;font-size:9.5px!important;line-height:1.2!important;padding:3px 6px!important;flex:0 0 auto
}
#ocProtoDashboardSurface .oc-proto-activity-row .oc-proto-activity-detail{
  display:block;font-size:10.5px;color:var(--ocp-muted);line-height:1.4;margin-top:4px
}

@media(max-width:1230px) and (min-width:821px){
  #ocProtoDashboardSurface .oc-proto-livegrid{grid-template-columns:1.2fr .65fr}
  #ocProtoDashboardSurface .oc-proto-livegrid>.oc-ref-panel:last-child{grid-column:1/3}
}
@media(max-width:820px){
  #ocProtoDashboardSurface .oc-proto-livegrid{grid-template-columns:1fr}
  #ocProtoDashboardSurface .oc-proto-livegrid>.oc-ref-panel:last-child{grid-column:auto}
}

/* The older canonical decorator injects its own OPSC0NTROL kicker before h1 elements. The approved prototype owns its page kicker. */
.oc-proto-pagehead .oc-screen-kicker{display:none!important}


/* Phase 1 Workforce action-column correction */
#manager-employees .oc-workforce-table{
  table-layout:fixed!important;
  min-width:980px!important;
}
#manager-employees .oc-workforce-table .oc-col-officer{width:29%!important}
#manager-employees .oc-workforce-table .oc-col-status{width:14%!important}
#manager-employees .oc-workforce-table .oc-col-compliance{width:15%!important}
#manager-employees .oc-workforce-table .oc-col-availability{width:12%!important}
#manager-employees .oc-workforce-table .oc-col-assignment{width:18%!important}
#manager-employees .oc-workforce-table .oc-col-actions{width:12%!important;min-width:126px!important}
#manager-employees .oc-workforce-table th.oc-actions-heading{
  text-align:right!important;
  padding-right:14px!important;
  white-space:nowrap!important;
}
#manager-employees .oc-workforce-table td.oc-actions-cell{
  width:126px!important;
  min-width:126px!important;
  padding-left:8px!important;
  padding-right:12px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
#manager-employees .oc-row-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  width:100%!important;
  min-width:112px!important;
  white-space:nowrap!important;
}
#manager-employees .oc-row-actions .oc-row-view,
#manager-employees .oc-row-actions .oc-row-more{
  appearance:none!important;
  border:1px solid #cfdbe7!important;
  background:#fff!important;
  color:#0b294d!important;
  height:34px!important;
  min-height:34px!important;
  border-radius:8px!important;
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
#manager-employees .oc-row-actions .oc-row-view{
  min-width:58px!important;
  padding:0 12px!important;
}
#manager-employees .oc-row-actions .oc-row-more{
  width:38px!important;
  min-width:38px!important;
  padding:0!important;
  letter-spacing:1px!important;
}
#manager-employees .oc-row-actions .oc-row-view:hover,
#manager-employees .oc-row-actions .oc-row-more:hover{
  border-color:#8dc5f5!important;
  background:#eef7ff!important;
  color:#076bc7!important;
}
#manager-employees .oc-row-actions .oc-row-view:focus-visible,
#manager-employees .oc-row-actions .oc-row-more:focus-visible{
  outline:2px solid #0b91ee!important;
  outline-offset:2px!important;
}
@media(max-width:1180px) and (min-width:821px){
  #manager-employees .oc-workforce-table{min-width:1020px!important}
}


/* Workforce 100% zoom correction — preserve Actions column at standard desktop widths */
#manager-employees .oc-workforce-table{
  table-layout:fixed!important;
  width:100%!important;
  min-width:900px!important;
}
#manager-employees .oc-workforce-table th:nth-child(1),
#manager-employees .oc-workforce-table td:nth-child(1){width:27%!important}
#manager-employees .oc-workforce-table th:nth-child(2),
#manager-employees .oc-workforce-table td:nth-child(2){width:15%!important}
#manager-employees .oc-workforce-table th:nth-child(3),
#manager-employees .oc-workforce-table td:nth-child(3){width:15%!important}
#manager-employees .oc-workforce-table th:nth-child(4),
#manager-employees .oc-workforce-table td:nth-child(4){width:11%!important}
#manager-employees .oc-workforce-table th:nth-child(5),
#manager-employees .oc-workforce-table td:nth-child(5){width:19%!important}
#manager-employees .oc-workforce-table th:nth-child(6),
#manager-employees .oc-workforce-table td:nth-child(6){
  width:13%!important;
  min-width:122px!important;
  white-space:nowrap!important;
  text-align:right!important;
}
#manager-employees .oc-row-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  width:100%!important;
  min-width:98px!important;
  white-space:nowrap!important;
}
#manager-employees .oc-row-actions .btn:first-child{
  width:auto!important;
  min-width:54px!important;
  padding:0 11px!important;
}
#manager-employees .oc-row-actions .btn:last-child{
  flex:0 0 34px!important;
  width:34px!important;
  min-width:34px!important;
  padding:0!important;
}
#manager-employees .oc-workforce-person{
  min-width:0!important;
}
#manager-employees .oc-workforce-person>div:last-child,
#manager-employees .oc-workforce-person b,
#manager-employees .oc-workforce-person small{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* At ordinary laptop/desktop widths, give the officer table priority over the
   auxiliary Today's actions rail. The rail remains visible below the table. */
@media(max-width:1600px) and (min-width:821px){
  #manager-employees .oc-workforce-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #manager-employees .oc-workforce-layout>aside{
    display:block!important;
    order:2!important;
  }
  #manager-employees .oc-today-card{
    margin-top:12px!important;
  }
  #manager-employees .oc-today-card .oc-action-row{
    grid-template-columns:24px 28px minmax(0,1fr) 18px!important;
  }
}


/* Full-QA desktop viewport hardening — 100% browser zoom */
#manager-employees .oc-workforce-main,
#manager-employees .oc-officer-panel,
#manager-employees #ocWorkforceTable,
#manager-employees .oc-workforce-table-wrap{
  min-width:0!important;
  max-width:100%!important;
}
#manager-employees .oc-workforce-table-wrap{
  width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
#manager-employees .oc-workforce-table{
  width:100%!important;
  min-width:900px!important;
}

/* Keep the action rail below the workforce table on ordinary desktop/laptop
   viewports. This gives the six-column table the full workspace width at
   standard 100% browser zoom, instead of relying on users reducing zoom. */
@media(min-width:821px) and (max-width:1800px){
  #manager-employees .oc-workforce-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #manager-employees .oc-workforce-layout>aside{
    display:block!important;
    order:2!important;
    min-width:0!important;
  }
  #manager-employees .oc-today-card{
    margin-top:12px!important;
  }
}

/* At common 1366px laptop widths the table must remain fully usable at 100%
   zoom. Horizontal scrolling remains a last-resort safety net only if the
   browser viewport is narrower than the supported desktop width. */
@media(min-width:821px) and (max-width:1366px){
  #manager-employees .oc-workforce-table{
    min-width:880px!important;
  }
  #manager-employees .oc-workforce-table th,
  #manager-employees .oc-workforce-table td{
    padding-left:9px!important;
    padding-right:9px!important;
  }
  #manager-employees .oc-row-actions .oc-row-view{
    min-width:52px!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }
}

/* PGFM live-test density correction: approved Dashboard surface at 100% desktop zoom.
   Keep the established workspace type scale and sidebar unchanged; compress only the
   attention header, first KPI row and its Quick Action control. */
@media(min-width:821px){
  #ocProtoDashboardSurface .oc-proto-pagehead{
    margin-bottom:10px!important;
    padding-bottom:0!important;
    gap:16px!important;
  }
  #ocProtoDashboardSurface .oc-proto-dashboard-title small{
    margin-bottom:2px!important;
    font-size:12.5px!important;
  }
  #ocProtoDashboardSurface .oc-proto-pagehead h1{
    font-size:29px!important;
    line-height:1.12!important;
  }
  #ocProtoDashboardSurface .oc-proto-dashboard-title p{
    margin:3px 0 0!important;
    font-size:14px!important;
  }
  #ocProtoDashboardSurface .oc-proto-kpi-grid{
    gap:10px!important;
    margin-bottom:12px!important;
  }
  #ocProtoDashboardSurface .oc-proto-kpi-card{
    min-height:92px!important;
    padding:12px 14px!important;
  }
  #ocProtoDashboardSurface .oc-proto-kpi-card>span{
    font-size:14px!important;
  }
  #ocProtoDashboardSurface .oc-proto-needs-card>span{
    font-size:14px!important;
  }
  #ocProtoDashboardSurface .oc-proto-kpi-card>strong{
    font-size:28px!important;
    margin:7px 0 5px!important;
  }
  #ocProtoDashboardSurface .oc-proto-kpi-card .oc-proto-kpi-icon{
    right:12px!important;
    top:12px!important;
    width:36px!important;
    height:36px!important;
    border-radius:10px!important;
    font-size:17px!important;
  }
  #ocProtoDashboardSurface .oc-proto-quick>button{
    min-width:128px!important;
    min-height:34px!important;
    padding:7px 11px!important;
    font-size:13px!important;
  }
  #ocProtoDashboardSurface .oc-proto-quick-menu{
    top:40px!important;
  }
}


/* Live operational dashboard map — replaces the previous decorative map mock-up. */
.oc-proto-map-shell{height:263px;position:relative;overflow:hidden;background:#edf4f3}
.oc-proto-live-map{width:100%;height:100%;min-height:263px;background:#edf4f3;z-index:1}
.oc-proto-live-map .leaflet-control-attribution{font-size:8px}
.oc-proto-live-map .leaflet-control-zoom a{font-size:16px}
.oc-proto-map-shell>.oc-proto-map-key{z-index:500;pointer-events:none}
.oc-proto-map-note{
  position:absolute;left:10px;bottom:9px;z-index:500;max-width:62%;
  padding:6px 8px;border:1px solid rgba(206,218,228,.95);border-radius:8px;
  background:rgba(255,255,255,.94);color:#526579;font-size:9.5px;line-height:1.3;pointer-events:none
}
.oc-proto-map-empty{
  height:100%;display:grid;place-content:center;gap:5px;text-align:center;padding:20px;color:#566b7e;background:#f4f7f9
}
.oc-proto-map-empty b{color:#0b2b5b;font-size:13px}
.oc-proto-map-empty span{font-size:11px}
.oc-live-map-popup{display:grid;gap:6px;min-width:190px;color:#1f2a44}
.oc-live-map-popup>b{font-size:14px;color:#0a1a2e}
.oc-live-map-status{font-size:11px;font-weight:800}
.oc-live-map-shift{display:flex;justify-content:space-between;gap:10px;font-size:11px;border-top:1px solid #edf1f4;padding-top:5px}
.oc-live-map-shift span{color:#667085}
.oc-live-map-popup button{
  border:0;border-radius:7px;background:#0b78d0;color:#fff;padding:7px 9px;font-weight:800;cursor:pointer
}
.oc-live-map-popup small{color:#7a8795;font-size:9px}
.oc-live-map-modal-backdrop{
  position:fixed;inset:0;z-index:1800;display:none;place-items:center;padding:24px;
  background:rgba(4,22,42,.62);backdrop-filter:blur(2px)
}
.oc-live-map-modal-backdrop.open{display:grid}
.oc-live-map-modal{
  width:min(1180px,96vw);height:min(820px,92vh);display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:#fff;border-radius:16px;border:1px solid #dce5ec;box-shadow:0 24px 70px rgba(6,26,51,.35);overflow:hidden
}
.oc-live-map-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #e4ebf1
}
.oc-live-map-modal-head small{display:block;color:#0878d8;font-size:10px;font-weight:900;letter-spacing:.11em;margin-bottom:4px}
.oc-live-map-modal-head h2{margin:0 0 4px;font-size:24px}
.oc-live-map-modal-head p{margin:0;color:#667085;font-size:12px}
.oc-live-map-full{width:100%;height:100%;min-height:420px;background:#eef3f5}
.oc-live-map-full .leaflet-control-attribution{font-size:9px}
.oc-live-map-modal-key{display:flex;gap:18px;flex-wrap:wrap;padding:11px 20px;border-top:1px solid #e4ebf1;background:#f8fafc;font-size:11px;font-weight:800;color:#4d6174}
.oc-live-map-modal-key span:before{content:"●";margin-right:6px}
.oc-live-map-modal-key .on:before{color:#12a66a}
.oc-live-map-modal-key .scheduled:before{color:#1688e8}
.oc-live-map-modal-key .issue:before{color:#d92d20}
body.oc-live-map-open{overflow:hidden}
@media(max-width:700px){
  .oc-proto-map-note{max-width:70%;font-size:8.5px}
  .oc-live-map-modal-backdrop{padding:8px}
  .oc-live-map-modal{width:100%;height:96vh;border-radius:12px}
  .oc-live-map-modal-head{padding:13px;align-items:center}
  .oc-live-map-modal-head h2{font-size:20px}
  .oc-live-map-modal-head p{font-size:10px}
  .oc-live-map-full{min-height:320px}
  .oc-live-map-modal-key{padding:9px 12px;gap:10px;font-size:10px}
}