/* V6.1.0 — segunda passagem de UX mobile.
   Foco nas vistas de gestão: Planeamento, Categorias, Contas, Regras e Configuração. */
@media (max-width:820px){
  /* No telemóvel, gerir o que já existe é mais importante do que criar novo. */
  #categories .manage-grid,#accounts .manage-grid{display:flex!important;flex-direction:column!important;gap:12px!important}
  #categories .manage-grid>.card:nth-child(2),#accounts .manage-grid>.card:nth-child(2){order:1}
  #categories .manage-grid>.card:first-child,#accounts .manage-grid>.card:first-child{order:2;border-style:dashed!important;background:#fbfcfe}

  /* Planeamento: cada categoria vira um cartão compacto, com os 3 números lado a lado. */
  #planning tbody tr{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px 10px!important;padding:12px!important}
  #planning tbody td{display:block!important;padding:0!important;border:0!important;min-width:0}
  #planning tbody td::before{display:block!important;margin-bottom:4px;font-size:9px!important;font-weight:800;color:var(--muted);letter-spacing:.045em}
  #planning tbody td:nth-child(1){grid-column:1/-1;padding-bottom:9px!important;border-bottom:1px solid #eef2f6!important}
  #planning tbody td:nth-child(1)::before{display:none!important}
  #planning tbody td:nth-child(1){font-size:14px;font-weight:750}
  #planning tbody td:nth-child(1) .usage{font-weight:400;margin-top:3px}
  #planning tbody td:nth-child(2){display:none!important}
  #planning tbody td:nth-child(3)::before{content:'ORÇAMENTO'}
  #planning tbody td:nth-child(4)::before{content:'REAL'}
  #planning tbody td:nth-child(5)::before{content:'DELTA'}
  #planning .budget-input{height:42px!important;padding:7px 8px!important;text-align:right!important;font-size:15px!important}
  #planning tbody .amount{text-align:right!important;font-size:13px;padding-top:12px!important}
  #planning .summary-strip{grid-template-columns:1fr 1fr!important}
  #planning .summary-strip>div:last-child{grid-column:1/-1}
  #planning .toolbar .group:last-child{display:grid!important;grid-template-columns:1fr 1fr!important}
  #planning #savePlan,#planning #toggleClose{width:100%}

  /* Categorias: hierarquia visual e menos altura por cartão. */
  #categories tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 10px!important;padding:13px!important}
  #categories tbody td{display:block!important;min-width:0;padding:8px 0!important;border:0!important}
  #categories tbody td::before{display:block!important;margin-bottom:5px;font-size:9px!important;font-weight:800;color:var(--muted);letter-spacing:.045em}
  #categories tbody td:nth-child(1){grid-column:1/-1;padding-top:0!important;padding-bottom:12px!important;border-bottom:1px solid #eef2f6!important}
  #categories tbody td:nth-child(1)::before{display:none!important}
  #categories tbody .cat-name{font-weight:750!important}
  #categories tbody td:nth-child(2)::before{content:'GRUPO'}
  #categories tbody td:nth-child(3)::before{content:'TIPO'}
  #categories tbody td:nth-child(4)::before{content:'FIXA'}
  #categories tbody td:nth-child(5)::before{content:'UTILIZAÇÃO'}
  #categories tbody td:nth-child(5){grid-column:1/-1;border-top:1px solid #f2f4f7!important;border-bottom:1px solid #f2f4f7!important;margin-top:2px}
  #categories tbody td:nth-child(6){grid-column:1/-1}
  #categories tbody td:nth-child(6)::before{content:'FUNDIR CATEGORIA'}
  #categories tbody td:nth-child(6)>div{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  #categories tbody td:nth-child(7){grid-column:1/-1;padding-bottom:0!important}
  #categories tbody td:nth-child(7)::before{content:'AÇÕES'}
  #categories .row-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  #categories .row-actions .btn{min-width:0!important;padding-left:6px!important;padding-right:6px!important;font-size:11px!important}
  #categories .toolbar{gap:8px!important}
  #categories .toolbar .group:first-child{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #categories .toolbar .group:first-child .btn{width:100%;min-width:0}
  #categories #categoryGroupFilter{width:100%!important}

  /* Contas: os dados mais relacionados ficam em pares; edição avançada continua acessível sem scroll lateral. */
  #accounts tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 10px!important;padding:13px!important}
  #accounts tbody td{display:block!important;min-width:0;padding:8px 0!important;border:0!important}
  #accounts tbody td::before{display:block!important;margin-bottom:5px;font-size:9px!important;font-weight:800;color:var(--muted);letter-spacing:.045em}
  #accounts tbody td:nth-child(1){grid-column:1/-1;padding-top:0!important;padding-bottom:12px!important;border-bottom:1px solid #eef2f6!important}
  #accounts tbody td:nth-child(1)::before{display:none!important}
  #accounts tbody .acc-name{font-weight:750!important}
  #accounts tbody td:nth-child(2)::before{content:'TIPO'}
  #accounts tbody td:nth-child(3)::before{content:'INSTITUIÇÃO'}
  #accounts tbody td:nth-child(4){grid-column:1/-1}
  #accounts tbody td:nth-child(4)::before{content:'IMPORTADOR'}
  #accounts tbody td:nth-child(5){grid-column:1/-1;border-top:1px solid #f2f4f7!important;border-bottom:1px solid #f2f4f7!important}
  #accounts tbody td:nth-child(5)::before{content:'PONTO DE ARRANQUE'}
  #accounts tbody td:nth-child(5)>div{max-width:none!important}
  #accounts .acc-opening{width:100%!important;max-width:none!important}
  #accounts tbody td:nth-child(6)::before{content:'SALDO'}
  #accounts tbody td:nth-child(7)::before{content:'UTILIZAÇÃO'}
  #accounts tbody td:nth-child(8){grid-column:1/-1;padding-bottom:0!important;border-top:1px solid #f2f4f7!important}
  #accounts tbody td:nth-child(8)::before{content:'AÇÕES'}
  #accounts .row-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  #accounts .row-actions .btn{min-width:0!important;padding-left:6px!important;padding-right:6px!important;font-size:11px!important}

  /* Regras: deixam de parecer uma tabela comprimida. */
  #rules .section-title{display:grid!important;grid-template-columns:1fr!important}
  #rules #addRule{width:100%}
  #rules #ruleList{display:grid;gap:10px}
  #rules .rule-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:14px!important;background:#fff!important}
  #rules .rule-row .mobile-rule-field{grid-column:1/-1;min-width:0}
  #rules .rule-row .mobile-rule-field.category{grid-column:1;align-self:end}
  #rules .rule-row .rule-del{grid-column:2;align-self:end;min-width:88px}
  #rules .mobile-field-label{display:block;margin:0 0 5px;font-size:9px;font-weight:800;color:var(--muted);letter-spacing:.045em}
  #rules .rule-pattern,#rules .rule-cat{width:100%!important}
  #rules #saveRules{width:100%}

  /* Configuração: ações críticas não ficam espremidas em linhas horizontais. */
  #settings .google-panel>.group,#settings .card>.group{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%;gap:8px!important}
  #settings .google-panel>.group .btn,#settings .card>.group .btn,#settings .card>.group label.btn{width:100%;min-width:0;text-align:center}
  #settings .advanced-config-body .two-col{grid-template-columns:1fr!important}
  #settings details.advanced-config summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}

  /* Evita cartões internos demasiado altos por causa de margens de desktop. */
  #categories .card,#accounts .card,#rules .card,#planning .card{overflow:hidden}
}

@media(max-width:390px){
  #planning tbody tr{grid-template-columns:1fr 1fr!important}
  #planning tbody td:nth-child(3){grid-column:1/-1}
  #categories .row-actions,#accounts .row-actions{grid-template-columns:1fr!important}
  #settings .google-panel>.group,#settings .card>.group{grid-template-columns:1fr!important}
}