:root {
  --ofp-primary: #17b890;
  --ofp-blue: #0f6bff;
  --ofp-dark: #111827;
  --ofp-panel: #182235;
  --ofp-text: #f8fafc;
}

.ofp-logo {
  width: 190px;
  max-width: 82%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ofp-login-mark {
  width: min(260px, 70vw);
  height: auto;
  margin-top: 24px;
}

.ofp-login-kicker {
  color: var(--ofp-primary);
  font-weight: 800;
  letter-spacing: 0;
}

.ofp-product-note {
  color: #526173;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 16px;
  max-width: 520px;
}

.ofp-help-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 16px 0 24px;
}

.ofp-help-card {
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  padding: 16px;
  min-height: 150px;
}

.ofp-help-card h4 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #122033;
}

.ofp-help-card p,
.ofp-help-card li {
  color: #445064;
  line-height: 1.5;
}

.ofp-status-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(23, 184, 144, .14);
  color: #08745a;
  font-weight: 700;
  font-size: 12px;
  margin-left: 8px;
}

#footer .pecolor {
  color: #6b778c;
}

#sidebar .menu {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 190px);
  padding-bottom: 92px;
}

#sidebar .menu::-webkit-scrollbar {
  width: 6px;
}

#sidebar .menu::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .55);
  border-radius: 999px;
}

#sidebar .menu-links > li > a {
  min-height: 38px;
}

#sidebar .ofp-menu-section {
  margin: 12px 18px 4px;
  pointer-events: none;
}

#sidebar .ofp-menu-section span {
  display: block;
  color: #7a8798;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

#sidebar .ofp-menu-highlight > a {
  background: rgba(23, 184, 144, .12);
  border-left: 3px solid var(--ofp-primary);
}

#sidebar .ofp-menu-highlight.active > a,
#sidebar .ofp-menu-highlight > a:hover {
  background: rgba(23, 184, 144, .22);
}

.cardBox .card.ofp-dashboard-card {
  background: linear-gradient(135deg, #0f6bff, #17b890);
}

.ofp-chart-frame {
  position: relative;
  width: 100%;
  min-height: 300px;
  height: clamp(300px, 34vh, 380px);
}

.ofp-chart-frame canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ofp-chart-frame-main {
  margin-top: 18px;
}

.ofp-chart-frame-polar {
  min-height: 280px;
  height: clamp(280px, 31vh, 340px);
}

.new-balance .widget-content {
  overflow: hidden;
}

.ofp-access-panel {
  background: #f8fbff;
  border: 1px solid #dbe7f4;
  border-radius: 6px;
  margin: 0 0 16px;
  padding: 16px;
}

.ofp-access-panel h4 {
  color: #122033;
  font-size: 18px;
  margin: 0 0 8px;
}

.ofp-access-panel p {
  color: #526173;
  line-height: 1.5;
  margin: 0 0 12px;
}

.ofp-role-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 12px;
}

.ofp-role-card {
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  padding: 12px;
}

.ofp-role-card strong {
  color: #132235;
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.ofp-role-card span {
  color: #526173;
  display: block;
  font-size: 12px;
  line-height: 1.4;
}

.ofp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.ofp-action-row .btn {
  margin: 0;
}

.ofp-help-anchor {
  align-items: center;
  background: #eef9f6;
  border: 1px solid rgba(23, 184, 144, .3);
  border-radius: 6px;
  color: #075f4b;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
}

@media (max-width: 768px) {
  #sidebar .menu {
    max-height: calc(100vh - 150px);
  }

  .ofp-chart-frame,
  .ofp-chart-frame-main,
  .ofp-chart-frame-polar {
    height: 320px;
    min-height: 320px;
  }

  .ofp-access-panel {
    padding: 12px;
  }
}

/* Productized shell: keeps MapOS useful, but gives OficinaFlow a SaaS-grade surface. */
body {
  background: #f4f6f4;
  color: #202720;
  font-family: Inter, "Roboto Condensed", Roboto, Arial, sans-serif;
}

a {
  color: #0b705b;
}

a:hover,
a:focus {
  color: #095243;
}

.navebarn,
#user-nav.navbar,
#user-nav.navbar-inverse {
  background: #ffffff !important;
  border: 0;
  box-shadow: 0 10px 28px rgba(20, 29, 23, .08);
}

#user-nav > ul > li > a,
#user-nav .dropdown-menu a {
  color: #2b352e !important;
  text-shadow: none;
}

#userr .userT,
#userr .userT0 {
  color: #233029;
  letter-spacing: 0;
}

#sidebar {
  background: #10140f;
  box-shadow: 10px 0 30px rgba(14, 20, 16, .22);
}

#sidebar #newlog {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 10px 14px;
}

#sidebar .ofp-logo {
  max-width: 176px;
}

#sidebar .search-box {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  margin: 14px 16px 10px;
  min-height: 40px;
}

#sidebar .search-box input {
  color: #f6faf7;
  font-size: 13px;
}

#sidebar .menu-links > li > a,
#sidebar .botton-content > li > a {
  border-radius: 8px;
  color: #d7e0da;
  margin: 2px 12px;
  min-height: 36px;
  padding: 7px 10px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

#sidebar .menu-links > li > a:hover,
#sidebar .botton-content > li > a:hover,
#sidebar .menu-links > li.active > a {
  background: rgba(22, 184, 144, .15);
  color: #ffffff;
  transform: translateX(2px);
}

#sidebar .iconX {
  color: #74d9bf;
  font-size: 20px;
  margin-right: 8px;
}

#sidebar .ofp-menu-section {
  margin-top: 16px;
}

#sidebar .ofp-menu-section span {
  color: #8ca096;
  font-size: 11px;
}

