/*
 * Charlz portal widget styles, mirrored from Axoft-Easy-Front-end:
 *   src/styles/tokens.css (light theme), src/components/ui/dashboard/* and
 *   src/components/ui/Card/Card.tsx. Class names map 1:1 to the Tailwind
 *   utilities used there so the widgets look the same as in the portal.
 */
.pt {
  --brand: 0 149 155; --brand-strong: 3 114 124; --brand-secondary: 11 31 51;
  --success: 20 115 55; --warning: 135 90 8; --error: 190 38 48; --info: 27 100 182; --metric-violet: 124 58 237;
  --s-base: 236 240 245; --s-raised: 250 251 253; --s-sunken: 226 232 239; --s-overlay: 250 251 253;
  --t1: 11 31 51; --t2: 71 87 102; --t3: 88 104 120;
  --b1: 227 232 239; --b2: 199 210 221;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-md: 10px; --r-lg: 16px;
  --dur: 200ms; --ease-standard: cubic-bezier(.2, .8, .2, 1);
  font-family: "OktaNeue", system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; color: rgb(var(--t1));
  -webkit-font-smoothing: antialiased; text-align: left; letter-spacing: 0;
}
.pt *, .pt *::before, .pt *::after { box-sizing: border-box; }
.pt p, .pt h1, .pt h3 { margin: 0; }
.pt h1, .pt h3 { letter-spacing: 0; line-height: 1.5; color: rgb(var(--t1)); }
.pt button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.pt button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--brand)); }
.pt svg { display: block; flex-shrink: 0; }
.pt .num { font-variant-numeric: tabular-nums; }

/* type scale (tokens.css) */
.pt .t-display { font-size: 30px; font-weight: 500; line-height: 1; }
.pt .t-h2 { font-size: 23px; font-weight: 500; line-height: 1; }
.pt .t-h3 { font-size: 16px; font-weight: 500; }
.pt .t-body { font-size: 15px; }
.pt .t-small { font-size: 13px; }
.pt .t-label { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: rgb(var(--t3)); }
.pt .c1 { color: rgb(var(--t1)); } .pt .c2 { color: rgb(var(--t2)); } .pt .c3 { color: rgb(var(--t3)); }
.pt .c-brand { color: rgb(var(--brand)); } .pt .c-ok { color: rgb(var(--success)); }
.pt .c-warn { color: rgb(var(--warning)); } .pt .c-err { color: rgb(var(--error)); }
.pt .fw5 { font-weight: 500; } .pt .fw6 { font-weight: 600; }
.pt .stack > * + * { margin-top: var(--gap, var(--s4)); }

/* Card + WidgetCard */
.pt-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); padding: var(--s5); min-width: 0;
}
.pt-wc { display: flex; flex-direction: column; gap: var(--s4); height: 100%; container-type: inline-size; container-name: widget-card; }
.pt-wc-top > * + * { margin-top: var(--s2); }
.pt-wh { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.pt-wh.toggle {
  margin: calc(var(--s2) * -1) calc(var(--s2) * -1) 0; padding: var(--s2) var(--s2) var(--s1);
  border-radius: var(--r-md); cursor: pointer; transition: background-color var(--dur) var(--ease-standard);
}
.pt-wh.toggle:hover { background: rgb(var(--s-sunken)); }
.pt-wid { display: flex; min-width: 0; flex: 1; align-items: flex-start; gap: var(--s3); }
.pt-chip { display: inline-flex; width: 26px; height: 26px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--brand) / .1); color: rgb(var(--brand)); }
.pt-wid h3 { min-width: 0; font-size: 16px; font-weight: 500; color: rgb(var(--t1)); }
.pt-wh-actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--s2); }
.pt-chev { margin-top: 4px; color: rgb(var(--t3)); transition: transform var(--dur) var(--ease-standard); }
.pt-chev.open { transform: rotate(180deg); }
.pt-gear { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: var(--r-md); color: rgb(var(--t3)); transition: background-color var(--dur), color var(--dur); }
.pt-gear:hover { background: rgb(var(--s-sunken)); color: rgb(var(--t1)); }
.pt-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pt-meta { white-space: nowrap; font-size: 13px; color: rgb(var(--t3)); }
.pt-wc > * { flex-shrink: 0; }
.pt-body { flex: 1 0 auto; }
.pt-body > * + * { margin-top: var(--s4); }

