/* ==========================================================
   Newsletter Pro - Bootstrap 5.3 Theme (Pine Green)
   This file intentionally stays small: almost everything is
   plain Bootstrap 5 (.card, .badge, .btn-primary, .table, .alert,
   .modal). We only override Bootstrap's official CSS custom
   properties to reskin it pine-green, and add the handful of
   things Bootstrap has no built-in component for (the fixed
   sidebar layout and a circular avatar).
   ========================================================== */

:root {
  /* Brand palette (used by the overrides below and directly where needed) */
  --pine-900: #0f2f26;
  --pine-800: #143f33;
  --pine-700: #1b5240;
  --pine-600: #23694f;
  --pine-500: #2d8262;
  --pine-400: #4fa383;
  --pine-100: #e6f2ec;
  --pine-50:  #f4faf7;

  /* Retheme Bootstrap's own "primary" color to pine green. This is
     Bootstrap 5.3's documented CSS-variable override approach — every
     component below (.btn-primary, .text-primary, .bg-primary,
     .border-primary, .form-check-input:checked, links, etc.) picks
     this up automatically without a Sass rebuild. */
  --bs-primary: var(--pine-600);
  --bs-primary-rgb: 35, 105, 79;
  --bs-primary-text-emphasis: var(--pine-800);
  --bs-primary-bg-subtle: var(--pine-100);
  --bs-primary-border-subtle: #b7d9c9;
  --bs-link-color: var(--pine-600);
  --bs-link-color-rgb: 35, 105, 79;
  --bs-link-hover-color: var(--pine-700);
  --bs-link-hover-color-rgb: 27, 82, 64;

  --bs-body-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --bs-body-bg: var(--pine-50);
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
}

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

h1, h2, h3, h4, .brand-font {
  font-family: 'Fraunces', Georgia, serif;
}

.mono, code {
  font-family: 'IBM Plex Mono', monospace;
}

/* ---- Button theming (Bootstrap 5.3 per-component CSS variables) ----
   Overriding --bs-primary alone recolors the *base* state of most
   components, but .btn-primary/.btn-outline-primary bake their
   hover/active/focus shades into their own variable set, so we set
   those explicitly here — this is the officially documented pattern
   for reskinning buttons without recompiling Bootstrap's Sass. */
.btn-primary {
  --bs-btn-bg: var(--pine-600);
  --bs-btn-border-color: var(--pine-600);
  --bs-btn-hover-bg: var(--pine-700);
  --bs-btn-hover-border-color: var(--pine-700);
  --bs-btn-active-bg: var(--pine-800);
  --bs-btn-active-border-color: var(--pine-800);
  --bs-btn-disabled-bg: var(--pine-600);
  --bs-btn-disabled-border-color: var(--pine-600);
  --bs-btn-focus-shadow-rgb: 35, 105, 79;
}
.btn-outline-primary {
  --bs-btn-color: var(--pine-700);
  --bs-btn-border-color: var(--pine-600);
  --bs-btn-hover-bg: var(--pine-600);
  --bs-btn-hover-border-color: var(--pine-600);
  --bs-btn-active-bg: var(--pine-700);
  --bs-btn-active-border-color: var(--pine-700);
  --bs-btn-focus-shadow-rgb: 35, 105, 79;
}

.btn-white {
  --bs-btn-bg: var(--pine-50);
  --bs-btn-border-color: var(--pine-600);
  --bs-btn-hover-bg: var(--pine-700);
  --bs-btn-hover-border-color: var(--pine-700);
  --bs-btn-active-bg: var(--pine-800);
  --bs-btn-active-border-color: var(--pine-800);
  --bs-btn-disabled-bg: var(--pine-600);
  --bs-btn-disabled-border-color: var(--pine-600);
  --bs-btn-focus-shadow-rgb: 35, 105, 79;
}
.table{
	background-color:#FFF;
}

.table > :not(caption) > * > *{
	background-color:#FFF;
}
/* ---- Sidebar: Bootstrap has no fixed-sidebar component, so this is
   the one section that stays custom. Nav links inside it use plain
   Bootstrap `.nav`, `.nav-link`, `.nav-link.active` markup/behavior. ---- */
.sidebar {
  background: var(--pine-900);
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  min-height: 100vh;
}
.sidebar .nav-link {
  color: #c7e6da;
  border-left: 3px solid transparent;
  border-radius: 0;
  font-size: .89rem;
  font-weight: 500;
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.sidebar .nav-link i {
  width: 18px;
  text-align: center;
  opacity: .85;
}
.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.sidebar .nav-link.active {
  background: var(--pine-700);
  color: #fff;
  border-left-color: var(--pine-400);
  font-weight: 600;
}
.sidebar .nav-section-label {
  padding: 1.1rem 1.25rem .3rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #5f9683;
}

.main-content {
  margin-left: 250px;
}
.content{
	padding: 30px;
	flex: 1;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.card{
	background-color: #fff;
}
.card-head{
	padding: 15px 10px 5px 15px;
  background-color: #1B5240;
  border-radius: 15px 15px 0 0;
  color: #FFF;
}

/* ---- Avatar: Bootstrap's `rounded-circle` utility handles the shape;
   we just need a fixed pixel size, which Bootstrap doesn't ship as a
   utility class. ---- */
.avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}

/* ---- Small helpers that are genuinely one-offs, not full components ---- */
.stat-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.template-thumb {
  height: 140px;
  overflow: hidden;
  background: #fff;
}
.template-thumb > div {
  transform: scale(.4);
  transform-origin: top left;
  width: 250%;
  pointer-events: none;
}
.login-bg {
  min-height: 100vh;
}
code {
  background: var(--pine-100);
  color: var(--pine-800);
  padding: .1rem .35rem;
  border-radius: .3rem;
  font-size: .8em;
}
textarea.code-view {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
}