/* Navegação principal do JuriMachine, acompanhando o tema do Unfold. */

:root {
    --sidebar-bg: var(--ui-surface);
    --sidebar-bg-deep: var(--ui-bg);
    --sidebar-dock: var(--ui-veil);
    --sidebar-border: var(--ui-border);
    --sidebar-text: var(--ui-text);
    --sidebar-important: var(--ui-ink);
    --sidebar-muted: var(--ui-muted);
    --sidebar-icon: var(--ui-muted);
    --sidebar-blue: var(--ui-primary);
    --sidebar-cyan: var(--ui-cyan);
    --sidebar-violet: var(--ui-violet);
    --sidebar-active-text: var(--ui-primary-ink);
    --sidebar-active-icon: var(--ui-primary);
    --sidebar-hover-icon: var(--ui-primary);
    --sidebar-menu-bg: var(--ui-surface);
    --sidebar-menu-border: var(--ui-border);

    /* Translúcidos e gradientes dependem do modo, por isso ficam explícitos. */
    --sidebar-header: rgba(255, 255, 255, .88);
    --sidebar-surface: rgba(15, 23, 42, .045);
    --sidebar-surface-hover: rgba(21, 94, 239, .075);
    --sidebar-active-bg: linear-gradient(100deg, rgba(21, 94, 239, .13), rgba(124, 58, 237, .09));
    --sidebar-active-border: rgba(21, 94, 239, .22);
    --sidebar-shadow: 12px 0 36px rgba(15, 23, 42, .07);
}

.dark {
    /* Só o que não deriva dos tokens canônicos: translúcidos e gradientes. */
    --sidebar-header: rgba(24, 35, 54, .72);
    --sidebar-surface: rgba(255, 255, 255, .075);
    --sidebar-surface-hover: rgba(255, 255, 255, .115);
    --sidebar-active-bg: linear-gradient(100deg, rgba(61, 107, 231, .42), rgba(111, 78, 202, .28));
    --sidebar-active-border: rgba(122, 159, 255, .34);
    --sidebar-active-text: #ffffff;
    --sidebar-active-icon: #c4e8ff;
    --sidebar-menu-bg: var(--ui-surface-soft);
    --sidebar-shadow: 12px 0 36px rgba(4, 10, 24, .12);
}

#nav-sidebar {
    background:
        radial-gradient(circle at 18% -4%, rgba(77, 124, 255, .24), transparent 21rem),
        linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%) !important;
    border-color: var(--sidebar-border) !important;
    box-shadow: var(--sidebar-shadow);
    color: var(--sidebar-text);
    isolation: isolate;
    overflow: hidden;
}

#nav-sidebar::before {
    background-image:
        linear-gradient(rgba(126, 156, 220, .027) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 156, 220, .027) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

#nav-sidebar::after {
    background: linear-gradient(180deg, var(--sidebar-blue), var(--sidebar-cyan), var(--sidebar-violet));
    content: "";
    height: 92px;
    opacity: .88;
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
}

#nav-sidebar-inner {
    background: transparent !important;
    color: var(--sidebar-text) !important;
    position: relative;
}

/* Brand */
#nav-sidebar-inner > div:first-child {
    background: var(--sidebar-header);
    border-color: var(--sidebar-border) !important;
    height: 76px !important;
    margin-bottom: 14px !important;
    padding: 0 17px !important;
}

#nav-sidebar-inner > div:first-child > div:first-child {
    height: 75px !important;
    padding: 0 !important;
}

.sidebar-brand {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 0;
    width: 100%;
}

.sidebar-brand__mark {
    background: linear-gradient(145deg, #123a78, #092552);
    border: 1px solid rgba(126, 231, 245, .18);
    border-radius: var(--ui-radius-md);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .09);
    display: block;
    flex: 0 0 40px;
    height: 40px;
    overflow: hidden;
    position: relative;
    width: 40px;
}

.sidebar-brand__mark::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 48%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.sidebar-brand__mark img {
    height: 40px;
    max-width: none !important;
    object-fit: contain;
    width: auto !important;
}

.sidebar-brand__copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.sidebar-brand__copy strong {
    color: var(--sidebar-important);
    font-size: 14px;
    font-weight: 720;
    letter-spacing: -.015em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand__copy small {
    color: var(--sidebar-muted);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .075em;
    line-height: 1.5;
    margin-top: 2px;
    overflow: hidden;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand__status {
    animation: sidebar-status-pulse 2.8s ease-in-out infinite;
    background: var(--ui-success);
    border: 2px solid var(--ui-bg);
    border-radius: var(--ui-radius-pill);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .08);
    flex: 0 0 auto;
    height: 9px;
    width: 9px;
}

@keyframes sidebar-status-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .07); }
    50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, .015); }
}

/* Scrollable navigation */
#nav-sidebar-apps {
    padding: 2px 10px 12px;
}

#nav-sidebar-apps .simplebar-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#nav-sidebar-apps > .simplebar-track.simplebar-vertical {
    right: 2px;
    width: 5px;
}

#nav-sidebar-apps .simplebar-scrollbar::before {
    background: rgba(162, 182, 215, .42);
    border-radius: var(--ui-radius-pill);
}

#nav-sidebar-apps hr {
    border-color: var(--sidebar-border) !important;
    margin: 9px 10px 8px !important;
}

#nav-sidebar-apps h2 {
    color: var(--sidebar-muted) !important;
    font-size: 10px !important;
    font-weight: 780 !important;
    letter-spacing: .115em;
    margin: 0 1px 4px !important;
    min-height: 34px;
    padding: 9px 10px 7px !important;
    text-transform: uppercase;
    transition: background .16s ease, color .16s ease;
}

