/* =========================================================
   Synexusone - layout.css
   - Fixed left sidebar (280px)
   - Only middle nav scrolls
   - Right content is the only scroll area
   - Parent items dark grey + bold
   - ONLY active parent + active child = #2563EB
   - Hover background = light grey
   ========================================================= */

:root {
    --synx-blue: #2563EB;
    --synx-parent: #3a3a3a;
    --synx-child: #555555;
    --synx-hover-bg: #f2f2f2;
    --synx-active-bg: #EFF6FF;
}

/* =========================================================
   HARD RESET (prevent body/document scroll + horizontal gaps)
   ========================================================= */
html, body {
    height: 100%;
}

    body.synx-shell-body {
        margin: 0;
        height: 100vh;
        overflow: hidden; /* only right panel scrolls */
    }

/* =========================================================
   2-COLUMN SHELL
   ========================================================= */
.synx-shell {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row; /* FORCE side-by-side */
    align-items: stretch;
    min-width: 0; /* important for flex children */
}

/* LEFT: Sidebar */
.synx-sidebar {
    width: 280px;
    flex: 0 0 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* sidebar itself never scrolls */
    border-right: 1px solid rgba(0,0,0,.08);
    background: var(--bs-body-bg);
}

.synx-sidebar-top {
    flex: 0 0 auto;
    padding: 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.synx-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0; /* CRITICAL for inner scrolling */
    overflow-y: auto; /* ONLY this area scrolls */
    overflow-x: hidden;
    padding: 10px 10px 14px 10px;
}

.synx-sidebar-bottom {
    flex: 0 0 auto;
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* RIGHT: Content panel (only this scrolls) */
.synx-content {
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    overflow: auto;
    background: var(--bs-body-bg);
}

.synx-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 24px;
}

    /* Stop Bootstrap containers from shrinking within the right pane */
    .synx-main .container,
    .synx-main .container-sm,
    .synx-main .container-md,
    .synx-main .container-lg,
    .synx-main .container-xl,
    .synx-main .container-xxl {
        max-width: 100% !important;
    }

/* =========================================================
   PROFILE PILL
   ========================================================= */
.synx-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

    .synx-profile-link:hover {
        background: rgba(0,0,0,.05);
    }

.synx-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--synx-blue);
    font-weight: 800;
    letter-spacing: .5px;
    flex: 0 0 40px;
}

.synx-profile-name {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: var(--bs-body-color);
}

.synx-profile-email {
    font-size: .78rem;
    margin: 2px 0 0 0;
    color: var(--bs-secondary-color);
}

/* =========================================================
   AdminLTE wrappers (keep spacing sane)
   ========================================================= */
.synx-sidebar .sidebar-wrapper {
    padding: 0;
}

    .synx-sidebar .sidebar-wrapper nav {
        margin-top: 0 !important;
    }

/* =========================================================
   SIDEBAR COLOR SYSTEM (only active parent/child = blue)
   ========================================================= */

/* Parent default: dark grey + bold */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link p,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link .nav-icon {
    color: var(--synx-parent) !important;
    font-weight: 700;
    background: transparent !important;
}

/* Child default */
.sidebar-wrapper .nav-treeview .nav-link,
.sidebar-wrapper .nav-treeview .nav-link p,
.sidebar-wrapper .nav-treeview .nav-link .nav-icon {
    color: var(--synx-child) !important;
    font-weight: 600;
    background: transparent !important;
}

/* Hover: light grey background (text stays dark) */
.sidebar-wrapper .nav-link:hover {
    background-color: var(--synx-hover-bg) !important;
}

/* Active child ONLY */
.sidebar-wrapper .nav-treeview .nav-link.active,
.sidebar-wrapper .nav-treeview .nav-link.active p,
.sidebar-wrapper .nav-treeview .nav-link.active .nav-icon {
    color: var(--synx-blue) !important;
/*    font-weight: 800;*/
    background: transparent !important;
}

/* Active parent ONLY (open group or active parent) */
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link,
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link p,
.sidebar-wrapper .sidebar-menu > .nav-item.menu-open > .nav-link .nav-icon,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active p,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active .nav-icon {
    color: var(--synx-blue) !important;
/*    font-weight: 800;*/
    background-color: var(--synx-active-bg) !important;
}

/* Chevron rotate when open */
.sidebar-menu .menu-open > .nav-link .nav-arrow {
    transform: translateY(-70%) rotate(90deg);
}

/* Remove AdminLTE active shadows/background residue */
.sidebar-wrapper .nav-link {
    box-shadow: none !important;
}

/* Keep treeviews open when menu-open is applied (accordion off) */
.sidebar-menu[data-accordion="false"] .nav-treeview {
    display: none;
}

.sidebar-menu[data-accordion="false"] .nav-item.menu-open > .nav-treeview {
    display: block;
}

