/* ==================================================
   ANDREIA PESSOA CONFEITARIA
   SIDEBAR DO PAINEL ADMINISTRATIVO
================================================== */

:root {
    --admin-primary: #df5b8b;
    --admin-primary-hover: #c94d7a;
    --admin-primary-light: #fff0f5;

    --admin-title: #66333e;
    --admin-text: #696164;
    --admin-text-light: #9b8f93;

    --admin-background: #f8f5f2;
    --admin-white: #ffffff;
    --admin-border: #f0dfe4;

    --admin-sidebar-width: 296px;

    --admin-shadow:
        8px 0 34px rgba(91, 47, 58, 0.07);

    --admin-transition: 0.25s ease;
}

/* ==================================================
   CONFIGURAÇÃO GERAL
================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;

    font-family: "Poppins", sans-serif;
    color: var(--admin-text);

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(223, 91, 139, 0.05),
            transparent 30%
        ),
        var(--admin-background);
}

/* ==================================================
   LAYOUT PRINCIPAL
================================================== */

.admin-layout {
    display: flex;

    width: 100%;
    min-height: 100vh;

    background: transparent;
}

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

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    z-index: 999;

    display: flex;
    flex-direction: column;

    width: var(--admin-sidebar-width);
    height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffdfd 55%,
            #fffafb 100%
        );

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

    box-shadow: var(--admin-shadow);
}

/* ==================================================
   PERFIL DO ADMINISTRADOR
================================================== */

.sidebar-admin {
    position: relative;

    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;

    margin: 15px 16px 13px;
    padding: 11px 12px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #fff8fa 0%,
            #ffedf3 100%
        );

    border: 1px solid #f1d8e0;
    border-radius: 20px;

    box-shadow:
        0 9px 24px rgba(100, 50, 64, 0.06);

    cursor: pointer;

    transition:
        transform var(--admin-transition),
        border-color var(--admin-transition),
        box-shadow var(--admin-transition),
        background var(--admin-transition);
}

.sidebar-admin::before {
    position: absolute;
    top: -46px;
    right: -46px;

    width: 100px;
    height: 100px;

    content: "";

    background:
        rgba(223, 91, 139, 0.07);

    border-radius: 50%;

    pointer-events: none;
}

.sidebar-admin:hover {
    color: inherit;

    background:
        linear-gradient(
            135deg,
            #fffafb 0%,
            #ffe8f0 100%
        );

    border-color: #edc8d4;

    transform: translateY(-1px);

    box-shadow:
        0 13px 29px rgba(100, 50, 64, 0.1);
}

.sidebar-admin:focus-visible {
    outline: 3px solid rgba(223, 91, 139, 0.22);
    outline-offset: 2px;
}

/* ==================================================
   LOGO DO ADMINISTRADOR
================================================== */

