/* V3 Bank Council — SAP Fiori (Horizon) */
:root {
  --v3-navy: #0a2f7a;
  --v3-blue: #0a3d91;
  --page-pad: 2rem;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
  font-size: var(--sapFontSize, .875rem);
  color: var(--sapTextColor, #1d2d3e);
  background: var(--sapBackgroundColor, #f5f6f7);
  -webkit-font-smoothing: antialiased;
}
#root { height: 100%; }
.boot { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; }
.boot-bar { width: 160px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #0070f2, transparent); background-size: 200% 100%; animation: boot 1.1s linear infinite; }
@keyframes boot { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ---------------- Login (padrão SAP Fiori Launchpad) ---------------- */
.login-bg {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,112,242,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(10,47,122,.25), transparent 60%),
    linear-gradient(160deg, #eaf1fb 0%, #f5f6f7 55%, #e7edf6 100%);
}
.login-card {
  width: 100%; max-width: 25rem;
  background: var(--sapGroup_ContentBackground, #fff);
  border-radius: var(--sapElement_BorderCornerRadius, .75rem);
  box-shadow: var(--sapContent_Shadow2, 0 0 1rem rgba(34,53,72,.15));
  padding: 2.5rem 2rem 2rem;
}
.login-logo { display: block; width: 168px; height: auto; margin: 0 auto 1.25rem; }
.login-title { text-align: center; margin: 0 0 .25rem; font-family: var(--sapFontBoldFamily); font-size: 1.5rem; color: var(--sapTitleColor); }
.login-sub { text-align: center; margin: 0 0 1.75rem; color: var(--sapContent_LabelColor); font-size: .875rem; }
.login-card ui5-input, .login-card ui5-button { width: 100%; }
.login-card .form-field { margin-bottom: 1rem; }
.login-card ui5-message-strip { margin-bottom: 1rem; }
.login-actions { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.login-foot { margin-top: 1.5rem; text-align: center; color: var(--sapContent_LabelColor); font-size: .75rem; display: flex; align-items: center; justify-content: center; gap: .35rem; }
.login-foot ui5-icon { width: .875rem; height: .875rem; color: var(--sapPositiveColor); }
.qr-box { display: flex; justify-content: center; margin: .5rem 0 1rem; }
.qr-box img { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--sapList_BorderColor); border-radius: .5rem; padding: .5rem; background: #fff; }
.secret-box { font-family: var(--sapFontMonoFamily, "72Mono", monospace); background: var(--sapNeutralBackground, #eff1f2); border-radius: .5rem; padding: .5rem .75rem; text-align: center; letter-spacing: .05em; margin-bottom: 1rem; word-break: break-all; }
.codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-family: var(--sapFontMonoFamily, monospace); margin: .75rem 0 1rem; }
.codes-grid span { background: var(--sapNeutralBackground, #eff1f2); border-radius: .375rem; padding: .375rem .5rem; text-align: center; }
.steps { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--sapTextColor); line-height: 1.6; }

/* ---------------- Shell ---------------- */
ui5-navigation-layout { height: 100vh; }
ui5-shellbar img[slot="logo"] { height: 1.5rem; width: auto; }
.content { height: 100%; overflow: auto; background: var(--sapBackgroundColor); }

/* Cabeçalho de página (Dynamic Page Title) */
.page-header {
  background: var(--sapObjectHeader_Background, #fff);
  box-shadow: var(--sapContent_HeaderShadow, 0 .125rem .125rem 0 rgba(34,53,72,.15));
  padding: 1rem var(--page-pad) 1rem;
  position: sticky; top: 0; z-index: 5;
}
.page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-title { margin: 0; font-family: var(--sapFontHeaderFamily, var(--sapFontBoldFamily)); font-size: var(--sapObjectHeader_Title_FontSize, 1.25rem); color: var(--sapTitleColor); font-weight: 700; }
.page-sub { margin: .25rem 0 0; color: var(--sapContent_LabelColor); font-size: .875rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.page-body { padding: 1rem var(--page-pad) 2rem; }
.breadcrumb { color: var(--sapContent_LabelColor); font-size: .75rem; margin-bottom: .25rem; }

/* KPI header (atributos do Object Page) */
.kpi-strip { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 1rem; }
.kpi-strip .kpi { display: flex; flex-direction: column; gap: .125rem; }
.kpi-label { color: var(--sapContent_LabelColor); font-size: .75rem; }
.kpi-value { font-family: var(--sapFontBoldFamily); font-size: 1.25rem; color: var(--sapTextColor); }

/* Cartões (Fiori Cards) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.cards.wide { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
ui5-card { width: 100%; }
.card-body { padding: 0 1rem 1rem; }
.numeric { display: flex; align-items: baseline; gap: .5rem; padding: .25rem 1rem .25rem; }
.numeric .big { font-family: var(--sapFontLightFamily, var(--sapFontFamily)); font-size: 2.25rem; line-height: 1.1; color: var(--sapTextColor); letter-spacing: -.01em; }
.numeric .big.pos { color: var(--sapPositiveTextColor, #256f3a); }
.numeric .big.neg { color: var(--sapNegativeTextColor, #aa0808); }
.numeric .big.crit { color: var(--sapCriticalTextColor, #b44f00); }
.numeric .unit { color: var(--sapContent_LabelColor); font-size: .875rem; }
.card-meta { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 1rem 1rem; color: var(--sapContent_LabelColor); font-size: .8125rem; }
.card-meta b { color: var(--sapTextColor); font-weight: 600; }
.bar { height: .375rem; border-radius: 1rem; background: var(--sapNeutralBackground, #eff1f2); overflow: hidden; margin: 0 1rem .75rem; }
.bar > span { display: block; height: 100%; border-radius: 1rem; background: var(--sapChart_OrderedColor_1, #0070f2); }
.bar.c2 > span { background: var(--sapChart_OrderedColor_2, #c87b00); }
.bar.c3 > span { background: var(--sapChart_OrderedColor_3, #75980b); }
.bar.c4 > span { background: var(--sapChart_OrderedColor_4, #df1278); }
.card-actions { display: flex; gap: .5rem; padding: 0 1rem 1rem; flex-wrap: wrap; }
.kpi-card-hero { background: linear-gradient(135deg, var(--v3-navy) 0%, #0057d2 100%); color: #fff; border-radius: var(--sapTile_BorderCornerRadius, 1rem); padding: 1.25rem 1.25rem 1rem; box-shadow: var(--sapContent_Shadow0); display: flex; flex-direction: column; gap: .5rem; min-height: 100%; }
.kpi-card-hero .t { font-size: .875rem; opacity: .9; font-family: var(--sapFontSemiboldDuplexFamily, var(--sapFontBoldFamily)); }
.kpi-card-hero .v { font-family: var(--sapFontLightFamily); font-size: 2.25rem; line-height: 1.1; }
.kpi-card-hero .s { font-size: .8125rem; opacity: .85; }
.section-title { font-family: var(--sapFontHeaderFamily, var(--sapFontBoldFamily)); font-size: 1rem; font-weight: 700; color: var(--sapGroup_TitleTextColor, var(--sapTitleColor)); margin: 1.75rem 0 .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Tabelas */
.table-wrap { background: var(--sapList_Background, #fff); border-radius: var(--sapElement_BorderCornerRadius, .75rem); box-shadow: var(--sapContent_Shadow0); overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 1rem; min-height: 2.75rem; border-bottom: 1px solid var(--sapList_BorderColor); flex-wrap: wrap; }
.table-toolbar .tt { font-family: var(--sapFontBoldFamily); font-weight: 700; color: var(--sapTitleColor); font-size: 1rem; }
.table-toolbar .tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fiori-table { width: 100%; }
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.money.pos { color: var(--sapPositiveTextColor, #256f3a); }
.money.neg { color: var(--sapNegativeTextColor, #aa0808); }
.money.strong { font-family: var(--sapFontBoldFamily); font-weight: 700; }
.desc-main { display: block; color: var(--sapTextColor); }
.desc-sub { display: block; color: var(--sapContent_LabelColor); font-size: .75rem; margin-top: .125rem; }
.row-actions { display: flex; gap: .25rem; flex-wrap: wrap; }
.row-actions ui5-button { min-width: 0; }
.partner-chip { display: inline-flex; align-items: center; gap: .375rem; }
.partner-chip ui5-avatar { flex: none; }

/* Filtro (Filter Bar) */
.filter-bar { background: var(--sapObjectHeader_Background, #fff); border-radius: var(--sapElement_BorderCornerRadius, .75rem); box-shadow: var(--sapContent_Shadow0); padding: .75rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem 1rem; margin-bottom: 1rem; align-items: end; }
.filter-bar .form-field ui5-input, .filter-bar .form-field ui5-select, .filter-bar .form-field ui5-date-picker { width: 100%; }
.filter-actions { display: flex; gap: .5rem; justify-content: flex-end; }

/* Formulários */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem 1rem; }
.form-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field ui5-input, .form-field ui5-select, .form-field ui5-date-picker, .form-field ui5-textarea { width: 100%; }
.field-hint { color: var(--sapContent_LabelColor); font-size: .75rem; }
.dlg-body { min-width: min(30rem, 86vw); max-width: 44rem; padding: .25rem 0; }
.dlg-body ui5-message-strip { margin-bottom: .75rem; }
.confirm-text { display: block; max-width: 28rem; line-height: 1.5; }
.mb { margin-bottom: 1rem; }
.mt { margin-top: 1rem; }
.muted { color: var(--sapContent_LabelColor); }
.strip-stack { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }

/* Assistente de classificação */
.classify { display: flex; flex-direction: column; gap: 1rem; min-width: min(34rem, 86vw); }
.classify-progress { display: flex; justify-content: space-between; color: var(--sapContent_LabelColor); font-size: .8125rem; }
.classify-progress .pbar { flex: 1; height: .25rem; background: var(--sapNeutralBackground); margin: .5rem .75rem 0; border-radius: 1rem; overflow: hidden; }
.classify-progress .pbar span { display: block; height: 100%; background: var(--sapButton_Emphasized_Background, #0070f2); }
.classify-card { border: 1px solid var(--sapList_BorderColor); border-radius: var(--sapElement_BorderCornerRadius, .75rem); padding: 1rem 1.25rem; background: var(--sapGroup_ContentBackground); }
.classify-amount { font-family: var(--sapFontLightFamily); font-size: 2rem; line-height: 1.2; }
.classify-desc { font-family: var(--sapFontSemiboldDuplexFamily, var(--sapFontBoldFamily)); margin: .25rem 0; }
.classify-q { font-family: var(--sapFontBoldFamily); font-size: 1rem; text-align: center; }
.classify-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.who-btn { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .75rem; border: 1px solid var(--sapButton_BorderColor, #bcc3ca); border-radius: var(--sapButton_BorderCornerRadius, .5rem); background: var(--sapButton_Background, #fff); color: var(--sapButton_TextColor); font-family: var(--sapFontSemiboldDuplexFamily, var(--sapFontBoldFamily)); transition: background .12s, border-color .12s; text-align: center; }
.who-btn:hover { background: var(--sapButton_Hover_Background, #eaecee); border-color: var(--sapButton_Hover_BorderColor); }
.who-btn:focus-visible { outline: var(--sapContent_FocusWidth, .125rem) solid var(--sapContent_FocusColor, #0032a5); outline-offset: .125rem; }
.who-btn small { color: var(--sapContent_LabelColor); font-family: var(--sapFontFamily); font-size: .75rem; }
.who-btn kbd { font-family: var(--sapFontMonoFamily, monospace); font-size: .6875rem; color: var(--sapContent_LabelColor); border: 1px solid var(--sapList_BorderColor); border-radius: .25rem; padding: 0 .3rem; }
.classify-secondary { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }

/* Upload */
.upload-zone { border: 2px dashed var(--sapField_BorderColor, #556b82); border-radius: var(--sapElement_BorderCornerRadius, .75rem); padding: 2rem 1rem; text-align: center; background: var(--sapGroup_ContentBackground, #fff); transition: background .15s, border-color .15s; }
.upload-zone.drag { background: var(--sapInformationBackground, #e1f4ff); border-color: var(--sapInformativeColor, #0070f2); }
.upload-zone ui5-icon { width: 2.5rem; height: 2.5rem; color: var(--sapContent_IconColor, #0070f2); }
.upload-zone h3 { margin: .75rem 0 .25rem; font-family: var(--sapFontBoldFamily); color: var(--sapTitleColor); }
.upload-zone p { margin: 0 0 1rem; color: var(--sapContent_LabelColor); }

/* Detalhes (Object attributes) */
.attrs { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin-bottom: 1rem; }
.attrs dt { color: var(--sapContent_LabelColor); }
.attrs dd { margin: 0; word-break: break-word; }
.empty { padding: 2rem 1rem; }

@media (max-width: 720px) {
  :root { --page-pad: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
  .kpi-strip { gap: 1.25rem; }
  .numeric .big { font-size: 1.75rem; }
}