/*
 * Orena One — App Shell (Fase 3): sidebar, topbar, breadcrumbs, drawer.
 * Documentação: docs/orena/app-shell/
 *
 * Mesmas regras do Design System (travadas por teste):
 *   - só seletores `.o-*` / `[data-orena-*]` — convive com o CSS legado
 *     das telas que ainda não usam o shell;
 *   - só tokens `--orena-*`, nenhum asset externo;
 *   - foco nunca removido: todo controle tem :focus-visible;
 *   - motion discreto (DS-MOTION-01) e desligado por
 *     data-orena-motion="off" e prefers-reduced-motion (fim do arquivo).
 *
 * Layout: mobile-first. Abaixo de 1024px (--orena-bp-desktop) o menu é
 * um drawer; a partir daí, sidebar fixa (recolhível).
 */

.o-shell {
    --o-shell-sidebar-width: 240px;
    --o-shell-sidebar-compact: 72px;
    --o-shell-topbar-height: 56px;
    /* Acima dos overlays legados (até 9999), abaixo do modal do DS. */
    --o-shell-z-overlay: calc(var(--orena-z-modal) - 2);
    --o-shell-z-drawer: calc(var(--orena-z-modal) - 1);
    min-height: 100vh;
    background: var(--orena-background);
    color: var(--orena-text-primary);
}

.o-shell-body { margin: 0; background: var(--orena-background); }

/* Rolagem do body travada enquanto o drawer está aberto (orena-shell.js). */
.o-shell-scroll-lock,
.o-shell-scroll-lock .o-shell-body { overflow: hidden; }

/* ---------- Skip link ---------- */
.o-skip-link {
    position: absolute;
    top: var(--orena-space-2);
    left: var(--orena-space-2);
    z-index: var(--orena-z-toast);
    padding: var(--orena-space-2) var(--orena-space-4);
    background: var(--orena-primary);
    color: var(--orena-on-primary);
    font-weight: var(--orena-font-weight-bold);
    border-radius: var(--orena-radius-md);
    text-decoration: none;
    transform: translateY(-200%);
}
.o-skip-link:focus,
.o-skip-link:focus-visible {
    transform: none;
    outline: var(--orena-focus-ring-width) solid var(--orena-text-primary);
    outline-offset: 2px;
}

/* ================================================================
 * Sidebar (drawer no mobile, fixa no desktop)
 * ================================================================ */
.o-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--o-shell-z-drawer);
    display: flex;
    flex-direction: column;
    width: min(85vw, var(--o-shell-sidebar-width));
    background: var(--orena-surface);
    border-right: 1px solid var(--orena-border);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--orena-motion-normal) var(--orena-ease-out),
                visibility 0s linear var(--orena-motion-normal);
}
.o-shell.is-drawer-open .o-sidebar {
    transform: none;
    visibility: visible;
    box-shadow: var(--orena-shadow-lg);
    transition: transform var(--orena-motion-normal) var(--orena-ease-out);
}

.o-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--orena-space-2);
    min-height: var(--o-shell-topbar-height);
    padding: 0 var(--orena-space-3) 0 var(--orena-space-4);
    border-bottom: 1px solid var(--orena-border);
}
.o-sidebar__brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--orena-space-2);
    min-height: var(--orena-hit-target);
    color: var(--orena-text-primary);
    text-decoration: none;
    border-radius: var(--orena-radius-md);
}
.o-sidebar__logo { width: 28px; height: 28px; flex: none; }
.o-sidebar__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.o-sidebar__logo path,
.o-sidebar__logo circle { stroke: url(#orenaShellGrad); }
.o-sidebar__wordmark {
    font-size: var(--orena-font-size-sm);
    font-weight: var(--orena-font-weight-extrabold);
    letter-spacing: 0.12em;
    white-space: nowrap;
}
.o-sidebar__wordmark .orena-wordmark__primary { color: var(--orena-primary); }
.o-sidebar__wordmark .orena-wordmark__secondary { color: var(--orena-text-primary); }

.o-sidebar__context {
    padding: var(--orena-space-3) var(--orena-space-4);
    border-bottom: 1px solid var(--orena-border);
}

.o-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--orena-space-3) var(--orena-space-2);
}

