/* ============================================================
   clean-theme.css  —  navbar + sidebar refresh
   Flat · minimal · indigo accent · light sidebar
   Drop-in override. Include AFTER your main style.css:
     <link rel="stylesheet" href="{{ asset('assets/css/clean-theme.css') }}">
   No Blade/markup changes required. Every menu item, collapse,
   dropdown and role-based link is preserved — this only restyles.
   ============================================================ */

:root {
    --nm-accent: #4f46e5; /* indigo-600 */
    --nm-accent-600: #4338ca;
    --nm-accent-tint: #eef2ff; /* active pill background */
    --nm-bg: #ffffff;
    --nm-border: #eceff3; /* hairlines */
    --nm-ink: #1f2733; /* primary text */
    --nm-muted: #6b7280; /* secondary text */
    --nm-icon: #9aa4b2; /* idle icons */
    --nm-hover: #f5f7fb; /* hover wash */
    --nm-radius: 10px;
}

/* ------------------------------------------------------------
   NAVBAR
   ------------------------------------------------------------ */
.navbar,
.navbar .navbar-brand-wrapper,
.navbar .navbar-menu-wrapper {
    background: var(--nm-bg);
}

.navbar {
    border-bottom: 1px solid var(--nm-border);
    box-shadow: none;
}

.navbar .navbar-brand-wrapper {
    border-right: 1px solid var(--nm-border);
}

/* Search field → soft filled pill */
.navbar .navbar-menu-wrapper .search-field .input-group {
    background: var(--nm-hover);
    border-radius: var(--nm-radius);
    padding: .15rem .55rem;
    min-width: 260px;
}

.navbar .navbar-menu-wrapper .search-field .input-group .input-group-text {
    background: transparent;
    color: var(--nm-icon);
}

.navbar .navbar-menu-wrapper .search-field .input-group .form-control {
    background: transparent;
    color: var(--nm-ink);
}

/* Idle icons muted, accent on hover */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
    color: var(--nm-muted);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link i {
    color: var(--nm-icon);
    transition: color .15s ease;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:hover i {
    color: var(--nm-accent);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-toggle:after {
    color: var(--nm-icon);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-text p {
    color: var(--nm-ink) !important;
}

/* Dropdowns: hairline + soft shadow, and FIX the invisible white-on-light
   hover text from the base template */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu {
    border: 1px solid var(--nm-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .08);
    padding: .35rem;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    border-radius: 8px;
    margin: 2px 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background: var(--nm-hover);
    color: var(--nm-ink);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu .text-primary {
    color: var(--nm-accent) !important;
}

/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------ */
.sidebar {
    background: var(--nm-bg);
    border-right: 1px solid var(--nm-border);
}

/* Tighter rail so each link can sit in its own rounded pill */
.sidebar .nav {
    padding: .5rem .75rem;
}

.sidebar .nav .nav-item {
    padding: 0;
    margin: 2px 0;
}

/* Neutralise the base template's full-bleed item hover/active fills —
   the pill lives on the link now */
.sidebar .nav .nav-item:hover,
.sidebar .nav .nav-item.active {
    background: transparent;
}

/* The link itself = the pill, with the icon moved to the LEFT */
.sidebar .nav .nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .68rem .85rem;
    border-radius: var(--nm-radius);
    color: var(--nm-ink);
    transition: background .15s ease, color .15s ease;
}

.sidebar .nav .nav-item > .nav-link i.menu-icon {
    order: -1; /* pull icon before the label */
    margin: 0 !important;
    font-size: 1.15rem;
    color: var(--nm-icon);
}

.sidebar .nav .nav-item > .nav-link .menu-title {
    flex: 1;
    color: inherit;
    font-size: .9rem;
}

.sidebar .nav .nav-item > .nav-link i.menu-arrow {
    order: 1;
    margin-left: auto !important;
    color: var(--nm-icon);
}

/* Hover */
.sidebar .nav .nav-item > .nav-link:hover {
    background: var(--nm-hover);
}

.sidebar:not(.sidebar-offcanvas) .nav:not(.sub-menu) > .nav-item:hover > .nav-link {
    color: var(--nm-ink);
}

/* Active — soft indigo pill */
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item > .nav-link.active {
    background: var(--nm-accent-tint);
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item > .nav-link.active .menu-title,
.sidebar .nav .nav-item > .nav-link.active i {
    color: var(--nm-accent);
}

.sidebar .nav .nav-item.active > .nav-link .menu-title {
    font-weight: 600;
}

/* Open collapsible parent (Payroll / Settings) reads as accent */
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] .menu-title,
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] i {
    color: var(--nm-accent);
}

/* ----- Sub-menu (collapsed children) ----- */
.sidebar .nav.sub-menu {
    position: relative;
    margin: .1rem 0 .35rem;
    padding: 0 .35rem 0 2.7rem; /* indent under parent icon */
}

.sidebar .nav.sub-menu::before {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: .2rem;
    bottom: .25rem;
    width: 1px;
    background: var(--nm-border);
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    position: relative;
    padding: .5rem .8rem;
    margin: 1px 0;
    border-radius: 8px;
    font-size: .82rem;
    color: var(--nm-muted);
}

.sidebar .nav.sub-menu .nav-item .nav-link::before {
    display: none; /* drop the template's mdi bullet */
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
    background: var(--nm-hover);
    color: var(--nm-ink);
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
    background: var(--nm-accent-tint);
    color: var(--nm-accent);
    font-weight: 600;
}

/* ----- Profile block at top of sidebar ----- */
.sidebar .nav .nav-item.nav-profile {
    margin: .25rem 0 .6rem;
}

.sidebar .nav .nav-item.nav-profile .nav-link {
    background: var(--nm-hover);
    border-radius: 12px;
    padding: .85rem;
    gap: .75rem;
}

.sidebar .nav .nav-item.nav-profile .nav-link:hover {
    background: var(--nm-hover);
}

.sidebar .nav .nav-item.nav-profile .nav-profile-image,
.sidebar .nav .nav-item.nav-profile .nav-profile-image img {
    width: 42px;
    height: 42px;
}

.sidebar .nav .nav-item.nav-profile .nav-profile-text .font-weight-bold {
    color: var(--nm-ink);
    font-size: .9rem;
}

.sidebar .nav .nav-item.nav-profile .nav-profile-text .text-small {
    color: var(--nm-muted);
}

.sidebar .nav .nav-item.nav-profile .nav-profile-badge {
    color: var(--nm-accent) !important;
}

/* ------------------------------------------------------------
   ICON-ONLY (mini) MODE — keep the flyout tidy
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    .sidebar-icon-only .sidebar .nav.sub-menu::before {
        display: none;
    }

    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title,
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
        background: var(--nm-bg);
        box-shadow: 0 10px 28px rgba(17, 24, 39, .08);
    }
}