/* =========================================
   React Sidebar Bridge
   Purpose: make Razor/AdminLTE sidebar match
   the React/shadcn-style sidebar closely
   ========================================= */

/* ---------- Theme tokens from React ---------- */
:root {
    --font-size: 16px;
    --background: #ffffff;
    --foreground: #111827;
    --card: #ffffff;
    --card-foreground: #111827;
    --popover: #ffffff;
    --popover-foreground: #111827;
    --primary: #030213;
    --primary-foreground: #ffffff;
    --secondary: #f1f5f9;
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --accent-foreground: #030213;
    --destructive: #d4183d;
    --destructive-foreground: #ffffff;
    --border: rgba(0, 0, 0, 0.1);
    --input: transparent;
    --input-background: #f3f3f5;
    --switch-background: #cbced4;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: #b3b3b3;
    --radius: 0.625rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --sidebar: #fafafa;
    --sidebar-foreground: #171717;
    --sidebar-primary: #030213;
    --sidebar-primary-foreground: #fafafa;
    --sidebar-accent: #f5f5f5;
    --sidebar-accent-foreground: #171717;
    --sidebar-border: #e5e7eb;
    --sidebar-ring: #d4d4d8;
    --sidebar-width: 280px;
    --sidebar-top-height: 72px;
    --sidebar-bottom-height: 88px;
    --sidebar-text-size: 14px;
    --sidebar-icon-size: 16px;
    --sidebar-group-height: 40px;
    --sidebar-child-height: 36px;
    --transition-fast: 0.15s ease;
    --transition-med: 0.2s ease;
}

html.dark,
html[data-theme="dark"],
html[data-bs-theme="dark"],
.dark {
    --background: #171717;
    --foreground: #fafafa;
    --card: #171717;
    --card-foreground: #fafafa;
    --popover: #171717;
    --popover-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #262626;
    --secondary: #262626;
    --secondary-foreground: #fafafa;
    --muted: #262626;
    --muted-foreground: #a1a1aa;
    --accent: #262626;
    --accent-foreground: #fafafa;
    --destructive: #7f1d1d;
    --destructive-foreground: #fecaca;
    --border: #262626;
    --input: #262626;
    --ring: #52525b;
    --sidebar: #262626;
    --sidebar-foreground: #fafafa;
    --sidebar-primary: #7c3aed;
    --sidebar-primary-foreground: #fafafa;
    --sidebar-accent: #2f2f2f;
    --sidebar-accent-foreground: #fafafa;
    --sidebar-border: #3f3f46;
    --sidebar-ring: #52525b;
}

/* ---------- Base typography alignment ---------- */
html {
    font-size: var(--font-size);
}

body,
button,
input,
select,
textarea {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

    body.synx-shell-body {
        background: var(--background) !important;
        color: var(--foreground) !important;
        font-size: 14px;
        line-height: 1.5;
    }

/* ---------- Shell layout ---------- */
.synx-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: var(--background);
}

.synx-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--sidebar) !important;
    color: var(--sidebar-foreground) !important;
    border-right: 1px solid var(--sidebar-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    box-shadow: none !important;
    z-index: 30;
}

.synx-content {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--background) !important;
}

.synx-main {
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--background) !important;
    color: var(--foreground) !important;
}

/* ---------- Sidebar sections ---------- */
.synx-sidebar-top {
    min-height: var(--sidebar-top-height);
    padding: 1rem 1rem 0.875rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--sidebar);
}

    .synx-sidebar-top a {
        color: var(--sidebar-foreground) !important;
    }

    .synx-sidebar-top img {
        display: block;
        max-height: 42px;
        width: auto;
    }

.synx-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    background: var(--sidebar);
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}

    .synx-sidebar-nav::-webkit-scrollbar {
        width: 8px;
    }

    .synx-sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .synx-sidebar-nav::-webkit-scrollbar-thumb {
        background: var(--sidebar-border);
        border-radius: 999px;
    }

.synx-sidebar-bottom {
    min-height: var(--sidebar-bottom-height);
    padding: 0.75rem;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    background: var(--sidebar);
}