.o-sidebar__footer {
    display: none;
    padding: var(--orena-space-2);
    border-top: 1px solid var(--orena-border);
}

/* ---------- Contexto do tenant / console ---------- */
.o-tenant-context {
    display: flex;
    align-items: center;
    gap: var(--orena-space-2);
    min-width: 0;
}
.o-tenant-context__icon { color: var(--orena-primary); flex: none; }
.o-tenant-context__text { display: flex; flex-direction: column; min-width: 0; }
.o-tenant-context__label {
    font-size: var(--orena-font-size-xs);
    color: var(--orena-text-secondary);
}
.o-tenant-context__name {
    font-size: var(--orena-font-size-sm);
    font-weight: var(--orena-font-weight-semibold);
    color: var(--orena-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Platform Console: mesmo componente, marcação de área distinta. */
.o-tenant-context--platform .o-tenant-context__icon { color: var(--orena-warning); }

/* White-label v1 (UIUX-01B): logo da loja ou, sem logo, a inicial do nome.
   Moldura neutra do DS: o cliente personaliza só a imagem e o nome. */
.o-tenant-context__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid var(--orena-border-strong);
    border-radius: var(--orena-radius-md);
    background: var(--orena-surface-sunken);
}
.o-tenant-context__mark--initial {
    font-size: var(--orena-font-size-sm);
    font-weight: var(--orena-font-weight-bold);
    color: var(--orena-primary);
}
.o-tenant-context__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ================================================================
 * Auth Shell (UIUX-01B): login, esqueci senha, resetar senha.
 * Tela centralizada, marca Orena One, componentes do DS; sem sidebar.
 * Sem animação própria (o pulso do login legado saiu).
 * ================================================================ */
.o-auth-body { margin: 0; background: var(--orena-background); }
.o-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--orena-space-5);
    min-height: 100vh;
    padding: var(--orena-space-6) var(--orena-gutter);
    background: var(--orena-background);
    color: var(--orena-text-primary);
}
.o-auth__card {
    display: grid;
    gap: var(--orena-space-5);
    width: 100%;
    max-width: 420px;
    padding: var(--orena-space-inset-modal);
    background: var(--orena-elevation-1-bg);
    border: 1px solid var(--orena-border);
    border-radius: var(--orena-radius-lg);
    box-shadow: var(--orena-elevation-3-shadow);
}
.o-auth__brand {
    display: grid;
    justify-items: center;
    gap: var(--orena-space-2);
    text-align: center;
}
.o-auth__logo { width: 56px; height: 56px; }
.o-auth__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.o-auth__logo path,
.o-auth__logo circle { stroke: url(#orenaAuthGrad); }
.o-auth__wordmark {
    margin: 0;
    font-size: var(--orena-font-size-xl);
    font-weight: var(--orena-font-weight-extrabold);
    letter-spacing: 0.12em;
    line-height: var(--orena-line-height-tight);
}
.o-auth__wordmark .orena-wordmark__primary { color: var(--orena-primary); }
.o-auth__wordmark .orena-wordmark__secondary { color: var(--orena-text-primary); }
.o-auth__brand .orena-tagline { margin: 0; }
.o-auth__header { display: grid; gap: var(--orena-space-1); text-align: center; }
.o-auth__title {
    margin: 0;
    font-size: var(--orena-text-h2-size);
    font-weight: var(--orena-text-h2-weight);
    line-height: var(--orena-text-h2-leading);
}
.o-auth__intro {
    margin: 0;
    font-size: var(--orena-text-body-size);
    color: var(--orena-text-secondary);
}
/* Página de erro 403/404 (orena/erro.html, UIUX-FINAL-05): mesmo cartão. */
.o-erro__codigo {
    margin: 0;
    font-size: var(--orena-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orena-text-secondary);
}
.o-auth__flashes { display: grid; gap: var(--orena-space-2); }
.o-auth__form { display: grid; gap: var(--orena-space-stack-field); }
.o-auth__links { text-align: center; font-size: var(--orena-font-size-sm); }
.o-auth__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--orena-hit-target);
    padding: 0 var(--orena-space-2);
    color: var(--orena-link);
    border-radius: var(--orena-radius-sm);
}
.o-auth__link:focus-visible {
    outline: var(--orena-focus-ring-width) solid var(--orena-focus-ring);
    outline-offset: 2px;
}
.o-auth__footer {
    display: grid;
    gap: var(--orena-space-1);
    text-align: center;
    font-size: var(--orena-font-size-xs);
    color: var(--orena-text-secondary);
}
.o-auth__footer p { margin: 0; }

