/* Theme variables provided by you */
:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway", sans-serif;
    --nav-font: "Poppins", sans-serif;

    --background-color: #ffffff;
    --default-color: #444d4d;
    --heading-color: #003a36;
    --accent-color: #018880;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --cta-color: #FF7A00;

    --nav-color: rgba(255,255,255,0.7);
    --nav-hover-color: #ffffff;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #444d4d;
    --nav-dropdown-hover-color: #018880;

    --topbar-height: 64px;
}

html,body { height:100%; margin:0; font-family: var(--default-font); background: var(--background-color); color: var(--default-color); }

/* Layout structure */
.app-shell { display: flex; min-height: 100vh; }
.icon-sm {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    display: inline-block;
    vertical-align: middle;
}
.sidebar {
    width: 260px;
    background: var(--accent-color);
    color: white;
    flex-shrink: 0;
    transition: width .2s ease;
    position: sticky;
    top: 0;
    min-height: 100vh;
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
}
.sidebar .nav-link { color: rgba(255,255,255,0.95); }
.sidebar .nav-link:hover { color: var(--nav-hover-color); background: rgba(255,255,255,0.04); }
.sidebar .brand {
    font-family: var(--nav-font);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0 20px;               /* horizontal padding only */
    height: var(--topbar-height);  /* match topbar height exactly */
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar .nav { padding: 12px 8px; }
.sidebar .nav .nav-item { margin-bottom: 6px; }
.sidebar .nav svg { width: 20px; height: 20px; }

/* Make active nav link visually distinct */
.sidebar .nav-link.active,
.nav.nav-compact .nav-link.active {
  background-color: #ffffff;
  color: var(--accent-color) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* If your nav shows an icon SVG, color it too */
.sidebar .nav-link.active .icon,
.nav.nav-compact .nav-link.active .icon {
  stroke: var(--accent-color) !important;
}

/* Optional: subtle left border instead of full background */
.sidebar .nav-link.active.alt {
  background: transparent;
  color: #0d6efd;
  border-left: 3px solid #0d6efd;
  padding-left: calc(0.5rem - 3px); /* keep spacing visually aligned */
}

/* content area */
.content-wrap { flex:1; display:flex; flex-direction:column; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;                /* keep horizontal padding but reset vertical */
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    border-bottom: 1px solid #eef2f3;
}
.topbar .title { font-family: var(--heading-font); color: var(--heading-color); font-size:1.15rem; font-weight:700; }
.topbar .top-actions { margin-left:auto; display:flex; align-items:center; gap:12px; }

.main { padding: 20px; flex:1; }

footer.admin-footer {
    background: transparent; padding: 14px 20px; text-align:center; color: #6b7280; font-size: 13px;
    border-top: 1px solid #f1f5f7;
}

/* badges for statuses */
.badge-status { font-size: .8rem; padding: .35rem .5rem; border-radius: .375rem; }
.badge-pending { background: #f3f4f6; color: #374151; }
.badge-contacted { background: #dbeafe; color: #0b5394; }
.badge-engaged { background: #dcfce7; color: #14532d; }
.badge-unsubscribed { background: #f8fafc; color: #334155; }
.badge-spam { background: #fee2e2; color: #7f1d1d; }

/* Small screens: collapse sidebar */
@media (max-width: 991px) {
    .sidebar { position: fixed; left: 0; top:0; bottom:0; z-index:1040; transform: translateX(-110%); }
    .sidebar.open { transform: translateX(0); }
    .content-wrap { margin-left: 0; }
    .overlay-dim { display:block; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:1030; }
}

/* small utility */
.nav-compact { font-size: .95rem; }
.p-xxs { padding: .25rem !important; }