/* Social monitoring — aligned with Qassim Flood platform visual language */
.mon-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;padding:22px 24px;background:linear-gradient(135deg,rgba(12,54,78,.96),rgba(7,35,54,.96));border:1px solid rgba(40,205,228,.22)}
.mon-hero h2{margin:4px 0 8px;font-size:24px}.mon-hero p{margin:0;color:#a9c7d7}.mon-eyebrow{font-size:11px;letter-spacing:1.8px;color:#24d0e8;font-weight:900}.mon-source-state{display:flex;align-items:center;gap:10px;min-width:250px;padding:12px 14px;border-radius:15px;background:rgba(6,25,39,.55);border:1px solid rgba(255,255,255,.08)}.mon-source-state .dot{width:10px;height:10px;border-radius:50%;background:#ffb43b;box-shadow:0 0 0 5px rgba(255,180,59,.12)}.mon-source-state div{display:flex;flex-direction:column;gap:3px}.mon-source-state b{font-size:13px}.mon-source-state small{font-size:10px;color:#90adbc}
.mon-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.mon-kpi{--m:#22c8ef;--mr:34,200,239;min-height:114px;border:1px solid rgba(var(--mr),.24);border-radius:20px;padding:16px;display:flex;align-items:flex-start;gap:14px;background:linear-gradient(145deg,#08283c,#071f31);box-shadow:0 14px 30px rgba(0,0,0,.14)}.mon-kpi.tone-success,.mon-kpi.tone-good{--m:#20d5a1;--mr:32,213,161}.mon-kpi.tone-warning{--m:#ffb43b;--mr:255,180,59}.mon-kpi.tone-danger{--m:#ff5d73;--mr:255,93,115}.mon-kpi-icon{width:50px;height:50px;display:grid;place-items:center;color:var(--m)}.mon-kpi>div{display:flex;flex-direction:column;gap:5px}.mon-kpi small{font-size:12px;font-weight:800;color:#b7ceda}.mon-kpi b{font-size:29px;color:var(--m);line-height:1;font-weight:900}.mon-kpi em{font-size:11px;color:#8daaba;font-style:normal}
.mon-filter-panel{padding:16px;margin-bottom:16px}.mon-filter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mon-filter-head h3{margin:0}.mon-filter-head small{color:#8eacbc}.mon-filters{display:grid;grid-template-columns:minmax(260px,2fr) repeat(4,minmax(135px,1fr)) auto;gap:10px}.mon-filters input,.mon-filters select{min-height:42px;border-radius:11px;border:1px solid rgba(139,194,219,.2);background:#08283c;color:#eaf8ff;padding:0 12px;outline:none}
.mon-overview-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:16px}.mon-place-bars{display:flex;flex-direction:column;gap:15px;padding:14px 2px}.mon-place-row{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) 40px;gap:12px;align-items:center;direction:rtl}.mon-place-row span{font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.mon-place-row>div{height:12px;border-radius:99px;background:#10354e;overflow:hidden}.mon-place-row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#16bde9,#27d5b0)}.mon-place-row b{text-align:center}.mon-summary-list{display:grid;gap:10px;padding:12px 0}.mon-summary-list>div{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:13px;background:rgba(9,43,64,.62);border:1px solid rgba(255,255,255,.06)}.mon-summary-list span{font-size:12px;color:#9fbaca}.mon-summary-list b{font-size:14px}
.mon-table-panel{margin-bottom:20px}.mon-table{min-width:1550px}.mon-text-cell{min-width:280px;max-width:390px;white-space:normal!important;line-height:1.7}.mon-media-list{display:flex;flex-wrap:wrap;gap:5px;min-width:150px}.mon-media-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(29,190,232,.1);color:#bfefff;border:1px solid rgba(29,190,232,.23);border-radius:9px;padding:6px 8px;font-size:10px;cursor:pointer}.mon-media-chip.video{background:rgba(255,180,59,.09);border-color:rgba(255,180,59,.24);color:#ffd594}.mon-actions{display:flex;gap:6px;min-width:180px}.mon-actions .small{padding:7px 9px;font-size:10px;white-space:nowrap}.mon-no-media{color:#668b9e}.mon-preview{text-align:center;padding:22px}.mon-preview-icon{width:100px;height:100px;border-radius:24px;margin:0 auto 14px;display:grid;place-items:center;background:rgba(30,196,240,.08);color:#2ccce9}.mon-preview p{max-width:520px;margin:8px auto;color:#8faebe;line-height:1.8}
[data-theme="light"] .mon-hero,[data-theme="light"] .mon-kpi{background:linear-gradient(145deg,#fff,#f1f8fb);color:#133145}[data-theme="light"] .mon-hero p,[data-theme="light"] .mon-source-state small,[data-theme="light"] .mon-kpi em,[data-theme="light"] .mon-filter-head small{color:#5d7887}[data-theme="light"] .mon-kpi small{color:#476675}[data-theme="light"] .mon-source-state,[data-theme="light"] .mon-summary-list>div{background:#f4fafc;border-color:#dcecf2}[data-theme="light"] .mon-filters input,[data-theme="light"] .mon-filters select{background:#fff;color:#16364a;border-color:#d5e5ec}
@media(max-width:1200px){.mon-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mon-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.mon-filters input{grid-column:span 2}}
@media(max-width:760px){.mon-hero{align-items:flex-start;flex-direction:column}.mon-source-state{width:100%}.mon-kpi-grid,.mon-overview-grid{grid-template-columns:1fr}.mon-filters{grid-template-columns:1fr}.mon-filters input{grid-column:auto}}

/* X API live integration */
.mon-source-state .dot.live{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12),0 0 18px rgba(34,197,94,.35)}
.mon-source-state.live{border-color:rgba(34,197,94,.28)}
.mon-x-search-panel{margin-bottom:14px}
.mon-x-search-head{margin-bottom:0}
.mon-x-search-row{display:grid;grid-template-columns:minmax(240px,1fr) 110px 122px;gap:10px;align-items:stretch;margin-top:12px}
.mon-x-search-row input,.mon-x-search-row select,.mon-x-search-row .mon-x-fetch-btn{width:100%;height:42px;min-height:42px;margin:0;box-sizing:border-box}
.mon-x-search-row .mon-x-fetch-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 14px;line-height:1}
.mon-x-search-panel .device-auto-note{margin-top:10px}
@media(max-width:760px){.mon-x-search-row{grid-template-columns:1fr}.mon-x-search-row .mon-x-fetch-btn{width:100%}}

/* V203 — Monitoring analytics, YoY comparison, governance */
.mon-time-panel{padding:16px 18px;margin-bottom:14px}
.mon-time-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mon-presets{display:flex;gap:7px;flex-wrap:wrap}.mon-presets button{border:1px solid rgba(139,194,219,.22);background:#08283c;color:#b9d4e1;border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:800}.mon-presets button.active{background:linear-gradient(135deg,#16bde9,#18a9ca);color:white;border-color:transparent;box-shadow:0 6px 16px rgba(22,189,233,.2)}
.mon-time-controls label{display:flex;align-items:center;gap:7px;color:#99b7c6;font-size:11px;font-weight:800}.mon-time-controls input[type=date]{height:38px;border-radius:10px;border:1px solid rgba(139,194,219,.22);background:#08283c;color:#eaf8ff;padding:0 10px;outline:none}
.mon-compare-toggle{display:inline-flex!important;align-items:center;gap:8px;color:#bad4df!important;font-size:11px!important;font-weight:900;cursor:pointer}.mon-compare-toggle input{display:none}.mon-compare-toggle span{position:relative;width:38px;height:21px;border-radius:99px;background:#27495d;transition:.2s}.mon-compare-toggle span:after{content:"";position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:white;transition:.2s}.mon-compare-toggle input:checked+span{background:#16bde9}.mon-compare-toggle input:checked+span:after{transform:translateX(-17px)}
.mon-kpi-grid-8{grid-template-columns:repeat(4,minmax(0,1fr))}.mon-perf{--m:#22c8ef;--mr:34,200,239;position:relative;min-height:114px;border:1px solid rgba(var(--mr),.24);border-radius:20px;padding:16px;display:flex;align-items:flex-start;gap:12px;background:linear-gradient(145deg,#08283c,#071f31);box-shadow:0 14px 30px rgba(0,0,0,.14)}.mon-perf.tone-good{--m:#20d5a1;--mr:32,213,161}.mon-perf-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--m)}.mon-perf>div{display:flex;flex-direction:column;gap:4px}.mon-perf small{font-size:11px;font-weight:800;color:#b7ceda}.mon-perf b{font-size:26px;color:var(--m);line-height:1;font-weight:900}.mon-perf em{font-size:10px;color:#8daaba;font-style:normal;line-height:1.5}.mon-delta{position:absolute;left:12px;bottom:10px;font-size:9px;font-weight:900;padding:4px 7px;border-radius:99px;background:rgba(125,151,164,.12);color:#9cb8c5}.mon-delta.good{color:#56e0b6;background:rgba(32,213,161,.1)}.mon-delta.bad{color:#ff8997;background:rgba(255,93,115,.1)}
.mon-yoy-strip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-3px 0 14px;padding:10px 14px;border-radius:13px;background:rgba(6,31,47,.75);border:1px solid rgba(139,194,219,.14)}.mon-yoy-strip>span{font-size:10px;color:#82a8ba;font-weight:900}.mon-yoy-strip b{font-size:10px;padding:5px 9px;border-radius:99px}.mon-yoy-strip b.good{color:#55dfb5;background:rgba(32,213,161,.1)}.mon-yoy-strip b.bad{color:#ff8897;background:rgba(255,93,115,.1)}.mon-yoy-strip b.neutral{color:#9fbaca;background:rgba(125,151,164,.1)}
.mon-chart-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}.mon-chart-grid>.panel{min-height:300px}.mon-chart-wide{grid-column:1/-1;min-height:330px!important}.mon-chart-card{min-width:0}.mon-chart-card .panel-head{direction:rtl;text-align:right;align-items:flex-start}.mon-chart-card .panel-head>div{width:100%;text-align:right}.mon-chart-card .panel-head h3,.mon-chart-card .panel-head small{display:block;text-align:right}.mon-chart-legend{display:flex;gap:18px;justify-content:flex-start;margin:5px 8px 0;color:#9eb9c7;font-size:10px;font-weight:800}.mon-chart-legend span{display:flex;align-items:center;gap:6px}.mon-chart-legend i{width:18px;height:3px;border-radius:10px;display:inline-block}.mon-chart-legend i.curr{background:#16c6e9}.mon-chart-legend i.prev{background:#f5a742}
.mon-trend-svg{width:100%;height:245px;overflow:visible}.mon-trend-svg .axis{stroke:rgba(151,194,214,.17);stroke-width:1}.mon-trend-svg .line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.mon-trend-svg .line.curr{stroke:#16c6e9}.mon-trend-svg .line.prev{stroke:#f5a742;stroke-dasharray:7 6}.mon-trend-svg .dot.curr{fill:#16c6e9;stroke:#08283c;stroke-width:2}.mon-trend-svg text{fill:#789daf;font-size:9px;font-family:inherit}
.mon-mini-bars{display:flex;flex-direction:column;gap:13px;padding:16px 6px;direction:rtl}.mon-mini-row{display:grid;grid-template-columns:minmax(105px,145px) minmax(0,1fr) 32px;gap:10px;align-items:center}.mon-mini-row span{font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.mon-mini-row>div{height:10px;border-radius:99px;background:#10354e;overflow:hidden}.mon-mini-row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#16bde9,#27d5b0)}.mon-mini-row b{text-align:center;font-size:12px}
.mon-donut-wrap{display:grid;grid-template-columns:minmax(130px,145px) minmax(0,1fr);align-items:center;justify-content:center;gap:16px;padding:16px 10px;direction:rtl}.mon-donut{width:138px;height:138px;transform:rotate(-90deg)}.mon-donut .base{fill:none;stroke:#10354e;stroke-width:14}.mon-donut .seg{fill:none;stroke-width:14;stroke-linecap:butt}.mon-donut .s0{stroke:#ff5d73}.mon-donut .s1{stroke:#ffb43b}.mon-donut .s2{stroke:#22c8ef}.mon-donut .s3{stroke:#20d5a1}.mon-donut .s4{stroke:#8b5cf6}.mon-donut .s5{stroke:#94a3b8}.mon-donut text{transform:rotate(90deg);transform-origin:58px 58px;fill:#eaf8ff;font-family:inherit}.mon-donut .num{font-size:23px;font-weight:900}.mon-donut .lbl{font-size:8px;fill:#8eacbc}.mon-donut-legend{display:flex;flex-direction:column;gap:10px;direction:rtl}.mon-donut-legend span{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px;color:#a8c2cf;font-size:11px;text-align:right}.mon-donut-legend i{width:9px;height:9px;border-radius:2px}.mon-donut-legend i.s0{background:#ff5d73}.mon-donut-legend i.s1{background:#ffb43b}.mon-donut-legend i.s2{background:#22c8ef}.mon-donut-legend i.s3{background:#20d5a1}.mon-donut-legend i.s4{background:#8b5cf6}.mon-donut-legend i.s5{background:#94a3b8}.mon-donut-legend b{color:#fff}
.mon-governance{margin-bottom:16px}.mon-governance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.mon-governance-grid>div{padding:13px 14px;border-radius:13px;background:rgba(9,43,64,.62);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:5px}.mon-governance-grid b{font-size:11px;color:#d9edf5}.mon-governance-grid span{font-size:9px;color:#8daaba;line-height:1.6}
.mon-x-search-row{padding-inline:10px}
[data-theme="light"] .mon-time-panel,[data-theme="light"] .mon-perf,[data-theme="light"] .mon-yoy-strip,[data-theme="light"] .mon-chart-grid>.panel{background:#fff;color:#15364a}[data-theme="light"] .mon-presets button,[data-theme="light"] .mon-time-controls input[type=date]{background:#fff;color:#173b50;border-color:#d4e6ed}[data-theme="light"] .mon-perf small{color:#496979}[data-theme="light"] .mon-perf em,[data-theme="light"] .mon-time-controls label{color:#63808f}[data-theme="light"] .mon-yoy-strip{background:#f4fafc;border-color:#dcecf2}[data-theme="light"] .mon-mini-row>div,[data-theme="light"] .mon-donut .base{background:#e8f2f6;stroke:#e8f2f6}[data-theme="light"] .mon-donut text{fill:#173b50}[data-theme="light"] .mon-donut .lbl{fill:#6a8795}[data-theme="light"] .mon-donut-legend b{color:#173b50}[data-theme="light"] .mon-trend-svg .dot.curr{stroke:#fff}
@media(max-width:1500px){.mon-kpi-grid-8{grid-template-columns:repeat(2,minmax(0,1fr))}.mon-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mon-chart-wide{grid-column:1/-1}}
@media(max-width:900px){.mon-chart-grid{grid-template-columns:1fr}.mon-chart-wide{grid-column:auto}.mon-donut-wrap{grid-template-columns:130px 1fr}.mon-time-controls{align-items:stretch}.mon-time-controls label{flex:1;min-width:170px}.mon-time-controls input[type=date]{width:100%}}
@media(max-width:620px){.mon-kpi-grid-8{grid-template-columns:1fr}.mon-presets{width:100%}.mon-presets button{flex:1 1 calc(50% - 8px)}.mon-donut-wrap{grid-template-columns:1fr;justify-items:center}.mon-yoy-strip{align-items:flex-start;flex-direction:column}}


/* V205 — Distinct, contemporary monitoring charts */
.mon-lollipop-list{display:flex;flex-direction:column;gap:13px;padding:16px 12px;direction:rtl}
.mon-lollipop-row{display:grid;grid-template-columns:36px minmax(0,1fr) 42px;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;transition:transform .2s ease,background .2s ease}
.mon-lollipop-row:hover{transform:translateY(-2px);background:rgba(22,198,233,.055)}
.mon-rank{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:10px;font-weight:900;color:#63dff2;background:linear-gradient(145deg,rgba(22,198,233,.15),rgba(32,213,161,.08));border:1px solid rgba(22,198,233,.2)}
.mon-lollipop-main{min-width:0}
.mon-lollipop-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.mon-lollipop-label b{font-size:11px;color:#e8f8ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.mon-lollipop-label small{font-size:9px;color:#7299ab;white-space:nowrap}
.mon-lollipop-track{height:4px;background:rgba(88,142,166,.16);border-radius:999px;overflow:visible;position:relative}
.mon-lollipop-track>i{display:block;height:100%;position:relative;border-radius:999px;background:linear-gradient(90deg,#16bde9,#20d5a1);transition:width .45s ease}
.mon-lollipop-track>i>em{position:absolute;left:-5px;top:50%;width:11px;height:11px;transform:translateY(-50%);border-radius:50%;background:#24d4bb;box-shadow:0 0 0 4px rgba(36,212,187,.12),0 0 16px rgba(36,212,187,.28)}
.mon-lollipop-row>strong{font-size:12px;color:#dff7ff;text-align:center}

.mon-pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:22px 14px 16px;direction:rtl;align-items:stretch}
.mon-pipeline-step{position:relative;min-width:0;padding:14px 12px 13px;border-radius:18px;background:linear-gradient(155deg,rgba(12,50,72,.9),rgba(7,31,49,.72));border:1px solid rgba(127,185,209,.13);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;overflow:hidden}
.mon-pipeline-step:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--pipe,#22c8ef);opacity:.9}
.mon-pipeline-step:hover{transform:translateY(-3px);border-color:rgba(34,200,239,.25);box-shadow:0 10px 22px rgba(0,0,0,.14)}
.mon-pipeline-step.s0{--pipe:#22c8ef}.mon-pipeline-step.s1{--pipe:#8b5cf6}.mon-pipeline-step.s2{--pipe:#ffb43b}.mon-pipeline-step.s3{--pipe:#20d5a1}
.mon-pipe-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mon-pipe-top>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;color:#061f31;background:var(--pipe);box-shadow:0 0 0 5px color-mix(in srgb,var(--pipe) 12%,transparent)}
.mon-pipe-top>i{font-style:normal;color:#577f91;font-size:16px}
.mon-pipeline-step>b{display:block;font-size:10px;color:#a9c7d4;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.mon-pipeline-step>strong{display:block;font-size:25px;line-height:1;color:var(--pipe);margin:5px 0 6px}
.mon-pipeline-step>small{display:block;font-size:9px;color:#779daf;margin-bottom:10px}
.mon-pipe-meter{height:5px;border-radius:999px;background:rgba(87,137,159,.14);overflow:hidden}
.mon-pipe-meter i{display:block;height:100%;border-radius:inherit;background:var(--pipe);transition:width .45s ease}

.mon-donut .seg{transition:stroke-width .2s ease,opacity .2s ease;filter:drop-shadow(0 0 3px rgba(34,200,239,.12))}
.mon-donut-wrap:hover .mon-donut .seg{stroke-width:15}
.mon-chart-card{overflow:hidden}

[data-theme="light"] .mon-lollipop-label b,[data-theme="light"] .mon-lollipop-row>strong{color:#15364a}
[data-theme="light"] .mon-lollipop-row:hover{background:#f1f9fc}
[data-theme="light"] .mon-lollipop-track{background:#e5f0f4}
[data-theme="light"] .mon-pipeline-step{background:linear-gradient(155deg,#fff,#f5fafc);border-color:#dcebf1}
[data-theme="light"] .mon-pipeline-step>b{color:#355b6d}[data-theme="light"] .mon-pipeline-step>small{color:#6d8998}
[data-theme="light"] .mon-pipe-meter{background:#e6f0f4}

@media(max-width:1100px){.mon-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.mon-pipeline{grid-template-columns:1fr}.mon-lollipop-row{grid-template-columns:32px minmax(0,1fr) 36px}.mon-lollipop-label{align-items:flex-start;flex-direction:column;gap:2px}}

/* V207 — interactive priority donut -> exploded pie on hover */
.mon-donut-modern{grid-template-columns:minmax(200px,222px) minmax(0,1fr);gap:20px;padding:12px 14px 18px;min-height:214px}
.mon-donut-stage{position:relative;width:194px;height:194px;display:grid;place-items:center;isolation:isolate;outline:none;cursor:pointer;margin-inline:auto}
.mon-donut-stage:before{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 50% 46%,rgba(34,200,239,.11),rgba(32,213,161,.035) 54%,transparent 72%);transition:.35s ease;z-index:-1}
.mon-donut-stage .mon-donut,.mon-donut-stage .mon-hover-pie{position:absolute;inset:0;margin:auto;width:188px;height:188px;overflow:visible}
.mon-donut-stage .mon-donut{transform:rotate(-90deg);opacity:1;transition:opacity .26s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.mon-donut-stage .mon-donut .base{fill:none;stroke:#103b55;stroke-width:24;opacity:.72}
.mon-donut-stage .mon-donut .seg{fill:none;stroke-width:24;stroke-linecap:butt;transition:stroke-width .25s ease,opacity .25s ease;filter:url(#monGlow)}
.mon-donut-stage .mon-donut .s0{stroke:#ff6177}.mon-donut-stage .mon-donut .s1{stroke:#ffb63d}.mon-donut-stage .mon-donut .s2{stroke:#20c8ef}.mon-donut-stage .mon-donut .s3{stroke:#20d5a1}.mon-donut-stage .mon-donut .s4{stroke:#8b5cf6}.mon-donut-stage .mon-donut .s5{stroke:#94a3b8}
.mon-hover-pie{opacity:0;transform:scale(.72) rotate(-8deg);transition:opacity .28s ease,transform .46s cubic-bezier(.18,.86,.22,1);pointer-events:none;filter:drop-shadow(0 10px 20px rgba(0,0,0,.2))}
.mon-pie-part{transform-box:fill-box;transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .22s ease,opacity .22s ease}
.mon-pie-part.featured{transform:translate(var(--dx),var(--dy))}
.mon-pie-part .pie-slice{stroke:#082236;stroke-width:2.1;stroke-linejoin:round;transition:filter .22s ease,opacity .22s ease}
.mon-pie-part .f0{fill:#ff6177}.mon-pie-part .f1{fill:#ffb63d}.mon-pie-part .f2{fill:#20c8ef}.mon-pie-part .f3{fill:#20d5a1}.mon-pie-part .f4{fill:#8b5cf6}.mon-pie-part .f5{fill:#94a3b8}
.mon-pie-part .pie-value{fill:#f7fcff;font-size:9px;font-weight:900;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(4,28,43,.75);stroke-width:2px;pointer-events:none}
.mon-donut-core{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;transition:transform .3s ease,opacity .22s ease;z-index:3}
.mon-donut-core strong{font-size:32px;line-height:1;color:#effbff;text-shadow:0 0 18px rgba(34,200,239,.22)}
.mon-donut-core span{font-size:9px;color:#8aaaba;margin-top:5px;font-weight:800}
.mon-donut-hint{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;color:#6f98aa;opacity:.72;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.mon-donut-stage:hover .mon-donut,.mon-donut-stage:focus-visible .mon-donut{opacity:0;transform:rotate(-90deg) scale(.72)}
.mon-donut-stage:hover .mon-hover-pie,.mon-donut-stage:focus-visible .mon-hover-pie{opacity:1;transform:scale(1) rotate(0deg);pointer-events:auto}
.mon-donut-stage:hover .mon-donut-core,.mon-donut-stage:focus-visible .mon-donut-core{opacity:0;transform:scale(.72)}
.mon-donut-stage:hover .mon-donut-hint,.mon-donut-stage:focus-visible .mon-donut-hint{opacity:0;transform:translateX(-50%) translateY(5px)}
.mon-donut-stage:hover:before,.mon-donut-stage:focus-visible:before{transform:scale(1.08);border-radius:24%;background:radial-gradient(circle at 50% 48%,rgba(34,200,239,.10),rgba(139,92,246,.04) 58%,transparent 74%)}
.mon-hover-pie .mon-pie-part:hover{transform:translate(var(--dx),var(--dy)) scale(1.045);filter:drop-shadow(0 6px 9px rgba(0,0,0,.24));z-index:3}
.mon-hover-pie:hover .mon-pie-part:not(:hover){opacity:.78}
.mon-donut-modern .mon-donut-legend{gap:8px}
.mon-donut-modern .mon-donut-legend span{grid-template-columns:11px minmax(0,1fr) 24px 34px;padding:8px 10px;border:1px solid rgba(127,185,209,.10);border-radius:11px;background:rgba(9,39,58,.42);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.mon-donut-modern .mon-donut-legend span:hover{transform:translateX(-3px);border-color:rgba(34,200,239,.26);background:rgba(12,52,73,.68)}
.mon-donut-modern .mon-donut-legend em{font-style:normal;color:#b6d0da;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.mon-donut-modern .mon-donut-legend small{font-size:9px;color:#6f98aa;text-align:left}
.mon-donut-modern .mon-donut-legend i{border-radius:50%;box-shadow:0 0 8px rgba(34,200,239,.12)}
[data-theme="light"] .mon-donut-stage .mon-donut .base{stroke:#e3eef3}
[data-theme="light"] .mon-donut-core strong{color:#15364a;text-shadow:none}
[data-theme="light"] .mon-pie-part .pie-slice{stroke:#f8fbfc}
[data-theme="light"] .mon-pie-part .pie-value{fill:#14384b;stroke:rgba(255,255,255,.86)}
[data-theme="light"] .mon-donut-modern .mon-donut-legend span{background:#f8fcfd;border-color:#e0edf2}
[data-theme="light"] .mon-donut-modern .mon-donut-legend em{color:#31576a}
@media(max-width:620px){.mon-donut-modern{grid-template-columns:1fr}.mon-donut-stage{width:178px;height:178px}.mon-donut-stage .mon-donut,.mon-donut-stage .mon-hover-pie{width:172px;height:172px}}


.mon-place-chart-card .mon-place-bars{padding-top:16px}.mon-place-chart-card .mon-place-row{grid-template-columns:minmax(105px,145px) minmax(0,1fr) 28px;gap:8px}.mon-place-chart-card .mon-place-row span{font-size:11px}.mon-place-chart-card .mon-place-row>div{height:10px}.mon-place-chart-card .panel-head{min-height:58px}

/* V211 — Monitoring filters: vertical matrix for full label visibility */
.mon-filter-panel .mon-filters{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:10px !important;
  align-items:stretch;
}
.mon-filter-panel .mon-filters > *{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  grid-column:1 / -1 !important;
  box-sizing:border-box;
}
.mon-filter-panel .mon-filters input,
.mon-filter-panel .mon-filters select,
.mon-filter-panel .mon-filters button{
  min-height:46px;
  font-size:14px;
}
.mon-filter-panel .mon-filters input,
.mon-filter-panel .mon-filters select{
  direction:rtl;
  text-align:right;
  padding-inline:14px 42px;
}
.mon-filter-panel .mon-filters input{
  padding-inline:14px;
}
.mon-filter-panel .mon-filters .secondary-btn{
  justify-content:center;
}
@media(max-width:1200px){
  .mon-filter-panel .mon-filters{grid-template-columns:minmax(0,1fr) !important}
  .mon-filter-panel .mon-filters input{grid-column:1 / -1 !important}
}
@media(max-width:760px){
  .mon-filter-panel .mon-filter-head{align-items:flex-start;gap:10px;flex-direction:column}
  .mon-filter-panel .v151-head-actions{width:100%}
  .mon-filter-panel .v151-head-actions .secondary-btn{flex:1}
}

/* V213 — top search + filters aligned horizontally */
.mon-top-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  direction:rtl;
  align-items:stretch;
  margin-bottom:14px;
}
.mon-top-tools > .panel{margin:0;min-width:0;height:100%}
.mon-filter-panel-top{display:flex;flex-direction:column;justify-content:space-between}
.mon-filter-panel-top .mon-filter-head{margin-bottom:10px;align-items:center;gap:10px}
.mon-filter-panel-top .v151-head-actions{display:flex;gap:8px;flex-wrap:nowrap}
.mon-filter-panel-top .v151-head-actions .secondary-btn{white-space:nowrap}
.mon-filter-panel-top .mon-filters{
  display:grid !important;
  grid-template-columns:minmax(170px,1.45fr) repeat(4,minmax(92px,.86fr)) minmax(88px,.78fr) !important;
  gap:8px !important;
  align-items:center;
}
.mon-filter-panel-top .mon-filters > *{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  grid-column:auto !important;
  box-sizing:border-box;
  min-height:42px;
  margin:0;
}
.mon-filter-panel-top .mon-filters input,
.mon-filter-panel-top .mon-filters select{
  direction:rtl;
  text-align:right;
  padding-inline:12px 34px;
  font-size:12px;
}
.mon-filter-panel-top .mon-filters input{padding-inline:12px}
.mon-filter-panel-top .mon-reset-filter{justify-content:center;white-space:nowrap}
.mon-x-search-top .mon-filter-head{margin-bottom:10px}
.mon-x-search-top .mon-x-search-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 116px;gap:8px;align-items:center}
.mon-x-search-top .mon-x-search-row > *{min-width:0;width:100%}

/* neutralize V211 vertical-only behavior for the relocated filter panel */
.mon-filter-panel-top .mon-filters input,
.mon-filter-panel-top .mon-filters select,
.mon-filter-panel-top .mon-filters button{font-size:12px}

@media(max-width:1450px){
  .mon-top-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mon-filter-panel-top .mon-filters{grid-template-columns:minmax(170px,1.45fr) repeat(4,minmax(92px,.86fr)) minmax(88px,.78fr) !important}
}
@media(max-width:980px){
  .mon-filter-panel-top .mon-filters{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .mon-filter-panel-top .mon-filters input{grid-column:1 / -1 !important}
}
@media(max-width:620px){
  .mon-filter-panel-top .mon-filter-head{align-items:flex-start;flex-direction:column}
  .mon-filter-panel-top .v151-head-actions{width:100%;flex-wrap:wrap}
  .mon-filter-panel-top .v151-head-actions .secondary-btn{flex:1 1 140px}
  .mon-filter-panel-top .mon-filters{grid-template-columns:1fr !important}
  .mon-filter-panel-top .mon-filters > *{grid-column:1 / -1 !important}
  .mon-x-search-top .mon-x-search-row{grid-template-columns:1fr 82px}
  .mon-x-search-top .mon-x-search-row input{grid-column:1 / -1}
}

/* V214 — vertical lifecycle matrix */
.mon-pipeline.mon-pipeline-vertical{display:grid;grid-template-columns:1fr;gap:10px;padding:16px 14px;direction:rtl;align-items:stretch}
.mon-pipeline-vertical .mon-pipeline-step{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-areas:"top body" "meter meter";align-items:center;gap:8px 12px;padding:11px 12px;min-height:72px}
.mon-pipeline-vertical .mon-pipe-top{grid-area:top;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%}
.mon-pipeline-vertical .mon-pipe-top span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--pipe) 18%,transparent);border:1px solid color-mix(in srgb,var(--pipe) 45%,transparent);color:var(--pipe);font-weight:900}
.mon-pipeline-vertical .mon-pipe-top i{font-style:normal;color:#6d97aa;font-size:14px;line-height:1}
.mon-pipeline-vertical .mon-pipe-body{grid-area:body;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;text-align:right}
.mon-pipeline-vertical .mon-pipe-body>b{font-size:12px;color:#dceef5;white-space:normal;overflow:visible;text-overflow:clip;text-align:right}
.mon-pipeline-vertical .mon-pipe-body>strong{font-size:22px;line-height:1;color:var(--pipe);margin:0}
.mon-pipeline-vertical .mon-pipe-body>small{font-size:10px;color:#7fa2b2;white-space:nowrap}
.mon-pipeline-vertical .mon-pipe-meter{grid-area:meter;margin-top:2px}
[data-theme="light"] .mon-pipeline-vertical .mon-pipe-body>b{color:#244d60}
@media(max-width:620px){.mon-pipeline-vertical .mon-pipe-body{grid-template-columns:1fr auto}.mon-pipeline-vertical .mon-pipe-body>small{grid-column:1/-1}}

/* V215 — compact performance chart row to the requested visual baseline */
@media (min-width:1101px){
  .mon-chart-grid>.mon-chart-card{
    height:290px !important;
    min-height:290px !important;
    max-height:290px !important;
    overflow:hidden;
  }
  .mon-chart-card .panel-head{
    min-height:62px;
    padding-top:12px;
    padding-bottom:10px;
  }
  .mon-chart-card .panel-head h3{margin-bottom:3px}
  .mon-chart-card .panel-head small{line-height:1.35}

  /* priority donut: keep the visual readable inside the reduced card */
  .mon-chart-card .mon-donut-modern{
    min-height:0;
    grid-template-columns:minmax(154px,170px) minmax(0,1fr);
    gap:10px;
    padding:4px 10px 8px;
    align-items:center;
  }
  .mon-chart-card .mon-donut-stage{width:158px;height:158px}
  .mon-chart-card .mon-donut-stage .mon-donut,
  .mon-chart-card .mon-donut-stage .mon-hover-pie{width:152px;height:152px}
  .mon-chart-card .mon-donut-core strong{font-size:27px}
  .mon-chart-card .mon-donut-modern .mon-donut-legend{gap:5px}
  .mon-chart-card .mon-donut-modern .mon-donut-legend span{padding:5px 7px;min-height:28px}

  /* category lollipop: denser rows, same information */
  .mon-chart-card .mon-lollipop-list{gap:5px;padding:7px 9px 8px}
  .mon-chart-card .mon-lollipop-row{padding:4px 6px;gap:7px;border-radius:10px}
  .mon-chart-card .mon-lollipop-label{margin-bottom:4px}

  /* lifecycle: four vertical records fit fully before the requested baseline */
  .mon-pipeline.mon-pipeline-vertical{
    gap:4px;
    padding:6px 9px 8px;
  }
  .mon-pipeline-vertical .mon-pipeline-step{
    grid-template-columns:34px minmax(0,1fr);
    gap:3px 8px;
    padding:5px 8px;
    min-height:43px;
    border-radius:12px;
  }
  .mon-pipeline-vertical .mon-pipe-top{gap:1px}
  .mon-pipeline-vertical .mon-pipe-top span{width:24px;height:24px;font-size:10px}
  .mon-pipeline-vertical .mon-pipe-top i{font-size:10px}
  .mon-pipeline-vertical .mon-pipe-body{gap:7px}
  .mon-pipeline-vertical .mon-pipe-body>b{font-size:10px;line-height:1.2}
  .mon-pipeline-vertical .mon-pipe-body>strong{font-size:17px}
  .mon-pipeline-vertical .mon-pipe-body>small{font-size:8px}
  .mon-pipeline-vertical .mon-pipe-meter{margin-top:0}

  /* top locations: show all rows without forcing the shared row taller */
  .mon-place-chart-card .mon-place-bars{gap:8px;padding:7px 2px 8px}
  .mon-place-chart-card .mon-place-row{gap:7px}
  .mon-place-chart-card .mon-place-row span{font-size:10px}
  .mon-place-chart-card .mon-place-row>div{height:8px}
  .mon-place-chart-card .panel-head{min-height:62px}
}


/* V216 — clean four-chart row, centered priority donut, complete lifecycle */
@media (min-width:1101px){
  /* Chart headers: titles only; remove the old descriptive second line cleanly. */
  .mon-chart-grid>.mon-chart-card .panel-head{
    min-height:46px !important;
    height:46px !important;
    padding:9px 12px 8px !important;
    align-items:center !important;
  }
  .mon-chart-grid>.mon-chart-card .panel-head>div{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:28px;
  }
  .mon-chart-grid>.mon-chart-card .panel-head h3{
    margin:0 !important;
    line-height:1.25;
  }

  /* Priority: donut centered, legend below it in one horizontal strip. */
  .mon-chart-card .mon-donut-modern{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    justify-items:center !important;
    align-content:start !important;
    gap:4px !important;
    padding:4px 10px 6px !important;
    min-height:0 !important;
  }
  .mon-chart-card .mon-donut-stage{
    grid-column:1 !important;
    grid-row:1 !important;
    width:150px !important;
    height:150px !important;
    margin:0 auto !important;
  }
  .mon-chart-card .mon-donut-stage .mon-donut,
  .mon-chart-card .mon-donut-stage .mon-hover-pie{
    width:146px !important;
    height:146px !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    align-items:stretch !important;
    direction:rtl !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend span{
    display:grid !important;
    grid-template-columns:8px minmax(0,1fr) !important;
    grid-template-areas:"dot label" "count pct" !important;
    column-gap:5px !important;
    row-gap:1px !important;
    min-width:0 !important;
    min-height:34px !important;
    padding:4px 5px !important;
    border-radius:9px !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend i{grid-area:dot;width:7px !important;height:7px !important;align-self:center}
  .mon-chart-card .mon-donut-modern .mon-donut-legend em{grid-area:label;font-size:8px !important;line-height:1.1;overflow:visible !important;text-overflow:clip !important;white-space:nowrap !important}
  .mon-chart-card .mon-donut-modern .mon-donut-legend b{grid-area:count;font-size:10px !important;text-align:center}
  .mon-chart-card .mon-donut-modern .mon-donut-legend small{grid-area:pct;font-size:8px !important;text-align:right !important}

  /* Lifecycle: guarantee all four vertical stages are fully visible. */
  .mon-pipeline.mon-pipeline-vertical{
    height:calc(100% - 46px) !important;
    box-sizing:border-box !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    gap:3px !important;
    padding:5px 8px 6px !important;
    overflow:hidden !important;
  }
  .mon-pipeline-vertical .mon-pipeline-step{
    min-height:0 !important;
    height:auto !important;
    padding:4px 7px !important;
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:2px 7px !important;
    border-radius:10px !important;
  }
  .mon-pipeline-vertical .mon-pipe-top span{width:22px !important;height:22px !important;font-size:9px !important}
  .mon-pipeline-vertical .mon-pipe-top i{font-size:9px !important}
  .mon-pipeline-vertical .mon-pipe-body{gap:6px !important}
  .mon-pipeline-vertical .mon-pipe-body>b{font-size:9px !important;line-height:1.15 !important}
  .mon-pipeline-vertical .mon-pipe-body>strong{font-size:16px !important}
  .mon-pipeline-vertical .mon-pipe-body>small{font-size:7.5px !important}
  .mon-pipeline-vertical .mon-pipe-meter{height:4px !important}

  /* Recover the header height in the other compact charts as usable plotting space. */
  .mon-place-chart-card .panel-head{min-height:46px !important;height:46px !important}
  .mon-place-chart-card .mon-place-bars{padding-top:6px !important}
  .mon-chart-card .mon-lollipop-list{padding-top:5px !important}
}

/* V217 — Monitoring KPI cards in one horizontal row on wide screens */
@media (min-width:1501px){
  .mon-kpi-grid.mon-kpi-grid-8{
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:10px;
    align-items:stretch;
  }
  .mon-kpi-grid-8 .mon-kpi,
  .mon-kpi-grid-8 .mon-perf{
    min-width:0;
    min-height:108px;
    padding:13px 11px;
    gap:8px;
    border-radius:16px;
  }
  .mon-kpi-grid-8 .mon-kpi-icon{width:36px;height:36px;flex:0 0 36px}
  .mon-kpi-grid-8 .mon-perf-icon{width:32px;height:32px;flex:0 0 32px}
  .mon-kpi-grid-8 .mon-kpi>div,
  .mon-kpi-grid-8 .mon-perf>div{min-width:0;flex:1}
  .mon-kpi-grid-8 .mon-kpi small,
  .mon-kpi-grid-8 .mon-perf small{font-size:10px;line-height:1.25;white-space:normal}
  .mon-kpi-grid-8 .mon-kpi b{font-size:24px}
  .mon-kpi-grid-8 .mon-perf b{font-size:23px}
  .mon-kpi-grid-8 .mon-kpi em,
  .mon-kpi-grid-8 .mon-perf em{font-size:9px;line-height:1.35;white-space:normal}
  .mon-kpi-grid-8 .mon-delta{left:8px;bottom:7px;font-size:8px;padding:3px 6px}
}
@media (min-width:1201px) and (max-width:1500px){
  .mon-kpi-grid.mon-kpi-grid-8{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* V222 — Full-width daily interactive annual trend with week/day detail */
.mon-chart-wide{position:relative;overflow:hidden;min-height:470px!important}
.mon-chart-wide>.panel-head{direction:rtl;text-align:right;align-items:flex-start}
.mon-chart-wide>.panel-head>div{width:100%;text-align:right}
.mon-annual-legend{justify-content:flex-end;margin:0 12px 10px;direction:rtl;font-size:11px}
.mon-annual-legend i.prev{background:transparent;border-top:3px dashed #f5a742;height:0}
.mon-trend-wrap{position:relative;min-height:392px;padding:0 2px 6px;width:100%}
.mon-trend-annual{height:390px;display:block;overflow:visible;width:100%}
.mon-trend-annual .grid{stroke:rgba(120,170,195,.16);stroke-width:1;stroke-dasharray:3 4}
.mon-trend-annual .week-guide{stroke:rgba(88,150,175,.12);stroke-width:1;stroke-dasharray:2 8}
.mon-trend-annual .month-guide{stroke:rgba(121,193,219,.24);stroke-width:1.2;stroke-dasharray:5 6}
.mon-trend-annual .area.curr{fill:url(#monTrendArea);stroke:none}
.mon-trend-annual .line{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mon-trend-annual .line.curr{stroke:#16c6e9;filter:url(#monGlow)}
.mon-trend-annual .line.prev{stroke:#f5a742;stroke-dasharray:9 7}
.mon-trend-annual .month-label{fill:#9fc3d2;font-size:11px;font-weight:700;font-family:inherit}
.mon-trend-annual .day-label{fill:#88a8b7;font-size:9px;font-weight:600;font-family:inherit}
.mon-trend-annual .week-label{fill:#5ecfe6;font-size:8.4px;font-weight:700;font-family:inherit}
.mon-trend-annual .y-label,.mon-trend-annual .axis-title{fill:#86aaba;font-size:10px;font-weight:700;font-family:inherit}
.mon-trend-annual .trend-hover-line{stroke:rgba(220,244,255,.55);stroke-width:1.3;stroke-dasharray:4 4;pointer-events:none}
.mon-trend-annual .trend-marker{vector-effect:non-scaling-stroke;pointer-events:none}
.mon-trend-annual .trend-marker.curr{fill:#16c6e9;stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 0 8px rgba(22,198,233,.7))}
.mon-trend-annual .trend-marker.prev{fill:#f5a742;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 7px rgba(245,167,66,.45))}
.mon-trend-tooltip{position:absolute;z-index:4;min-width:210px;padding:11px 13px;border:1px solid rgba(82,169,203,.38);background:rgba(7,31,47,.96);box-shadow:0 14px 35px rgba(0,0,0,.28);border-radius:12px;color:#eefaff;direction:rtl;text-align:right;pointer-events:none;backdrop-filter:blur(8px)}
.mon-trend-tooltip b{display:block;font-size:13px;margin-bottom:2px;color:#fff}
.mon-trend-tooltip .tt-week{display:block;font-size:11px;color:#8fc2d6;margin-bottom:7px}
.mon-trend-tooltip span{display:flex;align-items:center;gap:7px;justify-content:space-between;font-size:11px;color:#acc8d5;margin-top:5px}
.mon-trend-tooltip span i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;margin-inline-end:2px}
.mon-trend-tooltip span i.curr{background:#16c6e9;box-shadow:0 0 8px rgba(22,198,233,.7)}
.mon-trend-tooltip span i.prev{background:#f5a742;box-shadow:0 0 8px rgba(245,167,66,.55)}
.mon-trend-tooltip strong{color:#fff;font-size:13px;margin-inline-start:auto}
.mon-trend-summary{display:flex;justify-content:flex-start;gap:10px;direction:rtl;margin:0 12px 8px;color:#83a6b6;font-size:10px}
.mon-trend-summary span{background:rgba(22,198,233,.055);border:1px solid rgba(72,148,176,.18);padding:4px 8px;border-radius:999px}
.mon-trend-summary b{color:#e7faff}
[data-theme="light"] .mon-trend-tooltip{background:rgba(255,255,255,.98);color:#163b4e;border-color:#cfe3eb;box-shadow:0 12px 28px rgba(47,90,109,.16)}
[data-theme="light"] .mon-trend-tooltip b,[data-theme="light"] .mon-trend-tooltip strong{color:#163b4e}
[data-theme="light"] .mon-trend-tooltip .tt-week{color:#5e8090}
[data-theme="light"] .mon-trend-annual .month-label,[data-theme="light"] .mon-trend-annual .y-label,[data-theme="light"] .mon-trend-annual .axis-title{fill:#53788a}
[data-theme="light"] .mon-trend-annual .day-label{fill:#7795a3}
[data-theme="light"] .mon-trend-annual .week-label{fill:#199fbc}
@media(max-width:1000px){.mon-trend-wrap{overflow-x:auto}.mon-trend-annual{min-width:1320px}.mon-annual-legend{justify-content:flex-start}.mon-trend-tooltip{display:none!important}}

/* V220 — equal half-row X search + monitoring filters; subtitles removed */
.mon-top-tools{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.mon-top-tools>.panel{height:auto;min-height:128px}
.mon-x-search-top,.mon-filter-panel-top{padding:14px 16px}
.mon-x-search-top .mon-filter-head,.mon-filter-panel-top .mon-filter-head{min-height:28px;margin-bottom:10px}
.mon-x-search-top .mon-filter-head h3,.mon-filter-panel-top .mon-filter-head h3{margin:0;line-height:1.25}
.mon-filter-panel-top .mon-filter-head{display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.mon-filter-panel-top .v151-head-actions{margin-inline-start:auto}
.mon-filter-panel-top .mon-filters{grid-template-columns:minmax(160px,1.45fr) repeat(4,minmax(88px,.82fr)) minmax(88px,.76fr)!important;gap:7px!important}
.mon-filter-panel-top .mon-filters>*{min-height:40px}
.mon-filter-panel-top .mon-filters input,.mon-filter-panel-top .mon-filters select,.mon-filter-panel-top .mon-filters button{font-size:11.5px}
.mon-x-search-top .mon-x-search-row{grid-template-columns:minmax(0,1fr) 82px 112px;gap:8px}
@media(max-width:1180px){.mon-top-tools{grid-template-columns:1fr}.mon-top-tools>.panel{min-height:auto}}

/* V221 — priority donut visual alignment cleanup */
@media (min-width:1101px){
  .mon-chart-card .mon-donut-modern{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:100% !important;
    padding:6px 12px 10px !important;
    box-sizing:border-box !important;
    min-height:0 !important;
  }

  .mon-chart-card .mon-donut-stage{
    width:148px !important;
    height:148px !important;
    flex:0 0 148px !important;
    margin:0 auto !important;
    position:relative !important;
  }
  .mon-chart-card .mon-donut-stage .mon-donut,
  .mon-chart-card .mon-donut-stage .mon-hover-pie{
    width:144px !important;
    height:144px !important;
    inset:2px !important;
  }
  .mon-chart-card .mon-donut-core strong{font-size:28px !important}
  .mon-chart-card .mon-donut-core span{font-size:8px !important;margin-top:4px !important}

  /* Remove the old helper caption that visually collided with the legend. */
  .mon-chart-card .mon-donut-hint{display:none !important}

  /* Priority indicators: one centered horizontal strip directly below the donut. */
  .mon-chart-card .mon-donut-modern .mon-donut-legend{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    direction:rtl !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend span{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    min-width:0 !important;
    width:auto !important;
    min-height:30px !important;
    padding:5px 8px !important;
    border-radius:9px !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend i{
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
    margin:0 !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend em{
    font-size:8.5px !important;
    line-height:1 !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend b{
    font-size:10px !important;
    line-height:1 !important;
    margin:0 1px 0 0 !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend small{
    font-size:7.5px !important;
    line-height:1 !important;
    margin:0 !important;
    text-align:center !important;
  }
}

@media (min-width:621px) and (max-width:1100px){
  .mon-donut-modern{grid-template-columns:1fr !important;justify-items:center !important}
  .mon-donut-modern .mon-donut-legend{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;width:100% !important}
  .mon-donut-hint{display:none !important}
}


/* V223 — enlarge priority donut, push legend lower, and clean edge rendering */
@media (min-width:1101px){
  .mon-chart-card .mon-donut-modern{
    min-height:245px !important;
    gap:10px !important;
    padding:8px 12px 14px !important;
  }
  .mon-chart-card .mon-donut-stage{
    width:182px !important;
    height:182px !important;
    flex:0 0 182px !important;
    margin:0 auto !important;
  }
  .mon-chart-card .mon-donut-stage .mon-donut,
  .mon-chart-card .mon-donut-stage .mon-hover-pie{
    width:178px !important;
    height:178px !important;
    inset:2px !important;
  }
  .mon-chart-card .mon-donut-stage .mon-donut .base{
    stroke-width:25px !important;
    opacity:.86 !important;
  }
  .mon-chart-card .mon-donut-stage .mon-donut .seg{
    stroke-width:25px !important;
    filter:none !important;
    shape-rendering:geometricPrecision !important;
  }
  .mon-chart-card .mon-donut-core strong{font-size:36px !important}
  .mon-chart-card .mon-donut-core span{font-size:10px !important}
  .mon-chart-card .mon-donut-modern .mon-donut-legend{
    margin-top:auto !important;
    padding-top:10px !important;
    justify-content:center !important;
    align-self:center !important;
    width:100% !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend span{
    min-height:34px !important;
    padding:7px 10px !important;
    gap:6px !important;
  }
  .mon-chart-card .mon-donut-modern .mon-donut-legend em{font-size:9px !important}
  .mon-chart-card .mon-donut-modern .mon-donut-legend b{font-size:11px !important}
  .mon-chart-card .mon-donut-modern .mon-donut-legend small{font-size:8px !important}
}
@media (min-width:621px) and (max-width:1100px){
  .mon-chart-card .mon-donut-stage{width:176px !important;height:176px !important;flex-basis:176px !important}
  .mon-chart-card .mon-donut-stage .mon-donut,
  .mon-chart-card .mon-donut-stage .mon-hover-pie{width:170px !important;height:170px !important}
  .mon-chart-card .mon-donut-stage .mon-donut .seg{filter:none !important;shape-rendering:geometricPrecision !important}
  .mon-chart-card .mon-donut-modern .mon-donut-legend{margin-top:auto !important;padding-top:10px !important;width:100% !important}
}
@media (max-width:620px){
  .mon-chart-card .mon-donut-stage{width:168px !important;height:168px !important}
  .mon-chart-card .mon-donut-stage .mon-donut,
  .mon-chart-card .mon-donut-stage .mon-hover-pie{width:162px !important;height:162px !important}
  .mon-chart-card .mon-donut-stage .mon-donut .seg{filter:none !important;shape-rendering:geometricPrecision !important}
  .mon-chart-card .mon-donut-modern .mon-donut-legend{margin-top:auto !important;padding-top:10px !important}
}


/* V224 — generalize latest donut polish to all monitoring donuts */
.mon-donut-hint{display:none !important}
.mon-donut-stage .mon-donut .seg{filter:none !important;shape-rendering:geometricPrecision !important}
.mon-donut-stage .mon-donut .base{shape-rendering:geometricPrecision !important}
.mon-donut-modern{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:10px !important}
.mon-donut-modern .mon-donut-stage{margin:0 auto !important}
.mon-donut-modern .mon-donut-legend{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;justify-content:center !important;align-items:center !important;gap:8px !important;width:100% !important;margin:0 auto !important;padding-top:10px !important;direction:rtl !important}
.mon-donut-modern .mon-donut-legend span{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:6px !important;min-height:34px !important;padding:7px 10px !important;border-radius:10px !important;white-space:nowrap !important}
.mon-donut-modern .mon-donut-legend i{width:7px !important;height:7px !important;flex:0 0 7px !important}
.mon-donut-modern .mon-donut-legend em{font-size:9px !important;line-height:1 !important;overflow:visible !important;text-overflow:clip !important;white-space:nowrap !important;margin:0 !important}
.mon-donut-modern .mon-donut-legend b{font-size:11px !important;line-height:1 !important;margin:0 !important}
.mon-donut-modern .mon-donut-legend small{font-size:8px !important;line-height:1 !important;margin:0 !important}
@media (max-width:900px){.mon-donut-modern .mon-donut-legend{flex-wrap:wrap !important}}


/* V227 — stretch bar charts and move right labels inward across monitoring/platform chart cards */
.mon-chart-grid>.panel,.mon-overview-grid>.panel{display:flex;flex-direction:column}
.mon-chart-grid>.panel .mon-place-bars,.mon-chart-grid>.panel .mon-mini-bars,.mon-overview-grid>.panel .mon-place-bars,.mon-overview-grid>.panel .mon-mini-bars{flex:1 1 auto;min-height:210px;height:100%;justify-content:space-evenly;padding:18px 14px 18px 12px}
.mon-chart-grid>.panel .mon-place-row,.mon-overview-grid>.panel .mon-place-row{grid-template-columns:42px minmax(0,1fr) minmax(112px,154px);gap:14px;padding-inline:8px;min-height:30px}
.mon-chart-grid>.panel .mon-mini-row,.mon-overview-grid>.panel .mon-mini-row{grid-template-columns:36px minmax(0,1fr) minmax(102px,142px);gap:12px;padding-inline:8px;min-height:28px}
.mon-chart-grid>.panel .mon-place-row span,.mon-overview-grid>.panel .mon-place-row span,.mon-chart-grid>.panel .mon-mini-row span,.mon-overview-grid>.panel .mon-mini-row span{text-align:right;padding-inline-end:12px;overflow:visible;text-overflow:clip;max-width:none}
.mon-chart-grid>.panel .mon-place-row b,.mon-overview-grid>.panel .mon-place-row b{width:42px}
.mon-chart-grid>.panel .mon-mini-row b,.mon-overview-grid>.panel .mon-mini-row b{width:36px}
@media(max-width:620px){.mon-chart-grid>.panel .mon-place-bars,.mon-chart-grid>.panel .mon-mini-bars,.mon-overview-grid>.panel .mon-place-bars,.mon-overview-grid>.panel .mon-mini-bars{min-height:190px;padding:14px 8px}.mon-chart-grid>.panel .mon-place-row,.mon-overview-grid>.panel .mon-place-row{grid-template-columns:34px minmax(0,1fr) minmax(82px,118px);gap:10px;padding-inline:4px}.mon-chart-grid>.panel .mon-mini-row,.mon-overview-grid>.panel .mon-mini-row{grid-template-columns:30px minmax(0,1fr) minmax(76px,110px);gap:10px;padding-inline:4px}.mon-chart-grid>.panel .mon-place-row span,.mon-overview-grid>.panel .mon-place-row span,.mon-chart-grid>.panel .mon-mini-row span,.mon-overview-grid>.panel .mon-mini-row span{padding-inline-end:8px}}


/* V228 — visual cleanup for monitoring chart cards: full-height category bars and organized top locations */
@media (min-width:1101px){
  .mon-chart-grid>.mon-chart-card{
    height:302px !important;
    min-height:302px !important;
    max-height:302px !important;
  }

  /* More complaint types: stretch rows across full card height */
  .mon-chart-card .mon-lollipop-list{
    height:calc(100% - 46px) !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-evenly !important;
    gap:10px !important;
    padding:14px 14px 16px !important;
  }
  .mon-chart-card .mon-lollipop-row{
    grid-template-columns:40px minmax(0,1fr) 54px !important;
    min-height:44px !important;
    padding:8px 10px !important;
    gap:10px !important;
    border-radius:12px !important;
  }
  .mon-chart-card .mon-lollipop-main{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-height:34px !important;
  }
  .mon-chart-card .mon-lollipop-label{
    margin-bottom:7px !important;
    align-items:center !important;
  }
  .mon-chart-card .mon-lollipop-label b{
    font-size:12px !important;
    line-height:1.2 !important;
  }
  .mon-chart-card .mon-lollipop-label small{
    font-size:10px !important;
  }
  .mon-chart-card .mon-lollipop-track{height:6px !important}
  .mon-chart-card .mon-lollipop-row>strong{font-size:12px !important}

  /* Top locations: fill full card and move right labels inward cleanly */
  .mon-place-chart-card .mon-place-bars{
    height:calc(100% - 46px) !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-evenly !important;
    gap:10px !important;
    padding:14px 14px 16px !important;
  }
  .mon-place-chart-card .mon-place-row{
    direction:ltr !important;
    grid-template-columns:42px minmax(0,1fr) minmax(132px,160px) !important;
    gap:12px !important;
    min-height:32px !important;
    padding:0 8px !important;
  }
  .mon-place-chart-card .mon-place-row b{
    width:42px !important;
    text-align:left !important;
  }
  .mon-place-chart-card .mon-place-row>div{height:10px !important}
  .mon-place-chart-card .mon-place-row span{
    direction:rtl !important;
    text-align:right !important;
    padding-right:14px !important;
    padding-left:0 !important;
    font-size:11px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media (max-width:1100px){
  .mon-chart-grid>.mon-chart-card .mon-lollipop-list{padding:12px 12px 14px !important}
  .mon-place-chart-card .mon-place-bars{padding:12px 12px 14px !important}
  .mon-place-chart-card .mon-place-row{direction:ltr !important;grid-template-columns:34px minmax(0,1fr) minmax(98px,132px) !important;gap:10px !important}
  .mon-place-chart-card .mon-place-row span{direction:rtl !important;text-align:right !important;padding-right:10px !important}
}

/* ── X page v2: smart search, cards, relevance, excluded list, lightbox ── */
.mon-x-search-row{display:grid;grid-template-columns:minmax(190px,240px) 1fr 90px auto;gap:10px;align-items:center}
.mon-x-search-row input:disabled{opacity:.55}
.mon-x-cost{margin-top:8px;font-size:12.5px;color:var(--muted)}
.mon-x-cost b{color:var(--ink)}
.mon-x-lastrun{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.8}
.mon-x-lastrun .bad{color:#e5484d}
.mon-x-search-head small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.mon-view-switch{display:flex;align-items:center;gap:10px}
.mon-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mon-seg button{background:transparent;border:0;color:var(--muted);padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}
.mon-seg button.active{background:var(--primary);color:#fff}
.mon-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;padding-top:6px}
.mon-card-grid.compact{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.mon-card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--primary);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.mon-card.prio-danger{border-inline-start-color:#e5484d}
.mon-card.prio-warn{border-inline-start-color:#f5a524}
.mon-card.prio-good{border-inline-start-color:#22a06b}
.mon-card.is-excluded{opacity:.88;border-inline-start-color:#8a9aa8;border-style:dashed;border-inline-start-style:solid}
.mon-card-head{display:flex;align-items:center;gap:10px}
.mon-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:700}
.mon-card-who{flex:1;min-width:0}
.mon-card-who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-card-who small,.mon-card-when small{color:var(--muted);font-size:12px}
.mon-card-when{text-align:end;font-size:12.5px;display:flex;flex-direction:column}
.mon-card-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mon-chip{font-size:12px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--ink)}
.mon-rel{position:relative;display:inline-flex;align-items:center;min-width:74px;height:22px;border-radius:999px;background:color-mix(in srgb,var(--muted) 15%,transparent);overflow:hidden;margin-inline-start:auto}
.mon-rel i{position:absolute;inset-block:0;inset-inline-start:0;opacity:.35}
.mon-rel b{position:relative;width:100%;text-align:center;font-size:12px}
.mon-rel.tone-good i{background:#22a06b}.mon-rel.tone-info i{background:var(--primary)}.mon-rel.tone-warn i{background:#f5a524}.mon-rel.tone-danger i{background:#e5484d}
.mon-card-text{margin:0;line-height:1.85;font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.mon-thumbs{display:grid;gap:6px;border-radius:12px;overflow:hidden}
.mon-thumbs-1{grid-template-columns:1fr}.mon-thumbs-2{grid-template-columns:1fr 1fr}.mon-thumbs-3,.mon-thumbs-4{grid-template-columns:1fr 1fr}
.mon-thumb{position:relative;aspect-ratio:16/10;border:0;padding:0;cursor:zoom-in;background:color-mix(in srgb,var(--muted) 14%,transparent);border-radius:8px;overflow:hidden;display:grid;place-items:center}
.mon-thumbs-1 .mon-thumb{aspect-ratio:16/9}
.mon-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mon-thumb .mon-thumb-ico{position:relative;opacity:.7}
.mon-thumb img+.mon-thumb-ico{display:none}
.mon-thumb.is-video img+.mon-thumb-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;opacity:1}
.mon-thumb em{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;font-style:normal;font-size:20px;font-weight:700}
.mon-reasons{font-size:12.5px;color:var(--muted)}
.mon-reasons summary{cursor:pointer;color:var(--primary)}
.mon-reasons ul{margin:6px 0 0;padding-inline-start:18px;line-height:1.8}
.mon-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.mon-card-foot small{color:var(--muted);font-size:12px}
.mon-actions a.secondary-btn{text-decoration:none;display:inline-flex;align-items:center}
.mon-excluded-panel details>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none}
.mon-excluded-panel details>summary::-webkit-details-marker{display:none}
.mon-excluded-panel h3{margin:0}
.mon-excluded-panel small{color:var(--muted)}
.mon-lightbox{position:relative;display:flex;align-items:center;gap:8px}
.mon-lb-stage{flex:1;display:grid;place-items:center;min-height:240px}
.mon-lb-stage img{max-width:100%;max-height:68vh;border-radius:12px}
.mon-lb-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:22px;cursor:pointer}
.mon-lb-note,.mon-lb-caption{color:var(--muted);font-size:13px;text-align:center;margin:8px 0 0}
@media (max-width:760px){.mon-x-search-row{grid-template-columns:1fr 1fr}.mon-x-search-row input{grid-column:1/-1}.mon-card-grid{grid-template-columns:1fr}}
.mon-x-search-row{grid-template-columns:1fr 84px auto}
.mon-x-search-row #monXQuery{grid-column:1/-1;order:5}
.mon-chip.is-warn{background:rgba(245,165,36,.16)}
.mon-chip.is-target{background:rgba(34,160,107,.14)}
.mon-demo-toggle{white-space:nowrap;font-size:13px}
.mon-filters .mon-demo-toggle{display:inline-flex !important;align-items:center;gap:6px;width:auto !important;min-height:0 !important;height:auto !important;padding:0 6px !important;border:0 !important;background:none !important}
.mon-filters .mon-demo-toggle input{width:16px !important;height:16px !important;min-height:0 !important;padding:0 !important}
.mon-sort{min-height:32px;padding:2px 8px;border-radius:8px}
.mon-chip.is-kind{background:rgba(13,143,203,.18);font-weight:700}