/* ---------- Grupos e links do menu ---------- */
.o-nav-group + .o-nav-group { margin-top: var(--orena-space-4); }
.o-nav-group__label {
    margin: 0 0 var(--orena-space-1);
    padding: 0 var(--orena-space-3);
    font-size: var(--orena-font-size-xs);
    font-weight: var(--orena-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--orena-text-secondary);
}
.o-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.o-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--orena-space-3);
    min-height: var(--orena-hit-target-touch);
    padding: 0 var(--orena-space-3);
    border-radius: var(--orena-radius-md);
    color: var(--orena-text-secondary);
    font-size: var(--orena-font-size-sm);
    font-weight: var(--orena-font-weight-medium);
    text-decoration: none;
    transition: background-color var(--orena-motion-fast) var(--orena-ease),
                color var(--orena-motion-fast) var(--orena-ease);
}
.o-nav-link:hover { background: var(--orena-surface-raised); color: var(--orena-text-primary); }
.o-nav-link[aria-current] {
    background: var(--orena-surface-raised);
    color: var(--orena-text-primary);
    font-weight: var(--orena-font-weight-semibold);
}
/* Indicador do item ativo: barra + ícone em destaque (não só cor de texto). */
.o-nav-link[aria-current]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: var(--orena-radius-sm);
    background: var(--orena-primary);
}
.o-nav-link[aria-current] .o-icon { color: var(--orena-primary); }
.o-nav-link__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Botões do shell (menu, fechar, recolher, conta) ---------- */
.o-shell-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--orena-hit-target-touch);
    height: var(--orena-hit-target-touch);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--orena-radius-md);
    background: transparent;
    color: var(--orena-text-secondary);
    cursor: pointer;
    transition: background-color var(--orena-motion-fast) var(--orena-ease),
                color var(--orena-motion-fast) var(--orena-ease);
}
.o-shell-icon-btn:hover { background: var(--orena-surface-raised); color: var(--orena-text-primary); }

.o-nav-link:focus-visible,
.o-sidebar__brand-link:focus-visible,
.o-shell-icon-btn:focus-visible,
.o-user-menu__trigger:focus-visible,
.o-user-menu__link:focus-visible,
.o-breadcrumbs__link:focus-visible,
.o-shell-main:focus-visible,
.o-shell-footer__link:focus-visible {
    outline: var(--orena-focus-ring-width) solid var(--orena-focus-ring);
    outline-offset: 2px;
}

/* ---------- Overlay do drawer ---------- */
.o-shell__overlay {
    position: fixed;
    inset: 0;
    z-index: var(--o-shell-z-overlay);
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--orena-motion-normal) var(--orena-ease);
}
.o-shell.is-drawer-open .o-shell__overlay { opacity: 1; }
.o-shell__overlay[hidden] { display: none; }

/* ================================================================
 * Coluna principal: topbar + conteúdo
 * ================================================================ */
