/*
 * Shell desktop-like (#86): CSS base, denso e funcional (estilo ERP operacional).
 * Sem framework; variaveis no :root para o tema definitivo evoluir depois.
 */
:root {
    /* Paleta oficial da Udisoft (#125) — fonte: Cerebro, "Identidade Visual da
       Udisoft". As cores da marca ficam como tokens reutilizaveis; os tokens
       semanticos da shell (--shell-*) mapeiam para elas, centralizando a
       identidade num unico lugar (nada de hex de marca espalhado nos templates).
         grafite  #2f3034 -> barras, navegacao, textos fortes, fundos escuros
         verde    #94c144 -> acao principal, marca e pontos de confirmacao
         v. claro #b4cc4a -> estados leves / apoio (hover da acao)
         branco   #ffffff -> superficies e contraste
         cinza    #545454 -> textos secundarios, bordas, apoio */
    --udisoft-grafite: #2f3034;
    --udisoft-verde: #94c144;
    --udisoft-verde-claro: #b4cc4a;
    --udisoft-branco: #ffffff;
    --udisoft-cinza: #545454;

    /* Superficies e texto */
    --shell-fundo: #e8e9eb;                     /* fundo do workspace: cinza claro neutro */
    --shell-superficie: var(--udisoft-branco);  /* janelas, cards, formularios */
    --shell-borda: #d0d2d4;                     /* bordas discretas */
    --shell-texto: var(--udisoft-grafite);      /* texto forte */
    --shell-texto-suave: var(--udisoft-cinza);  /* texto secundario / apoio */

    /* Chrome (barras, navegacao, titulos, selecao) = grafite */
    --shell-primaria: var(--udisoft-grafite);
    --shell-primaria-texto: var(--udisoft-branco);
    --shell-destaque: var(--udisoft-grafite);   /* foco/hover/selecao (acento escuro) */

    /* Acao principal e marca = verde institucional (usado com parcimonia) */
    --shell-acao: var(--udisoft-verde);
    --shell-acao-clara: var(--udisoft-verde-claro);
    --shell-acao-texto: var(--udisoft-grafite); /* texto escuro sobre o verde (contraste) */

    /* Estado de erro (semantico, mantido) */
    --shell-erro: #b71c1c;
    --shell-erro-fundo: #fdecea;
}

* { box-sizing: border-box; }

html, body.shell {
    height: 100%;
    margin: 0;
}

body.shell {
    display: flex;
    flex-direction: column;
    font: 14px/1.4 "Segoe UI", Arial, sans-serif;
    color: var(--shell-texto);
    background: var(--shell-fundo);
}

/* ---------- Telas de autenticacao (login e selecao de tenant) ----------
   Fluxo pre-shell (#26/#27): card centralizado com a mesma identidade visual
   (variaveis, botoes .botao vem de crud.css, mensagens idem). */
html { height: 100%; }

body.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    margin: 0;
    font: 14px/1.4 "Segoe UI", Arial, sans-serif;
    color: var(--shell-texto);
    background: var(--shell-fundo);
}

.auth-card {
    width: 360px;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 24px 28px;
}

.auth-marca {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--shell-primaria);
}

.auth-card h2 {
    margin: 0 0 12px;
    font-size: 15px;
}

.auth-campo { margin-bottom: 12px; }

.auth-campo label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--shell-texto-suave);
}

.auth-campo input {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid var(--shell-borda);
    border-radius: 3px;
    padding: 0 8px;
    font: inherit;
}

/* Acao de largura total dentro do card (Entrar / Entrar em <tenant> / Sair). */
.auth-acao {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 7px 12px;
    margin-top: 4px;
}

.auth-lista {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-lista form { margin: 0; }

/* ---------- Topbar: contexto sempre visivel ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 6px 12px;
    background: var(--shell-primaria);
    color: var(--shell-primaria-texto);
}

.topbar-marca {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    /* Marca em verde institucional sobre a barra grafite (#125). */
    color: var(--shell-acao);
}

.topbar-tenant { flex: 1; }