.sidebar-admin-logo {
    position: relative;

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

    flex-shrink: 0;

    width: 64px;
    height: 64px;

    overflow: hidden;

    background: transparent;

    border: 1px solid rgba(221, 151, 173, 0.42);
    border-radius: 50%;

    box-shadow:
        0 7px 17px rgba(92, 46, 59, 0.1);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.sidebar-admin-logo::after {
    position: absolute;
    inset: 2px;

    content: "";

    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;

    pointer-events: none;
}

.sidebar-admin-logo img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 2px;

    object-fit: contain;
    object-position: center;

    border-radius: 50%;

    transform: none;

    image-rendering: auto;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.sidebar-admin:hover .sidebar-admin-logo {
    border-color: rgba(223, 91, 139, 0.62);

    transform: scale(1.025);

    box-shadow:
        0 9px 21px rgba(92, 46, 59, 0.14);
}

.sidebar-admin:hover .sidebar-admin-logo img {
    transform: scale(1.02);

    filter: none;
}

/* ==================================================
   INFORMAÇÕES DO ADMINISTRADOR
================================================== */

.sidebar-admin-informacoes {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.sidebar-admin-informacoes strong {
    overflow: hidden;

    color: var(--admin-title);

    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;

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

.sidebar-admin-informacoes small {
    display: block;

    overflow: hidden;

    margin-top: 3px;

    color: var(--admin-text-light);

    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-admin:hover .sidebar-admin-informacoes strong {
    color: var(--admin-primary-hover);
}

/* ==================================================
   ÍCONE PARA VOLTAR À HOME
================================================== */

.sidebar-admin-home {
    position: relative;
    z-index: 2;

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

    width: 30px;
    height: 30px;

    color: var(--admin-primary);

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

    border: 1px solid #efd2dc;
    border-radius: 9px;

    font-size: 0.86rem;

    transition:
        color var(--admin-transition),
        background var(--admin-transition),
        border-color var(--admin-transition),
        transform var(--admin-transition),
        box-shadow var(--admin-transition);
}

.sidebar-admin:hover .sidebar-admin-home {
    color: #ffffff;
    background: var(--admin-primary);

    border-color: var(--admin-primary);

    transform: translateX(1px);

    box-shadow:
        0 5px 12px rgba(223, 91, 139, 0.2);
}

/* ==================================================
   MENU
================================================== */

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;

    flex: 1;

    min-height: 0;
    margin: 0;
    padding: 8px 17px 20px;

    overflow-x: hidden;
    overflow-y: auto;

    list-style: none;

    scrollbar-width: thin;
    scrollbar-color: rgba(223, 91, 139, 0.78) transparent;
}

.sidebar-menu li {
    width: 100%;
    margin: 0;
}

.sidebar-menu a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-height: 54px;
    padding: 13px 16px;

    overflow: hidden;

    color: #696366;
    text-decoration: none;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 15px;

    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;

    transition:
        color var(--admin-transition),
        background var(--admin-transition),
        border-color var(--admin-transition),
        transform var(--admin-transition),
        box-shadow var(--admin-transition);
}

.sidebar-menu a::after {
    position: absolute;
    top: 50%;
    right: 11px;

    width: 5px;
    height: 5px;

    content: "";

    background: currentColor;

    border-radius: 50%;

    opacity: 0;

    transform:
        translateY(-50%)
        scale(0);

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

/* ==================================================
   ÍCONES DO MENU
================================================== */

.sidebar-menu a i {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 25px;
    height: 25px;

    color: #777174;

    font-size: 1.28rem;
    line-height: 1;

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

/* ==================================================
   HOVER DO MENU
================================================== */

.sidebar-menu a:hover {
    color: var(--admin-primary-hover);

    background: var(--admin-primary-light);

    border-color: #f4dce4;

    transform: translateX(3px);

    box-shadow:
        0 7px 18px rgba(102, 48, 63, 0.05);
}

.sidebar-menu a:hover i {
    color: var(--admin-primary);

    transform: scale(1.06);
}

/* ==================================================
   ITEM ATIVO
================================================== */

.sidebar-menu a.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #eb73a0 0%,
            #dc5687 55%,
            #cf4d7b 100%
        );

    border-color: transparent;

    box-shadow:
        0 12px 25px rgba(215, 81, 130, 0.25);
}

.sidebar-menu a.active i {
    color: #ffffff;
}

.sidebar-menu a.active::after {
    background: #ffffff;

    opacity: 0.8;

    transform:
        translateY(-50%)
        scale(1);
}

/* ==================================================
   RODAPÉ DA SIDEBAR
================================================== */

.sidebar-footer {
    position: relative;
    z-index: 3;

    flex-shrink: 0;

    display: grid;
    gap: 10px;

    padding: 14px 17px 18px;

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

    border-top: 1px solid #f2e4e8;

    box-shadow:
        0 -10px 25px rgba(91, 47, 58, 0.035);
}

/* ==================================================
   USUÁRIO CONECTADO
================================================== */

.sidebar-usuario {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    width: 100%;
    min-width: 0;
    padding: 10px 12px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff8fa 100%
        );

    border: 1px solid #efdbe2;
    border-radius: 15px;

    box-shadow:
        0 7px 18px rgba(91, 47, 58, 0.045);
}

.sidebar-usuario-avatar {
    position: relative;

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

    width: 42px;
    height: 42px;

    color: #b46b84;

    background:
        linear-gradient(
            135deg,
            #f8e9ee,
            #f2dce4
        );

    border: 1px solid #ead2da;
    border-radius: 50%;

    font-size: 1.15rem;
}

.sidebar-usuario-status {
    position: absolute;
    right: -1px;
    bottom: 1px;

    width: 11px;
    height: 11px;

    background: #42bd7a;

    border: 2px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 2px 5px rgba(36, 132, 81, 0.2);
}

.sidebar-usuario-informacoes {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.sidebar-usuario-informacoes strong {
    display: block;

    overflow: hidden;

    color: var(--admin-title);

    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-usuario-informacoes small {
    display: block;

    overflow: hidden;

    margin-top: 2px;

    color: var(--admin-text-light);

    font-size: 0.67rem;
    font-weight: 500;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-height: 51px;
    padding: 12px 16px;

    color: var(--admin-primary-hover);
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #fff2f6,
            #ffedf3
        );

    border: 1px solid #f5dce4;
    border-radius: 15px;

    font-size: 0.95rem;
    font-weight: 700;

    transition:
        color var(--admin-transition),
        background var(--admin-transition),
        border-color var(--admin-transition),
        transform var(--admin-transition),
        box-shadow var(--admin-transition);
}

.sidebar-footer a i {
    font-size: 1rem;

    transition: transform var(--admin-transition);
}

.sidebar-footer a:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #e76796,
            #ce4d7a
        );

    border-color: transparent;

    transform: translateY(-2px);

    box-shadow:
        0 10px 23px rgba(215, 81, 130, 0.22);
}