/* ================================
   FIX: Only current parent is blue
   ================================ */

/* 1) HARD DEFAULT: parent links are grey (always) */
#navigation > li.nav-item > a.nav-link,
#navigation > li.nav-item > a.nav-link p,
#navigation > li.nav-item > a.nav-link .nav-icon {
    color: var(--synx-parent) !important;
/*    font-weight: 700 !important;*/
    background: transparent !important;
}

/* 2) Parent becomes blue ONLY if it contains an active child */
#navigation > li.nav-item:has(ul.nav-treeview a.nav-link.active) > a.nav-link,
#navigation > li.nav-item:has(ul.nav-treeview a.nav-link.active) > a.nav-link p,
#navigation > li.nav-item:has(ul.nav-treeview a.nav-link.active) > a.nav-link .nav-icon {
    color: var(--synx-blue) !important;
/*    font-weight: 800 !important;*/
    background-color: var(--synx-active-bg) !important;
}

/* 3) If the parent link itself is active, make it blue too */
#navigation > li.nav-item > a.nav-link.active,
#navigation > li.nav-item > a.nav-link.active p,
#navigation > li.nav-item > a.nav-link.active .nav-icon {
    color: var(--synx-blue) !important;
/*    font-weight: 800 !important;*/
    background-color: var(--synx-active-bg) !important;
}

/* =========================================================
   OVERRIDE: menu-open MUST NOT automatically turn parents blue
   (we keep menu-open for "expanded", but color stays grey unless
   it has an active child or the link is active)
   ========================================================= */
#navigation > li.nav-item.menu-open > a.nav-link,
#navigation > li.nav-item.menu-open > a.nav-link p,
#navigation > li.nav-item.menu-open > a.nav-link .nav-icon {
    color: var(--synx-parent) !important;
    background: transparent !important;
/*    font-weight: 700 !important;*/
}

/* If menu-open ALSO has active child, allow the blue rule above to win */
#navigation > li.nav-item.menu-open:has(ul.nav-treeview a.nav-link.active) > a.nav-link,
#navigation > li.nav-item.menu-open:has(ul.nav-treeview a.nav-link.active) > a.nav-link p,
#navigation > li.nav-item.menu-open:has(ul.nav-treeview a.nav-link.active) > a.nav-link .nav-icon {
    color: var(--synx-blue) !important;
    background-color: var(--synx-active-bg) !important;
/*    font-weight: 800 !important;*/
}

.container {
    padding: 0;
}

/* =========================================================
   FIX: If a parent is CLOSED (not .menu-open), it must NOT be blue
   - even if the parent link has .active
   - even if it contains an active child
   ========================================================= */

/* Closed parent with active child -> keep GREY */
#navigation > li.nav-item:not(.menu-open):has(ul.nav-treeview a.nav-link.active) > a.nav-link,
#navigation > li.nav-item:not(.menu-open):has(ul.nav-treeview a.nav-link.active) > a.nav-link p,
#navigation > li.nav-item:not(.menu-open):has(ul.nav-treeview a.nav-link.active) > a.nav-link .nav-icon {
    color: var(--synx-parent) !important;
    background: transparent !important;
/*    font-weight: 700 !important;*/
}

/* Closed parent that still has .active (because of @ActiveIf) -> keep GREY */
#navigation > li.nav-item:not(.menu-open) > a.nav-link.active,
#navigation > li.nav-item:not(.menu-open) > a.nav-link.active p,
#navigation > li.nav-item:not(.menu-open) > a.nav-link.active .nav-icon {
    color: var(--synx-parent) !important;
    background: transparent !important;
/*    font-weight: 700 !important;*/
}

/* Profile pill text wrapping */
.synx-profile-link .min-w-0 {
    min-width: 0; /* critical for wrapping inside flex */
}

#profileEmail {
    white-space: normal !important; /* allow wrapping */
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word; /* break long emails */
    overflow-wrap: anywhere; /* best wrapping behaviour */
    line-height: 1.2;
}

#profileEmail {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

.nav-link, .nav-item {
    transition: none;
    transform: none;
}

/* =========================================
   SIDEBAR COLOR SYSTEM
   ========================================= */

/* ---------- DEFAULT (Parent items) ---------- */
/*.sidebar-wrapper > nav > .sidebar-menu > .nav-item > .nav-link {
    color: #3a3a3a !important;*/ /* dark grey */
    /*font-weight: 600;*/ /* bold */
    /*background-color: transparent !important;
}*/

/* child items default */
/*.sidebar-wrapper .nav-treeview .nav-link {
    color: #555 !important;
    font-weight: 500;
}*/

/* ---------- HOVER (light grey background) ---------- */
/*.sidebar-wrapper .nav-link:hover {
    background-color: #f2f2f2 !important;
    color: #3a3a3a !important;
}*/

