/*
 * SocialNet Backend Theme Customizations
 * Works with Bootstrap 5.3+ data-bs-theme attribute
 * ONLY applies to backend/admin pages (uses .backend-theme class)
 */

/* ============================================================================
   Backend Theme Wrapper - All styles scoped to .backend-theme
   ============================================================================ */

/* ============================================================================
   Light Mode - Pastel Cards with Darker Borders (Backend Only)
   Soft, professional look with pastel backgrounds and contrast borders
   ============================================================================ */

/* Danger/Red cards - soft pastel pink with dark red border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-danger,
[data-bs-theme="light"] .backend-theme .bg-danger:not(.badge) {
    background-color: #fce4e6 !important; /* Soft pastel pink */
    border: 2px solid #c9444d !important; /* Dark red border */
}

[data-bs-theme="light"] .backend-theme .card.bg-danger .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-danger {
    background-color: #f8d0d3 !important;
    border-bottom: 1px solid #c9444d !important;
}

/* Override text-white class in danger cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-danger:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-danger:not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-danger h1,
[data-bs-theme="light"] .backend-theme .bg-danger h2,
[data-bs-theme="light"] .backend-theme .bg-danger h3,
[data-bs-theme="light"] .backend-theme .bg-danger h4,
[data-bs-theme="light"] .backend-theme .bg-danger h5,
[data-bs-theme="light"] .backend-theme .bg-danger p,
[data-bs-theme="light"] .backend-theme .bg-danger small,
[data-bs-theme="light"] .backend-theme .bg-danger i,
[data-bs-theme="light"] .backend-theme .bg-danger .bi,
[data-bs-theme="light"] .backend-theme .bg-danger .card-title,
[data-bs-theme="light"] .backend-theme .bg-danger .card-text,
[data-bs-theme="light"] .backend-theme .bg-danger .display-6 {
    color: #5a1018 !important; /* Dark red for all text */
}

/* Ensure badge icons (like pending delete) are visible - badge keeps Bootstrap white text */
[data-bs-theme="light"] .backend-theme .badge.bg-danger,
[data-bs-theme="light"] .backend-theme .badge.bg-danger i,
[data-bs-theme="light"] .backend-theme .badge.bg-danger .bi {
    background-color: #dc3545 !important; /* Keep Bootstrap danger red for badges */
    color: #fff !important; /* White text/icons for contrast */
    border: none !important;
}

/* Ensure other badge colors stay Bootstrap standard */
[data-bs-theme="light"] .backend-theme .badge.bg-success,
[data-bs-theme="light"] .backend-theme .badge.bg-success i,
[data-bs-theme="light"] .backend-theme .badge.bg-success .bi {
    background-color: #198754 !important;
    color: #fff !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-warning,
[data-bs-theme="light"] .backend-theme .badge.bg-warning i,
[data-bs-theme="light"] .backend-theme .badge.bg-warning .bi {
    background-color: #ffc107 !important;
    color: #000 !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-info,
[data-bs-theme="light"] .backend-theme .badge.bg-info i,
[data-bs-theme="light"] .backend-theme .badge.bg-info .bi {
    background-color: #0dcaf0 !important;
    color: #000 !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-primary,
[data-bs-theme="light"] .backend-theme .badge.bg-primary i,
[data-bs-theme="light"] .backend-theme .badge.bg-primary .bi {
    background-color: #0d6efd !important;
    color: #fff !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-secondary,
[data-bs-theme="light"] .backend-theme .badge.bg-secondary i,
[data-bs-theme="light"] .backend-theme .badge.bg-secondary .bi {
    background-color: #6c757d !important;
    color: #fff !important;
    border: none !important;
}

/* Warning/Yellow cards - soft pastel yellow with dark amber border */
[data-bs-theme="light"] .backend-theme .card.bg-warning,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) {
    background-color: #fff8e1 !important; /* Soft pastel yellow */
    border: 2px solid #b8860b !important; /* Dark goldenrod border */
}

[data-bs-theme="light"] .backend-theme .card.bg-warning .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-warning {
    background-color: #ffecb3 !important;
    border-bottom: 1px solid #b8860b !important;
}

/* Override text-dark class in warning cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .text-dark,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .display-6 {
    color: #4a3a0f !important; /* Dark brown for all text */
}

/* Success/Green cards - soft pastel green with dark green border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-success,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) {
    background-color: #e8f5e9 !important; /* Soft pastel green */
    border: 2px solid #2e7d3a !important; /* Dark green border */
}

[data-bs-theme="light"] .backend-theme .card.bg-success .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-success {
    background-color: #c8e6c9 !important;
    border-bottom: 1px solid #2e7d3a !important;
}

/* Override text-white class in success cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .display-6 {
    color: #0a3d24 !important; /* Dark green for all text */
}