.pt-insight { display: flex; align-items: flex-start; gap: var(--s3); border-radius: var(--r-md); border: 1px solid; padding: var(--s3); }
.pt-insight.brand { border-color: rgb(var(--brand) / .1); background: rgb(var(--brand) / .05); }
.pt-insight.error { border-color: rgb(var(--error) / .1); background: rgb(var(--error) / .05); }
.pt-insight.warning { border-color: rgb(var(--warning) / .1); background: rgb(var(--warning) / .05); }
.pt-insight.success { border-color: rgb(var(--success) / .1); background: rgb(var(--success) / .05); }
.pt-insight .ichip { margin-top: 2px; display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--r-md); }
.pt-insight.brand .ichip { background: rgb(var(--brand) / .1); color: rgb(var(--brand)); }
.pt-insight.error .ichip { background: rgb(var(--error) / .1); color: rgb(var(--error)); }
.pt-insight.warning .ichip { background: rgb(var(--warning) / .1); color: rgb(var(--warning)); }
.pt-insight p { min-width: 0; flex: 1; font-size: 13px; line-height: 20px; color: rgb(var(--t2)); }
.pt-insight .iact { display: inline-flex; height: 32px; flex-shrink: 0; align-self: center; align-items: center; gap: var(--s1); border-radius: 999px; padding: 0 var(--s3); font-size: 13px; font-weight: 500; transition: background-color var(--dur); white-space: nowrap; }
.pt-insight.brand .iact { border: 1px solid rgb(var(--brand) / .4); background: rgb(var(--brand) / .05); color: rgb(var(--brand)); }
.pt-insight.brand .iact:hover { background: rgb(var(--brand) / .1); }
.pt-insight.error .iact { border: 1px solid transparent; background: rgb(var(--error)); color: #fff; }
.pt-insight.error .iact:hover { background: rgb(var(--error) / .9); }
.pt-insight.warning .iact { border: 1px solid transparent; background: rgb(var(--warning)); color: #fff; }
.pt-insight.warning .iact:hover { background: rgb(var(--warning) / .9); }

.pt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border-top: 1px solid rgb(var(--b1)); padding-top: var(--s3); font-size: 13px; color: rgb(var(--t2)); }
.pt-foot button { font-size: 13px; font-weight: 500; color: rgb(var(--brand)); transition: color var(--dur); }
.pt-foot button:hover { color: rgb(var(--brand-strong)); }

/* StatusBadge */
.pt-badge { display: inline-flex; min-height: 28px; align-items: center; gap: var(--s1); border-radius: 999px; border: 1px solid; padding: var(--s1) var(--s2); font-size: 13px; font-weight: 500; line-height: 1; }
.pt-badge.success { border-color: rgb(var(--success) / .2); background: rgb(var(--success) / .1); color: rgb(var(--success)); }
.pt-badge.warning { border-color: rgb(var(--warning) / .2); background: rgb(var(--warning) / .1); color: rgb(var(--warning)); }
.pt-badge.error { border-color: rgb(var(--error) / .2); background: rgb(var(--error) / .1); color: rgb(var(--error)); }
.pt-badge.neutral { border-color: rgb(var(--b1)); background: rgb(var(--s-sunken)); color: rgb(var(--t2)); }

/* Summary grid: sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end */
.pt-sum { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .pt-sum { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.pt-frame .pt-sum { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.pt-sum .r { text-align: right; }
.pt-sum > div > * + * { margin-top: var(--s1); }

/* RatioBar / UsageBar */
.pt-bar { display: flex; height: 12px; overflow: hidden; border-radius: 999px; border: 1px solid rgb(var(--b1)); background: rgb(var(--s-sunken)); }
.pt-bar > i { display: block; height: 100%; transition: width var(--dur); }
.pt-bar.usage > i { border-radius: 999px; }
.tone-brand { background: rgb(var(--brand)); } .tone-brand-strong { background: rgb(var(--brand-strong)); }
.tone-muted { background: rgb(var(--t3)); } .tone-success { background: rgb(var(--success)); }
.tone-warning { background: rgb(var(--warning)); } .tone-error { background: rgb(var(--error)); }
.pt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); font-size: 13px; color: rgb(var(--t2)); margin-top: var(--s2); }
.pt-legend span { display: inline-flex; align-items: center; gap: var(--s1); }
.pt-legend .d { width: 10px; height: 10px; border-radius: 50%; }
.pt-legend .sl { color: rgb(var(--t3)); }
.pt-ulabels { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); font-size: 13px; color: rgb(var(--t2)); }

/* StatBox / StatTileButton — widget-stat-grid (globals.css) */
.pt-stats { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@container widget-card (min-width: 24rem) { .pt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-stat { display: block; width: 100%; border-radius: var(--r-md); }
.pt-stat > div { height: 100%; border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-sunken)); padding: var(--s4); transition: background-color var(--dur); }
.pt-stat .v { font-size: 21px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.pt-stat .l { margin-top: var(--s1); font-size: 13px; color: rgb(var(--t3)); }
button.pt-stat:hover > div { background: rgb(var(--s-sunken)); filter: brightness(.985); }

/* Rows */
.pt-rows > * + * { margin-top: var(--s2); }
.pt-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s3); border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); padding: var(--s3); transition: background-color var(--dur) var(--ease-standard); }
.pt-row.err { border-color: rgb(var(--error) / .3); background: rgb(var(--error) / .05); }
.pt-row.warn { border-color: rgb(var(--warning) / .3); background: rgb(var(--warning) / .05); }
.pt-row.zero { background: rgb(var(--s-sunken) / .4); }
button.pt-row.h-n:hover { background: rgb(var(--s-sunken)); }
button.pt-row.h-e:hover { background: rgb(var(--error) / .1); }
button.pt-row.h-w:hover { background: rgb(var(--warning) / .1); }
button.pt-row.h-s:hover { background: rgb(var(--success) / .1); }
.pt-sla { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 96px auto; align-items: center; gap: var(--s1) var(--s3); border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); padding: var(--s2) var(--s3); transition: background-color var(--dur); }
.pt-sla.err { border-color: rgb(var(--error) / .3); background: rgb(var(--error) / .05); }
.pt-sla.zero { background: rgb(var(--s-sunken) / .4); }
.pt-sla .pc { width: 40px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.pt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sev { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.pt-sev span { display: inline-flex; gap: var(--s1); border-radius: 999px; padding: 2px 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-sev .z { background: rgb(var(--s-sunken)); color: rgb(var(--t3)); }
.pt-sev .h { background: rgb(var(--error) / .1); color: rgb(var(--error)); }
.pt-sev .m { background: rgb(var(--warning) / .1); color: rgb(var(--warning)); }
.pt-sev .lo { background: rgb(var(--success) / .1); color: rgb(var(--success)); }
.pt-tl { display: flex; align-items: center; gap: var(--s4); }
.pt-tl span { display: inline-flex; align-items: center; gap: var(--s1); font-size: 13px; color: rgb(var(--t2)); }
.pt-tl i { width: 10px; height: 10px; border-radius: 3px; }
.pt-ctrl { display: flex; width: 100%; align-items: center; justify-content: space-between; border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-sunken)); padding: 12px; font-size: 15px; transition: background-color var(--dur); }
.pt-ctrl:hover { background: rgb(var(--s-overlay)); }
.pt-ctrl.warn { border-color: rgb(var(--warning)); background: rgb(var(--warning) / .05); }
.pt-ctrl.warn:hover { background: rgb(var(--warning) / .1); }
.pt-ctrl .n { margin-left: var(--s3); display: flex; align-items: center; gap: var(--s2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-ctrl .n svg { color: rgb(var(--t3)); }

/* Ring / Gauge */
.pt-ring { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; }
.pt-ring .in { pointer-events: none; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--s3); text-align: center; }
.pt-ring .in .cl { font-size: 16px; font-weight: 500; line-height: 1; }
.pt-ring .in .sl { margin-top: var(--s1); font-size: 13px; line-height: 1.25; color: rgb(var(--t3)); }
.pt-gauge { position: relative; display: inline-flex; flex-shrink: 0; align-items: flex-start; justify-content: center; }
.pt-gauge .in { pointer-events: none; position: absolute; inset: 0; display: flex; transform: translateY(4px); flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: var(--s1); text-align: center; }
.pt-gauge .in .cl { font-size: 23px; font-weight: 600; line-height: 1; }
.pt-gauge .in > div + div { margin-top: 2px; font-size: 13px; }
.pt-anim .pt-ring .val { animation: ptRing 1.4s var(--ease-standard) both; }
@keyframes ptRing { from { stroke-dashoffset: var(--c); } }
.pt-anim .pt-gauge .val { animation: ptGauge 1.4s var(--ease-standard) both; }
@keyframes ptGauge { from { stroke-dasharray: 0 200; } }
.pt-anim .pt-bar > i { animation: ptBar 1.2s var(--ease-standard) both; transform-origin: left; }
@keyframes ptBar { from { transform: scaleX(0); } }

.pt-center { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.pt-rings { display: flex; width: 100%; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--s3) var(--s6); }
.pt-rings > div { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.pt-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s1) var(--s3); font-size: 13px; }
.pt-dots span { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.pt-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.pt-trendcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.pt-trendcards > div { border-radius: var(--r-md); background: rgb(var(--s-sunken)); padding: 8px 12px; }
.pt-trendcards .k { font-size: 11px; color: rgb(var(--t3)); }
.pt-trendcards .v { margin-top: var(--s1); font-size: 16px; font-weight: 600; }
.pt-spark { width: 100%; height: 28px; overflow: visible; }
.pt-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: 13px; color: rgb(var(--t3)); }

/* Antivirus / BCDR */
.pt-state { border-radius: var(--r-md); border: 1px solid; padding: var(--s3); display: flex; align-items: flex-start; gap: var(--s3); }
.pt-state.ok { border-color: rgb(var(--success) / .2); background: rgb(var(--success) / .05); }
.pt-state.warn { border-color: rgb(var(--warning) / .2); background: rgb(var(--warning) / .05); }
.pt-state .sc { display: inline-flex; width: 32px; height: 32px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--r-md); }
.pt-state.ok .sc { background: rgb(var(--success) / .1); color: rgb(var(--success)); }
.pt-state.warn .sc { background: rgb(var(--warning) / .1); color: rgb(var(--warning)); }
.pt-state.err { border-color: rgb(var(--error) / .2); background: rgb(var(--error) / .05); }
.pt-state.err .sc { background: rgb(var(--error) / .1); color: rgb(var(--error)); }
.pt-state.unk { border-color: rgb(var(--b1)); background: rgb(var(--s-sunken)); }
.pt-state.unk .sc { background: rgb(var(--s-raised)); color: rgb(var(--t2)); }
.pt-resolved { display: flex; align-items: center; gap: var(--s2); color: rgb(var(--success)); }
.pt-bigstate .sq.err { background: rgb(var(--error) / .1); color: rgb(var(--error)); }

