/* ═══════════════════════════════════════════════════════════════
   SB-MaterialAdmin — Dark Theme  v4.0 FINAL
   Полное покрытие всех страниц и элементов
   ═══════════════════════════════════════════════════════════════ */

/* ══ CSS Variables ═══════════════════════════════════════════ */
body.dark-mode {
  --dm-bg:        #0d0f1a;
  --dm-surface:   #13172b;
  --dm-s2:        #1c2038;
  --dm-s3:        #242946;
  --dm-s4:        #2d3357;
  --dm-border:    #2c3260;
  --dm-border2:   #3a4080;
  --dm-text:      #d8e0f0;
  --dm-text2:     #aab4cc;
  --dm-muted:     #6a7590;
  --dm-accent:    #5865f2;
  --dm-accent2:   #7289da;
  --dm-accent3:   #99aaf5;
  --dm-glow:      rgba(88,101,242,.22);
  --dm-hover:     rgba(88,101,242,.10);
  --dm-sel:       rgba(88,101,242,.18);
  --dm-ok:        #3ba55d;
  --dm-err:       #ed4245;
  --dm-warn:      #faa61a;
  --dm-info:      #00b0f4;
  --dm-shadow:    0 8px 32px rgba(0,0,0,.6);
  --sb-border:    #2c3260;
}

/* ══ Transitions ═════════════════════════════════════════════ */
body.dark-mode *, body.dark-mode *::before, body.dark-mode *::after {
  transition: background-color .15s, border-color .15s, color .1s !important;
}

/* ══════════════════════════════════════════════════════════════
   1. BASE
══════════════════════════════════════════════════════════════ */
body.dark-mode {
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}
body.dark-mode #main > section.content { background: var(--dm-bg) !important; }

