/* Dashboard analytics screen (v28). The #page-insights rules are ported verbatim from the v28
   prototype's #insights-styles block (raw-hex values exactly as the prototype emits them), so the
   Dashboard ("/") matches the prototype pixel-for-pixel. The prototype references an undefined
   --space-7 token; it is defined here. The .heatmap-* classes are copied from the 005 design-reference
   screens.css because they are not otherwise vendored in the app. The responsive rules at the bottom
   are ported from the prototype's #v23-responsive layer so the screen reflows on narrow panes. */

#page-insights{--space-7:1.75rem}

#page-insights .ins-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
#page-insights .ins-seg{display:inline-flex;background:#EEF4F4;border:1px solid var(--color-border-light);border-radius:10px;padding:3px;gap:2px}
#page-insights .ins-seg button{font-family:var(--font-heading);font-size:13px;font-weight:500;color:var(--color-service-grey);padding:6px 16px;border-radius:7px;background:none;border:none;cursor:pointer;transition:all .15s}
#page-insights .ins-seg button.active{background:#fff;color:var(--color-navy);box-shadow:var(--shadow-sm)}
#page-insights .ins-seg button:hover:not(.active){color:var(--color-navy)}
#page-insights .ins-asof{font-size:12px;color:var(--color-service-grey)}
/* Dashboard filter toolbar — the Assignments filter-row select look (assignments.css
   .asg-extra-filter), sized down to sit between the KPI cards and the main chart. */
#page-insights .ins-filters{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-6)}
#page-insights .ins-filters select{height:34px;padding:0 28px 0 10px;border:1px solid var(--color-control-border);border-radius:var(--radius-sm);font-size:12.5px;font-family:inherit;color:var(--color-navy);background:var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F8DA1' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 8px center;-webkit-appearance:none;appearance:none;cursor:pointer}
#page-insights .ins-filters select:hover{border-color:var(--color-control-border)}
/* Boolean role-scope filters and source selection share the same compact control height so the row
   reads as one control strip. */
