/* UI Reference Kit 1.0 — fonte visual principal do Balcão Digital */
:root {
  --bd-reference-sidebar: 248px;
  --bd-reference-topbar: 72px;
  --bd-reference-bg: #f9fafb;
  --bd-reference-border: #e6eaf0;
  --bd-reference-navy: #071b36;
  --bd-reference-navy-2: #0f2a4d;
}

body:not(.public-active) > .app-shell {
  grid-template-columns: var(--bd-reference-sidebar) minmax(0, 1fr) !important;
  background: var(--bd-reference-bg);
}

body:not(.public-active) > .app-shell > .sidebar,
.saas-sidebar {
  width: var(--bd-reference-sidebar) !important;
  background: linear-gradient(180deg, var(--bd-reference-navy), var(--bd-reference-navy-2)) !important;
  padding: 18px 14px !important;
  color: #fff;
}

.bd-official-sidebar-brand,
.saas-brand.bd-official-logo {
  width: 188px !important;
  min-height: 66px !important;
  margin: 0 7px 18px !important;
  padding: 7px 9px !important;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.bd-official-sidebar-brand img,
.saas-brand.bd-official-logo img {
  width: 100% !important;
  height: 51px !important;
  max-height: none !important;
  object-fit: contain !important;
}

.saas-brand.bd-official-logo { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; }
.saas-brand.bd-official-logo small { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.workspace-label, .sidebar > p, .saas-sidebar > p { padding-inline: 12px !important; color: rgba(255,255,255,.52) !important; }

.sidebar .menu, .saas-sidebar nav { display: grid; gap: 5px; }
.sidebar .menu-link, .saas-sidebar nav a {
  min-height: 43px !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.sidebar .menu-link.active, .saas-sidebar nav a.active {
  background: #203957 !important;
  box-shadow: inset 3px 0 0 var(--bd-orange) !important;
}

.sidebar .menu-link:hover, .saas-sidebar nav a:hover { background: rgba(255,255,255,.08) !important; }
.sidebar .pm-icon, .saas-sidebar .pm-icon { width: 20px; height: 20px; }

.bd-sidebar-help {
  position: relative;
  min-height: 190px;
  margin: auto 1px 12px;
  padding: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: var(--bd-ink);
}
.bd-sidebar-help > div { position: relative; z-index: 2; }
.bd-sidebar-help strong { display: block; color: var(--bd-navy); font: 700 14px/1.2 Poppins, Inter, sans-serif; }
.bd-sidebar-help p { max-width: 152px; margin: 5px 0 10px; color: #475467; font-size: 10px; line-height: 1.45; }
.bd-sidebar-help a { display: inline-flex; min-height: 34px; align-items: center; padding: 0 11px; border-radius: 8px; background: var(--bd-cta); color: #fff; font-size: 10px; font-weight: 700; }
.bd-sidebar-help img { position: absolute; right: -30px; bottom: -72px; width: 148px; max-width: none; pointer-events: none; }

body:not(.public-active) > .app-shell > .content { min-width: 0; background: var(--bd-reference-bg) !important; }
body:not(.public-active):not(.saas-active) > .app-shell > .content {
  width: calc(100% - var(--bd-reference-sidebar)) !important;
  margin-left: var(--bd-reference-sidebar) !important;
}
body:not(.public-active) > .app-shell > .content > .topbar,
.saas-main > header {
  min-height: var(--bd-reference-topbar) !important;
  height: var(--bd-reference-topbar) !important;
  padding: 0 28px !important;
  border-bottom: 1px solid var(--bd-reference-border) !important;
  background: #fff !important;
}

body:not(.public-active) .screen,
.saas-content { padding: 28px !important; background: var(--bd-reference-bg) !important; }
.saas-main { background: var(--bd-reference-bg) !important; }
.saas-shell { grid-template-columns: var(--bd-reference-sidebar) minmax(0, 1fr) !important; }
.saas-sidebar { min-width: var(--bd-reference-sidebar) !important; }

body:not(.public-active) .page-heading,
body:not(.public-active) .merchant-page-heading,
.saas-content > .page-heading { margin-bottom: 20px !important; }
body:not(.public-active) .page-heading h1,
body:not(.public-active) .merchant-page-heading h1,
.saas-content > .page-heading h1 { color: var(--bd-navy); font: 700 clamp(24px, 2.2vw, 30px)/1.15 Poppins, Inter, sans-serif !important; }

body:not(.public-active) .panel,
body:not(.public-active) .stat-card,
body:not(.public-active) .setting-card,
.saas-content .panel,
.saas-content .stat-card {
  border: 1px solid var(--bd-reference-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
}
body:not(.public-active) .panel { padding: 18px !important; }
body:not(.public-active) .button {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body:not(.public-active) .stats,
.saas-content .stats { gap: 14px !important; margin-bottom: 16px !important; }
body:not(.public-active) .stat-card { min-height: 126px; padding: 18px !important; }
body:not(.public-active) .stat-card > strong { color: var(--bd-navy) !important; font: 700 26px/1.15 Poppins, Inter, sans-serif !important; }

body:not(.public-active) .data-table,
.saas-content .data-table { min-width: 760px; }
body:not(.public-active) .data-table th,
.saas-content .data-table th { padding: 13px 14px !important; background: #fafbfc; color: #475467; font-size: 11px; }
body:not(.public-active) .data-table td,
.saas-content .data-table td { padding: 13px 14px !important; border-color: #eef1f5 !important; font-size: 13px; }

body:not(.public-active) input,
body:not(.public-active) select,
body:not(.public-active) textarea { border-color: var(--bd-reference-border) !important; border-radius: 10px !important; }
body:not(.public-active) :focus-visible { outline: 3px solid rgba(37,99,235,.24) !important; outline-offset: 2px; }

/* O logo novo é único; em superfícies escuras usa placa branca, sem recoloração. */
.mvp-directory-footer .bd-official-logo,
.customer-auth-promo .bd-official-logo { padding: 6px 9px; border-radius: 10px; background: #fff; }
.auth-brand.bd-official-logo img, .track-brand.bd-official-logo img { width: 205px !important; max-height: 78px; }
.bd-auth-mascot { width: min(32vw, 430px) !important; max-height: 72vh; }
.bd-customer-mascot { width: min(49%, 350px) !important; max-height: 60% !important; }

@media (max-height: 820px) and (min-width: 901px) {
  .bd-sidebar-help { display: none; }
}

@media (max-width: 900px) {
  body:not(.public-active) > .app-shell { grid-template-columns: 1fr !important; }
  body:not(.public-active):not(.saas-active) > .app-shell > .content { width: 100% !important; margin-left: 0 !important; }
  body:not(.public-active) > .app-shell > .sidebar { position: fixed !important; width: min(86vw, 290px) !important; }
  .saas-shell { grid-template-columns: 1fr !important; }
  .saas-sidebar { width: min(86vw, 290px) !important; }
  .bd-sidebar-help { display: none; }
}

@media (max-width: 760px) {
  body:not(.public-active) .screen, .saas-content { padding: 18px 14px 90px !important; }
  body:not(.public-active) > .app-shell > .content > .topbar, .saas-main > header { height: 62px !important; min-height: 62px !important; padding: 0 14px !important; }
  body:not(.public-active) .stats, .saas-content .stats { grid-template-columns: 1fr !important; }
  body:not(.public-active) .data-table { min-width: 0; }
  body:not(.public-active) .data-table thead { display: none; }
  body:not(.public-active) .data-table tbody, body:not(.public-active) .data-table tr, body:not(.public-active) .data-table td { display: block; width: 100%; }
  body:not(.public-active) .data-table tr { margin-bottom: 10px; padding: 10px; border: 1px solid var(--bd-reference-border); border-radius: 12px; background: #fff; }
  body:not(.public-active) .data-table td { padding: 7px !important; border: 0 !important; }
  .bd-auth-mascot, .bd-customer-mascot { display: none !important; }
}