/* MedScribes.AI — shell da área logada v2 (chrome escuro + conteúdo claro). Incluído DEPOIS de custom.css no base.html. O rail recolhido (68px) e o "peek" ao passar o mouse NÃO vivem aqui — a máquina de recolhimento animada (largura, retração de rótulos, gutter do conteúdo, reduced-motion) fica em custom.css, seção "Desktop collapsible sidebar", e já usa as classes novas (.nav-item / .btn-accent / .rail-hide). */ /* ─── Shell ───────────────────────────────────────────────────────────── */ /* A largura do sidebar DEVE ser 16rem = ml-64 (288px com o html{font-size:18px} do custom.css): o gutter das páginas é a classe Tailwind `md:ml-64`, e o CDN pode vencer o custom.css na cascata — qualquer valor em px fixo deixa uma fresta clara entre sidebar e topbar. */ .app-shell { background: #f6f8fb; } .app-sidebar { width: 16rem; background: #0b1220; color: #e2e8f0; border-right: 1px solid rgba(148,163,184,.12); } .app-sidebar__head{ padding: 20px 18px 18px; border-bottom: 1px solid rgba(148,163,184,.1); } .app-topbar { height: 60px; background: #0b1220; border-bottom: 1px solid rgba(148,163,184,.12); } /* O nav rola sozinho, mas SEM scrollbar visível: com "sempre mostrar barras" do macOS uma scrollbar clássica consome largura do layout (desalinha os ícones do rail) e pinta um bastão claro no chrome escuro. Ocultar não desliga o scroll — roda/trackpad/toque continuam funcionando. */ .app-sidebar nav { scrollbar-width: none; } .app-sidebar nav::-webkit-scrollbar { display: none; } /* O nav é flex-column rolável: sem isto, itens com overflow:hidden são COMPRIMIDOS pelo flexbox quando o menu não cabe (rótulos de seção cortados ao meio). Rolagem sim, esmagamento não. */ .app-sidebar nav > * { flex-shrink: 0; } /* Sombra de rolagem — a barra está oculta (acima), então sem isto NADA indica que o menu continua. Numa conta com muitos itens (proprietária de clínica: Início, Pacientes, Agenda, Compartilhamentos, Modo Teste, Relatórios, FHIR, Financeiro, Plano, Equipe) o último item ficava fatiado exatamente na borda do clip, encostado no widget de uso, e lia como sobreposição quebrada. Técnica só-CSS (sem JS): dois gradientes `local` cobrem a sombra quando o conteúdo está no topo/fim, e dois radiais `scroll` desenham a sombra. A sombra aparece SOMENTE quando há o que rolar, e some ao chegar na ponta. O #0b1220 é o mesmo `.app-sidebar` acima — se aquele mudar, este muda. */ .app-sidebar nav { background: linear-gradient(#0b1220 30%, rgba(11,18,32,0)) top / 100% 16px no-repeat local, linear-gradient(rgba(11,18,32,0), #0b1220 70%) bottom / 100% 16px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(148,163,184,.22), rgba(148,163,184,0)) top / 100% 7px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(148,163,184,.22), rgba(148,163,184,0)) bottom / 100% 7px no-repeat scroll; } /* E uma folga no fim, para o último item nunca encostar no clip. */ .app-sidebar nav { padding-bottom: 10px; } /* MEDIDO, não suposto: o menu de um proprietário de organização soma ~713px de conteúdo, e a altura disponível é `viewport - ~400px` (cabeçalho, CTA, seletor de contexto, widget de uso e rodapé). Ou seja: ele só caberia inteiro acima de ~1115px de viewport, e esconder o widget em telas baixas NÃO resolve (a 800px sobram 482px para 713px de menu) — só custaria o sinal de crédito. Por isso a correção aqui é a AFORDÂNCIA (a sombra acima), não esconder coisas. Encurtar o menu de verdade — por exemplo dobrar "Conta" dentro do rodapé do usuário — é decisão de design, registrada na initiative. */ /* rótulo mono — o tipo de letra mais usado do sistema */ .label-mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #64748b; } .label-mono--dark { color: #475569; } .num-display { font-family: 'Newsreader', Georgia, serif; font-weight: 400; line-height: 1; color: #0f172a; } /* ─── Navegação ───────────────────────────────────────────────────────── */ /* Legibilidade dos títulos de grupo: 11.5px + slate-500 (o antigo #475569 a 10.5px sobre #0b1220 dava ~2.8:1 de contraste — quase ilegível). */ .nav-section { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #64748b; padding: 18px 10px 7px; position: relative; transition: color .18s ease; /* A seção de trabalho agora carrega o NOME do contexto ativo ("CLÍNICA SÃO LUCAS") — um nome longo precisa cortar com reticências, nunca quebrar em duas linhas no menu. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ponto de cor antes do título da seção de trabalho — o MESMO par de cores do monograma do cartão de contexto (accent = organização, neutro = Particular). É o que amarra visualmente "esta seção pertence àquele contexto lá de cima". Ele é .rail-hide no markup: no rail o título já vira uma hairline (::after) e um ponto colorido órfão leria como um pixel morto. */ .nav-section__dot { display: inline-block; width: 5px; height: 5px; border-radius: 999px; margin-right: 7px; vertical-align: 1.5px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 15px; letter-spacing: -0.01em; font-weight: 500; color: #94a3b8; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; transition: background-color .15s, color .15s; } .nav-item:hover { color: #f1f5f9; background: rgba(148,163,184,.08); } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } .nav-item.active { color: #e2e8f0; background: rgba(34,211,238,.09); box-shadow: inset 2px 0 0 #22d3ee; } .nav-item.active svg { color: #22d3ee; } .nav-item.is-disabled { color: #475569; cursor: not-allowed; user-select: none; } .nav-item.is-disabled:hover { background: none; color: #475569; } /* ─── Seletor de contexto de trabalho ───────────────────────────────────── Deliberadamente construído sobre a MESMA caixa do .nav-item (padding 9px 10px, gap 10px, raio 8px). Não é cosmético: é o que põe o monograma na mesma coluna de 35px de todos os ícones do menu. Antes ele usava utilitários Tailwind (px-3 py-2.5) e, no rail de 68px, MEDIA 58px de altura por 36 de largura com o monograma em x=30 — ou seja, um retângulo vazio 17px mais alto que as linhas vizinhas, com a insígnia 9px fora do eixo dos ícones. Era exatamente o "menu quebrado" relatado: no estado recolhido o seletor de organização não parecia um controle. O rótulo de duas linhas é quem carrega essa altura, então no rail ele colapsa em altura E largura (o `.rail-hide` só apaga a opacidade). */ /* padding 9px + a 1px border = the .nav-item's 10px inset, so the monogram lands on the SAME icon column (x=26, centre 35 in the 68px rail) as every nav icon. Measured, not eyeballed — with `padding: 9px 10px` the border pushed it 1px off and the rail read as misaligned. */ .ctx-switch { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px; border-radius: 8px; text-align: left; border: 1px solid rgba(148,163,184,.14); background: rgba(148,163,184,.05); transition: background-color .15s, border-color .15s, gap .3s cubic-bezier(.4,0,.2,1); } .ctx-switch:hover { background: rgba(148,163,184,.1); } /* Dentro de uma organização o cartão inteiro puxa um fio de accent — o mesmo código de cor do monograma e do chip da topbar (organização = ciano, Particular = neutro), agora na moldura que o olho encontra primeiro. */ .ctx-switch--org { border-color: rgba(34,211,238,.28); background: rgba(34,211,238,.06); } .ctx-switch--org:hover { background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.4); } .ctx-switch__mono { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; line-height: 1; border: 1px solid; } /* O menu do seletor — linhas com o mesmo monograma do cartão, papel da pessoa em cada contexto e check no ativo. Classes em vez de utilitários pela mesma razão do .ctx-switch: as linhas reutilizam .ctx-switch__mono e precisam da mesma caixa nos dois lugares. */ .ctx-menu { position: absolute; left: 0; right: 0; margin-top: 4px; z-index: 20; border-radius: 10px; border: 1px solid rgba(148,163,184,.16); background: #080e1a; box-shadow: 0 18px 40px -18px rgba(2,6,23,.9); overflow: hidden; } .ctx-menu__head { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #64748b; padding: 10px 12px 4px; } .ctx-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left; border: 0; background: none; cursor: pointer; font-family: inherit; transition: background-color .15s; } .ctx-menu__item:hover { background: rgba(148,163,184,.08); } .ctx-menu__item:disabled { opacity: .5; } .ctx-menu__item.is-active { background: rgba(34,211,238,.07); } .ctx-menu__item.is-blocked { opacity: .6; cursor: not-allowed; } .ctx-menu__item.is-blocked:hover { background: none; } .ctx-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 500; color: #94a3b8; border-top: 1px solid rgba(148,163,184,.12); transition: color .15s, background-color .15s; } .ctx-menu__foot:hover { color: #f1f5f9; background: rgba(148,163,184,.06); } /* Submenu recolhível — grid 0fr↔1fr anima a altura REAL (sem max-height com zona morta, sem x-show que salta). O estado inicial pode vir renderizado do servidor (classe estática .is-open) e o Alpine alterna via :class objeto. */ .nav-sub-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .24s cubic-bezier(.4,0,.2,1), opacity .18s ease, visibility 0s linear .24s; } .nav-sub-wrap.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .24s cubic-bezier(.4,0,.2,1), opacity .18s ease .05s, visibility 0s; } .nav-sub-clip { overflow: hidden; min-height: 0; } .nav-sub { margin: 2px 0 2px 26px; padding-left: 12px; border-left: 1px solid rgba(148,163,184,.14); display: flex; flex-direction: column; gap: 1px; } .nav-sub__item{ display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #94a3b8; transition: background-color .15s, color .15s; } .nav-sub__item:hover { color: #f1f5f9; background: rgba(148,163,184,.08); } .nav-sub__item.active { color: #e2e8f0; background: rgba(148,163,184,.1); } .nav-sub__item svg { width: 14px; height: 14px; flex-shrink: 0; } /* `.nav-item svg` (0,2,1) outspecifies a bare `.nav-chevron` (0,1,0), so the 14px never applied and every submenu chevron rendered at 18px — as big as the destination icon it points away from. Qualified to win. */ .nav-item > .nav-chevron, .nav-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform .2s ease; } .nav-chevron.is-open { transform: rotate(90deg); } /* Rodapé do usuário — a classe existia no markup e não estava definida em lugar nenhum. Importa por espaço, não por estética: o bloco de rótulo é `.rail-hide` (só opacidade), então as três linhas (nome, função, contexto) mantinham ~52px de altura no rail para um avatar de 34px. Colapsar isso devolve ~50px ao