@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&family=Exo+2:wght@300;400;600&display=swap');

/* ============================================================
   CSS-BANS — FULL GREEN THEME (definitive)

   Source-verified: every blue value was found by grepping the
   actual scss / blade / js source.  This file overrides them
   all.

   GREEN PALETTE (replaces the 5 core navy values)
   ────────────────────────────────────────────────
   #191e3a  →  #0f1f14   (card bg, header bg, progress bg …)
   #1b2e4b  →  #152a1c   (form-control bg, hover rows, dropdowns …)
   #0e1726  →  #091a0e   (modal bg, deepest surfaces …)
   #152143  →  #0d1f12   (bg-light-primary)
   #131c36  →  #0b1a0f   (inline panel bgs in logs)
   #3498db  →  #2aad4e   (explicit blue border in spinner)

   ACCENT COLOURS (replaces bootstrap colour vars)
   ────────────────────────────────────────────────
   $primary  #4361ee  →  #2aad4e
   $info     #2196f3  →  #6ffe8a
   ============================================================ */


/* ─── 1. BOOTSTRAP CSS-VARIABLE OVERRIDES ─────────────────────
   Covers every --bs-* token so utility classes like
   .text-primary, .bg-info, .badge, etc. all go green.        */
:root,
body,
body.layout-dark,
[data-bs-theme="dark"] {
    --bs-primary:            #2aad4e;
    --bs-primary-rgb:        42, 173, 78;
    --bs-info:               #6ffe8a;
    --bs-info-rgb:           111, 254, 138;
    --bs-secondary:          #152a1c;
    --bs-secondary-rgb:      21, 42, 28;
    --bs-body-bg:            #0a1a0d;
    --bs-body-color:         #e8f5ea;
    --bs-card-bg:            #0f1f14;
    --bs-border-color:       #2aad4e;
    --bs-border-color-translucent: rgba(42, 173, 78, 0.25);
    --bs-link-color:         #6ffe8a;
    --bs-link-hover-color:   #c8a43a;
}


/* ─── 2. GLOBAL / BODY ─────────────────────────────────────── */
body {
    font-family: 'Exo 2', sans-serif !important;
    margin: 0;
    padding: 0;
    background-color: #0a1a0d !important;
    color: #e8f5ea !important;
    overflow-x: hidden;
}
/*
body.layout-dark:before,
.layout-dark {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0a1a0d, #0f1f14, #152a1c) !important;
    background:
	radial-gradient(1200px 700px at 20% 12%, rgba(42,173,78,0.22), transparent 60%),
	radial-gradient(900px 600px at 82% 18%, rgba(111,254,138,0.14), transparent 62%),
	radial-gradient(1000px 800px at 50% 110%, rgba(42,173,78,0.10), transparent 55%),
	radial-gradient(1400px 900px at 50% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0.72)),
	linear-gradient(135deg, #070c08, #0a1a0d 45%, #050906) !important;
    z-index: -1;
    overflow: hidden;
}
*/



/* ─── 3. COLLAPSIBLE-MENU STRUCTURE OVERRIDES ─────────────────
   These selectors are copy-pasted from
   resources/scss/layouts/collapsible-menu/dark/structure.scss
   with the navy values swapped to green.                       */

/* .header-container  (line 232 in structure.scss) */
.header-container {
    background: #0f1f14 !important;
    border-radius: 8px;
}
body.layout-dark .header-container {
    background: #0f1f14 !important;
}

/* dropdown-menu inside header (line 374) */
.header-container .dropdown-menu,
body.layout-dark .dropdown-menu {
    background: #152a1c !important;
    border: 1px solid rgba(42,173,78,0.3) !important;
}
.header-container .dropdown-menu .dropdown-item,
body.layout-dark .dropdown-menu .dropdown-item {
    color: #c4dcc8 !important;
}
.header-container .dropdown-menu .dropdown-item:hover,
body.layout-dark .dropdown-menu .dropdown-item:hover {
    background: rgba(42,173,78,0.15) !important;
    color: #6ffe8a !important;
}

/* dropdown title borders (lines 476-477) */
.drodpown-title {
    border-bottom: 1px solid #0f1f14 !important;
    border-top: 1px solid #0f1f14 !important;
}

/* search overlay (line 687) */
.form-inline.search {
    background: #152a1c !important;
}

/* user-profile-section in dropdown (lines 772, 775) */
.user-profile-section {
    background: #152a1c !important;
    border-bottom: 1px solid #0f1f14 !important;
}