/* ══ NUCLEAR: kill every inline white/light bg ═══════════════
   Attribute selectors target ALL inline-style white backgrounds.
   These must come FIRST so specific rules can override them.  */
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background:#fafafa"],
body.dark-mode [style*="background: #fafafa"],
body.dark-mode [style*="background:#f9f9f9"],
body.dark-mode [style*="background:#f7f7f7"],
body.dark-mode [style*="background:#f5f5f5"],
body.dark-mode [style*="background: #f5f5f5"],
body.dark-mode [style*="background:#f4f4f4"],
body.dark-mode [style*="background:#eeeeee"],
body.dark-mode [style*="background:#eee"],
body.dark-mode [style*="background-color:#fafafa"],
body.dark-mode [style*="background-color:#f5f5f5"],
body.dark-mode [style*="background-color:#f4f4f4"],
body.dark-mode [style*="background-color:#eaeaea"] {
  background-color: var(--dm-s2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
/* Coloured inline info blocks */
body.dark-mode [style*="background:#fff3e0"],body.dark-mode [style*="background:#fff8e1"],
body.dark-mode [style*="background:#fff3cd"] {
  background: rgba(250,166,26,.08) !important;
  color: #ffd280 !important;
}
body.dark-mode [style*="background:#e3f2fd"],body.dark-mode [style*="background: #e3f2fd"] {
  background: rgba(0,176,244,.08) !important;
  color: #80d4f9 !important;
}
body.dark-mode [style*="background:#ffebee"],body.dark-mode [style*="background:#ffe5e5"] {
  background: rgba(237,66,69,.08) !important;
  color: #f99 !important;
}
body.dark-mode [style*="background:#e8f5e9"] {
  background: rgba(59,165,93,.08) !important;
  color: #80cba0 !important;
}

/* ══ Custom sb-* utility classes (set in TPL/PHP fixes) ══════ */
body.dark-mode .sb-info-warn    { background: rgba(250,166,26,.09) !important; border-color: rgba(250,166,26,.3) !important; color: #ffd280 !important; }
body.dark-mode .sb-info-blue    { background: rgba(0,176,244,.09) !important;  border-color: rgba(0,176,244,.3) !important;  color: #80d4f9 !important; }
body.dark-mode .sb-info-danger  { background: rgba(237,66,69,.09) !important;  border-color: rgba(237,66,69,.3) !important;  color: #f99 !important; }
body.dark-mode .sb-block-neutral{ background: var(--dm-s2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
body.dark-mode .sb-block-header { background: var(--dm-s2) !important; color: var(--dm-text2) !important; }
body.dark-mode .sb-block-footer { background: var(--dm-s2) !important; border-top-color: var(--dm-border) !important; }
body.dark-mode .sb-ban-footer   { background: var(--dm-s2) !important; border-top-color: var(--dm-border) !important; }
body.dark-mode .sb-tickets-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
body.dark-mode .sb-dark-thead th { background: var(--dm-s3) !important; color: var(--dm-accent3) !important; border-color: var(--dm-border) !important; }
body.dark-mode .sb-dark-thead   { background: var(--dm-s3) !important; }

/* ══════════════════════════════════════════════════════════════
   2. HEADER
══════════════════════════════════════════════════════════════ */
body.dark-mode #header {
  background: linear-gradient(135deg,#0d0f1a,#13172b) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.6) !important;
}
body.dark-mode #header .top-menu>li>a,
body.dark-mode #header .logo a,
body.dark-mode #header a { color: #8899bb !important; }
body.dark-mode #header .top-menu>li>a:hover,
body.dark-mode #header a:hover { color: #fff !important; }
body.dark-mode .line-wrap .line { background: #8899bb !important; }

/* ══════════════════════════════════════════════════════════════
   3. SIDEBAR
══════════════════════════════════════════════════════════════ */
body.dark-mode #sidebar {
  background: linear-gradient(180deg,#0d0f1a,#11152a) !important;
  border-right: 1px solid var(--dm-border) !important;
}
body.dark-mode #sidebar .profile-menu>a { background:rgba(0,0,0,.3) !important; border-bottom:1px solid var(--dm-border) !important; }
body.dark-mode #sidebar .profile-menu .profile-info { color:#8899bb !important; }
body.dark-mode #sidebar .profile-menu .profile-info mark { background:rgba(88,101,242,.25) !important; color:var(--dm-accent3) !important; padding:1px 7px; border-radius:3px; }
body.dark-mode #sidebar .main-menu>li>a { color:var(--dm-muted) !important; border-bottom:1px solid rgba(255,255,255,.03) !important; }
body.dark-mode #sidebar .main-menu>li>a:hover,
body.dark-mode #sidebar .main-menu>li.active>a { background:rgba(88,101,242,.12) !important; color:#fff !important; border-left:3px solid var(--dm-accent) !important; }
body.dark-mode #sidebar .main-menu>li>a .zmdi { color:var(--dm-accent2) !important; }
body.dark-mode #sidebar .main-menu .sub-menu { background:rgba(0,0,0,.2) !important; border-top:1px solid var(--dm-border) !important; }
body.dark-mode #sidebar .main-menu .sub-menu li a { color:var(--dm-muted) !important; border-bottom:1px solid rgba(255,255,255,.02) !important; }
body.dark-mode #sidebar .main-menu .sub-menu li a:hover { color:#b0c4de !important; }
body.dark-mode #sidebar .main-menu .sub-menu li a::before { background:var(--dm-accent) !important; }

/* ══════════════════════════════════════════════════════════════
   4. CARDS / PANELS
══════════════════════════════════════════════════════════════ */
body.dark-mode .card, body.dark-mode .panel {
  background: var(--dm-surface) !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--dm-shadow) !important;
  overflow: hidden;
}
body.dark-mode .card-header, body.dark-mode .panel-heading {
  background: linear-gradient(135deg,var(--dm-s2),var(--dm-s3)) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  position: relative;
}
body.dark-mode .card-header::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,101,242,.35),transparent);
}
body.dark-mode .card-header h2,body.dark-mode .card-header h3,
body.dark-mode .panel-heading h2,body.dark-mode .panel-heading h3 { color:var(--dm-accent3) !important; }
body.dark-mode .card-header h2 small, body.dark-mode .card-header small { color:var(--dm-muted) !important; }
body.dark-mode .card-body, body.dark-mode .panel-body { background:var(--dm-surface) !important; }
body.dark-mode .card-footer, body.dark-mode .panel-footer { background:var(--dm-s2) !important; border-top:1px solid var(--dm-border) !important; }
body.dark-mode .content-header { background:var(--dm-surface) !important; border-bottom:1px solid var(--dm-border) !important; }
body.dark-mode .content-header h2 { color:var(--dm-text) !important; }
body.dark-mode .content-header .breadcrumb>li+li::before { color:var(--dm-muted) !important; }
body.dark-mode .content-header .breadcrumb>li>a { color:var(--dm-accent2) !important; }
body.dark-mode .content-header .breadcrumb>.active { color:var(--dm-text) !important; }

/* ══════════════════════════════════════════════════════════════
   5. TABLES
══════════════════════════════════════════════════════════════ */
body.dark-mode table, body.dark-mode .table {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .table thead th, body.dark-mode table thead th,
body.dark-mode .table tfoot td {
  background: linear-gradient(135deg,var(--dm-s3),var(--dm-s4)) !important;
  border-bottom: 2px solid var(--dm-border2) !important;
  color: var(--dm-accent3) !important;
  font-weight: 600; letter-spacing:.5px; text-transform:uppercase; font-size:.8em;
}
body.dark-mode .bootgrid-table th:hover { background:var(--dm-s4) !important; }
body.dark-mode .bootgrid-table .column-header-anchor { color:var(--dm-accent3) !important; }
body.dark-mode .table td, body.dark-mode .table th,
body.dark-mode table td, body.dark-mode table th { border-color:var(--dm-border) !important; color:var(--dm-text) !important; }
body.dark-mode .table tbody tr, body.dark-mode table tbody tr { background:var(--dm-surface) !important; }
body.dark-mode .table tbody tr:nth-child(even), body.dark-mode table tbody tr:nth-child(even) { background:rgba(255,255,255,.02) !important; }

/* ════ HOVER ═══════════════════════════════════════════════════
   Kill the light-blue browser default hover completely          */
body.dark-mode .table tbody tr:hover,
body.dark-mode .table-hover>tbody>tr:hover,
body.dark-mode .table-hover>tbody>tr:hover>td,
body.dark-mode .table-hover>tbody>tr:hover>th,
body.dark-mode table tbody tr:hover,
body.dark-mode tbody tr:hover,
body.dark-mode tbody tr:hover td,
body.dark-mode tbody tr:hover th,
body.dark-mode .i-table tr:hover td { background:var(--dm-hover) !important; color:var(--dm-text) !important; }

/* ════ ROW STATES — permanent / expired / removed ══════════════
   CRITICAL: class is on <td> directly, NOT on <tr>!
   HTML: <td class="danger c-white">Навсегда</td>
         <td class="active">Истёк</td>
         <td class="success c-white">Разбанен</td>              */

/* PERMANENT BAN: td.danger — only the duration cell */
body.dark-mode td.danger,
body.dark-mode .table td.danger,
body.dark-mode table td.danger {
  background: rgba(180,30,30,.22) !important;
  border-left: 3px solid rgba(237,66,69,.7) !important;
  border-right: 1px solid rgba(237,66,69,.3) !important;
  color: #ffaaaa !important;
  font-weight: 600 !important;
}
body.dark-mode tr:hover td.danger { background: rgba(180,30,30,.35) !important; }

/* EXPIRED: td.active — yellow cell */
body.dark-mode td.active,
body.dark-mode .table td.active,
body.dark-mode table td.active {
  background: rgba(140,110,20,.22) !important;
  border-left: 3px solid rgba(200,160,30,.6) !important;
  border-right: 1px solid rgba(200,160,30,.3) !important;
  color: #ffd680 !important;
  font-weight: 600 !important;
}
body.dark-mode tr:hover td.active { background: rgba(140,110,20,.35) !important; }

/* REMOVED/UNBANNED: td.success */
body.dark-mode td.success,
body.dark-mode .table td.success,
body.dark-mode table td.success {
  background: rgba(30,100,50,.22) !important;
  border-left: 3px solid rgba(59,165,93,.6) !important;
  border-right: 1px solid rgba(59,165,93,.3) !important;
  color: #90ddb0 !important;
  font-weight: 600 !important;
}
body.dark-mode tr:hover td.success { background: rgba(30,100,50,.35) !important; }

/* ALSO handle when class is on tr (other pages) */
body.dark-mode tbody tr.danger td { background: rgba(180,30,30,.10) !important; color: #ffaaaa !important; }
body.dark-mode tbody tr.active td { background: rgba(140,110,20,.10) !important; color: #ffd680 !important; }
body.dark-mode tbody tr.success td { background: rgba(30,100,50,.10) !important; color: #90ddb0 !important; }
body.dark-mode tbody tr.warning td { background: rgba(250,166,26,.10) !important; color: var(--dm-text) !important; }
body.dark-mode tbody tr.info td    { background: rgba(0,176,244,.08)  !important; color: var(--dm-text) !important; }

/* del inside status cells */
body.dark-mode td.success del,
body.dark-mode tr.success td del { color:var(--dm-muted) !important; opacity:.5; }
body.dark-mode td.success span[style*="color:#4caf50"] { color:#6fcf8a !important; }

/* WARNING rows */
body.dark-mode tbody tr.warning td { background:rgba(250,166,26,.10) !important; color:var(--dm-text) !important; }
body.dark-mode tbody tr.warning:hover td { background:rgba(250,166,26,.18) !important; }

/* INFO rows */
body.dark-mode tbody tr.info td { background:rgba(0,176,244,.08) !important; color:var(--dm-text) !important; }

/* c-white GLOBAL kill — never invisible text in dark mode */
body.dark-mode .c-white { color:var(--dm-text) !important; }

/* Inline row bg from templates */
body.dark-mode .sb-row-danger td { background:rgba(237,66,69,.10) !important; }
body.dark-mode td[style*="background-color:#f4f4f4"],
body.dark-mode td[style*="background-color: #f4f4f4"],
body.dark-mode td[style*="background-color:#eaeaea"] { background:var(--dm-s2) !important; }

/* Bootgrid no-results / loading cells */
body.dark-mode .bootgrid-table td.loading,
body.dark-mode .bootgrid-table td.no-results { background:var(--dm-surface) !important; color:var(--dm-muted) !important; }

/* listtable */
body.dark-mode .listtable tr.even, body.dark-mode .listtable_1 tr.even { background:rgba(255,255,255,.02) !important; }
body.dark-mode .listtable tr.odd, body.dark-mode .listtable_1 tr.odd { background:var(--dm-surface) !important; }
body.dark-mode .listtable tr:hover td, body.dark-mode .listtable_1 tr:hover td { background:var(--dm-hover) !important; color:var(--dm-text) !important; }

/* ══════════════════════════════════════════════════════════════
   6. BOOTGRID HEADER / FOOTER
══════════════════════════════════════════════════════════════ */
body.dark-mode .bootgrid-header, body.dark-mode .bootgrid-footer { background:var(--dm-s2) !important; border-color:var(--dm-border) !important; }
body.dark-mode .bootgrid-header *, body.dark-mode .bootgrid-footer * { color:var(--dm-text) !important; }
body.dark-mode .bootgrid-header .btn, body.dark-mode .bootgrid-footer .btn { background:var(--dm-s3) !important; border-color:var(--dm-border) !important; color:var(--dm-text) !important; }
body.dark-mode .bootgrid-header .btn:hover, body.dark-mode .bootgrid-footer .btn:hover { background:var(--dm-accent) !important; }

/* ══════════════════════════════════════════════════════════════
   7. PAGINATION & PAGE-NUMBER SELECT
══════════════════════════════════════════════════════════════ */
/* Bottom bar in bans/comms list (now has class .sb-ban-footer) */
body.dark-mode .sb-ban-footer { background:var(--dm-s2) !important; border-top-color:var(--dm-border) !important; }

/* Bootstrap pagination */
body.dark-mode .pagination>li>a,
body.dark-mode .pagination>li>span { background:var(--dm-s2) !important; border-color:var(--dm-border) !important; color:var(--dm-text) !important; }
body.dark-mode .pagination>li>a:hover { background:var(--dm-accent) !important; border-color:var(--dm-accent) !important; color:#fff !important; }
body.dark-mode .pagination>.active>a { background:var(--dm-accent) !important; border-color:var(--dm-accent) !important; color:#fff !important; }
body.dark-mode .pagination>.disabled>a { color:#2d3357 !important; }

/* Circular nav arrow buttons */
body.dark-mode a.btn.btn-icon.btn-icon-mini,
body.dark-mode .btn.btn-icon.btn-icon-mini { background:var(--dm-s3) !important; border-color:var(--dm-border) !important; color:var(--dm-text) !important; }
body.dark-mode a.btn.btn-icon.btn-icon-mini:hover,
body.dark-mode .btn.btn-icon.bgm-blue { background:var(--dm-accent) !important; color:#fff !important; }

/* ══════════════════════════════════════════════════════════════
   8. FORMS — INPUT, TEXTAREA, SELECT
══════════════════════════════════════════════════════════════ */
body.dark-mode .form-control,
body.dark-mode input[type=text],
body.dark-mode input[type=email],
body.dark-mode input[type=password],
body.dark-mode input[type=number],
body.dark-mode input[type=url],
body.dark-mode input[type=search],
body.dark-mode textarea {
  background: var(--dm-s2) !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: 5px !important;
  color: var(--dm-text) !important;
}
body.dark-mode .form-control:focus, body.dark-mode input:focus, body.dark-mode textarea:focus {
  background:var(--dm-s3) !important; border-color:var(--dm-accent) !important;
  box-shadow:0 0 0 3px var(--dm-glow) !important; color:#fff !important; outline:none !important;
}
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color:#3a4468 !important; }
body.dark-mode label, body.dark-mode .control-label { color:var(--dm-text2) !important; }
body.dark-mode .fg-line { border-bottom-color:var(--dm-border) !important; }
body.dark-mode .fg-line::after { background:var(--dm-accent2) !important; }
body.dark-mode .input-group-addon { background:var(--dm-s3) !important; border-color:var(--dm-border) !important; color:var(--dm-muted) !important; }
body.dark-mode input[readonly] { background:var(--dm-s3) !important; color:var(--dm-muted) !important; }

/* ══════════════════════════════════════════════════════════════
   9. NATIVE <select> — WHITE SQUARE FIX
   Target with maximum specificity to beat app.min.1.css        */
body.dark-mode select,
body.dark-mode select.form-control,
body.dark-mode .form-control select,
body.dark-mode .sb-page-select,
body.dark-mode .sb-page-nav select,
body.dark-mode .card-header select,
body.dark-mode small select,
body.dark-mode .select select,
body.dark-mode * select {
  background-color: var(--dm-s2) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237289da' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 26px !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: 5px !important;
  color: var(--dm-text) !important;
}
body.dark-mode select option, body.dark-mode select optgroup { background:var(--dm-s2) !important; color:var(--dm-text) !important; }

/* ══════════════════════════════════════════════════════════════
   10. BOOTSTRAP SELECT — WHITE SQUARE FIX
   The ::before pseudo-element is absolutely positioned, 30px wide,
   white background with select.png arrow. Must be killed here.  */
body.dark-mode .bootstrap-select>.btn-default:before,
body.dark-mode .bootstrap-select>.btn-default::before,
body.dark-mode .bootstrap-select>.btn:before,
body.dark-mode .bootstrap-select>.btn::before,
body.dark-mode .bootstrap-select .dropdown-toggle:before,
body.dark-mode .bootstrap-select .dropdown-toggle::before {
  background-color: var(--dm-s3) !important;
  background-image: url("../img/select_dark.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  border-left: 1px solid var(--dm-border) !important;
}
/* Also kill it inside table-striped rows */
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd) .bootstrap-select>.btn-default:before,
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd) .bootstrap-select>.btn-default::before {
  background-color: var(--dm-s3) !important;
  background-image: url("../img/select_dark.png") !important;
}
/* Button itself */
body.dark-mode .bootstrap-select>.btn-default,
body.dark-mode .bootstrap-select>.btn,
body.dark-mode .bootstrap-select .btn.dropdown-toggle {
  background: none !important;
  background-color: transparent !important;
  border-color: var(--dm-border) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .bootstrap-select>.btn-default:not(.disabled):after,
body.dark-mode .bootstrap-select>.btn:not(.disabled):after { background:var(--dm-accent) !important; }
body.dark-mode .bootstrap-select>.btn-default .filter-option { color:var(--dm-text) !important; }
/* Open state */
body.dark-mode .bootstrap-select.open>.btn-default { border-color:var(--dm-accent) !important; }
body.dark-mode .bootstrap-select.open>.btn-default:before,
body.dark-mode .bootstrap-select.open>.btn-default::before { background-color:var(--dm-accent) !important; }
/* Dropdown menu */
body.dark-mode .bootstrap-select .dropdown-menu { background:var(--dm-s2) !important; border:1px solid var(--dm-border2) !important; border-radius:8px !important; box-shadow:0 12px 40px rgba(0,0,0,.6) !important; overflow:hidden; }
body.dark-mode .bootstrap-select .dropdown-menu li a { color:var(--dm-text) !important; background:transparent !important; }
body.dark-mode .bootstrap-select .dropdown-menu>li>a:hover,
body.dark-mode .bootstrap-select .dropdown-menu>li.selected>a { background:var(--dm-accent) !important; color:#fff !important; }
body.dark-mode .bootstrap-select .dropdown-menu .divider { background:var(--dm-border) !important; }
body.dark-mode .bootstrap-select .dropdown-menu .dropdown-header { color:var(--dm-muted) !important; }
body.dark-mode .bootstrap-select .bs-searchbox { background:var(--dm-s3) !important; border-bottom:1px solid var(--dm-border) !important; }
body.dark-mode .bootstrap-select .bs-searchbox input { background:transparent !important; color:var(--dm-text) !important; }

/* ══════════════════════════════════════════════════════════════
   11. DROPDOWN
══════════════════════════════════════════════════════════════ */
body.dark-mode .dropdown-menu { background:var(--dm-s2) !important; border:1px solid var(--dm-border2) !important; border-radius:8px !important; box-shadow:0 12px 40px rgba(0,0,0,.6) !important; }
body.dark-mode .dropdown-menu>li>a { color:var(--dm-text) !important; }
body.dark-mode .dropdown-menu>li>a:hover { background:var(--dm-accent) !important; color:#fff !important; }
body.dark-mode .dropdown-menu .divider { background:var(--dm-border) !important; }
body.dark-mode .dropdown-menu-lg { background:var(--dm-surface) !important; border:1px solid var(--dm-border) !important; }

/* ══════════════════════════════════════════════════════════════
   12. TABS
══════════════════════════════════════════════════════════════ */
body.dark-mode .nav-tabs { border-bottom:2px solid var(--dm-border) !important; background:transparent !important; }
body.dark-mode .nav-tabs>li>a { color:var(--dm-muted) !important; border-color:transparent !important; background:transparent !important; }
body.dark-mode .nav-tabs>li>a:hover { color:var(--dm-text) !important; background:var(--dm-s2) !important; }
body.dark-mode .nav-tabs>li.active>a,
body.dark-mode .nav-tabs>li.active>a:focus,
body.dark-mode .nav-tabs>li.active>a:hover { background:var(--dm-surface) !important; border-color:var(--dm-border) var(--dm-border) var(--dm-surface) !important; color:#fff !important; }
body.dark-mode .tab-content { background:var(--dm-surface) !important; }
/* fw-nav top tab bar */
body.dark-mode .fw-nav, body.dark-mode ul.tab-nav { background:var(--dm-s2) !important; border-bottom:2px solid var(--dm-border) !important; }
body.dark-mode .fw-nav .tab-nav li a, body.dark-mode ul.tab-nav li a { color:var(--dm-muted) !important; }
body.dark-mode .fw-nav .tab-nav li.active a, body.dark-mode ul.tab-nav li.active a { color:#fff !important; }
body.dark-mode .fw-nav .tab-nav li.active, body.dark-mode ul.tab-nav li.active { border-bottom-color:var(--dm-accent2) !important; }

/* ══════════════════════════════════════════════════════════════
   13. VOTES PAGE SPECIFIC
══════════════════════════════════════════════════════════════ */
body.dark-mode .sb-vote-tabs { background:var(--dm-s2) !important; border-bottom:2px solid var(--dm-border) !important; }
body.dark-mode .sb-vote-tabs a { color:var(--dm-muted) !important; }
body.dark-mode .sb-vote-tabs a[style*="color:#2196f3"] { color:var(--dm-accent2) !important; border-bottom-color:var(--dm-accent2) !important; }
body.dark-mode .sb-vote-tabs a[style*="color:#e53935"] { color:var(--dm-err) !important; border-bottom-color:var(--dm-err) !important; }
body.dark-mode .sb-vote-tabs a[style*="color:#4caf50"] { color:var(--dm-ok) !important; border-bottom-color:var(--dm-ok) !important; }
body.dark-mode .sb-vote-tabs a[style*="color:#ff9800"] { color:var(--dm-warn) !important; border-bottom-color:var(--dm-warn) !important; }
body.dark-mode .sb-vote-filter { background:var(--dm-s2) !important; border:1px solid var(--dm-border) !important; }
body.dark-mode .sb-filter-label { color:var(--dm-muted) !important; }
body.dark-mode .sb-vote-reset { background:var(--dm-s3) !important; color:var(--dm-text2) !important; border:1px solid var(--dm-border) !important; }
body.dark-mode .sb-code-block { background:var(--dm-s3) !important; border:1px solid var(--dm-border) !important; color:#a8c0e8 !important; }

/* ══════════════════════════════════════════════════════════════
   14. BUTTONS
══════════════════════════════════════════════════════════════ */
body.dark-mode .btn { color:#fff !important; border-radius:5px !important; }
body.dark-mode .btn-default { background:var(--dm-s3) !important; border-color:var(--dm-border) !important; color:var(--dm-text) !important; }
body.dark-mode .btn-default:hover { background:var(--dm-s4) !important; border-color:var(--dm-accent) !important; }
body.dark-mode .btn-primary { background:var(--dm-accent) !important; border-color:var(--dm-accent) !important; }
body.dark-mode .btn-primary:hover { background:#4752c4 !important; box-shadow:0 4px 15px var(--dm-glow) !important; }
body.dark-mode .btn-success { background:#2d7d46 !important; border-color:#2d7d46 !important; }
body.dark-mode .btn-danger  { background:#b92c2e !important; border-color:#b92c2e !important; }
body.dark-mode .btn-warning { background:#bf5200 !important; border-color:#bf5200 !important; }
body.dark-mode .btn-info    { background:#0277bd !important; border-color:#0277bd !important; }
body.dark-mode .bgm-green   { background:#2d7d46 !important; }
body.dark-mode .bgm-red     { background:#b92c2e !important; }
body.dark-mode .bgm-orange  { background:#bf5200 !important; }
body.dark-mode .bgm-bluegray { background:#37474f !important; }
body.dark-mode .bgm-blue    { background:#1565c0 !important; }
body.dark-mode .bgm-lightblue { background:#0277bd !important; }
body.dark-mode .bgm-indigo  { background:var(--dm-accent) !important; }
body.dark-mode .btn-icon-text.bgm-green:hover { box-shadow:0 4px 15px rgba(59,165,93,.4) !important; }
body.dark-mode .btn-icon-text.bgm-red:hover   { box-shadow:0 4px 15px rgba(237,66,69,.4) !important; }
body.dark-mode .btn.btn-default { color:var(--dm-text) !important; }

/* ══════════════════════════════════════════════════════════════
   15. ALERTS
══════════════════════════════════════════════════════════════ */
body.dark-mode .alert { border:1px solid transparent !important; border-radius:5px !important; }
body.dark-mode .alert-info    { background:rgba(0,176,244,.08) !important; border-color:rgba(0,176,244,.25) !important; color:#80d4f9 !important; }
body.dark-mode .alert-success { background:rgba(59,165,93,.08) !important; border-color:rgba(59,165,93,.25) !important; color:#80cba0 !important; }
body.dark-mode .alert-warning { background:rgba(250,166,26,.08) !important; border-color:rgba(250,166,26,.25) !important; color:#ffd280 !important; }
body.dark-mode .alert-danger  { background:rgba(237,66,69,.08) !important; border-color:rgba(237,66,69,.25) !important; color:#f99 !important; }

/* ══════════════════════════════════════════════════════════════
   16. LISTVIEW / PANELS
══════════════════════════════════════════════════════════════ */
body.dark-mode .listview { background:var(--dm-surface) !important; }
body.dark-mode .listview .lv-header { background:linear-gradient(135deg,var(--dm-s2),var(--dm-s3)) !important; color:var(--dm-text2) !important; border-bottom:1px solid var(--dm-border) !important; }
body.dark-mode .listview .lv-item { border-bottom:1px solid var(--dm-border) !important; }
body.dark-mode .listview .lv-item:hover { background:var(--dm-s2) !important; }
body.dark-mode .listview .lv-title { color:var(--dm-text) !important; }
body.dark-mode .listview .lv-small { color:var(--dm-muted) !important; }
body.dark-mode .panel-default { border-color:var(--dm-border) !important; }
body.dark-mode .panel-default .panel-body,
body.dark-mode .panel-collapse .panel-body { background:var(--dm-s2) !important; }

/* ══════════════════════════════════════════════════════════════
   17. MODALS / SWEET-ALERT
══════════════════════════════════════════════════════════════ */
body.dark-mode .modal-content { background:var(--dm-surface) !important; border:1px solid var(--dm-border2) !important; border-radius:8px !important; box-shadow:0 24px 64px rgba(0,0,0,.8) !important; }
body.dark-mode .modal-header { background:linear-gradient(135deg,var(--dm-s2),var(--dm-s3)) !important; border-bottom:1px solid var(--dm-border) !important; }
body.dark-mode .modal-header h4 { color:var(--dm-text) !important; }
body.dark-mode .modal-body { color:var(--dm-text) !important; }
body.dark-mode .modal-footer { background:var(--dm-s2) !important; border-top:1px solid var(--dm-border) !important; }
body.dark-mode .modal-backdrop { background:rgba(0,0,0,.8) !important; }
body.dark-mode .sweet-alert {
  background: var(--dm-surface) !important;
  border: 1px solid var(--dm-border2) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.8) !important;
}
body.dark-mode .sweet-alert h2 { color: var(--dm-text) !important; }
body.dark-mode .sweet-alert p, body.dark-mode .sweet-alert .lead { color: var(--dm-text2) !important; }
/* Success icon uses ::before, ::after and .fix as WHITE MASKS
   that hide the rotating animation behind the checkmark circle.
   They MUST match the popup background exactly. */
body.dark-mode .sweet-alert .icon.success::before,
body.dark-mode .sweet-alert .icon.success::after {
  background: var(--dm-surface) !important;
}
body.dark-mode .sweet-alert .icon.success .fix {
  background-color: var(--dm-surface) !important;
}
body.dark-mode .sweet-alert .icon.success .placeholder { border-color: rgba(59,165,93,.3) !important; }
body.dark-mode .sweet-alert .icon.success .line { background-color: var(--dm-ok) !important; }
body.dark-mode .sweet-alert .icon.error .line { background-color: var(--dm-err) !important; }
body.dark-mode .sweet-alert .icon.info { border-color: var(--dm-info) !important; color: var(--dm-info) !important; }
body.dark-mode .sweet-alert .icon.warning { border-color: var(--dm-warn) !important; }
body.dark-mode .sweet-overlay { background: rgba(0,0,0,.75) !important; }

/* ══════════════════════════════════════════════════════════════
   18. TYPOGRAPHY / LINKS
══════════════════════════════════════════════════════════════ */
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,
body.dark-mode h4,body.dark-mode h5,body.dark-mode h6 { color:var(--dm-text) !important; }
body.dark-mode p,body.dark-mode span,body.dark-mode li { color:var(--dm-text) !important; }
body.dark-mode .text-muted { color:var(--dm-muted) !important; }
body.dark-mode hr { border-color:var(--dm-border) !important; }
body.dark-mode code { background:var(--dm-s3) !important; color:#f48fb1 !important; border-color:var(--dm-border) !important; border-radius:3px !important; }
body.dark-mode pre { background:var(--dm-s2) !important; border-color:var(--dm-border) !important; color:var(--dm-text) !important; border-radius:5px !important; }
body.dark-mode a { color:var(--dm-accent2) !important; }
body.dark-mode a:hover { color:var(--dm-accent3) !important; }
body.dark-mode .btn a,body.dark-mode a.btn,body.dark-mode [class*="bgm-"] a { color:#fff !important; }
body.dark-mode td a,body.dark-mode th a { color:var(--dm-accent2) !important; }

/* ══════════════════════════════════════════════════════════════
   19. SB-SPECIFIC ELEMENTS
══════════════════════════════════════════════════════════════ */
body.dark-mode .c-item { background:var(--dm-s2) !important; border:1px solid var(--dm-border) !important; border-radius:5px !important; }
body.dark-mode .c-footer { border-top:1px solid var(--dm-border) !important; }
body.dark-mode .badentry { color:var(--dm-err) !important; }
body.dark-mode .badge { border-radius:20px !important; font-weight:600 !important; }
body.dark-mode .label { opacity:.9; border-radius:3px !important; }
body.dark-mode .label-default { background:var(--dm-s3) !important; color:var(--dm-muted) !important; }
body.dark-mode .command-edit,
body.dark-mode .command-delete { background:var(--dm-s3) !important; border-color:var(--dm-border) !important; }

/* ══════════════════════════════════════════════════════════════
   20. FOOTER
══════════════════════════════════════════════════════════════ */
body.dark-mode #footer { background:linear-gradient(135deg,#0a0c17,#0d0f1a) !important; border-top:1px solid var(--dm-border) !important; color:var(--dm-muted) !important; }
body.dark-mode #footer a,body.dark-mode #footer .footer_link { color:var(--dm-accent2) !important; }

/* ══════════════════════════════════════════════════════════════
   21. SCROLLBAR
══════════════════════════════════════════════════════════════ */
body.dark-mode ::-webkit-scrollbar { width:5px; height:5px; }
body.dark-mode ::-webkit-scrollbar-track { background:var(--dm-bg); }
body.dark-mode ::-webkit-scrollbar-thumb { background:var(--dm-s4); border-radius:4px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background:var(--dm-accent); }

/* ══════════════════════════════════════════════════════════════
   22. DARK MODE TOGGLE BUTTON
══════════════════════════════════════════════════════════════ */
#dark-mode-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  cursor:pointer; background:transparent;
  border:none; outline:none; padding:0; margin:0 2px;
  vertical-align:middle; position:relative;
}
#dark-mode-toggle:hover { background:rgba(255,255,255,.1); }
#dark-mode-toggle svg { width:20px; height:20px; fill:none; stroke:#8899bb; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
#dark-mode-toggle:hover svg { stroke:#fff; }
#dark-mode-toggle .icon-moon { display:none; }
#dark-mode-toggle .icon-sun  { display:block; }
body.dark-mode #dark-mode-toggle .icon-moon { display:block; }
body.dark-mode #dark-mode-toggle .icon-sun  { display:none; }
#dark-mode-toggle::after {
  content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); right:0;
  white-space:nowrap; background:rgba(0,0,0,.9); color:#e2e8f0; font-size:11px;
  padding:3px 8px; border-radius:4px; opacity:0; pointer-events:none; z-index:9999;
  transition:opacity .15s !important;
}
#dark-mode-toggle:hover::after { opacity:1; }

/* ══════════════════════════════════════════════════════════════
   23. RETINA DARK SELECT ARROW
══════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx) {
  body.dark-mode .bootstrap-select>.btn-default::before,
  body.dark-mode .bootstrap-select>.btn::before {
    background-image: url("../img/select_dark@2x.png") !important;
    background-size: 12px 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   24. CHAT ASIDE PANEL (#chat)
══════════════════════════════════════════════════════════════ */
body.dark-mode #chat,
body.dark-mode aside#chat {
  background: #11152a !important;
  border-left: 1px solid var(--dm-border) !important;
}
body.dark-mode #chat .chat-seach,
body.dark-mode #chat .chat-search {
  background: var(--dm-s2) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}
body.dark-mode #chat .chat-seach h4,
body.dark-mode #chat .chat-search h4 { color: var(--dm-text) !important; }
body.dark-mode #chat .lv-item { border-bottom: 1px solid var(--dm-border) !important; }
body.dark-mode #chat .lv-item:hover { background: var(--dm-s2) !important; }
body.dark-mode #chat .lv-title { color: var(--dm-text) !important; }
body.dark-mode #chat .lv-small { color: var(--dm-muted) !important; }
/* The white "Администраторы" header block */
body.dark-mode #chat .listview { background: #11152a !important; }
body.dark-mode #chat .listview .lv-header {
  background: var(--dm-s3) !important;
  color: var(--dm-accent3) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}

/* ══════════════════════════════════════════════════════════════
   25. ADMIN LIST TABS (bgm-lightblue, btn-warning)
══════════════════════════════════════════════════════════════ */
/* Tab nav inside admin profile expand */
body.dark-mode .tab-nav.tn-justified li.bgm-lightblue,
body.dark-mode .tab-nav li.bgm-lightblue {
  background: var(--dm-s3) !important;
  border-bottom: 2px solid var(--dm-accent) !important;
}
body.dark-mode .tab-nav.tn-justified li.bgm-lightblue:hover,
body.dark-mode .tab-nav li.bgm-lightblue:hover {
  background: var(--dm-accent) !important;
}
body.dark-mode .tab-nav li.bgm-lightblue a,
body.dark-mode .tab-nav li.bgm-lightblue a.c-white {
  color: var(--dm-accent3) !important;
}
body.dark-mode .tab-nav li.bgm-lightblue:hover a { color: #fff !important; }
/* Warnings tab */
body.dark-mode .tab-nav li.btn-warning {
  background: rgba(191,82,0,.25) !important;
  border-bottom: 2px solid var(--dm-warn) !important;
}
body.dark-mode .tab-nav li.btn-warning:hover { background: rgba(191,82,0,.5) !important; }
body.dark-mode .tab-nav li.btn-warning a,
body.dark-mode .tab-nav li.btn-warning a.c-white { color: #ffd280 !important; }
/* Delete tab (red) */
body.dark-mode .tab-nav li.bgm-red,
body.dark-mode .tab-nav li.btn-danger {
  background: rgba(185,44,46,.25) !important;
  border-bottom: 2px solid var(--dm-err) !important;
}
body.dark-mode .tab-nav li.bgm-red:hover,
body.dark-mode .tab-nav li.btn-danger:hover { background: rgba(185,44,46,.5) !important; }
body.dark-mode .tab-nav li.bgm-red a { color: #f99 !important; }

/* ══════════════════════════════════════════════════════════════
   26. BAN/COMM DETAIL EXPAND — wcc-inner, right panel
══════════════════════════════════════════════════════════════ */
/* .wcc-inner = the "Add comment" textarea-like box */
body.dark-mode .wcc-inner,
body.dark-mode .wc-comment .wcc-inner {
  background: var(--dm-s2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text2) !important;
}
body.dark-mode .wcc-inner:hover,
body.dark-mode .wc-comment:hover .wcc-inner {
  background: var(--dm-s3) !important;
  border-color: var(--dm-accent) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .wcci-text { color: var(--dm-text) !important; }

/* .pm-body / pm-footer areas */
body.dark-mode .pm-body { background: var(--dm-surface) !important; }
body.dark-mode .pm-footer { background: var(--dm-s2) !important; border-top: 1px solid var(--dm-border) !important; }

/* Right panel header "Блокировку Выдал" */
body.dark-mode .lv-header.c-bluegray,
body.dark-mode .lv-header[style*="border-bottom: 2px solid #607d8b"] {
  background: var(--dm-s3) !important;
  color: var(--dm-accent3) !important;
  border-bottom-color: var(--dm-border2) !important;
}

/* Detail row inline label colors */
body.dark-mode .form-group .col-sm-8 a[href*="steamcommunity"],
body.dark-mode .col-sm-8 a[href*="steamcommunity"] {
  color: var(--dm-accent2) !important;
}
body.dark-mode span[style*="color:#1565c0"],
body.dark-mode span[style*="color: #1565c0"],
body.dark-mode label span[style*="color:#1565c0"] { color: var(--dm-accent2) !important; }
body.dark-mode span[style*="color:#e65100"],
body.dark-mode label span[style*="color:#e65100"] { color: #ff9860 !important; }
body.dark-mode span[style*="color:#00897b"],
body.dark-mode label span[style*="color:#00897b"] { color: #4db6ac !important; }
body.dark-mode i[style*="color:#333"] { color: var(--dm-muted) !important; }
body.dark-mode i[style*="color:#999"],
body.dark-mode i[style*="color: #999"] { color: var(--dm-muted) !important; }

/* ══════════════════════════════════════════════════════════════
   27. MISC REMAINING WHITES
══════════════════════════════════════════════════════════════ */
/* .command-edit, .command-delete - found in app.min.2 */
body.dark-mode .command-edit,
body.dark-mode .command-delete { background: var(--dm-s3) !important; border-color: var(--dm-border) !important; }

/* Growl notifications */
body.dark-mode .growl-animated.alert-inverse {
  background: var(--dm-s3) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* Context menu */
body.dark-mode .contextmenu {
  background: var(--dm-s2) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}
body.dark-mode .contextmenu a { color: var(--dm-text) !important; background: transparent !important; }
body.dark-mode .contextmenu a:hover { background: var(--dm-accent) !important; color: #fff !important; }
body.dark-mode .contextmenu .divider { background: var(--dm-border) !important; }

/* Checkbox / toggle switches */
body.dark-mode .toggle-switch,
body.dark-mode .ts-helper { background: var(--dm-s4) !important; }
body.dark-mode .toggle-switch.on .ts-helper { background: var(--dm-accent) !important; }

/* Inline monospace spans */
body.dark-mode span[style*="font-family:monospace"],
body.dark-mode span[style*="font-family: monospace"] { color: var(--dm-accent3) !important; }

/* Border-bottom separator in right panel */
body.dark-mode [style*="border-bottom: 2px solid #607d8b"] {
  border-bottom-color: var(--dm-border2) !important;
}
body.dark-mode [style*="border-bottom:2px solid #607d8b"] {
  border-bottom-color: var(--dm-border2) !important;
}

/* bgm-lightblue in TABLE headers (adminlist) */
body.dark-mode th.bgm-bluegray,
body.dark-mode th.bgm-lightblue {
  background: var(--dm-s3) !important;
  color: var(--dm-accent3) !important;
}

/* Admin list profile images section */
body.dark-mode .pm-body .contacts,
body.dark-mode .contacts.c-profile { background: transparent !important; }
body.dark-mode .c-item .c-info { color: var(--dm-text) !important; }
body.dark-mode .c-item .c-footer { color: var(--dm-muted) !important; }


/* ══════════════════════════════════════════════════════════════
   28. WALL-COMMENT-LIST / RIGHT PANEL (Ban & Comm details)
   .wall-comment-list has background: #f7f7f7
   .wp-media, .wpb-actions also have background: #f7f7f7
══════════════════════════════════════════════════════════════ */
body.dark-mode .wall-comment-list,
body.dark-mode .form-group.col-sm-5 .wall-comment-list {
  background: var(--dm-s2) !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: 6px !important;
}
body.dark-mode .wall-comment-list .media { border-bottom: 1px solid var(--dm-border) !important; }
body.dark-mode .wall-comment-list .media:last-child { border-bottom: none !important; }
body.dark-mode .wall-comment-list .a-title,
body.dark-mode .wall-comment-list a.a-title { color: var(--dm-text) !important; }
body.dark-mode .wall-comment-list .media-body p { color: var(--dm-text2) !important; }

/* Comment form area */
body.dark-mode .wp-media,
body.dark-mode .wpb-actions {
  background: var(--dm-s3) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .wp-text { color: var(--dm-text) !important; background: transparent !important; }

/* wcl-form comment input row */
body.dark-mode .wcl-form { background: var(--dm-s2) !important; }

/* The "Информация о бане/блокировке" header bar */
body.dark-mode .card-header.c-white,
body.dark-mode .card-header[class*="bgm-"] { color: #fff !important; }

/* pmo-block inside wall-comment-list */
body.dark-mode .pmo-block,
body.dark-mode .pmo-contact,
body.dark-mode .pmo-block.pmo-contact { background: transparent !important; }
body.dark-mode .pmo-block ul li { color: var(--dm-text2) !important; }
body.dark-mode .pmo-block ul li b { color: var(--dm-text) !important; }
body.dark-mode .pmo-block ul li i { color: var(--dm-muted) !important; }
body.dark-mode .pmo-block ul li address { color: var(--dm-muted) !important; }
body.dark-mode .pmo-block ul li a { color: var(--dm-accent2) !important; }

/* Horizontal rule separator between admin panel and comments */
body.dark-mode hr { border-color: var(--dm-border) !important; }
body.dark-mode .form-group.col-sm-5 hr { border-color: var(--dm-border) !important; }

/* c-gray used in comment timestamps */
body.dark-mode .c-gray, body.dark-mode small.c-gray { color: var(--dm-muted) !important; }

/* media-body links */
body.dark-mode .media-body a { color: var(--dm-accent2) !important; }
body.dark-mode .media-body a:hover { color: var(--dm-accent3) !important; }

body.dark-mode .sweet-alert {
  background: var(--dm-surface) !important;
  border: 1px solid var(--dm-border2) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.8) !important;
}
body.dark-mode .sweet-alert h2 { color: var(--dm-text) !important; }
body.dark-mode .sweet-alert p, body.dark-mode .sweet-alert .lead { color: var(--dm-text2) !important; }
/* The .fix element inside success icon has white bg to mask the circle border */
body.dark-mode .sweet-alert .icon.success .fix { background-color: var(--dm-surface) !important; }
body.dark-mode .sweet-alert .icon.success .placeholder { border-color: rgba(59,165,93,.3) !important; }
body.dark-mode .sweet-alert .icon.success .line { background-color: var(--dm-ok) !important; }
body.dark-mode .sweet-alert .icon.error .line { background-color: var(--dm-err) !important; }
body.dark-mode .sweet-alert .icon.info { border-color: var(--dm-info) !important; color: var(--dm-info) !important; }
body.dark-mode .sweet-alert .icon.warning { border-color: var(--dm-warn) !important; color: var(--dm-warn) !important; }
/* ShowBox popup (used in SB) */
body.dark-mode .sweet-overlay { background: rgba(0,0,0,.75) !important; }


/* ══════════════════════════════════════════════════════════════
   29. SUMMERNOTE EDITOR (toolbar, buttons, dialogs)
══════════════════════════════════════════════════════════════ */
/* Editor frame */
body.dark-mode .note-editor.note-frame,
body.dark-mode .note-editor {
  border: 1px solid var(--dm-border) !important;
  border-radius: 6px !important;
  background: var(--dm-s2) !important;
}
/* Toolbar bar */
body.dark-mode .note-toolbar,
body.dark-mode .panel-heading.note-toolbar,
body.dark-mode .note-editor .note-toolbar {
  background: linear-gradient(135deg, var(--dm-s2), var(--dm-s3)) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  padding: 4px 5px 6px !important;
}
/* Toolbar buttons */
body.dark-mode .note-toolbar .note-btn,
body.dark-mode .note-btn.btn.btn-default.btn-sm {
  background: var(--dm-s3) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text2) !important;
}
body.dark-mode .note-toolbar .note-btn:hover,
body.dark-mode .note-btn.btn.btn-default.btn-sm:hover {
  background: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #fff !important;
}
body.dark-mode .note-toolbar .note-btn.active,
body.dark-mode .note-btn.active {
  background: var(--dm-accent) !important;
  color: #fff !important;
}
/* Editable area */
body.dark-mode .note-editable {
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
  border-top: 1px solid var(--dm-border) !important;
}
/* Status bar */
body.dark-mode .note-statusbar {
  background: var(--dm-s2) !important;
  border-top: 1px solid var(--dm-border) !important;
}
body.dark-mode .note-resizebar .note-icon-bar { border-top-color: var(--dm-border) !important; }
/* Dropdown menus in toolbar */
body.dark-mode .note-dropdown-menu.dropdown-menu {
  background: var(--dm-s2) !important;
  border: 1px solid var(--dm-border2) !important;
}
body.dark-mode .note-dropdown-menu.dropdown-menu li a {
  color: var(--dm-text) !important;
}
body.dark-mode .note-dropdown-menu.dropdown-menu li a:hover {
  background: var(--dm-accent) !important;
  color: #fff !important;
}
/* Color palette */
body.dark-mode .note-color-palette { background: var(--dm-s2) !important; }
body.dark-mode .note-palette-title { color: var(--dm-text2) !important; background: var(--dm-s3) !important; }
/* Tooltip */
body.dark-mode .note-toolbar .tooltip-inner { background: rgba(0,0,0,.9) !important; color: #e2e8f0 !important; }
/* Dimension picker */
body.dark-mode .note-dimension-picker-highlighted { background: rgba(88,101,242,.5) !important; }
body.dark-mode .note-dimension-picker-unhighlighted { background: var(--dm-s3) !important; }
body.dark-mode .note-dimension-display { color: var(--dm-text2) !important; }
/* Summernote dialog */
body.dark-mode .note-modal .modal-content { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
body.dark-mode .note-modal .modal-header { background: var(--dm-s2) !important; border-bottom-color: var(--dm-border) !important; }
body.dark-mode .note-modal .modal-body { color: var(--dm-text) !important; }
body.dark-mode .note-form-label { color: var(--dm-text2) !important; }
body.dark-mode .note-input,
body.dark-mode .note-form-control {
  background: var(--dm-s2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}


/* ══════════════════════════════════════════════════════════════
   30. ICONS — dark mode image fixes
══════════════════════════════════════════════════════════════ */

/* comm.png — black speech bubble → accent blue in dark mode */
body.dark-mode img[src*="comm.png"] {
  content: url("../img/comm_dark.png") !important;
  filter: none !important;
}

/* System log type icons */
body.dark-mode img[src*="images/admin/help.png"] {
  content: url("../images/admin/help_dark.png") !important;
}
body.dark-mode img[src*="images/admin/warning.png"] {
  content: url("../images/admin/warning_dark.png") !important;
}
body.dark-mode img[src*="images/admin/error.png"] {
  content: url("../images/admin/error_dark.png") !important;
}

/* Fallback: CSS filter approach for any other small dark icons in dark mode */
/* Convert dark icons to light using invert + hue when no specific override */
body.dark-mode .listtable img[src*="admin/"],
body.dark-mode table img[src*="admin/help"],
body.dark-mode table img[src*="admin/warning"],
body.dark-mode table img[src*="admin/error"] {
  filter: brightness(1.8) !important;
}

/* Mod/game icons — keep their natural colors, just adjust brightness slightly */
body.dark-mode .table td img.mod-icon,
body.dark-mode img[src*="mod_icon"],
body.dark-mode img[src*="mod.png"] {
  filter: brightness(0.9) saturate(1.1) !important;
}

/* Player avatar circles — no change needed, they're photos */

/* Country flags — keep as-is */

/* Boost brightness of very dark game icons (CS:GO etc.) */
body.dark-mode .table td img[style*="width:16px"],
body.dark-mode .table td img[style*="width: 16px"],
body.dark-mode .table td img[style*="height:16px"],
body.dark-mode .table td img[height="16"],
body.dark-mode .table td img[width="16"] {
  filter: brightness(1.3) !important;
}