/* Datto SaaS Backup service rows + StatusBars */
.pt-saas { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: var(--s3); border-radius: var(--r-md); border: 1px solid; padding: var(--s3); transition: background-color var(--dur); }
.pt-saas.ok { border-color: rgb(var(--success) / .3); background: rgb(var(--success) / .05); }
.pt-saas.ok:hover { background: rgb(var(--success) / .1); }
.pt-saas.warn { border-color: rgb(var(--warning) / .3); background: rgb(var(--warning) / .05); }
.pt-saas.warn:hover { background: rgb(var(--warning) / .1); }
.pt-saas.err { border-color: rgb(var(--error) / .3); background: rgb(var(--error) / .05); }
.pt-saas.err:hover { background: rgb(var(--error) / .1); }
.pt-saas .nm { display: flex; min-width: 0; align-items: center; gap: var(--s2); }
.pt-sbars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 28px; width: 100%; }
.pt-sbars > span { min-width: 3px; flex: 1; border-radius: 2px; transition: opacity var(--dur); cursor: default; }
.pt-sbars:hover > span:not(:hover) { opacity: .4; }
.pt-sbars .b-ok { background: rgb(var(--success)); } .pt-sbars .b-warning { background: rgb(var(--warning)); } .pt-sbars .b-failed { background: rgb(var(--error)); }
.pt-sbars .tip { display: none; pointer-events: none; position: absolute; bottom: 100%; z-index: 30; margin-bottom: 6px; transform: translateX(-50%); white-space: nowrap; border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-overlay)); padding: var(--s1) var(--s2); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); text-align: left; }
.pt-sbars > span:hover .tip { display: block; }
.pt-sbars .tip b { display: block; font-size: 13px; font-weight: 600; color: rgb(var(--t1)); }
.pt-sbars .tip span { display: block; font-size: 13px; }
.pt-sbars .t-ok { color: rgb(var(--success)); } .pt-sbars .t-warning { color: rgb(var(--warning)); } .pt-sbars .t-failed { color: rgb(var(--error)); }

