/*
 * Matrix theme — warna diambil dari logo Matrix
 * (merah, kuning, biru, hijau) di atas navy gelap.
 * Dimuat setelah css/app.css.
 */
:root {
    --mtx-red: #e3242b;
    --mtx-yellow: #f7b512;
    --mtx-blue: #1680bb;
    --mtx-blue-light: #29abe2;
    --mtx-green: #7dbe3c;
    --mtx-navy: #0f0c63;
    --mtx-navy-2: #1d1a85;
    --mtx-rainbow: linear-gradient(90deg,
            var(--mtx-red) 0 25%,
            var(--mtx-yellow) 25% 50%,
            var(--mtx-blue-light) 50% 75%,
            var(--mtx-green) 75% 100%);
}

/* ---------- Sidebar ---------- */
.sidebar .sidebar-header {
    background: var(--mtx-navy);
    border-right: 1px solid var(--mtx-navy-2);
    border-bottom: 0;
    position: relative;
}

.sidebar .sidebar-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--mtx-rainbow);
}

.sidebar .sidebar-header .sidebar-brand img {
    width: auto;
    height: 30px;
}

.sidebar .sidebar-header .sidebar-brand span {
    color: #fff !important;
    font-size: 10px;
    white-space: nowrap;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.sidebar .sidebar-header .sidebar-toggler span {
    background: #fff !important;
}

.sidebar .sidebar-body {
    background: var(--mtx-navy);
    border-right: 1px solid var(--mtx-navy-2);
}

.sidebar .sidebar-body .nav .nav-item.nav-category {
    color: var(--mtx-yellow);
}

.sidebar .sidebar-body .nav .nav-item .nav-link:hover,
.sidebar .sidebar-body .nav .nav-item.active > .nav-link {
    color: #fff;
    background-color: var(--mtx-navy-2);
}

.sidebar .sidebar-body .nav .nav-item.active > .nav-link {
    box-shadow: inset 3px 0 0 var(--mtx-blue-light);
}

.sidebar .sidebar-body .nav .nav-item .nav-link[aria-expanded="true"] {
    background-color: var(--mtx-navy-2);
}

.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link,
.sidebar .sidebar-body .sub-menu .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.75);
}

/* Bawaan template mewarnai menu aktif/hover dengan biru primary, kurang terbaca di latar navy */
.sidebar .sidebar-body .nav .nav-item.active .nav-link,
.sidebar .sidebar-body .nav .nav-item.active .nav-link .link-icon,
.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link.active,
.sidebar .sidebar-body .nav .sub-menu .nav-item:hover .nav-link {
    color: #fff;
}

.sidebar .sidebar-body .nav .nav-item.active .nav-link:before {
    background: var(--mtx-yellow);
}

.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link:before {
    border-color: rgba(255, 255, 255, 0.7);
}

.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link.active,
.sidebar .sidebar-body .nav .sub-menu .nav-item:hover .nav-link {
    font-weight: 600;
}

.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link.active:before,
.sidebar .sidebar-body .nav.sub-menu .nav-item:hover .nav-link:before {
    border-color: var(--mtx-yellow);
    background: var(--mtx-yellow);
}

/* sub-menu tidak ikut latar blok menu aktif */
.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link {
    background-color: transparent;
    box-shadow: none;
}

/* ---------- Navbar ---------- */
.navbar {
    background-color: var(--mtx-navy);
    border-bottom: 0;
}

.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--mtx-rainbow);
}

.navbar .sidebar-toggler {
    border-right-color: var(--mtx-navy-2);
}

/* ---------- Komponen ---------- */
a {
    color: var(--mtx-blue);
}

.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.badge.bg-info,
.badge.bg-success,
.badge.bg-danger {
    color: #fff;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.badge.bg-warning {
    color: #3a2a00;
}

.card {
    border-color: #e6edf3;
}

.card .card-header {
    border-bottom: 2px solid transparent;
    border-image: var(--mtx-rainbow) 1;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mtx-blue-light);
    box-shadow: 0 0 0 0.15rem rgba(41, 171, 226, 0.2);
}

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

.page-item.active .page-link {
    background-color: var(--mtx-blue);
    border-color: var(--mtx-blue);
}

.page-link {
    color: var(--mtx-blue);
}

.nav-tabs .nav-link.active {
    color: var(--mtx-blue);
    border-bottom-color: var(--mtx-blue);
}