/* ─── 4. SIDEBAR ───────────────────────────────────────────── */
.sidebar-theme {
    background: rgba(10, 20, 12, 0.96) !important;
    border-right: 2px solid #2aad4e !important;
    box-shadow: 4px 0 14px rgba(42, 173, 78, 0.25) !important;
}

.theme-brand {
    background: rgba(0, 0, 0, 0.5) !important;
    border-bottom: 2px solid #2aad4e !important;
}

/* user box */
.sidebar-theme .user-box,
body.layout-dark .sidebar-theme .user-box {
    background: rgba(10, 26, 13, 0.6) !important;
    border-bottom: 1px solid rgba(42,173,78,0.25) !important;
}
.sidebar-theme .user-box .user-name { color: #e8f5ea !important; }
.sidebar-theme .user-box .user-role { color: #7ab88a !important; }

/* nav items – inactive */
body.layout-dark #sidebar ul.menu-categories li.menu > .dropdown-toggle,
#sidebar ul.menu-categories li.menu > .dropdown-toggle {
    color: #7ab88a !important;
    background: transparent !important;
}
body.layout-dark #sidebar ul.menu-categories li.menu > .dropdown-toggle:hover,
#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover {
    background: rgba(42,173,78,0.12) !important;
    color: #6ffe8a !important;
}

/* nav items – active / expanded */
#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded=true],
body.layout-dark #sidebar ul.menu-categories li.menu.active > .dropdown-toggle {
    background: #2aad4e !important;
    color: #0a1a0d !important;
    box-shadow: 0 0 14px rgba(42,173,78,0.6) !important;
}

/* submenu */
body.layout-dark #sidebar ul.menu-categories li.menu ul.submenu > li a,
#sidebar ul.menu-categories li.menu ul.submenu > li a {
    color: #7ab88a !important;
}
body.layout-dark #sidebar ul.menu-categories li.menu ul.submenu > li a:hover,
#sidebar ul.menu-categories li.menu ul.submenu > li a:hover {
    color: #6ffe8a !important;
}
body.layout-dark #sidebar ul.menu-categories li.menu ul.submenu > li.active a {
    color: #6ffe8a !important;
    font-weight: bold;
}

/* nav icons */
body.layout-dark #sidebar .nav-icon,
#sidebar .nav-icon { color: #7ab88a !important; }
body.layout-dark #sidebar li.menu.active .nav-icon,
#sidebar li.menu.active .nav-icon { color: #0a1a0d !important; }


/* ─── 5. CARDS ─────────────────────────────────────────────── */
/* Source: main.scss line 274-276  →  .card { border / background: #191e3a } */
.card,
body.layout-dark .card {
    /*border: 1px solid rgba(42,173,78,0.35) !important;*/
	border: 1px solid rgba(42, 173, 78, .18);
    /*background: #0f1f14 !important;*/
	background: rgba(12, 24, 15, .55);
    box-shadow: 0 0 18px rgba(42,173,78,0.15) !important;
    color: #e8f5ea !important;
    border-radius: 10px;
}

.card:hover,
body.layout-dark .card:hover {
    box-shadow: 0 0 24px rgba(42,173,78,0.35) !important;
}

/* card-header  (main.scss line 286) */
.card-header,
body.layout-dark .card-header {
    color: #e8f5ea !important;
    border-bottom-color: rgba(42,173,78,0.25) !important;
    background: transparent !important;
}
.card-footer,
body.layout-dark .card-footer {
    border-top-color: rgba(42,173,78,0.25) !important;
    background: transparent !important;
}
.card-body,
body.layout-dark .card-body {
    background: transparent !important;
    color: #e8f5ea !important;
}


/* ─── 6. STAT-CARD ICONS — text-info / text-primary ───────────
   Source: dashboard.blade.php uses:
     fa-server.text-info       → Servers
     fa-ban.text-danger        → Bans  (red, keep)
     fa-volume-mute.text-success → Mutes
     fa-user-shield.text-primary → Admins
   main.scss line 4389: .text-primary { color: #4361ee !important }
   main.scss line 4397: .text-info    { color: #2196f3 !important }
   We override both to green.                                     */
