/* =========================================================
   PASCOM+ — LAYOUT PRINCIPAL
   Sidebar + Header + Área de conteúdo
   ========================================================= */

.app-shell {
    width: 100%;
    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    z-index: 300;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-right:
        1px solid
        var(--border);

    box-shadow:
        8px 0 28px
        rgba(35, 25, 29, 0.035);
}


.sidebar-header {
    min-height:
        var(--header-height);

    flex:
        0 0
        var(--header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        0 18px;

    border-bottom:
        1px solid
        var(--border);
}


.sidebar-brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


.sidebar-logo-mark {
    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        -0.04em;

    box-shadow:
        0 8px 20px
        rgba(122, 31, 43, 0.18);
}


.sidebar-brand-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.sidebar-brand-text strong {
    color:
        var(--primary);

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.2;
}


.sidebar-brand-text span {
    max-width:
        155px;

    overflow:
        hidden;

    color:
        var(--text-muted);

    font-size:
        9px;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.sidebar-close {
    display:
        none;

    width:
        38px;

    height:
        38px;

    padding:
        9px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--text-secondary);

    cursor:
        pointer;
}


.sidebar-close:hover {
    background:
        var(--primary-soft);

    color:
        var(--primary);
}


/* =========================================================
   SIDEBAR — SCROLL E NAVEGAÇÃO
   ========================================================= */

.sidebar-scroll {
    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        19px 11px;
}


.sidebar-nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.sidebar-section-title {
    margin:
        0 10px 8px;

    color:
        var(--text-muted);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.sidebar-section-spaced {
    margin-top:
        24px;
}


.nav-item {
    position:
        relative;

    min-height:
        43px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        9px 11px;

    border-radius:
        10px;

    color:
        #625b5d;

    font-size:
        11px;

    font-weight:
        500;

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition);
}


.nav-item:hover {
    background:
        var(--primary-soft-2);

    color:
        var(--primary);

    transform:
        translateX(2px);
}


.nav-item.active {
    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-weight:
        600;
}


.nav-item.active::before {
    content:
        '';

    position:
        absolute;

    top:
        9px;

    bottom:
        9px;

    left:
        -1px;

    width:
        3px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--primary);
}


.nav-icon {
    width:
        19px;

    height:
        19px;

    flex:
        0 0 19px;
}


/* =========================================================
   SIDEBAR — USUÁRIO
   ========================================================= */

.sidebar-footer {
    flex-shrink:
        0;

    padding:
        11px;

    border-top:
        1px solid
        var(--border);

    background:
        #fdfcfc;
}


.sidebar-user {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px;

    border-radius:
        11px;

    transition:
        background-color
        var(--transition);
}


.sidebar-user:hover {
    background:
        var(--primary-soft);
}


.avatar {
    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        700;
}


.avatar-sm {
    width:
        36px;

    height:
        36px;

    flex-basis:
        36px;
}


.sidebar-user-info,
.header-user-info {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;
}


.sidebar-user-info strong,
.header-user-info strong {
    overflow:
        hidden;

    color:
        var(--text-primary);

    font-size:
        10px;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.sidebar-user-info span,
.header-user-info span {
    color:
        var(--text-muted);

    font-size:
        8px;
}


/* =========================================================
   MAIN
   ========================================================= */

.app-main {
    width:
        calc(
            100% -
            var(--sidebar-width)
        );

    min-height:
        100vh;

    margin-left:
        var(--sidebar-width);
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    position:
        sticky;

    top:
        0;

    z-index:
        200;

    min-height:
        var(--header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        0 30px;

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}


.header-left {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.header-menu-button {
    display:
        none;

    width:
        40px;

    height:
        40px;

    padding:
        8px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--primary);

    cursor:
        pointer;
}


.header-menu-button:hover {
    background:
        var(--primary-soft);
}


.header-page-title {
    min-width:
        0;
}


.header-eyebrow {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--text-muted);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.header-page-title h1 {
    margin:
        0;

    color:
        var(--text-primary);

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.25;
}


.header-actions {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.header-user {
    position:
        relative;
}


.header-user-button {
    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        6px 9px;

    border:
        0;

    border-radius:
        12px;

    background:
        transparent;

    cursor:
        pointer;

    transition:
        background-color
        var(--transition);
}


.header-user-button:hover,
.header-user-button.is-open {
    background:
        var(--primary-soft-2);
}


.header-user-info {
    max-width:
        165px;

    text-align:
        left;
}


.header-user-chevron {
    width:
        14px;

    height:
        14px;

    color:
        var(--text-muted);

    transition:
        transform
        var(--transition);
}


.header-user-button.is-open
.header-user-chevron {
    transform:
        rotate(180deg);
}


/* =========================================================
   MENU DO USUÁRIO
   ========================================================= */

.user-dropdown {
    position:
        absolute;

    top:
        calc(100% + 8px);

    right:
        0;

    z-index:
        400;

    width:
        220px;

    visibility:
        hidden;

    padding:
        7px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-lg);

    opacity:
        0;

    transform:
        translateY(-6px);

    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);
}


.user-dropdown.is-open {
    visibility:
        visible;

    opacity:
        1;

    transform:
        translateY(0);
}


.user-dropdown a,
.user-dropdown button {
    width:
        100%;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    padding:
        9px 10px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-size:
        10px;

    font-weight:
        500;

    text-align:
        left;

    cursor:
        pointer;
}


.user-dropdown a:hover,
.user-dropdown button:hover {
    background:
        var(--primary-soft);

    color:
        var(--primary);
}


.user-dropdown form {
    margin:
        0;
}


.user-dropdown-divider {
    height:
        1px;

    margin:
        5px 4px;

    background:
        var(--border);
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.page-content {
    width:
        100%;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    padding:
        30px;

    background:
        var(--background);
}


.sidebar-overlay {
    display:
        none;
}


.guest-main {
    min-height:
        100vh;
}