/* Monitoring page (new design) inside the live portal chrome.
   Everything is scoped to .mon-page: the live style.css keeps the top
   navigation, and its element rules (label, input, * margin) and slate tokens
   are reset here for the page body only. The tokens below are the design
   system's own values from base.css and app.css (no new colours); base.css is
   not linked because its element rules would restyle the live header too. */

.mon-page {
  /* the design tokens come from tokens.css (loaded on every portal page) */
  /* live style.css names that filters.js markup reads, mapped onto the new tokens */
  --text:var(--carbon);--text-2:var(--carbon);--text-3:var(--muted);--surface-2:var(--selection);--border-strong:var(--control-rule);
  --primary:var(--carbon);--primary-hover:var(--carbon-hover);--primary-tint:var(--selection);--primary-ring:var(--control-rule);
  --r-sm:var(--radius-control);--r-pill:var(--radius-control);
  display:block;background:var(--paper);color:var(--carbon);font-family:var(--font-body);font-size:var(--text-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:calc(100dvh - 61px);overflow-x:clip;
}
.mon-page *, .mon-page *::before, .mon-page *::after { box-sizing:border-box; }
.mon-page ::selection { background:var(--lime); color:var(--carbon); }
.mon-page [hidden] { display:none !important; }

/* OD-LAYOUT-PRIMITIVES v1 from base.css (structure only), kept in their layer
   so the design system's own component rules win, as in base.css. */
@layer od-layout {
  :where(.mon-page) :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell) > :where(*) { min-width:0; }
  :where(.mon-page) .od-stack { display:flex; flex-direction:column; gap:var(--od-gap,8px); }
  :where(.mon-page) .od-row { display:flex; align-items:center; gap:var(--od-gap,8px); }
  :where(.mon-page) .od-row-top { display:flex; align-items:flex-start; gap:var(--od-gap,8px); }
  :where(.mon-page) .od-cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--od-gap,8px); }
  :where(.mon-page) .od-fill { flex:1 1 0; min-width:0; }
  :where(.mon-page) .od-fixed { flex:none; }
  :where(.mon-page) .od-grid { display:grid; gap:var(--od-gap,12px); grid-template-columns:repeat(var(--od-cols,3),minmax(0,1fr)); }
  :where(.mon-page) :is(.od-stat,.od-field,.od-cell) { display:grid; gap:var(--od-gap,2px); }
  :where(.mon-page) :where(.od-stat,.od-field,.od-cell) > :where(*) { display:block; }
}

/* Undo the live element rules inside the page */
.mon-page label { display:block; margin:0; font-size:inherit; font-weight:500; color:inherit; }
.mon-page input, .mon-page select, .mon-page textarea, .mon-page button { font:inherit; color:inherit; }
.mon-page input:not([type=checkbox]):not([type=radio]), .mon-page select {
  width:100%; height:auto; min-height:var(--app-touch); padding:var(--s3); border:var(--rule) solid var(--control-rule);
  border-radius:var(--radius-control); background:var(--surface); color:var(--carbon); font-size:var(--text-body); box-shadow:none; transition:border-color var(--time-hover);
}
.mon-page input:not([type=checkbox]):not([type=radio]):hover, .mon-page select:hover { border-color:var(--carbon); }
.mon-page input:focus, .mon-page select:focus { box-shadow:none; border-color:var(--carbon); }
.mon-page input::placeholder { color:var(--muted); }
.mon-page input[type=checkbox], .mon-page input[type=radio] { width:20px; height:20px; min-height:0 !important; margin:0; padding:0; accent-color:var(--carbon); flex:none; }
.mon-page :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--carbon); outline-offset:4px; border-radius:var(--radius-control); }
.mon-page :is(h1,h2,h3,legend)[tabindex="-1"]:focus:not(:focus-visible) { outline:none; }
.mon-page a { color:var(--carbon); text-underline-offset:var(--s1); }
.mon-page a:hover { color:var(--carbon); }
.mon-page p { margin:0; max-width:72ch; }
.mon-page ul, .mon-page ol { margin:0; padding:0; }
.mon-page code { font-family:var(--font-mono); font-size:var(--text-sm); overflow-wrap:anywhere; }
.mon-page h1, .mon-page h2, .mon-page h3 { margin:0; color:var(--carbon); }
.mon-page h2 { font-size:var(--text-lead); line-height:1.3; font-weight:500; }
.mon-page h3 { font-size:var(--text-body); line-height:1.4; font-weight:500; }
.mon-page fieldset { border:0; margin:0; padding:0; min-width:0; }
.mon-page legend { padding:0; }
.mon-page svg { flex:none; }

