@import "default.css";

/* ============================================================
   ExoticNodes Panel Theme — exact match to exoticnodes.xyz
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --en-bg:         #0a0d15;
  --en-bg1:        #0f151c;
  --en-bg2:        #131a22;
  --en-card:       rgba(12,15,26,0.85);
  --en-card2:      rgba(7,9,15,0.97);
  --en-border:     rgba(255,255,255,0.07);
  --en-border2:    rgba(255,255,255,0.13);
  --en-text:       #eef2f7;
  --en-text2:      #8fa3b8;
  --en-text3:      #364859;
  --en-cyan:       #22d3ee;
  --en-cyan-dim:   rgba(34,211,238,0.08);
  --en-cyan-mid:   rgba(34,211,238,0.16);
  --en-cyan-glow:  rgba(34,211,238,0.32);
  --en-violet:     #a78bfa;
  --en-violet-dim: rgba(167,139,250,0.1);
  --en-violet-glow:rgba(167,139,250,0.25);
  --en-green:      #4ade80;
  --en-emerald:    #34d399;
  --en-indigo:     #818cf8;
  --en-amber:      #fbbf24;
  --en-rose:       #fb7185;
  --en-red:        #f87171;
  --en-sky:        #38bdf8;
  --en-radius:     14px;
  --en-radius-lg:  20px;
  --en-radius-sm:  10px;
  --en-grad:       linear-gradient(135deg, var(--en-cyan), var(--en-violet));
  --en-grad2:      linear-gradient(to right, var(--en-cyan), var(--en-violet));
}

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--en-bg); }
::-webkit-scrollbar-thumb { background: rgba(34,211,238,0.2); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,0.4); }

/* ── Base / Body ────────────────────────────────────────────── */
body,
html {
  background-color: var(--en-bg) !important;
  color: var(--en-text);
  font-family: 'Poppins', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.dark-mode {
  background-color: var(--en-bg) !important;
  color: var(--en-text);
}

/* ── Content wrapper / main areas ──────────────────────────── */
.content-wrapper,
.dark-mode .content-wrapper {
  background-color: var(--en-bg) !important;
  color: var(--en-text);
}

.dark-mode .content-wrapper .content-header { color: var(--en-text); }

body:not(.sidebar-mini-md) .content-wrapper,
body:not(.sidebar-mini-md) .main-footer,
body:not(.sidebar-mini-md) .main-header {
  transition: margin-left .3s ease-in-out;
  background: var(--en-bg);
}

/* ── Main header / navbar ───────────────────────────────────── */
.main-header,
.dark-mode .main-header {
  background: rgba(10,13,21,0.96) !important;
  border-bottom: 1px solid var(--en-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1034;
}

.navbar-dark .navbar-nav .nav-link,
.dark-mode .navbar-nav .nav-link { color: var(--en-text2); }
.navbar-dark .navbar-nav .nav-link:hover { color: var(--en-text); }

/* Navbar search */
.dark-mode .navbar-dark .form-control-navbar,
.dark-mode .navbar-dark .btn-navbar {
  background-color: rgba(255,255,255,0.05);
  border: 1px solid var(--en-border);
  color: var(--en-text);
  border-radius: var(--en-radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.dark-mode .navbar-dark .form-control-navbar::placeholder { color: var(--en-text3); }
.dark-mode .navbar-dark .form-control-navbar:focus,
.dark-mode .navbar-dark .form-control-navbar:focus + .input-group-append .btn-navbar {
  background-color: rgba(34,211,238,0.06) !important;
  border-color: rgba(34,211,238,0.35) !important;
  box-shadow: 0 0 0 3px var(--en-cyan-dim) !important;
  color: var(--en-text);
}

/* User menu dropdown */
.dark-mode .navbar-nav>.user-menu>.dropdown-menu { background-color: var(--en-bg1); border: 1px solid var(--en-border); }
.dark-mode .navbar-nav>.user-menu>.dropdown-menu>.user-body { border-color: var(--en-border); }
.dark-mode .navbar-nav>.user-menu>.dropdown-menu>.user-body a { background-color: transparent !important; color: var(--en-text2) !important; }
.dark-mode .navbar-nav>.user-menu>.dropdown-menu>.user-body a:hover { color: var(--en-cyan) !important; }
.dark-mode .navbar-nav>.user-menu>.dropdown-menu>.user-footer { background-color: rgba(10,13,21,0.85); color: var(--en-text); }
.dark-mode .navbar-nav>.user-menu>.dropdown-menu>.user-footer .btn-default { color: var(--en-text2); }

/* ── Footer base reset — variants handle their own styles ─────── */
.main-footer,
.dark-mode .main-footer {
  background-color: var(--en-bg) !important;
  border-top: none;
  color: var(--en-text2);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.main-sidebar,
[class*=sidebar-dark-] {
  background-color: var(--en-bg) !important;
  border-right: 1px solid var(--en-border);
}

.layout-fixed .wrapper .sidebar { height: calc(100vh - 3.5rem - 1px); background: var(--en-bg); }

[class*=sidebar-dark] .brand-link,
[class*=sidebar-dark] .brand-link .pushmenu {
  color: var(--en-text);
  background: var(--en-bg);
  border-bottom: 1px solid var(--en-border);
}
[class*=sidebar-dark] .brand-link:hover { color: var(--en-text); text-decoration: none; }

.main-sidebar .brand-text,
.main-sidebar .logo-xl,
.main-sidebar .logo-xs,
.sidebar .nav-link p,
.sidebar .user-panel .info {
  transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease;
  color: var(--en-text);
}

[class*=sidebar-dark-] .sidebar a { color: var(--en-text2); }
[class*=sidebar-dark-] .sidebar a:hover { color: var(--en-text); text-decoration: none; }

[class*=sidebar-dark-] .user-panel { border-bottom: 1px solid var(--en-border); }

/* Section headers */
[class*=sidebar-dark-] .nav-header {
  color: var(--en-text2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  background-color: transparent;
  padding: 20px 16px 6px;
}

/* Nav items — flat, no border-radius pill */
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link {
  color: var(--en-text2);
  border-radius: 0;
  margin: 0;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 400;
  border-left: 3px solid transparent;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:active { color: var(--en-text2); }
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link .nav-icon {
  color: var(--en-text3);
  transition: color 0.15s;
  font-size: 1rem;
  width: 1.4rem;
}

/* Hover */
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
  background-color: rgba(255,255,255,0.04);
  color: var(--en-text);
  border-left-color: transparent;
}
[class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link .nav-icon,
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link .nav-icon {
  color: var(--en-text2);
}

/* Active — left accent bar, white text, no bg pill */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
body.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
  color: var(--en-text) !important;
  background: rgba(255,255,255,0.05) !important;
  background-image: none !important;
  border-left: 3px solid var(--en-cyan) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active .nav-icon,
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active p,
.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active .nav-icon,
.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active p {
  color: var(--en-text) !important;
}

/* Treeview */
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link {
  color: var(--en-text3);
  padding-left: 36px;
  border-left: 3px solid transparent;
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:hover,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:focus {
  background-color: rgba(255,255,255,0.03);
  color: var(--en-text2);
}
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
  background-color: rgba(255,255,255,0.04);
  color: var(--en-text);
  border-left-color: var(--en-cyan);
}

/* ── Cards ──────────────────────────────────────────────────── */
.dark-mode .card {
  background-color: var(--en-card) !important;
  color: var(--en-text);
  border: 1px solid var(--en-border) !important;
  border-radius: var(--en-radius) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

.dark-mode .card .card {
  background-color: var(--en-card2) !important;
  border-color: var(--en-border) !important;
}

.dark-mode .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--en-border);
  border-top-left-radius: var(--en-radius) !important;
  border-top-right-radius: var(--en-radius) !important;
}

.dark-mode .card-footer {
  background-color: rgba(0,0,0,0.15);
  border-top: 1px solid var(--en-border);
}

.card-title {
  float: left;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--en-text);
  padding: 10px 0;
  letter-spacing: .01em;
}

.btn-tool { color: var(--en-text3); }
.btn-tool:hover { color: var(--en-cyan); }

/* Colored card headers */
.dark-mode .card-primary:not(.card-outline)>.card-header { background: var(--en-grad2); color: #030c14; }
.dark-mode .card-info:not(.card-outline)>.card-header { background: var(--en-grad2); color: #030c14; }
.dark-mode .card-success:not(.card-outline)>.card-header { background-color: var(--en-green); color: #030c14; }
.dark-mode .card-danger:not(.card-outline)>.card-header { background-color: var(--en-rose); color: #fff; }
.dark-mode .card-warning:not(.card-outline)>.card-header { background-color: var(--en-amber); color: #030c14; }
.dark-mode .card-dark:not(.card-outline)>.card-header { background-color: var(--en-bg2); color: var(--en-text); }
.dark-mode .card-outline { border-top: 3px solid var(--en-cyan) !important; }
.dark-mode .card:not(.card-outline)>.card-header a.active { color: #030c14; }
.dark-mode .card.card-outline-tabs .card-header a:hover { border-color: var(--en-border); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { border-radius: var(--en-radius-sm); font-weight: 500; transition: all .2s; }

/* Primary — cyan→violet gradient */
.btn-primary,
.bg-primary.btn {
  color: #030c14 !important;
  background: var(--en-grad2) !important;
  border: none !important;
  box-shadow: 0 0 16px var(--en-cyan-glow);
  font-weight: 600;
}
.btn-primary:hover,.btn-primary:focus { color: #030c14 !important; opacity: .9; box-shadow: 0 0 22px var(--en-cyan-glow); }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active { opacity: .85; box-shadow: none; }

/* Info → mapped to emerald green like the site's CTA */
.btn-info {
  color: #030c14;
  background-color: var(--en-emerald);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: var(--en-radius-sm);
  box-shadow: 0 0 10px var(--en-emerald-dim, rgba(52,211,153,0.1));
  font-weight: 600;
}
.btn-info:hover,.btn-info:focus { color: #030c14; background-color: #3de6a8; border-color: rgba(52,211,153,0.5); }

/* Success */
.btn-success {
  color: #030c14;
  background-color: var(--en-green);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: var(--en-radius-sm);
  font-weight: 600;
}
.btn-success:hover { color: #030c14; background-color: #5fe891; }

/* Warning */
.btn-warning {
  color: #030c14;
  background-color: var(--en-amber);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: var(--en-radius-sm);
  font-weight: 600;
}
.btn-warning:hover { color: #030c14; background-color: #fcc935; }

/* Danger */
.btn-danger {
  color: #fff;
  background-color: var(--en-rose);
  border: 1px solid rgba(251,113,133,0.3);
  border-radius: var(--en-radius-sm);
}
.btn-danger:hover { color: #fff; background-color: #fc8fa0; }

/* Secondary / default */
.btn-secondary,
.btn-default,
.dark-mode .btn-default,
.dark-mode .btn-app {
  color: var(--en-text2);
  background-color: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--en-border2) !important;
  border-radius: var(--en-radius-sm);
}
.btn-secondary:hover,
.btn-default:hover,
.dark-mode .btn-default:hover,
.dark-mode .btn-app:hover {
  background-color: rgba(34,211,238,0.08) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: var(--en-cyan);
}

.dark-mode .btn-light {
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--en-border2) !important;
  color: var(--en-text);
}
.dark-mode .btn-light:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: var(--en-text);
}

/* ── Forms ──────────────────────────────────────────────────── */
.dark-mode .form-control,
.dark-mode .custom-select,
.dark-mode .input-group-text {
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--en-border2);
  color: var(--en-text);
  border-radius: var(--en-radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.dark-mode .form-control:not(.form-control-navbar):not(.is-invalid):not(:focus),
.dark-mode select { border-color: var(--en-border2); }

.dark-mode .form-control:focus {
  background-color: rgba(34,211,238,0.04);
  border-color: rgba(34,211,238,0.4) !important;
  box-shadow: 0 0 0 3px var(--en-cyan-dim) !important;
  color: var(--en-text);
  outline: none;
}
.dark-mode .form-control::placeholder { color: var(--en-text3); }
.dark-mode .form-control:-ms-input-placeholder { color: var(--en-text3); }

.dark-mode select { background-color: rgba(255,255,255,0.04); color: var(--en-text); }
.dark-mode .input-group-text { border-color: var(--en-border2); background-color: rgba(255,255,255,0.03); color: var(--en-text2); }
.dark-mode .custom-control-label:before { background-color: rgba(255,255,255,0.04); border-color: var(--en-border2); }
.dark-mode .custom-file-label { background-color: rgba(255,255,255,0.04); border-color: var(--en-border2); color: var(--en-text); }
.dark-mode .custom-control-input:disabled~.custom-control-label:before,
.dark-mode .custom-control-input[disabled]~.custom-control-label:before { background-color: rgba(255,255,255,0.02); border-color: var(--en-border); }

label:not(.form-check-label):not(.custom-file-label) { font-weight: 600; color: var(--en-text2); }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { border-radius: var(--en-radius-sm); }
.alert-success { color: var(--en-green); background-color: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); }
.alert-info { color: var(--en-cyan); background-color: var(--en-cyan-dim); border: 1px solid rgba(34,211,238,0.2); }
.alert-warning { color: var(--en-amber); background-color: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); }
.alert-danger { color: var(--en-rose); background-color: rgba(251,113,133,0.08); border: 1px solid rgba(251,113,133,0.2); }

/* ── Info boxes & small boxes ───────────────────────────────── */
.dark-mode .info-box {
  background-color: var(--en-card);
  color: var(--en-text);
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.dark-mode .small-box {
  border-radius: var(--en-radius);
  background-color: var(--en-card);
  border: 1px solid var(--en-border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.dark-mode .small-box>.small-box-footer { background-color: rgba(0,0,0,0.2); color: var(--en-text3); }
.dark-mode .small-box:hover { border-color: rgba(34,211,238,0.2); box-shadow: 0 0 22px var(--en-cyan-glow); }

/* ── Tables ──────────────────────────────────────────────────── */
.dark-mode .table { background-color: transparent; color: var(--en-text); }
.dark-mode .table td, .dark-mode .table th { border-top: 1px solid var(--en-border); color: var(--en-text2); }
.dark-mode .table thead th { border-bottom: 1px solid var(--en-border2); color: var(--en-text); font-weight: 600; }
.dark-mode .table-hover tbody tr:hover { background-color: rgba(34,211,238,0.04); color: var(--en-text); }
.dark-mode .table-bordered, .dark-mode .table-bordered td, .dark-mode .table-bordered th { border-color: var(--en-border); }
.dark-mode .table.table-head-fixed thead tr:first-child th {
  background-color: var(--en-bg1);
  box-shadow: inset 0 1px 0 var(--en-border), inset 0 -1px 0 var(--en-border);
}
.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02); }

/* ── Text ────────────────────────────────────────────────────── */
.dark-mode .text-muted { color: var(--en-text2) !important; }
.text-primary { color: var(--en-cyan) !important; }
a.text-primary:hover { color: var(--en-violet) !important; }
.dark-mode a:not(.btn):hover { color: var(--en-cyan); }

/* ── Dropdowns ───────────────────────────────────────────────── */
.dark-mode .dropdown-menu {
  background-color: rgba(15,21,28,0.99);
  border: 1px solid var(--en-border2);
  border-radius: var(--en-radius-sm);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(16px);
  color: var(--en-text);
}
.dark-mode .dropdown-item { color: var(--en-text2); }
.dark-mode .dropdown-item:hover, .dark-mode .dropdown-item:focus {
  background-color: rgba(34,211,238,0.07);
  color: var(--en-cyan);
}
.dark-mode .dropdown-item.active, .dark-mode .dropdown-item:active {
  background: var(--en-grad2);
  color: #030c14;
}
.dark-mode .dropdown-divider { border-color: var(--en-border); }

/* ── Modals ──────────────────────────────────────────────────── */
.dark-mode .modal-content {
  background-color: var(--en-bg1);
  border: 1px solid var(--en-border2);
  border-radius: var(--en-radius);
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(34,211,238,0.08);
}
.dark-mode .modal-header { border-bottom: 1px solid var(--en-border); color: var(--en-text); }
.dark-mode .modal-footer { border-top: 1px solid var(--en-border); }
.dark-mode .modal-backdrop.show { opacity: .7; background-color: #0A0D15; }
.dark-mode .close, .dark-mode .mailbox-attachment-close { color: var(--en-text2); text-shadow: none; opacity: .7; }
.dark-mode .close:hover { color: var(--en-cyan); opacity: 1; }

/* ── Pagination ──────────────────────────────────────────────── */
.dark-mode .page-item:not(.active) .page-link {
  background-color: rgba(255,255,255,0.04);
  border-color: var(--en-border2);
  color: var(--en-text2);
  transition: all .2s;
}
.dark-mode .page-item:not(.active) .page-link:hover { background-color: var(--en-cyan-dim); border-color: rgba(34,211,238,0.25); color: var(--en-cyan); }
.dark-mode .page-item.active .page-link { background: var(--en-grad2); border-color: transparent; color: #030c14; font-weight: 600; box-shadow: 0 0 10px var(--en-cyan-glow); }
.dark-mode .page-item.disabled .page-link { background-color: rgba(255,255,255,0.02); border-color: var(--en-border); color: var(--en-text3); }

/* ── Nav tabs & pills ────────────────────────────────────────── */
.dark-mode .nav-tabs { border-bottom: 1px solid var(--en-border); }
.dark-mode .nav-tabs .nav-link { color: var(--en-text2); border-color: transparent; }
.dark-mode .nav-tabs .nav-link:hover, .dark-mode .nav-tabs .nav-link:focus { border-color: var(--en-border); color: var(--en-text); }
.dark-mode .nav-tabs .nav-item.show .nav-link, .dark-mode .nav-tabs .nav-link.active {
  background-color: rgba(34,211,238,0.06);
  border-color: var(--en-border) var(--en-border) transparent;
  color: var(--en-cyan);
}
.dark-mode .nav-pills .nav-link { color: var(--en-text2); border-radius: var(--en-radius-sm); }
.dark-mode .nav-pills .nav-link.active { background: var(--en-grad2); color: #030c14; font-weight: 600; }

/* ── List groups ─────────────────────────────────────────────── */
.dark-mode .list-group-item {
  background-color: rgba(255,255,255,0.03);
  border-color: var(--en-border);
  color: var(--en-text2);
}
.dark-mode .list-group-item:hover { background-color: rgba(34,211,238,0.05); color: var(--en-text); }
.dark-mode .list-group-item.active { background: var(--en-grad2); border-color: transparent; color: #030c14; font-weight: 600; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge-primary { background: var(--en-grad2); color: #030c14 !important; }
.badge-success { background-color: rgba(74,222,128,0.15); color: var(--en-green) !important; border: 1px solid rgba(74,222,128,0.2); }
.badge-info { background-color: var(--en-cyan-dim); color: var(--en-cyan) !important; border: 1px solid rgba(34,211,238,0.2); }
.badge-warning { background-color: rgba(251,191,36,0.12); color: var(--en-amber) !important; border: 1px solid rgba(251,191,36,0.2); }
.badge-danger { background-color: rgba(251,113,133,0.12); color: var(--en-rose) !important; border: 1px solid rgba(251,113,133,0.2); }
.badge-secondary { background-color: rgba(255,255,255,0.07); color: var(--en-text2) !important; }

/* ── Progress ────────────────────────────────────────────────── */
.dark-mode .progress { background-color: rgba(255,255,255,0.06); border-radius: 100px; }
.dark-mode .progress-bar { background: var(--en-grad2); border-radius: 100px; box-shadow: 0 0 8px var(--en-cyan-glow); }

/* ── Timeline ────────────────────────────────────────────────── */
.dark-mode .timeline:before { background-color: var(--en-border2); }
.dark-mode .timeline>div>.timeline-item { background-color: var(--en-card); border: 1px solid var(--en-border); color: var(--en-text); border-radius: var(--en-radius-sm); }
.dark-mode .timeline>div>.timeline-item>.timeline-header { color: var(--en-text); border-color: var(--en-border); }
.dark-mode .timeline>div>.timeline-item>.time { color: var(--en-text2); }

/* ── Select2 ─────────────────────────────────────────────────── */
.dark-mode .select2-selection { background-color: rgba(255,255,255,0.04); border-color: var(--en-border2) !important; border-radius: var(--en-radius-sm) !important; }
.dark-mode .select2-selection--single { background-color: rgba(255,255,255,0.04); border-color: var(--en-border2); }
.dark-mode .select2-selection--single .select2-selection__rendered { color: var(--en-text); }
.dark-mode .select2-dropdown, .dark-mode .select2-dropdown .select2-search__field, .dark-mode .select2-search--inline .select2-search__field { background-color: var(--en-bg1); border-color: var(--en-border2); color: var(--en-text); }
.dark-mode .select2-results__option[aria-selected=true] { background-color: rgba(34,211,238,0.08); color: var(--en-text); }
.dark-mode .select2-container--default .select2-results__option--highlighted { background: var(--en-grad2); color: #030c14; }
.dark-mode .select2-container { border-radius: var(--en-radius-sm); }

/* ── Direct chat ─────────────────────────────────────────────── */
.dark-mode .direct-chat-text { background-color: rgba(255,255,255,0.05); border-color: var(--en-border2); color: var(--en-text); border-radius: var(--en-radius-sm); }
.dark-mode .direct-chat-text:before,.dark-mode .direct-chat-text:after { border-right-color: var(--en-border2); }
.dark-mode .direct-chat-timestamp { color: var(--en-text3); }

/* ── Bootstrap switch ────────────────────────────────────────── */
.dark-mode .bootstrap-switch { border-color: var(--en-border2); border-radius: var(--en-radius-sm); }
.dark-mode .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.dark-mode .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { background: var(--en-grad2); color: #030c14; }

/* ── Toasts ──────────────────────────────────────────────────── */
.dark-mode .toast { background-color: rgba(15,21,28,0.97); border: 1px solid var(--en-border2); color: var(--en-text); border-radius: var(--en-radius-sm); backdrop-filter: blur(12px); }
.dark-mode .toast .toast-header { background-color: rgba(10,13,21,0.85); color: var(--en-text2); border-bottom-color: var(--en-border); }

/* ── Callouts ────────────────────────────────────────────────── */
.dark-mode .callout { background-color: var(--en-card); border-left-color: var(--en-cyan); border-radius: var(--en-radius-sm); }
.dark-mode .callout a { color: var(--en-cyan); }

/* ── bg- utilities ───────────────────────────────────────────── */
.bg-primary { background: var(--en-grad2) !important; color: #030c14 !important; }
.bg-success { background-color: rgba(74,222,128,0.12) !important; color: var(--en-green) !important; }
.bg-info { background-color: var(--en-cyan-dim) !important; color: var(--en-cyan) !important; }
.bg-warning { background-color: rgba(251,191,36,0.12) !important; color: var(--en-amber) !important; }
.bg-danger { background-color: rgba(251,113,133,0.12) !important; color: var(--en-rose) !important; }

/* ── Cards specific color tweaks for dark-mode bg overrides ─── */
.dark-mode .card-comments { background-color: rgba(255,255,255,0.02); }
.dark-mode .card-comments .username { color: var(--en-text); }
.dark-mode .card-comments .card-comment { border-bottom-color: var(--en-border); }
.dark-mode .todo-list>li { background-color: rgba(255,255,255,0.03); border-color: var(--en-border2); color: var(--en-text); }

/* ── Login / register pages ──────────────────────────────────── */
.login-page, .register-page { background-color: var(--en-bg); }
.login-card-body, .register-card-body { background-color: var(--en-bg1); border-color: var(--en-border); color: var(--en-text); }
.dark-mode .login-card-body, .dark-mode .register-card-body { background-color: var(--en-bg1); border-color: var(--en-border); color: var(--en-text); }
.login-logo a, .register-logo a { color: var(--en-text); }
.dark-mode .login-logo a, .dark-mode .register-logo a { color: var(--en-text); }

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.dark-mode .breadcrumb { background-color: transparent; }
.dark-mode .breadcrumb-item+.breadcrumb-item:before, .dark-mode .breadcrumb-item.active { color: var(--en-text2); }

/* ── iCheck ──────────────────────────────────────────────────── */
.dark-mode [class*=icheck-]>input:first-child:not(:checked)+input[type=hidden]+label:before,
.dark-mode [class*=icheck-]>input:first-child:not(:checked)+label:before { border-color: var(--en-border2); }
.icheck-primary>input:first-child:checked+input[type=hidden]+label:before,
.icheck-primary>input:first-child:checked+label:before { background-color: var(--en-cyan); border-color: var(--en-cyan); }

/* ── Overlay ─────────────────────────────────────────────────── */
.dark-mode .card>.overlay, .dark-mode .card .overlay { background-color: rgba(10,13,21,0.80); }
.dark-mode .card>.overlay.dark, .dark-mode .card .overlay.dark { background-color: rgba(10,13,21,0.93); }

/* ── Content header — match website section headings ────────── */
.content-header { padding: 20px 16px 0; }
.content-header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--en-text);
  margin: 0;
}
.content-header .breadcrumb { background: transparent; padding: 0; margin: 0; }
.content-header .breadcrumb-item a { color: var(--en-text2); font-size: 0.8rem; }
.content-header .breadcrumb-item.active { color: var(--en-text3); font-size: 0.8rem; }
.content-header .breadcrumb-item + .breadcrumb-item::before { color: var(--en-text3); }

/* ── Info-box icons — exact website card icon look ───────────── */
.dark-mode .info-box-icon {
  border-radius: var(--en-radius-sm) 0 0 var(--en-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  width: 72px;
}
.dark-mode .info-box-icon.bg-info {
  background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(34,211,238,0.08)) !important;
  color: var(--en-cyan) !important;
  border-right: 1px solid rgba(34,211,238,0.15);
}
.dark-mode .info-box-icon.bg-secondary {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(167,139,250,0.08)) !important;
  color: var(--en-violet) !important;
  border-right: 1px solid rgba(167,139,250,0.15);
}
.dark-mode .info-box-icon.bg-success {
  background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(74,222,128,0.08)) !important;
  color: var(--en-green) !important;
  border-right: 1px solid rgba(74,222,128,0.15);
}
.dark-mode .info-box-icon.bg-warning {
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.08)) !important;
  color: var(--en-amber) !important;
  border-right: 1px solid rgba(251,191,36,0.15);
}
.dark-mode .info-box-icon.bg-danger {
  background: linear-gradient(135deg, rgba(251,113,133,0.18), rgba(251,113,133,0.08)) !important;
  color: var(--en-rose) !important;
  border-right: 1px solid rgba(251,113,133,0.15);
}
.dark-mode .info-box-text { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--en-text2); }
.dark-mode .info-box-number { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--en-text); line-height: 1.1; }

/* ── Sidebar brand logo rounded ─────────────────────────────── */
.brand-image { border-radius: 9px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: var(--en-bg1) !important; }

/* ── Wrapper background ──────────────────────────────────────── */
.wrapper { background: var(--en-bg) !important; }

/* ── Section content padding ─────────────────────────────────── */
.content { padding: 16px; }

/* ── Card hover subtle glow ──────────────────────────────────── */
.dark-mode .card { transition: border-color 0.2s, box-shadow 0.2s; }
.dark-mode .card:hover { border-color: rgba(34,211,238,0.12) !important; }

/* ── Card header title eyebrow style ────────────────────────── */
.dark-mode .card-header .card-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--en-text2);
  padding: 0;
}
.dark-mode .card-header .card-title i { color: var(--en-cyan); margin-right: 8px; }

/* ── Navbar brand text ───────────────────────────────────────── */
.brand-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.3px;
  color: var(--en-text) !important;
}

/* ── Main header nav links ───────────────────────────────────── */
.main-header .nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s;
}

/* ── Small box number font ───────────────────────────────────── */
.dark-mode .small-box h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── List group flush items ──────────────────────────────────── */
.dark-mode .list-group-flush .list-group-item {
  background: transparent;
  border-color: var(--en-border);
  padding: 10px 0;
  font-size: 0.85rem;
}

/* ── Alerts in list ──────────────────────────────────────────── */
.dark-mode .alert .alert-link { color: var(--en-cyan); }

/* ── Tables font ─────────────────────────────────────────────── */
.dark-mode .table td, .dark-mode .table th { font-size: 0.85rem; }


/* ── Full footer (home page only) ────────────────────────────── */
.en-footer-full {
  background: var(--en-bg) !important;
  border-top: none !important;
  padding: 56px 48px 0;
  color: var(--en-text2);
}
.en-brand-section { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 40px; }
.en-brand-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.en-brand-img { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; background: var(--en-bg1); border: 1px solid rgba(34,211,238,0.15); }
.en-brand-name { font-weight: 800; font-size: 1.5rem; color: var(--en-text); letter-spacing: -0.03em; }
.en-tagline { font-size: 0.85rem; color: rgba(143,163,184,0.55); max-width: 400px; line-height: 1.7; margin: 0; }
.en-nav-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); padding: 40px 0; }
.en-nav-toggle { width: 100%; background: none; border: none; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(238,242,247,0.45); cursor: pointer; text-align: left; transition: color 0.2s; }
.en-nav-toggle svg { transition: transform 0.25s; opacity: 0.5; flex-shrink: 0; }
.en-nav-toggle:hover { color: rgba(238,242,247,0.75); }
.en-nav-toggle.open svg { transform: rotate(180deg); }
.en-nav-list { list-style: none; padding: 16px 0 0; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.en-nav-list a { font-size: 0.83rem; color: rgba(143,163,184,0.6); text-decoration: none; transition: color 0.2s, padding-left 0.2s; display: block; }
.en-nav-list a:hover { color: rgba(238,242,247,0.85); padding-left: 4px; }
.en-bottom-strip { max-width: 1160px; margin: 0 auto; padding: 20px 0; display: flex; align-items: center; justify-content: center; border: none; }
.en-bottom-strip p { font-size: 0.75rem; color: rgba(143,163,184,0.35); letter-spacing: 0.02em; margin: 0; }

@media (max-width: 768px) {
  .en-footer-full { padding: 44px 20px 0; }
  .en-nav-grid { grid-template-columns: 1fr; padding: 0; }
  .en-nav-list { display: none; padding: 12px 0 16px; }
  .en-nav-list.open { display: flex; }
  .en-nav-group { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .en-nav-toggle { border-bottom: none; padding: 14px 0; }
}
@media (min-width: 769px) {
  .en-nav-list { display: flex !important; }
  .en-nav-toggle { cursor: default; pointer-events: none; border-bottom: none; padding-bottom: 14px; }
}

/* ── Slim footer (all other pages) ──────────────────────────── */
.en-footer-slim {
  background: var(--en-bg) !important;
  border-top: 1px solid var(--en-border) !important;
  padding: 14px 24px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-height: unset !important;
}
.en-slim-copy {
  font-size: 0.75rem;
  color: var(--en-text3);
  letter-spacing: 0.01em;
}
.en-slim-links {
  display: flex;
  gap: 16px;
}
.en-slim-links a {
  font-size: 0.75rem;
  color: var(--en-text3);
  text-decoration: none;
  transition: color 0.2s;
}
.en-slim-links a:hover { color: var(--en-text2); }
@media (max-width: 576px) {
  .en-footer-slim { justify-content: center; text-align: center; }
}