/* Menu lateral fixo — CSS próprio (carregado DEPOIS do Ant Design).
   O Menu (itens/submenu) continua sendo o AntDesign; só o container é nosso.

   Animação alinhada às HIG da Apple (Motion / Core Animation):
   - Preferir transform + opacity (camada composta) em vez de width no conteúdo —
     evita o texto “desmanchar” por reflow durante a transição.
   - Curva única suave (ease-in-out / spring-like) nos dois sentidos.
   - Respeitar prefers-reduced-motion com fade sem deslocamento. */

.nimbus-app-shell.ant-layout {
    min-height: 100vh;
}

.nimbus-app-shell {
    /* Tokens de motion (docs/diretrizes_animacao.md) */
    --nimbus-motion-duration-fast: 0.15s;
    --nimbus-motion-duration: 0.36s;
    --nimbus-motion-ease: cubic-bezier(0.32, 0.72, 0, 1);

    --nimbus-sider-width: 260px;
    --nimbus-sider-duration: var(--nimbus-motion-duration);
    --nimbus-sider-ease: var(--nimbus-motion-ease);
}

.nimbus-app-sider-wrap {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: var(--nimbus-sider-width);
    height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
    overflow: visible;
    /* Só o “espaço reservado” muda de largura; o painel em si desliza intacto */
    transition: width var(--nimbus-sider-duration) var(--nimbus-sider-ease);
}

.nimbus-app-sider-wrap.is-collapsed {
    width: 0;
}

.nimbus-app-sider {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    /* Largura FIXA: nunca anima width do conteúdo (sem reflow/quebra de linha) */
    width: var(--nimbus-sider-width);
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #001529;
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform var(--nimbus-sider-duration) var(--nimbus-sider-ease);
}

.nimbus-app-sider-wrap.is-collapsed .nimbus-app-sider {
    /* Desloca o painel inteiro como camada (HIG: mover o objeto, não deformá-lo) */
    transform: translate3d(-100%, 0, 0);
    pointer-events: none;
}

.nimbus-app-sider-brand {
    flex-shrink: 0;
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}

.nimbus-app-sider-brand-link {
    color: #fff;
    text-decoration: none;
}

.nimbus-app-sider-brand-link:hover {
    color: #fff;
}

/* Scroll independente do menu (não acompanha a página) */
.nimbus-app-sider-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Botão central que “sai” da barra */
.nimbus-app-sider-toggle {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    z-index: 101;
    width: 22px;
    height: 56px;
    padding: 0;
    margin: 0;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: #fff;
    color: #595959;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.nimbus-app-sider-toggle:hover {
    color: #1677ff;
    border-color: #91caff;
    background: #f5faff;
    box-shadow: 3px 0 12px rgba(22, 119, 255, 0.18);
}

.nimbus-app-sider-toggle:focus-visible {
    outline: 2px solid #1677ff;
    outline-offset: 2px;
}

.nimbus-app-sider-wrap.is-collapsed .nimbus-app-sider-toggle {
    border-left: 1px solid #d9d9d9;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.16);
}