#page-insights .ins-check{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:1px solid var(--color-control-border);border-radius:var(--radius-sm);font-size:12.5px;color:var(--color-navy);background:var(--color-white);cursor:pointer;white-space:nowrap;user-select:none}
#page-insights .ins-check:hover{border-color:var(--color-control-border)}
#page-insights .ins-check:has(input:checked){border-color:var(--color-control-border);background:#F4F8F8;font-weight:500}
#page-insights .ins-check input{width:14px;height:14px;margin:0;accent-color:var(--color-blue);cursor:pointer}
#page-insights .ins-clear-filters{height:34px;padding:0 12px;border:1px solid transparent;border-radius:var(--radius-sm);font-size:12.5px;font-family:inherit;font-weight:500;color:var(--color-text-link);background:none;cursor:pointer;white-space:nowrap}
#page-insights .ins-clear-filters:hover{text-decoration:underline}
#page-insights .ins-empty{color:var(--color-service-grey);font-size:13px;padding:var(--space-6);text-align:center;border:1px dashed var(--color-border);border-radius:12px}
#page-insights .ins-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-bottom:var(--space-8)}
#page-insights .ins-kpi{background:#fff;border:1px solid var(--color-border-light);border-radius:14px;padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-sm)}
#page-insights .ins-kpi .k-lbl{font-family:var(--font-heading);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-service-grey);margin-bottom:.55rem}
#page-insights .ins-kpi .k-val{font-family:var(--font-heading);font-weight:500;font-size:32px;line-height:1;letter-spacing:-.01em;color:var(--color-navy)}
#page-insights .ins-kpi .k-sub{font-size:12px;color:var(--color-service-grey);margin-top:.45rem}
#page-insights .ins-kpi.flag .k-val{color:var(--color-warning)}
#page-insights .ins-kpi.warn .k-val{color:var(--color-warning)}
#page-insights .ins-section{background:#fff;border:1px solid var(--color-border-light);border-radius:16px;padding:var(--space-6) var(--space-7);margin-bottom:var(--space-7);box-shadow:var(--shadow-sm)}
#page-insights .ins-shead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
#page-insights .ins-shead h2{font-family:var(--font-heading);font-size:18px;font-weight:500;color:var(--color-navy);letter-spacing:-.01em}
#page-insights .ins-shead p{font-size:12.5px;color:var(--color-service-grey);margin-top:3px;max-width:60ch}
#page-insights .ins-link{font-size:13px;font-weight:500;color:var(--color-text-link);cursor:pointer;white-space:nowrap}
#page-insights .ins-link:hover{text-decoration:underline}
#page-insights .ins-grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--space-7);align-items:start}
#page-insights .ins-brk2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start}
@media(max-width:900px){#page-insights .ins-brk2{grid-template-columns:1fr;gap:var(--space-5)}}
@media(max-width:1080px){#page-insights .ins-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#page-insights .ins-kpis{grid-template-columns:1fr}}
#page-insights .ins-table{width:100%;border-collapse:collapse}
#page-insights .ins-table th{font-family:var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-service-grey);text-align:left;padding:0 var(--space-3) var(--space-3);border-bottom:1px solid var(--color-border-light);white-space:nowrap}
#page-insights .ins-table th.num{text-align:right}
#page-insights .ins-table th.sortable{cursor:pointer;user-select:none}
#page-insights .ins-table th.sortable:hover{color:var(--color-navy)}
#page-insights .ins-table th .arr{opacity:.5;font-size:9px;margin-left:3px}
#page-insights .ins-table td{padding:var(--space-3);border-bottom:1px solid var(--color-surface);font-size:13.5px;color:var(--color-navy);vertical-align:middle}
#page-insights .ins-table tr{cursor:pointer}
#page-insights .ins-table tbody tr:hover{background:#F4F8F8}
#page-insights .ins-rname{font-weight:500}
#page-insights .ins-dept{font-size:11px;color:var(--color-service-grey);margin-top:1px}
#page-insights .ins-barcell{min-width:150px}
#page-insights .ins-bar{position:relative;height:9px;border-radius:5px;background:#EAF1F1;overflow:hidden}
#page-insights .ins-bar > span{position:absolute;left:0;top:0;bottom:0;background:#4B7696;border-radius:5px}
#page-insights .ins-num{font-family:var(--font-heading);text-align:right;font-variant-numeric:tabular-nums}
#page-insights .ins-scchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;font-family:var(--font-heading);color:#8A5A1A;background:#FEF3E7;border:1px solid #F5D9A8;border-radius:6px;padding:1px 8px;font-variant-numeric:tabular-nums}
#page-insights .ins-scchip.zero{color:var(--color-service-grey);background:#F1F5F5;border-color:var(--color-border-light)}
#page-insights .ins-loc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;font-family:var(--font-heading);border-radius:6px;padding:2px 9px;white-space:nowrap}
#page-insights .ins-loc::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}
#page-insights .ins-loc.offshore{color:#1F5E73;background:#E4F1F5;border:1px solid #BFDDE6}
#page-insights .ins-loc.offshore::before{background:#2B89A8}
#page-insights .ins-loc.onshore{color:#5A4A1F;background:#F6EFE0;border:1px solid #E6D7B8}
#page-insights .ins-loc.onshore::before{background:#A8852B}
#page-insights .ins-loc.mixed{color:#4A3A5E;background:#EFE9F5;border:1px solid #D7C8E6}
#page-insights .ins-loc.mixed::before{background:#7A5BA8}
#page-insights .ins-asset{display:inline-block;font-size:11px;font-weight:500;color:#3a5d78;background:rgba(75,118,150,.12);border-radius:5px;padding:2px 9px;white-space:nowrap}
#page-insights .ins-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#page-insights .ins-owner.none{color:var(--color-warning);font-weight:500}
#page-insights .ins-go{color:var(--color-text-link);font-weight:500;font-size:12.5px;white-space:nowrap}
#page-insights .ins-bars{display:flex;flex-direction:column;gap:2px}
#page-insights .ins-brow{display:grid;grid-template-columns:230px 1fr auto;align-items:center;gap:var(--space-4);padding:9px var(--space-3);border-radius:8px;cursor:pointer}
#page-insights .ins-brow:hover{background:#F4F8F8}
#page-insights .ins-brow .nm{font-size:13.5px;font-weight:500;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-insights .ins-brow .nm small{display:block;font-weight:400;font-size:11px;color:var(--color-service-grey)}
/* 056: per-asset suffix + unmatched marker on role-loading rows. */
#page-insights .ins-brow .nm .ins-unmatched{display:inline-block;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-warning);background:var(--color-warning-tint);border-radius:var(--radius-full);padding:1px 7px;margin-left:6px;vertical-align:middle}
#page-insights .ins-brow .track{position:relative;height:22px;border-radius:6px;background:#EEF4F4;overflow:hidden}
#page-insights .ins-brow .track .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#3A5D78,#4B7696);border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px}
#page-insights .ins-brow .track .scseg{position:absolute;top:0;bottom:0;background:#C77A2C;border-radius:6px}
#page-insights .ins-brow .val{font-family:var(--font-heading);font-size:13px;color:var(--color-navy);font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
#page-insights .ins-brow .val b{color:var(--color-warning);font-weight:500}
#page-insights .ins-show-all{margin-top:var(--space-4)}
#page-insights .ins-brk{display:flex;flex-direction:column;gap:var(--space-3)}
#page-insights .ins-brk .row{display:grid;grid-template-columns:150px 1fr 48px;align-items:center;gap:var(--space-3);font-size:13px}
#page-insights .ins-brk .row .lab{color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-insights .ins-brk .row .bar{height:14px;border-radius:4px;background:#EEF4F4;overflow:hidden}
#page-insights .ins-brk .row .bar > span{display:block;height:100%;border-radius:4px;background:#6E9B9B}
#page-insights .ins-brk .row .n{font-family:var(--font-heading);text-align:right;color:var(--color-navy);font-variant-numeric:tabular-nums}
#page-insights .ins-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media(max-width:760px){#page-insights .ins-outs{grid-template-columns:1fr}}
#page-insights .ins-out{border:1px solid var(--color-border-light);border-radius:12px;padding:var(--space-5);background:#FBFDFD}
#page-insights .ins-out .o-lbl{font-family:var(--font-heading);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-service-grey);margin-bottom:.7rem}
#page-insights .ins-out .o-main{font-family:var(--font-heading);font-size:17px;font-weight:500;color:var(--color-navy);line-height:1.25}
#page-insights .ins-out .o-fig{font-family:var(--font-heading);font-size:26px;font-weight:500;color:var(--color-navy);letter-spacing:-.01em}
#page-insights .ins-out .o-sub{font-size:12px;color:var(--color-service-grey);margin-top:.4rem;line-height:1.5}
#page-insights .ins-out.alert{background:#FEF6EE;border-color:#F5D9A8}
#page-insights .ins-out .o-list{margin-top:.6rem;display:flex;flex-direction:column;gap:4px}
#page-insights .ins-out .o-list span{font-size:12.5px;color:var(--color-navy);cursor:pointer}
#page-insights .ins-out .o-list span:hover{text-decoration:underline;color:var(--color-text-link-hover)}
#page-insights .ins-modal-ov{position:fixed;inset:0;background:rgba(0,18,40,.42);display:none;align-items:flex-start;justify-content:center;z-index:1200;padding:48px 20px;overflow:auto}
#page-insights .ins-modal-ov.open{display:flex}
#page-insights .ins-modal{background:#fff;border-radius:16px;width:min(720px,100%);box-shadow:0 24px 70px rgba(0,12,40,.28);overflow:hidden}
#page-insights .ins-mhead{padding:var(--space-6) var(--space-7);border-bottom:1px solid var(--color-border-light);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}
#page-insights .ins-mhead h3{font-family:var(--font-heading);font-size:20px;font-weight:500;color:var(--color-navy);letter-spacing:-.01em}
#page-insights .ins-mhead .dept-chip{display:inline-block;margin-top:6px;font-size:11px;font-weight:500;color:#3a5d78;background:rgba(75,118,150,.12);border-radius:5px;padding:2px 9px}
#page-insights .ins-mclose{background:none;border:none;cursor:pointer;color:var(--color-service-grey);width:32px;height:32px;border-radius:8px;flex-shrink:0;font-size:18px}
#page-insights .ins-mclose:hover{background:var(--color-surface);color:var(--color-navy)}
#page-insights .ins-mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border-light);border-bottom:1px solid var(--color-border-light)}
#page-insights .ins-mstats .m-st{background:#fff;padding:var(--space-4) var(--space-5)}
#page-insights .ins-mstats .m-st .v{font-family:var(--font-heading);font-size:22px;font-weight:500;color:var(--color-navy)}
#page-insights .ins-mstats .m-st .l{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-service-grey);margin-top:3px}
#page-insights .ins-mstats .m-st .v.flag{color:var(--color-warning)}
#page-insights .ins-mstats .m-st .v.none{color:var(--color-warning);font-size:15px;padding-top:6px}
#page-insights .ins-mstats.ins-mstats-role{grid-template-columns:repeat(3,1fr)}
#page-insights .ins-document-title{font-size:13px;color:var(--color-service-grey);margin-top:4px;max-width:54ch}
#page-insights .ins-mnote{font-size:10.5px;line-height:1.35;color:var(--color-service-grey);margin-top:4px}
#page-insights .ins-mactions{display:flex;gap:var(--space-3);padding:var(--space-5) var(--space-7);flex-wrap:wrap;align-items:center}
#page-insights .ins-btn{font-family:var(--font-heading);font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:9px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
#page-insights .ins-btn.primary{background:var(--color-navy);color:#fff}
#page-insights .ins-btn.primary:hover{background:#003351}
#page-insights .ins-btn.ghost{background:#fff;border-color:var(--color-border);color:var(--color-navy)}
#page-insights .ins-btn.ghost:hover{background:var(--color-surface)}
#page-insights .ins-mbody{padding:0 var(--space-7) var(--space-7);max-height:46vh;overflow:auto}
#page-insights .ins-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-7);margin:0;padding-top:var(--space-5)}
#page-insights .ins-meta-grid > div{min-width:0}
#page-insights .ins-meta-grid dt{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-service-grey);margin-bottom:3px}
#page-insights .ins-meta-grid dd{font-size:13.5px;color:var(--color-navy);margin:0;overflow-wrap:anywhere}
#page-insights .ins-gen-hint{color:var(--color-service-grey);font-size:13px;padding:var(--space-6);text-align:center;border:1px dashed var(--color-border);border-radius:12px;line-height:1.6}
#page-insights .ins-jd h4{font-family:var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-secondary);margin:var(--space-5) 0 var(--space-2)}
#page-insights .ins-jd p{font-size:13.5px;line-height:1.62;color:#2b3a45;margin-bottom:var(--space-2)}
#page-insights .ins-jd ul{margin:0 0 var(--space-2) 18px}
#page-insights .ins-jd li{font-size:13.5px;line-height:1.6;color:#2b3a45;margin-bottom:5px}
#page-insights .ins-jd li .sc{font-size:10px;font-weight:600;color:#8A5A1A;background:#FEF3E7;border:1px solid #F5D9A8;border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:1px}
#page-insights .ins-genmeta{font-size:11.5px;color:var(--color-service-grey);font-style:italic;margin:var(--space-3) 0 var(--space-2);display:flex;align-items:center;gap:7px}
#page-insights .ins-genmeta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-success)}

/* Defensive SVG constraint: any inline SVG inside the analytics view is capped so it can never
   balloon to fill its container if a future icon is added to a flex/grid cell without its own size. */
#page-insights svg{width:16px;height:16px;flex-shrink:0}

/* Heatmap classes — copied from specs/005-review-prototype-reskin/design-reference/screens.css
   (not otherwise vendored in the app). Global, not scoped, matching the prototype. */
.heatmap-table{border-collapse:separate;border-spacing:2px;width:100%;min-width:700px}
.heatmap-table th,.heatmap-table td{text-align:center;vertical-align:middle}
.heatmap-col-header{font-size:11px;font-weight:var(--font-medium);color:var(--color-service-grey);text-transform:uppercase;letter-spacing:0.03em;padding:var(--space-2) var(--space-2) var(--space-3);line-height:1.3;max-width:140px;word-wrap:break-word}
.heatmap-row-header{font-size:13px;font-weight:var(--font-medium);color:var(--color-navy);text-align:left;padding:var(--space-2) var(--space-3);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heatmap-cell{font-size:12px;font-weight:var(--font-medium);color:var(--color-navy);padding:var(--space-2);border-radius:var(--radius-sm);min-width:48px;transition:box-shadow var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default);cursor:default}
.heatmap-cell:hover{box-shadow:0 0 0 2px var(--color-teal);z-index:1;position:relative}
.heatmap-total{font-size:12px;font-weight:var(--font-medium);color:var(--color-navy);padding:var(--space-2) var(--space-3);background:var(--color-surface);border-radius:var(--radius-sm);min-width:48px}

/* Responsive layer — ported from the prototype's #v23-responsive block, scoped to the analytics
   view's own grids so the Dashboard reflows cleanly on iPad / narrow panes (a specific complaint).
   The KPI breakpoints above (1080/560) already collapse the card row; these add the bar-row and
   section reflow. The global sidebar/main-wrapper rules from #v23-responsive live in layout.css and
   are intentionally not duplicated here (shared file, not in scope). */
@media(max-width:900px){
  #page-insights .ins-brow{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3)}
  #page-insights .ins-brow .track{grid-column:1/-1;order:3}
  #page-insights .ins-section{padding:var(--space-5)}
}
@media(max-width:620px){
  #page-insights .ins-brow .val{min-width:0}
  #page-insights .ins-shead{flex-wrap:wrap}
  #page-insights .ins-meta-grid{grid-template-columns:1fr}
}