/* OpsControl canonical UI — Phase 4 Officer + Client */
#officer-shifts.oc-officer-canonical{padding-bottom:78px}
#officer-shifts.oc-officer-canonical>div:first-child{margin-bottom:12px!important}
.oc-officer-focus{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;background:linear-gradient(135deg,#07182f,#0d2d53);color:#fff;border-radius:14px;padding:16px 18px;margin:0 0 14px;box-shadow:0 12px 28px rgba(7,24,47,.18)}
.oc-officer-focus .oc-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#92cdec;font-weight:900}
.oc-officer-focus h2{color:#fff!important;margin:5px 0 4px;font-size:21px}
.oc-officer-focus p{margin:0;color:#c7d8e9;font-size:11px}
.oc-officer-focus-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px}
.oc-officer-focus .status{border-color:rgba(255,255,255,.12)!important}
.oc-officer-focus-actions{display:grid;gap:7px;min-width:150px}
.oc-officer-focus-actions .btn{width:100%}
.oc-officer-home-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px}
.oc-officer-quick{display:grid;gap:8px}
.oc-officer-quick-card{border:1px solid var(--oc-border);border-radius:10px;background:#fff;padding:11px 12px;box-shadow:var(--oc-shadow-soft);font-size:11px;color:#3f526c}
.oc-officer-quick-card b{display:block;color:var(--oc-text);font-size:12px;margin-bottom:3px}
.officer-view-toolbar{background:#fff!important;border:1px solid var(--oc-border)!important;border-radius:10px!important;padding:9px!important;box-shadow:var(--oc-shadow-soft)!important;margin-bottom:10px!important}
.officer-shift-card{box-shadow:none!important;border-radius:10px!important}
.officer-shift-card.current{border-color:#8fd3f5!important;box-shadow:inset 3px 0 0 var(--oc-blue)!important}
.officer-screen>.card:first-of-type{margin-top:8px!important}
.officer-screen .card{border-radius:11px!important}
#officer-details .actions{gap:7px!important}
#officer-details .officer-pack-grid{gap:10px!important}
.oc-officer-bottom-nav{display:none}
body.officer-mode .main{padding-top:14px!important}

#client-portal.oc-client-canonical{padding-top:0!important}
#client-portal.oc-client-canonical .client-portal-hero{margin:-2px 0 0!important;border-radius:14px 14px 0 0!important;min-height:auto!important}
#client-portal.oc-client-canonical .client-portal-hero-inner{padding:18px 20px!important}
#client-portal.oc-client-canonical .client-context-bar{margin:0!important;border-radius:0 0 12px 12px!important;border-top:0!important}
.oc-client-tabs{display:flex;gap:3px;align-items:center;overflow:auto;margin:12px 0;background:#fff;border:1px solid var(--oc-border);border-radius:10px;padding:5px 7px;box-shadow:var(--oc-shadow-soft);position:sticky;top:82px;z-index:8}
.oc-client-tabs button{border:0;background:transparent;color:#4b5f78;padding:8px 10px;border-radius:7px;font-weight:750;font-size:10px;white-space:nowrap;min-height:36px}
.oc-client-tabs button.active{background:#eaf5ff;color:#0873b7}
.oc-client-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 12px}
.oc-client-overview-card{background:#fff;border:1px solid var(--oc-border);border-radius:10px;padding:12px;box-shadow:var(--oc-shadow-soft)}
.oc-client-overview-card span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--oc-muted);font-weight:800}
.oc-client-overview-card b{display:block;font-size:22px;margin:5px 0 2px;color:var(--oc-text)}
.oc-client-overview-card small{font-size:9px;color:var(--oc-muted)}
.oc-client-shortcuts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 12px}
.oc-client-shortcut{border:1px solid var(--oc-border);background:#fff;border-radius:9px;padding:10px;text-align:left;font-size:10px;color:#4b5f78;min-height:70px;box-shadow:var(--oc-shadow-soft)}
.oc-client-shortcut b{display:block;font-size:11px;color:var(--oc-text);margin-bottom:4px}
.oc-client-shortcut:hover{border-color:#acdafa;background:#f8fcff}
#client-portal.oc-client-canonical>.card{margin-top:10px!important}
#client-portal.oc-client-canonical>.card.oc-client-section-hidden,
#client-portal.oc-client-canonical>#clientPortalSummary.oc-client-section-hidden{display:none!important}
#clientPortalSummary{margin-top:10px!important}
#client-portal .client-portal-toolbar{gap:8px!important;align-items:end!important}
#client-portal .client-portal-toolbar .field{margin:0!important}
#client-portal .client-site-grid,#client-portal .client-report-grid,#client-portal .client-commercial-grid{gap:10px!important}

@media(max-width:1050px){
 .oc-officer-home-grid{grid-template-columns:1fr}.oc-officer-quick{grid-template-columns:repeat(3,1fr)}
 .oc-client-overview{grid-template-columns:repeat(2,1fr)}.oc-client-shortcuts{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
 .oc-client-tabs{top:70px}
}
@media(max-width:560px){
 body.officer-mode .topbar{min-height:56px!important;padding:7px 9px!important}
 body.officer-mode .shell{min-height:calc(100vh - 56px)!important}
 body.officer-mode .main{padding:8px 8px 82px!important}
 #officer-shifts.oc-officer-canonical>div:first-child{display:none!important}
 .oc-officer-focus{grid-template-columns:1fr;padding:14px;margin:0 0 9px;border-radius:11px}
 .oc-officer-focus h2{font-size:18px}.oc-officer-focus-actions{display:flex;min-width:0}.oc-officer-focus-actions .btn{width:auto;flex:1}
 .oc-officer-home-grid{display:block}.oc-officer-quick{display:none}
 .officer-view-toolbar{padding:7px!important;margin:0 0 8px!important}
 .officer-view-toolbar .view-toggle{width:100%;display:grid!important;grid-template-columns:1fr 1fr}
 .officer-view-toolbar .view-toggle button{width:100%}
 #officerWeekControls{margin-top:7px!important;justify-content:space-between!important}
 #officerWeekControls .today-week{display:none!important}
 .officer-view-note{font-size:9px!important;margin:6px 0!important}
 .officer-calendar-day{min-width:100%!important}
 .officer-calendar-scroll{overflow:visible!important}
 .officer-calendar{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
 .officer-calendar-day{border-radius:8px!important}
 .officer-calendar-day-head{display:flex!important;justify-content:space-between!important;padding:7px 9px!important}
 .officer-calendar-day-body{padding:6px!important}
 .officer-calendar-shift{min-height:auto!important;padding:9px!important}
 .officer-list-date-heading{margin:10px 2px 5px!important;font-size:11px!important}
 .officer-shift-card{padding:11px!important;margin:0 0 7px!important}
 .officer-shift-card .row{display:grid!important;gap:9px!important}
 .officer-shift-card .btn{width:100%!important}
 .officer-screen{padding-bottom:72px!important}
 .officer-screen>.back{margin-bottom:8px!important}
 .officer-screen>.card{padding:12px!important;margin:0 0 8px!important}
 .officer-screen h1{font-size:21px!important}
 .officer-screen h2{font-size:15px!important}
 .officer-screen .actions{display:grid!important;grid-template-columns:1fr 1fr!important}
 .officer-screen .actions .btn{width:100%!important}
 #officer-details .actions #shiftActionBtn{grid-column:1/-1}
 #officer-details .officer-pack-grid{grid-template-columns:1fr!important}
 .oc-officer-bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid var(--oc-border);z-index:1000;padding:5px 7px max(5px,env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(7,24,47,.08)}
 .oc-officer-bottom-nav button{border:0;background:transparent;color:#65758a;font-size:9px;font-weight:800;display:grid;place-items:center;gap:2px;border-radius:7px}
 .oc-officer-bottom-nav button span{font-size:17px;line-height:1}
 .oc-officer-bottom-nav button.active{background:#eaf5ff;color:#0873b7}
 #officerMobileActionBar{bottom:62px!important}
 #client-portal.oc-client-canonical{padding-bottom:18px}
 #client-portal.oc-client-canonical .client-portal-hero-inner{padding:13px!important}
 #client-portal.oc-client-canonical .client-portal-hero h1{font-size:22px!important}
 #client-portal.oc-client-canonical .client-context-bar{padding:9px 11px!important}
 .oc-client-tabs{position:static;margin:8px 0;padding:4px;gap:2px}
 .oc-client-tabs button{padding:7px 8px;font-size:9px}
 .oc-client-overview{grid-template-columns:1fr 1fr;gap:6px}
 .oc-client-overview-card{padding:9px}.oc-client-overview-card b{font-size:18px}
 .oc-client-shortcuts{grid-template-columns:1fr 1fr;gap:6px}
 .oc-client-shortcut{min-height:58px;padding:8px}
 #client-portal.oc-client-canonical>.card{padding:11px!important;margin-top:7px!important}
 #client-portal .client-portal-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important}
 #client-portal .client-portal-toolbar button{grid-column:1/-1;width:100%}
}