/* Info/Cyan cards - soft pastel cyan with dark teal border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-info,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) {
    background-color: #e0f7fa !important; /* Soft pastel cyan */
    border: 2px solid #0097a7 !important; /* Dark teal border */
}

[data-bs-theme="light"] .backend-theme .card.bg-info .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-info {
    background-color: #b2ebf2 !important;
    border-bottom: 1px solid #0097a7 !important;
}

/* Override text-white class in info cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .display-6 {
    color: #044048 !important; /* Dark teal for all text */
}

/* Primary/Blue cards - soft pastel blue with dark blue border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-primary,
[data-bs-theme="light"] .backend-theme .bg-primary:not(.badge) {
    background-color: #e3f2fd !important; /* Soft pastel blue */
    border: 2px solid #1565c0 !important; /* Dark blue border */
    color: #084298 !important;
}

[data-bs-theme="light"] .backend-theme .card.bg-primary .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-primary {
    background-color: #bbdefb !important;
    border-bottom: 1px solid #1565c0 !important;
    color: #084298 !important;
}

/* Secondary/Gray cards - soft light gray with dark gray border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-secondary,
[data-bs-theme="light"] .backend-theme .bg-secondary:not(.badge) {
    background-color: #f5f5f5 !important; /* Soft light gray */
    border: 2px solid #5a6268 !important; /* Dark gray border */
    color: #41464b !important;
}

[data-bs-theme="light"] .backend-theme .card.bg-secondary .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-secondary {
    background-color: #e0e0e0 !important;
    border-bottom: 1px solid #5a6268 !important;
    color: #41464b !important;
}

/* Dark cards - soft light gray with dark charcoal border (for SuperAdmins box etc) */
/* EXCLUDE navbar and badges from this styling - navbar should stay dark with white text */
[data-bs-theme="light"] .backend-theme .card.bg-dark,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) {
    background-color: #e8e8e8 !important; /* Light gray background */
    border: 2px solid #343a40 !important; /* Dark charcoal border */
}

[data-bs-theme="light"] .backend-theme .card.bg-dark .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-dark {
    background-color: #d8d8d8 !important;
    border-bottom: 1px solid #343a40 !important;
}

/* Override text-white class in dark cards for proper contrast on light bg */
/* EXCLUDE navbar and badges - they should keep white text */
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge),
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .display-6 {
    color: #1a1a1a !important; /* Very dark text for readability */
}

/* Ensure navbar stays dark with proper text colors in light mode */
[data-bs-theme="light"] .backend-theme .navbar.bg-dark {
    background-color: #212529 !important; /* Keep Bootstrap's dark navbar color */
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .navbar.bg-dark .navbar-brand,
[data-bs-theme="light"] .backend-theme .navbar.bg-dark .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-bs-theme="light"] .backend-theme .navbar.bg-dark .nav-link:hover {
    color: #fff !important;
}

