/*
 * BMAC Hub — Porto Skin Override
 * Sidebar:   #212529  (dark charcoal)
 * Accent:    #961b1e  (maroon)
 */

/* ── Accent / Primary colour ──────────────────────────────── */
body,
body .body,
button,
input,
select,
textarea {
    font-family: "Poppins", Arial, sans-serif;
}

a                                      { color: #961b1e; }
a:hover, a:focus                       { color: #b02024; }
a:active                               { color: #7a1517; }

html .heading-primary,
html .lnk-primary,
html .text-color-primary,
html .text-primary                     { color: #961b1e !important; }

html .text-color-hover-primary:hover,
html .text-hover-primary:hover         { color: #961b1e !important; }

/* Background */
html .bg-primary                       { background-color: #961b1e !important; }
html .bg-hover-primary:hover           { background-color: #961b1e !important; }

/* Border */
html .border-primary                   { border-color: #961b1e !important; }

/* ── Header / Topbar ──────────────────────────────────────── */
.header {
    background: #ffffff;
    border-bottom: 1px solid #dfe3e7;
    display: flex;
    align-items: center;
    padding: 0;
}
.header .logo-container {
    background: #ffffff;
    border-right: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
}
.header .logo-container .logo {
    float: none;
    margin: 0 0 0 15px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transform: translateY(0);
}
.header .logo-container .logo img {
    display: block;
}
/* header-right fills remaining width; search bar inside it expands via flex:1 */
.header .header-right {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 1rem;
    gap: .25rem;
    justify-content: flex-end;
}
/* Search form keeps Porto-like placement near the right side */
.header .header-right .search.nav-form {
    flex: 0 0 320px;
    width: 320px;
    margin-left: auto;
    position: relative;
}
.header .header-right .search.nav-form .input-group {
    width: 100%;
}
/* Porto's separator lines */
.header .header-right .separator {
    background: #e5e7eb;
    margin: 0 .5rem;
}
.header .logo-container .toggle-sidebar-left i {
    color: #6c757d;
}
.header .logo-container .toggle-sidebar-left:hover i {
    color: #212529;
}
.header .logo-container .logo,
.header .logo-container .logo:hover,
.header .logo-container .logo:focus {
    color: #212529;
}
.header .header-right .search.nav-form .form-control {
    border-color: #d7dce1;
    background: #fff;
}
.header .header-right .search.nav-form .btn-default {
    border-color: #d7dce1;
    color: #6c757d;
    background: #fff;
}
.header-action-icon {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
    color: #777;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    width: 30px;
}
.header-action-icon i {
    font-size: 1.05rem;
    line-height: 1;
}
.header-action-icon:hover,
.header-action-icon:focus {
    color: #961b1e;
    transform: translateY(-1px);
}
.header-action-icon.is-primary {
    background: #961b1e;
    color: #fff;
}
.header-action-icon.is-primary:hover,
.header-action-icon.is-primary:focus {
    background: #7a1618;
    color: #fff;
}

/* ── Sidebar (Porto-default style, maroon accent) ────────────
   Mirrors porto-theme/HTML/css/skins/default.css with #961b1e
   replacing #0088CC. Hover/expand/active states keep Porto's
   subtle dark-on-dark feel — accent appears only as the
   2px inset rail, icon color, and active sub-item text.
*/
#sidebar-left,
.sidebar-left {
    background: #212529;
}

ul.nav-main > li.nav-active > a {
    box-shadow: 2px 0 0 #961b1e inset;
}
ul.nav-main > li.nav-active > i {
    color: #961b1e;
}
ul.nav-main li .nav-children li.nav-active > a {
    color: #961b1e;
}
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a {
    color: #961b1e;
}

/* Hover — Porto's dark-grey background + maroon text */
ul.nav-main > li > a:hover,
ul.nav-main > li > a:focus {
    background-color: #21262d;
    color: #961b1e;
}
ul.nav-main > li > a:hover i,
ul.nav-main > li > a:focus i {
    color: #961b1e;
}
ul.nav-main > li.nav-parent > a:hover:after,
ul.nav-main > li.nav-parent > a:focus:after {
    color: #961b1e;
}

/* Hover — sub-menu items (same treatment) */
ul.nav-main li .nav-children li a:hover,
ul.nav-main li .nav-children li a:focus {
    background-color: #21262d;
    color: #961b1e;
}

/* NanoScroller slider — accent thumb */
html.no-overflowscrolling .nano > .nano-pane > .nano-slider {
    background: #961b1e;
}

/* Collapsed-sidebar hover states */
@media only screen and (min-width: 768px) {
    html.sidebar-left-collapsed.scroll .sidebar-left .nav-main li.nav-active a:hover,
    html.sidebar-left-collapsed.boxed  .sidebar-left .nav-main li.nav-active a:hover {
        color: #961b1e;
    }
    html.sidebar-left-collapsed.scroll .sidebar-left .nav-main > li:hover > a span.badge,
    html.sidebar-left-collapsed.boxed  .sidebar-left .nav-main > li:hover > a span.badge {
        background-color: #961b1e;
    }
}

/* Sidebar toggle hover icon */
.sidebar-left .sidebar-header .sidebar-toggle:hover i {
    color: #961b1e;
}

/* Section separator */
.sidebar-left hr.separator {
    border-color: rgba(255,255,255,0.07);
}

/* Sidebar widgets */
.sidebar-left .sidebar-widget .widget-header {
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sidebar-left .sidebar-widget .widget-tasks a,
.sidebar-left .sidebar-widget .widget-stats .stats-title {
    color: rgba(255,255,255,0.65);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
    background-color: #961b1e;
    border-color: #961b1e;
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #7a1517;
    border-color: #7a1517;
    color: #fff;
}
.btn-outline-primary {
    color: #961b1e;
    border-color: #961b1e;
}
.btn-outline-primary:hover {
    background-color: #961b1e;
    color: #fff;
}

/* ── Form controls focus ──────────────────────────────────── */
.form-control:focus {
    border-color: #961b1e;
    box-shadow: 0 0 0 0.2rem rgba(150,27,30,0.15);
}

/* ── Breadcrumb active link ───────────────────────────────── */
.breadcrumbs li a:hover { color: #961b1e; }

/* ── Userbox ──────────────────────────────────────────────── */
#userbox .profile-info .name { color: #212529; }
#userbox .profile-info .role { color: #6c757d; }

/* ── Card featured / stat colors ─────────────────────────── */
.card-featured-primary {
    border-left-color: #961b1e !important;
}

/* ── Progress bars ─────────────────────────────────────────── */
.progress-bar { background-color: #961b1e; }

/* ── Notifications / Alerts ───────────────────────────────── */
.alert-primary {
    background-color: rgba(150,27,30,0.1);
    border-color: #961b1e;
    color: #961b1e;
}

/* ── Badge ────────────────────────────────────────────────── */
.badge-primary { background: #961b1e; color: #fff; }

/* ── NanoScroller thumb ───────────────────────────────────── */
.nano > .nano-pane > .nano-slider { background: rgba(150,27,30,0.35); }