/* ---------- Neutralize AdminLTE/Bootstrap defaults ---------- */
.synx-sidebar .sidebar-wrapper,
.synx-sidebar nav,
.synx-sidebar .sidebar-menu,
.synx-sidebar .nav,
.synx-sidebar .nav-treeview {
    background: transparent !important;
}

.synx-sidebar ul,
.synx-sidebar li {
    list-style: none;
}

.synx-sidebar .sidebar-menu,
.synx-sidebar .nav.sidebar-menu {
    margin: 0;
    padding: 0;
}

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

.synx-sidebar .nav-link {
    text-decoration: none !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: none !important;
}

    .synx-sidebar .nav-link:focus,
    .synx-sidebar .nav-link:focus-visible {
        outline: 2px solid transparent !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-ring) 45%, transparent) !important;
    }

/* ---------- Top-level group items ---------- */
.synx-sidebar #navigation > .nav-item {
    margin-bottom: 0.125rem;
}

    .synx-sidebar #navigation > .nav-item > .nav-link {
        min-height: var(--sidebar-group-height);
        border-radius: var(--radius-lg);
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem !important;
        color: var(--sidebar-foreground) !important;
        background: transparent !important;
        font-size: var(--sidebar-text-size);
        font-weight: var(--font-weight-medium);
        line-height: 1.25rem;
        transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    }

        .synx-sidebar #navigation > .nav-item > .nav-link:hover {
            background: var(--sidebar-accent) !important;
            color: var(--sidebar-accent-foreground) !important;
        }

        .synx-sidebar #navigation > .nav-item > .nav-link > p {
            margin: 0;
            width: 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            font-size: var(--sidebar-text-size);
            font-weight: var(--font-weight-medium);
            line-height: 1.25rem;
        }

    /* Mark top-level active/open parent */
    .synx-sidebar #navigation > .nav-item.menu-open > .nav-link,
    .synx-sidebar #navigation > .nav-item.has-active-child > .nav-link {
        background: var(--sidebar-accent) !important;
        color: var(--sidebar-accent-foreground) !important;
    }

/* ---------- Chevron ---------- */
.synx-sidebar .nav-arrow {
    margin-left: auto !important;
    font-size: 12px !important;
    line-height: 1;
    opacity: 0.7;
    transition: transform var(--transition-med), opacity var(--transition-fast);
    flex-shrink: 0;
}

.synx-sidebar .menu-open > .nav-link .nav-arrow {
    transform: rotate(90deg);
    opacity: 1;
}

/* ---------- Treeview container ---------- */
.synx-sidebar .nav-treeview {
    display: none;
    margin: 0.25rem 0 0.5rem 0 !important;
    padding: 0.125rem 0 0 0.5rem !important;
    position: relative;
}

.synx-sidebar .menu-open > .nav-treeview {
    display: block;
}

/* Optional subtle guide line */
.synx-sidebar .nav-treeview::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    bottom: 0.125rem;
    left: 0.6rem;
    width: 1px;
    background: color-mix(in srgb, var(--sidebar-border) 65%, transparent);
    border-radius: 999px;
}

/* ---------- Child nav items ---------- */
.synx-sidebar .nav-treeview .nav-item {
    position: relative;
    margin: 0.125rem 0;
}

.synx-sidebar .nav-treeview .nav-link {
    min-height: var(--sidebar-child-height);
    border-radius: var(--radius-md);
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem !important;
    margin-left: 0.5rem;
    color: var(--muted-foreground) !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    line-height: 1.25rem;
    transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

    .synx-sidebar .nav-treeview .nav-link:hover {
        background: var(--sidebar-accent) !important;
        color: var(--sidebar-accent-foreground) !important;
    }

    .synx-sidebar .nav-treeview .nav-link.active {
        background: var(--primary) !important;
        color: var(--primary-foreground) !important;
        font-weight: var(--font-weight-medium);
    }

html.dark .synx-sidebar .nav-treeview .nav-link.active,
html[data-theme="dark"] .synx-sidebar .nav-treeview .nav-link.active,
html[data-bs-theme="dark"] .synx-sidebar .nav-treeview .nav-link.active,
.dark .synx-sidebar .nav-treeview .nav-link.active {
    background: var(--sidebar-primary) !important;
    color: var(--sidebar-primary-foreground) !important;
}

.synx-sidebar .nav-treeview .nav-link p {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.25rem;
}

/* ---------- Icons ---------- */
.synx-sidebar .nav-icon {
    width: var(--sidebar-icon-size) !important;
    min-width: var(--sidebar-icon-size) !important;
    height: var(--sidebar-icon-size) !important;
    margin-right: 0 !important;
    font-size: var(--sidebar-icon-size) !important;
    line-height: 1 !important;
    color: inherit !important;
    opacity: 0.92;
    flex-shrink: 0;
}

.synx-sidebar .nav-treeview .nav-link.active .nav-icon {
    color: inherit !important;
    opacity: 1;
}

/* ---------- Active state cleanup ---------- */
.synx-sidebar .nav-link.active,
.synx-sidebar .nav-link.active:hover,
.synx-sidebar .nav-link.active:focus {
    box-shadow: none !important;
}

.synx-sidebar #navigation > .nav-item > .nav-link.active {
    background: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}