.sidebar-footer a:hover i {
    transform: translateX(-2px);
}

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

.admin-layout > div:not(.sidebar) {
    width: 100%;
    min-width: 0;
}

.admin-content {
    width: calc(100% - var(--admin-sidebar-width));
    min-height: 100vh;

    margin-left: var(--admin-sidebar-width);
    padding: 38px 42px;

    background: transparent;
}

/* ==================================================
   BARRA DE ROLAGEM DO MENU
================================================== */

.sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

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

.sidebar-menu::-webkit-scrollbar-thumb {
    background:
        rgba(223, 91, 139, 0.78);

    border-radius: 999px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: var(--admin-primary-hover);
}

/* ==================================================
   RESPONSIVO — NOTEBOOK
================================================== */

@media (max-width: 1199.98px) {
    :root {
        --admin-sidebar-width: 274px;
    }

    .sidebar-admin {
        grid-template-columns: 60px minmax(0, 1fr) 28px;

        margin-right: 14px;
        margin-left: 14px;
        padding: 10px 11px;
    }

    .sidebar-admin-logo {
        width: 60px;
        height: 60px;
    }

    .sidebar-admin-informacoes strong {
        font-size: 0.9rem;
    }

    .sidebar-admin-informacoes small {
        font-size: 0.69rem;
    }

    .sidebar-menu {
        padding-right: 14px;
        padding-left: 14px;
    }

    .sidebar-menu a {
        padding-right: 14px;
        padding-left: 14px;
    }

    .admin-content {
        padding: 32px;
    }
}

/* ==================================================
   RESPONSIVO — TABLET
================================================== */

@media (max-width: 991.98px) {
    .sidebar {
        left: calc(var(--admin-sidebar-width) * -1);

        transition:
            left 0.35s ease,
            box-shadow 0.35s ease;
    }

    .sidebar.active {
        left: 0;

        box-shadow:
            14px 0 38px rgba(63, 31, 40, 0.18);
    }

    .admin-content {
        width: 100%;

        margin-left: 0;
        padding: 24px 20px;
    }
}

/* ==================================================
   RESPONSIVO — CELULAR
================================================== */

@media (max-width: 575.98px) {
    :root {
        --admin-sidebar-width: min(90vw, 296px);
    }

    .sidebar-admin {
        grid-template-columns: 58px minmax(0, 1fr) 28px;

        margin-top: 13px;
        padding: 9px 10px;
    }

    .sidebar-admin-logo {
        width: 58px;
        height: 58px;
    }

    .sidebar-admin-informacoes strong {
        font-size: 0.88rem;
    }

    .sidebar-admin-informacoes small {
        font-size: 0.67rem;
    }

    .sidebar-admin-home {
        width: 28px;
        height: 28px;

        font-size: 0.82rem;
    }

    .sidebar-menu a {
        min-height: 51px;

        font-size: 0.93rem;
    }

    .sidebar-footer {
        padding-right: 14px;
        padding-left: 14px;
    }

    .sidebar-usuario {
        grid-template-columns: 40px minmax(0, 1fr);

        padding: 9px 10px;
    }

    .sidebar-usuario-avatar {
        width: 40px;
        height: 40px;
    }

    .sidebar-usuario-informacoes strong {
        font-size: 0.76rem;
    }

    .admin-content {
        padding: 18px 14px;
    }
}