/* Camada visual BiaLac - aplicada sobre o tema atual sem alterar regras do sistema. */
:root {
  --primary: #17356d;
  --primary-hover: #10264f;
  --success: #168a66;
  --success-hover: #0f6f52;
  --danger: #c84a4a;
  --danger-hover: #a73535;
  --warning: #b77a2f;
  --info: #167f9f;
  --purple: #7255a6;
  --teal: #157c73;
  --dark: #1f2933;
  --bg: #f3f6f8;
  --card-bg: #ffffff;
  --border: #dde5e8;
  --text-main: #1e252b;
  --text-muted: #68747c;
  --sidebar-bg: #142f56;
  --sidebar-hover: rgba(255, 255, 255, 0.11);
  --sidebar-text: #d9e4ee;
  --sidebar-active: #ffffff;
}

body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(243, 246, 248, 0.94) 42%, #eef3f2 100%);
}

.app-container {
  background: transparent;
}

.sidebar {
  width: 286px !important;
  background:
    linear-gradient(180deg, #102b52 0%, #17356d 52%, #184f67 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 12px 0 35px rgba(16, 43, 82, 0.18) !important;
}

.sidebar-header {
  padding: 22px 18px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.sidebar-header .brand-logo {
  width: 206px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  margin: 0 auto 12px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  border: 1px solid rgba(201, 176, 124, 0.64) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 30px rgba(6, 18, 36, 0.18) !important;
  object-fit: contain !important;
}

.sidebar-header h2 {
  color: #fff !important;
  font-size: 1.06rem !important;
  letter-spacing: 0 !important;
}

.sidebar-header p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.nav-menu {
  gap: 6px;
}

.nav-item {
  min-height: 44px;
  color: var(--sidebar-text) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transform: translateX(3px);
}

.nav-item.active {
  background: #ffffff !important;
  color: #17356d !important;
  border-color: rgba(201, 176, 124, 0.9) !important;
  box-shadow: 0 10px 24px rgba(5, 18, 38, 0.18) !important;
}

.nav-icon {
  width: 30px !important;
  text-align: center;
}

.main-content {
  background: transparent !important;
}

.topbar {
  margin: 18px 22px 0 !important;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(221, 229, 232, 0.92) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(23, 53, 109, 0.08) !important;
}

.topbar h1,
#tituloAtual {
  color: #17356d !important;
  letter-spacing: 0 !important;
}

.user-profile {
  background: #f8faf9 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.user-profile .avatar,
.avatar {
  background: #fff !important;
  border: 1px solid rgba(201, 176, 124, 0.68) !important;
}

.user-profile .avatar img,
.avatar img {
  object-fit: contain !important;
  padding: 3px !important;
}

.content-area {
  padding: 22px !important;
}

.main-card,
.dash-card,
.form-group,
.table-wrap {
  border: 1px solid rgba(221, 229, 232, 0.95) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(25, 44, 62, 0.07) !important;
}

.main-card {
  padding: 22px !important;
}

.dash-card {
  min-height: 122px;
  overflow: hidden;
  position: relative;
}

.dash-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #17356d, #157c73 55%, #b7894f);
}

.dash-card h4 {
  color: #52616a !important;
  letter-spacing: 0 !important;
}

.dash-card .val {
  color: #17356d !important;
}

button,
.btn-action,
.menu-btn {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

.btn-blue,
.menu-btn.btn-blue {
  background: linear-gradient(135deg, #17356d, #244f89) !important;
}

.btn-green,
.menu-btn.btn-green {
  background: linear-gradient(135deg, #168a66, #0f6f52) !important;
}

.btn-teal,
.menu-btn.btn-teal {
  background: linear-gradient(135deg, #157c73, #0e625b) !important;
}

.btn-info,
.menu-btn.btn-info {
  background: linear-gradient(135deg, #167f9f, #115f77) !important;
}

.btn-red,
.menu-btn.btn-red {
  background: linear-gradient(135deg, #c84a4a, #a73535) !important;
}

.btn-dark,
.menu-btn.btn-dark {
  background: linear-gradient(135deg, #273747, #1f2933) !important;
}

.menu-btn {
  min-height: 110px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 18px !important;
  box-shadow: 0 14px 30px rgba(23, 53, 109, 0.13) !important;
}

.menu-btn:hover,
.btn-action:hover {
  filter: brightness(1.03);
}

input,
select,
textarea {
  border-color: #cfd9dd !important;
  border-radius: 8px !important;
  background: #fff !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #157c73 !important;
  box-shadow: 0 0 0 3px rgba(21, 124, 115, 0.14) !important;
}

label {
  color: #34434b !important;
  letter-spacing: 0 !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th {
  background: #f2f6f6 !important;
  color: #43535c !important;
  border-bottom: 1px solid var(--border) !important;
}

tbody tr:hover {
  background: #f8fbfa !important;
}

.scale-area {
  background: #f7faf9 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

.display-box {
  background: linear-gradient(160deg, #152844 0%, #17356d 62%, #0d5d61 100%) !important;
  border: 1px solid rgba(201, 176, 124, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 38px rgba(23, 53, 109, 0.16) !important;
}

.display-value {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28) !important;
  letter-spacing: 0 !important;
}

.peso-card {
  border: 1px solid #dbe5e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.peso-card .rotulo {
  color: #62717a !important;
}

.peso-card .valor {
  color: #17356d !important;
}

#boxTempoReal {
  border-radius: 8px !important;
}

.pedido-card {
  border-radius: 8px !important;
  border-left-color: #17356d !important;
}

.header {
  background: linear-gradient(135deg, #102b52, #17356d 58%, #157c73) !important;
}

.header img {
  background: #fff !important;
  border: 1px solid rgba(201, 176, 124, 0.7) !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  .sidebar {
    width: 286px !important;
    left: -286px !important;
  }

  .sidebar.open {
    left: 0 !important;
  }

  .topbar {
    margin: 12px 12px 0 !important;
    border-radius: 8px !important;
  }

  .content-area {
    padding: 12px !important;
  }

  .main-card {
    padding: 16px !important;
  }

  .sidebar-header .brand-logo {
    width: 184px !important;
  }
}