#nav-sidebar-apps h2.cursor-pointer:hover {
    background: var(--sidebar-surface);
    border-radius: var(--ui-radius-sm);
    color: var(--sidebar-important) !important;
}

#nav-sidebar-apps h2 .material-symbols-outlined {
    color: var(--sidebar-icon);
    font-size: 17px;
}

#nav-sidebar-apps ol {
    gap: 4px !important;
    padding: 0 2px !important;
}

#nav-sidebar-apps li a {
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--sidebar-text) !important;
    font-size: 12px;
    font-weight: 550;
    height: 44px !important;
    letter-spacing: -.005em;
    margin: 0 !important;
    overflow: hidden;
    padding: 0 11px !important;
    position: relative;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

#nav-sidebar-apps li a:hover {
    background: var(--sidebar-surface-hover) !important;
    border-color: rgba(160, 184, 222, .18);
    color: var(--sidebar-important) !important;
    transform: translateX(2px);
}

#nav-sidebar-apps li a > .material-symbols-outlined:first-child {
    align-items: center;
    background: rgba(148, 170, 207, .12);
    border: 1px solid rgba(163, 184, 220, .12);
    border-radius: var(--ui-radius-xs);
    color: var(--sidebar-icon);
    display: flex !important;
    flex: 0 0 29px;
    font-size: 17px !important;
    height: 29px;
    justify-content: center;
    margin-right: 10px !important;
    transition: background .16s ease, color .16s ease;
    width: 29px !important;
}

#nav-sidebar-apps li a:hover > .material-symbols-outlined:first-child {
    background: rgba(79, 124, 255, .14);
    color: var(--sidebar-hover-icon);
}

#nav-sidebar-apps li a.active {
    background: var(--sidebar-active-bg) !important;
    border-color: var(--sidebar-active-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 7px 18px rgba(0, 0, 0, .13);
    color: var(--sidebar-active-text) !important;
    font-weight: 650 !important;
}

#nav-sidebar-apps li a.active::before {
    background: linear-gradient(180deg, var(--sidebar-cyan), var(--sidebar-blue), var(--sidebar-violet));
    border-radius: 0 var(--ui-radius-2xs) var(--ui-radius-2xs) 0;
    content: "";
    height: 24px;
    left: -3px;
    position: absolute;
    top: 9px;
    width: 3px;
}

#nav-sidebar-apps li a.active > .material-symbols-outlined:first-child {
    background: linear-gradient(145deg, rgba(79, 124, 255, .34), rgba(139, 92, 246, .26));
    border-color: rgba(142, 179, 255, .2);
    color: var(--sidebar-active-icon);
    text-shadow: 0 0 16px rgba(66, 213, 232, .45);
}

#nav-sidebar-apps li a > span:not(.material-symbols-outlined) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#nav-sidebar-apps li a [class*="rounded-xs"] {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    font-size: 10px;
    margin-left: auto;
}

/* User account dock */
#nav-sidebar-inner > div:last-child {
    background: var(--sidebar-dock);
    border-color: var(--sidebar-border) !important;
    padding: 7px 13px !important;
}

#nav-sidebar-inner > div:last-child > div:last-child {
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    color: var(--sidebar-text);
    margin: 0 !important;
    min-height: 56px !important;
    padding: 8px 9px !important;
    transition: background .16s ease, border-color .16s ease;
}

#nav-sidebar-inner > div:last-child > div:last-child:hover,
#nav-sidebar-inner > div:last-child > div:last-child[class*="bg-base"] {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(148, 169, 207, .1);
}

#nav-sidebar-inner > div:last-child > div:last-child > div:first-child {
    background: linear-gradient(145deg, rgba(79, 124, 255, .24), rgba(139, 92, 246, .2)) !important;
    border: 1px solid rgba(130, 163, 255, .16);
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
    color: var(--ui-primary-ink);
}

#nav-sidebar-inner > div:last-child .text-important,
#nav-sidebar-inner > div:last-child .text-subtle {
    color: var(--sidebar-text) !important;
    font-size: 12px !important;
}

#nav-sidebar-inner > div:last-child .text-subtle {
    color: var(--sidebar-muted) !important;
    font-size: 10px !important;
}

#nav-sidebar-inner > div:last-child > div:last-child > .material-symbols-outlined {
    color: var(--ui-muted) !important;
    font-size: 17px;
}

#nav-sidebar-inner > div:last-child > nav {
    background: var(--sidebar-menu-bg) !important;
    border-color: var(--sidebar-menu-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38) !important;
    color: var(--sidebar-text);
    overflow: hidden;
}

#nav-sidebar-inner > div:last-child > nav a,
#nav-sidebar-inner > div:last-child > nav button {
    color: var(--sidebar-text) !important;
    font-size: 12px !important;
}

#nav-sidebar-apps li a:focus-visible {
    border-color: rgba(147, 197, 253, .55) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .16);
    color: var(--sidebar-important) !important;
    outline: none;
}

#nav-sidebar-inner > div:last-child > nav a:hover,
#nav-sidebar-inner > div:last-child > nav button:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--sidebar-important) !important;
}

/* The mobile close control lives inside the brand header. */
#nav-sidebar-inner > div:first-child > .material-symbols-outlined {
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--ui-radius-xs);
    color: var(--sidebar-muted);
    display: flex !important;
    height: 32px !important;
    justify-content: center;
    width: 32px;
}

@media (max-width: 1279px) {
    #nav-sidebar {
        box-shadow: 20px 0 70px rgba(2, 7, 18, .42);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-brand__status {
        animation: none;
    }

    #nav-sidebar * {
        transition-duration: .01ms !important;
    }
}