/* Tema SAP Horizon (Morning Horizon, light) — tokens e componentes base
   Usado por todas as telas da demoteca para ficarem indistinguíveis do Sales Cloud V2. */

@font-face {
  font-family: "72";
  src: url("/assets/fonts/72-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "72";
  src: url("/assets/fonts/72-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "72";
  src: url("/assets/fonts/72-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --sapBackgroundColor: #f5f6f7;
  --sapTile_Background: #ffffff;
  --sapGroup_ContentBackground: #ffffff;

  --sapBrandColor: #0070f2;
  --sapLinkColor: #0070f2;
  --sapTextColor: #1d2d3e;
  --sapTitleColor: #1d2d3e;
  --sapContent_LabelColor: #556b82;
  --sapNeutralColor: #788fa6;

  --sapPositiveColor: #36a41d;
  --sapPositiveTextColor: #256f3a;
  --sapPositiveBackground: #f5fae5;
  --sapPositiveBorderColor: #36a41d;

  --sapCriticalColor: #e76500;
  --sapCriticalTextColor: #b44f00;
  --sapCriticalBackground: #fff8d6;
  --sapCriticalBorderColor: #e76500;

  --sapNegativeColor: #f53232;
  --sapNegativeTextColor: #aa0808;
  --sapNegativeBackground: #ffebeb;
  --sapNegativeBorderColor: #f53232;

  --sapInformativeColor: #0070f2;
  --sapInformativeTextColor: #0064d9;
  --sapInformativeBackground: #ebf8ff;

  --sapList_BorderColor: #e5e5e5;
  --sapGroup_TitleBorderColor: #d9d9d9;
  --sapField_BorderColor: #556b82;
  --sapButton_Background: #ffffff;
  --sapButton_BorderColor: #0070f2;

  --sapElement_BorderCornerRadius: 0.5rem;
  --sapContent_Shadow0: 0 0 0.125rem 0 rgba(85, 107, 130, 0.16),
    0 0.125rem 0.25rem 0 rgba(85, 107, 130, 0.16);
  --sapContent_Shadow1: 0 0 0.25rem 0 rgba(85, 107, 130, 0.16),
    0 0.25rem 0.5rem 0 rgba(85, 107, 130, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sapBackgroundColor);
  color: var(--sapTextColor);
  font-family: "72", "72full", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.page { padding: 0.75rem; max-width: 60rem; margin: 0 auto; }

/* ---------- Card ---------- */
.card {
  background: var(--sapTile_Background);
  border-radius: var(--sapElement_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow0);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sapList_BorderColor);
}
.card-header.plain { border-bottom: 0; padding-bottom: 0.25rem; }
.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sapTitleColor);
  margin: 0;
}
.card-subtitle {
  font-size: 0.75rem;
  color: var(--sapContent_LabelColor);
  margin: 0.125rem 0 0;
}
.card-body { padding: 1rem; }
.card-body.tight { padding: 0.5rem 1rem 1rem; }

/* ---------- Object status (badges) ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 0.75rem;
  white-space: nowrap;
}
.status-positive { background: var(--sapPositiveBackground); color: var(--sapPositiveTextColor); }
.status-critical { background: var(--sapCriticalBackground); color: var(--sapCriticalTextColor); }
.status-negative { background: var(--sapNegativeBackground); color: var(--sapNegativeTextColor); }
.status-information { background: var(--sapInformativeBackground); color: var(--sapInformativeTextColor); }
.status-neutral { background: #eaecee; color: #475e75; }

/* ---------- KPI ---------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.75rem;
}
.kpi-label {
  font-size: 0.75rem;
  color: var(--sapContent_LabelColor);
  margin-bottom: 0.125rem;
}
.kpi-value {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--sapTextColor);
  line-height: 1.15;
  white-space: nowrap;
}
.kpi-value.positive { color: var(--sapPositiveTextColor); }
.kpi-value.critical { color: var(--sapCriticalTextColor); }
.kpi-value.negative { color: var(--sapNegativeTextColor); }
.kpi-unit { font-size: 0.875rem; font-weight: 400; }

/* ---------- Barra de progresso ---------- */
.bar {
  height: 0.5rem;
  background: #eaecee;
  border-radius: 0.25rem;
  overflow: hidden;
  margin: 0.5rem 0 0.25rem;
}
.bar-fill { height: 100%; border-radius: 0.25rem; transition: width 0.35s ease, background 0.2s ease; }
.bar-fill.positive { background: var(--sapPositiveColor); }
.bar-fill.critical { background: var(--sapCriticalColor); }
.bar-fill.negative { background: var(--sapNegativeColor); }
.bar-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--sapContent_LabelColor);
}

