/* ══════════════════════════════════════════════════════════════
   Spam Can't Win — Admin Dark Theme Override
   Matches the front-end dark/green aesthetic
   ══════════════════════════════════════════════════════════════ */

/* ── 1. CSS Variable Overrides ─────────────────────────────── */
:root {
    --primary_color: #00E676;
    --primary_opacity: rgba(0, 230, 118, 0.12);
    --secondary_color: #00C865;
    --sidebar_background_color: #0d1117;
    --cards_background_color: #151b23;
    --elements_text_color: #c9d1d9;
    --text_color: #f0f2f5;
    --text_muted: #8b949e;
    --background_color: #0a0e14;
    --success_color: #00E676;
    --star_color: #ffd023;
    --border_color: #21262d;
    --font_size: 14px;
}

/* ── 2. Global Base ────────────────────────────────────────── */
body {
    background-color: var(--background_color) !important;
    color: var(--text_color) !important;
}

a { color: var(--primary_color); }
a:hover { color: var(--secondary_color); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text_color) !important;
}

p { color: var(--elements_text_color); }
label { color: var(--elements_text_color) !important; }
small, .text-muted { color: var(--text_muted) !important; }
.text-dark { color: var(--text_color) !important; }

hr { border-color: var(--border_color); }

::selection {
    background-color: var(--primary_color);
    color: #000;
}

/* ── 3. Buttons ────────────────────────────────────────────── */
.btn.btn-primary {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
    color: #000 !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
    color: #000 !important;
}

.btn.btn-secondary {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: var(--elements_text_color) !important;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active {
    background-color: #30363d !important;
    border-color: #484f58 !important;
    color: var(--text_color) !important;
}

.btn-outline-primary {
    color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary_color) !important;
    color: #000 !important;
}

.btn-light {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: var(--elements_text_color) !important;
}

.btn-danger {
    background-color: #da3633 !important;
    border-color: #da3633 !important;
}

.btn-success {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
    color: #000 !important;
}

.btn-warning {
    background-color: #d29922 !important;
    border-color: #d29922 !important;
    color: #000 !important;
}

/* ── 4. Forms & Inputs ─────────────────────────────────────── */
.form-control {
    background-color: #0d1117 !important;
    border-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.form-control:focus {
    border-color: var(--primary_color) !important;
    box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.15) !important;
    background-color: #0d1117 !important;
    color: var(--text_color) !important;
}
.form-control::placeholder {
    color: var(--text_muted) !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: #161b22 !important;
    color: var(--text_muted) !important;
}

.form-select {
    background-color: #0d1117 !important;
    border-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.form-select:focus {
    border-color: var(--primary_color) !important;
    box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.15) !important;
}

.form-check-input {
    background-color: #21262d !important;
    border-color: #30363d !important;
}
.form-check-input:checked {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
}
.form-check-label { color: var(--elements_text_color); }

.input-group-text {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
    color: var(--text_muted) !important;
}

textarea.form-control {
    background-color: #0d1117 !important;
    color: var(--text_color) !important;
}

.select-input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #0d1117 !important;
    border-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text_color) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary_color) !important;
    color: #000 !important;
}
.select2-dropdown {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
}
.select2-results__option {
    color: var(--elements_text_color) !important;
}
.select2-search__field {
    background-color: #0d1117 !important;
    color: var(--text_color) !important;
    border-color: var(--border_color) !important;
}