.topbar-tenant, .topbar-usuario {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.topbar-rotulo {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.75;
}

.topbar-sair { display: inline; margin: 0; }

.topbar-acao {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    color: var(--shell-primaria-texto);
    cursor: pointer;
    font-size: 12px;
    padding: 1px 8px;
    text-decoration: none;
}

.topbar-acao:hover { background: rgba(255, 255, 255, 0.15); }

/* ---------- Menubar suspensa (menu principal, fiel ao MainMenu do legado) ----------
   Barra na cor primaria; o modulo aberto vira uma "aba" branca conectada ao
   dropdown (como no legado). Modulo SO abre no clique (shell.js); submenus
   abrem em flyout ao lado. */
.menubar {
    background: var(--shell-primaria);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 6px;
}

.menubar-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.menubar-raiz { position: relative; }

.menubar-botao {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--shell-primaria-texto);
    padding: 8px 14px;
    cursor: pointer;
}

.menubar-botao .menu-seta-baixo {
    font-size: 9px;
    opacity: 0.8;
}

.menubar-botao:hover { background: rgba(255, 255, 255, 0.14); }

/* Modulo aberto: aba branca conectada ao dropdown (visual do legado). */
.menubar-raiz.aberto > .menubar-botao {
    background: var(--shell-superficie);
    color: var(--shell-texto);
    border-radius: 6px 6px 0 0;
}

.menubar-raiz.aberto > .menubar-botao .menu-seta-baixo { opacity: 0.6; }

/* Dropdown do modulo / painel de flyout. */
.menu-suspenso {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 60;
}

.menubar-raiz.aberto > .menu-suspenso { display: block; }

.menu-suspenso .menu-item {
    padding: 8px 18px;
    font-size: 13px;
    white-space: nowrap;
}

/* Submenu em flyout ao lado (o CRM > do legado): abre por hover ou clique. */
.menu-grupo-flyout { position: relative; }

.menu-grupo-botao {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--shell-texto);
    padding: 8px 14px 8px 18px;
    cursor: pointer;
    white-space: nowrap;
}

.menu-grupo-botao .menu-seta { font-size: 10px; opacity: 0.7; }

