/* Gestão Familiar V6.1.0 — mobile-first UX
   Mantém o desktop intacto e reorganiza a app abaixo de 820px. */

@media (max-width: 820px){
  html{background:var(--bg);-webkit-text-size-adjust:100%}
  body{padding:0 0 calc(78px + env(safe-area-inset-bottom));overflow-x:hidden}
  .app-shell{display:block!important;min-height:100dvh}
  .sidebar{display:none!important}
  .main{padding:0 12px calc(24px + env(safe-area-inset-bottom))!important;min-width:0}

  /* Cabeçalho móvel: informação essencial sempre visível, sem ocupar meio ecrã. */
  .topbar{
    position:sticky;top:0;z-index:40;
    margin:0 -12px 14px!important;
    padding:calc(10px + env(safe-area-inset-top)) 12px 10px!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center!important;
    background:rgba(244,246,248,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .topbar>div:first-child{min-width:0}
  .topbar h1{font-size:20px!important;line-height:1.15;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar p{display:none!important}
  .top-actions{display:flex!important;justify-content:flex-end;align-items:center!important;gap:6px!important;min-width:0;flex-wrap:wrap!important}
  .top-actions .sync-pill{order:1;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;font-size:11px}
  .top-actions #monthSelect{order:2;min-width:122px;max-width:145px;height:36px!important;padding:6px 28px 6px 9px!important;font-size:13px!important}
  .top-actions #monthStateBadge{order:3;padding:5px 8px;font-size:10px}
  .top-actions #connectSync,.top-actions #updatePwa,.top-actions #installPwa{order:4;min-height:36px!important;padding:6px 9px!important;font-size:11px!important}

  /* Superfícies e espaçamento. */
  .grid,.two-col,.manage-grid{grid-template-columns:1fr!important;gap:12px!important}
  .card{padding:14px!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(16,24,40,.05)!important}
  .card h3{font-size:15px}
  .section-title{align-items:flex-start!important;gap:8px!important;margin-bottom:12px!important}
  .section-title h2{font-size:17px!important}
  .card-sub{font-size:12px;line-height:1.45}
  .note,.warning-inline,.danger-note,.sync-status-box{font-size:12px;line-height:1.45}
  .empty{padding:28px 12px!important}

  /* Controlos realmente tocáveis; 16px evita zoom automático em iPhone. */
  button,.btn,input,.input,select,.select,.search{min-height:44px}
  input,.input,select,.select,.search{font-size:16px!important;max-width:100%}
  .btn.small{min-height:40px;padding:8px 10px;font-size:12px}
  .form-stack{gap:12px!important}
  .field label{font-size:12px;margin-bottom:6px}
  .toolbar{display:grid!important;grid-template-columns:1fr;gap:10px!important;align-items:stretch!important}
  .toolbar .group{display:flex!important;width:100%!important;gap:8px!important;align-items:stretch!important}
  .toolbar .group>*{min-width:0}
  .toolbar .search{flex:1 1 100%;width:100%}
  .toolbar .select{flex:1 1 150px}
  .row-actions{gap:8px!important}
  .row-actions .btn{flex:1 1 auto}

  /* Dashboard: KPIs compactos, legíveis e sem cartões enormes. */
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:12px!important}
  .kpi{min-width:0}
  .kpi .label{font-size:11px!important;margin-bottom:6px!important}
  .kpi .value{font-size:21px!important;line-height:1.1;overflow-wrap:anywhere}
  .kpi .meta{font-size:10px!important;line-height:1.35}
  .progress-row{grid-template-columns:1fr auto!important;gap:6px 10px!important;padding:11px 0!important}
  .progress-label{min-width:0}
  .progress-label strong{font-size:13px!important}
  .progress-label span{font-size:11px!important}
  .progress{grid-column:1/-1;grid-row:2;height:8px}
  .progress-num{grid-column:2;grid-row:1;text-align:right!important;font-size:12px!important}
  .summary-strip{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;padding:10px 0!important}
  .summary-strip>div{min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
  .summary-strip>div strong{font-size:16px!important;overflow-wrap:anywhere}
  .attention-banner{align-items:stretch!important;gap:10px!important;padding:12px!important}
  .attention-banner .btn{width:100%}

  /* Importação: fluxo vertical, dropzone clara e sem colisões. */
  #import .two-col{grid-template-columns:1fr!important}
  #import .dropzone{display:flex!important;min-height:132px;width:100%;padding:24px 16px!important;align-items:center;justify-content:center;flex-direction:column}
  #import .dropzone strong{font-size:14px;text-align:center}
  #import .dropzone p{font-size:11px!important;line-height:1.45;text-align:center}
  #import .import-status{margin-top:10px!important}

  /* Tabelas principais passam a cartões no telefone. */
  #transactions .table-wrap,#planning .table-wrap,#categories .table-wrap,#accounts .table-wrap,#import .card:last-child .table-wrap{overflow:visible!important;border:0!important;background:transparent}
  #transactions table,#planning table,#categories table,#accounts table,#import .card:last-child table,
  #transactions tbody,#planning tbody,#categories tbody,#accounts tbody,#import .card:last-child tbody{display:block;width:100%;background:transparent}
  #transactions thead,#planning thead,#categories thead,#accounts thead,#import .card:last-child thead{display:none}
  #transactions tr,#planning tr,#categories tr,#accounts tr,#import .card:last-child tr{
    display:block;margin:0 0 10px;padding:6px 10px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)
  }
  #transactions td,#planning td,#categories td,#accounts td,#import .card:last-child td{
    display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;
    width:100%;padding:8px 0!important;border:0!important;border-bottom:1px solid #f2f4f7!important;text-align:left!important;min-width:0
  }
  #transactions td:last-child,#planning td:last-child,#categories td:last-child,#accounts td:last-child,#import .card:last-child td:last-child{border-bottom:0!important}
  #transactions td::before,#planning td::before,#categories td::before,#accounts td::before,#import .card:last-child td::before{
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)
  }
  #transactions td>*:not(.tag),#planning td>*,#categories td>*,#accounts td>*,#import .card:last-child td>*{min-width:0;max-width:100%}
  #transactions select,#planning select,#categories select,#accounts select,#import .card:last-child select{width:100%!important}
  #transactions .amount,#planning .amount,#accounts .amount,#import .card:last-child .amount{text-align:left!important}

  #transactions td:nth-child(1)::before{content:'Data'}
  #transactions td:nth-child(2)::before{content:'Conta'}
  #transactions td:nth-child(3)::before{content:'Descrição'}
  #transactions td:nth-child(4)::before{content:'Categoria'}
  #transactions td:nth-child(5)::before{content:'Estado'}
  #transactions td:nth-child(6)::before{content:'Valor'}

  #planning td:nth-child(1)::before{content:'Categoria'}
  #planning td:nth-child(2)::before{content:'Tipo'}
  #planning td:nth-child(3)::before{content:'Orçamento'}
  #planning td:nth-child(4)::before{content:'Real'}
  #planning td:nth-child(5)::before{content:'Delta'}
  #planning .plan-input{width:100%!important;text-align:left!important}

  #categories td:nth-child(1)::before{content:'Categoria'}
  #categories td:nth-child(2)::before{content:'Grupo'}
  #categories td:nth-child(3)::before{content:'Tipo'}
  #categories td:nth-child(4)::before{content:'Fixa'}
  #categories td:nth-child(5)::before{content:'Uso'}
  #categories td:nth-child(6)::before{content:'Fundir em'}
  #categories td:nth-child(7)::before{content:'Ações'}
  #categories .row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}

  #accounts td:nth-child(1)::before{content:'Conta'}
  #accounts td:nth-child(2)::before{content:'Tipo'}
  #accounts td:nth-child(3)::before{content:'Instituição'}
  #accounts td:nth-child(4)::before{content:'Importador'}
  #accounts td:nth-child(5)::before{content:'Arranque'}
  #accounts td:nth-child(6)::before{content:'Saldo'}
  #accounts td:nth-child(7)::before{content:'Uso'}
  #accounts td:nth-child(8)::before{content:'Ações'}
  #accounts .row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}

  #import .card:last-child td:nth-child(1)::before{content:'Data'}
  #import .card:last-child td:nth-child(2)::before{content:'Ficheiro'}
  #import .card:last-child td:nth-child(3)::before{content:'Conta'}
  #import .card:last-child td:nth-child(4)::before{content:'Movimentos'}
  #import .card:last-child td:nth-child(5)::before{content:'Estado'}
  #import .card:last-child td:nth-child(6)::before{content:'Mover para'}
  #import .card:last-child td:nth-child(7)::before{content:'Ações'}

  /* Tabelas técnicas continuam tabela, mas com scroll confortável. */
  #reconciliation .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  #reconciliation table{min-width:680px}

  /* Navegação principal tipo app nativa. */
  .mobile-tabbar{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0!important;
    position:fixed!important;left:0;right:0;bottom:0;z-index:100;
    min-height:calc(64px + env(safe-area-inset-bottom));padding:5px 6px env(safe-area-inset-bottom)!important;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,24,40,.08);
  }
  .mobile-tab{position:relative;min-width:0;min-height:54px!important;padding:5px 2px!important;border:0!important;background:transparent!important;color:#667085!important;border-radius:12px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px!important;font-weight:650!important}
  .mobile-tab-icon{font-size:20px;line-height:1}
  .mobile-tab.active{color:var(--accent)!important;background:#eff6ff!important}
  .mobile-tab-badge{position:absolute;top:3px;right:18%;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;background:#f79009;color:#fff;font-size:9px;font-weight:800}
  .mobile-tab-badge[hidden]{display:none!important}

  /* Menu Mais como bottom-sheet grande e fácil de tocar. */
  .mobile-more-backdrop:not([hidden]){display:block!important;position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.42)}
  .mobile-more-sheet{position:absolute!important;left:0;right:0;bottom:0;padding:8px 14px calc(18px + env(safe-area-inset-bottom))!important;border-radius:22px 22px 0 0!important;background:#fff;box-shadow:0 -16px 48px rgba(15,23,42,.18);max-height:82dvh;overflow:auto}
  .mobile-more-handle{width:42px;height:4px;border-radius:99px;background:#d0d5dd;margin:2px auto 12px}
  .mobile-more-head{display:flex!important;align-items:center;justify-content:space-between;margin-bottom:12px}
  .mobile-more-head>div strong{display:block;font-size:18px}.mobile-more-head>div span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .mobile-more-close{width:44px;height:44px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:24px}
  .mobile-more-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
  .mobile-more-item{min-height:92px!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:14px!important;background:#fff!important;text-align:left!important;display:grid!important;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;color:var(--ink)!important}
  .mobile-more-item>span{grid-row:1/3;font-size:22px}.mobile-more-item strong{font-size:13px}.mobile-more-item small{font-size:10px;color:var(--muted);line-height:1.3}

  /* Toast e login seguros em ecrãs pequenos. */
  .toast{left:12px!important;right:12px!important;top:auto!important;bottom:calc(82px + env(safe-area-inset-bottom))!important;transform:translateY(8px)!important;text-align:center}
  .toast.show{transform:translateY(0)!important}
  .login-gate{padding:18px!important}.login-card{width:min(100%,420px)!important;padding:22px!important}
}

@media (max-width: 390px){
  .main{padding-left:10px!important;padding-right:10px!important}
  .topbar{margin-left:-10px!important;margin-right:-10px!important;padding-left:10px!important;padding-right:10px!important}
  .topbar{grid-template-columns:1fr!important}
  .top-actions{justify-content:flex-start!important}
  .top-actions .sync-pill{max-width:150px}
  .kpi-grid{grid-template-columns:1fr!important}
  .summary-strip{grid-template-columns:1fr!important}
  #transactions td,#planning td,#categories td,#accounts td,#import .card:last-child td{grid-template-columns:72px minmax(0,1fr)}
  .mobile-more-grid{grid-template-columns:1fr!important}
}