/* Conteúdo deslocado pela largura reservada do menu */
.nimbus-app-main.ant-layout {
    margin-left: var(--nimbus-sider-width, 260px);
    min-height: 100vh;
    width: calc(100% - var(--nimbus-sider-width, 260px));
    box-sizing: border-box;
    transition:
        margin-left var(--nimbus-sider-duration, 0.36s) var(--nimbus-sider-ease, cubic-bezier(0.32, 0.72, 0, 1)),
        width var(--nimbus-sider-duration, 0.36s) var(--nimbus-sider-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

.nimbus-app-shell.is-sider-collapsed .nimbus-app-main.ant-layout {
    margin-left: 0;
    width: 100%;
}

/* 3 níveis (ex.: Tickets > Operação > item): menos indentação + texto completo (sem ellipsis). */
.nimbus-app-sider .ant-menu-inline.ant-menu-root > .ant-menu-submenu > .ant-menu-submenu-title {
    padding-inline: 16px 34px !important;
}

.nimbus-app-sider .ant-menu-inline .ant-menu-submenu .ant-menu-sub > .ant-menu-submenu > .ant-menu-submenu-title {
    padding-inline: 28px 34px !important;
}

.nimbus-app-sider .ant-menu-inline .ant-menu-submenu .ant-menu-sub > .ant-menu-item {
    padding-inline: 28px 16px !important;
}

.nimbus-app-sider .ant-menu-inline .ant-menu-submenu .ant-menu-sub .ant-menu-sub > .ant-menu-item {
    padding-inline: 40px 12px !important;
}

.nimbus-app-sider .ant-menu-item,
.nimbus-app-sider .ant-menu-submenu-title {
    height: auto !important;
    min-height: 40px;
    line-height: 1.3 !important;
    white-space: normal;
    padding-block: 8px;
}

.nimbus-app-sider .ant-menu-title-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
    word-break: break-word;
}

.nimbus-app-sider .ant-menu-item .anticon,
.nimbus-app-sider .ant-menu-submenu-title .anticon {
    vertical-align: top;
    margin-top: 2px;
}

/* Submenu: composição (opacity + translate3d), sem animar height do texto.
   Duração/curva = tokens --nimbus-motion-* (diretrizes_animacao.md §2 / §3.3). */
.nimbus-app-sider .ant-menu-submenu-arrow,
.nimbus-app-sider .ant-menu-submenu-arrow::before,
.nimbus-app-sider .ant-menu-submenu-arrow::after {
    transition: transform var(--nimbus-motion-duration-fast, 0.15s) var(--nimbus-motion-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

/* Desliga collapse por height do Ant Design (reflow / texto “embaralhando”).
   O CSS do Ant usa !important em height/opacity — sobrescrevemos com seletor mais específico. */
.nimbus-app-sider .ant-motion-collapse,
.nimbus-app-sider .ant-motion-collapse-active,
.nimbus-app-sider .ant-motion-collapse-appear,
.nimbus-app-sider .ant-motion-collapse-leave,
.nimbus-app-sider .ant-motion-collapse-enter,
.nimbus-app-sider .ant-motion-collapse-leave-active,
.nimbus-app-sider .ant-motion-collapse-enter-active,
.nimbus-app-sider .ant-motion-collapse-legacy,
.nimbus-app-sider .ant-motion-collapse-legacy-active {
    transition: none !important;
    animation: none !important;
}

.nimbus-app-sider .ant-menu-submenu > .ant-menu-sub.ant-menu-inline {
    overflow: hidden;
}

.nimbus-app-sider .ant-menu-submenu-open > .ant-menu-sub.ant-menu-inline:not(.ant-menu-hidden) {
    animation: nimbus-submenu-in var(--nimbus-motion-duration-fast, 0.15s) var(--nimbus-motion-ease, cubic-bezier(0.32, 0.72, 0, 1)) both;
}

@keyframes nimbus-submenu-in {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nimbus-submenu-in-reduced {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* HIG: Reduced Motion → preferir dissolve em vez de deslocamento */
@media (prefers-reduced-motion: reduce) {
    .nimbus-app-sider-wrap,
    .nimbus-app-sider,
    .nimbus-app-main.ant-layout {
        transition: none !important;
    }

    .nimbus-app-sider-wrap.is-collapsed .nimbus-app-sider {
        transform: none;
        opacity: 0;
    }

    .nimbus-app-sider .ant-menu-submenu-open > .ant-menu-sub.ant-menu-inline:not(.ant-menu-hidden) {
        animation: nimbus-submenu-in-reduced var(--nimbus-motion-duration-fast, 0.15s) linear both;
    }

    .nimbus-app-sider .ant-menu-submenu-arrow,
    .nimbus-app-sider .ant-menu-submenu-arrow::before,
    .nimbus-app-sider .ant-menu-submenu-arrow::after {
        transition: none;
    }
}