/* ============================================================================
   MASAR v5 — css5/9-pages-e.css
   Page-specific layout for the INTELLIGENCE group only:
     .p-rep   Reports & Analytics   (PAGE_REPORTS)
     .p-ins   AI Insights           (PAGE_INSIGHTS)
     .p-alm   Alarms & Events       (PAGE_ALARMS)

   Layout and small data ornaments only. Every colour is a token from
   1-tokens.css or a data colour passed inline by the page. Logical
   properties throughout — no left/right — so RTL is this same stylesheet.

   The print block at the end is the one that matters: css5/2-base.css
   already strips the shell for print, and this adds what a REPORT needs
   on paper — the picker and the filter bar gone, the print header shown,
   the table header repeated on every sheet, and no card or table row
   split across a page break.
   ========================================================================== */

/* ==========================================================================
   SHARED — the three pages use the same note and severity ornaments
   ========================================================================== */

.p-rep__note,
.p-ins__basis{
  display:flex;align-items:flex-start;gap:7px;
  padding:var(--s-3) var(--card-pad-lg);
  font:var(--ty-caption);color:var(--text-3);line-height:1.55;
  border-top:1px solid var(--line-subtle);
}
.p-ins__basis{padding:var(--s-2) 0;border-top:0}
.p-rep__note svg,.p-ins__basis svg{flex:0 0 auto;margin-block-start:1px;opacity:.8}
.p-bad{color:var(--critical);font-weight:600}

/* ==========================================================================
   REPORTS
   ========================================================================== */

/* the columns fill the region and scroll inside it; 'start' left them at
   their natural height and the region clipped whatever did not fit */
.p-rep__grid{align-items:stretch;min-height:0}
.p-rep__body{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}

/* -- the picker ---------------------------------------------------------- */
/* the picker is a column of the page, not a sticky block inside a scroller:
   it fills its column and scrolls in place */
.p-rep__pickcard{min-height:0}
.p-rep__pickcard > .m-card__body{overflow:auto;overscroll-behavior:contain;min-height:0}
.p-rep__grp + .p-rep__grp{margin-block-start:var(--s-4)}
.p-rep__grp h4{
  font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;
  letter-spacing:.06em;margin-block-end:var(--s-2);
}
.p-rep__item{
  display:flex;align-items:flex-start;gap:9px;
  padding:7px 9px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid transparent;
}
.p-rep__item:hover{background:var(--surface-sunken)}
.p-rep__item:focus-visible{box-shadow:var(--focus-ring);outline:none}
.p-rep__item.is-on{background:var(--accent-soft);border-color:var(--accent-soft-line)}
.p-rep__item__ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-xs);flex:0 0 auto;
  background:var(--surface-sunken);color:var(--text-2);
}
.p-rep__item.is-on .p-rep__item__ic{background:var(--surface);color:var(--accent-press)}
.p-rep__item__x{display:flex;flex-direction:column;gap:1px;min-width:0}
.p-rep__item__x b{font:var(--ty-label);color:var(--text);font-weight:600}
.p-rep__item.is-on .p-rep__item__x b{color:var(--accent-press)}
.p-rep__item__x span{font:var(--ty-caption);color:var(--text-3);line-height:1.45}

/* -- the filter bar ------------------------------------------------------ */
.p-rep__filters{row-gap:var(--s-2)}
.p-rep__date{display:inline-flex;align-items:center;gap:6px;min-width:0}
.p-rep__date > span{font:var(--ty-label-sm);color:var(--text-3)}
.p-rep__date input{inline-size:140px}

