:root {
  --sidebar-w: 250px;
  --brand: #0f4c5c;
  --brand-2: #1b7a6e;
  --accent: #e36414;
  --bg: #f3f6f8;
  --ink: #1a2b32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(160deg, #eef5f7 0%, #f7f3ee 50%, #e9f0f2 100%);
  color: var(--ink);
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  min-height: 100vh;
}

.app-shell { min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: linear-gradient(180deg, #0f4c5c 0%, #123a44 100%);
  color: #e8f2f4;
  position: sticky;
  top: 0;
  flex-shrink: 0;
}

.sidebar .nav-link {
  color: rgba(255,255,255,.82);
  border-radius: .5rem;
  padding: .55rem .75rem;
  display: flex;
  gap: .55rem;
  align-items: center;
}

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

.sidebar-logo {
  max-height: 42px;
  max-width: 140px;
  object-fit: contain;
}

.app-main { min-width: 0; }

.topbar { backdrop-filter: blur(6px); }

.card-stat {
  border: 0;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,76,92,.06);
}

.table-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15,76,92,.06);
  border: 0;
}

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(27,122,110,.18), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(227,100,20,.15), transparent 35%),
    linear-gradient(160deg, #eef5f7, #f7f3ee);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,76,92,.08);
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(15,76,92,.12);
  padding: 2rem;
}

.badge-due { background: #fde8d8; color: #9a3412; }
.badge-paid { background: #dcfce7; color: #166534; }
.badge-partial { background: #fef3c7; color: #92400e; }

@media (max-width: 991px) {
  .sidebar { width: 100%; min-height: auto; position: relative; }
  .app-shell { flex-direction: column; }
}