/* ---------- Profile card ---------- */
.synx-profile-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    text-decoration: none !important;
    color: var(--sidebar-foreground) !important;
    background: transparent;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

    .synx-profile-link:hover {
        background: var(--sidebar-accent);
        border-color: var(--sidebar-border);
        color: var(--sidebar-foreground) !important;
    }

    .synx-profile-link:focus,
    .synx-profile-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-ring) 45%, transparent);
    }

.synx-avatar {
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

html.dark .synx-avatar,
html[data-theme="dark"] .synx-avatar,
html[data-bs-theme="dark"] .synx-avatar,
.dark .synx-avatar {
    background: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
}

.synx-profile-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    color: var(--sidebar-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.synx-profile-email {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.25;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Logo row tightening ---------- */
.synx-sidebar-top .fw-semibold,
.synx-sidebar-top span {
    color: var(--sidebar-foreground);
}

/* ---------- Content side refinement ---------- */
.synx-content,
.synx-main {
    color: var(--foreground);
}

    .synx-main .card,
    .synx-main .content-card {
        background: var(--card);
        color: var(--card-foreground);
        border-color: var(--border);
        border-radius: var(--radius-lg);
    }

/* ---------- Better visual consistency for bootstrap buttons inside layout if needed ---------- */
.synx-sidebar .btn,
.synx-sidebar button {
    font-size: 14px;
}

/* ---------- RTL support ---------- */
html[dir="rtl"] .synx-sidebar {
    border-right: 0;
    border-left: 1px solid var(--sidebar-border);
}

    html[dir="rtl"] .synx-sidebar .nav-treeview {
        padding: 0.125rem 0.5rem 0 0 !important;
    }

        html[dir="rtl"] .synx-sidebar .nav-treeview::before {
            left: auto;
            right: 0.6rem;
        }

        html[dir="rtl"] .synx-sidebar .nav-treeview .nav-link {
            margin-left: 0;
            margin-right: 0.5rem;
            padding: 0.5rem 1rem 0.5rem 0.75rem !important;
        }

    html[dir="rtl"] .synx-sidebar .nav-arrow {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    html[dir="rtl"] .synx-sidebar .menu-open > .nav-link .nav-arrow {
        transform: rotate(-90deg);
    }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .synx-sidebar {
        width: 260px;
        min-width: 260px;
        max-width: 260px;
    }

    .synx-main {
        padding: 1rem;
    }
}

/* ---------- Strong overrides for AdminLTE states ---------- */
.synx-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.synx-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.synx-sidebar .nav-pills .nav-link.active,
.synx-sidebar .nav-pills .show > .nav-link {
    box-shadow: none !important;
}

.synx-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.synx-sidebar .nav-sidebar > .nav-item:hover > .nav-link,
.synx-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    box-shadow: none !important;
}

/* ---------- Optional utility if you change <p> to span later ---------- */
.synx-sidebar .nav-label {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
}








html, body {
    height: 100%;
    margin: 0;
}

body {
    background: #f8fafc;
}

.synx-content {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    background: #f8fafc;
}

.synx-main {
    width: 100%;
    min-height: 100vh;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #f8fafc;
}

.lm-page {
    width: 100%;
    min-height: 100vh;
    background: #f8fafc;
}