/* Layout */
.mon-shell { width:100%; max-width:1120px; margin:0 auto; padding:var(--s8) var(--s12) var(--s12); display:grid; gap:var(--s8); }
.mon-heading h1 { font-family:var(--font-display); font-size:var(--text-page); line-height:var(--lh-page); font-weight:700; letter-spacing:var(--tracking-display); }
.mon-heading .portal-heading-actions { align-items:center; }
#mon-view { display:grid; gap:var(--s8); min-width:0; }
#mon-view > * { min-width:0; }
.mon-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mon-step-of { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Helpers the page needs from base.css */
.mon-page .muted { color:var(--muted); }
.mon-page .text-link { display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; max-width:100%; font-weight:500;
  text-decoration:underline; text-decoration-color:var(--verdite); text-decoration-thickness:2px; width:fit-content; overflow-wrap:anywhere; }
.mon-page .text-link:hover { text-decoration-thickness:3px; }
.mon-page .app-button { text-decoration:none; }
.mon-page .select-wrap { position:relative; min-width:0; }
.mon-page .select-wrap select { appearance:none; -webkit-appearance:none; padding-right:var(--s12); }
.mon-page .select-wrap svg { position:absolute; right:var(--s4); top:50%; transform:translateY(-50%); pointer-events:none; width:var(--s4); height:var(--s4); fill:none; stroke:currentColor; stroke-width:1.5; }
.mon-page .field-error { display:block; color:var(--portal-error,#8D3928); font-size:var(--text-body); overflow-wrap:anywhere; }
.mon-page .portal-feedback.error { display:grid; gap:var(--s2); }
.mon-page .portal-feedback.error a { color:var(--portal-error,#8D3928); font-weight:500; }
.mon-error-list { list-style:none; display:grid; gap:var(--s1); }
.mon-page .help { overflow-wrap:anywhere; }
.mon-page .inline-status.error { color:var(--carbon); }

/* Loader (portal.css .portal-loader rules, inline) */
.mon-loading { display:flex; align-items:center; gap:var(--s3); min-height:48px; color:var(--carbon); }
.mon-loading .brand-loader { display:block; width:32px; height:32px; stroke:none; }
.mon-loading .loader-frame { fill:var(--lime); stroke:var(--carbon); stroke-width:1.75; }
.mon-loading .loader-corner { fill:var(--carbon); }
.mon-loading .loader-lines { fill:none; stroke:var(--carbon); stroke-width:1.75; animation:mon-loading 300ms ease-out infinite alternate; }
@keyframes mon-loading { from { opacity:.25; } to { opacity:1; } }

/* Status */
.mon-page .portal-status.mon-status-alert { color:var(--portal-error,#8D3928); background:var(--surface); border-color:var(--portal-error,#8D3928); }
.mon-alert { border-left:4px solid var(--portal-error,#8D3928); background:var(--surface); }
.mon-alert strong { color:var(--portal-error,#8D3928); }
.mon-flash { border-left:4px solid var(--carbon); }

/* List */
.mon-row-title { font-size:inherit; font-weight:inherit; }
.mon-page .monitor-name { color:var(--carbon); text-decoration:underline; text-decoration-color:var(--verdite); text-decoration-thickness:2px; display:inline-block; }
.mon-page .monitor-list-row .help { font-size:var(--text-sm); }
.mon-page .monitor-list-row { border-bottom:var(--rule) solid var(--border); }
.mon-page .monitor-list .monitor-list-row:first-child { border-top:var(--rule) solid var(--border); }
.mon-empty-title { font-size:var(--text-lead); }
.mon-guide > summary { font-weight:500; }
.mon-guide-body { --od-gap:var(--s3); padding-block:var(--s3); }
.mon-guide-body h3 { margin-top:var(--s3); }
.mon-guide-list { list-style:none; display:grid; gap:0; }
.mon-guide-list li { padding-block:var(--s2); border-bottom:var(--rule) solid var(--border); }
.mon-guide-list strong { display:block; font-weight:500; }

/* Detail */
.mon-page .monitor-state-bar { padding-bottom:var(--s3); }
.mon-page .portal-detail-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
.mon-first-due { padding-bottom:var(--s3); }
.mon-run .portal-row-meta { color:var(--muted); }
.mon-run-note { color:var(--carbon); }
.mon-run .portal-row-actions { align-items:center; }
.mon-settings-body { --od-gap:0; }
.mon-setting { display:grid; gap:var(--s3); padding-block:var(--s6); border-top:var(--rule) solid var(--border); }
.mon-setting:first-child { border-top:0; }
.mon-setting > legend, .mon-freq > legend { font-weight:500; margin-bottom:var(--s3); }
.mon-page .selection-list { list-style:none; display:grid; gap:0; }
.mon-page .selection-list li { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:var(--s4); padding-block:var(--s2); border-bottom:var(--rule) solid var(--border); }
.mon-page .selection-list strong { font-weight:500; overflow-wrap:anywhere; }
.mon-page .selection-list span { overflow-wrap:anywhere; text-align:left; }
.mon-dd-list { list-style:none; display:grid; gap:var(--s1); }
.mon-dd-list li::before { content:'· '; }
.mon-secret code { background:var(--surface); padding:var(--s3); border:var(--rule) solid var(--border); }

/* Wizard */
.mon-page .monitor-wizard { display:grid; max-width:800px; }
.mon-page .monitor-step-panel > legend { display:block; width:100%; }
.mon-sub-h { font-size:var(--text-body); }
.mon-source { display:grid; gap:var(--s1); }
.mon-source > legend { font-weight:500; margin-bottom:var(--s2); }
.mon-source-body { --od-gap:var(--s4); }
.mon-page .portal-check { display:flex; gap:var(--s3); align-items:flex-start; min-height:44px; padding-block:var(--s2); cursor:pointer; font-weight:400; }
.mon-page .portal-check input { margin-top:var(--s1); }
.mon-page .portal-check.is-disabled { cursor:default; color:var(--muted); }
.mon-check-label { font-weight:500; }
.mon-check-note { color:var(--carbon); }
.monitor-event.is-locked .mon-check-label { color:var(--muted); }
.mon-page .monitor-event-group > legend { font-weight:500; }
.mon-page .monitor-threshold-fields { padding-left:var(--s8); }
.mon-page .monitor-threshold-fields .mon-readout { grid-column:1 / -1; }
.mon-count-wrap { display:grid; gap:var(--s2); }
.mon-count { display:grid; gap:var(--s1); min-height:56px; align-content:center; padding-block:var(--s3); border-block:var(--rule) solid var(--border); }
.mon-count:empty { display:none; }
.mon-count-value { font-family:var(--font-display); font-size:var(--text-number); line-height:1.15; overflow-wrap:anywhere; }
.mon-count-label { color:var(--muted); }
.mon-count.is-over .mon-count-value { color:var(--portal-error,#8D3928); }
.mon-hints { --od-gap:var(--s2); }
.mon-hints:empty { display:none; }
.mon-hint { padding:var(--s3) var(--s4); background:var(--selection); color:var(--carbon); }
.mon-freq { display:grid; gap:var(--s1); }
.mon-recipients { --od-gap:var(--s2); }
.mon-consent { --od-gap:var(--s2); padding-top:var(--s4); border-top:var(--rule) solid var(--border); }
.mon-consent-row .portal-check { font-weight:400; }
.mon-consent-row a { font-weight:500; text-decoration-color:var(--verdite); text-decoration-thickness:2px; }
.mon-drop-note { color:var(--carbon); }

/* filters.js markup (live classes) in the new design */
.mon-filters { display:grid; gap:var(--s4); }
.mon-engine-status:empty { display:none; }
.mon-filters .filter-field { display:grid; gap:var(--s1); margin:0 0 var(--s3); min-width:0; }
.mon-filters .filter-field > label { font-size:13px; font-weight:500; }
.mon-filters .filter-field > label:has(> input[type=checkbox]) { display:flex !important; gap:var(--s2) !important; align-items:flex-start !important; min-height:28px; padding-block:var(--s1); font-weight:400 !important; cursor:pointer; }
.mon-filters .filter-field > label > input[type=checkbox] { margin-top:2px; }
.mon-filters .range-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s3); }
.mon-filters .chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s1); }
.mon-filters .chip { display:inline-flex; align-items:center; min-height:36px; padding:var(--s1) var(--s3); border:var(--rule) solid var(--control-rule); border-radius:var(--radius-control); background:var(--surface); color:var(--carbon); font-size:var(--text-sm); cursor:pointer; }
.mon-filters .chip:hover { border-color:var(--carbon); background:var(--selection); color:var(--carbon); }
.mon-filters .chk-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:var(--s1) var(--s4); max-height:none; border:0; padding:0; background:none; }
.mon-filters .chk-list__item { display:flex; gap:var(--s3); align-items:flex-start; min-height:40px; padding-block:var(--s1); margin:0; font-weight:400; cursor:pointer; }
.mon-filters .chk-list__item span { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.mon-filters .chk-list__item:hover span { color:var(--carbon); }
.mon-filters .industry-tags { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s2); max-height:132px; overflow:auto; }
.mon-filters .industry-tag { display:inline-flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s2); border:var(--rule) solid var(--control-rule); border-radius:var(--radius-control); background:var(--selection); color:var(--carbon); font-size:var(--text-sm); max-width:100%; overflow-wrap:anywhere; }
.mon-filters .industry-tag .remove { cursor:pointer; font-size:18px; line-height:1; padding:0 var(--s1); color:var(--carbon); }
.mon-filters .industry-picker { border:var(--rule) solid var(--control-rule); border-radius:var(--radius-control); background:var(--surface); overflow:hidden; }
.mon-filters .industry-picker__search { border:0 !important; border-bottom:var(--rule) solid var(--border) !important; border-radius:0 !important; }
.mon-filters .industry-tree-wrap { max-height:240px; overflow-y:auto; overscroll-behavior:contain; padding:var(--s1) 0; -webkit-mask-image:none; mask-image:none; }
.mon-filters .industry-tree { font-size:13px; }
.mon-filters .industry-tree ul { list-style:none; margin:0; padding:0 0 0 var(--s3); }
.mon-filters .industry-tree > ul { padding-left:var(--s1); }
.mon-filters .industry-tree li.hidden { display:none; }
.mon-filters .industry-tree .node-row { display:flex; align-items:flex-start; gap:2px; min-height:28px; padding:2px var(--s1); border-radius:var(--radius-control); }
.mon-filters .industry-tree .node-row:hover { background:var(--selection); }
.mon-filters .industry-tree .toggle { width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); cursor:pointer; flex:none; }
.mon-filters .industry-tree .toggle.expanded { transform:rotate(90deg); }
.mon-filters .industry-tree .toggle.leaf { visibility:hidden; }
.mon-filters .industry-tree .node-label { flex:1; min-width:0; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.mon-filters .industry-tree .node-kood { font-weight:500; color:var(--carbon); margin-right:var(--s2); font-variant-numeric:tabular-nums; }
.mon-filters .industry-tree .node-text { color:var(--carbon); }
.mon-filters .industry-tree .highlight { background:var(--lime); color:var(--carbon); }
.mon-filters .muted { color:var(--muted); }
.mon-page .mon-more-toggle { width:100%; justify-content:flex-start; gap:var(--s2); }
.mon-page .mon-more-toggle .sign { font-weight:500; width:1ch; }
.mon-filters .more-panel { display:none; padding-top:var(--s2); }
.mon-filters .more-panel.open { display:block; }

/* Dialog */
.mon-page .portal-dialog { color:var(--carbon); font-family:var(--font-body); }
.mon-page .portal-dialog h2 { font-size:var(--text-lead); }
.mon-page .portal-dialog-actions { justify-content:flex-start; }

/* No-script */
.mon-noscript { padding:var(--s4); background:var(--support-surface); }

@media (max-width:1023px) {
  .mon-page .portal-detail-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .mon-shell { padding:var(--s6) var(--s4) var(--s8); gap:var(--s6); }
  .mon-page .monitor-threshold-fields { padding-left:0; grid-template-columns:minmax(0,1fr); }
  .mon-page .selection-list li { grid-template-columns:minmax(0,1fr); gap:var(--s1); }
  .mon-page .portal-detail-facts { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .mon-count-value { font-size:var(--text-section); }
  .mon-page .portal-heading-actions .app-button { width:100%; }
  .mon-page .portal-dialog-actions .app-button { flex:1 1 auto; }
  .mon-filters .range-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:374px) {
  .mon-page .portal-detail-facts { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .mon-page *, .mon-page *::before, .mon-page *::after { animation:none !important; transition:none !important; }
}

/* Match the search form's density, including this reusable filter engine. */
.mon-filters .filter-field input:not([type=checkbox]):not([type=radio]),.mon-filters .filter-field select{min-height:36px;height:auto;padding:var(--s2);font-size:14px;line-height:1.3}
.mon-filters .industry-tree input[type=checkbox]{width:24px;height:24px}
.mon-filters .chip{min-height:28px;padding:var(--s1) var(--s2);font-size:13px}
.mon-filters .chk-list__item{min-height:28px;font-size:13px;gap:var(--s2)}
@media(pointer:coarse){
 .mon-filters .filter-field input:not([type=checkbox]):not([type=radio]),.mon-filters .filter-field select{min-height:44px;font-size:16px}
 .mon-filters .industry-tree .toggle{width:20px;height:32px}
 .mon-filters .industry-tree input[type=checkbox]{width:32px;height:32px}
 .mon-filters .industry-tree .node-row{min-height:36px}
 .mon-filters .chip,.mon-filters .chk-list__item,.mon-filters .filter-field>label:has(>input[type=checkbox]){min-height:44px}
}