/* LastPass stat tiles: grid-cols-3 gap-s2 */
.pt-stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }

/* DonutChart / DonutLegend (Patchmanagement) */
.pt-donut { position: relative; width: 176px; height: 176px; }
.pt-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pt-donut .arc { cursor: pointer; outline: none; transition: opacity var(--dur); }
.pt-donut .arc:hover { opacity: .8; }
.pt-donut .ctr { position: absolute; inset: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 999px; text-align: center; }
.pt-dlegend { display: grid; width: 100%; gap: var(--s1); }
.pt-dlegend button { display: flex; align-items: center; justify-content: space-between; border-radius: var(--r-md); padding: var(--s1) var(--s2); font-size: 13px; transition: background-color var(--dur); }
.pt-dlegend button:hover { background: rgb(var(--s-sunken)); }
.pt-dlegend .lb { display: flex; align-items: center; gap: var(--s2); }
.pt-dlegend .lb i { width: 10px; height: 10px; border-radius: 50%; }
.pt-kv { display: flex; align-items: center; justify-content: space-between; border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); padding: var(--s3); }
.pt-pillchip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgb(var(--b1)); background: rgb(var(--s-sunken)); padding: var(--s1) var(--s3); font-size: 13px; font-weight: 500; }
.pt-pillchip.ok { border-color: rgb(var(--success) / .2); background: rgb(var(--success) / .1); color: rgb(var(--success)); }
.pt-pillchip.err { border-color: rgb(var(--error) / .2); background: rgb(var(--error) / .1); color: rgb(var(--error)); }
.pt-bigstate { display: flex; align-items: center; gap: var(--s2); }
.pt-bigstate .sq { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--r-md); background: rgb(var(--success) / .1); color: rgb(var(--success)); }

/* KnowBe4 sections (-mx-s5 with border-t rows) */
.pt-kb { margin: 0 calc(var(--s5) * -1); }
.pt-kb > div { border-top: 1px solid rgb(var(--b1)); padding: var(--s4) var(--s5); }