/* ============================================================================
   Dark Mode Color Palette (Backend Only)
   Using lighter, more pleasant dark colors
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme {
    /* Match the Template Management aesthetic: a deep navy gradient backdrop
       with translucent "glass" surfaces on top. Applied to <body> (the
       .backend-theme class lives there), fixed so it covers the viewport. */
    --bs-body-bg: #16213e;            /* Fallback solid (mid-stop of the gradient) */
    --bs-body-color: #e4e6eb;         /* Light text for readability */
    --bs-secondary-bg: rgba(255, 255, 255, 0.05);
    --bs-tertiary-bg: rgba(255, 255, 255, 0.08);
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

    /* Link colors for dark mode */
    --bs-link-color: #a5b4fc;
    --bs-link-hover-color: #c7d2fe;

    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* ============================================================================
   Card Styling (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .backend-theme .card-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .card-body {
    background-color: transparent;
}

[data-bs-theme="dark"] .backend-theme .card-footer {
    background-color: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   Colored Cards - Pastel/Muted for Dark Mode
   ============================================================================ */

/* Danger/Red cards - muted pastel red */
[data-bs-theme="dark"] .backend-theme .card.bg-danger,
[data-bs-theme="dark"] .backend-theme .card.border-danger,
[data-bs-theme="dark"] .backend-theme .bg-danger {
    background-color: #4a2c2f !important; /* Muted dark red */
    border-color: #6b3a3d !important;
    color: #f0b8bc !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-danger .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-danger .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-danger {
    background-color: #5c3538 !important;
    border-color: #6b3a3d !important;
    color: #f0b8bc !important;
}

/* Warning/Yellow cards - muted pastel yellow */
[data-bs-theme="dark"] .backend-theme .card.bg-warning,
[data-bs-theme="dark"] .backend-theme .card.border-warning,
[data-bs-theme="dark"] .backend-theme .bg-warning {
    background-color: #4a4428 !important; /* Muted dark yellow/amber */
    border-color: #6b6438 !important;
    color: #f0e6a8 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-warning .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-warning .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-warning {
    background-color: #5c5430 !important;
    border-color: #6b6438 !important;
    color: #f0e6a8 !important;
}

/* Success/Green cards - muted pastel green */
[data-bs-theme="dark"] .backend-theme .card.bg-success,
[data-bs-theme="dark"] .backend-theme .card.border-success,
[data-bs-theme="dark"] .backend-theme .bg-success {
    background-color: #2a4a3a !important; /* Muted dark green */
    border-color: #3a6b4d !important;
    color: #a8f0c4 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-success .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-success .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-success {
    background-color: #325c44 !important;
    border-color: #3a6b4d !important;
    color: #a8f0c4 !important;
}

/* Info/Cyan cards - muted pastel cyan */
[data-bs-theme="dark"] .backend-theme .card.bg-info,
[data-bs-theme="dark"] .backend-theme .card.border-info,
[data-bs-theme="dark"] .backend-theme .bg-info {
    background-color: #284a4a !important; /* Muted dark cyan */
    border-color: #386b6b !important;
    color: #a8f0f0 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-info .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-info .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-info {
    background-color: #305c5c !important;
    border-color: #386b6b !important;
    color: #a8f0f0 !important;
}

/* Primary/Blue cards - muted pastel blue */
[data-bs-theme="dark"] .backend-theme .card.bg-primary,
[data-bs-theme="dark"] .backend-theme .card.border-primary {
    background-color: #2a3a5c !important; /* Muted dark blue */
    border-color: #3a4d7a !important;
    color: #a8c4f0 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-primary .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-primary .card-header {
    background-color: #32446b !important;
    border-color: #3a4d7a !important;
    color: #a8c4f0 !important;
}

/* ============================================================================
   Table Styling (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e4e6eb;
    --bs-table-border-color: rgba(255, 255, 255, 0.1);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .backend-theme .table thead th {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

/* ============================================================================
   Light utility neutralization (Backend Dark Mode)
   ----------------------------------------------------------------------------
   Many admin views hardcode bg-white / bg-light / text-dark / table-light /
   bg-body utilities. Without these overrides they render as bright patches on
   the dark backend pages. Remap them to the dark palette so the whole surface
   stays consistent. Light backend mode leaves the utilities untouched.
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .bg-white,
[data-bs-theme="dark"] .backend-theme .bg-light,
[data-bs-theme="dark"] .backend-theme .bg-body,
[data-bs-theme="dark"] .backend-theme .bg-body-tertiary,
[data-bs-theme="dark"] .backend-theme .bg-body-secondary {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #e4e6eb !important;
}

[data-bs-theme="dark"] .backend-theme .text-dark,
[data-bs-theme="dark"] .backend-theme .text-body,
[data-bs-theme="dark"] .backend-theme .text-black {
    color: #e4e6eb !important;
}

[data-bs-theme="dark"] .backend-theme .text-muted,
[data-bs-theme="dark"] .backend-theme .text-body-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* table-light header/rows: Bootstrap drives these via CSS vars on the element */
[data-bs-theme="dark"] .backend-theme .table-light,
[data-bs-theme="dark"] .backend-theme thead.table-light th,
[data-bs-theme="dark"] .backend-theme tr.table-light,
[data-bs-theme="dark"] .backend-theme .table-light th,
[data-bs-theme="dark"] .backend-theme .table-light td {
    --bs-table-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: rgba(255, 255, 255, 0.6);
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================================
   Form Controls (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .form-control,
[data-bs-theme="dark"] .backend-theme .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

[data-bs-theme="dark"] .backend-theme .form-control:focus,
[data-bs-theme="dark"] .backend-theme .form-select:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.2);
    color: #fff;
}

[data-bs-theme="dark"] .backend-theme .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

[data-bs-theme="dark"] .backend-theme .form-control:disabled,
[data-bs-theme="dark"] .backend-theme .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.04);
    opacity: 0.7;
}