/* ---------- Lista ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--sapList_BorderColor);
}
.list-item:last-child { border-bottom: 0; }
.list-item-main { flex: 1; min-width: 0; }
.list-item-title {
  font-size: 0.875rem;
  color: var(--sapTextColor);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-item-sub { font-size: 0.75rem; color: var(--sapContent_LabelColor); margin-top: 0.0625rem; }
.list-item-end { text-align: right; white-space: nowrap; }
.list-item-value { font-size: 0.875rem; font-weight: 700; }

/* ---------- Botões ---------- */
.btn {
  font-family: inherit;
  font-size: 0.875rem;
  border-radius: var(--sapElement_BorderCornerRadius);
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--sapButton_BorderColor);
  background: var(--sapButton_Background);
  color: var(--sapBrandColor);
  cursor: pointer;
  line-height: 1.3;
}
.btn:hover { background: #f0f5ff; }
.btn-emphasized { background: var(--sapBrandColor); border-color: var(--sapBrandColor); color: #fff; }
.btn-emphasized:hover { background: #0064d9; }
.btn-transparent { border-color: transparent; background: transparent; }
.btn-transparent:hover { background: #eaecee; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--sapButton_Background); }
.btn-block { width: 100%; }

/* ---------- Segmented ---------- */
.segmented { display: flex; gap: 0; border-radius: var(--sapElement_BorderCornerRadius); overflow: hidden; border: 1px solid var(--sapBrandColor); }
.segmented button {
  flex: 1;
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.5rem 0.375rem;
  border: 0;
  border-right: 1px solid var(--sapBrandColor);
  background: #fff;
  color: var(--sapBrandColor);
  cursor: pointer;
  line-height: 1.25;
}
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--sapBrandColor); color: #fff; }

/* ---------- Message strip ---------- */
.msg {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.625rem 0.75rem;
  border-radius: var(--sapElement_BorderCornerRadius);
  font-size: 0.8125rem;
  border: 1px solid transparent;
  margin-bottom: 0.75rem;
}
.msg-critical { background: var(--sapCriticalBackground); border-color: var(--sapCriticalBorderColor); color: #4a3400; }
.msg-negative { background: var(--sapNegativeBackground); border-color: var(--sapNegativeBorderColor); color: #5c0a0a; }
.msg-positive { background: var(--sapPositiveBackground); border-color: var(--sapPositiveBorderColor); color: #1b4d28; }
.msg-information { background: var(--sapInformativeBackground); border-color: var(--sapInformativeColor); color: #06316b; }
.msg-icon { flex: none; font-weight: 700; }

/* ---------- Utilidades ---------- */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.muted { color: var(--sapContent_LabelColor); }
.small { font-size: 0.75rem; }
.strong { font-weight: 700; }
.mt-s { margin-top: 0.5rem; }
.mt-m { margin-top: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* Faixa de identificação — só aparece fora do iframe do V2, para não confundir no palco */
.standalone-note { display: none; }
body.standalone .standalone-note {
  display: block;
  background: #eaecee;
  color: #475e75;
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  text-align: center;
}