/* Taabi TMS — UAE · chart and analytics components.
 *
 * The styles for web/src/charts.js, taken from the Product Manager's
 * Taabi-TMS-UAE_Final.html. Only the chart and analytics rules are here; that
 * revision also restyles the wider app (sticky table action columns, select
 * chrome, panel padding) and that is deliberately not adopted, so screens that
 * are already signed off keep their current appearance.
 *
 * Kept out of the generated app.css so a regeneration cannot drop it.
 */

/* Custom properties these components need, absent from app.css. Existing
   values are left alone so nothing already on screen shifts. */
:root {
  --plot: #F3F7FD;
  --plot-warm: #FFFBEB;
  --th-bg: #F2F6FC;
  --afield: #F4F5F7;
  --kbar: #D3E3F8;
  --plot-hover: #E4EEFC;
}

[data-theme="dark"] {
  --plot: #14243A;
  --plot-warm: #2A2616;
  --th-bg: #18263A;
  --afield: #1A2431;
  --kbar: #22354F;
  --plot-hover: #1B3150;
}

.kpi .pc { font-size:12px;color:var(--muted-2);font-weight:500;margin-inline-start:4px }
.seg { display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-bottom:16px }
.seg button { padding:8px 16px;border:none;background:var(--card);color:var(--muted);font-weight:500;font-size:13px;cursor:pointer }
.seg button.on { background:var(--primary);color:#fff }
.seg button { padding:9px 18px;font-size:13px;font-weight:500 }
.kpi .pc { font-size:12px;font-weight:500 }
.ptitle { display:flex;flex-direction:column;gap:8px }
.seg { height:36px;margin-bottom:12px }
.seg button { height:100%;padding:0 16px;font-size:13px }
:is(#app,#overlay) select:not([multiple]) { -webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E7C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:14px 14px;padding-inline-end:44px }
#app[dir="rtl"] select:not([multiple]) { background-position:left 16px center }
.ana .suber { gap:24px;margin-bottom:24px;border-bottom:1px solid var(--border) }
.ana .subt { padding:12px 0;font-size:14px;font-weight:400;color:var(--primary);border-bottom-width:2px }
.ana .subt.on { color:var(--ink);font-weight:500;border-bottom-color:var(--ink) }
.ana .filters,.ana .af { display:flex;flex-wrap:wrap;gap:8px;align-items:center }
.ana .filters { margin-bottom:24px }
.ana .af { margin-bottom:24px }
.ana .af-sp { flex:1 1 0 }
.ana .filters select,.ana .af select { height:32px;width:auto;min-width:0;max-width:160px;font-size:12px;color:var(--ink);background-color:var(--afield);border:1px solid transparent;border-radius:2px;padding:0 30px 0 10px;background-position:right 10px center }
#app[dir="rtl"] .ana .filters select,#app[dir="rtl"] .ana .af select { padding:0 10px 0 30px;background-position:left 10px center }
.ana .acard .af select { max-width:150px }
.ana .two-col .af select { max-width:122px }
.ana .filters select:focus,.ana .af select:focus { outline:none;border-color:var(--primary) }
.ana .filters .btn { height:32px;font-size:12px;padding:0 14px }
.ana .acard { background:var(--card);border:1px solid var(--border);border-radius:4px;padding:24px;margin-bottom:24px;box-shadow:none;min-width:0 }
.ana .two-col { gap:24px;margin-bottom:0 }
.ana .two-col > .acard { margin-bottom:24px }
.ana .ah { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px }
.ana .ah h4 { margin:0;font-size:16px;line-height:1.3;font-weight:500;color:var(--ink) }
.ana .ah + .stepc,.ana .ah + .vb { margin-top:24px }
.anadl { display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;color:var(--primary);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap }
.anadl:hover { text-decoration:underline }
.dlsq { width:16px;height:16px;border-radius:3px;background:var(--primary);display:grid;place-items:center;flex:0 0 16px }
.ana .seg { margin-bottom:24px }
.ana .sec { margin-top:8px }
.ana .sstrip { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px }
.ana .sstrip .l,.ana .akpi .l { font-size:12px;color:var(--ink-2);margin-bottom:6px;line-height:1.35 }
.ana .sstrip .v { display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:26px;line-height:1.15;font-weight:500;color:var(--ink) }
.ana .sstrip .v small { font-size:14px;font-weight:400;color:var(--muted);margin-inline-start:-6px }
.chip { font-size:10px;line-height:1.5;font-weight:500;padding:1px 6px;border-radius:3px;white-space:nowrap }
.chip.up { background:var(--good-tint);color:var(--good) }
.chip.dn { background:var(--bad-tint);color:var(--bad) }
.ana .akpi { display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:24px }
.ana .akpi > div { display:flex;flex-direction:column }
.ana .akpi .l { flex:1 }
.ana .akpi .v { font-size:26px;line-height:1.15;font-weight:500;color:var(--ink) }
.ana .akpi .v small { font-size:11px;font-weight:400;color:var(--ink-2);margin-inline-start:4px }
.ana .akpi .kb { height:4px;border-radius:2px;background:var(--kbar);margin-top:8px;overflow:hidden }
.ana .akpi .kb i { display:block;height:100%;background:#2F6BD6;border-radius:2px }
.stepc .plot { display:flex;align-items:flex-end;height:180px;background:var(--plot);border-bottom:1px solid #3B7BE0 }
.stepc .plot.warm { background:var(--plot-warm);border-bottom-color:transparent }
.stepc .col { flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end }
.stepc .bar { width:100%;position:relative;min-height:2px }
.stepc .bar span { position:absolute;inset-inline:0;bottom:12px;text-align:center;color:#fff;font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums }
.stepc .bar span.dk { color:#2A3440 }
.stepc .bar span.out { bottom:calc(100% + 6px);color:var(--ink-2) }
.stepc .xl { display:flex }
.stepc .xl span { flex:1 1 0;min-width:0;text-align:center;font-size:11px;line-height:1.35;color:var(--muted);padding:10px 6px 0;border-inline-start:1px solid var(--border) }
.stepc .xl span:first-child { border-inline-start:none }
.vb { display:grid;grid-template-columns:auto 1fr;column-gap:12px }
.vb .ya { margin-top:14px;height:192px;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--muted);text-align:end;padding-bottom:0;line-height:1 }
.vb .pl { margin-top:20px;height:180px;display:flex;align-items:flex-end;gap:8%;padding:0 5%;border-bottom:1px solid #3B7BE0 }
.vb .pl.tint { background:var(--plot) }
.vb .c { flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center }
.vb .c b { position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:500;font-style:normal;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums }
.vb .c i { display:block;position:relative;width:100%;max-width:84px }
.vb .xl { display:flex;gap:8%;padding:0 5% }
.vb .xl span { flex:1 1 0;min-width:0;text-align:center;font-size:11px;line-height:1.35;color:var(--ink-2);padding-top:10px }
.trend { display:block;width:100%;height:auto;overflow:visible }
.trend .ty { font-size:10px;fill:var(--muted) }
.trend .tx { font-size:10px;font-weight:500;fill:var(--ink-2);letter-spacing:.02em }
.trend .tt { font-size:10px;font-weight:500;fill:#fff }
.alg { display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:11px;color:var(--ink-2) }
.alg span { display:inline-flex;align-items:center;gap:6px }
.alg i { width:8px;height:8px;border-radius:2px }
.ana .acard .tblwrap { border:1px solid var(--border);border-radius:2px;box-shadow:none }
.ana table.tbl { min-width:0 }
.ana table.tbl thead th { background:var(--th-bg);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--ink-2);padding:14px 16px;white-space:nowrap }
.ana table.tbl tbody td { padding:14px 16px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--border-2) }
.ana table.tbl tbody td:first-child { font-weight:500 }
.ana table.tbl th.n,.ana table.tbl td.n { text-align:end;font-variant-numeric:tabular-nums }
.ana td .pc { display:inline-block;min-width:34px;margin-inline-start:8px;text-align:start;font-size:12px;color:var(--muted-2) }
.ana table.tbl tbody tr:hover td { background:var(--primary-tint2) }
.ana table.tbl td.heat1,.heatkey i.heat1 { background:#EF7A6E!important;color:#2B1411 }
.ana table.tbl td.heat2,.heatkey i.heat2 { background:#F7D0CC!important;color:#3A1D1A }
.ana table.tbl td.heat3,.heatkey i.heat3 { background:#FBE5C0!important;color:#3A2A10 }
.heatkey { display:flex;gap:20px;margin:-12px 0 24px;font-size:11px;color:var(--muted) }
.heatkey span { display:inline-flex;align-items:center;gap:6px }
.heatkey i { width:10px;height:10px;border-radius:2px }
.ana table.tbl:has(thead th:nth-child(9)) { min-width:1100px }
.ana .livetop { display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px }
.srcbar { display:flex;height:16px;border-radius:8px;overflow:hidden;font-size:10px;font-weight:500;color:#3A2A10;background:var(--border-2) }
.srcbar span { display:grid;place-items:center;white-space:nowrap;overflow:hidden }
.srckey { display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:11px;color:var(--ink-2) }
.srckey span { display:inline-flex;align-items:center;gap:6px }
.srckey i { width:8px;height:8px;border-radius:2px }
.ana .gridtbl table.tbl td,.ana .gridtbl table.tbl th { border:1px solid var(--border) }
.ana .gridtbl table.tbl tbody td:first-child { font-weight:400;color:var(--muted) }
.trend .band { fill:var(--plot);opacity:0;transition:opacity .12s }
.trend .band.def { opacity:1 }
.trend .tag { opacity:0;transition:opacity .12s;pointer-events:none }
.trend .tag.def { opacity:1 }
.trend.hov .band.def:not(.on),.trend.hov .tag.def:not(.on) { opacity:0 }
.trend .band.on,.trend .tag.on { opacity:1 }
.trend .pt { transition:r .12s,fill .12s;pointer-events:none }
.trend .pt.on { r:5;fill:var(--c) }
.trend .tx.on { fill:var(--ink);font-weight:700 }
.trend .hit { cursor:pointer }
.stepc .col,.vb .c { position:relative;cursor:pointer;outline:none;transition:background-color .12s }
.stepc .col:hover,.stepc .col:focus-visible { background:var(--plot-hover) }
.stepc .plot.warm .col:hover,.stepc .plot.warm .col:focus-visible { background:rgba(241,165,100,.12) }
.vb .c:hover,.vb .c:focus-visible { background:var(--plot-hover) }
.stepc .col:hover .bar,.vb .c:hover i { filter:brightness(1.06) saturate(1.05) }
.tip { position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);z-index:5;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 9px;border-radius:3px;background:#2F6BD6;color:#fff;font-size:10px;font-style:normal;font-weight:400;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s }
.tip.in { bottom:auto;top:8px;background:var(--card);color:var(--ink-2);box-shadow:0 1px 4px rgba(20,40,80,.18) }
.tip.in b { color:var(--ink)!important }
.tip b { font-size:12px;font-weight:500;position:static!important;transform:none!important;color:#fff!important }
.stepc .col:hover .tip,.stepc .col:focus-visible .tip,.vb .c:hover .tip,.vb .c:focus-visible .tip { opacity:1;transform:translate(-50%,0) }
.stepc .col:hover .bar > span.out,.vb .c:hover i > b { opacity:0 }
.stepc .xl span,.vb .xl span { transition:color .12s }
.btn,.inp,select,.radio,.seg button,.qcard,.card[onclick],.setcard,.vcard[onclick],.stab,.dtab,.subt,.rail .ri,.rail .si,.tbtn,.lang button,.avatar,.act button,.menu button,.mx,.idlink,.dllink,.anadl,.crumb a,table.tbl tbody td,.pager select,a.idlink,.qcard .go { transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease }
.btn:focus-visible,.tbtn:focus-visible,.lang button:focus-visible,.mx:focus-visible,.act button:focus-visible,.seg button:focus-visible,.stab:focus-visible,.dtab:focus-visible,.subt:focus-visible,.rail .ri:focus-visible,.qcard:focus-visible,.anadl:focus-visible,.dllink:focus-visible { outline:2px solid var(--primary);outline-offset:2px }
.ana .filters select:hover,.ana .af select:hover { border-color:var(--border);background-color:var(--border-2) }
.seg button:not(.on):hover { background:var(--panel);color:var(--ink) }
input[type="checkbox"],input[type="radio"] { cursor:pointer;accent-color:var(--primary) }
.ana .subt:not(.on):hover { color:var(--primary-600);border-bottom-color:color-mix(in srgb,var(--primary) 35%,transparent) }

@media (max-width:1100px) {
  .ana .livetop { grid-template-columns:1fr }
}