/* Teal/Dark-Green theme inspired by reference project */
:root {
  --brand:#14532D;   /* deep green */
  --brand-contrast:#FFFFFF;
  --brand-hover:#0f5a24;
  --muted:#6c757d;
}

/* Navbar */
.navbar-custom {
  background-color: var(--brand) !important;
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .navbar-text {
  color: var(--brand-contrast) !important;
}
.navbar-custom .nav-link.active,
.navbar-custom .nav-link:hover {
  color: #f3faf6 !important;
}

/* Sidebar */
.app-sidebar .list-group {
  border-radius: .75rem;
  overflow: hidden;
  background: var(--brand);
}
.app-sidebar .list-group-item {
  background: transparent;
  color: #e8fff3;
  border: 0;
  padding: .8rem 1rem;
}
.app-sidebar .list-group-item.active,
.app-sidebar .list-group-item:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* Buttons */
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
}
.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover {
  background-color: var(--brand);
  color: #fff;
}

/* Cards */
.card-accent {
  border-left: 4px solid var(--brand);
}
.card-brand {
  background: var(--brand);
  color: var(--brand-contrast);
}
.card-brand .btn {
  color: var(--brand);
}

/* Login */
.login-wrapper {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
}
/* Neutral default: no green oval anywhere by default */
.logo-circle {
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
  color: inherit;
}

/* Navbar-only badge */
.navbar .logo-circle {
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 22px rgba(20,83,45,.25);
}
/* Chart containers: fix infinite-resize issues */
.chart-wrap { position: relative; height: 260px; }
.chart-wrap.short { height: 220px; } /* use for smaller charts if needed */
/* --- Select2 Bootstrap 4 fixes --- */
.select2-container { width: 100% !important; }

.select2-container--bootstrap4 .select2-selection--single {
  height: calc(2.25rem + 2px);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height: 2.25rem;
  padding-left: .75rem;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  height: calc(2.25rem + 2px);
  right: .5rem;
}

.select2-container--bootstrap4 .select2-selection__clear {
  margin-right: .5rem; /* keep the “×” inside the input on the right */
}
/* Spacing under Select2 so next field (Category) doesn't crowd it */
.select2-container--bootstrap4 {
  margin-bottom: 0.85rem; /* tweak up/down to taste */
}
/* Limit the brand text to 2 lines inside the navbar */
.navbar-brand .app-title{
  white-space: normal;          /* allow wrapping */
  word-break: break-word;       /* prevent overflow on long words */
  display: -webkit-box;         /* multi-line clamp */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;        /* WebKit/Blink */
  line-clamp: 3;                /* modern spec */
  overflow: hidden;             /* hide extra lines */
  line-height: 1.1;
  max-width: min(20vw, 28rem);  /* give it room but don’t let it push nav items */
}