.bootstrap-tagsinput {
    background-color: #0d1117 !important;
    border-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.bootstrap-tagsinput .badge {
    background-color: var(--primary_opacity) !important;
    color: var(--primary_color) !important;
}

/* ── 5. Dashboard Sidebar ──────────────────────────────────── */
.dashboard-sidebar {
    background-color: var(--sidebar_background_color);
    color: var(--elements_text_color);
}

.dashboard-sidebar .dashboard-sidebar-header {
    background-color: var(--sidebar_background_color) !important;
    border-right-color: var(--border_color) !important;
    border-bottom-color: var(--border_color) !important;
}

.dashboard-sidebar .dashboard-sidebar-inner {
    background-color: var(--sidebar_background_color) !important;
    border-right-color: var(--border_color) !important;
}

.dashboard-sidebar-links-title {
    color: var(--text_muted) !important;
}

.dashboard-sidebar-link .dashboard-sidebar-link-title {
    color: var(--elements_text_color) !important;
}
.dashboard-sidebar-link .dashboard-sidebar-link-title:hover {
    color: var(--text_color) !important;
}
.dashboard-sidebar-link .dashboard-sidebar-link-title:hover::before {
    background-color: var(--primary_color) !important;
}

.dashboard-sidebar-link.current .dashboard-sidebar-link-title {
    color: var(--primary_color) !important;
}
.dashboard-sidebar-link.current .dashboard-sidebar-link-title::before {
    background-color: var(--primary_color) !important;
}

.dashboard-sidebar-footer {
    border-top-color: var(--border_color) !important;
}

.dashboard-sidebar-badge {
    background-color: #da3633 !important;
    color: #fff !important;
}

.dashboard-sidebar-card {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
}

.dashboard-sidebar .logo img {
    height: 36px;
}

/* Login page logo */
.sign-page .logo.logo-sm {
    height: auto;
}
.sign-page .logo.logo-sm img {
    height: 50px;
    width: 220px;
    object-fit: contain;
}

/* ── 6. Dashboard Nav (Top Bar) ────────────────────────────── */
.dashboard-nav {
    background-color: #0d1117 !important;
    border-bottom-color: var(--border_color) !important;
}

.dashboard-welcome-message {
    color: var(--text_color) !important;
}

.dashboard-btn {
    color: var(--text_muted) !important;
}

.nav-icon {
    color: var(--text_muted) !important;
}
.nav-icon:hover {
    color: var(--text_color) !important;
}

.badge-noti {
    background-color: var(--primary_color) !important;
    color: #000 !important;
}

/* ── 7. Dashboard Body & Container ─────────────────────────── */
.dashboard-body {
    background-color: var(--background_color);
}

.dashboard-container {
    background-color: var(--background_color);
}

/* ── 8. Dashboard Footer ───────────────────────────────────── */
.dashboard-footer {
    background-color: #0d1117 !important;
    color: var(--text_muted) !important;
    box-shadow: none !important;
    border-top: 1px solid var(--border_color);
}

/* ── 9. Cards & Boxes ──────────────────────────────────────── */
.box {
    background-color: var(--cards_background_color) !important;
    border-color: var(--border_color) !important;
    color: var(--text_color);
}

.box-custom .box-header {
    border-bottom-color: var(--border_color) !important;
}

.card {
    background-color: var(--cards_background_color) !important;
    border-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.card-body { color: var(--elements_text_color); }
.card-header {
    background-color: #161b22 !important;
    border-bottom-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.card-footer {
    background-color: #161b22 !important;
    border-top-color: var(--border_color) !important;
}

/* ── 10. Tables ────────────────────────────────────────────── */
.table {
    color: var(--elements_text_color) !important;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

.table th {
    color: var(--text_muted) !important;
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
}

.table td {
    border-color: var(--border_color) !important;
    color: var(--elements_text_color) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 230, 118, 0.04) !important;
    color: var(--text_color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ── 11. Dropdowns ─────────────────────────────────────────── */
.drop-down .drop-down-menu {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.drop-down .drop-down-menu .drop-down-item {
    color: var(--elements_text_color) !important;
}
.drop-down .drop-down-menu .drop-down-item:hover {
    background-color: #21262d !important;
    color: var(--text_color) !important;
}
.drop-down .drop-down-menu .drop-down-item.active {
    color: var(--primary_color) !important;
}

.drop-down .drop-down-divider {
    border-color: var(--border_color) !important;
}

.dropdown-menu {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
}
.dropdown-item {
    color: var(--elements_text_color) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #21262d !important;
    color: var(--text_color) !important;
}

/* ── 12. Modals ────────────────────────────────────────────── */
.modal-content {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.modal-header {
    border-bottom-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.modal-footer {
    border-top-color: var(--border_color) !important;
}
.modal-title { color: var(--text_color) !important; }
.btn-close { filter: invert(1) !important; }

/* ── 13. Alerts ────────────────────────────────────────────── */
.alert-warning {
    background-color: rgba(210, 153, 34, 0.12) !important;
    border-color: rgba(210, 153, 34, 0.25) !important;
    color: #e3b341 !important;
}

.alert-success {
    background-color: rgba(0, 230, 118, 0.12) !important;
    border-color: rgba(0, 230, 118, 0.25) !important;
    color: var(--primary_color) !important;
}

.alert-danger {
    background-color: rgba(218, 54, 51, 0.12) !important;
    border-color: rgba(218, 54, 51, 0.25) !important;
    color: #f85149 !important;
}

.alert-info {
    background-color: rgba(56, 139, 253, 0.12) !important;
    border-color: rgba(56, 139, 253, 0.25) !important;
    color: #58a6ff !important;
}

/* ── 14. Badges ────────────────────────────────────────────── */
.badge {
    font-weight: 500;
}
.badge.bg-primary {
    background-color: var(--primary_color) !important;
    color: #000 !important;
}
.badge.bg-secondary {
    background-color: #30363d !important;
    color: var(--elements_text_color) !important;
}
.badge.bg-success {
    background-color: rgba(0, 230, 118, 0.15) !important;
    color: var(--primary_color) !important;
}
.badge.bg-danger {
    background-color: rgba(218, 54, 51, 0.15) !important;
    color: #f85149 !important;
}
.badge.bg-warning {
    background-color: rgba(210, 153, 34, 0.15) !important;
    color: #e3b341 !important;
}
.badge.bg-info {
    background-color: rgba(56, 139, 253, 0.15) !important;
    color: #58a6ff !important;
}
.badge.bg-light {
    background-color: #21262d !important;
    color: var(--elements_text_color) !important;
}

.bg-red { background-color: #da3633 !important; }

/* ── 15. Breadcrumb ────────────────────────────────────────── */
.breadcrumb {
    color: var(--text_muted);
}
.breadcrumb-item a {
    color: var(--primary_color) !important;
}
.breadcrumb-item.active {
    color: var(--text_muted) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text_muted) !important;
}

/* ── 16. Pagination ────────────────────────────────────────── */
.page-link {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
    color: var(--elements_text_color) !important;
}
.page-link:hover {
    background-color: #21262d !important;
    color: var(--text_color) !important;
}
.page-item.active .page-link {
    background-color: var(--primary_color) !important;
    border-color: var(--primary_color) !important;
    color: #000 !important;
}
.page-item.disabled .page-link {
    background-color: #0d1117 !important;
    color: var(--text_muted) !important;
}

/* ── 17. Tabs / Nav Pills ──────────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--border_color) !important;
}
.nav-tabs .nav-link {
    color: var(--text_muted) !important;
}
.nav-tabs .nav-link:hover {
    border-color: var(--border_color) !important;
    color: var(--text_color) !important;
}
.nav-tabs .nav-link.active {
    background-color: var(--cards_background_color) !important;
    border-color: var(--border_color) var(--border_color) var(--cards_background_color) !important;
    color: var(--primary_color) !important;
}

.nav-pills .nav-link {
    color: var(--elements_text_color) !important;
}
.nav-pills .nav-link.active {
    background-color: var(--primary_color) !important;
    color: #000 !important;
}
.nav-pills .nav-link:hover:not(.active) {
    background-color: #21262d !important;
    color: var(--text_color) !important;
}

/* Settings tabs */
.settings-tabs .nav-link,
.settings-nav .nav-link {
    color: var(--elements_text_color) !important;
    border-color: transparent !important;
}
.settings-tabs .nav-link.active,
.settings-tabs .nav-link:hover,
.settings-nav .nav-link.active,
.settings-nav .nav-link:hover {
    color: var(--primary_color) !important;
    background-color: var(--primary_opacity) !important;
}

/* ── 18. Counter / Stats Cards ─────────────────────────────── */
.counter .counter-icon {
    background-color: var(--primary_opacity) !important;
    color: var(--primary_color) !important;
}
.counter .counter-amount {
    color: var(--text_color) !important;
}
.counter .counter-title {
    color: var(--text_muted) !important;
}

/* ── 19. Notifications Panel ───────────────────────────────── */
.notifications-list {
    background-color: #161b22 !important;
}
.notification-item {
    border-bottom-color: var(--border_color) !important;
}
.notification-item:hover {
    background-color: #21262d !important;
}

/* ── 20. User Menu ─────────────────────────────────────────── */
.user-menu .drop-down-menu {
    background-color: #161b22 !important;
}
.user-title { color: var(--text_color) !important; }
.user-text { color: var(--text_muted) !important; }

/* ── 21. Offcanvas / What's New ────────────────────────────── */
.offcanvas {
    background-color: #161b22 !important;
    color: var(--text_color) !important;
    border-color: var(--border_color) !important;
}
.offcanvas-header {
    border-bottom: 1px solid var(--border_color);
}
.offcanvas-title { color: var(--text_color) !important; }

/* ── 22. Toastr / Toast Overrides ──────────────────────────── */
.toast {
    background-color: #161b22 !important;
    color: var(--text_color) !important;
    border-color: var(--border_color) !important;
}

/* ── 23. Progress Bars ─────────────────────────────────────── */
.progress {
    background-color: #21262d !important;
}
.progress-bar {
    background-color: var(--primary_color) !important;
}

/* ── 24. Lists & Items ─────────────────────────────────────── */
.list-group-item {
    background-color: var(--cards_background_color) !important;
    border-color: var(--border_color) !important;
    color: var(--elements_text_color) !important;
}
.list-group-item:hover {
    background-color: #21262d !important;
}

.items .item {
    border-bottom-color: var(--border_color) !important;
}
.item-title {
    color: var(--text_color) !important;
}

/* ── 25. Plan / Subscription Badges ────────────────────────── */
.plan-badge {
    background-color: var(--primary_opacity) !important;
    color: var(--primary_color) !important;
}

/* ── 26. Help & Delete Icons ───────────────────────────────── */
.help-icon {
    background-color: var(--primary_opacity) !important;
    color: var(--primary_color) !important;
}

/* ── 27. Sign-in / Auth Box ────────────────────────────────── */
.sign-box .box {
    background-color: var(--cards_background_color) !important;
    border-color: var(--border_color) !important;
}

/* ── 28. Dashboard-btn-bg ──────────────────────────────────── */
.dashboard-btn-bg {
    background-color: #161b22 !important;
}

/* ── 29. Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── 30. Misc Bootstrap Overrides ──────────────────────────── */
.bg-white { background-color: var(--cards_background_color) !important; }
.bg-light { background-color: #161b22 !important; }
.border { border-color: var(--border_color) !important; }
.border-bottom { border-bottom-color: var(--border_color) !important; }
.border-top { border-top-color: var(--border_color) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }

.text-color-white { color: #fff !important; }

/* Accordion */
.accordion-item {
    background-color: var(--cards_background_color) !important;
    border-color: var(--border_color) !important;
}
.accordion-button {
    background-color: var(--cards_background_color) !important;
    color: var(--text_color) !important;
}
.accordion-button:not(.collapsed) {
    background-color: #161b22 !important;
    color: var(--primary_color) !important;
}
.accordion-button::after { filter: invert(1); }
.accordion-body {
    background-color: var(--cards_background_color) !important;
    color: var(--elements_text_color) !important;
}

/* Tooltip */
.tooltip-inner {
    background-color: #21262d !important;
    color: var(--text_color) !important;
}

/* Popover */
.popover {
    background-color: #161b22 !important;
    border-color: var(--border_color) !important;
}
.popover-body { color: var(--elements_text_color) !important; }
.popover-header {
    background-color: #21262d !important;
    border-bottom-color: var(--border_color) !important;
    color: var(--text_color) !important;
}

/* ── 31. Charts ────────────────────────────────────────────── */
.dashboard-chart {
    color: var(--text_color);
}

/* ── 32. Domain/Feature Status Dots ────────────────────────── */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ── 33. Overlay for mobile sidebar ────────────────────────── */
@media (max-width: 1199.98px) {
    .dashboard-sidebar .overlay {
        background-color: #000 !important;
        opacity: 0.5 !important;
    }
}