/* GestaoMax — estilos novos, fora do index.html.
 *
 * O index.html ainda carrega o CSS antigo dentro de um <style>. Tudo que for
 * criado daqui pra frente entra neste arquivo, sempre com as variaveis do tema
 * (--pri, --card, --brd, --txt, --txt2, --hov ...) para o modo escuro funcionar
 * sozinho. O servidor carimba a versao no endereco (?v=...), entao trocar este
 * arquivo chega no navegador sem ninguem limpar cache.
 *
 * MAPA
 *   1. Topo (botao Rascunhos)
 *   2. Rascunhos (aviso dentro do formulario + lista)
 */

/* ============ 1. TOPO ============ */
.topbar-dir{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-email{font-size:12px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rasc-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--brd);border-radius:999px;background:var(--card);color:var(--txt);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.rasc-btn:hover{background:var(--hov)}
.rasc-btn svg{color:var(--org)}
.rasc-n{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--org);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:768px){
  .topbar-email{display:none}
  .rasc-btn span:not(.rasc-n){display:none}
  .rasc-btn{padding:8px 10px}
}

/* ============ 2. RASCUNHOS ============ */
.rasc-aviso{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;border-radius:var(--rad-sm);border:1px solid var(--org);background:var(--org-soft)}
.rasc-txt{display:flex;flex-direction:column;gap:2px;font-size:13.5px;min-width:0}
.rasc-txt span{color:var(--txt2);font-size:12.5px}
.rasc-btns{display:flex;gap:8px;flex-shrink:0}
.rasc-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--brd)}
.rasc-item:last-child{border-bottom:none}
.rasc-item-txt{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:14px}
.rasc-item-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rasc-item-txt span{color:var(--txt2);font-size:12px}
@media(max-width:560px){
  .rasc-item{flex-direction:column;align-items:stretch}
  .rasc-item .rasc-btns .btn{flex:1}
  .rasc-aviso .rasc-btns{width:100%}
  .rasc-aviso .rasc-btns .btn{flex:1}
}

/* ============ 3. BOTAO OCUPADO ============ */
/* enquanto a gravacao esta indo: continua clicavel (o toque avisa "ainda estou gravando") */
.btn.ocupado,button.ocupado{opacity:.6;cursor:progress}

/* ============ 4. MENU LATERAL EM GRUPOS ============ */
.sidebar nav .nav-grupo{padding:14px 28px 5px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--side-txt);opacity:.6}
.sidebar nav .nav-grupo:first-child{padding-top:4px}

/* ============ 5. CELULAR: BARRA DE ABAS ============ */
/* As telas do dia a dia a um toque; "Mais" abre o menu completo. So aparece dentro
   de uma obra (body.na-obra) e em tela estreita. */
.tabbar{display:none}
@media(max-width:768px){
  body.na-obra .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--card);border-top:1px solid var(--brd);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 16px rgba(15,23,42,.06)}
  .tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding-top:8px;padding-bottom:7px;color:var(--txt2);text-decoration:none;font-size:10.5px;font-weight:600;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar a.ativo{color:var(--accent)}
  /* o conteudo termina acima da barra (e da faixa do iPhone) */
  body.na-obra .content{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.na-obra .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* o menu lateral abre por cima da barra */
  .sidebar{z-index:210}
  .overlay{z-index:205}
}

/* ============ 6. CELULAR: LISTAS VIRAM CARTOES ============ */
/* telas.js marca as tabelas com .gm-cartoes e cada celula com data-rot="titulo da coluna" */
@media(max-width:768px){
  .table-wrap:has(> table.gm-cartoes){overflow:visible;border:none;background:transparent;border-radius:0}
  .card:has(> .table-wrap > table.gm-cartoes){padding-left:0;padding-right:0;background:transparent;border:none;box-shadow:none}
  table.gm-cartoes,table.gm-cartoes > tbody{display:block;width:100%}
  table.gm-cartoes > thead{display:none}
  table.gm-cartoes > tbody > tr{display:block;background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--sh-sm)}
  table.gm-cartoes > tbody > tr:hover{background:var(--card)}
  table.gm-cartoes > tbody > tr > td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:5px 0;border:none !important;text-align:right;font-size:14px;white-space:normal !important;max-width:none !important;min-height:0;word-break:break-word}
  table.gm-cartoes > tbody > tr > td::before{content:attr(data-rot);flex:0 0 34%;text-align:left;color:var(--txt2);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding-top:3px;word-break:normal}
  /* a primeira celula e o "titulo" do cartao */
  table.gm-cartoes > tbody > tr > td:first-child:not(.gm-marca):not(.gm-acoes),
  table.gm-cartoes > tbody > tr > td.gm-marca + td{display:block;text-align:left;font-size:15.5px;font-weight:700;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--brd) !important}
  table.gm-cartoes > tbody > tr > td:first-child:not(.gm-marca):not(.gm-acoes)::before,
  table.gm-cartoes > tbody > tr > td.gm-marca + td::before{display:none}
  /* celulas sem titulo de coluna */
  table.gm-cartoes td[data-rot=""]::before{display:none}
  table.gm-cartoes td.gm-acoes{justify-content:flex-start;flex-wrap:wrap;gap:8px;text-align:left;padding-top:10px;margin-top:6px;border-top:1px solid var(--brd) !important}
  table.gm-cartoes td.gm-acoes:empty{display:none}
  table.gm-cartoes td.gm-acoes > div{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  table.gm-cartoes td.gm-acoes .btn{flex:1 1 auto;min-height:42px;justify-content:center;white-space:nowrap}
  table.gm-cartoes td.gm-marca{justify-content:flex-start;padding:0 0 6px}
  table.gm-cartoes td.gm-marca input{width:22px !important;height:22px !important}
  table.gm-cartoes > tbody > tr.gm-linha-cheia{border:none;background:transparent;box-shadow:none;padding:0}
  table.gm-cartoes > tbody > tr.gm-linha-cheia > td{display:block;text-align:center}
  table.gm-cartoes > tbody > tr.gm-linha-cheia > td::before{display:none}
  table.gm-cartoes td input[type=text],table.gm-cartoes td input[type=number]{max-width:60%;text-align:right}
}

/* ============ 7. CELULAR: O QUE VAZAVA PRO LADO ============ */
/* Filho de grade nao encolhe abaixo do proprio conteudo se nao tiver min-width:0.
   No painel, "Top Fornecedores" e "Proximos Vencimentos" ficavam com 501 px numa
   tela de 390 e a pagina inteira ganhava rolagem lateral (visto no motor do Safari). */
.grid2 > *, .pg-grid > *, .stats > *, .form-grid > *, .cx-hero > *{min-width:0}
@media(max-width:768px){
  /* o convite "Instale o Gestao Max" e o botao de instalar ficam ACIMA da barra de atalhos */
  body.na-obra #iosBanner, body.na-obra #pwaInstall{bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important}
}