/* ============================================================================
 * radar.css - "My Radar" (My Work 360) UI. Everything scoped to #myRadarView.
 * 1:1 port of the web app (SemyouPCP Content/css/my-radar.css, see
 * docs/radar-port-spec.md section F). Uses the global theme tokens from
 * tokens.css (surface / text / accent / --c-* / radii / shadows).
 * ========================================================================== */

#myRadarView {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    position: relative;
    overflow: hidden;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    /* module-local tokens (mapped to the app's corporate button colour) */
    --primary: var(--color-btn-primary);
    --primary-fg: var(--color-font-white);
    --primary-hover: color-mix(in srgb, var(--color-btn-primary) 85%, #fff);
    --surface-3: var(--surface-2);
}
#myRadarView button { font-family: inherit; cursor: pointer; color: inherit; }
#myRadarView .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
#myRadarView .ic-sm { width: 14px; height: 14px; }
#myRadarView .mono { font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; color: var(--text-subtle); }

/* ---------- control bar ---------- */
#myRadarView .mw-bar { display: flex; align-items: center; gap: 14px; padding: 14px 22px 12px; border-bottom: 1px solid var(--border); }
#myRadarView .mw-tt { font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
#myRadarView .mw-ss { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
#myRadarView .mw-spacer { flex: 1; }
/* planner dialog: small corner toggle for the (emergency) developer log */
.pi-devlog-toggle { width: 26px; height: 26px; flex: none; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-subtle); font-family: "SFMono-Regular", ui-monospace, Consolas, monospace; font-size: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pi-devlog-toggle:hover { background: var(--hover); color: var(--text); }
.pi-devlog-toggle.on { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.pi-devlog-toggle.has-err { color: var(--red); border-color: var(--red); }
/* inline filter/refresh controls - sit in the page toolbars / KPI band instead of an own bar row */
#myRadarView .mw-inline-actions { display: inline-flex; align-items: center; gap: 8px; }
#myRadarView .kpi-band .mw-inline-actions { margin-left: auto; align-self: flex-start; }

/* ---------- buttons ---------- */
#myRadarView .btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--r-btn); border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; font-weight: 550; }
#myRadarView .btn:hover { background: var(--hover); }
#myRadarView .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
#myRadarView .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
#myRadarView .btn.ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
#myRadarView .btn.ghost.on { background: var(--accent-tint); color: var(--accent); }
#myRadarView .btn.iconbtn { width: 34px; padding: 0; justify-content: center; }
#myRadarView .mw-filter.act { border-color: var(--accent); color: var(--accent); }

/* ---------- tabs (in-view sub navigation) ---------- */
#myRadarView .tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--border); }
#myRadarView .tabs .tab { padding: 11px 14px 12px; font-size: 13px; font-weight: 550; color: var(--text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
#myRadarView .tabs .tab:hover { color: var(--text); }
#myRadarView .tabs .tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 650; }
#myRadarView .tabs .tab .tc { font-size: 11px; font-weight: 700; background: var(--surface-2); border-radius: var(--radius-full); padding: 1px 7px; }
#myRadarView .tabs .tab.active .tc { background: var(--accent-tint); color: var(--accent); }

/* ---------- scroll area / subviews ---------- */
#myRadarView .view-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 28px; }
#myRadarView .subview { display: none; }
#myRadarView .subview.active { display: block; }
#myRadarView #sv-keypoint.active, #myRadarView #sv-kpitem.active, #myRadarView #sv-workitem.active { display: flex; flex-direction: column; height: 100%; }
#myRadarView .mw-tabgrid { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---------- segmented control ---------- */
#myRadarView .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; }
#myRadarView .segmented .sg { border: none; background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 550; padding: 6px 13px; border-radius: var(--radius-full); }
#myRadarView .segmented .sg.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }

/* ---------- project tile ---------- */
#myRadarView .ptile { width: 26px; height: 20px; border-radius: 5px; color: #fff; font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* ---------- KPI band ---------- */
#myRadarView .kpi-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 0; background: transparent; border: none; box-shadow: none; }
#myRadarView .kpi { --tone: var(--accent); border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent); border-radius: var(--r-card); padding: 14px 15px 13px; background: color-mix(in srgb, var(--tone) 9%, transparent); }
#myRadarView .kpi .kl { font-size: 11px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .03em; }
#myRadarView .kpi .kv { font-size: 27px; font-weight: 750; letter-spacing: -.025em; margin-top: 5px; color: color-mix(in srgb, var(--tone) 75%, var(--text)); }
#myRadarView .kpi .kd { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
#myRadarView .kpi.tone-red { --tone: var(--red); }
#myRadarView .kpi.tone-amber { --tone: var(--amber); }
#myRadarView .kpi.tone-blue { --tone: var(--accent); }
#myRadarView .kpi.tone-indigo { --tone: var(--c-indigo); }
#myRadarView .kpi.tone-teal { --tone: var(--c-teal); }
#myRadarView .kpi.tone-purple { --tone: var(--c-purple); }

/* ---------- panel + header ---------- */
#myRadarView .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
#myRadarView .mw-panel { margin-bottom: 14px; }
#myRadarView .mw-ph { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
#myRadarView .mw-ph .t { font-size: 13.5px; font-weight: 650; }
#myRadarView .mw-ph .s { font-size: 11.5px; color: var(--text-muted); }
#myRadarView .mw-ph .sp { flex: 1; }
#myRadarView .mw-pb { padding: 14px 16px 16px; }
#myRadarView .mw-plan-panel .mw-ph { position: sticky; top: 0; z-index: 8; background: var(--surface); }

/* ---------- heatmap ---------- */
#myRadarView .hm-legend { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-subtle); margin-bottom: 10px; flex-wrap: wrap; }
#myRadarView .hm-legend .sw { width: 12px; height: 12px; border-radius: 3.5px; background: var(--surface-2); display: inline-block; }
#myRadarView .hm-legend .sw.tdy { box-shadow: 0 0 0 2px var(--accent); }
#myRadarView .cw-scroll { overflow-x: auto; padding-bottom: 4px; }
#myRadarView .cw { display: grid; gap: 3px; width: max-content; } /* grid-template-columns set inline: 46px repeat(53,15px) */
#myRadarView .cw-corner { width: 46px; }
#myRadarView .cw-month { font-size: 10px; color: var(--text-subtle); height: 14px; line-height: 14px; }
#myRadarView .cw-ylabel { font-size: 11.5px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; height: 15px; }
#myRadarView .cw-cell { width: 15px; height: 15px; border-radius: 4px; background: var(--surface-2); cursor: pointer; transition: transform .08s; }
#myRadarView .cw-cell:hover { transform: scale(1.22); }
#myRadarView .cw-cell.l1 { background: rgba(37, 99, 235, .16); }
#myRadarView .cw-cell.l2 { background: rgba(37, 99, 235, .32); }
#myRadarView .cw-cell.l3 { background: rgba(37, 99, 235, .5); }
#myRadarView .cw-cell.l4 { background: rgba(37, 99, 235, .72); }
#myRadarView .cw-cell.ov.l1 { background: rgba(229, 72, 77, .2); }
#myRadarView .cw-cell.ov.l2 { background: rgba(229, 72, 77, .36); }
#myRadarView .cw-cell.ov.l3 { background: rgba(229, 72, 77, .55); }
#myRadarView .cw-cell.ov.l4 { background: rgba(229, 72, 77, .72); }
#myRadarView .cw-cell.today { box-shadow: 0 0 0 2px var(--accent); }
[data-theme="dark"] #myRadarView .cw-cell.l1 { background: rgba(91, 146, 236, .2); }
[data-theme="dark"] #myRadarView .cw-cell.l2 { background: rgba(91, 146, 236, .38); }
[data-theme="dark"] #myRadarView .cw-cell.l3 { background: rgba(91, 146, 236, .56); }
[data-theme="dark"] #myRadarView .cw-cell.l4 { background: rgba(91, 146, 236, .78); }

/* ---------- pills & chips ---------- */
#myRadarView .rag-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; padding: 3px 10px; border-radius: var(--radius-full); }
#myRadarView .rag-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle); }
#myRadarView .rag-pill.red { background: var(--red-t); color: var(--red-tx); }
#myRadarView .rag-pill.red .d { background: var(--red); }
#myRadarView .rag-pill.amber { background: var(--amber-t); color: var(--amber-tx); }
#myRadarView .rag-pill.amber .d { background: var(--amber); }
#myRadarView .rag-pill.green { background: var(--green-t); color: var(--green-tx); }
#myRadarView .rag-pill.green .d { background: var(--green); }
#myRadarView .rag-pill.none { background: var(--surface-2); color: var(--text-subtle); }
#myRadarView .st-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: var(--radius-full); }
#myRadarView .st-pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#myRadarView .st-pill.st-0 { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
#myRadarView .st-pill.st-1 { background: var(--amber-t); color: var(--amber-tx); }
#myRadarView .st-pill.st-2 { background: var(--green-t); color: var(--green-tx); }
#myRadarView .bkt-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 1.5px 8px; border-radius: var(--radius-full); }
#myRadarView .bkt-pill.g-overdue { background: var(--red-t); color: var(--red-tx); }
#myRadarView .bkt-pill.g-today { background: var(--accent-tint); color: var(--accent); }
#myRadarView .bkt-pill.g-week { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
#myRadarView .bkt-pill.g-month, #myRadarView .bkt-pill.g-later, #myRadarView .bkt-pill.g-none { background: var(--surface-2); color: var(--text-subtle); }
#myRadarView .yrole { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 650; padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; }
#myRadarView .yrole.resp { color: var(--accent); background: var(--accent-tint); }
#myRadarView .yrole.contrib { color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 15%, var(--surface)); }
#myRadarView .rchip { display: inline-flex; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 2px 8px; white-space: nowrap; }
#myRadarView .rchip.lead { color: var(--text); border-color: var(--border-strong); }
#myRadarView .rchip.more { color: var(--text-subtle); }
#myRadarView .mw-resp { display: flex; align-items: center; gap: 4px; overflow: hidden; }
#myRadarView .kglyph { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
#myRadarView .kglyph .ic { width: 14px; height: 14px; }
#myRadarView .kglyph.k-keypoint { color: var(--c-indigo); background: color-mix(in srgb, var(--c-indigo) 14%, var(--surface)); }
#myRadarView .kglyph.k-kpitem { color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 14%, var(--surface)); }
#myRadarView .kglyph.k-workitem { color: var(--c-green); background: color-mix(in srgb, var(--c-green) 14%, var(--surface)); }
#myRadarView .qgbadge { font-size: 9.5px; font-weight: 700; color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 14%, var(--surface)); border-radius: var(--radius-full); padding: 1px 7px; }
#myRadarView .pbar { width: 42px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: inline-block; }
#myRadarView .pf { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
#myRadarView .c-prog { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); }
#myRadarView .c-prog.dash { color: var(--text-subtle); }
#myRadarView .mw-rd { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); flex: 0 0 auto; }
#myRadarView .mw-rd.red { background: var(--red); }
#myRadarView .mw-rd.amber { background: var(--amber); }
#myRadarView .mw-rd.green { background: var(--green); }

/* ---------- shared cells ---------- */
#myRadarView .tt-cell { display: flex; align-items: center; gap: 9px; overflow: hidden; }
#myRadarView .tt-cell a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#myRadarView .tt-cell a:hover { color: var(--accent); }
#myRadarView .row-no { flex: 0 0 auto; }
#myRadarView .c-proj { display: flex; align-items: center; gap: 8px; overflow: hidden; }
#myRadarView .c-proj .pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
#myRadarView .kp-ref { display: flex; align-items: center; gap: 7px; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
#myRadarView .c-due { font-size: 12.5px; }
#myRadarView .c-due.od { color: var(--red-tx); font-weight: 650; }
#myRadarView .c-act { display: flex; justify-content: flex-end; }
#myRadarView .iconlink { border: none; background: transparent; color: var(--text-subtle); padding: 4px; border-radius: 6px; opacity: 0; }
#myRadarView tr:hover .iconlink, #myRadarView .pj-item:hover .iconlink { opacity: 1; }
#myRadarView .iconlink:hover { color: var(--accent); background: var(--accent-tint); }

/* ---------- grid chrome (Kendo replacement, plain table) ---------- */
#myRadarView .mw-kgrid { border: none; background: transparent; font-size: 13px; overflow: auto; }
#myRadarView .mw-kgrid table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#myRadarView .mw-kgrid th { color: var(--text-subtle); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 650; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 3; white-space: nowrap; cursor: pointer; user-select: none; }
#myRadarView .mw-kgrid th.nosort { cursor: default; }
#myRadarView .mw-kgrid th:not(.nosort):hover { background: var(--hover); }
#myRadarView .mw-kgrid th .sort-ind { margin-left: 4px; font-size: 9px; color: var(--accent); }
/* column resize handle; th is position:sticky (already a containing block for
   the absolute handle) - do NOT switch it to relative or the header stops sticking */
#myRadarView .mw-kgrid th .col-rsz { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; background: transparent; }
#myRadarView .mw-kgrid th .col-rsz:hover { background: linear-gradient(to right, transparent 2px, var(--border-strong) 2px, var(--border-strong) 4px, transparent 4px); }
#myRadarView .mw-kgrid td { vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); padding: 7px 10px; }
#myRadarView .mw-kgrid tbody tr { cursor: pointer; }
#myRadarView .mw-kgrid tbody tr:hover { background: var(--hover); }
#myRadarView .mw-kgrid tr.od > td:first-child { box-shadow: inset 3px 0 0 var(--red); } /* overdue accent */
#myRadarView .plan-grid { max-height: 560px; }

/* ---------- object tab toolbar ---------- */
#myRadarView .tab-toolbar { display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px; flex-wrap: wrap; }
#myRadarView .tab-toolbar .sp { flex: 1; }
#myRadarView .tt-title { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; }
#myRadarView .t-count { font-size: 11.5px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); padding: 4px 11px; border-radius: var(--radius-full); font-weight: 550; }

/* ---------- projects accordion ---------- */
#myRadarView .pjl { display: flex; flex-direction: column; gap: 8px; }
#myRadarView .pj-card { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
#myRadarView .pj-card.is-open { box-shadow: var(--shadow-float); border-color: var(--border-strong); }
#myRadarView .pj-head { display: flex; align-items: center; gap: 14px; padding: 11px 14px; width: 100%; text-align: left; background: transparent; border: none; }
#myRadarView .pj-head .chev { transition: transform .12s; flex: 0 0 auto; color: var(--text-subtle); }
#myRadarView .pj-card.is-open .pj-head .chev { transform: rotate(90deg); }
#myRadarView .pj-id { flex: 1 1 auto; min-width: 200px; max-width: 460px; display: flex; align-items: center; gap: 11px; overflow: hidden; }
#myRadarView .pj-id .ptile { width: 32px; height: 26px; border-radius: 7px; font-size: 11px; }
#myRadarView .pj-id .nm { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#myRadarView .pj-id:hover .nm { color: var(--accent); }
#myRadarView .pj-status { width: 88px; }
#myRadarView .pj-next { width: 118px; display: flex; flex-direction: column; }
#myRadarView .pj-next .lab { font-size: 10px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .03em; }
#myRadarView .pj-next .val { font-size: 12px; font-weight: 650; }
#myRadarView .pj-open { width: 104px; display: flex; justify-content: flex-end; }
#myRadarView .pj-open .num { font-size: 18px; font-weight: 750; display: inline-flex; align-items: baseline; gap: 5px; }
#myRadarView .pj-open .num small { font-size: 10.5px; font-weight: 550; color: var(--text-muted); }
#myRadarView .pj-timing { flex: 0 0 148px; min-width: 120px; display: flex; flex-direction: column; gap: 6px; }
#myRadarView .tbar { height: 8px; border-radius: 5px; display: flex; overflow: hidden; background: var(--surface-2); }
#myRadarView .tbar i { display: block; height: 100%; }
#myRadarView .tbar i.od { background: var(--red); }
#myRadarView .tbar i.wk { background: var(--accent); }
#myRadarView .tbar i.mo { background: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); }
#myRadarView .tbar i.la { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
#myRadarView .tbk { display: flex; gap: 9px; font-size: 10.5px; color: var(--text-muted); }
#myRadarView .tbk .b { display: inline-flex; align-items: center; gap: 4px; }
#myRadarView .tbk .b .d { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
#myRadarView .tbk .b.od .d { background: var(--red); }
#myRadarView .tbk .b.wk .d { background: var(--accent); }
#myRadarView .tbk .b.mo .d { background: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); }
#myRadarView .tbk .b.la .d { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
#myRadarView .tbk .b.zero { opacity: .32; }
#myRadarView .pj-body { display: none; padding: 4px 14px 12px; border-top: 1px solid var(--border); }
#myRadarView .pj-card.is-open .pj-body { display: block; }
#myRadarView .pj-bgrp { margin-top: 8px; }
#myRadarView .pj-bh { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 2px; }
#myRadarView .pj-bh .d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#myRadarView .pj-bh .cnt { font-weight: 600; color: var(--text-subtle); }
#myRadarView .pj-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 5px; cursor: pointer; }
#myRadarView .pj-item:hover { background: var(--hover); border-color: var(--border-strong); }
#myRadarView .pj-item .it-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
#myRadarView .pj-item .it-due { font-size: 11.5px; font-weight: 600; width: 92px; text-align: right; color: var(--text-muted); }
#myRadarView .pj-item .it-due.od { color: var(--red-tx); }
#myRadarView .pj-empty { padding: 26px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ---------- filter popup (anchored below the Filter button) ---------- */
#myRadarView .flt-overlay { position: absolute; inset: 0; background: transparent; visibility: hidden; z-index: 60; }
#myRadarView .flt-overlay.on { visibility: visible; }
#myRadarView .flt-drawer { position: absolute; top: 56px; right: 18px; width: 340px; max-height: calc(100% - 78px); background: var(--color-popup-bg, var(--surface)); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-pop); transform: scale(.98) translateY(-6px); transform-origin: top right; opacity: 0; visibility: hidden; transition: opacity .14s, transform .14s; z-index: 61; display: flex; flex-direction: column; }
#myRadarView .flt-drawer.on { opacity: 1; visibility: visible; transform: none; }
#myRadarView .flt-dh { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
#myRadarView .flt-dh .t { font-size: 13.5px; font-weight: 700; }
#myRadarView .flt-dh .sp { flex: 1; }
#myRadarView .flt-dh .lnk { border: none; background: transparent; font-size: 12px; font-weight: 600; color: var(--accent); }
#myRadarView .flt-dh .lnk.dim { color: var(--text-subtle); cursor: default; }
#myRadarView .flt-dh .x { border: none; background: transparent; color: var(--text-subtle); padding: 3px; border-radius: 6px; }
#myRadarView .flt-dh .x:hover { color: var(--text); background: var(--hover); }
#myRadarView .flt-db { flex: 1; min-height: 0; overflow: auto; }
#myRadarView .flt-sec { border-bottom: 1px solid var(--border); }
#myRadarView .flt-sh { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 16px; border: none; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 650; text-align: left; cursor: pointer; }
#myRadarView .flt-sh:hover { background: var(--hover); }
#myRadarView .flt-sh .sc { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-full); padding: 1px 7px; }
#myRadarView .flt-sh .sp { flex: 1; }
#myRadarView .flt-sh .chev { transition: transform .12s; color: var(--text-subtle); }
#myRadarView .flt-sec.is-open .flt-sh .chev { transform: rotate(180deg); }
#myRadarView .flt-sb { display: none; padding: 0 12px 11px; }
#myRadarView .flt-sec.is-open .flt-sb { display: block; }
#myRadarView .flt-sb.scroll { max-height: 190px; overflow: auto; }
#myRadarView .flt-opt { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 7px; width: 100%; text-align: left; border: none; background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer; }
#myRadarView .flt-opt:hover { background: var(--hover); }
#myRadarView .flt-box { width: 17px; height: 17px; border: 1.6px solid var(--border-strong); border-radius: 5px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
#myRadarView .flt-opt.radio .flt-box { border-radius: 50%; }
#myRadarView .flt-opt.on .flt-box { background: var(--accent); border-color: var(--accent); }
#myRadarView .flt-opt.on:not(.radio) .flt-box::after { content: ""; width: 4.5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
#myRadarView .flt-opt.radio.on .flt-box::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
#myRadarView .flt-opt .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#myRadarView .flt-sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
#myRadarView .flt-tree .flt-kids { padding-left: 22px; }
#myRadarView .flt-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
#myRadarView .flt-foot .btn { flex: 1; justify-content: center; }
#myRadarView .flt-search { display: flex; align-items: center; gap: 7px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); padding: 0 11px; margin: 4px 4px 8px; }
#myRadarView .flt-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 12.5px; color: var(--text); min-width: 0; }
#myRadarView .flt-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px 7px; }
#myRadarView .flt-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-full); padding: 2px 3px 2px 10px; }
#myRadarView .flt-chip .x { border: none; background: transparent; color: inherit; padding: 1px 5px; border-radius: 50%; font-size: 11px; }
#myRadarView .flt-results { max-height: 230px; overflow: auto; }
#myRadarView .flt-msg { padding: 8px 10px; font-size: 12px; color: var(--text-subtle); }
#myRadarView .flt-cnt { display: none; min-width: 17px; height: 17px; border-radius: var(--radius-full); background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; align-items: center; justify-content: center; padding: 0 4px; }
#myRadarView .flt-cnt.on { display: inline-flex; }

/* ---------- skeletons ---------- */
#myRadarView .mw-skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
#myRadarView .mw-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--hover), transparent); animation: mwShimmer 1.15s infinite; }
#myRadarView .heat-skel { height: 74px; }
#myRadarView .kpi.skel { height: 64px; border: none; background: var(--surface-2); }
#myRadarView .skrow { height: 16px; margin: 12px 14px; }
@keyframes mwShimmer { 100% { transform: translateX(100%); } }

/* ---------- empty states ---------- */
#myRadarView .mw-empty { padding: 26px 14px; text-align: center; color: var(--text-subtle); font-size: 12.5px; }

/* ============================================================================
 * Planner import dialog (TEST feature). NOT scoped to #myRadarView because the
 * Kendo Dialog renders in a portal outside the radar view. Token-based so dark
 * mode works.
 * ========================================================================== */
.pi-planrow { display: flex; align-items: center; gap: 10px; padding: 5px 20px 10px; }
.pi-refresh { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text-muted); cursor: pointer; }
.pi-refresh:disabled { opacity: .5; cursor: default; }
.pi-tasklist { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.pi-taskrow { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12.5px; color: var(--text); }
.pi-taskrow:last-child { border-bottom: none; }
.pi-taskrow:hover { background: var(--hover); }
.pi-taskrow input[type="checkbox"] { flex: 0 0 auto; cursor: pointer; }
.pi-taskhead { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-weight: 650; cursor: default; }
.pi-taskhead:hover { background: var(--surface-2); }
.pi-tt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-due { flex: 0 0 110px; text-align: right; color: var(--text-muted); }
.pi-pct { flex: 0 0 46px; text-align: right; color: var(--text-muted); }
.pi-empty { padding: 24px 14px; text-align: center; color: var(--text-subtle); font-size: 12.5px; }
.pi-taskrow.pi-imported { cursor: default; color: var(--text-muted); }
.pi-taskrow.pi-imported:hover { background: transparent; }
.pi-taskrow.pi-imported input[type="checkbox"] { cursor: default; }
.pi-imported-badge { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--text-muted); font-size: 10.5px; white-space: nowrap; }
/* dev output log panel */
.pi-devlog { flex: 0 0 auto; margin-top: 10px; border-top: 1px solid var(--border-strong); background: var(--surface-2); }
.pi-devlog-head { display: flex; align-items: center; gap: 6px; padding: 5px 20px; font-size: 11px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; user-select: none; }
.pi-devlog-head:hover { color: var(--text); }
.pi-devlog-chev { width: 12px; display: inline-block; }
.pi-devlog-body { height: 150px; overflow: auto; padding: 4px 20px 8px; font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; line-height: 1.5; }
.pi-devlog-line { white-space: pre-wrap; word-break: break-all; color: var(--text); }
.pi-devlog-line.err { color: var(--red); }

/* planner dialog: the Kendo content pane must not scroll as a whole - only the
   task list scrolls (its own overflow). Kills the outer window scrollbar. */
.pi-dialog .k-window-content,
.pi-dialog .k-dialog-content { display: flex; flex-direction: column; overflow: hidden; }