.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-grid + .dashboard-grid { margin-top: 20px; }
.client-360 { margin-top: 20px; }
.client-360 .section-title { gap: 20px; align-items: flex-end; }
.client-360 .list-search { max-width: 360px; margin: 0; }
@media (max-width: 720px) { .client-360 .section-title { display: grid; } .client-360 .list-search { max-width: none; } }
.client-ops-center { margin-top: 24px; display: grid; gap: 18px; }
.ops-center-head { color: white; background: linear-gradient(120deg, #072f78, #075dd8); border-radius: 16px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; box-shadow: 0 16px 38px rgba(7,47,120,.22); }
.ops-center-head h2 { margin: 4px 0 6px; font-size: 25px; }.ops-center-head p { margin: 0; color: #dce9ff; }.ops-center-head .eyebrow { color: #87d8ff!important; }
.health-score { min-width: 180px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); border-radius: 14px; padding: 14px 18px; text-align: center; }.health-score span,.health-score small { display: block; color: #dce9ff; }.health-score strong { display: block; font-size: 38px; line-height: 1.1; }.health-score.critical strong { color: #ffb7c1; }.health-score.watch strong { color: #ffd38d; }
.ops-alert-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 12px; }.ops-alert { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 16px; border-radius: 13px; border: 1px solid var(--line); background: white; }.ops-alert>span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-weight: 900; }.ops-alert b { display: block; }.ops-alert p { color: var(--muted); font-size: 12px; margin: 5px 0 9px; }.ops-alert button { border: 0; background: transparent; padding: 0; color: var(--blue); font-weight: 800; }.ops-alert.critical { border-color: #ffc9cf; background: #fff8f9; }.ops-alert.critical>span { background: #ffe2e6; color: #cf2f44; }.ops-alert.warning { border-color: #f7ddb4; background: #fffbf4; }.ops-alert.warning>span { background: #fff0d7; color: #ba6e00; }.ops-alert.info>span { background: #e5efff; color: var(--blue); }.ops-alert.success>span { background: #e4faf5; color: #079b80; }
.ops-overview { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.ops-overview article { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }.ops-overview small,.ops-overview strong { display: block; }.ops-overview small { color: var(--muted); }.ops-overview strong { font-size: 26px; margin-top: 5px; }.danger-text { color: #d73c50; }.warning-text { color: #bd7100; }
.flow-bars { display: grid; gap: 11px; }.flow-bars>div { display: grid; grid-template-columns: 145px 1fr 38px; align-items: center; gap: 12px; font-size: 12px; }.flow-bars i { height: 8px; background: #edf1f7; border-radius: 999px; overflow: hidden; }.flow-bars i b { display: block; height: 100%; background: linear-gradient(90deg,var(--teal),var(--blue)); border-radius: inherit; }
.ops-table-head,.ops-row { display: grid; grid-template-columns: minmax(130px,1.2fr) 130px 90px 90px 130px 105px; gap: 12px; align-items: center; }.ops-table-head { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 12px 8px; border-bottom: 1px solid var(--line); }.ops-row { padding: 14px 8px; border-bottom: 1px solid var(--line); }.ops-row:hover { background: #f8fbff; }.ops-empty { text-align: center; padding: 36px; color: var(--muted); }
@media (max-width:850px){.ops-center-head{align-items:flex-start}.health-score{min-width:140px}.ops-overview{grid-template-columns:repeat(2,1fr)}.ops-table-head{display:none}.ops-row{grid-template-columns:1fr auto;gap:8px}.ops-row>span:nth-of-type(2),.ops-row>span:nth-of-type(3){display:none}.flow-bars>div{grid-template-columns:105px 1fr 30px}}
@media (max-width:520px){.ops-center-head{display:grid}.health-score{width:100%}.ops-alert-grid,.ops-overview{grid-template-columns:1fr}}
@media (max-width: 1050px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .metric-grid { grid-template-columns: 1fr; } }
.ops-row > b{display:flex;min-width:0;flex-direction:column;gap:.3rem}.ops-candidate-names{display:block;max-width:18rem;overflow:hidden;color:var(--muted,#64748b);font-size:.76rem;font-weight:500;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}