/* ============================================================
   THEME DARK V2 (MF)
   ============================================================ */

:root {
    --mf-bg: #2b2f33;
    --mf-bg-2: #23272b;
    --mf-card: #34393e;
    --mf-card-2: #3a4046;
    --mf-border: #464c53;

    --mf-text: #e6e6e6;
    --mf-text-muted: #aab0b5;
    --mf-heading: #f4f6f7;

    --mf-accent: #1abc9c;
    --mf-accent-hover: #16a085;

    --mf-danger: #e74c3c;
    --mf-warning: #f39c12;
}

/* ================= GLOBAL ================= */

body {
    background: var(--mf-bg) !important;
    color: var(--mf-text) !important;
}

.card,
.modal-content {
    background: var(--mf-card) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}

/* ================= TABS ================= */

.nav-tabs {
    border-color: var(--mf-border);
}

.nav-tabs .nav-link {
    background: var(--mf-card-2);
    color: var(--mf-text-muted);
    border: 1px solid var(--mf-border);
    margin-right: 4px;
}

.nav-tabs .nav-link.active {
    background: var(--mf-accent);
    color: #081311;
    border-color: var(--mf-accent);
}

/* ================= TABLES ================= */

.table {
    color: var(--mf-text);
}

.table thead th {
    background: #394047;
    color: var(--mf-heading);
    border-color: var(--mf-border);
}

.table tbody tr {
    background: #2f3439;
}

.table-hover tbody tr:hover {
    background: #383e44;
}

.table td {
    border-color: var(--mf-border);
}

/* selected row */
.table tbody tr.selected,
.table tbody tr.is-selected {
    background: rgba(26, 188, 156, 0.15) !important;
}

/* ================= FORMS ================= */

.form-control,
.form-select {
    background: var(--mf-bg-2);
    color: var(--mf-text);
    border-color: var(--mf-border);
}

.form-control:focus {
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 0.2rem rgba(26,188,156,.2);
}

/* ================= BUTTONS ================= */

.btn-primary {
    background: var(--mf-accent);
    border-color: var(--mf-accent);
}

.btn-primary:hover {
    background: var(--mf-accent-hover);
}

.btn-outline-secondary {
    color: var(--mf-text-muted);
    border-color: var(--mf-border);
}

.btn-outline-secondary:hover {
    background: var(--mf-card-2);
}

/* ================= BADGES ================= */

.badge {
    background: var(--mf-card-2);
    color: var(--mf-text);
}

.badge.bg-primary {
    background: var(--mf-accent) !important;
    color: #081311 !important;
}

/* ================= DROPDOWN ================= */

.dropdown-menu {
    background: var(--mf-card);
    border-color: var(--mf-border);
}

.dropdown-item {
    color: var(--mf-text);
}

.dropdown-item:hover {
    background: var(--mf-card-2);
}

/* ================= JSTREE ================= */

.jstree-default .jstree-anchor {
    color: var(--mf-text);
}

.jstree-default .jstree-clicked {
    background: var(--mf-accent) !important;
    color: #081311 !important;
    box-shadow: none !important;
}

.jstree-default .jstree-clicked * {
    color: #081311 !important;
}

/* ================= CHECKBOX ================= */

.form-check-input {
    background: var(--mf-bg-2);
    border-color: var(--mf-border);
}

.form-check-input:checked {
    background-color: var(--mf-accent);
    border-color: var(--mf-accent);
}


/* ============================================================
   JSTREE GLOBAL: NO HOVER HIGHLIGHT
   ============================================================ */

.jstree-default .jstree-anchor:hover,
.jstree-default .jstree-hovered {
    background: transparent !important;
    color: var(--mf-text) !important;
    box-shadow: none !important;
}

.jstree-default .jstree-anchor:hover *,
.jstree-default .jstree-hovered * {
    background: transparent !important;
    color: inherit !important;
}

/* jsTree wholerow: completely disable hover highlight globally */
.jstree-default .jstree-wholerow-hovered {
    background: transparent !important;
}

.jstree-default .jstree-wholerow-clicked {
    background: transparent !important;
}

/* =========================================
   INPUT: light background → dark text
========================================= */

.form-control:focus,
.form-control:active,
.form-select:focus,
.form-select:active {
    background: #ffffff !important;
    color: #1f2327 !important;   /* нормальний темний текст */
    border-color: var(--mf-accent) !important;
}

/* placeholder теж привести до ладу */
.form-control:focus::placeholder {
    color: #8a9096 !important;
}


/* enterprise UI”, а не Frankenstein theme.
.form-control,
.form-select {
    background: #ffffff !important;
    color: #1f2327 !important;
    border-color: var(--mf-border);
}

.form-control::placeholder {
    color: #8a9096;
}
*/


/* ================= LINKS ================= */

a {
    color: #6ecbff;
    text-decoration: none;
}

a:hover {
    color: #9fe1ff;
    text-decoration: underline;
}


/* ============================================================
   SCROLLBAR — DARK THEME (GLOBAL)
   ============================================================ */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #2b2f33; /* фон */
}

