/*
 * Woodsoft admin theme override.
 * Loaded AFTER the Metronic style.bundle.css so these rules win.
 * Rebrands ElisTech orange -> Woodsoft teal-green, tints the dark aside
 * to a warm wood tone, and makes checkbox lists (e.g. tenant modules) usable.
 * Palette matches the customer-facing SPA (teal-green accent + wood chrome).
 */

:root {
    --ws-primary: #3a8f7d;
    --ws-primary-active: #2f7365;
    --ws-primary-light: #e8f2ef;
    --ws-primary-rgb: 58, 143, 125;
    --ws-wood: #2b2420;
    --ws-wood-2: #3a322c;

    /* Bootstrap / Metronic primary tokens */
    --bs-primary: var(--ws-primary);
    --bs-primary-rgb: var(--ws-primary-rgb);
    --bs-primary-active: var(--ws-primary-active);
    --bs-link-color: var(--ws-primary);
    --bs-link-hover-color: var(--ws-primary-active);
    --bs-component-active-bg: var(--ws-primary);
    --kt-primary: var(--ws-primary);
    --kt-primary-active: var(--ws-primary-active);
    --kt-primary-light: var(--ws-primary-light);
    --kt-text-primary: var(--ws-primary);
}

/* --- Buttons --- */
.btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active) {
    background-color: var(--ws-primary);
    border-color: var(--ws-primary);
    color: #fff;
}
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active:not(.btn-active) {
    background-color: var(--ws-primary-active);
    border-color: var(--ws-primary-active);
}
.btn.btn-light-primary {
    background-color: var(--ws-primary-light);
    color: var(--ws-primary);
}
.btn.btn-light-primary:hover:not(.btn-active) {
    background-color: var(--ws-primary);
    color: #fff;
}

/* --- Text / bg / badges / links --- */
.text-primary { color: var(--ws-primary) !important; }
.bg-primary { background-color: var(--ws-primary) !important; }
.badge.badge-primary { background-color: var(--ws-primary); color: #fff; }
.badge.badge-light-primary { background-color: var(--ws-primary-light); color: var(--ws-primary); }
a { color: var(--ws-primary); }
a:hover { color: var(--ws-primary-active); }
.text-hover-primary:hover,
.menu-link.text-hover-primary:hover { color: var(--ws-primary) !important; }
.symbol.symbol-circle .symbol-label { background-color: var(--ws-primary-light); color: var(--ws-primary); }

/* --- Form check inputs (checkboxes / radios, incl. tenant module toggles) --- */
.form-check-input:checked,
.form-check-solid .form-check-input:checked {
    background-color: var(--ws-primary) !important;
    border-color: var(--ws-primary) !important;
}
.form-check-input:focus {
    border-color: var(--ws-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--ws-primary-rgb), 0.25);
}
/* Native fallback: any bare checkbox still gets the brand accent + a clickable size */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--ws-primary);
}

/* Tenant module checkbox grid: readable, wrapping chips */
.ws-checkbox-grid { gap: 0.75rem 1.5rem; }
.ws-checkbox-grid .form-check {
    margin: 0;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.5rem;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ws-checkbox-grid .form-check:has(.form-check-input:checked) {
    border-color: var(--ws-primary);
    background: var(--ws-primary-light);
}
.ws-checkbox-grid .form-check-label { cursor: pointer; }

/* --- Dark aside (sidebar): warm wood tone instead of the default cold navy --- */
.aside.aside-dark { background-color: var(--ws-wood); }
/* Logo header at the top of the aside — match the wood body (was cold navy #1a1a27) */
#kt_aside_logo,
.aside.aside-dark .aside-logo {
    background-color: var(--ws-wood);
}
.aside.aside-dark .menu .menu-item .menu-link.active,
.aside.aside-dark .menu .menu-item.here > .menu-link,
.aside.aside-dark .menu .menu-item .menu-link.active:hover {
    background-color: var(--ws-primary);
    color: #fff;
}
.aside.aside-dark .menu .menu-item .menu-link:hover:not(.active),
.aside.aside-dark .menu .menu-item.hover:not(.here) > .menu-link:not(.active) {
    background-color: var(--ws-wood-2);
}
.aside.aside-dark .menu .menu-item .menu-link.active .menu-title,
.aside.aside-dark .menu .menu-item .menu-link.active .menu-icon .svg-icon,
.aside.aside-dark .menu .menu-item .menu-link.active .menu-icon i,
.aside.aside-dark .menu .menu-item .menu-link.active .menu-arrow:after { color: #fff; }
.aside-toggle.btn.btn-active-color-primary:hover .svg-icon { color: var(--ws-primary) !important; }

/* --- Login page background: subtle wood -> green gradient --- */
.ws-login-bg {
    background-color: var(--ws-primary) !important;
    background-image: linear-gradient(135deg, var(--ws-wood) 0%, var(--ws-primary) 100%) !important;
}

/* --- Misc primary accents --- */
.page-item.active .page-link { background-color: var(--ws-primary); border-color: var(--ws-primary); }
.form-control:focus, .form-select:focus {
    border-color: var(--ws-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ws-primary-rgb), 0.2);
}