/* ==========================================================================
   Maksima-Edu brand theme (V1)
   --------------------------------------------------------------------------
   Colors are sampled from the logo (MAXIMA = deep magenta-purple, the "i" dot
   = brighter magenta, "Edu" = gray). EVERYTHING brand-colored below is driven
   by the CSS variables in :root — change a value there once and it cascades.
   This file is loaded AFTER adminlte.min.css / site.css, so it overrides them.
   ========================================================================== */

:root {
    /* ---- Change these to re-skin the whole app ---- */
    --brand-primary:        #7a1560;   /* MAXIMA deep magenta-purple (main brand) */
    --brand-primary-dark:   #5d0f49;   /* hover / pressed / active (darker) */
    --brand-primary-light:  #9c1c7a;   /* lighter magenta accent (the "i" dot) */
    --brand-accent:         #a51e80;   /* bright magenta highlight */
    --brand-gray:           #6c757d;   /* "Edu" gray / muted text */

    --brand-sidebar-bg:        #2b1326; /* dark plum sidebar background */
    --brand-sidebar-bg-hover:  #3c1a35; /* sidebar item hover background */
    --brand-sidebar-text:      #d7c6d2; /* sidebar default text */

    --brand-on-primary:     #ffffff;   /* text/icon color on a brand-colored fill */
    --brand-link:           #7a1560;   /* in-content hyperlink color */

    /* Derived (kept as vars so they can be tuned too) */
    --brand-header-accent:  var(--brand-primary);
}

/* ========================== Buttons ====================================== */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--brand-on-primary);
}
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(122, 21, 96, .35);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

/* ========================== Links & text ================================= */
/* Scope hyperlink recoloring to CONTENT + login links only, so it never fights
   button text, sidebar nav, navbar, dropdowns or pagination (each sets its own
   color). A blanket `a {}` rule here previously bled onto .btn text. */
.content-wrapper a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item),
.login-box a:not(.btn) {
    color: var(--brand-link);
}
.content-wrapper a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):hover,
.login-box a:not(.btn):hover {
    color: var(--brand-primary-dark);
}
.text-primary {
    color: var(--brand-primary) !important;
}

/* ========================== Top navbar =================================== */
.main-header.navbar {
    border-bottom: 3px solid var(--brand-header-accent);
}
.navbar-light .navbar-nav .nav-link {
    color: var(--brand-gray);
}
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--brand-primary);
}

/* ========================== Sidebar ===================================== */
.main-sidebar,
.sidebar-dark-primary {
    background-color: var(--brand-sidebar-bg);
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: var(--brand-sidebar-text);
}
/* active menu item -> brand fill */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
    box-shadow: 0 0 6px rgba(0, 0, 0, .35);
}
/* hover state for non-active items */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: var(--brand-sidebar-bg-hover);
    color: #fff;
}
/* nested treeview items */
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--brand-sidebar-bg-hover);
    color: #fff;
}
.sidebar-dark-primary .user-panel {
    border-bottom-color: rgba(255, 255, 255, .12);
}

/* Brand header: white strip so the magenta/gray logo reads crisply */
.brand-link {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
}
.brand-link .brand-logo-img {
    max-height: 38px;
    width: auto;
    opacity: 1;
}

/* ========================== Pagination ================================== */
.page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}
.page-link {
    color: var(--brand-primary);
}

/* ========================== Form accents (checkbox/radio/select2) ======== */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before,
.icheck-primary > input:first-child:checked + label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}
.form-control:focus {
    border-color: var(--brand-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(122, 21, 96, .15);
}

/* ========================== Misc theme accents ========================== */
.small-box.bg-primary,
.bg-primary {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--brand-primary);
    border-bottom: 0;
}
.card-primary.card-outline {
    border-top: 3px solid var(--brand-primary);
}
.nav-pills .nav-link.active {
    background-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

/* ========================== Login page ================================== */
.login-page,
.register-page {
    background: linear-gradient(160deg, #f4eef2 0%, #e9e3ec 100%);
}
.login-logo img {
    max-width: 230px;
    height: auto;
}
.login-card-body .login-box-msg {
    color: var(--brand-gray);
}
.login-box .btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}