#sidebar .ofp-menu-highlight > a {
  background: rgba(23, 184, 144, .12);
  border-left: 0;
}

#content {
  background: transparent;
}

#content-header {
  background: transparent;
  border-bottom: 0;
  min-height: 70px;
}

.bemv {
  color: #132019;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
  margin-top: 4px;
}

#breadcrumb {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#breadcrumb a {
  color: #607067;
  text-shadow: none;
}

.container-fluid {
  padding: 0 24px 28px;
}

.widget-box,
.widget-box0,
.widget-box2,
.widget-box-new,
.widget-box-statist,
.widget-box-new.balance,
.new-balance .widget-box0,
.new-balance .widget-box-statist {
  background: #ffffff;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(24, 34, 27, .08);
  overflow: hidden;
}

.widget-title,
.widget-title2,
.widget-box > .widget-title,
.widget-box0 > div:first-child,
.widget-box2 > div:first-child {
  background: #f8fbf9;
  border-bottom: 1px solid #e1ebe5;
  color: #18231c;
}

.widget-title h5,
.widget-title2 h5,
.cardHeader {
  color: #18231c;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.widget-content,
.widget-contentMC {
  background: #ffffff;
}

.table {
  background: #ffffff;
}

.table th {
  background: #f3f7f4;
  color: #435146;
  font-size: 12px;
  letter-spacing: 0;
}

.table td {
  color: #263329;
}

.btn,
.button.btn,
#btn-acessar,
.btn-xs,
.btn-xsx {
  border-radius: 8px;
  box-shadow: none;
  letter-spacing: 0;
}

.btn-primary,
.button.btn-primary,
#btn-acessar {
  background: #14a57f !important;
  border-color: #14a57f !important;
  color: #ffffff !important;
}

.btn-success,
.button.btn-success {
  background: #177f65 !important;
  border-color: #177f65 !important;
}

.btn-warning,
.button.btn-warning {
  background: #d58b16 !important;
  border-color: #d58b16 !important;
}

.cardBox {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0 0 18px;
}

.cardBox .card,
.new-bottons .card {
  background: #ffffff;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(23, 32, 25, .07);
  min-height: 92px;
}

.cardBox .card .numbers,
.new-bottons .card .cardName2 {
  color: #16231b;
  font-size: 21px;
  font-weight: 800;
}

.cardBox .card .cardName,
.new-bottons .card .cardName {
  color: #637167;
}

.cardBox .card.ofp-dashboard-card,
.new-bottons .card.ofp-stat-card {
  background: linear-gradient(135deg, #123126, #16a078);
  border-color: #16a078;
}

.cardBox .card.ofp-dashboard-card .numbers,
.cardBox .card.ofp-dashboard-card .cardName,
.new-bottons .card.ofp-stat-card .cardName,
.new-bottons .card.ofp-stat-card .cardName2 {
  color: #ffffff;
}

.new-balance {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
  margin: 18px 0;
}

.new-balance .widget-box0,
.new-balance .widget-box-statist {
  min-width: 0;
}

.ofp-chart-frame-main {
  height: clamp(320px, 36vh, 420px);
}

.ofp-chart-frame-polar {
  height: clamp(300px, 34vh, 380px);
}

.ofp-page-head {
  align-items: stretch;
  display: flex;
  gap: 16px;
  margin: 0 0 18px;
}

.ofp-page-head h3 {
  color: #132019;
  font-size: 28px;
  line-height: 1.15;
  margin: 4px 0 8px;
}

.ofp-page-head p,
.ofp-current-plan small,
.ofp-plan-card p {
  color: #59665d;
  line-height: 1.5;
}

.ofp-kicker,
.ofp-plan-topline span {
  color: #0c765d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ofp-current-plan,
.ofp-plan-card,
.ofp-soft-panel {
  background: #ffffff;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(23, 32, 25, .07);
}

.ofp-current-plan {
  padding: 16px;
}

.ofp-current-plan span {
  color: #748076;
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.ofp-current-plan strong {
  color: #142019;
  display: block;
  font-size: 20px;
  margin: 4px 0 6px;
}

.ofp-plan-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 18px;
}

.ofp-plan-card {
  padding: 18px;
}

.ofp-plan-card h4 {
  color: #142019;
  font-size: 18px;
  margin: 8px 0 6px;
}

.ofp-plan-price {
  color: #0a7159;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
}

.ofp-plan-card ul {
  list-style: none;
  margin: 12px 0 0;
}

.ofp-plan-card li {
  align-items: center;
  color: #36443b;
  display: flex;
  gap: 7px;
  line-height: 1.5;
  margin-bottom: 5px;
}

.ofp-plan-card li i {
  color: #13a47e;
}

.ofp-plan-form label {
  color: #2a362f;
  font-weight: 800;
  margin-top: 10px;
}

.ofp-plan-form input,
.ofp-plan-form select,
.ofp-plan-form textarea {
  border-color: #ccd8d0;
  border-radius: 8px;
  box-shadow: none;
}

.ofp-compact-table th,
.ofp-compact-table td {
  font-size: 13px;
}

.ofp-hierarchy {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ofp-hierarchy div {
  background: #f7faf8;
  border: 1px solid #deebe4;
  border-radius: 8px;
  padding: 14px;
}

.ofp-hierarchy strong {
  color: #142019;
  display: block;
  margin-bottom: 5px;
}

.ofp-hierarchy span {
  color: #59675e;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .new-balance {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .container-fluid {
    padding: 0 12px 22px;
  }

  .cardBox {
    grid-template-columns: 1fr 1fr;
  }

  .ofp-page-head {
    display: block;
  }
}