/* Telecom */
.pt-tel { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@container widget-card (min-width: 44rem) {
  .pt-tel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); }
  .pt-tel .right { border-left: 1px solid rgb(var(--b1)); padding-left: var(--s6); }
}
.pt-alerts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.pt-alert { border-radius: var(--r-md); border: 1px solid rgb(var(--warning) / .2); background: rgb(var(--warning) / .05); padding: var(--s3); }
.pt-alert .v { font-size: 16px; font-weight: 500; line-height: 1; }
.pt-alert .l { margin-top: var(--s1); font-size: 13px; line-height: 20px; color: rgb(var(--t2)); }
.pt-alert button { margin-top: var(--s2); font-size: 13px; font-weight: 500; color: rgb(var(--brand)); }
.pt-user { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); padding: var(--s2) var(--s3); transition: background-color var(--dur); }
.pt-user:hover { background: rgb(var(--s-sunken)); }
.pt-user .ix { width: 20px; font-size: 13px; color: rgb(var(--t3)); font-variant-numeric: tabular-nums; }
.pt-user .ub { width: 96px; height: 6px; overflow: hidden; border-radius: 999px; background: rgb(var(--s-sunken)); }
.pt-user .ub i { display: block; height: 100%; border-radius: 999px; }

/* ---------- Portal frame (demo) ---------- */
.pt-scale { position: relative; width: 100%; }
.pt-scale > .pt-frame { position: absolute; top: 0; left: 0; transform-origin: top left; }
.pt-frame {
  position: relative; display: grid; grid-template-columns: 64px 1fr; overflow: hidden;
  background: rgb(var(--s-base)); border-radius: 14px; border: 1px solid rgb(var(--b2) / .6);
  box-shadow: 0 40px 80px -30px rgb(11 31 51 / .45);
}
.pt-rail { background: rgb(var(--s-overlay)); border-right: 1px solid rgb(var(--b1)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; }
.pt-rail .logo { width: 30px; color: rgb(var(--brand-secondary)); margin-bottom: 14px; }
.pt-rail a { display: flex; width: 40px; height: 36px; align-items: center; justify-content: center; border-radius: var(--r-md); border-left: 2px solid transparent; color: rgb(var(--t3)); }
.pt-rail a.on { border-left-color: rgb(var(--brand)); background: rgb(var(--brand) / .15); color: rgb(var(--brand)); }
.pt-main { min-width: 0; display: flex; flex-direction: column; }
.pt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 24px; background: rgb(var(--s-overlay)); border-bottom: 1px solid rgb(var(--b1)); }
.pt-org { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(var(--b1)); border-radius: var(--r-md); padding: 6px 12px; font-size: 13px; background: rgb(var(--s-raised)); }
.pt-org b { font-weight: 500; }
.pt-top-r { display: flex; align-items: center; gap: 14px; color: rgb(var(--t2)); }
.pt-ava { width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--brand) / .15); color: rgb(var(--brand-strong)); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.pt-page { padding: 32px; }
.pt-page > * + * { margin-top: 32px; }
.pt-ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pt .pt-ph h1 { font-size: 30px; font-weight: 500; line-height: 1; margin: 0; }
.pt-ph p { margin-top: 8px; color: rgb(var(--t2)); }
.pt-select { border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); padding: 8px 12px; font: 13px/1.4 "OktaNeue", system-ui, sans-serif; color: rgb(var(--t1)); cursor: pointer; }
.pt-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-pills button { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 500; border: 1px solid rgb(var(--b1)); color: rgb(var(--t2)); transition: background-color var(--dur), color var(--dur); }
.pt-pills button:hover { background: rgb(var(--s-sunken)); }
.pt-pills button.on { background: rgb(var(--brand)); border-color: rgb(var(--brand)); color: #fff; }
.pt-banner { border-radius: var(--r-md); border: 1px solid rgb(var(--info) / .3); background: rgb(var(--info) / .1); padding: 8px 12px; font-size: 13px; color: rgb(var(--info)); }
.pt-cols { display: flex; gap: 32px; }
.pt-cols > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 32px; }
.pt-cols.swap { animation: ptSwap .22s ease-out both; }
@keyframes ptSwap { from { opacity: 0; transform: translateY(8px); } }

