/* ═══════════════════════════════════════════════════════════════════════
   MYDESK NO CELULAR — O ACABAMENTO DAS TELAS
   ═══════════════════════════════════════════════════════════════════════
   Carregada POR ÚLTIMO, depois do theme-light.css. O `mobile.css` decide a
   estrutura do celular (barra fina no topo, navegação embaixo, painéis em
   tela cheia); esta folha corrige o que, com ela, ainda saía torto — e cada
   defeito foi reproduzido antes numa tela de iPhone de 390×844 com o app de
   verdade (scripts/mobile-qa.cjs), a partir dos prints de 16/09/2026:

     1. A nota aberta desenhava "Comentários e atividade" POR CIMA de
        descrição, datas, modelo e cor, e o título ficava com altura zero.
     2. A lista de workspaces nascia no canto da tela, embaixo da barra.
     3. Amigos era uma janela de desktop encolhida: trilho lateral de 64px,
        margem nos quatro lados e o × cortado no canto.
     4. O painel de Clientes guardava a lateral de desktop (78px de ícones em
        coluna, a foto cortada), rolava numa faixa de 420px e a coluna de apoio
        cobria o resto; o topo e o rodapé ficavam sob as barras do app.
     5. As listas do quadro rolavam de lado sem parar em lugar nenhum: cada
        gesto deixava uma lista cortada ao meio.
     6. No tema claro a navegação de baixo continuava preta, com o "Nova" em
        tinta escura sobre preto — invisível.
     7. A folha "Mais" era uma grade solta de treze botões, com Sair e Limpar
        tudo no meio dos atalhos.

   As cores seguem o CORES.md: azul da barra e branco no tema claro; o tema
   escuro mantém a própria moldura. A condição é a do celular no `mobile.css`
   SEM o monitor vertical: lá a tela tem mais de 860px e continua valendo o
   desenho de desktop dentro de cada painel.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px),
       (max-width: 1180px) and (max-height: 460px) and (orientation: landscape) {

  :root {
    --cel-topo: calc(var(--mb-top-h, 52px) + var(--mb-safe-t, 0px));
    --cel-base: calc(var(--mb-nav-h, 62px) + var(--mb-safe-b, 0px));
    --cel-azul: #2f7ff2;
    --cel-azul-fundo: #e8f1fe;
  }

  /* ═══ BARRA DE CIMA: o Workspace do computador ═══════════════════════
     No computador o botão "Workspace" fica ao lado dos três pontos. No
     celular ele sumia, e a única porta para os quadros compartilhados era a
     folha "Mais". Volta para o mesmo lugar, com o mesmo nome. */
  :root #toolbar #btn-ws-lista {
    display: flex !important;
    width: auto !important;
    min-width: 40px;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px !important;
    border-radius: 12px;
    flex: 0 0 auto;
  }
  :root #toolbar #btn-ws-lista svg { width: 18px; height: 18px; }
  :root #toolbar #btn-ws-lista .bm-icone-rot {
    display: inline !important;
    font-size: .8rem;
    font-weight: 600;
  }
  :root #toolbar > .bm-dir { gap: 8px !important; }

  /* ═══ NAVEGAÇÃO DE BAIXO ═════════════════════════════════════════════ */
  .mb-nav-btn.mb-primary .mb-ico {
    width: 44px; height: 30px; border-radius: 10px;
    background: linear-gradient(135deg, #2f7ff2, #1454b5);
    box-shadow: 0 4px 14px rgba(20, 84, 181, .42);
    color: #fff;
  }
  .mb-nav-btn.mb-primary .mb-lbl { color: rgba(240, 240, 240, .92); font-weight: 600; }
  .mb-nav-btn.active { color: #8ec5ff; }

  html[data-theme="light"] #mb-nav {
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #d8e3f0;
    box-shadow: 0 -6px 22px rgba(15, 39, 68, .08);
  }
  html[data-theme="light"] .mb-nav-btn { color: #536b84; }
  html[data-theme="light"] .mb-nav-btn.active { color: #1f68d5; }
  html[data-theme="light"] .mb-nav-btn:active { background: #e8f1fe; }
  html[data-theme="light"] .mb-nav-btn.mb-primary .mb-lbl { color: #1454b5; }
  html[data-theme="light"] .mb-badge { border-color: #fff; }

  /* ═══ FOLHA "MAIS" — em seções ══════════════════════════════════════ */
  #mb-sheet { padding-top: 6px; }
  .mb-sheet-secao {
    margin: 12px 4px 7px;
    font-family: 'Inter', sans-serif;
    font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(240, 240, 240, .5);
  }
  .mb-sheet-secao:first-of-type { margin-top: 4px; }
  .mb-sheet-grid { gap: 8px; }
  .mb-sheet-item {
    min-height: 70px;
    padding: 10px 4px;
    border-radius: 14px;
    font-size: .66rem;
    gap: 7px;
  }
  .mb-sheet-item svg { width: 20px; height: 20px; }
  .mb-sheet-perigo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .mb-sheet-perigo .mb-sheet-item {
    min-height: 46px; flex-direction: row; gap: 8px; font-size: .74rem;
  }
  .mb-sheet-perigo .mb-sheet-item svg { width: 17px; height: 17px; }

  html[data-theme="light"] #mb-sheet {
    background: #fff;
    border-top: 1px solid #d8e3f0;
    box-shadow: 0 -12px 40px rgba(15, 39, 68, .18);
  }
  html[data-theme="light"] #mb-sheet-bg { background: rgba(15, 39, 68, .42); }
  html[data-theme="light"] .mb-grip { background: #c6d6e8; }
  html[data-theme="light"] .mb-sheet-secao { color: #536b84; }
  html[data-theme="light"] .mb-sheet-item {
    background: #f5f8fc;
    border-color: #d8e3f0;
    color: #0f2744;
  }
  html[data-theme="light"] .mb-sheet-item svg { color: #1f68d5; }
  html[data-theme="light"] .mb-sheet-item:active { background: #e8f1fe; }
  html[data-theme="light"] .mb-sheet-perigo { border-top-color: #d8e3f0; }
  html[data-theme="light"] .mb-sheet-item.danger {
    background: #fff; border-color: #f3c3c9; color: #b42318;
  }
  html[data-theme="light"] .mb-sheet-item.danger svg { color: #b42318; }

  /* ═══ QUADRO EM LISTAS: uma lista por vez, sempre inteira ════════════
     O `#board` é quem rola de lado. Com `scroll-snap`, soltar o dedo encaixa
     a lista mais próxima na borda esquerda; a próxima aparece espiando 22px à
     direita, dizendo que há mais para o lado. A folga à direita do `#kanban`
     é o que deixa a ÚLTIMA lista encaixar também. */
  #board.kanban-on {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 12px;
    overscroll-behavior-x: contain;
  }
  #board.kanban-on #kanban { padding-right: 34px; gap: 10px; }
  #board.kanban-on .kb-lista {
    flex: 0 0 calc(100vw - 44px);
    width: calc(100vw - 44px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ═══ WORKSPACES: abaixo da barra, e não embaixo dela ════════════════
     O menu nasce ancorado no botão da barra — que no celular é outro — e o
     cálculo o punha a 6px do topo, por baixo da barra (z-index 1250 contra
     1500). Aqui ele é uma folha logo abaixo da barra, com as margens da
     tela. */
  :root .ws-lista-pop {
    position: fixed !important;
    top: calc(var(--cel-topo) + 8px) !important;
    left: calc(12px + var(--mb-safe-l, 0px)) !important;
    right: calc(12px + var(--mb-safe-r, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--cel-topo) - var(--cel-base) - 24px) !important;
    overflow-y: auto;
    z-index: 1760 !important;
    border-radius: 16px !important;
  }

  /* ═══ NOTA ABERTA ════════════════════════════════════════════════════
     No computador as duas metades rolam cada uma por si, e para isso têm
     `min-height:0`. Em coluna única quem rola é o layout inteiro — e com
     `min-height:0` as duas linhas da grade encolhiam para caber na tela: o
     conteúdo transbordava da primeira e a segunda ("Comentários e
     atividade") era desenhada por cima dele. Aqui cada metade tem a altura
     do que contém. */
  .kb-modal-detalhe .kb-modal-layout {
    grid-auto-rows: max-content;
    grid-template-rows: none;
    align-content: start;
  }
  .kb-modal-detalhe .kb-modal-principal,
  .kb-modal-detalhe .kb-modal-lateral { min-height: auto; }
  .kb-modal-detalhe .kb-modal-principal { padding: 18px 16px 24px 16px; }
  .kb-modal-detalhe .kb-modal-lateral { padding: 18px 16px calc(24px + var(--mb-safe-b, 0px)); }
  /* O `mobile.css` zera a altura mínima dos títulos para encurtar os
     cartões da lista. Dentro da nota aberta o título é um campo que cresce
     com o texto, e zerado ele sumia antes da primeira medida. */
  :root .kb-modal-detalhe .n-title { min-height: 1.35em !important; }
  .kb-modal-detalhe .kb-modal-cabecalho { padding-top: var(--mb-safe-t, 0px); }

  /* ═══ AMIGOS: a página inteira, com a navegação em cima ══════════════
     Era a janela de desktop encolhida — margem nos quatro lados, trilho
     lateral de 64px roubando a largura dos cartões, e o × cortado pelo canto
     arredondado. No celular ela ocupa a tela até a navegação de baixo, e o
     trilho vira uma faixa de abas no topo, como a navegação do app. */
  :root .sg-bg {
    padding: 0 0 var(--cel-base) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  :root .sg-bg .sg-janela {
    width: 100% !important; max-width: none !important;
    height: 100% !important; max-height: none !important;
    border-radius: 0 !important;
    gap: 0 !important;
  }
  /* Fechada, a gaveta do grupo ainda ocupava 2px com margem de -14px ao
     lado da janela — e a coluna principal esticava para 402px numa tela de
     390: os campos e o avatar saíam pela borda direita. */
  :root .sg-bg .sg-gaveta:not(.aberta) {
    position: absolute !important;
    width: 0 !important; margin: 0 !important;
  }
  :root .sg-bg .sg-principal {
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 0;
  }
  :root .sg-bg .sg-lado {
    order: 0;
    width: 100% !important;
    flex: 0 0 auto;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    padding: calc(6px + var(--mb-safe-t, 0px)) 10px 6px !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: 0;
  }
  :root .sg-bg .sg-marca,
  :root .sg-bg .sg-nav-sep,
  :root .sg-bg .sg-sub { display: none !important; }
  :root .sg-bg .sg-nav {
    flex: 1 1 auto;
    flex-direction: row !important;
    gap: 4px;
    overflow: visible !important;
    min-width: 0;
  }
  :root .sg-bg .sg-nav-item {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px !important;
    border-radius: 12px;
  }
  :root .sg-bg .sg-nav-item span:not(.sg-nav-ico):not(.sg-nav-badge) {
    display: block !important;
    font-size: .6rem;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  :root .sg-bg .sg-nav-ico { width: auto; font-size: 1rem; }
  :root .sg-bg .sg-nav-item .sg-nav-badge { top: 3px; right: calc(50% - 16px); }
  :root .sg-bg .sg-eu {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 4px !important;
    border: 0 !important;
  }
  :root .sg-bg .sg-eu-txt { display: none !important; }

  :root .sg-bg .sg-main {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 14px !important;
  }
  :root .sg-bg .sg-topo {
    position: relative;
    margin: 0 -14px 14px !important;
    padding: 16px 58px 14px 16px !important;
  }
  :root .sg-bg .sg-fechar {
    position: absolute !important;
    top: 12px !important; right: 12px !important;
    width: 38px; height: 38px;
    border-radius: 12px;
  }
  :root .sg-bg .sg-pills { margin-right: -44px; }
  :root .sg-bg .sg-lista { padding-bottom: 16px; }

  html[data-theme="light"] .sg-bg .sg-lado {
    background: #fff;
    border-bottom-color: #d8e3f0;
  }
  html[data-theme="light"] .sg-bg .sg-main { background: #f5f8fc; }

  /* ═══ CLIENTES (visão geral e os painéis que moram nela) ═════════════
     Uma coluna só, que rola inteira, entre a barra de cima e a navegação
     de baixo. A lateral de desktop vira uma faixa de ícones que rola de
     lado e fica presa no topo — é por ela que se troca de painel, então ela
     nunca pode sair da tela. A coluna de apoio (Top 5, Links) desce para
     depois do conteúdo, em vez de cobrir metade dele. */
  :root #crm-overview.visible {
    display: flex !important;
    flex-direction: column;
    top: var(--cel-topo) !important;
    bottom: var(--cel-base) !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  :root #crm-overview .ov-lado {
    position: sticky; top: 0; z-index: 5;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    box-shadow: 0 4px 14px rgba(15, 39, 68, .18);
  }
  :root #crm-overview .ov-lado::-webkit-scrollbar { display: none; }
  :root #crm-overview .ov-perfil { flex: 0 0 auto; padding: 0 !important; gap: 0; }
  :root #crm-overview .ov-perfil-foto {
    width: 38px !important; height: 38px !important;
    border-width: 2px !important; font-size: .9rem !important;
  }
  :root #crm-overview .ov-perfil-nome { display: none !important; }
  :root #crm-overview .ov-menu { flex-direction: row; gap: 6px; flex: 0 0 auto; }
  :root #crm-overview .ov-item {
    width: auto; flex: 0 0 auto;
    padding: 5px !important;
    border-radius: 13px;
    box-shadow: none;
  }
  :root #crm-overview .ov-item.sel {
    background: rgba(255, 255, 255, .2);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
  }
  :root #crm-overview .ov-item-ico { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
  :root #crm-overview .ov-item-rot,
  :root #crm-overview .ov-item-mais { display: none !important; }
  :root #crm-overview .ov-item.aberto + .ov-sub {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    flex: 0 0 auto;
  }
  :root #crm-overview .ov-sub-item {
    white-space: nowrap;
    padding: 7px 10px !important;
    border-radius: 9px;
  }
  :root #crm-overview .ov-sub-item.fundo::before { display: none; }
  :root #crm-overview .ov-lado-pe { margin: 0 0 0 auto !important; padding: 0 !important; flex: 0 0 auto; }
  :root #crm-overview .ov-topo { display: none !important; }
  :root #crm-overview .ov-obra {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible !important;
    padding: 18px 14px 22px !important;
  }
  :root #crm-overview .ov-titulo { font-size: 1.7rem !important; margin: 2px 0 16px !important; }
  :root #crm-overview .ov-dir {
    display: block;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible !important;
    padding: 20px 14px 24px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--ov-linha);
  }
  :root #crm-overview.sem-dir .ov-dir { display: none !important; }

  /* ═══ PAINEL PESSOAL (Eventos) ═══════════════════════════════════════
     O × flutuava ao lado do título e empurrava a faixa azul para 80% da
     largura. Ele vai para dentro da faixa, no canto, e ela volta a atravessar
     a tela. */
  /* Os painéis de tela cheia param em cima da navegação de baixo, como
     Amigos: dá para trocar de tela sem antes achar o ×. */
  :root :is(#events-panel, #pw-panel) {
    bottom: var(--cel-base) !important;
    height: auto !important;
    padding-bottom: 16px !important;
  }

  /* ═══ FUNDO: folha sobre a navegação ═════════════════════════════════
     O `fundo.css` já faz dele uma folha presa embaixo abaixo de 640px, mas o
     `mobile.css` o declarava tela cheia com `width:100%` — somados, a folha
     tinha a largura da tela INTEIRA a partir de 12px da borda e passava do
     lado direito, e ganhava um segundo × além do dela. Fica a folha, dentro
     das margens e acima da navegação; o × é o do próprio painel. */
  :root #wp-panel {
    left: calc(12px + var(--mb-safe-l, 0px)) !important;
    right: calc(12px + var(--mb-safe-r, 0px)) !important;
    width: auto !important;
    top: auto !important;
    bottom: calc(var(--cel-base) + 10px) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--cel-topo) - var(--cel-base) - 24px) !important;
    padding: 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
  }
  :root #wp-panel > .mb-close { display: none !important; }
  html[data-theme="light"] #wp-panel { border-color: #d8e3f0 !important; }

  /* ═══ WORKSPACES PESSOAIS e o × dos painéis, no tema claro ═══════════
     O × herdava o círculo translúcido do tema escuro — branco sobre branco,
     só o traço aparecia — e o campo de novo workspace era um retângulo branco
     sem borda com a dica quase invisível (3,5:1). */
  html[data-theme="light"] .mb-close {
    background: #e8f1fe;
    border-color: #d8e3f0;
    color: #1f68d5;
  }
  html[data-theme="light"] #pw-panel .pw-add-inp {
    background: #f5f8fc;
    border: 1px solid #d8e3f0;
    color: #0f2744;
  }
  html[data-theme="light"] #pw-panel .pw-add-inp::placeholder { color: #536b84; opacity: 1; }
  :root #events-panel {
    padding-top: 0 !important;
    padding-left: 14px !important; padding-right: 14px !important;
  }
  :root #events-panel > .mb-close {
    position: absolute !important;
    top: calc(var(--mb-safe-t, 0px) + 20px);
    right: 22px;
    float: none;
    margin: 0;
    z-index: 3;
  }
  /* A faixa azul encosta no topo e leva a área do relógio/notch por dentro,
     em vez de deixar uma tira branca acima dela. */
  :root #events-panel .events-panel-title {
    margin-top: 0 !important;
    padding-top: calc(var(--mb-safe-t, 0px) + 18px) !important;
    padding-right: 58px !important;
  }
  html[data-theme="light"] #events-panel > .mb-close {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
  }
}