:root {
  --brand-primary: #1e5f74;
  --brand-primary-dark: #16475a;
  --brand-accent: #0fb492;
  --sidebar-width: 260px;
}

body {
  background-color: #f4f6f8;
  min-height: 100vh;
}

/* ---------- Layout ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--brand-primary-dark), var(--brand-primary));
  color: #eaf2f4;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .brand {
  font-weight: 700;
  font-size: 1.15rem;
  padding: 1.25rem 1.25rem 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.sidebar .nav-link {
  color: rgba(234, 242, 244, .8);
  padding: .6rem 1.25rem;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .93rem;
}

.sidebar .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.sidebar .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-left-color: var(--brand-accent);
  font-weight: 600;
}

.sidebar .nav-section-title {
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .06em;
  color: rgba(234, 242, 244, .55);
  padding: 1rem 1.25rem .25rem;
}

.main-content {
  flex-grow: 1;
  min-width: 0;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid #e6e9ec;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-body {
  padding: 1.5rem;
}

/* ---------- Cards ---------- */
.stat-card {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

.stat-card .stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand-primary-dark);
}

.card {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

.badge-status-emitida { background-color: #0fb492; }
.badge-status-pendente { background-color: #f0a500; }
.badge-status-processando { background-color: #3b82f6; }
.badge-status-erro { background-color: #dc3545; }
.badge-status-cancelada { background-color: #6c757d; }

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: -100%;
    z-index: 1040;
    transition: left .2s ease-in-out;
  }
  .sidebar.show {
    left: 0;
  }
}