/* Input groups */
[data-bs-theme="dark"] .backend-theme .input-group-text {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

/* The native <option> popup can't use the select's translucent background, so
   it falls back to white — light option text then becomes invisible. Pin
   options to an opaque dark colour so the dropdown list is readable. */
[data-bs-theme="dark"] .backend-theme select option,
[data-bs-theme="dark"] .backend-theme .form-select option,
[data-bs-theme="dark"] .backend-theme .form-control option {
    background-color: #1e2738;
    color: #e4e6eb;
}

/* ============================================================================
   Button Styling (Backend Dark Mode)
   ============================================================================ */

/* Primary buttons: a single vibrant violet across all backend pages. The
   accent-colour cascade was leaving some primary buttons washed out (e.g. the
   API Clients list "Create" button); this pins them to the SuperAdmin violet
   used elsewhere in the theme so they're consistent and clearly legible. */
[data-bs-theme="dark"] .backend-theme .btn-primary {
    --bs-btn-bg: #7c3aed;
    --bs-btn-border-color: #7c3aed;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #6d28d9;
    --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #6d28d9;
    --bs-btn-active-border-color: #6d28d9;
    --bs-btn-active-color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: none;
    color: #fff;
}

/* Outline buttons - visible borders in dark mode */
[data-bs-theme="dark"] .backend-theme .btn-outline-primary {
    --bs-btn-color: #8ab4f8;
    --bs-btn-border-color: #3a4d7a;
    --bs-btn-hover-bg: #2a3a5c;
    --bs-btn-hover-border-color: #4a5d8a;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #3a4d7a;
    --bs-btn-active-border-color: #4a5d8a;
    --bs-btn-active-color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-secondary {
    --bs-btn-color: #a0aec0;
    --bs-btn-border-color: #4a5568;
    --bs-btn-hover-bg: #4a5568;
    --bs-btn-hover-border-color: #5a6678;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #5a6678;
    --bs-btn-active-border-color: #6a7688;
    --bs-btn-active-color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-success {
    --bs-btn-color: #75d9a3;
    --bs-btn-border-color: #3a6b4d;
    --bs-btn-hover-bg: #3a6b4d;
    --bs-btn-hover-border-color: #4a7b5d;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #4a7b5d;
    --bs-btn-active-border-color: #5a8b6d;
    --bs-btn-active-color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-danger {
    --bs-btn-color: #ea868f;
    --bs-btn-border-color: #6b3a3d;
    --bs-btn-hover-bg: #6b3a3d;
    --bs-btn-hover-border-color: #7b4a4d;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #7b4a4d;
    --bs-btn-active-border-color: #8b5a5d;
    --bs-btn-active-color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-warning {
    --bs-btn-color: #ffda6a;
    --bs-btn-border-color: #6b6438;
    --bs-btn-hover-bg: #6b6438;
    --bs-btn-hover-border-color: #7b7448;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #7b7448;
    --bs-btn-active-border-color: #8b8458;
    --bs-btn-active-color: #000;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-info {
    --bs-btn-color: #6edff6;
    --bs-btn-border-color: #386b6b;
    --bs-btn-hover-bg: #386b6b;
    --bs-btn-hover-border-color: #487b7b;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #487b7b;
    --bs-btn-active-border-color: #588b8b;
    --bs-btn-active-color: #000;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-light {
    --bs-btn-color: #e4e6eb;
    --bs-btn-border-color: #4a5568;
    --bs-btn-hover-bg: #4a5568;
    --bs-btn-hover-border-color: #5a6678;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5a6678;
    --bs-btn-active-border-color: #6a7688;
    --bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-dark {
    --bs-btn-color: #a0aec0;
    --bs-btn-border-color: #6a7688;
    --bs-btn-hover-bg: #323d4d;
    --bs-btn-hover-border-color: #7a8698;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #3d4a5c;
    --bs-btn-active-border-color: #8a96a8;
    --bs-btn-active-color: #e4e6eb;
}

/* Disabled buttons - visible with muted styling */
[data-bs-theme="dark"] .backend-theme .btn:disabled,
[data-bs-theme="dark"] .backend-theme .btn.disabled {
    background-color: #2a3441;
    border-color: #3d4a5c;
    color: #6c757d;
    opacity: 0.65;
}

/* Disabled outline buttons should still show border */
[data-bs-theme="dark"] .backend-theme .btn-outline-primary:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-secondary:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-success:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-danger:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-warning:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-info:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-light:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-dark:disabled {
    background-color: transparent;
    border-color: #4a5568;
    color: #6c757d;
}

/* Secondary button (solid) in dark mode */
[data-bs-theme="dark"] .backend-theme .btn-secondary {
    --bs-btn-bg: #4a5568;
    --bs-btn-border-color: #5a6678;
    --bs-btn-color: #e4e6eb;
    --bs-btn-hover-bg: #5a6678;
    --bs-btn-hover-border-color: #6a7688;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #6a7688;
    --bs-btn-active-border-color: #7a8698;
}

/* Light button in dark mode - make it visible */
[data-bs-theme="dark"] .backend-theme .btn-light {
    --bs-btn-bg: #3d4a5c;
    --bs-btn-border-color: #4a5568;
    --bs-btn-color: #e4e6eb;
    --bs-btn-hover-bg: #4a5568;
    --bs-btn-hover-border-color: #5a6678;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5a6678;
    --bs-btn-active-border-color: #6a7688;
}

/* Dark button in dark mode */
[data-bs-theme="dark"] .backend-theme .btn-dark {
    --bs-btn-bg: #1e2530;
    --bs-btn-border-color: #3d4a5c;
    --bs-btn-color: #e4e6eb;
    --bs-btn-hover-bg: #2a3441;
    --bs-btn-hover-border-color: #4a5568;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #323d4d;
    --bs-btn-active-border-color: #5a6678;
}

/* ============================================================================
   Navbar (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .navbar-dark,
[data-bs-theme="dark"] .backend-theme .navbar.bg-dark {
    background-color: #1a1f2a !important;
    border-bottom: 1px solid #2a3441;
}

/* ============================================================================
   Alerts (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.25);
    color: #6edff6;
}

[data-bs-theme="dark"] .backend-theme .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.25);
    color: #75d9a3;
}

[data-bs-theme="dark"] .backend-theme .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.25);
    color: #ffda6a;
}

[data-bs-theme="dark"] .backend-theme .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.25);
    color: #ea868f;
}

/* ============================================================================
   List Groups (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .list-group-item {
    background-color: #2a3441;
    border-color: #3d4a5c;
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .list-group-item:hover {
    background-color: #323d4d;
}

[data-bs-theme="dark"] .backend-theme .list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ============================================================================
   Modal (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .modal-content {
    background-color: #2a3441;
    border: 1px solid #3d4a5c;
}

[data-bs-theme="dark"] .backend-theme .modal-header {
    background-color: #323d4d;
    border-bottom: 1px solid #3d4a5c;
}

[data-bs-theme="dark"] .backend-theme .modal-footer {
    background-color: #323d4d;
    border-top: 1px solid #3d4a5c;
}

/* ============================================================================
   Dropdown (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .dropdown-menu {
    background-color: #2a3441;
    border-color: #3d4a5c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .backend-theme .dropdown-item {
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .dropdown-item:hover,
[data-bs-theme="dark"] .backend-theme .dropdown-item:focus {
    background-color: #323d4d;
    color: #fff;
}

[data-bs-theme="dark"] .backend-theme .dropdown-divider {
    border-color: #3d4a5c;
}

/* ============================================================================
   Pagination (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .page-link {
    background-color: #2a3441;
    border-color: #3d4a5c;
    color: #6ea8fe;
}

[data-bs-theme="dark"] .backend-theme .page-link:hover {
    background-color: #323d4d;
    border-color: #4a5568;
    color: #9ec5fe;
}

[data-bs-theme="dark"] .backend-theme .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .backend-theme .page-item.disabled .page-link {
    background-color: #1e2530;
    border-color: #3d4a5c;
    color: #6c757d;
}

/* ============================================================================
   Badges (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .badge.bg-light {
    background-color: #e4e6eb !important;
    color: #1e2530 !important;
}

[data-bs-theme="dark"] .backend-theme .badge.bg-secondary {
    background-color: #4a5568 !important;
}

/* ============================================================================
   Progress Bars (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .progress {
    background-color: #1e2530;
}

/* ============================================================================
   Breadcrumb (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .breadcrumb {
    background-color: #2a3441;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
}

[data-bs-theme="dark"] .backend-theme .breadcrumb-item a {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .backend-theme .breadcrumb-item.active {
    color: #a0aec0;
}

/* ============================================================================
   Footer (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme footer {
    color: #6c757d;
}

[data-bs-theme="dark"] .backend-theme footer a {
    color: #6ea8fe;
}

/* ============================================================================
   Custom Container Styling (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .body-content {
    padding-top: 1rem;
}

[data-bs-theme="dark"] .backend-theme hr {
    border-color: #3d4a5c;
    opacity: 0.5;
}

/* ============================================================================
   Accent Color Variables (Backend Only)
   ============================================================================ */

/* Default accent: Blue */
.backend-theme {
    --accent-color: var(--bs-primary);
    --accent-color-rgb: var(--bs-primary-rgb);
}

/* Blue accent (default) */
.backend-theme.accent-blue {
    --accent-color: #0d6efd;
    --accent-color-rgb: 13, 110, 253;
}

/* Green accent */
.backend-theme.accent-green {
    --accent-color: #198754;
    --accent-color-rgb: 25, 135, 84;
}

/* Purple accent */
.backend-theme.accent-purple {
    --accent-color: #6f42c1;
    --accent-color-rgb: 111, 66, 193;
}

/* Orange accent */
.backend-theme.accent-orange {
    --accent-color: #fd7e14;
    --accent-color-rgb: 253, 126, 20;
}

/* Red accent */
.backend-theme.accent-red {
    --accent-color: #dc3545;
    --accent-color-rgb: 220, 53, 69;
}

/* Teal accent */
.backend-theme.accent-teal {
    --accent-color: #20c997;
    --accent-color-rgb: 32, 201, 151;
}

/* Apply accent color to primary buttons (backend only) */
.backend-theme.accent-green .btn-primary,
.backend-theme.accent-purple .btn-primary,
.backend-theme.accent-orange .btn-primary,
.backend-theme.accent-red .btn-primary,
.backend-theme.accent-teal .btn-primary {
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-color) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--accent-color) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent-color) 80%, black);
}

/* Orange and teal need dark text */
.backend-theme.accent-orange .btn-primary,
.backend-theme.accent-teal .btn-primary {
    --bs-btn-color: #000;
}

/* Primary-button LABEL contrast fix (backend).
   These buttons are frequently <a class="btn btn-primary"> / <a class="btn btn-hub-primary">
   (Dashboard cards, "Add Domain", "Add Hub Site", etc.) sitting on a solid purple fill. In dark
   mode `--bs-link-color: #a5b4fc` (the faint lavender) flows onto the anchor and washes the label
   out against the fill. Pin the label color directly with enough weight to win, so the fill keeps
   its solid accent color and the text stays high-contrast. White on every accent except the
   light orange/teal fills, which take black. */
.backend-theme .btn-primary,
.backend-theme a.btn-primary,
.backend-theme .btn-primary:hover,
.backend-theme a.btn-primary:hover,
.backend-theme .btn-primary:focus,
.backend-theme a.btn-primary:focus,
.backend-theme .btn-hub-primary,
.backend-theme a.btn-hub-primary,
.backend-theme .btn-hub-primary:hover,
.backend-theme a.btn-hub-primary:hover,
.backend-theme .btn-hub-primary:focus,
.backend-theme a.btn-hub-primary:focus {
    color: #fff !important;
}
.backend-theme.accent-orange .btn-primary,
.backend-theme.accent-orange a.btn-primary,
.backend-theme.accent-teal .btn-primary,
.backend-theme.accent-teal a.btn-primary {
    color: #000 !important;
}

/* ============================================================================
   Smooth Theme Transitions
   ============================================================================ */

/* Transition for theme changes - only after initial load */
html.theme-loaded .backend-theme,
html.theme-loaded .backend-theme *,
html.theme-loaded .backend-theme *::before,
html.theme-loaded .backend-theme *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Disable transitions on page load to prevent flash */
html:not(.theme-loaded) .backend-theme * {
    transition: none !important;
}

/* ============================================================================
   Sidebar Collapsed State
   ============================================================================ */

.backend-theme.sidebar-collapsed .sidebar {
    width: 60px;
}

.backend-theme.sidebar-collapsed .sidebar .nav-text {
    display: none;
}

.backend-theme.sidebar-collapsed .main-content {
    margin-left: 60px;
}

/* =============================================================================
   Account pages — Hub 2026 dark-glass skin (generic Bootstrap markup).
   _Layout adds body.sn-account-page to EVERY /Account/* page. Login + Register
   carry the richer .sn-auth-* treatment (site.css); the other ~18 account views
   (RequestInvite, ForgotPassword, RegistrationDisabled, ResetPassword, the
   confirmation pages, etc.) use plain Bootstrap (.card/.form-control/.btn) — this
   block darkens those consistently. Appended at the END of theme.css so it wins
   over the earlier body.backend-theme rules at equal specificity. Scoped to
   .sn-account-page, so dashboard/admin are untouched.
   ============================================================================= */
body.sn-account-page {
    --a-accent: #7c3aed; --a-accent-2: #22d3ee;
    --a-surface: #10131c; --a-surface-2: #161a26;
    --a-field: rgba(0, 0, 0, .3);
    --a-line: rgba(255, 255, 255, .10); --a-line-2: rgba(255, 255, 255, .14);
    --a-text: #f1f3f9; --a-text-2: #aab2c5; --a-text-3: #6f7891;
}
/* Dark page background for anonymous registrants (authed users keep the
   backend-theme navy, which is already dark). A FIXED full-viewport ::before
   layer carries the accent glows + dot mesh so the background never bands as the
   page height changes (the earlier non-fixed gradient banded on tall pages). */
body.sn-account-page:not(.backend-theme) {
    background: #0a0c14;
    color: var(--a-text);
    min-height: 100vh;
}
body.sn-account-page:not(.backend-theme)::before {
    content: "";
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(900px 600px at 78% -8%, rgba(124, 58, 237, .16), transparent 60%),
        radial-gradient(800px 560px at 8% 4%, rgba(34, 211, 238, .10), transparent 55%),
        #0a0c14;
}
body.sn-account-page:not(.backend-theme)::after {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
body.sn-account-page h1, body.sn-account-page h2,
body.sn-account-page h3, body.sn-account-page h4 { color: var(--a-text); }
body.sn-account-page p, body.sn-account-page label, body.sn-account-page .form-label { color: var(--a-text-2); }
body.sn-account-page .text-body-secondary,
body.sn-account-page .form-text,
body.sn-account-page .text-muted { color: var(--a-text-3) !important; }
body.sn-account-page a:not(.btn) { color: var(--a-accent-2); }

/* Card */
body.sn-account-page .card {
    background: var(--a-surface-2);
    border: 1px solid var(--a-line);
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7);
}
body.sn-account-page .card-body { background: transparent; }

/* Fields */
body.sn-account-page .form-control,
body.sn-account-page .form-select,
body.sn-account-page textarea.form-control {
    background-color: var(--a-field);
    border: 1px solid var(--a-line-2);
    color: var(--a-text);
}
body.sn-account-page .form-control::placeholder { color: var(--a-text-3); }
body.sn-account-page .form-control:focus,
body.sn-account-page .form-select:focus {
    background-color: var(--a-field);
    border-color: var(--a-accent);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .25);
    color: var(--a-text);
}
body.sn-account-page .form-control:-webkit-autofill,
body.sn-account-page .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--a-text);
    -webkit-box-shadow: 0 0 0 1000px #0d0f17 inset;
    box-shadow: 0 0 0 1000px #0d0f17 inset;
    caret-color: var(--a-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* Buttons */
body.sn-account-page .btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 100%), var(--a-accent);
    border-color: var(--a-accent);
    color: #fff;
}
body.sn-account-page .btn-primary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, transparent 100%), var(--a-accent);
    border-color: var(--a-accent);
}
body.sn-account-page .btn-outline-secondary {
    background: rgba(255, 255, 255, .04); border-color: var(--a-line-2); color: var(--a-text-2);
}
body.sn-account-page .btn-outline-secondary:hover { background: rgba(255, 255, 255, .08); color: var(--a-text); }
body.sn-account-page .btn-outline-primary { color: var(--a-accent-2); border-color: var(--a-line-2); }
body.sn-account-page .btn-link { color: var(--a-accent-2); }

