/* ==========================================================================
   Plafon Module - remaining plafon page and plafon settings page.
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
    1. Filters
    2. Figures and gauge
    3. Settings (current value line, sync preview)
    4. Alerts (threshold cards, recipients, scheduled job line)
    5. Kiosk (plafon view of a device)
   ========================================================================== */


/* ==========================================================================
   1. FILTERS
   ========================================================================== */

/* ---- 1.1 Filter bar > Base ---- */
.PlafonFilters {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
}
.PlafonFilterField {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

/* ---- 1.2 Filter card > Base ---- */
.PlafonFilterCard {
  padding: 1rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}
.PlafonFilterActions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-left: auto;
}
.PlafonListFilter {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}


/* ==========================================================================
   2. FIGURES AND GAUGE
   ========================================================================== */

/* ---- 2.1 Figures > Base ---- */
.PlafonValue {
  font-size: 1.35rem;
  white-space: nowrap;
}
.PlafonDecimals {
  font-size: .65em;
  font-weight: inherit;
}
.PlafonNegative {
  color: var(--color-danger, #c0392b);
  font-weight: 600;
}

/* ---- 2.2 Tiles > Base ---- */
.PlafonTiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.PlafonTile {
  --tile-accent: #2a78d6;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  min-width: 0;
  padding: 1rem 1.1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--tile-accent);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px rgba(2, 73, 147, .06);
}
.PlafonTileIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tile-accent) 14%, white);
  color: var(--tile-accent);
  font-size: 1.15rem;
}
.PlafonTileBody {
  flex: 1 1 auto;
  min-width: 0;
}
.PlafonTileLabel {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.PlafonTileValue {
  margin: .15rem 0 .25rem;
  color: var(--tile-accent);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.PlafonTileSub {
  color: var(--color-muted);
  font-size: .82rem;
  line-height: 1.35;
}
.PlafonTilePercent {
  padding: .1rem .5rem;
  background: color-mix(in srgb, var(--tile-accent) 14%, white);
  border-radius: 999px;
  color: var(--tile-accent);
  font-size: .72rem;
  letter-spacing: 0;
}

/* ---- 2.2 Tiles > Colours ---- */
/* Blue total, orange estimated, green real; the remaining tile takes the tone of what is left (green, orange, red) */
.PlafonTile--estimated {
  --tile-accent: #eb6834;
}
.PlafonTile--real,
.PlafonTile--good {
  --tile-accent: #1baf7a;
}
.PlafonTile--warn {
  --tile-accent: #eb6834;
}
.PlafonTile--bad {
  --tile-accent: #c0392b;
}
.PlafonTile--none {
  --tile-accent: var(--color-muted);
}

/* ---- 2.2 Tiles > No plafon notice ---- */
.PlafonNotice {
  --notice-accent: #d99a1c;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--notice-accent) 9%, white);
  border: 1px solid color-mix(in srgb, var(--notice-accent) 35%, white);
  border-left: 5px solid var(--notice-accent);
  border-radius: var(--border-radius);
}
.PlafonNoticeIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--notice-accent);
  color: var(--color-white);
  font-size: 1.2rem;
}
.PlafonNoticeBody {
  flex: 1 1 320px;
  min-width: 0;
}
.PlafonNoticeTitle {
  color: var(--color-text, #1a2d4e);
  font-size: 1.05rem;
  font-weight: 800;
}
.PlafonNoticeText {
  margin-top: .15rem;
  color: var(--color-muted);
  font-size: .9rem;
}
.PlafonNoticeAction {
  margin-left: auto;
}

/* ---- 2.2 Tiles > Exceeded ---- */
.PlafonTile--exceeded {
  --tile-accent: #c0392b;
  background: #fff7f6;
}

/* ---- 2.2 Tiles > Over banner ---- */
.PlafonOverBanner {
  --banner-accent: #c0392b;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--banner-accent) 8%, white);
  border: 1px solid color-mix(in srgb, var(--banner-accent) 35%, white);
  border-left: 5px solid var(--banner-accent);
  border-radius: var(--border-radius);
}
.PlafonOverBanner--risk {
  --banner-accent: #eb6834;
}
.PlafonOverIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--banner-accent);
  color: var(--color-white);
  font-size: 1.3rem;
}
.PlafonOverBody {
  min-width: 0;
}
.PlafonOverTitle {
  color: var(--banner-accent);
  font-size: 1.15rem;
  font-weight: 800;
}
.PlafonOverText {
  margin-top: .15rem;
  color: var(--color-text, #1a2d4e);
  font-size: .9rem;
}

/* ---- 2.3 Gauge > Exceeded bar ---- */
/* The whole real consume as the bar: green up to the plafon, red for the part over it */
.PlafonGauge--split {
  background: #c0392b;
}
.PlafonGaugeWithin,
.PlafonGaugeOverrun {
  width: var(--plafon-width, 0%);
  height: 100%;
}
.PlafonGaugeWithin {
  background: #1baf7a;
}
.PlafonGaugeOverrun {
  background: repeating-linear-gradient(45deg, #c0392b, #c0392b 8px, #d65a4c 8px, #d65a4c 16px);
}
.PlafonGaugeMark {
  position: relative;
  height: 1.4rem;
  margin-top: .15rem;
}
.PlafonGaugeMark span {
  position: absolute;
  left: clamp(2rem, var(--plafon-left, 0%), calc(100% - 2rem));
  transform: translateX(-50%);
  padding: .05rem .55rem;
  background: var(--color-white);
  border: 1px solid #1baf7a;
  border-radius: 999px;
  color: #1baf7a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.PlafonGaugeMark span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.4rem;
  width: 2px;
  height: .4rem;
  background: #1baf7a;
  transform: translateX(-50%);
}
.PlafonDotOver {
  background: #c0392b;
}

/* ---- 2.3 Gauge > Base ---- */
.PlafonGaugeHead {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.PlafonGaugeTitle {
  font-weight: 600;
}
.PlafonGauge {
  display: flex;
  height: 22px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.PlafonGaugeReal,
.PlafonGaugePending {
  width: var(--plafon-width, 0%);
  height: 100%;
}
.PlafonGaugeReal {
  background: #1baf7a;
}
.PlafonGaugePending {
  background: repeating-linear-gradient(45deg, #eb6834, #eb6834 6px, #f08a5f 6px, #f08a5f 12px);
}
.PlafonGaugeLegend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin-top: .85rem;
}

/* ---- 2.3 Gauge > Legend item ---- */
.PlafonLegendItem {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.PlafonLegendItem .PlafonDot {
  margin: .35rem 0 0;
  flex-shrink: 0;
}
.PlafonLegendLabel {
  color: var(--color-muted);
  font-size: .85rem;
}
.PlafonLegendAmount {
  font-weight: 600;
}

/* ---- 2.3 Gauge > Help ---- */
.PlafonHelp {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--color-border);
  font-size: .9rem;
}
.PlafonHelp summary {
  color: var(--color-primary, #2a78d6);
  font-weight: 600;
  cursor: pointer;
}
.PlafonHelp ul {
  margin: .65rem 0 0;
  padding-left: 1.25rem;
  color: var(--color-muted);
}
.PlafonHelp li + li {
  margin-top: .3rem;
}

/* ---- 2.3 Gauge > Legend dots ---- */
.PlafonDot {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-right: .35rem;
  border-radius: 50%;
}
.PlafonDotReal {
  background: #1baf7a;
}
.PlafonDotPending {
  background: #eb6834;
}
.PlafonDotFree {
  background: var(--color-border);
}

/* ---- 2.3 Gauge > State label ---- */
.PlafonGaugeState {
  font-size: .85rem;
  font-weight: 600;
}
.PlafonGaugeState.is-ok {
  color: #1baf7a;
}
.PlafonGaugeState.is-risk {
  color: #eb6834;
}
.PlafonGaugeState.is-over {
  color: #c0392b;
}


/* ==========================================================================
   3. SETTINGS
   ========================================================================== */

/* ---- 3.1 Current value line > Base ---- */
.PlafonCurrentLine {
  margin-top: .85rem;
  color: var(--color-muted);
  font-size: .9rem;
}

/* ---- 3.2 Sync preview > Base ---- */

.PlafonSyncPreview {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary, #2a78d6);
  border-radius: var(--border-radius);
}
.PlafonSyncPreview[hidden] {
  display: none;
}
.PlafonSyncActions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .65rem;
}


/* ==========================================================================
   4. ALERTS
   ========================================================================== */

/* ---- 4.1 Threshold cards > Base ---- */
.PlafonLevelGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.PlafonLevelCard .CardHeader {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
}
.PlafonLevelCard--warn {
  border-top: 3px solid #eb6834;
}
.PlafonLevelCard--critical {
  border-top: 3px solid #c0392b;
}
.PlafonLevelHint {
  margin-bottom: .75rem;
  color: var(--color-muted);
  font-size: .85rem;
}

/* ---- 4.1 Threshold cards > Fields ---- */
.PlafonThresholdRow {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.PlafonThresholdRow .PlafonFilterField {
  flex: 1 1 140px;
  min-width: 0;
}
.PlafonThresholdOr {
  padding-bottom: .55rem;
  color: var(--color-muted);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---- 4.1 Threshold cards > Basis switch ---- */
.PlafonSegmented {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.PlafonSegment {
  margin: 0;
  cursor: pointer;
}
.PlafonSegment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.PlafonSegment span {
  display: block;
  padding: .45rem .9rem;
  background: var(--color-white);
  color: var(--color-muted);
  font-size: .85rem;
  font-weight: 600;
}
.PlafonSegment + .PlafonSegment span {
  border-left: 1px solid var(--color-border);
}
.PlafonSegment input:checked + span {
  background: var(--color-primary, #2a78d6);
  color: var(--color-white);
}
.PlafonSegment input:focus-visible + span {
  outline: 2px solid var(--color-primary, #2a78d6);
  outline-offset: -2px;
}
.PlafonSegment input:disabled + span {
  cursor: not-allowed;
}

/* ---- 4.1 Threshold cards > Rule summary ---- */
.PlafonLevelSummary {
  margin-top: 1rem;
  padding: .65rem .85rem;
  background: var(--color-bg, #f0f5fa);
  border-left: 3px solid var(--level-accent, var(--color-border));
  border-radius: var(--border-radius);
  color: var(--color-text, #1a2d4e);
  font-size: .85rem;
}

/* ---- 4.1 Threshold cards > Level accents ---- */
.PlafonLevelCard--warn {
  --level-accent: #eb6834;
}
.PlafonLevelCard--critical {
  --level-accent: #c0392b;
}
.PlafonLevelCard .CardTitle i {
  color: var(--level-accent);
}

/* ---- 4.1 Threshold cards > Scale ---- */
.PlafonScale {
  margin-bottom: 1.25rem;
}
.PlafonScaleTrack {
  display: flex;
  height: 14px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.PlafonScaleZone {
  height: 100%;
  transition: width .2s ease;
}
.PlafonScaleZone--ok {
  background: #1baf7a;
}
.PlafonScaleZone--warn {
  background: #eb6834;
}
.PlafonScaleZone--critical {
  background: #c0392b;
}
.PlafonScaleLabels {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  justify-content: space-between;
  margin-top: .4rem;
  color: var(--color-muted);
  font-size: .8rem;
}

/* ---- 4.2 Switched-off fields > Base ---- */
.PlafonLevelFields.is-disabled {
  opacity: .55;
}

/* ---- 4.3 Recipients and actions > Base ---- */
.PlafonRecipients {
  margin-top: .25rem;
}
.PlafonRecipientsHead {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  justify-content: space-between;
}
.PlafonRecipientCount {
  color: #1baf7a;
  font-size: .8rem;
  font-weight: 600;
}
.PlafonRecipientCount.has-invalid {
  color: #c0392b;
}
.PlafonFormActions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ---- 4.5 Checker status > Base ---- */
.PlafonCheckerStatus {
  --checker-accent: var(--color-muted);
  --checker-tint: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--checker-tint);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--checker-accent);
  border-radius: var(--border-radius);
}
.PlafonCheckerIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--checker-accent);
  color: var(--color-white);
  font-size: 1.1rem;
}
.PlafonCheckerBody {
  flex: 1 1 280px;
  min-width: 0;
}
.PlafonCheckerTitle {
  font-weight: 700;
  color: var(--color-text, #1a2d4e);
}
.PlafonCheckerText {
  margin-top: .15rem;
  color: var(--color-muted);
  font-size: .9rem;
}
.PlafonCheckerAction {
  margin-left: auto;
}

/* ---- 4.5 Checker status > States ---- */
.PlafonCheckerStatus--warn {
  --checker-accent: #eb6834;
  --checker-tint: #fff6f0;
}
.PlafonCheckerStatus--ok {
  --checker-accent: #1baf7a;
  --checker-tint: #f1fbf6;
}

/* ---- 4.4 Scheduled job line > Base ---- */
.PlafonCronLine {
  margin: 0 0 .75rem;
  padding: .75rem 1rem;
  background: #1a2d4e;
  border-radius: var(--border-radius);
  color: #e6edf5;
  font-size: .8rem;
  white-space: pre-wrap;
  word-break: break-all;
}


/* ==========================================================================
   5. KIOSK (plafon view of a device)
   ========================================================================== */

/* ---- 5.1 Layout > Base ---- */
.PlafonKiosk {
  /* The kiosk page is dark, so the module colours are redefined here instead of using the light page colours */
  --kiosk-text: #ffffff;
  --kiosk-muted: rgba(255, 255, 255, .72);
  --kiosk-surface: rgba(255, 255, 255, .07);
  --kiosk-border: rgba(255, 255, 255, .16);
  --kiosk-danger: #ff6b5e;
  /* Lighter variants of the module colours, so they stay readable on the dark page */
  --kiosk-blue: #5aa9ff;
  --kiosk-orange: #ff9a62;
  --kiosk-green: #3ddc9a;
  color: var(--kiosk-text);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vh, 2.5rem);
  justify-content: center;
  min-height: 70vh;
  padding: clamp(1rem, 3vw, 3rem);
}

/* ---- 5.1 Layout > State wrapper ---- */
.PlafonKioskState {
  --state-accent: var(--kiosk-green);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vh, 2.5rem);
}
.PlafonKioskState--is-risk {
  --state-accent: var(--kiosk-orange);
}
.PlafonKioskState--is-over {
  --state-accent: var(--kiosk-danger);
}

/* ---- 5.1 Layout > Demo marker ---- */
.PlafonKioskDemo {
  align-self: center;
  padding: .3em 1em;
  background: rgba(255, 193, 7, .16);
  border: 1px solid rgba(255, 193, 7, .6);
  border-radius: 999px;
  color: #ffd45a;
  font-size: clamp(.8rem, 1.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---- 5.2 Hero > Base ---- */
.PlafonKioskHero {
  text-align: center;
}
.PlafonKioskLabel {
  color: var(--kiosk-muted);
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.PlafonKioskValue {
  margin: .25em 0;
  font-size: clamp(2.5rem, 9vw, 8rem);
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}
.PlafonKioskHero .PlafonGaugeState {
  font-size: clamp(1rem, 2.2vw, 1.8rem);
}

/* ---- 5.2 Hero > Tones ---- */
/* The big figure follows what is left of the plafon: green above 30%, orange from 10% to 30%, red under 10% or negative (red also glows) */
.PlafonKioskValue--good {
  color: var(--kiosk-green);
}
.PlafonKioskValue--warn {
  color: var(--kiosk-orange);
}
.PlafonKioskValue--bad {
  color: var(--kiosk-danger);
  text-shadow: 0 0 .4em rgba(255, 107, 94, .35);
}

/* ---- 5.2 Hero > States ---- */
.PlafonKioskState--is-risk .PlafonGaugeState.is-risk {
  color: var(--kiosk-orange);
}
.PlafonKioskOverrun {
  display: inline-block;
  margin-top: .6em;
  padding: .35em 1em;
  background: rgba(255, 107, 94, .14);
  border: 1px solid var(--state-accent);
  border-radius: 999px;
  color: var(--state-accent);
  font-size: clamp(1rem, 2vw, 1.6rem);
}
.PlafonKioskOverrun .PlafonDecimals {
  opacity: .9;
}

/* ---- 5.3 Consumption bar > Base ---- */
.PlafonKioskGauge .PlafonGauge {
  height: clamp(28px, 4vh, 48px);
  background: var(--kiosk-border);
}
.PlafonKioskGauge .PlafonGaugeLegend {
  justify-content: center;
  color: var(--kiosk-text);
  font-size: clamp(.9rem, 1.6vw, 1.3rem);
}
.PlafonKiosk .PlafonDotFree {
  background: rgba(255, 255, 255, .4);
}
/* Over the plafon the whole real part of the bar turns red */
.PlafonKiosk .PlafonGauge--over .PlafonGaugeReal {
  background: var(--kiosk-danger);
}
.PlafonKiosk .PlafonNegative {
  color: var(--kiosk-danger);
}
.PlafonKiosk .PlafonGaugeState.is-over {
  color: var(--kiosk-danger);
}

/* ---- 5.4 Figures > Base ---- */
.PlafonKioskStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.PlafonKioskStat {
  padding: clamp(.75rem, 2vw, 1.5rem);
  background: var(--kiosk-surface);
  border: 1px solid var(--kiosk-border);
  border-radius: var(--border-radius);
  text-align: center;
}
/* ---- 5.4 Figures > Colours ---- */
/* Each card has its own colour: blue total, orange estimated, green real; an exceeded figure turns red */
.PlafonKioskStat {
  --stat-accent: var(--kiosk-blue);
  border-top: 4px solid var(--stat-accent);
}
.PlafonKioskStat--estimated {
  --stat-accent: var(--kiosk-orange);
}
.PlafonKioskStat--real {
  --stat-accent: var(--kiosk-green);
}
.PlafonKioskStat.is-exceeded {
  --stat-accent: var(--kiosk-danger);
  background: rgba(255, 107, 94, .1);
}
.PlafonKioskStat .PlafonKioskStatLabel i {
  margin-right: .35em;
  color: var(--stat-accent);
}
.PlafonKioskStat .PlafonKioskStatValue {
  color: var(--stat-accent);
}

/* ---- 5.4 Figures > Text ---- */
.PlafonKioskStatLabel {
  color: var(--kiosk-muted);
  font-size: clamp(.85rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.PlafonKioskStatValue {
  margin-top: .2em;
  color: var(--kiosk-text);
  font-size: clamp(1.3rem, 3vw, 2.6rem);
  font-weight: 700;
  white-space: nowrap;
}
.PlafonKioskStatSub {
  margin-top: .2em;
  color: var(--kiosk-muted);
  font-size: clamp(.8rem, 1.3vw, 1.1rem);
}

/* ---- 5.5 Message states > Base ---- */
.PlafonKioskMessage {
  text-align: center;
}
.PlafonKioskMessage i {
  color: var(--kiosk-muted);
  font-size: clamp(2.5rem, 7vw, 6rem);
}
.PlafonKioskMessageTitle {
  margin-top: .5em;
  color: var(--kiosk-text);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
}
.PlafonKioskMessageText {
  color: var(--kiosk-muted);
  font-size: clamp(1rem, 2vw, 1.6rem);
}