/* =============================================
   Sidebar Width Override — 153px
   THIS FILE MUST LOAD LAST (after responsive.css)
   to override the theme's 265px and responsive
   100px sidebar-related layout values.
   ============================================= */

:root {
    --sidebar-width: 200px;
}

/* ---- Sidebar wrapper ---- */
.sidebar-wrapper {
    width: var(--sidebar-width) !important;
    background-color: #1f2f3e !important;
    overflow: hidden !important;
}

.sidebar-wrapper > div {
    width: var(--sidebar-width) !important;
}

/* ---- Page body & footer offset ---- */
.page-wrapper .page-body-wrapper .page-body,
.page-wrapper .page-body-wrapper footer {
    margin-left: var(--sidebar-width) !important;
}

/* Override responsive.css @media (max-width: 1800px) which sets margin-left: 100px */
@media (max-width: 1800px) {
    .page-wrapper .page-body-wrapper .page-body,
    .page-wrapper .page-body-wrapper footer {
        margin-left: var(--sidebar-width) !important;
    }
}

/* ---- Page header ---- */
.page-wrapper .page-header {
    padding-left: var(--sidebar-width) !important;
}

/* ---- Footer ---- */
.footer {
    margin-left: var(--sidebar-width) !important;
}

.footer-fix {
    width: calc(100% - var(--sidebar-width)) !important;
}

/* ---- RTL support ---- */
[dir=rtl] .page-wrapper .page-body-wrapper .page-body,
[dir=rtl] .page-wrapper .page-body-wrapper footer {
    margin-left: unset !important;
    margin-right: var(--sidebar-width) !important;
}

[dir=rtl] .page-wrapper .page-header {
    padding-left: unset !important;
    padding-right: var(--sidebar-width) !important;
}

[dir=rtl] .footer {
    margin-left: unset !important;
    margin-right: var(--sidebar-width) !important;
}

/* ---- Closed/collapsed sidebar (toggle icon click) ---- */
.sidebar-wrapper.close_icon {
    width: 56px !important;
}

.sidebar-wrapper.close_icon ~ .page-body,
.page-wrapper .page-body-wrapper .sidebar-wrapper.close_icon ~ .page-body {
    margin-left: 56px !important;
}

.sidebar-wrapper.close_icon ~ footer,
.page-wrapper .page-body-wrapper .sidebar-wrapper.close_icon ~ footer {
    margin-left: 56px !important;
}

.page-header.close_icon {
    padding-left: 56px !important;
}

/* ---- Sidebar inner elements — fit narrower width ---- */
.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link {
    padding: 10px 12px !important;
}

.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link span {
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link svg,
.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link i {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    margin-right: 8px;
    stroke: rgba(255, 255, 255, 0.6) !important;
    fill: none;
    transition: all 0.3s ease;
}

.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list:hover .sidebar-link svg,
.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list:hover .sidebar-link i {
    stroke: #fff !important;
    transform: translateX(2px);
}

.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link svg.fill-icon {
    fill: rgba(255, 255, 255, 0.6) !important;
    stroke: none !important;
}

.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list:hover .sidebar-link svg.fill-icon {
    fill: #fff !important;
}

/* ---- Logo — no gap between logo and nav ---- */
.sidebar-wrapper .logo-wrapper {
    padding: 12px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

.sidebar-wrapper .logo-wrapper img {
    max-width: 100%;
    height: auto;
}

.sidebar-wrapper .sidebar-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ---- Responsive: mobile — sidebar collapses to overlay ---- */
@media (max-width: 991px) {
    .page-wrapper .page-body-wrapper .page-body,
    .page-wrapper .page-body-wrapper footer {
        margin-left: 0 !important;
    }

    .page-wrapper .page-header {
        padding-left: 0 !important;
    }

    .footer {
        margin-left: 0 !important;
    }
}