/* Linha do grupo destacada quando o flyout esta aberto (faixa do legado). */
.menu-grupo-flyout:hover > .menu-grupo-botao,
.menu-grupo-flyout.aberto > .menu-grupo-botao {
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

.menu-grupo-flyout > .menu-suspenso {
    top: -7px;
    left: 100%;
    border-radius: 6px;
}

.menu-grupo-flyout:hover > .menu-suspenso,
.menu-grupo-flyout.aberto > .menu-suspenso { display: block; }

/* Separador entre blocos de itens de um dropdown (o separator do legado). */
.menu-separador {
    height: 1px;
    margin: 6px 0;
    background: var(--shell-borda);
}

/* Tela ainda nao construida: presente no menu (organizacao do legado), com
   aparencia atenuada; o clique avisa "Em breve" (shell.js). */
.menu-item-breve { opacity: 0.55; }

/* Tela sem permissao de acesso (#109): visivel mas inerte (disabled), atenuada e
   com tooltip. Nao escondida, para o usuario saber que a tela existe. */
.menu-item-bloqueado { opacity: 0.4; cursor: not-allowed; }

/* ---------- Corpo: lateral de favoritos + workspace ---------- */
.shell-corpo {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Lateral reservada para favoritos (#89): placeholder discreto ate a fatia
   de atalhos por usuario; os itens usarao o mesmo contrato de menu-item. */
.favoritos-vazio {
    margin: 4px 12px;
    font-size: 12px;
    color: var(--shell-texto-suave);
}

.menu {
    width: 200px;
    flex-shrink: 0;
    background: var(--shell-superficie);
    border-right: 1px solid var(--shell-borda);
    overflow-y: auto;
    padding: 8px 0;
}

.menu-grupo {
    margin: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--shell-texto-suave);
}

.menu-lista {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.menu-item {
    display: block;
    width: 100%;
    padding: 5px 16px;
    background: none;
    border: 0;
    color: var(--shell-texto);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.menu-item:hover {
    background: var(--shell-fundo);
    color: var(--shell-destaque);
}

/* ---------- Workspace: tiling automatico de janelas ---------- */
.workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.workspace-vazio {
    color: var(--shell-texto-suave);
    padding: 24px;
    text-align: center;
}

.workspace-paineis {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    margin: 8px;
    position: relative;
}

/* ---------- Tiling em arvore (estilo sway): splits + divisorias ----------
   O shell.js renderiza a arvore de layout como flex aninhado: split-h poe os
   filhos lado a lado, split-v empilha. As proporcoes viram flex-grow inline;
   as divisorias entre filhos sao os handles de resize (Pointer Events). */
.split {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.split-h { flex-direction: row; }
.split-v { flex-direction: column; }

.divisor {
    flex: 0 0 6px;
    align-self: stretch;
    background: transparent;
    touch-action: none;
}

.split-h > .divisor { cursor: col-resize; }
.split-v > .divisor { cursor: row-resize; }

.divisor:hover,
.divisor.redimensionando { background: var(--shell-destaque); }

/* Janela: chrome com barra de titulo; o corpo e o painel de conteudo da tela.
   position: relative ancora a zona de drop do drag. */
.janela {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
}

/* Zona de drop do drag: metade (esq/dir/topo/baixo) ou miolo (troca) do alvo. */
.zona-drop {
    position: absolute;
    background: rgba(148, 193, 68, 0.28);
    border: 2px dashed var(--shell-acao);
    pointer-events: none;
    z-index: 5;
}

/* Foco estilo sway: borda destacada na janela ativa. */
.janela.focada { box-shadow: 0 0 0 1px var(--shell-acao); }

.janela.maximizada {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.janela-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    background: #e4e5e7;
    border-bottom: 1px solid var(--shell-borda);
    color: var(--shell-texto-suave);
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    /* Arrastavel: troca de posicao no tiling (shell.js). */
    cursor: move;
}

/* Feedback do drag: origem esmaecida (o destino mostra a .zona-drop). */
.janela.arrastando { opacity: 0.5; }

.janela.focada .janela-titulo {
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

.janela-acoes {
    display: inline-flex;
    gap: 4px;
}

.janela-botao {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 4px;
}

.janela-botao:hover { opacity: 0.7; }

.painel-corpo {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
    /* Cada janela e um container: os campos escalam pela largura DELA
       (tiling com muitas janelas), nao pela largura da pagina. */
    container-type: inline-size;
}

/* ---------- Conteudo das telas dentro do painel ---------- */
/* A estrutura visual das telas de cadastro (toolbar, formulario em grade de
   ancoragem, grade de consulta, mensagens, degraus) vive em crud.css. */
.painel-corpo h2 {
    margin: 0 0 10px;
    font-size: 16px;
}

/* ---------- Subtela: janela modal ancorada na janela-mae ----------
   Overlay com escopo na .janela pai (position:relative): cobre a mae por
   inteiro (inset:0), centraliza a subtela e trava a interacao SO com a mae —
   as demais janelas do tiling seguem vivas. Reaproveita o chrome
   (.janela-titulo/.painel-corpo) sem ser uma .janela do tiling. */
.subtela-overlay {
    position: absolute;
    inset: 0;
    /* Acima do painel e da .zona-drop (z-index 5) da propria janela. */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(31, 41, 51, 0.35);
}

.subtela {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: 100%;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Barra de titulo da subtela: destacada (como o modal do legado) e NAO
   arrastavel — a subtela e centrada na mae, nao participa do tiling. */
.subtela > .subtela-titulo {
    cursor: default;
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

/* ---------- MsgBox: confirmacao modal (#119) ----------
   Substitui o window.confirm nativo. Ancorado na janela ativa (ou subtela) que
   contem a origem, no mesmo molde do .subtela-overlay: cobre so aquele contexto
   e trava so ele. Fica acima da subtela (z 20). Estilo do MsgBox legado. */
.msgbox-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(31, 41, 51, 0.35);
}

/* Sem janela-mae (raro): overlay preso na viewport inteira. */
.msgbox-overlay-fixo { position: fixed; z-index: 200; }

.msgbox {
    display: flex;
    flex-direction: column;
    width: min(400px, 100%);
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.msgbox-titulo {
    padding: 3px 8px;
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
    font-size: 12px;
    font-weight: 600;
}

.msgbox-perigo .msgbox-titulo { background: var(--shell-erro); }

.msgbox-corpo {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
}

.msgbox-icone {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--shell-primaria-texto);
    background: var(--shell-destaque);
}

.msgbox-perigo .msgbox-icone { background: var(--shell-erro); }

.msgbox-mensagem { margin: 0; }

.msgbox-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px;
}

/* ---------- Statusbar e toasts ---------- */
.statusbar {
    display: flex;
    gap: 24px;
    padding: 3px 12px;
    background: var(--shell-superficie);
    border-top: 1px solid var(--shell-borda);
    color: var(--shell-texto-suave);
    font-size: 12px;
}

.toasts {
    position: fixed;
    right: 16px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.toast {
    background: var(--shell-texto);
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 8px 14px;
}

.toast.erro { background: var(--shell-erro); }