:root {
  /* Carisma Classic brand teal, sampled from the logo (#002d33) */
  --navy: #003841;
  --navy-dark: #002d33;
  --navy-soft: #0d4a53;
  --gold: #002d33;
  --gold-dark: #001a1e;
  --gold-soft: #cfe3e5;
  --cream: #f6f8f8;
  --surface: #ffffff;
  --ink: #1c2726;
  --muted: #66787a;
  --border-soft: #e4eae9;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-xs: 0 1px 2px rgba(15,30,32,.05);
  --shadow-sm: 0 2px 6px rgba(15,30,32,.06), 0 1px 2px rgba(15,30,32,.05);
  --shadow-md: 0 10px 24px -8px rgba(0,45,51,.18), 0 2px 6px rgba(15,30,32,.06);
  --shadow-lg: 0 20px 45px -12px rgba(0,45,51,.28);
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 480px at 100% -10%, rgba(0,45,51,.05), transparent 60%),
    var(--cream);
  color: var(--ink);
  letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--navy-dark);
  letter-spacing: -.02em;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold-dark); text-decoration: underline; }

/* ---------- Navbar ---------- */
.navbar.app-navbar {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  box-shadow: 0 4px 20px rgba(0,20,24,.22);
  position: sticky;
  top: 0;
  z-index: 1030;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
.app-navbar .navbar-brand img { height: 30px; }
.app-navbar .nav-link {
  color: rgba(255,255,255,.75) !important;
  font-weight: 500;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem !important;
  border-radius: 8px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.app-navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.09); transform: translateY(-1px); }
.app-navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 var(--gold-soft); }
.app-navbar .btn-outline-light {
  border-color: rgba(207,227,229,.5);
  color: var(--gold-soft);
  border-radius: 8px;
  transition: all .18s ease;
}
.app-navbar .btn-outline-light:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--navy-dark);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,45,51,.28);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,45,51,.32);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary {
  color: var(--gold-dark);
  border-color: var(--gold);
}
.btn-outline-primary:hover {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
}
.btn-outline-secondary {
  color: var(--navy);
  border-color: #ccd6d5;
}
.btn-outline-secondary:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}
.btn-sm { border-radius: 7px; }
.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card.stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-left: none;
}
.card.stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--navy-soft));
}
.card.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card.stat-card .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: 1.05rem;
}

/* ---------- Tables ---------- */
.table {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: none;
  vertical-align: middle;
}
.table td, .table th { padding: .75rem 1rem; vertical-align: middle; }
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover { background-color: var(--cream); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 6px; padding: .4em .65em; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-soft);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(0,45,51,.14);
}
.form-label { font-weight: 600; color: var(--navy); font-size: .88rem; }

/* ---------- Progress bars ---------- */
.progress { border-radius: 20px; background-color: #e4edec; height: 8px !important; }
.progress-bar { background: linear-gradient(90deg, var(--navy-soft), var(--gold)); }
.progress-bar.bg-success { background: linear-gradient(90deg, #2e8b57, #3fae70) !important; }

/* ---------- Pipeline board ---------- */
.pipeline-board .card { transition: transform .15s ease, box-shadow .15s ease; cursor: grab; border-radius: var(--radius-sm); }
.pipeline-board .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pipeline-board .card.dragging { opacity: .4; cursor: grabbing; }
.pipeline-col { border-radius: var(--radius); transition: background-color .15s ease; padding: 6px; }
.pipeline-col.drag-over { background-color: var(--gold-soft); }
.pipeline-col .col-cards { min-height: 60px; }

/* ---------- Chart controls ---------- */
.btn-group .btn-outline-secondary.active {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------- Login page ---------- */
.login-wrapper {
  min-height: calc(100vh - 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 2.75rem 2.5rem;
  width: 100%;
  max-width: 380px;
  text-align: center;
  border: 1px solid var(--border-soft);
}
.login-card img { height: 40px; margin-bottom: 1.5rem; }
.login-card h3 { margin-bottom: 1.5rem; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius-sm); border: none; }

/* ---------- Misc ---------- */
.container { max-width: 1200px; }
.text-muted { color: var(--muted) !important; }
::selection { background: var(--gold-soft); color: var(--navy-dark); }