::-webkit-scrollbar-thumb {
    background: #4a5158; /* сам скрол */
    border-radius: 6px;
    border: 2px solid #2b2f33;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a636c;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #4a5158 #2b2f33;
}


.jstree-search {
    color: #ff4d4f !important;
    background: rgba(255, 77, 79, 0.15);
    border-radius: 3px;
    padding: 0 2px;
}


/* ============================================================
   DARK THEME FIXES — FORMS / TABLES / PANELS
   Дописати В КІНЕЦЬ theme-dark.css
   ============================================================ */

/* ================= PANELS / HEADERS ================= */

.card-header,
.card-footer,
.panel-heading,
.panel-footer,
.list-group-item {
    background: var(--mf-card) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}

/* ================= TABLES: FULL COVERAGE ================= */

table {
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}

table th,
table td {
    background: #2f3439 !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border) !important;
}

table thead th,
table thead td {
    background: #394047 !important;
    color: var(--mf-heading) !important;
    border-color: var(--mf-border) !important;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom-color: var(--mf-border) !important;
}

.table-hover > tbody > tr:hover > * {
    background: #383e44 !important;
    color: var(--mf-heading) !important;
}

/* якщо десь bootstrap тягне білий striped */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #31363b !important;
    color: var(--mf-text) !important;
}

/* ================= FORMS: CONSISTENT ================= */

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
select {
    border-color: var(--mf-border) !important;
}

/* базовий стан — темний */
textarea,
.form-control:not(:focus):not(:active),
.form-select:not(:focus):not(:active),
input[type="text"]:not(:focus):not(:active),
input[type="search"]:not(:focus):not(:active),
input[type="number"]:not(:focus):not(:active),
input[type="email"]:not(:focus):not(:active),
input[type="password"]:not(:focus):not(:active),
input[type="tel"]:not(:focus):not(:active),
input[type="url"]:not(:focus):not(:active),
select:not(:focus):not(:active) {
    background: var(--mf-bg-2) !important;
    color: var(--mf-text) !important;
}

/* активне поле — біле, як ти і хотів */
.form-control:focus,
.form-control:active,
.form-select:focus,
.form-select:active,
textarea:focus,
textarea:active,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus {
    background: #ffffff !important;
    color: #1f2327 !important;
    border-color: var(--mf-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(26,188,156,.2) !important;
}

/* placeholder */
.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: #8a9096 !important;
}

/* disabled / readonly */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
textarea:disabled,
textarea[readonly],
input:disabled,
select:disabled {
    background: #3a4046 !important;
    color: var(--mf-text-muted) !important;
    border-color: var(--mf-border) !important;
    opacity: 1 !important;
}

/* ================= LABELS / MUTED ================= */

label,
.form-label,
.col-form-label,
small,
.small,
.text-muted {
    color: var(--mf-text-muted) !important;
}

/* ================= ALERTS ================= */

.alert {
    border-color: var(--mf-border) !important;
}

.alert-warning {
    background: rgba(243, 156, 18, 0.18) !important;
    color: #ffd089 !important;
    border-color: rgba(243, 156, 18, 0.35) !important;
}

/* ================= MODAL / DROPDOWN DETAILS ================= */

.modal-header,
.modal-footer,
.dropdown-divider {
    border-color: var(--mf-border) !important;
}


/* ============================================================
   TOP MENU (JOOMLA NAVBAR) — DARK ALIGN
   ============================================================ */

/* фон меню */
.navbar,
.navbar.bg-primary,
.navbar.navbar-expand-lg,
header .navbar {
    background: #2f3439 !important;
    background-image: none !important;
    border-bottom: 1px solid var(--mf-border) !important;
}

/* самі пункти */
.navbar .nav-link,
.navbar-nav .nav-link {
    color: var(--mf-text) !important;
    font-weight: 500;
}

/* hover */
.navbar .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

/* active */
.navbar .nav-item.active .nav-link,
.navbar .nav-link.active {
    color: #ffffff !important;
    background: rgba(26, 188, 156, 0.15);
    border-radius: 4px;
}

/* dropdown */
.navbar .dropdown-menu {
    background: var(--mf-card) !important;
    border-color: var(--mf-border) !important;
}

.navbar .dropdown-item {
    color: var(--mf-text) !important;
}

.navbar .dropdown-item:hover {
    background: var(--mf-card-2) !important;
    color: #ffffff !important;
}

/* ============================================================
   JOOMLA HEADER (CASIOPEIA FIX) — ВБИВАЄ СИНІЙ ФОН
   ============================================================ */

/* головний контейнер шапки */
.container-header,
.header,
.header .container-header {
    background: #2b2f33 !important;
    background-image: none !important;
    border-bottom: 1px solid var(--mf-border) !important;
}

/* якщо є bg-primary */
.bg-primary {
    background: #2b2f33 !important;
    background-image: none !important;
}

/* внутрішній navbar */
.container-header .navbar {
    background: transparent !important;
}

/* прибрати градієнти cassiopeia */
.container-header::before,
.container-header::after {
    display: none !important;
}

.container-header {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}