/* Business cards for the floor dashboard. Column placement belongs to integration.css. */
.dashboard-column{display:grid;gap:10px;min-width:0;min-height:0;align-items:stretch}
.op-card{--op-cyan:#8ce1e9;--op-blue:#75b9f3;--op-red:#f18391;--op-green:#81d4bb;--op-muted:#829aae;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;color:#d2e4ee;border:1px solid #8acbdd30;border-radius:8px;background:linear-gradient(135deg,#14263bd9,#0c192bdc 65%);box-shadow:inset 0 1px 0 #c0e5f609,0 5px 24px #020b161f;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums}
.op-card:before{content:"";position:absolute;top:-1px;left:17px;right:17px;height:1px;background:linear-gradient(90deg,#9adeea7a,#86bec21d,transparent);pointer-events:none}
.op-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;min-height:37px;padding:8px 12px 7px;border-bottom:1px solid #88b7ce14}
.op-card-header h2{display:flex;align-items:center;gap:7px;min-width:0;margin:0;color:#e2f2f6;font-size:13px;font-weight:600;letter-spacing:.7px;line-height:1.35}
.op-card-header h2>svg{width:15px;height:15px;flex:0 0 15px;color:#8dcbd9;stroke-width:1.6}
.op-card-header small{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:3px 7px;margin-left:auto;max-width:48%;color:#6f8b9f;font-size:9px;font-weight:400;line-height:1.4;text-align:right}
.op-card-header small>span:last-child{color:#82aab6}
.op-card-body{flex:1 1 auto;min-height:0;min-width:0;padding:10px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#487b944d transparent}
.op-card-body::-webkit-scrollbar,.op-warn-list::-webkit-scrollbar,.op-device-full-list::-webkit-scrollbar{width:3px;height:3px}
.op-card-body::-webkit-scrollbar-thumb,.op-warn-list::-webkit-scrollbar-thumb,.op-device-full-list::-webkit-scrollbar-thumb{background:#487b9470;border-radius:4px}
.op-card button{font:inherit;transition:color .18s,background .18s,border-color .18s;touch-action:manipulation}
.op-card button:focus-visible,.op-device-dialog button:focus-visible{outline:2px solid #8ce1e9;outline-offset:3px}
.op-card em,.op-card i,.op-device-dialog em,.op-device-dialog i{font-style:normal}
.op-card u{text-decoration:none}

/* Overview: four compact metrics with one common numerical baseline. */
.op-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:100%;min-height:102px}
.op-kpi{--op-kpi-color:var(--op-blue);position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:7px 10px;border:1px solid color-mix(in srgb,var(--op-kpi-color) 18%,transparent);border-radius:5px;background:linear-gradient(120deg,color-mix(in srgb,var(--op-kpi-color) 8%,transparent),transparent)}
.op-kpi>span{display:flex;align-items:center;gap:6px;color:#9fb5c4;font-size:10px;line-height:1.3}
.op-kpi-icon{display:inline-flex;color:var(--op-kpi-color)}
.op-kpi-icon svg{width:12px;height:12px;stroke-width:1.6}
.op-kpi>strong{margin-top:3px;font-family:Oxanium,ui-monospace,monospace;font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.08;letter-spacing:.5px;color:var(--op-kpi-color);text-shadow:0 0 20px color-mix(in srgb,var(--op-kpi-color) 15%,transparent)}
.op-kpi-red{--op-kpi-color:var(--op-red)}.op-kpi-teal{--op-kpi-color:var(--op-cyan)}.op-kpi-green{--op-kpi-color:var(--op-green)}
.op-kpi-pulse{position:absolute;right:8px;top:9px;width:3px;height:3px;border-radius:50%;background:var(--op-kpi-color);opacity:.7;box-shadow:0 0 8px color-mix(in srgb,var(--op-kpi-color) 40%,transparent)}
.op-counting>.op-kpi-pulse{animation:op-kpi-refresh .9s ease-in-out infinite}
@keyframes op-kpi-refresh{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* Ranking. Native row names and totals remain fully readable. */
.op-ranking{display:grid;gap:8px}
.op-rank-row{display:grid;grid-template-columns:19px minmax(0,1fr) 49px;gap:8px;align-items:center;min-width:0;min-height:24px}
.op-rank-row>b{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#85abc2;border:1px solid #8ac6dd29;border-radius:4px;background:#6c99bd0a;font-family:Oxanium,ui-monospace,monospace;font-size:11px;font-weight:500}
.op-rank-row:nth-child(1)>b{color:#b1e6e8;background:#8ce1e91b;border-color:#8ce1e949}.op-rank-row:nth-child(2)>b{color:#9bcde8}.op-rank-row:nth-child(3)>b{color:#96bad8}
.op-rank-row>span{display:grid;gap:3px;min-width:0;color:#b7cbd8;font-size:10px;line-height:1.25}
.op-rank-row>span>i{display:block;height:4px;background:#1c334a;border-radius:4px;overflow:hidden}
.op-rank-row>span>i>u{display:block;height:100%;max-width:100%;border-radius:4px;background:linear-gradient(90deg,#5e8fbd,#8cd7e0);box-shadow:0 0 8px #83d4dc35;transition:width .55s ease}
.op-rank-row>em{font-family:Oxanium,ui-monospace,monospace;font-size:15px;line-height:1;color:#bddae9;text-align:right;white-space:nowrap}
.op-rank-pager{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:7px;color:#6d91a6;font-size:9px}
.op-rank-pager button{display:flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 4px;border:1px solid #729eb930;border-radius:3px;color:#85bdcc;background:#6a9db108}
.op-rank-pager button:hover{color:#d4f8fa;border-color:#8ce1e955;background:#8ce1e914}
.op-rank-pager button[disabled]{opacity:.35}

/* Two half-day segments and three queue states. */
.op-donut-wrap{display:grid;grid-template-columns:minmax(90px,1fr) minmax(130px,1.35fr);align-items:center;gap:9px;height:100%;min-height:86px}
.op-donut-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
svg.op-donut{display:block;width:100%;max-width:114px;height:auto;overflow:visible}
.op-donut text{font-family:Oxanium,"PingFang SC",sans-serif;fill:#d4eaf1}.op-donut text:not([font-size]){font-size:12px}
.op-donut-seg{transition:opacity .25s,filter .25s;transform-origin:center;cursor:pointer}
.op-donut-seg.op-on{filter:drop-shadow(0 0 5px #8ce1e957);opacity:1}.op-donut-seg.op-dim{opacity:.22}
.op-donut-legend{display:grid;gap:8px;margin:0;padding:0;list-style:none;min-width:0}
.op-donut-legend>li>button{display:grid;grid-template-columns:5px minmax(0,1fr) auto auto;align-items:center;gap:5px;width:100%;padding:5px 6px;text-align:left;border:1px solid transparent;border-radius:4px;color:#8faabc;font-size:10px}
.op-donut-legend>li>button:hover,.op-donut-legend>li>button.op-on{background:#81c7d612;border-color:#82d1df2b;color:#d8edf2}
.op-donut-legend>li>button>i{width:5px;height:5px;border-radius:2px;background:#75bce5}
.op-donut-legend>li:nth-child(2)>button>i{background:#8bd6d0}
.op-donut-legend b{font-family:Oxanium,ui-monospace,monospace;font-size:14px;font-weight:500;color:#c4e0ed;white-space:nowrap}
.op-donut-legend em{color:#6d92a8;font-size:9px;white-space:nowrap}
.op-zone-list{display:grid;gap:12px;align-content:center;min-height:77px;height:100%}
.op-zone{--op-state:#84cec3;display:grid;grid-template-columns:minmax(64px,.9fr) minmax(70px,1fr) 44px;align-items:center;gap:10px;min-width:0}
.op-zone>span{color:#a5bdca;font-size:10px;white-space:nowrap}.op-zone>em{font-family:Oxanium,ui-monospace,monospace;font-size:17px;line-height:1;color:var(--op-state);text-align:right}
.op-zone.op-warn{--op-state:#e2bc79}.op-zone.op-danger{--op-state:#ef8d9b}
.op-track{display:block;height:5px;border-radius:4px;background:#1d3447;overflow:hidden}.op-track>u{display:block;height:100%;max-width:100%;background:var(--op-state);border-radius:4px;transition:width .55s}

/* Doctor attendance and the compact time-series plot. */
.op-duty{display:grid;grid-template-columns:minmax(125px,1.05fr) minmax(120px,1fr);gap:12px;align-items:center;height:100%;min-height:93px}
.op-duty-hero{display:grid;gap:3px;min-width:0;padding-right:12px;border-right:1px solid #7ea7c41c}
.op-duty-hero>span{font-size:10px;color:#91aabc}.op-duty-hero>b{color:#a7e2e8;font-family:Oxanium,ui-monospace,monospace;font-size:28px;font-weight:500;line-height:1.16;white-space:nowrap}
.op-duty-hero>b>em{margin-left:4px;font-family:inherit;font-size:10px;font-weight:400;color:#7d9cb0}.op-duty-hero>small{font-size:9px;color:#6d96a6;white-space:nowrap}
.op-duty-track{display:block;height:4px;margin:4px 0 1px;border-radius:4px;background:#1c3448;overflow:hidden}.op-duty-track>u{display:block;height:100%;background:linear-gradient(90deg,#508cab,#8ad9dd);border-radius:4px}
.op-stat-list{display:grid;gap:9px;min-width:0}.op-stat-list p{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0;font-size:10px;color:#8ca8b9;line-height:1.3}
.op-stat-list p>b{font-family:Oxanium,ui-monospace,monospace;color:#c6e2ee;font-size:16px;font-weight:500;white-space:nowrap}.op-stat-list p>b>em{font-family:"PingFang SC",sans-serif;font-size:9px;font-weight:400;color:#6e92a7;margin-left:2px}
.op-card-trend .op-card-body{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px 10px 8px}
svg.op-trend-chart{display:block;flex:1 1 auto;min-height:65px;max-height:108px;width:100%;height:100%;overflow:visible}
.op-trend-chart text{fill:#7590a6;font-family:Oxanium,"PingFang SC",sans-serif;font-size:9px}.op-trend-chart [class*="grid"]{stroke:#8acbdd12}
.op-trend-foot{display:flex;align-items:center;justify-content:center;gap:12px;flex:0 0 auto;min-height:14px;color:#8aa7b9;font-size:9px;line-height:1.3}
.op-trend-foot>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.op-trend-foot>em{margin-left:auto;color:#6388a2;font-size:9px;white-space:nowrap}
.op-trend-foot i{width:10px;height:2px;border-radius:2px}.op-lg-wait{background:#7ca6e2}.op-lg-visit{background:#8bdbd8}

/* A four-row viewport exposes all alerts through scrolling and rotation. */
.op-card-warnings .op-card-body{display:flex;flex-direction:column;padding-top:6px;padding-bottom:6px;overflow:visible}
.op-warn-list{display:flex;flex-direction:column;gap:5px;min-height:0;max-height:100%;margin:0;padding:0 2px 0 0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#487b944d transparent;scroll-snap-type:y proximity}
.op-warn-list>p{--op-state:#88b8d4;display:flex;align-items:center;gap:7px;flex:0 0 auto;min-height:36px;margin:0;padding:7px 8px;color:#a5bfd0;border:1px solid color-mix(in srgb,var(--op-state) 17%,transparent);border-left:2px solid var(--op-state);border-radius:3px;background:color-mix(in srgb,var(--op-state) 5%,transparent);font-size:10px;line-height:1.45;scroll-snap-align:start;overflow-wrap:anywhere}
.op-warn-list>p.op-danger{--op-state:#ee8792;color:#d2b7bf}.op-warn-list>p.op-warn{--op-state:#d2b479;color:#c6bdab}.op-warn-list>p.op-info{--op-state:#80b4d1}
.op-warn-list p>i{color:var(--op-state)}.op-warn-list p>b{font-weight:500;color:inherit}
.op-systems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-content:center;height:100%;min-height:42px}
.op-systems>span{display:flex;align-items:center;justify-content:center;gap:5px;min-height:24px;padding:4px 5px;color:#9cb9c6;border:1px solid #80c5ba25;border-radius:4px;background:#71c6b509;font-size:10px;line-height:1.25;white-space:nowrap}
.op-systems>span:before{content:"";width:4px;height:4px;flex:0 0 4px;background:#83cbb7;box-shadow:0 0 7px #81c4b448;border-radius:50%}

/* The bottom row uses the same glass treatment at a more horizontal rhythm. */
.op-card-punctual .op-card-body{display:flex;flex-direction:column;justify-content:center;gap:13px}
.op-punctual-bar{display:flex;min-height:23px;height:23px;width:100%;border-radius:4px;overflow:hidden;background:#1b3347}
.op-punctual-bar>*{display:flex;align-items:center;justify-content:center;min-width:0;color:#092035;font-family:Oxanium,ui-monospace,monospace;font-size:12px;font-weight:600;background:#8bcfd9;transition:width .55s}
.op-punctual-bar>*:nth-child(2){background:#80a7d6;color:#12283b}.op-punctual-bar>*:nth-child(3){background:#c3a96f;color:#2a2725}
.op-punctual-legend{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;font-size:10px;color:#89a7bc}
.op-punctual-legend>span,.op-punctual-legend>li{display:flex;align-items:center;gap:5px;white-space:nowrap}.op-punctual-legend i{width:6px;height:6px;border-radius:2px;background:#8bcfd9}.op-punctual-legend>*:nth-child(2) i{background:#80a7d6}.op-punctual-legend>*:nth-child(3) i{background:#c3a96f}.op-punctual-legend b{font-family:Oxanium,ui-monospace,monospace;color:#bfd9e4;font-size:14px;font-weight:500}
.op-flow-steps{display:flex;align-items:center;justify-content:space-between;gap:3px;width:100%;min-height:70px}
.op-flow-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1 1 0;min-width:0;min-height:63px;padding:7px 3px;color:#7b9bb0;border:1px solid #81b7d11c;border-radius:5px;background:#74accc06;font-size:10px;line-height:1.3}
.op-flow-step>svg,.op-flow-step>i>svg{width:18px;height:18px;color:#80b4cf;stroke-width:1.5}.op-flow-step>i{display:flex;align-items:center;justify-content:center}
.op-flow-step.op-active,.op-flow-step:hover{color:#e3f9fa;border-color:#8ce1e95a;background:#8ce1e918;box-shadow:inset 0 0 15px #8ce1e905}.op-flow-step.op-active svg{color:#a6edf0}
.op-flow-link{display:block;flex:0 0 10px;height:1px;position:relative;background:#4a72865c}.op-flow-link:after{content:"";position:absolute;right:0;top:-2px;width:4px;height:4px;border-top:1px solid #6b9bb487;border-right:1px solid #6b9bb487;transform:rotate(45deg)}.op-flow-link.op-lit{background:#8ddce5}.op-flow-link.op-lit:after{border-color:#8ddce5}
.op-flow-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #83b3d014}
.op-flow-metrics>*{display:flex;align-items:baseline;justify-content:center;gap:6px;color:#85a1b4;font-size:10px;min-width:0}.op-flow-metrics b,.op-flow-metrics strong{color:#bddbe8;font-family:Oxanium,ui-monospace,monospace;font-size:19px;font-weight:500}.op-flow-metrics em{color:#678ca4;font-size:9px}

/* Three visible offline devices; the complete twelve are in the dialog. */
.op-card-devices .op-card-body{display:flex;flex-direction:column;gap:7px;padding-top:8px;padding-bottom:8px}
.op-devices-head{display:grid;grid-template-columns:minmax(130px,.9fr) minmax(150px,1.1fr);align-items:center;gap:12px;flex:0 0 auto}
.op-devices-total{display:grid;gap:1px;min-width:0}
.op-devices-total>strong{font-family:Oxanium,ui-monospace,monospace;color:#a1dce6;font-size:28px;font-weight:500;line-height:1.05;letter-spacing:.3px;white-space:nowrap}.op-devices-total>strong>small{margin-left:5px;font-size:12px;letter-spacing:0;color:#6e93aa;font-weight:400}
.op-devices-total>span{color:#7c9aaf;font-size:10px;white-space:nowrap}.op-devices-total>span>em{margin-left:3px;color:#e09ca5}
.op-devices-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0;margin:0;list-style:none}
.op-devices-kinds>li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;padding:4px 3px;border-left:1px solid #88b5ca1c;color:#7d9caf;font-size:9px;line-height:1.25}
.op-devices-kinds>li>i{width:4px;height:4px;display:none}.op-devices-kinds>li>b{font-family:Oxanium,ui-monospace,monospace;color:#b4d2e1;font-size:17px;font-weight:500;line-height:1.3}
.op-devices-offline{margin:0;padding:0;list-style:none;display:grid;gap:4px;min-width:0}
.op-devices-offline li,.op-device-full-list>li{--op-state:#82b8d5;display:grid;grid-template-columns:minmax(80px,.95fr) minmax(88px,1.3fr) minmax(52px,.75fr);align-items:center;gap:8px;min-height:25px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--op-state) 17%,transparent);border-left:2px solid var(--op-state);border-radius:3px;background:color-mix(in srgb,var(--op-state) 5%,transparent);font-size:10px;line-height:1.3}
.op-devices-offline li.op-danger,.op-device-full-list>li.op-danger{--op-state:#e78b98}.op-devices-offline li.op-warn,.op-device-full-list>li.op-warn{--op-state:#d2b479}.op-devices-offline li.op-info,.op-device-full-list>li.op-info{--op-state:#82b8d5}
.op-dev-area{color:#acbfcd}.op-dev-name{color:#7e9cad}.op-devices-offline b,.op-device-full-list b{color:var(--op-state);font-weight:400;font-size:9px;text-align:right;white-space:nowrap}
.op-device-all{flex:0 0 auto;padding:3px 7px!important;color:#92c9d4!important;border:1px solid #8bcbda36!important;border-radius:4px;background:#82c5d70b!important;font-size:9px!important;line-height:1.5;white-space:nowrap}
.op-device-all:hover{color:#d5f6f7!important;background:#8ce1e91b!important;border-color:#8ce1e971!important}

/* Non-modal overlay: it remains readable alongside the spatial model. */
dialog.op-device-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:40;width:min(720px,calc(100vw - 32px));max-height:min(680px,calc(100vh - 48px));margin:0;padding:0;border:1px solid #8acbdd65;border-radius:10px;color:#d2e8f0;background:linear-gradient(140deg,#182d42f5,#0d1a2bf7);box-shadow:0 25px 90px #020912a1,inset 0 1px 0 #a0e3ec19;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden}
dialog.op-device-dialog:not([open]){display:none}
.op-device-dialog-header{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #8acbdd25}
.op-device-dialog-header h2{margin:0;font-size:15px;letter-spacing:1px;font-weight:600;color:#e0f4f8}.op-device-dialog-header small{margin-left:auto;font-size:10px;color:#7ea2b6}
.op-device-close{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#9cc5d1;border:1px solid #8cc9da3a;border-radius:5px;background:#7cbace09;font-size:18px;line-height:1}.op-device-close:hover{background:#8ce1e91c;color:#e0fbfc}
.op-device-full-list{display:grid;gap:6px;max-height:calc(min(680px,100vh - 48px) - 62px);margin:0;padding:13px 16px 16px;list-style:none;overflow:auto;scrollbar-width:thin;scrollbar-color:#56879d6b transparent;overscroll-behavior:contain}
.op-device-full-list>li{grid-template-columns:minmax(120px,1fr) minmax(150px,1.4fr) minmax(94px,.8fr);min-height:37px;padding:9px 11px;font-size:11px}
.op-device-full-list b{font-size:10px}

/* The side columns allocate 97–175 px per card at 1920 × 1080. Every static
   card fits that allocation; only the multi-record warning list scrolls. */
.op-card-header{min-height:32px;padding:6px 10px 5px}
.op-card-header small{display:block;flex:0 1 auto;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.op-card-body{padding:6px 10px;overflow:visible}
.op-kpi-grid{min-height:0;gap:6px}
.op-kpi{padding:3px 8px;gap:0}
.op-kpi>span{font-size:9px;line-height:1.1;gap:4px}
.op-kpi-icon svg{width:10px;height:10px}
.op-kpi>strong{font-size:28px;line-height:1;margin-top:2px}
.op-ranking{gap:4px}
.op-ranking-page{display:grid;gap:2px}
.op-rank-row{min-height:19px;grid-template-columns:18px minmax(0,1fr) 48px;gap:7px}
.op-rank-row>span{gap:2px;font-size:9px;line-height:1.2}
.op-rank-row>span>i{height:3px}
.op-rank-row>b{width:16px;height:16px;font-size:10px}
.op-rank-row>em{font-size:14px}
.op-rank-pager{margin-top:3px;gap:5px}
.op-rank-pager button{height:16px;font-size:9px;padding:0 6px}
.op-rank-pager button.op-active{color:#c8f3f5;border-color:#8ce1e966;background:#8ce1e91b}
.op-donut-wrap{min-height:0;grid-template-columns:minmax(82px,.9fr) minmax(138px,1.4fr);gap:8px}
.op-donut-stage{height:100%;max-height:90px}
svg.op-donut{max-width:86px;max-height:86px}
.op-donut-track{stroke:#20384a}
.op-donut-total{font-size:15px!important;font-weight:600}
.op-donut-sub{font-size:10px!important;fill:#87aabd!important}
.op-donut-legend{gap:4px}
.op-donut-legend>li>button{padding:3px 4px;gap:5px;font-size:9px;line-height:1.3}
.op-donut-legend b{font-size:13px}.op-donut-legend em{font-size:8px}
.op-card-queue .op-card-body{display:flex;flex-direction:column;gap:4px;padding:6px 10px}
.op-zone-list{height:auto;min-height:0;flex:1 1 auto;gap:4px;align-content:center}
.op-zone{min-height:14px;grid-template-columns:minmax(68px,.9fr) minmax(70px,1fr) 36px;gap:8px}
.op-zone>span{font-size:10px;line-height:1}.op-zone>em{font-size:14px;line-height:1}
.op-track{height:4px}
.op-zone-note{margin:0;flex:0 0 auto;font-size:8px;line-height:1.3;color:#627f93;white-space:nowrap}
.op-duty{min-height:0;gap:10px}
.op-duty-hero{gap:2px;padding-right:10px}
.op-duty-hero>b{font-size:28px;line-height:1.05}
.op-duty-hero>span{font-size:9px}.op-duty-hero>small{font-size:8px}
.op-duty-track{margin:4px 0 1px}
.op-stat-list{gap:7px}.op-stat-list p{font-size:9px}.op-stat-list p>b{font-size:15px}
.op-card-trend .op-card-body{display:block;padding:4px 9px 6px}
.op-trend{display:flex;flex-direction:column;height:100%;min-height:0;gap:3px}
svg.op-trend-chart{flex:1 1 0;height:0;min-height:0;max-height:none;width:100%}
.op-trend-foot{min-height:13px;gap:9px;font-size:8px}
.op-trend-foot>em{font-size:8px}
.op-tb-base{fill:#31586d13}.op-tb-val{fill:#b9dfef!important;font-size:8px!important}.op-tb-val.op-visit{fill:#a6dfc0!important}.op-tb-hour{font-size:8px!important}
.op-trend-col.op-peak .op-tb-wait{filter:drop-shadow(0 0 4px #79d5e54d)}
.op-systems{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;min-height:0}
.op-systems>span{min-height:20px;padding:3px 5px;font-size:9px;gap:4px}
.op-systems>span:before{display:none}.op-systems>span>i{width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#8bceb8;box-shadow:0 0 5px #8bceb847}.op-systems b{font-size:8px;font-weight:400;color:#83baa9;margin-left:auto}
.op-system-scan{position:absolute;bottom:-3px;left:3px;right:3px;height:1px;background:linear-gradient(90deg,transparent,#7ec9c539,transparent);pointer-events:none}
.op-warn-dot{width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:var(--op-state)}
.op-warn-list>p>em{flex:0 0 auto;color:var(--op-state);font-size:9px;min-width:32px}.op-warn-list>p>span{flex:1 1 auto;min-width:0}
.op-punctual{display:flex;flex-direction:column;justify-content:center;gap:15px;height:100%;min-height:0}
.op-punctual>small{font-size:9px;color:#668a9e}
.op-flow{display:flex;flex-direction:column;justify-content:center;min-height:0;height:100%}
.op-flow-step>b{font-size:10px;font-weight:500;white-space:nowrap}.op-flow-step>em{font-family:Oxanium,"PingFang SC",sans-serif;font-size:14px;white-space:nowrap;color:#9abccc}
.op-flow-metrics>p{display:grid;align-items:center;justify-content:stretch;gap:4px;min-width:0;margin:0;padding:0 5px}
.op-fm-label{font-size:9px;color:#7b9db1;white-space:nowrap}
.op-fm-value{font-family:Oxanium,ui-monospace,monospace;font-size:22px;line-height:1.05;color:#bbdce8;white-space:nowrap}
.op-fm-value>em{font-family:"PingFang SC",sans-serif;font-size:9px;margin-left:3px;color:#7398ae}.op-fm-value>small{font:8px "PingFang SC",sans-serif;color:#607f95;margin-left:6px}
.op-fm-bar{display:block;width:100%;height:3px;margin-top:3px;border-radius:3px;background:#29445b40;overflow:hidden}.op-fm-bar>i{display:block;height:100%;background:linear-gradient(90deg,#638fbe,#8cd7de);border-radius:3px}
.op-card-devices .op-card-header h2{letter-spacing:.3px;font-size:13px;gap:6px}
.op-card-devices .op-card-header small{max-width:31%;font-size:8px}
.op-devices{display:flex;flex-direction:column;justify-content:center;gap:9px;height:100%;min-height:0}
.op-devices-offline{display:block}.op-devices-offline>ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.op-devices-kinds>li>b{font-size:14px}

@media(max-width:1399px),(max-height:849px){
  .op-card{min-height:145px}.op-card-header{min-height:38px}.op-card-body{overflow:visible}
  .op-card-overview{min-height:160px}.op-card-rank{min-height:190px}.op-card-halfday{min-height:160px}.op-card-queue{min-height:145px}.op-card-doctor{min-height:158px}.op-card-trend{min-height:168px}.op-card-warnings{min-height:210px}.op-card-systems{min-height:118px}
  .op-card-punctual,.op-card-flow,.op-card-devices{min-height:200px}
  .op-warn-list{max-height:160px}.op-donut-wrap{min-height:102px}.op-systems{min-height:52px}.op-trend-chart{min-height:85px}
  .op-device-dialog{backdrop-filter:blur(20px)}
}
@media(max-width:599px){
  .op-card-header{padding:9px 11px}.op-card-body{padding:10px 11px}.op-card-header h2{font-size:13px;letter-spacing:.4px}
  .op-card-header small{font-size:9px;gap:3px 5px}.op-donut-wrap{grid-template-columns:minmax(90px,.8fr) minmax(142px,1fr);gap:5px}
  .op-duty{grid-template-columns:minmax(118px,1fr) minmax(115px,1fr);gap:10px}.op-flow-step{font-size:9px;gap:5px}.op-flow-link{flex-basis:7px}.op-flow-metrics{gap:4px}.op-flow-metrics>*{font-size:9px;gap:4px}
  .op-devices-head{grid-template-columns:minmax(122px,.9fr) minmax(143px,1.1fr);gap:6px}.op-devices-total>strong{font-size:25px}.op-devices-total>strong>small{font-size:11px}.op-devices-kinds>li{font-size:8px}.op-devices-kinds>li>b{font-size:15px}
  .op-devices-offline li{grid-template-columns:minmax(75px,1fr) minmax(83px,1.15fr) 58px;gap:5px;padding:6px}.op-dev-name{font-size:9px}
  .op-device-dialog-header{padding:14px}.op-device-dialog-header h2{font-size:14px}.op-device-full-list{padding:11px;gap:7px}.op-device-full-list>li{grid-template-columns:minmax(90px,1fr) minmax(92px,1.1fr) 70px;gap:5px;padding:9px 7px;font-size:10px}.op-device-full-list b{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.op-card *{animation:none!important;transition:none!important}}