/* Drawer (SlidingDrawer.tsx) */
.pt-dr-back { position: absolute; inset: 0; z-index: 20; background: rgb(var(--brand-secondary) / .4); opacity: 0; pointer-events: none; transition: opacity .5s ease-in-out; }
.pt-dr { position: absolute; top: 0; right: 0; bottom: 0; z-index: 21; width: min(520px, 100%); display: flex; flex-direction: column; background: rgb(var(--s-overlay)); border-left: 1px solid rgb(var(--b1)); box-shadow: 0 12px 32px rgb(11 31 51 / .18); transform: translateX(100%); transition: transform .5s ease-in-out; }
.pt-host.dr-open .pt-dr-back { opacity: 1; pointer-events: auto; }
.pt-host.dr-open .pt-dr { transform: none; }
.pt-dr-h { display: flex; min-height: 120px; flex-direction: column; justify-content: center; border-bottom: 1px solid rgb(var(--b1)); padding: 16px 40px 16px 44px; }
.pt-dr-h .row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pt-dr-h h3 { font-size: 23px; font-weight: 500; line-height: 1.3; margin-top: 2px; }
.pt-dr-x { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; color: rgb(var(--t2)); }
.pt-dr-x:hover { background: rgb(var(--t1) / .1); color: rgb(var(--t1)); }
.pt-dr-tabs { display: flex; gap: 20px; border-bottom: 1px solid rgb(var(--b1)); padding: 0 44px; }
.pt-dr-tabs span { padding: 12px 0 10px; border-bottom: 2px solid rgb(var(--brand)); font-size: 14px; font-weight: 500; color: rgb(var(--brand)); }
.pt-dr-body { flex: 1; overflow: auto; }
.pt-list { list-style: none; margin: 0; padding: 16px; }
.pt-list > li + li { margin-top: 12px; }
.pt-list li { border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); padding: 12px; }
.pt-list .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; margin-top: 8px; font-size: 13px; }
.pt-list .g3 p:first-child { color: rgb(var(--t3)); }
.pt-list .g3 p:last-child { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Threshold editor (ThresholdDrawer.tsx, ThresholdDrawerParts.tsx, ThresholdBandSlider.tsx) */
.pt-dr.wide { width: min(600px, 100%); }
.pt-tlist { display: flex; flex-direction: column; gap: var(--s5); padding: 20px 48px; }
.pt-tm { border-bottom: 1px solid rgb(var(--b1)); padding-bottom: var(--s5); }
.pt-tm:last-child { border-bottom: 0; padding-bottom: 0; }
.pt-tm > * + * { margin-top: var(--s2); }
.pt-tm .hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.pt-tm .dir { font-size: 11px; color: rgb(var(--t3)); }
.pt-tm .ends { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.pt-tbs { position: relative; height: 22px; }
.pt-tbs .band { position: absolute; left: 0; right: 0; top: 50%; height: 10px; transform: translateY(-50%); overflow: hidden; border-radius: 999px; }
.pt-tbs .band span { position: absolute; top: 0; height: 100%; }
.pt-tbs input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; pointer-events: none; }
.pt-tbs input:focus { outline: none; }
.pt-tbs input::-webkit-slider-runnable-track { background: transparent; border: none; }
.pt-tbs input::-moz-range-track { background: transparent; border: none; }
.pt-tbs input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 9999px; background: rgb(var(--s-raised)); border: 2px solid currentColor; cursor: pointer; }
.pt-tbs input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 9999px; background: rgb(var(--s-raised)); border: 2px solid currentColor; cursor: pointer; }
.pt-tbs input:focus-visible::-webkit-slider-thumb { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }
.pt-th-prev { border-top: 1px solid rgb(var(--b1)); padding: 20px 48px 24px; }
.pt-th-prev .t-label { margin-bottom: 12px; }
.pt-th-foot { position: sticky; bottom: 0; z-index: 1; border-top: 1px solid rgb(var(--b1)); padding: 16px 48px; background: rgb(var(--s-overlay)); }
.pt-th-foot > * + * { margin-top: var(--s3); }
.pt-th-foot .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.pt-th-foot .rst { display: inline-flex; align-items: center; gap: var(--s1); font-size: 13px; color: rgb(var(--t2)); transition: color var(--dur); }
.pt-th-foot .rst:hover { color: rgb(var(--t1)); }
.pt-th-msg { display: inline-flex; align-items: center; gap: var(--s1); font-size: 13px; color: rgb(var(--success)); }
.pt-th-msg[hidden] { display: none; }
.pt-scope { display: flex; overflow: hidden; border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); font-size: 13px; }
.pt-scope button { flex: 1; padding: var(--s2) var(--s3); text-align: center; color: rgb(var(--t2)); transition: background-color var(--dur); }
.pt-scope button + button { border-left: 1px solid rgb(var(--b1)); }
.pt-scope button:hover { background: rgb(var(--s-sunken)); }
.pt-scope button.on { background: rgb(var(--brand) / .1); font-weight: 500; color: rgb(var(--brand)); }

/* MfaWidget: MfaTabBar, MfaRing, StaticControlRow */
.pt-mfatabs { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: var(--s1); border-radius: var(--r-md); background: rgb(var(--s-sunken)); padding: var(--s1); }
.pt-mfatabs button { min-width: 0; border-radius: 4px; padding: 8px 4px; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.25; color: rgb(var(--t1)); }
.pt-mfatabs button[aria-selected="true"] { background: rgb(var(--s-raised)); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.pt-mfarings { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--s3); }
.pt-mring { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.pt-mring .cap { max-width: 100%; text-align: center; font-size: 13px; font-weight: 500; color: rgb(var(--t1)); }
.pt-mring .note { max-width: 100%; text-align: center; font-size: 11px; color: rgb(var(--t3)); }
.pt-mring .empty { display: flex; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 500; color: rgb(var(--t3)); }
.pt-enf { display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; font-size: 13px; }
.pt-nodata { border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-sunken)); padding: var(--s3); font-size: 13px; color: rgb(var(--t2)); }
.pt-nodata > * + * { margin-top: var(--s2); }
.pt-srow { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: var(--s3); border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-sunken)); padding: 12px; }
.pt-srow.warn { border-color: rgb(var(--warning)); background: rgb(var(--warning) / .05); }
.pt-cap { display: inline-flex; align-items: center; gap: var(--s1); font-size: 13px; }