/* -- the report title row ------------------------------------------------ */
.p-rep__title{display:flex;align-items:flex-start;gap:var(--s-4);flex-wrap:wrap}
.p-rep__title__x{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 320px}
.p-rep__title__x h2{font:var(--ty-h1);color:var(--text);letter-spacing:-.015em}
.p-rep__title__x p{font:var(--ty-body-sm);color:var(--text-2)}
.p-rep__title__acts{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.p-rep__chartcard .m-chart + .m-chart{margin-block-start:var(--s-4)}

/* -- the print header: off-screen, on paper ------------------------------ */
.p-rep__ph{display:none}

/* ==========================================================================
   AI INSIGHTS
   ========================================================================== */

.p-ins__method .m-banner{align-items:flex-start}
.p-ins__grid{align-items:stretch;min-height:0}
.p-ins__main{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.p-ins__rail{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.p-ins__filters{row-gap:var(--s-2)}
.p-ins__loading{display:flex;flex-direction:column;gap:var(--s-3)}
.p-ins__streams{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:var(--s-3)}

/* -- one finding --------------------------------------------------------- */
.p-ins__list{display:flex;flex-direction:column;gap:var(--s-2)}
.p-ins__row{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-xs);
}
.p-ins__row.is-open{border-color:var(--line-strong);box-shadow:var(--sh-sm)}
.p-ins__head{
  display:flex;align-items:center;gap:var(--s-3);
  padding:9px var(--s-3);cursor:pointer;min-height:48px;
}
.p-ins__head:hover{background:var(--surface-sunken)}
.p-ins__head:focus-visible{box-shadow:var(--focus-ring);outline:none}
.p-ins__chev{display:inline-flex;color:var(--text-3);flex:0 0 auto}
.p-ins__sevcell{flex:0 0 auto}
.p-ins__title{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.p-ins__title b{font:var(--ty-label);color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-ins__title span{font:var(--ty-caption);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-ins__conf{display:flex;flex-direction:column;gap:3px;flex:0 0 86px}
.p-ins__conf b{font:var(--ty-label-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
.p-ins__money{
  flex:0 0 auto;font:var(--ty-label);color:var(--text);font-weight:600;
  font-variant-numeric:tabular-nums;min-inline-size:96px;text-align:end;
}

.p-ins__body{padding:0 var(--s-4) var(--s-4);border-top:1px solid var(--line-subtle)}
.p-ins__finding{
  font:var(--ty-body-sm);color:var(--text);line-height:1.65;
  padding-block:var(--s-3);max-inline-size:78ch;
}
.p-ins__sec{margin-block-start:var(--s-3)}
.p-ins__sec h4{
  font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;
  letter-spacing:.06em;margin-block-end:var(--s-2);
}
.p-ins__affs{display:flex;flex-wrap:wrap;gap:6px}
.p-ins__aff{cursor:pointer}
.p-ins__aff--dead{
  border-style:dashed;color:var(--critical);
  background:var(--crit-soft);border-color:var(--crit-line);cursor:not-allowed;
}
.p-ins__impact,.p-ins__rec,.p-ins__trail{
  display:flex;align-items:flex-start;gap:9px;margin-block-start:var(--s-3);
  padding:var(--s-3);border-radius:var(--r-sm);background:var(--surface-sunken);
}
.p-ins__rec{background:var(--accent-soft);color:var(--accent-press)}
.p-ins__trail{background:var(--ok-soft)}
.p-ins__impact svg,.p-ins__rec svg,.p-ins__trail svg{flex:0 0 auto;margin-block-start:2px}
.p-ins__impact b,.p-ins__rec b,.p-ins__trail b{display:block;font:var(--ty-label);font-weight:600}
.p-ins__impact span,.p-ins__rec span,.p-ins__trail span{
  display:block;font:var(--ty-body-sm);color:var(--text-2);line-height:1.6;
}
.p-ins__rec span{color:var(--accent-press)}
.p-ins__impact__n{font-variant-numeric:tabular-nums;color:var(--text)!important;font-weight:550}
.p-ins__changes{font:var(--ty-caption);color:var(--text-3);margin-block-start:4px}
.p-ins__acts{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  margin-block-start:var(--s-4);padding-block-start:var(--s-3);
  border-top:1px solid var(--line-subtle);
}
.p-ins__fb{display:inline-flex;align-items:center;gap:6px;font:var(--ty-caption);color:var(--text-3)}
.p-ins__fc .m-rings{justify-content:flex-start;margin-block-end:var(--s-3)}
.p-ins__fc .m-table-wrap{margin-block-start:var(--s-3)}

/* ==========================================================================
   ALARMS
   ========================================================================== */

.p-alm__grid{align-items:start}
.p-alm__rail{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.p-alm__ctl{row-gap:var(--s-2)}
.p-alm__keys{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  font:var(--ty-caption);color:var(--text-3);
}
.p-alm__keys svg{opacity:.7}
.p-alm__keys kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:19px;height:18px;padding:0 4px;
  font:var(--ty-caption);font-family:var(--font-mono,ui-monospace,monospace);
  color:var(--text-2);background:var(--surface);
  border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;
}

.p-alm__listcard > .m-card__body:focus-visible{box-shadow:inset var(--focus-ring);outline:none}
.p-alm__listhead{
  display:flex;align-items:center;gap:9px;
  padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--line-subtle);
  font:var(--ty-caption);color:var(--text-3);
}
.p-alm__hint{color:var(--text-3)}
.p-alm__bulk{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:var(--s-2) var(--s-4);
  background:var(--accent-soft);border-bottom:1px solid var(--accent-soft-line);
}
.p-alm__bulk > b{font:var(--ty-label);color:var(--accent-press)}
.p-alm__ck{padding-inline-start:2px}
.p-alm__cond{display:flex;flex-direction:column;gap:1px;min-width:0}
.p-alm__cond b{font:var(--ty-label);color:var(--text);font-weight:600}
.p-alm__cond span{font:var(--ty-caption);color:var(--text-2);line-height:1.45}
.p-alm__ago{display:block;font:var(--ty-caption);color:var(--text-3)}
.p-alm__rep{color:var(--warn);font-variant-numeric:tabular-nums}
.p-alm__until{display:block;font:var(--ty-caption);color:var(--text-3);margin-block-start:2px}
.p-alm__panel .m-card__body{padding-block:var(--s-3)}
.p-alm__events > .m-card__body{max-height:420px}

/* ==========================================================================
   NARROW VIEWPORTS — the rails stack under the thing they annotate
   ========================================================================== */
@media (max-width:1100px){
  .p-rep__pickcard{position:static}
  .p-rep__pickcard > .m-card__body{max-height:340px}
  .p-ins__conf{flex-basis:64px}
  .p-ins__money{min-inline-size:72px}
}
@media (max-width:720px){
  .p-rep__date input{inline-size:118px}
  .p-ins__head{flex-wrap:wrap;row-gap:6px}
  .p-ins__conf,.p-ins__money{flex:1 1 auto;text-align:start}
  .p-alm__keys{display:none}
}

/* ==========================================================================
   PRINT — a report that survives the printer
   2-base.css already drops the nav, the top bar, the drawer, the toasts and
   the pager. This drops what is specific to these pages, promotes the print
   header, and keeps rows and cards whole across a page break.
   ========================================================================== */
@media print{
  /* chrome that has no business on paper */
  .p-rep__pickcard,.p-rep__filters,.p-rep__title,.p-rep__grid > #rpPick,
  .p-alm__ctl,.p-alm__bulk,.p-alm__listhead,.p-alm__keys,.p-acts,
  .p-ins__acts,.p-ins__filters,.p-ins__chev,
  .m-page-head__acts,.m-demo,.no-print{display:none !important}

  /* the rail stops being a rail */
  .m-grid--rail-main,.m-grid--main-rail,.p-rep__grid,.p-ins__grid,.p-alm__grid{
    display:block !important;
  }
  .p-rep__body > * + *,.p-ins__rail > * + *,.p-alm__rail > * + *{margin-block-start:10mm}

  /* the print header, which only exists on paper */
  .p-rep__ph{display:block;margin-block-end:6mm;break-after:avoid}
  .p-rep__ph h2{font-size:17pt;margin-block-end:2mm}
  .p-rep__ph p{font-size:10pt;color:#333;margin-block-end:3mm}
  .p-rep__ph dl{display:flex;flex-wrap:wrap;gap:2mm 8mm;font-size:9pt;color:#333}
  .p-rep__ph dt{font-weight:700;display:inline}
  .p-rep__ph dd{display:inline;margin-inline-start:2mm}
  .p-rep__ph dl > div{break-inside:avoid}

  /* figures and tables stay whole */
  .m-kpis{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));
          gap:4mm;break-inside:avoid;break-after:avoid}
  .m-kpi{border:1px solid #ccc;break-inside:avoid}
  .m-card{break-inside:auto}
  .m-card__head{break-after:avoid}
  .m-card__body--scroll,.m-table-wrap,.p-rep__pickcard > .m-card__body,
  .p-alm__events > .m-card__body{max-height:none !important;overflow:visible !important}
  .m-chart{break-inside:avoid}
  .m-table{font-size:8.5pt}
  .m-table thead{display:table-header-group}
  .m-table tfoot{display:table-footer-group}
  .m-table tbody tr{break-inside:avoid;break-after:auto}
  .m-table tbody td{height:auto;padding-block:1.6mm}
  .p-rep__note,.p-ins__basis{color:#333;break-inside:avoid}

  /* a finding prints whatever is on screen: an expanded row carries its
     evidence, a collapsed one prints as a headline. Expand what matters
     before printing — the page does not silently expand it for you. */
  .p-ins__row{break-inside:avoid;border:1px solid #ccc}
  .p-ins__body{display:block !important}
  .p-ins__row .m-bar{border:1px solid #ccc}

  /* severity must still read without colour */
  .m-pill{border:1px solid #666 !important;color:#000 !important;background:transparent !important}
}