/* ---------- ACTIVE CHILD ITEM ---------- */
/*.sidebar-wrapper .nav-treeview .nav-link.active,
.sidebar-wrapper .nav-treeview .nav-link.active p,
.sidebar-wrapper .nav-treeview .nav-link.active .nav-icon {
    color: #2563EB !important;*/ /* Bootstrap blue */
    /*font-weight: 600;
    background-color: transparent !important;
}*/

/* ---------- ACTIVE PARENT (menu-open OR direct active) ---------- */
/*.sidebar-wrapper .nav-item.menu-open > .nav-link,
.sidebar-wrapper .nav-item > .nav-link.active {
    color: #2563EB !important;
    font-weight: 700;
    background-color: #EFF6FF !important;
}*/

    /* ---------- Icons follow text color ---------- */
    /*.sidebar-wrapper .nav-link.active .nav-icon,
    .sidebar-wrapper .nav-item.menu-open > .nav-link .nav-icon {
        color: #0d6efd !important;
    }*/

/* ---------- Chevron rotate when open ---------- */
/*.sidebar-menu .menu-open > .nav-link .nav-arrow {
    transform: translateY(-70%) rotate(90deg);
}*/


/* ===========================
   LAYOUT SHELL (FIXED SIDEBAR)
   =========================== */

/* IMPORTANT: body must have class synx-shell-body */
/*.synx-shell-body {
    height: 100vh;
    overflow: hidden;*/ /* stop the whole document scrolling */
/*}*/

/* two-column layout */
/*.synx-shell {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
}*/

/* sidebar fixed */
/*.synx-sidebar {
    width: 280px;
    flex: 0 0 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;*/ /* sidebar container never scrolls */
    /*border-right: 1px solid rgba(0,0,0,.08);
    background: var(--bs-body-bg);
}*/

/* top pinned */
/*.synx-sidebar-top {
    flex: 0 0 auto;
    padding: 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}*/

/* ONLY nav section scrolls */
/*.synx-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;*/ /* CRITICAL: allows the middle to scroll inside flex */
    /*overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 14px 10px;
}*/

/* bottom pinned */
/*.synx-sidebar-bottom {
    flex: 0 0 auto;
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,.08);
}*/

/* ===========================
   LAYOUT SHELL (FIXED SIDEBAR)
   =========================== */

/*.synx-shell-body {
    height: 100vh;
    overflow: hidden;*/ /* page itself must NOT scroll */
/*}

.synx-shell {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    min-width: 0;*/ /* important */
/*}*/

/* LEFT */
/*.synx-sidebar {
    width: 280px;
    flex: 0 0 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(0,0,0,.08);
    background: var(--bs-body-bg);
}

.synx-sidebar-top {
    flex: 0 0 auto;
    padding: 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.synx-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;*/ /* CRITICAL */
    /*overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 14px 10px;
}

.synx-sidebar-bottom {
    flex: 0 0 auto;
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,.08);
}*/

/* RIGHT (THIS was missing) */
/*.synx-content {
    flex: 1 1 auto;*/ /* <-- makes it fill the remaining width */
    /*min-width: 0;*/ /* <-- prevents overflow / weird shrink */
    /*height: 100vh;
    overflow: auto;*/ /* <-- only RIGHT side scrolls */
    /*background: var(--bs-body-bg);
}*/

/* content padding */
/*.synx-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 24px;
}*/

    /* ===========================
   IMPORTANT: stop Bootstrap .container shrinking your page
   =========================== */

    /*.synx-main .container,
    .synx-main .container-sm,
    .synx-main .container-md,
    .synx-main .container-lg,
    .synx-main .container-xl,
    .synx-main .container-xxl {
        max-width: 100% !important;
    }*/

    /* Optional: if you want full-width edge-to-edge inside views */
    /*.synx-main .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }*/


/* ===========================
   PROFILE PILL
   =========================== */
/*.synx-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

.synx-profile-link:hover {
    background: rgba(0,0,0,.05);
}

.synx-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #0d6efd;
    font-weight: 700;
    letter-spacing: .5px;
    flex: 0 0 40px;
}

.synx-profile-name {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    color: var(--bs-body-color);
}

.synx-profile-email {
    font-size: .78rem;
    margin: 2px 0 0 0;
    color: var(--bs-secondary-color);
}*/


/* ===========================
   AdminLTE wrapper tweaks
   =========================== */
/*.synx-sidebar .sidebar-wrapper {
    padding: 0;
}

.synx-sidebar .sidebar-wrapper nav {
    margin-top: 0 !important;
}*/


/* ===========================
   Treeview: keep open (no accordion)
   =========================== */
/*.sidebar-menu[data-accordion="false"] .nav-treeview {
    display: none;
}

.sidebar-menu[data-accordion="false"] .nav-item.menu-open > .nav-treeview {
    display: block;
}

.nav-link, .nav-link a {
    transition: none;
}*/