.o-shell__column { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

.o-topbar {
    position: sticky;
    top: 0;
    z-index: var(--orena-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--orena-space-2);
    min-height: var(--o-shell-topbar-height);
    padding: 0 var(--orena-gutter);
    background: var(--orena-surface);
    border-bottom: 1px solid var(--orena-border);
}
.o-topbar__context {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.o-topbar__module {
    font-size: var(--orena-font-size-xs);
    color: var(--orena-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o-topbar__title {
    margin: 0;
    font-size: var(--orena-font-size-sm);
    font-weight: var(--orena-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o-topbar__tenant { display: none; }
.o-topbar__slots { display: flex; align-items: center; gap: var(--orena-space-2); }
/* Espaço reservado: indicador online/offline (fase futura). Vazio = oculto. */
.o-topbar__status:empty { display: none; }

/* ---------- Menu da conta (disclosure) ---------- */
.o-user-menu { position: relative; }
.o-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--orena-space-2);
    min-height: var(--orena-hit-target-touch);
    padding: 0 var(--orena-space-2);
    border: 1px solid var(--orena-border);
    border-radius: var(--orena-radius-md);
    background: transparent;
    color: var(--orena-text-primary);
    font: inherit;
    font-size: var(--orena-font-size-sm);
    cursor: pointer;
    transition: border-color var(--orena-motion-fast) var(--orena-ease);
}
.o-user-menu__trigger:hover { border-color: var(--orena-border-strong); }
.o-user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--orena-radius-md);
    background: var(--orena-surface-raised);
    color: var(--orena-primary);
    font-weight: var(--orena-font-weight-bold);
    text-transform: uppercase;
}
.o-user-menu__who { display: none; flex-direction: column; align-items: flex-start; line-height: var(--orena-line-height-tight); }
.o-user-menu__name { font-weight: var(--orena-font-weight-semibold); }
.o-user-menu__role { font-size: var(--orena-font-size-xs); color: var(--orena-text-secondary); }

.o-user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--orena-space-2));
    z-index: var(--orena-z-dropdown);
    min-width: 240px;
    padding: var(--orena-space-2);
    background: var(--orena-surface-raised);
    border: 1px solid var(--orena-border-strong);
    border-radius: var(--orena-radius-lg);
    box-shadow: var(--orena-shadow-lg);
}
.o-user-menu__panel[hidden] { display: none; }
.o-user-menu__header {
    margin: 0 0 var(--orena-space-2);
    padding: var(--orena-space-2) var(--orena-space-3);
    border-bottom: 1px solid var(--orena-border);
    font-size: var(--orena-font-size-sm);
    color: var(--orena-text-secondary);
}
.o-user-menu__header strong { display: block; color: var(--orena-text-primary); }
.o-user-menu__list { list-style: none; margin: 0; padding: 0; }
.o-user-menu__link {
    display: flex;
    align-items: center;
    gap: var(--orena-space-2);
    min-height: var(--orena-hit-target);
    padding: 0 var(--orena-space-3);
    border-radius: var(--orena-radius-md);
    color: var(--orena-text-primary);
    font-size: var(--orena-font-size-sm);
    text-decoration: none;
}
.o-user-menu__link:hover { background: var(--orena-surface); }
.o-user-menu__link--danger { color: var(--orena-danger); }
.o-user-menu__link--platform .o-icon { color: var(--orena-warning); }

/* ---------- Conteúdo ---------- */
.o-shell-main {
    flex: 1;
    width: 100%;
    max-width: var(--orena-container-max);
    margin: 0 auto;
    padding: 0 var(--orena-gutter) var(--orena-space-8);
}
/* minmax(0, 1fr): conteúdo largo (ex.: tabela) rola dentro do próprio
   .o-table-wrap em vez de alargar a coluna e quebrar a viewport. */
.o-shell-main__grid { display: grid; gap: var(--orena-space-6); grid-template-columns: minmax(0, 1fr); }
.o-shell-aside { min-width: 0; }

.o-shell-page-header { padding-top: var(--orena-space-4); }
.o-shell-page-header .o-page-header { padding-top: var(--orena-space-2); }
.o-shell-actions { display: flex; flex-wrap: wrap; gap: var(--orena-space-2); }
/* UIUX-POLISH-01: no celular, as ações do cabeçalho da página têm alvo de
   toque de 44px (padrão do DS: 40px; `sm`: 32px). A partir do tablet cada
   tamanho volta à sua altura (reset no bloco de 768px). */
.o-shell-actions .o-btn { min-height: var(--orena-hit-target-touch); }

/* ---------- Breadcrumbs ---------- */
.o-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--orena-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--orena-font-size-sm);
    color: var(--orena-text-secondary);
}
.o-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--orena-space-2); }
/* Separador desenhado (sem caractere, para leitor de tela não anunciar "/"). */
.o-breadcrumbs__item + .o-breadcrumbs__item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--orena-text-muted);
    border-right: 1px solid var(--orena-text-muted);
    transform: rotate(45deg);
}
.o-breadcrumbs__link { color: var(--orena-link); text-decoration: none; border-radius: var(--orena-radius-sm); }
.o-breadcrumbs__link:hover { text-decoration: underline; }
.o-breadcrumbs__current { color: var(--orena-text-primary); }