/* Phone layout: the portal stacks its columns and hides the rail on small screens */
.pt-frame.pt-narrow { grid-template-columns: 1fr; }
.pt-frame.pt-narrow .pt-rail { display: none; }
.pt-frame.pt-narrow .pt-top { padding: 0 16px; }
.pt-frame.pt-narrow .pt-page { padding: 20px 16px; }
.pt-frame.pt-narrow .pt-page > * + * { margin-top: 20px; }
.pt-frame.pt-narrow .pt-cols { flex-direction: column; gap: 20px; }
.pt-frame.pt-narrow .pt-cols > div { gap: 20px; }
.pt-frame.pt-narrow .pt-ph h1 { font-size: 23px; }
.pt-frame.pt-narrow .pt-dr-h, .pt-frame.pt-narrow .pt-tlist, .pt-frame.pt-narrow .pt-th-prev, .pt-frame.pt-narrow .pt-th-foot { padding-left: 20px; padding-right: 20px; }
.pt-frame.pt-narrow .pt-dr-tabs { padding: 0 20px; }

/* ---------- Beheerrapport drawer (Reports/Drawer: RunTab, ActionItemsAdviceTab, ReportTab) ---------- */
.pt { --tertiary: 230 114 44; --tertiary-ink: 156 78 30; }
.pt-rep { background: rgb(var(--s-overlay)); display: flex; flex-direction: column; min-height: 640px; }
.pt-rep-h { border-bottom: 1px solid rgb(var(--b1)); padding: 20px 28px 0; }
.pt-rep-h .t-label { display: block; }
.pt-rep-h h3 { font-size: 23px; font-weight: 500; line-height: 1.3; margin-top: 2px; }
.pt-rep-tabs { display: flex; gap: 22px; margin-top: 14px; }
.pt-rep-tabs button { padding: 10px 0 9px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: rgb(var(--t2)); transition: color var(--dur); }
.pt-rep-tabs button:hover { color: rgb(var(--t1)); }
.pt-rep-tabs button.on { border-bottom-color: rgb(var(--brand)); color: rgb(var(--brand)); }
.pt-rep-b { flex: 1; padding: 16px 28px 20px; }
.pt-rep-b > * + * { margin-top: 16px; }
.pt-rep-f { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgb(var(--b1)); padding: 14px 28px; }
.pt-rep-f .fl { display: flex; gap: 8px; margin-left: auto; }
.pt-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; transition: background-color var(--dur), opacity var(--dur); }
.pt-btn.pri { background: rgb(var(--brand-strong)); color: #fff; }
.pt-btn.pri:hover { background: rgb(var(--brand)); }
.pt-btn.sec { border: 1px solid rgb(var(--b2)); color: rgb(var(--t1)); background: rgb(var(--s-raised)); }
.pt-btn.sec:hover { background: rgb(var(--s-sunken)); }
.pt-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.pt-prog { height: 8px; overflow: hidden; border-radius: 999px; background: rgb(var(--s-sunken)); }
.pt-prog i { display: block; height: 100%; border-radius: 999px; background: rgb(var(--brand-strong)); transition: width .4s var(--ease-standard); }
.pt-todo { border-radius: var(--r-md); border: 1px solid rgb(var(--tertiary) / .3); background: rgb(var(--tertiary) / .06); }
.pt-todo h4 { margin: 0; padding: 14px 16px 0; font-size: 15px; font-weight: 600; }
.pt-todo .it { display: flex; align-items: center; gap: 12px; margin-top: 12px; border-top: 1px solid rgb(var(--tertiary) / .2); padding: 12px 16px; }
.pt-todo .it > i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--tertiary-ink)); flex-shrink: 0; }
.pt-todo .it > div { flex: 1; min-width: 0; }
.pt-groups { border-top: 1px solid rgb(var(--b1)); }
.pt-grp { border-bottom: 1px solid rgb(var(--b1)); }
.pt-grp:last-child { border-bottom: 0; }
.pt-grp > button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 0; }
.pt-grp > button > span:first-of-type + span { flex: 1; min-width: 0; }
.pt-grp .gt { display: block; font-size: 15px; font-weight: 600; }
.pt-grp .gd { display: block; font-size: 13px; color: rgb(var(--t2)); }
.pt-grp .gs { flex-shrink: 0; font-size: 13px; color: rgb(var(--t2)); text-align: right; }
.pt-grp .gs.att { color: rgb(var(--tertiary-ink)); font-weight: 500; }
.pt-grp .chev { color: rgb(var(--t2)); transition: transform var(--dur); }
.pt-grp.open .chev { transform: rotate(180deg); }
.pt-grp ul { list-style: none; margin: 0; padding: 0 0 12px 48px; display: none; }
.pt-grp.open ul { display: block; }
.pt-grp li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; font-size: 13px; }
.pt-grp li .rl { flex: 1; min-width: 0; }
.pt-grp li .rs { flex-shrink: 0; color: rgb(var(--t2)); text-align: right; }
.pt-grp li .src { display: block; color: rgb(var(--t2)); margin-top: 2px; }
.pt-mk { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; line-height: 1; color: #fff; }
.pt-mk.g { width: 24px; height: 24px; font-size: 13px; }
.pt-mk.r { width: 18px; height: 18px; font-size: 9px; margin-top: 1px; }
.pt-mk.done { background: rgb(var(--brand-strong)); }
.pt-mk.att { background: rgb(var(--tertiary-ink)); }
.pt-mk.run { border: 2px solid rgb(var(--brand)); border-right-color: transparent; animation: ptSpin .8s linear infinite; }
.pt-mk.wait { border: 2px solid rgb(var(--b2)); }
.pt-mk.man { border: 2px dashed rgb(var(--t3)); }
@keyframes ptSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pt-mk.run { animation: none; } }
.pt-guard { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--r-md); border: 1px solid rgb(var(--warning) / .25); background: rgb(var(--warning) / .06); padding: 10px 12px; font-size: 13px; color: rgb(var(--t2)); }
.pt-guard svg { color: rgb(var(--warning)); margin-top: 1px; }
.pt-ai { border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); }
.pt-ai-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgb(var(--b1)); }
.pt-ai-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid rgb(var(--b1)); font-size: 13.5px; }
.pt-ai-row:last-child { border-bottom: 0; }
.pt-ai-row .meta { grid-column: 1 / -1; font-size: 12.5px; color: rgb(var(--t3)); }
.pt-prio { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; align-self: start; }
.pt-prio.hoog { background: rgb(var(--error) / .1); color: rgb(var(--error)); }
.pt-prio.midden { background: rgb(var(--warning) / .12); color: rgb(var(--warning)); }
.pt-prio.laag { background: rgb(var(--success) / .1); color: rgb(var(--success)); }
.pt-chipai { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; background: rgb(var(--brand) / .1); color: rgb(var(--brand-strong)); }
.pt-chipai.ok { background: rgb(var(--success) / .1); color: rgb(var(--success)); }
.pt-dl { border-radius: var(--r-md); border: 1px solid rgb(var(--b1)); background: rgb(var(--s-raised)); padding: 16px; }
.pt-dl + .pt-dl { margin-top: 12px; }
.pt-dl h4 { margin: 0; font-size: 15px; font-weight: 600; }
.pt-dl p { margin-top: 4px; font-size: 13px; color: rgb(var(--t2)); }
.pt-dl .pt-btn { margin-top: 12px; }
.pt-toast { font-size: 13px; color: rgb(var(--success)); }
@media (max-width: 520px) {
  .pt-rep-h, .pt-rep-b, .pt-rep-f { padding-left: 16px; padding-right: 16px; }
  .pt-grp ul { padding-left: 36px; }
  .pt-rep { min-height: 0; }
}