.text-primary { color: #2aad4e !important; }
.text-info    { color: #6ffe8a !important; }
/* text-success is already green-ish (#00ab55) – nudge it to match */
.text-success { color: #4ddb6e !important; }


/* ─── ?. Widgets ────────────────────────────────────────────── */
body.layout-dark .widget-content-area {
    background: rgba(12, 24, 15, .55) !important;
	border: 1px solid rgba(42, 173, 78, .18);
}

body.layout-dark .widget {
    background: rgba(12, 24, 15, .55) !important;
	border: 1px solid rgba(42, 173, 78, .18);
}

body.layout-dark .widget-four {
    background: rgba(12, 24, 15, .55) !important;
	border: 1px solid rgba(42, 173, 78, .18);
}

/* ─── 7. BADGES ────────────────────────────────────────────── */
/* Source: main.scss lines 3307-3343  →  .badge-light-* classes
   Dashboard uses badge-light-danger ("0 Active" on Bans)
                    badge-light-warning ("0 Active" on Mutes)   */
.badge-light-danger {
    color: #6ffe8a !important;
    background-color: rgba(42,173,78,0.15) !important;
    border: 1px solid rgba(42,173,78,0.4) !important;
}
.badge-light-warning {
    color: #6ffe8a !important;
    background-color: rgba(42,173,78,0.15) !important;
    border: 1px solid rgba(42,173,78,0.4) !important;
}
.badge-light-primary {
    color: #6ffe8a !important;
    background-color: rgba(42,173,78,0.15) !important;
    border: 1px solid rgba(42,173,78,0.4) !important;
}
.badge-light-info {
    color: #6ffe8a !important;
    background-color: rgba(42,173,78,0.15) !important;
    border: 1px solid rgba(42,173,78,0.4) !important;
}
.badge-light-success {
    color: #6ffe8a !important;
    background-color: rgba(42,173,78,0.15) !important;
    border: 1px solid rgba(42,173,78,0.4) !important;
}
.badge-light-secondary {
    color: #6ffe8a !important;
    background-color: rgba(42,173,78,0.15) !important;
    border: 1px solid rgba(42,173,78,0.4) !important;
}
.badge-light-dark {
    color: #6ffe8a !important;
    background-color: rgba(42,173,78,0.15) !important;
    border: 1px solid rgba(42,173,78,0.4) !important;
}
/* generic .badge */
.badge, span.badge {
    background-color: rgba(42,173,78,0.15) !important;
    color: #6ffe8a !important;
    border: 1px solid rgba(42,173,78,0.35) !important;
}


/* ─── 8. TABLES ────────────────────────────────────────────── */
/* thead th  (main.scss line 3929 + original theme)  */
body.layout-dark .table thead tr th,
.table thead tr th {
    background: rgba(10,30,15,0.88) !important;
    border: 1px solid #2aad4e !important;
    color: #6ffe8a !important;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 14px 20px;
    font-size: 14px;
    box-shadow: 0 0 14px rgba(42,173,78,0.4) !important;
}
body.layout-dark .table thead tr th:hover,
.table thead tr th:hover {
    background: rgba(42,173,78,0.14) !important;
    box-shadow: 0 0 26px rgba(42,173,78,0.7) !important;
}

/* tbody rows  (main.scss line 3839 = .table-hover hover: bg #1b2e4b) */
.table-hover > tbody > tr:hover td,
body.layout-dark .table-hover > tbody > tr:hover td {
    background-color: rgba(42,173,78,0.1) !important;
    color: #c4dcc8 !important;
}

/* striped  (main.scss ~line 3859) */
.table-striped > tbody > tr:nth-of-type(odd) td,
body.layout-dark .table-striped > tbody > tr:nth-of-type(odd) td {
    background-color: rgba(15,31,20,0.6) !important;
    color: #c4dcc8 !important;
}

/* general table text */
body.layout-dark .table,
.table {
    color: #c4dcc8 !important;
}
body.layout-dark .table td,
.table td {
    border-color: rgba(42,173,78,0.15) !important;
    color: #c4dcc8 !important;
}

/* bg-light on thead (dashboard uses <thead class="bg-light">) */
.bg-light {
    background-color: #0f1f14 !important;
}


/* ─── 9. FORM CONTROLS ─────────────────────────────────────── */
/* .form-control  (main.scss line 651-676: border/bg = #1b2e4b) */
.form-control,
body.layout-dark .form-control {
    border: 1px solid rgba(42,173,78,0.4) !important;
    background: #152a1c !important;
    color: #e8f5ea !important;
}
.form-control:focus,
body.layout-dark .form-control:focus {
    border-color: #6ffe8a !important;
    background-color: #152a1c !important;
    color: #e8f5ea !important;
    box-shadow: 0 0 0 0.2rem rgba(42,173,78,0.25) !important;
}

/* .form-select  (main.scss line 765-800: border/bg = #1b2e4b, arrow stroke #009688) */
.form-select,
body.layout-dark .form-select {
    border: 1px solid rgba(42,173,78,0.4) !important;
    background-color: #152a1c !important;
    color: #e8f5ea !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236ffe8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
.form-select:focus,
body.layout-dark .form-select:focus {
    border-color: #6ffe8a !important;
    background-color: #152a1c !important;
    color: #e8f5ea !important;
    box-shadow: 0 0 0 0.2rem rgba(42,173,78,0.25) !important;
}
select option { background: #0f1f14; color: #e8f5ea; }

/* input-group-text  (main.scss line 955-956) */
.input-group-text,
body.layout-dark .input-group-text {
    border: 1px solid rgba(42,173,78,0.4) !important;
    background-color: #0f1f14 !important;
    color: #7ab88a !important;
}


/* ─── 10. MODAL ────────────────────────────────────────────── */
/* main.scss line 92: .modal-content { background: #0e1726 } */
.modal-content,
body.layout-dark .modal-content {
    /*background: #091a0e !important;
    border: 1px solid rgba(42,173,78,0.35) !important;*/
	background: rgba(12, 24, 15, .85) !important;
	border: 1px solid rgba(42, 173, 78, .18) !important;
    color: #e8f5ea !important;
}
.modal-header,
body.layout-dark .modal-header {
    border-bottom-color: rgba(42,173,78,0.25) !important;
}
.modal-footer,
body.layout-dark .modal-footer {
    border-top-color: rgba(42,173,78,0.25) !important;
    background: rgba(10,26,13,0.5) !important;
}

/* Raise modals above the video background overlays. */
.modal { z-index: 100001 !important; }

/* Hide the modal backdrop — the video background already provides
   enough visual context, and the backdrop was causing click-blocking issues. */
.modal-backdrop {
    display: none !important;
}


/* ─── 11. CHART SECTION ────────────────────────────────────── */
/* dashboard.blade.php inline style: .chart-section { background: #191e3a }
   We can't beat an inline style with a class, so we use !important.     */
.chart-section {
    background: #0f1f14 !important;
}

/* ApexCharts dark overrides
   Source: resources/scss/dark/plugins/apex/custom-apexcharts.scss
   The radialbar track stroke was #191e3a                            */
body.layout-dark .apexcharts-radialbar-track .apexcharts-radialbar-area {
    stroke: #0f1f14 !important;
}
/* axis labels are already #e0e6ed (light) – that's fine */


/* ─── 12. NOTE BLOCK (version info box) ───────────────────── */
/* The <div class="note note-primary"> block.  Sentinel styles
   it with bg-light-primary (#152143). Override:                  */
.note,
body.layout-dark .note {
    background: rgba(42,173,78,0.08) !important;
    border-left: 3px solid #2aad4e !important;
    color: #e8f5ea !important;
}
.note-primary,
body.layout-dark .note-primary {
    background: rgba(42,173,78,0.08) !important;
    border-left-color: #2aad4e !important;
}


/* ─── 13. PROGRESS BAR ────────────────────────────────────── */
/* main.scss line 4142: .progress { background-color: #191e3a } */
.progress,
body.layout-dark .progress {
    background-color: #0f1f14 !important;
}


/* ─── 14. bg-light-* UTILITY CLASSES ──────────────────────── */
/* main.scss lines 4097-4132  – all the bg-light-* variants     */
.bg-light-primary   { background-color: #0d1f12 !important; color: #6ffe8a !important; border-color: rgba(42,173,78,0.3) !important; }
.bg-light-info      { background-color: #0d1f12 !important; color: #6ffe8a !important; border-color: rgba(42,173,78,0.3) !important; }
.bg-light-success   { background-color: #0d1f12 !important; color: #4ddb6e !important; border-color: rgba(42,173,78,0.3) !important; }
.bg-light-warning   { background-color: #1a1f12 !important; color: #e2a03f !important; border-color: rgba(224,160,63,0.3) !important; }
.bg-light-danger    { background-color: #1f120d !important; color: #e7515a !important; border-color: rgba(231,81,90,0.3) !important; }
.bg-light-secondary { background-color: #0d1f12 !important; color: #6ffe8a !important; border-color: rgba(42,173,78,0.3) !important; }
.bg-light-dark      { background-color: #0f1f14 !important; color: #e8f5ea !important; border-color: rgba(42,173,78,0.3) !important; }


/* ─── 15. BUTTONS ──────────────────────────────────────────── */
button,
.btn {
    background: linear-gradient(90deg, #1e8f3e, #2aad4e) !important;
    border: none !important;
    border-radius: 10px;
    color: #e8f5ea !important;
    font-weight: bold;
    padding: 10px 20px;
    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}
button:hover,
.btn:hover {
    background: linear-gradient(90deg, #6ffe8a, #4ddb6e) !important;
    box-shadow: 0 0 14px rgba(111,254,138,0.5) !important;
    color: #0a1a0d !important;
    cursor: pointer;
}
.btn-outline-primary,
.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid #2aad4e !important;
    color: #6ffe8a !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: rgba(42,173,78,0.15) !important;
    color: #6ffe8a !important;
}
.btn-danger {
    background: linear-gradient(90deg, #8b2020, #a33030) !important;
}
.btn-success {
    background: linear-gradient(90deg, #1e8f3e, #2aad4e) !important;
}


/* ─── 16. LOGO ANIMATED ────────────────────────────────────── */
.logo-animated {
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(90deg, #2aad4e, #6ffe8a, #c8a43a, #2aad4e);
    background-size: 300% auto;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 0;
    filter: drop-shadow(0 0 10px rgba(42,173,78,0.6));
    animation: shineText 4s ease-in-out infinite, moveLogo 3s ease-in-out infinite;
    text-align: center;
}

@keyframes shineText {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes moveLogo {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(30px); }
    100% { transform: translateX(0); }
}


/* ─── 17. LINKS ────────────────────────────────────────────── */
a { color: #6ffe8a !important; text-decoration: none; transition: color 0.3s; }
a:hover { color: #c8a43a !important; }

/* breadcrumbs */
.breadcrumb-item { color: #7ab88a !important; }
.breadcrumb-item.active { color: #6ffe8a !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #2aad4e !important; }


/* ─── 18. ALERTS ───────────────────────────────────────────── */
.alert, body.layout-dark .alert {
    background: rgba(10,26,13,0.75) !important;
    border-color: rgba(42,173,78,0.4) !important;
    color: #e8f5ea !important;
}
.alert-success, body.layout-dark .alert-success {
    background: rgba(42,173,78,0.12) !important;
    border-color: #2aad4e !important;
    color: #6ffe8a !important;
}
.alert-danger, body.layout-dark .alert-danger {
    background: rgba(231,81,90,0.12) !important;
    border-color: rgba(231,81,90,0.4) !important;
    color: #e7515a !important;
}
.alert .btn-close, .alert .close { color: #7ab88a !important; }


/* ─── 19. PAGINATION ───────────────────────────────────────── */
/* main.scss lines 99/116/128/152/167/202/246/261/296 all use #191e3a */
.pagination .page-link,
body.layout-dark .pagination .page-link {
    background: #0f1f14 !important;
    border-color: rgba(42,173,78,0.35) !important;
    color: #6ffe8a !important;
}
.pagination .page-link:hover,
body.layout-dark .pagination .page-link:hover {
    background: rgba(42,173,78,0.15) !important;
}
.pagination .page-item.active .page-link,
body.layout-dark .pagination .page-item.active .page-link {
    background: #2aad4e !important;
    border-color: #2aad4e !important;
    color: #0a1a0d !important;
}


/* ─── 20. TABS ─────────────────────────────────────────────── */
.nav-tabs .nav-link,
body.layout-dark .nav-tabs .nav-link { color: #7ab88a !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover,
body.layout-dark .nav-tabs .nav-link:hover { color: #6ffe8a !important; border-color: rgba(42,173,78,0.3) !important; }
.nav-tabs .nav-link.active,
body.layout-dark .nav-tabs .nav-link.active { color: #6ffe8a !important; border-color: #2aad4e !important; background: rgba(42,173,78,0.1) !important; }


/* ─── 21. ACCORDIONS ──────────────────────────────────────── */
/* dark/assets/components/accordions.scss: border/bg #1b2e4b */
.accordion-item,
body.layout-dark .accordion-item {
    border: 2px solid rgba(42,173,78,0.3) !important;
    background: #0f1f14 !important;
    color: #e8f5ea !important;
}
.accordion-header .accordion-button,
body.layout-dark .accordion-header .accordion-button {
    background-color: rgba(42,173,78,0.1) !important;
    color: #e8f5ea !important;
    border-bottom: 2px solid rgba(42,173,78,0.3) !important;
}
.accordion-button:not(.collapsed),
body.layout-dark .accordion-button:not(.collapsed) {
    background-color: rgba(42,173,78,0.15) !important;
    color: #6ffe8a !important;
}


/* ─── 22. SCROLLBARS ───────────────────────────────────────── */
.sidebar-theme::-webkit-scrollbar { width: 8px; }
.sidebar-theme::-webkit-scrollbar-thumb { background-color: #2aad4e; border-radius: 4px; }
.sidebar-theme::-webkit-scrollbar-track { background: #0a1a0d; }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-thumb { background-color: #2aad4e; border-radius: 4px; }
::-webkit-scrollbar-track { background: #0a1a0d; }


/* ─── 23. LAYOUT / SCROLL FIXES ────────────────────────────── */
html, body { height: 100%; overflow-x: hidden; }
.main-content {
    margin-left: 280px;
    overflow-y: auto;
    height: 100vh;
    padding: 30px;
    box-sizing: border-box;
}


/* ─── 24. REMAINING UTILITY OVERRIDES ─────────────────────── */
.bg-dark, .bg-secondary { background: #0a1a0d !important; }
.text-muted, .text-secondary { color: #7ab88a !important; }
.border, .border-primary { border-color: #2aad4e !important; }

/* timeline  (dark/assets/components/timeline.scss – all #191e3a / #1b2e4b) */
.timeline-item { background: #0f1f14 !important; border-color: rgba(42,173,78,0.3) !important; }
.timeline-item .timeline-dot { background: #152a1c !important; border: 3px solid #0f1f14 !important; }

/* list-group dark  (list-group.scss line 142) */
.list-group-item,
body.layout-dark .list-group-item {
    background: #0f1f14 !important;
    border-color: rgba(42,173,78,0.2) !important;
    color: #c4dcc8 !important;
}

/* typography  (custom-typography.scss: border/bg #191e3a) */
.blockquote, blockquote {
    border-left: 3px solid #2aad4e !important;
    background: #0f1f14 !important;
    color: #e8f5ea !important;
}

/* infobox  (infobox.scss: border #191e3a) */
.infobox { border: 1px solid rgba(42,173,78,0.3) !important; background: #0f1f14 !important; }

/* search element  (search.scss: border/bg #1b2e4b) */
.search-input { border: 1px solid rgba(42,173,78,0.4) !important; background: #152a1c !important; color: #e8f5ea !important; }

/* font-icons borders (font-icons.scss: border #191e3a) */
.icon-wrap { border: 1px solid rgba(42,173,78,0.3) !important; }

/* usr-img-frame in tables  (main.scss line 3783) */
.usr-img-frame { background-color: #152a1c !important; }

/* jumbotron  (main.scss line 84) */
.jumbotron { background-color: #152a1c !important; }

/* explicit blue border in spinner (main.scss line 4715) */
.border-top-blue { border-top-color: #2aad4e !important; }

/* user-profile borders  (user-profile.scss: #1b2e4b) */
.user-profile .nav-link { border-bottom: 1px solid rgba(42,173,78,0.3) !important; }

/* faq / knowledge-base borders */
.faq-item { border: 1px solid rgba(42,173,78,0.3) !important; background: #0f1f14 !important; }
.kb-item { border: 1px solid rgba(42,173,78,0.3) !important; }

.user-info {
    background: #13341d !important;
}

.shadow-bottom {
    background: linear-gradient(#0b140d 59%, rgba(14, 23, 38, .839) 95%, rgba(14, 23, 38, .22)) !important;
}

.btn-primary {
    box-shadow: 0 10px 20px -10px #0f1f14 !important;
}

.filter-container {
    background: transparent !important;
    border: 1px solid #2aad4e !important;
}

/* Completely hide the empty top header spacer */
/* Hide the empty header spacer on desktop, keep it on mobile */
@media (min-width: 992px) {
  body.layout-dark .header-container.container-xxl {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  body.layout-dark .header-container.container-xxl {
    display: block !important;
  }
}

/* Hide version/info note bar everywhere */
.note.note-primary.mb-3 {
  display: none !important;
}

/* Remove top padding that creates the empty space */
#container.main-container {
  padding-top: 0 !important;
}

/* =========================================================
   Desktop-only: reduce (not remove) the top gap
   ========================================================= */

@media (min-width: 992px) {

  /* Main layout wrappers */
  body.layout-boxed.layout-dark #container.main-container,
  body.layout-boxed.layout-dark .main-container,
  body.layout-boxed.layout-dark .container.main-container {
    /*padding-top: 10px !important;*/   /* small clean gap */
    margin-top: 0 !important;
  }

  body.layout-boxed.layout-dark #content,
  body.layout-boxed.layout-dark #content.main-content,
  body.layout-boxed.layout-dark .main-content {
    /*padding-top: 10px !important;*/
    margin-top: 0 !important;
  }

  body.layout-boxed.layout-dark .layout-top-spacing,
  body.layout-boxed.layout-dark .layout-spacing,
  body.layout-boxed.layout-dark .layout-px-spacing {
    /*padding-top: 10px !important;*/
    margin-top: 0 !important;
  }

  /* Kill spacer pseudo-elements but only on desktop */
  body.layout-boxed.layout-dark #container.main-container::before,
  body.layout-boxed.layout-dark #content::before,
  body.layout-boxed.layout-dark .main-content::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
  }
}

/* =========================================================
   Fix top-left gap next to sidebar (desktop)
   Sidebar is being offset downward by the template
   ========================================================= */
@media (min-width: 992px) {

  /* Sidebar containers */
  .sidebar-wrapper,
  .sidebar-theme,
  #sidebar {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Some builds wrap it in a fixed positioned element */
  .sidebar-wrapper {
    position: fixed !important; /* ensures it anchors to the top */
  }

  /* If the template adds a top offset to the content area too */
  #content.main-content,
  .main-content {
    margin-top: 0 !important;
  }
}


/* =========================================================
   Desktop brand bar: bigger logo + remove collapse toggle
   ========================================================= */
@media (min-width: 992px) {

  /* Remove collapse option on desktop */
  .nav-item.sidebar-toggle,
  .btn-toggle.sidebarCollapse,
  .sidebarCollapse {
    display: none !important;
  }

  /* Give the brand row enough height/padding */
  nav#sidebar .navbar-nav.theme-brand.flex-row.text-center,
  nav#sidebar .navbar-nav.theme-brand {
    min-height: 72px !important;
    padding: 14px 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Make the logo text bigger and prevent clipping */
  nav#sidebar .navbar-nav.theme-brand .logo-animated {
    font-size: 26px !important;     /* <- increase */
    line-height: 1.1 !important;
    letter-spacing: 2.2px !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* If the logo sits inside a nav-logo wrapper, keep it aligned */
  nav#sidebar .navbar-nav.theme-brand .nav-logo,
  nav#sidebar .navbar-nav.theme-brand .nav-item.theme-logo {
    display: flex !important;
    align-items: center !important;
  }
}

/* =========================================================
   Desktop: stop logo clipping in brand bar
   ========================================================= */
/*
@media (min-width: 992px) {
  nav#sidebar .navbar-nav.theme-brand.flex-row.text-center,
  nav#sidebar .navbar-nav.theme-brand {
    height: auto !important;
    min-height: 84px !important;     
    padding: 18px 16px !important;
    overflow: visible !important;    
    align-items: center !important;
  }

  nav#sidebar .navbar-nav.theme-brand .nav-logo,
  nav#sidebar .navbar-nav.theme-brand .nav-item.theme-logo,
  nav#sidebar .navbar-nav.theme-brand .nav-item,
  nav#sidebar .navbar-nav.theme-brand .nav-link {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  nav#sidebar .navbar-nav.theme-brand .logo-animated {
    font-size: 28px !important;
    line-height: 1.15 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}*/

/* =========================================================
   Mobile: hide theme toggle, language dropdown, GitHub icon
   ========================================================= */
/* Mobile: hide ONLY language dropdown + theme toggle + GitHub (keep user dropdown/avatar) */
@media (max-width: 991.98px) {

  /* Moon/Sun toggle */
  .header-container .nav-item.theme-toggle-item {
    display: none !important;
  }

  /* Language dropdown ONLY */
  .header-container #language-dropdown {
    display: none !important;
  }
  .header-container #language-dropdown,
  .header-container #language-dropdown * {
    pointer-events: none !important;
  }

  /* Hide the <li> that contains the language <select> */
  .header-container li:has(> #language-dropdown),
  .header-container li:has(#language-dropdown) {
    display: none !important;
  }

  /* GitHub icon link (this one is uniquely classed) */
  .header-container .nav-item.nav-link.theme-toggle-item {
    display: none !important;
  }
}

/* =======================================================
   TRUE FULL-WIDTH (NO BOX) + RESPECT FIXED SIDEBAR
   Works for boxed + dark layouts
======================================================= */

/* 0) Ensure the boxed body itself doesn't cap width */
body.layout-boxed,
body.layout-boxed.layout-dark {
  max-width: none !important;
}

/* 1) Remove any max-width boxing on outer wrappers */
body.layout-boxed #container,
body.layout-boxed .main-container,
body.layout-boxed #content,
body.layout-boxed .content,
body.layout-boxed .content-area {
  max-width: none !important;
}

/* 2) Make the content region (right side) stretch */
body.layout-boxed #content,
body.layout-boxed .content-area,
body.layout-boxed .main-content {
  width: auto !important;
}

/* 3) Keep space for the sidebar so content never goes underneath it */
:root { --fg-sidebar-w: 255px; } /* change if your sidebar differs */

body.layout-boxed #content,
body.layout-boxed .content-area,
body.layout-boxed .main-content {
  margin-left: var(--fg-sidebar-w) !important;
  padding-left: 0 !important; /* we use margin, not padding, to offset */
}

/* 4) On small screens the sidebar becomes overlay -> remove offset */
@media (max-width: 991.98px) {
  body.layout-boxed #content,
  body.layout-boxed .content-area,
  body.layout-boxed .main-content {
    margin-left: 0 !important;
  }
}

/* ─── MOBILE SIDEBAR OVERLAY FIX ──────────────────────────────
   The sidebar must float OVER page content when toggled open.
   Key: giving z-index to content wrappers creates stacking contexts
   that trap the sidebar behind them — so we use z-index:auto on
   content and only set z-index on the sidebar itself.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Sidebar floats above everything when open.
     Do NOT override position — the framework uses left/transform
     to slide the sidebar in/out; forcing position:fixed breaks that. */
  .sidebar-wrapper,
  nav#sidebar {
    z-index: 9999 !important;
  }

  /* Sidebar must have a fully opaque background so page content
     never shows through it in any state */
  .sidebar-wrapper,
  .sidebar-theme {
    background: #0a140c !important;
  }

  /* Remove z-index from content wrappers so they don't create
     stacking contexts that fight the sidebar */
  #container,
  .main-container,
  #content,
  .content,
  .content-area,
  .main-content {
    z-index: auto !important;
    margin-left: 0 !important;
    overflow-x: hidden !important;
  }

  /* Header sits above page content but below open sidebar */
  .header-container,
  .navbar {
    z-index: 100 !important;
  }
}

/* 5) This is your inner spacing wrapper: let it use full width */
body.layout-boxed .layout-px-spacing,
body.layout-boxed .layout-top-spacing {
  max-width: none !important;
  width: 100% !important;

  /* nice edge padding like AlphaCS */
  padding-left: clamp(16px, 2vw, 44px) !important;
  padding-right: clamp(16px, 2vw, 44px) !important;
}

/* 6) Bootstrap containers: remove the hard caps */
body.layout-boxed .container,
body.layout-boxed .container-sm,
body.layout-boxed .container-md,
body.layout-boxed .container-lg,
body.layout-boxed .container-xl,
body.layout-boxed .container-xxl {
  max-width: none !important;
  width: 100% !important;
}

/* Remove the dark divider under sidebar profile */
.sidebar-wrapper .shadow-bottom {
    display: none !important;
}

/* ==============================
   GLOBAL LOCAL VIDEO BACKGROUND
   (fixed size + animated overlays + safe stacking)
============================== */

/* Video layer */
.panel-video-bg{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #000 !important;
  z-index: 0 !important;
  display: block !important;
}

/* Actual <video> */
#panelVideo,
.panel-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Overlays ABOVE the video */
.panel-video-dim{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.70), rgba(0,0,0,0.85)) !important;
}

.panel-green-anim{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,120,0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,200,90,0.12), transparent 50%),
    linear-gradient(120deg, rgba(0,255,120,0.08), rgba(0,0,0,0.00), rgba(0,255,120,0.06));

  background-size: 200% 200%;
  animation: fgGreenFlow 14s ease-in-out infinite;
  opacity: 0.65;
}

@keyframes fgGreenFlow{
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}

/* Put the UI ABOVE the video/overlay layers (z-index 0-2).
   Each layer gets a distinct value so they stack correctly.   */
#container,
.main-container,
#content,
.content,
.content-area,
.main-content {
  /*position: relative !important;*/
  z-index: 5 !important;
}

/* Header above page content */
.header-container,
.navbar {
  z-index: 100 !important;
}

/* Sidebar above everything so it overlays page when toggled open */
.sidebar-wrapper {
  z-index: 9999 !important;
}

/* Only make backgrounds transparent (don’t touch margins/padding/navbar layout) */
html, body{
  background: transparent !important;
}
#container,
.main-container,
#content,
.content,
.content-area{
  background: transparent !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .panel-green-anim{ animation: none !important; opacity: 0.35 !important; }
}

/* ======================================
   Override default loader background
====================================== */

#load_screen {
  background: linear-gradient(135deg, #02160c, #052d17) !important;
}

/* If it contains inner wrapper */
#load_screen > div,
#load_screen .loader,
#load_screen .spinner {
  background: transparent !important;
}