/* --- Skin (lightweight) --- */
:root {
    --crm-bg: #f6f7fb;
    --crm-surface: #ffffff;
    --crm-border: rgba(0,0,0,.08);
    --crm-sidebar: #0b0b0c; /* near-black */
    --crm-sidebar-muted: rgba(255,255,255,.7);
    --crm-sidebar-hover: rgba(255,255,255,.08);
}

body {
    background: var(--crm-bg);
}

/* Sidebar sizing for desktop */
.crm-sidebar {
    width: 260px;
    background: var(--crm-sidebar);
    color: #fff;
    min-height: 100vh;
    position: sticky;
    top: 0;
}

.crm-brand {
    font-weight: 700;
    letter-spacing: .3px;
}

.crm-nav .nav-link {
    color: var(--crm-sidebar-muted);
    border-radius: 10px;
    padding: .55rem .75rem;
}

    .crm-nav .nav-link:hover,
    .crm-nav .nav-link:focus {
        color: #fff;
        background: var(--crm-sidebar-hover);
    }

    .crm-nav .nav-link.active {
        color: #fff;
        background: rgba(255,255,255,.12);
    }

/* Main content card feel */
.crm-surface {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Make offcanvas match the sidebar */
.offcanvas.crm-offcanvas {
    background: var(--crm-sidebar);
    color: #fff;
}

    .offcanvas.crm-offcanvas .nav-link {
        color: var(--crm-sidebar-muted);
    }

        .offcanvas.crm-offcanvas .nav-link:hover {
            color: #fff;
            background: var(--crm-sidebar-hover);
        }

/* On mobile, give content a little bottom breathing room */
@media (max-width: 767.98px) {
    .crm-content-pad {
        padding-top: 4.25rem; /* navbar height */
    }
}
.client-logo {
    max-height: 56px; /* desktop default */
}

@media (max-width: 767.98px) {
    .client-logo {
        max-height: 36px; /* mobile */
    }
}
.lockico {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('../icons/lock.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter:invert();
    }
.unlockico {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('../icons/unlock.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert();
}