:root {
    /* ===== Base Colors ===== */
    --white: #ffffff;
    --white-light: #f8fafc;
    /* page bg */
    --white-soft: #f1f5f9;
    /* subtle surface */
    --white-muted: #e2e8f0;
    /* borders */

    --black-darker: #000000;

    /* RGB helpers */
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;

    /* Brand */
    --primary-rgb: 99, 102, 241;
    --primary-dark-rgb: 79, 70, 229;

    /* Text ink */
    --ink-900: #1e293b;
    /* headings */
    --ink-700: #334155;
    /* body text */
    --ink-500: #64748b;
    /* muted */

    /* Status */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --blue: #3b82f6;

    /* Dark palette (color names only) */
    --night-900: #0f172a;
    /* dark body */
    --slate-800: #1e293b;
    /* dark cards/headers */
    --slate-700: #334155;
    /* dark inputs/toggles */
    --slate-650: #475569;
    /* dark hover */
    --mist-300: #cbd5e1;
    /* dark text base */
    --mist-200: #e2e8f0;
    /* dark headings accent */
    --mist-400: #94a3b8;
    /* dark muted */
    /* 280px */
    --header-height: 3.0625rem;
    /* 65px */
    --border-radius: 0.75rem;
    /* 12px */
    --transition: all 0.3s ease;
    --shadow-sm: 0 0.0625rem 0.1875rem rgba(var(--black-rgb), 0.12),
        0 0.0625rem 0.125rem rgba(var(--black-rgb), 0.24);
    --shadow-md: 0 0.25rem 0.375rem rgba(var(--black-rgb), 0.1),
        0 0.0625rem 0.1875rem rgba(var(--black-rgb), 0.08);
    --shadow-lg: 0 0.625rem 1.5625rem -0.3125rem rgba(var(--black-rgb), 0.1),
        0 0.5rem 0.625rem -0.375rem rgba(var(--black-rgb), 0.05);
}

/* Scale whole UI down so 100% zoom ≈ your previous 80% */
html {
    font-size: 87.5%;
}

/* ===== General ===== */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    background-color: var(--white-light);
    color: var(--ink-700);
    margin: 0;
    padding: 0;
}

.admin-body {
    display: flex;
    overflow-x: hidden;
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    transition: var(--transition);
    flex-direction: column;
    position: relative;
}

/* ===== Header ===== */
.admin-header {
    background: var(--white);
    height: var(--header-height);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Search in header */
.search-form {
    position: relative;
    max-width: 25rem;
    /* 400px */
    width: 100%;
}

.search-form .form-control {
    padding-left: 2.5rem;
    border-radius: 1.25rem;
    /* 20px */
    border: 1px solid var(--white-muted);
    background: var(--white-light);
    transition: var(--transition);
}

.search-form .form-control:focus {
    background: var(--white);
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.15);
    /* 3px */
    border-color: rgba(var(--primary-rgb), 1);
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-500);
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: var(--white-soft);
    border: none;
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-500);
    transition: var(--transition);
    cursor: pointer;
}

.theme-toggle:hover {
    background: var(--white-muted);
    color: var(--ink-900);
}

/* User menu */
.user-menu .dropdown-toggle {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    padding-right: 0.75rem;
    border-radius: 1.25rem;
    /* 20px */
    transition: var(--transition);
    cursor: pointer;
}

.user-menu .dropdown-toggle:hover {
    background: var(--white-soft);
}

.user-avatar {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-900);
}

.user-role {
    font-size: 0.75rem;
    color: var(--ink-500);
}

.dropdown-arrow {
    font-size: 0.75rem;
    color: var(--ink-500);
}

/* ===== Page Containers ===== */
.page-header-container {
    background: var(--white);
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--white-muted);
}

.page-content-container {
    flex: 1;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.5rem;
}

.breadcrumb-item a {
    color: var(--ink-500);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb-item a:hover {
    color: rgba(var(--primary-rgb), 1);
}

.page-title {
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
}

.page-subtitle {
    color: var(--ink-500);
    margin-bottom: 0;
}

.page-actions {
    display: flex;
    gap: 0.75rem;
}

/* ===== Buttons ===== */
/* ===== Generic Disabled Buttons ===== */
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: var(--ink-500); /* muted ink */
    pointer-events: none;
    background-color: var(--white-muted); /* subtle gray */
    border-color: var(--white-muted);
    opacity: 1; /* keep solid, not faded */
}

/* ===== Disabled Primary Buttons ===== */
.btn-primary.disabled,
.btn-primary:disabled,
fieldset:disabled .btn-primary {
    background-color: rgba(var(--primary-rgb), 0.5); /* softer brand tone */
    border-color: rgba(var(--primary-rgb), 0.5);
    color: var(--white); /* keep text visible */
    pointer-events: none;
}

.btn-primary {
    background: rgba(var(--primary-rgb), 1);
    border-color: rgba(var(--primary-rgb), 1);
    border-radius: 0.5rem;
    /* 8px */
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    color: var(--white);
}

.btn-primary:hover {
    background: rgba(var(--primary-dark-rgb), 1);
    border-color: rgba(var(--primary-dark-rgb), 1);
}

/* Outline Primary (Bootstrap-style) */
.btn-outline-primary {
    color: rgba(var(--primary-rgb), 1);
    border: 1px solid rgba(var(--primary-rgb), 1);
    background-color: transparent;
    border-radius: 0.5rem; /* match your buttons */
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    transition: var(--transition);
}

/* Hover */
.btn-outline-primary:hover {
    color: var(--white);
    background-color: rgba(var(--primary-rgb), 1);
    border-color: rgba(var(--primary-dark-rgb), 1);
}