/* Hero preview on phones: one widget is enough */
.pt-heroframe.pt-narrow .pt-cols > div:nth-child(2) { display: none; }
.pt-heroframe.pt-narrow .pt-ph p { display: none; }
@media (max-width: 640px) {
  .pt-rep-tabs { gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .pt-rep-tabs button { white-space: nowrap; }
  .pt-rep-f .fl { margin-left: 0; width: 100%; }
  .pt-rep-f .fl .pt-btn { flex: 1; justify-content: center; }
}

/* Widget explanation (WidgetCard: ⓘ flips the card to dashboard.widget_info) */
/* The flip itself is animated in portal-widgets.js (flipCard). */
.pt-wh-actions .pt-gear + .pt-gear, .pt-wh-actions .pt-gear + span { margin-left: -4px; }

/* Actiepunten & advies (WI 5233 compact layout) */
.pt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-std > summary { list-style: none; cursor: pointer; }
.pt-std > summary::-webkit-details-marker { display: none; }
.pt-std .chev { transition: transform var(--dur); color: rgb(var(--t2)); }
.pt-std[open] .chev { transform: rotate(180deg); }
.pt-linkbtn { color: rgb(var(--brand-strong)); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* Link arrows: inline icon instead of the font's → glyph */
.pt .arr { display: inline-block; vertical-align: -2px; }

/* Fixed app window (landing demo on laptops): rail stays, the page scrolls inside */
.pt-frame.pt-fixed { grid-template-rows: minmax(0, 1fr); }
.pt-fixed .pt-main { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.pt-fixed .pt-top { position: sticky; top: 0; z-index: 5; }