/* ---------- Rodapé ---------- */
.o-shell-footer {
    padding: var(--orena-space-4) var(--orena-gutter);
    border-top: 1px solid var(--orena-border);
    font-size: var(--orena-font-size-xs);
    color: var(--orena-text-secondary);
    text-align: center;
}
.o-shell-footer p { margin: 0; }
.o-shell-footer .orena-footer-brand__name {
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--orena-text-primary);
}
.o-shell-footer .orena-footer-brand__tagline { margin: var(--orena-space-1) 0; }
.o-shell-footer__link { color: var(--orena-link); }

/* Tablet: nome da empresa na topbar (a sidebar está recolhida em drawer). */
@media (min-width: 768px) {
    .o-topbar__tenant {
        display: inline-flex;
        max-width: 220px;
    }
    .o-shell-actions .o-btn { min-height: var(--orena-control-height-md); }
    .o-shell-actions .o-btn--sm { min-height: var(--orena-control-height-sm); }
    .o-shell-actions .o-btn--lg { min-height: var(--orena-control-height-lg); }
}

/* ================================================================
 * Desktop: sidebar fixa, sem drawer
 * ================================================================ */
@media (min-width: 1024px) {
    .o-shell { display: grid; grid-template-columns: var(--o-shell-sidebar-width) minmax(0, 1fr); }
    .o-sidebar,
    .o-shell.is-drawer-open .o-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        width: auto;
        transform: none;
        visibility: visible;
        box-shadow: none;
        transition: none !important;
    }
    .o-shell__overlay { display: none; }
    [data-orena-drawer-open],
    [data-orena-drawer-close] { display: none; }
    .o-sidebar__footer { display: block; }
    .o-topbar__tenant { display: none; }
    .o-user-menu__who { display: flex; }
    .o-shell-main__grid--aside { grid-template-columns: minmax(0, 1fr) 320px; }

    /* Versão compacta (recolhida): só ícones; rótulos continuam no DOM
       (nome acessível), escondidos visualmente. */
    .o-shell.is-sidebar-compact { grid-template-columns: var(--o-shell-sidebar-compact) minmax(0, 1fr); }
    .o-shell.is-sidebar-compact .o-sidebar__wordmark,
    .o-shell.is-sidebar-compact .o-tenant-context__text,
    .o-shell.is-sidebar-compact .o-nav-link__label,
    .o-shell.is-sidebar-compact .o-nav-group__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .o-shell.is-sidebar-compact .o-sidebar__brand,
    .o-shell.is-sidebar-compact .o-sidebar__context { justify-content: center; padding-left: 0; padding-right: 0; }
    .o-shell.is-sidebar-compact .o-tenant-context { justify-content: center; }
    .o-shell.is-sidebar-compact .o-nav-link { justify-content: center; padding: 0; }
    .o-shell.is-sidebar-compact .o-sidebar__footer { text-align: center; }
    .o-shell.is-sidebar-compact [data-orena-sidebar-collapse] .o-icon { transform: rotate(180deg); }
}

/* ================================================================
 * Motion desligado: data-orena-motion="off" (PDV/operação) OU
 * prefers-reduced-motion. Drawer abre/fecha instantâneo.
 * ================================================================ */
[data-orena-motion="off"] .o-sidebar,
[data-orena-motion="off"] .o-shell.is-drawer-open .o-sidebar,
[data-orena-motion="off"] .o-shell__overlay,
[data-orena-motion="off"] .o-nav-link,
[data-orena-motion="off"] .o-shell-icon-btn,
[data-orena-motion="off"] .o-user-menu__trigger {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .o-sidebar,
    .o-shell.is-drawer-open .o-sidebar,
    .o-shell__overlay,
    .o-nav-link,
    .o-shell-icon-btn,
    .o-user-menu__trigger {
        animation: none !important;
        transition: none !important;
    }
}