/* Focus ring */
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.25); /* ~3px */
}

/* Active / pressed */
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    color: var(--white);
    background-color: rgba(var(--primary-dark-rgb), 1);
    border-color: rgba(var(--primary-dark-rgb), 1);
}

/* Active + focus ring */
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus,
.btn-check:checked + .btn-outline-primary:focus {
    box-shadow: 0 0 0 0.1875rem rgba(var(--primary-rgb), 0.3);
}

/* Disabled */
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: rgba(var(--primary-rgb), 0.5);
    border-color: rgba(var(--primary-rgb), 0.35);
    background-color: transparent;
    opacity: 1; /* keep consistent appearance */
    pointer-events: none;
}

.btn-outline-secondary {
    border-radius: 0.5rem;
    /* 8px */
    font-weight: 500;
    padding: 0.5rem 1.25rem;
}

/* ===== Cards ===== */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    margin-bottom: 1.5rem;
    background: var(--white);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: var(--white);
    border-bottom: 1px solid var(--white-muted);
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: var(--ink-900);
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.card-body {
    padding: 1.5rem;
}

/* ===== Stats ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 3rem;
    /* 48px */
    height: 3rem;
    /* 48px */
    border-radius: 0.625rem;
    /* 10px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    background: rgba(var(--primary-rgb), 0.1);
    color: rgba(var(--primary-rgb), 1);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 0.25rem;
}

.stat-label {
    color: var(--ink-500);
    font-weight: 500;
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.trend-up {
    color: var(--success);
}

.trend-down {
    color: var(--danger);
}

/* ===== Footer ===== */
.admin-footer {
    background: var(--white);
    padding: 1rem 1.5rem;
    margin-top: auto;
    border-top: 1px solid var(--white-muted);
    color: var(--ink-500);
    font-size: 0.875rem;
}

.support-link {
    color: rgba(var(--primary-rgb), 1);
    text-decoration: none;
}

.support-link:hover {
    text-decoration: underline;
}

/* ===== Dark Mode ===== */
[data-bs-theme="dark"] body {
    background-color: var(--night-900);
    color: var(--mist-300);
}

[data-bs-theme="dark"] .admin-header,
[data-bs-theme="dark"] .page-header-container,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .admin-footer {
    background-color: var(--slate-800);
    color: var(--mist-300);
    border-color: var(--slate-700);
}

[data-bs-theme="dark"] .search-form .form-control {
    background: var(--slate-700);
    border-color: var(--slate-700);
    color: var(--mist-300);
}

[data-bs-theme="dark"] .user-name {
    color: var(--mist-200);
}

[data-bs-theme="dark"] .theme-toggle {
    background: var(--slate-700);
    color: var(--mist-400);
}

[data-bs-theme="dark"] .theme-toggle:hover {
    background: var(--slate-650);
}

[data-bs-theme="dark"] .page-title {
    color: var(--mist-200);
}

[data-bs-theme="dark"] .page-subtitle,
[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--mist-400);
}

[data-bs-theme="dark"] .stat-value {
    color: var(--mist-200);
}

[data-bs-theme="dark"] .user-menu .dropdown-toggle:hover {
    background: var(--slate-700);
}

/* ===== Container Spacing ===== */
.container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header-actions {
        gap: 0.5rem;
    }

    .user-info {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-header {
        padding: 0 1rem;
    }

    .search-form {
        max-width: 15.625rem;
    }

    /* 250px */
}

/* Active item styling */
.list-group-item.active {
    color: var(--white) !important;
    border-color: var(--primary-dark-rgb) !important;

    /* fallback solid color */
    background-color: rgb(var(--primary-rgb)) !important;

    /* gradient background for modern browsers */
    background: linear-gradient(
        180deg,
        rgba(var(--primary-rgb), 0.12) 0%,
        rgba(var(--primary-dark-rgb), 0.2) 100%
    ) !important;
}

/* Active hover/focus states */
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: linear-gradient(
        180deg,
        rgba(var(--primary-rgb), 0.16) 0%,
        rgba(var(--primary-dark-rgb), 0.26) 100%
    ) !important;
    border-color: rgba(var(--primary-dark-rgb), 0.45) !important;
}

/* Normal hover for non-active items */
.list-group-item:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
}

/* Minimal CSS: only for the left gradient rail positioning/size */
.email-row {
    position: relative;
}
.email-row .rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0.25rem;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 0.5rem;
}

/* Base nav link */
.nav-pills .nav-link {
    color: var(--ink-700);
    background-color: transparent;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

/* Hover */
.nav-pills .nav-link:hover {
    color: rgb(var(--primary-rgb));
    background-color: rgba(var(--primary-rgb), 0.1);
}

/* Active state */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--white);
    background-color: rgb(var(--primary-rgb));
}

/* Optional: focus ring for accessibility */
.nav-pills .nav-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Custom small nav-pills */
.nav-pills-sm .nav-link {
    padding: 0.25rem 0.5rem;   /* smaller padding */
    font-size: 0.75rem;        /* smaller text */
    border-radius: 0.25rem;    /* keep pill shape */
}

.nav-pills-sm .nav-link i {
    font-size: 0.85em;         /* scale down icons slightly */
}

/* Make the editor look native in your card */
  .quill-wrapper { display:flex; flex-direction:column; gap:.5rem; }
  .ql-container { min-height:12rem; }
  .ql-toolbar.ql-snow { border-radius:.375rem; }
  .ql-container.ql-snow { border-radius:.375rem; }
  .ql-editor { font-size: .95rem; }
  /* Disabled look when message was pushed */
  .ql-container[aria-disabled="true"] .ql-editor { background: #f8f9fa; }