/* Checkbox */
body.sn-account-page .form-check-input { background-color: var(--a-field); border-color: var(--a-line-2); }
body.sn-account-page .form-check-input:checked { background-color: var(--a-accent); border-color: var(--a-accent); }

/* Alerts */
body.sn-account-page .alert-info { background: rgba(34, 211, 238, .10); border: 1px solid rgba(34, 211, 238, .35); color: var(--a-accent-2); }
body.sn-account-page .alert-success { background: rgba(34, 197, 94, .10); border: 1px solid rgba(34, 197, 94, .35); color: #4ade80; }
body.sn-account-page .alert-danger { background: rgba(239, 68, 68, .10); border: 1px solid rgba(239, 68, 68, .38); color: #f87171; }
body.sn-account-page .alert-warning { background: rgba(245, 158, 11, .10); border: 1px solid rgba(245, 158, 11, .38); color: #fbbf24; }
body.sn-account-page hr { border-color: var(--a-line); opacity: 1; }
body.sn-account-page code { background: rgba(255, 255, 255, .06); color: var(--a-accent-2); padding: 2px 6px; border-radius: 6px; }

/* Anonymous account-page chrome (branded topbar + footer) rendered by _Layout's
   else-if (controllerName == "account") branch. Gives the otherwise chrome-less
   anonymous account pages a header logo + "Powered by" footer. */
body.sn-account-page .sn-auth-shell { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
body.sn-account-page .sn-auth-topbar { display: flex; justify-content: center; padding: 26px 20px 4px; }
body.sn-account-page .sn-auth-shell-body { flex: 1 0 auto; padding: 8px 16px; }
body.sn-account-page .sn-auth-brand {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    color: var(--a-text); font-weight: 700; font-size: 20px; letter-spacing: -.02em;
}
body.sn-account-page .sn-auth-brand .mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(140deg, var(--a-accent) 0%, var(--a-accent-2) 100%);
    display: grid; place-items: center; color: #fff; font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
body.sn-account-page .sn-auth-brand .net {
    background: linear-gradient(100deg, var(--a-accent) 0%, var(--a-accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.sn-account-page .sn-auth-bottombar {
    flex-shrink: 0; text-align: center; padding: 22px 20px 30px;
    color: var(--a-text-3); font-size: 13px; font-family: var(--h26-font-mono, ui-monospace, monospace);
}
body.sn-account-page .sn-auth-bottombar strong { color: var(--a-text-2); font-weight: 600; }
/* Login/Register center their card; trim the baked-in min-height so it fits the
   shell between the new topbar + footer without overflowing. */
body.sn-account-page .sn-auth-shell-body .sn-auth-container { min-height: auto; padding-top: 28px; padding-bottom: 28px; }