/* ============================================================
 * LifeOS · sidebar.css (v2.39.0 — substituto de header.css)
 * Sidebar fixa esquerda em desktop, drawer em mobile.
 * ============================================================ */

:root{
  --lifeos-sb-w:240px;
  --lifeos-sb-w-collapsed:64px;
  --lifeos-sb-topbar-h:54px;
}

/* ===== layout root: body offset pra sidebar em desktop ===== */
/* v3.0.1: SEM transition de padding-left (deixa valor "preso" em estados
   intermediários quando muda junto com width da sidebar). Snap instantâneo. */
html.has-sidebar body{
  padding-left:var(--lifeos-sb-w);
}
html.has-sidebar.sidebar-collapsed body{
  padding-left:var(--lifeos-sb-w-collapsed);
}
@media (max-width:1199px){
  html.has-sidebar body{
    padding-left:0;
    padding-top:var(--lifeos-sb-topbar-h);
  }
}

/* ===== Sidebar container ===== */
.lifeos-sb{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--lifeos-sb-w);
  /* v3.0.8: backdrop-filter:blur removido — sidebar fixa lateral
     com blur permanente sobrecarregava GPU (com vídeos atrás).
     bg sólido alpha 0.98 dá efeito visual similar sem custo GPU. */
  background:color-mix(in srgb, var(--bg) 98%, transparent);
  border-right:1px solid var(--line-2);
  z-index:var(--z-sidebar);
  display:flex;flex-direction:column;
  overflow:hidden;
  /* v3.0.1: transition só em transform por default — width transita só quando
     user toggle collapse manualmente (ver html.sidebar-mounted abaixo) */
  transition:transform var(--d2) var(--ease-out);
}
/* v3.0.24: width agora transita suave + labels com fade.
   Fade rápido nos labels (var(--d1)) + width transita (var(--d2)). Sem mais snap seco. */
.lifeos-sb{transition:transform var(--d2) var(--ease-out), width var(--d2) var(--ease-out)}
.lifeos-sb-label,.lifeos-sb-logo-tx,.lifeos-sb-cmdk-kbd,
.lifeos-sb-section-label,.lifeos-sb-group-caret,
.lifeos-sb-group-items{
  transition:opacity var(--d1) ease, max-width var(--d2) var(--ease-out);
  opacity:1;max-width:200px;overflow:hidden;
}
html.sidebar-collapsed .lifeos-sb{
  width:var(--lifeos-sb-w-collapsed);
}
html.sidebar-collapsed .lifeos-sb-label,
html.sidebar-collapsed .lifeos-sb-logo-tx,
html.sidebar-collapsed .lifeos-sb-cmdk-kbd,
html.sidebar-collapsed .lifeos-sb-section-label,
html.sidebar-collapsed .lifeos-sb-group-caret{
  opacity:0;max-width:0;pointer-events:none;
  white-space:nowrap;
}
/* v3.0.26: força hidden com !important (regra .expanded .group-items
   tem maior especificidade e sobrepunha quando user expandia grupo
   antes de colapsar). */
html.sidebar-collapsed .lifeos-sb-group-items,
html.sidebar-collapsed .lifeos-sb-group.expanded .lifeos-sb-group-items{
  display:none !important;
}
/* v3.0.26: collapsed = só módulos principais visíveis.
   Esconde foot inteiro (ações, logout) — só fica o botão recolher. */
html.sidebar-collapsed .lifeos-sb-foot .lifeos-sb-opt-item,
html.sidebar-collapsed .lifeos-sb-foot .lifeos-sb-logout,
html.sidebar-collapsed .lifeos-sb-foot .lifeos-sb-section-label{
  display:none !important;
}
html.sidebar-collapsed .lifeos-sb-group-head{
  /* head do grupo vira clicável pra abrir submenu flutuante (futuro) */
  cursor:pointer;
}
/* v3.0.27: alinhamento PERFEITO no sidebar colapsado.
   Todos itens com width fixo, centro com flex, sem margin/padding lateral. */
html.sidebar-collapsed .lifeos-sb-nav,
html.sidebar-collapsed .lifeos-sb-foot{
  padding-left:0 !important;padding-right:0 !important;
  align-items:center;
}
html.sidebar-collapsed .lifeos-sb-item,
html.sidebar-collapsed .lifeos-sb-cmdk-btn,
html.sidebar-collapsed .lifeos-sb-group-head{
  justify-content:center !important;
  padding:10px 0 !important;
  gap:0 !important;
  margin:0 !important;
  width:100% !important;
}
html.sidebar-collapsed .lifeos-sb-icon{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:32px;height:32px;
  flex:0 0 32px;
}
html.sidebar-collapsed .lifeos-sb-icon svg{
  display:block;margin:0 auto;
}
html.sidebar-collapsed .lifeos-sb-collapse-toggle svg{transform:rotate(180deg)}
/* Quando collapsed, ações no foot (Calendário, Tarefas: visão geral, etc)
   viram só ícones — sem texto */
html.sidebar-collapsed .lifeos-sb-opt-item .lifeos-sb-label{
  opacity:0;max-width:0;
}
/* Logo: vira só o ícone centralizado */
html.sidebar-collapsed .lifeos-sb-logo{
  justify-content:center;
}
html.sidebar-collapsed .lifeos-sb-head{
  padding:14px 0 10px;justify-content:center;
}

/* head com logo + close (mobile) */
.lifeos-sb-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}
.lifeos-sb-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:inherit;
  transition:opacity var(--d1) ease;flex:1;min-width:0;
}
.lifeos-sb-logo:hover{opacity:.85}
.lifeos-sb-logo-ic{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.lifeos-sb-logo-ic svg{width:16px;height:16px}
.lifeos-sb-logo-tx{display:flex;flex-direction:column;line-height:1;min-width:0}
.lifeos-sb-logo-tx b{
  font:800 13px/1 var(--ff);color:var(--tx);letter-spacing:-0.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lifeos-sb-logo-tx small{
  font:600 9px/1 var(--ff-mono);color:var(--tx3);
  letter-spacing:0.06em;margin-top:3px;
}
.lifeos-sb-close{
  display:none; /* só em mobile (drawer aberto) */
  width:30px;height:30px;
  background:transparent;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--tx2);cursor:pointer;
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.lifeos-sb-close:hover{background:var(--panel-2);color:var(--tx)}
.lifeos-sb-close svg{width:14px;height:14px}

/* otto badge na head */
.lifeos-sb-otto-badge{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--amber) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-radius:var(--r-full);
  color:var(--amber);cursor:pointer;flex-shrink:0;
  transition:all var(--d1) ease;
}
.lifeos-sb-otto-badge:hover{background:color-mix(in srgb, var(--amber) 25%, transparent)}
.lifeos-sb-otto-badge svg{width:14px;height:14px}

/* Cmd+K button */
.lifeos-sb-cmdk-btn{
  display:flex;align-items:center;gap:10px;
  margin:12px 12px 8px;
  padding:9px 12px;
  background:var(--panel-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  color:var(--tx2);
  font:500 12.5px/1 var(--ff);
  cursor:pointer;text-align:left;
  transition:all var(--d1) ease;
}
.lifeos-sb-cmdk-btn:hover{
  background:var(--panel);
  border-color:var(--line-2);
  color:var(--tx);
}
.lifeos-sb-cmdk-btn .lifeos-sb-icon{display:flex}
.lifeos-sb-cmdk-btn svg{width:14px;height:14px;opacity:.8}
.lifeos-sb-cmdk-btn .lifeos-sb-label{flex:1}
.lifeos-sb-cmdk-kbd{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 6px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font:600 10px/1 var(--ff-mono);color:var(--tx2);
}

/* nav: scrollable middle */
.lifeos-sb-nav{
  display:flex;flex-direction:column;gap:1px;
  padding:6px 8px;
  flex:1;overflow-y:auto;
}
.lifeos-sb-nav::-webkit-scrollbar{width:6px}

.lifeos-sb-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;
  background:transparent;border:none;
  border-radius:var(--r-md);
  color:var(--tx2);
  font:500 13px/1 var(--ff);
  cursor:pointer;text-decoration:none;text-align:left;
  transition:background var(--d1) ease, color var(--d1) ease;
  letter-spacing:-0.005em;
  white-space:nowrap;
  width:100%;
}
.lifeos-sb-item .lifeos-sb-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lifeos-sb-item svg{width:15px;height:15px;opacity:.8}
.lifeos-sb-item:hover{background:rgba(255,255,255,0.05);color:var(--tx)}
.lifeos-sb-item:hover svg{opacity:1}
.lifeos-sb-item.active{
  background:var(--tint);
  color:var(--brand);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 32%, transparent);
}
.lifeos-sb-item.active svg{color:var(--brand);opacity:1}
.lifeos-sb-item .lifeos-sb-label{flex:1;overflow:hidden;text-overflow:ellipsis}

/* grupo (Pessoal / Financeiro) */
.lifeos-sb-group{display:flex;flex-direction:column;gap:1px}
.lifeos-sb-group-head{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;
  border-radius:var(--r-md);
  color:var(--tx2);
  font:600 13px/1 var(--ff);
  cursor:pointer;
  user-select:none;
  transition:background var(--d1) ease;
  letter-spacing:-0.005em;
}
.lifeos-sb-group-head:hover{background:rgba(255,255,255,0.04);color:var(--tx)}
.lifeos-sb-group-head .lifeos-sb-icon{display:flex;flex-shrink:0}
.lifeos-sb-group-head svg{width:15px;height:15px;opacity:.8}
.lifeos-sb-group-head .lifeos-sb-label{flex:1}
.lifeos-sb-group-caret{margin-left:auto;display:flex;transition:transform var(--d2) ease}
.lifeos-sb-group-caret svg{width:13px;height:13px;opacity:.6}
.lifeos-sb-group.expanded > .lifeos-sb-group-head .lifeos-sb-group-caret{transform:rotate(180deg)}
.lifeos-sb-group-items{
  display:none;
  padding-left:14px;
  margin-top:1px;
  border-left:1px solid var(--line);
  margin-left:14px;
}
.lifeos-sb-group.expanded .lifeos-sb-group-items{display:flex;flex-direction:column;gap:1px}
.lifeos-sb-group-items .lifeos-sb-item{padding:7px 12px;font-size:12.5px}
.lifeos-sb-group-items .lifeos-sb-item svg{width:13px;height:13px}

/* foot: opções + logout */
.lifeos-sb-foot{
  padding:8px 8px 12px;
  display:flex;flex-direction:column;gap:1px;
  border-top:1px solid var(--line);
  position:relative;
}
.lifeos-sb-section-label{
  font:600 9px/1 var(--ff-mono);
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--tx3);
  padding:8px 12px 4px;
}
.lifeos-sb-opt-item svg{opacity:.75}
.lifeos-sb-logout{
  color:var(--tx2);
  margin-top:4px;
}
.lifeos-sb-logout:hover{
  background:color-mix(in srgb, var(--crit) 10%, transparent);
  color:color-mix(in srgb, var(--crit) 70%, var(--tx));
}
.lifeos-sb-logout:hover svg{color:color-mix(in srgb, var(--crit) 70%, var(--tx))}

/* v3.0.24: botão recolher virou item da lista (estilo destacado).
   Antes flutuava absoluto e cortava. Agora dentro do .lifeos-sb-foot. */
.lifeos-sb-item.lifeos-sb-collapse-toggle{
  margin-top:8px;
  background:var(--tint);
  border:1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  color:var(--brand);
  font-weight:600;
}
.lifeos-sb-item.lifeos-sb-collapse-toggle:hover{
  background:color-mix(in srgb, var(--brand) 25%, transparent);
  color:var(--on-brand);
  border-color:var(--brand);
}
.lifeos-sb-item.lifeos-sb-collapse-toggle svg{
  transition:transform var(--d2) var(--ease-out);
}
html.sidebar-collapsed .lifeos-sb-item.lifeos-sb-collapse-toggle svg{
  transform:rotate(180deg);
}
/* Só aparece em desktop — mobile já tem botão fechar próprio */
@media (max-width:1199px){
  .lifeos-sb-item.lifeos-sb-collapse-toggle{display:none}
}

/* ============ Top-bar mobile + overlay ============ */
.lifeos-sb-overlay{
  position:fixed;inset:0;
  /* v3.0.8: blur removido (GPU expensive em mobile com vídeos) */
  background:rgba(0,0,0,0.72);
  z-index:calc(var(--z-sidebar) - 1);
  opacity:0;pointer-events:none;
  transition:opacity var(--d2) ease;
}
.lifeos-sb-overlay.active{opacity:1;pointer-events:auto}

.lifeos-sb-topbar{
  display:none; /* desktop hidden */
  position:fixed;top:0;left:0;right:0;
  height:var(--lifeos-sb-topbar-h);
  /* v3.0.8: blur removido (sticky topbar com blur era GPU-pesado) */
  background:color-mix(in srgb, var(--bg) 98%, transparent);
  border-bottom:1px solid var(--line);
  z-index:calc(var(--z-sidebar) - 2);
  align-items:center;
  padding:0 12px;gap:12px;
}
.lifeos-sb-hamburger{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--tx2);
  cursor:pointer;flex-shrink:0;
}
.lifeos-sb-hamburger:hover{background:var(--panel-2);color:var(--tx)}
.lifeos-sb-hamburger svg{width:16px;height:16px}
.lifeos-sb-topbar-logo{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit;
  flex:1;min-width:0;
}
.lifeos-sb-topbar-logo-ic{
  width:26px;height:26px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.lifeos-sb-topbar-logo-ic svg{width:14px;height:14px}
.lifeos-sb-topbar-logo b{font:700 14px/1 var(--ff);color:var(--tx);letter-spacing:-0.02em}
.lifeos-sb-topbar-cmdk{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--tx2);
  cursor:pointer;flex-shrink:0;
}
.lifeos-sb-topbar-cmdk:hover{background:var(--panel-2);color:var(--tx)}
.lifeos-sb-topbar-cmdk svg{width:15px;height:15px}

/* ============ Responsive: mobile ============ */
@media (min-width:1200px){
  .lifeos-sb-collapse-toggle{display:flex}
}
@media (max-width:1199px){
  .lifeos-sb-topbar{display:flex}
  .lifeos-sb{
    transform:translateX(-100%);
    width:min(86vw, 320px);
  }
  .lifeos-sb.open{transform:translateX(0)}
  .lifeos-sb-close{display:flex}
  .lifeos-sb-foot .lifeos-sb-collapse-toggle{display:none}
  /* mobile: ignora collapse */
  html.sidebar-collapsed .lifeos-sb{width:min(86vw, 320px)}
  html.sidebar-collapsed .lifeos-sb-label,
  html.sidebar-collapsed .lifeos-sb-logo-tx,
  html.sidebar-collapsed .lifeos-sb-cmdk-kbd,
  html.sidebar-collapsed .lifeos-sb-section-label,
  html.sidebar-collapsed .lifeos-sb-group-caret{display:initial}
  html.sidebar-collapsed .lifeos-sb-group-items{display:flex}
  html.sidebar-collapsed .lifeos-sb-item{justify-content:flex-start;padding:9px 12px}
}

/* ============ pagetitle (preservado de header.css) ============ */
.lifeos-pagetitle{
  background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.015) 100%);
  border-bottom:1px solid var(--line-2);
  border-top:1px solid rgba(255,255,255,0.04);
  position:relative;
}
.lifeos-pagetitle::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb, var(--brand) 35%, transparent) 50%,transparent 100%);
  pointer-events:none;
}
.lifeos-breadcrumb{font-size:12px}
.lifeos-pagetitle-inner{
  max-width:var(--page-max);margin:0 auto;
  padding:22px 22px 24px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:18px;
}
.lifeos-pagetitle-text{min-width:0}
.lifeos-breadcrumb{
  display: inline-flex; align-items: center;
  gap: var(--s2);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--brand);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--s1);
  opacity: 0;
  animation: v-heroFade .7s var(--ease-out) .1s forwards;
}
/* Dot pulsing antes do breadcrumb.
   perf (v3.11.1): pulse era box-shadow animado (main thread, repaint em
   todo frame, infinito). Agora transform/opacity — roda no compositor. */
.lifeos-breadcrumb::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  will-change: transform, opacity;
  animation: v-kickerPulse 2.4s var(--ease) infinite;
  flex-shrink: 0;
}
.lifeos-breadcrumb a{
  color:var(--tx2);text-decoration:none;
  transition:color var(--d1) ease;
}
.lifeos-breadcrumb a:hover{color:var(--tx)}
.lifeos-breadcrumb-sep{opacity:0.4}
.lifeos-breadcrumb-current{color:var(--tx)}
.lifeos-pagetitle-h1{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-2xl);
  font-weight: 500;
  color: var(--tx);
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0;
}
/* padronizado: títulos de página sem itálico e sempre brancos (--tx) */
.lifeos-pagetitle-h1 em,
.lifeos-pagetitle-h1 .v-em{
  font-style: normal;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}
.lifeos-pagetitle-sub{
  font-family:var(--ff);font-size:13px;font-weight:500;
  color:var(--tx2);
  margin-top:5px;
  letter-spacing:-0.005em;
}
.lifeos-pagetitle-actions{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
@media (max-width:900px){
  .lifeos-pagetitle-inner{
    padding:18px 14px 20px;
    grid-template-columns:1fr;
  }
  .lifeos-pagetitle-h1{font-size:22px}
}

/* full-bleed em fin-page e rot-page: pagetitle estende até as bordas físicas
   (apenas em mobile/tablet, quando a sidebar está em modo drawer).
   Em desktop com sidebar lateral, pagetitle fica dentro do container — full-bleed
   ainda passa por baixo da sidebar e visualmente fica feio. */
.fin-page > .lifeos-pagetitle,
.rot-page > .lifeos-pagetitle{
  margin-bottom:8px;
}
@media (max-width:1199px){
  .fin-page > .lifeos-pagetitle,
  .rot-page > .lifeos-pagetitle{
    position:relative;
    left:50%;right:50%;
    margin-left:-50vw;margin-right:-50vw;
    width:100vw;
  }
}

html{overflow-x:hidden}

/* ============================================================
 * v3.0.1 — AUDITORIA RESPONSIVIDADE FINAL
 * Correções de elementos position:fixed que ignoram body padding-left
 * da sidebar em desktop. Eles ficavam atrás/deslocados.
 * ============================================================ */

/* Em desktop com sidebar expandida (≥1200px), elementos fixos no canto
   esquerdo ou centro ficam atrás dela. Shift pra dentro da área útil. */
@media (min-width: 1200px){
  html.has-sidebar .sync-dot{
    left:calc(var(--lifeos-sb-w, 240px) + 18px);
  }
  html.has-sidebar.sidebar-collapsed .sync-dot{
    left:calc(var(--lifeos-sb-w-collapsed, 64px) + 18px);
  }
  html.has-sidebar .lifeos-undo-history{
    left:calc(var(--lifeos-sb-w, 240px) + 18px);
  }
  html.has-sidebar.sidebar-collapsed .lifeos-undo-history{
    left:calc(var(--lifeos-sb-w-collapsed, 64px) + 18px);
  }
  /* Elementos centralizados via left:50% + translateX(-50%):
     shift pra direita pelo offset HALF da sidebar pra parecer centralizado
     na área útil (depois do padding-left). */
  html.has-sidebar .undo-toast,
  html.has-sidebar .app-toast,
  html.has-sidebar .lifeos-hist-banner,
  html.has-sidebar .banner-success{
    left:calc(50% + var(--lifeos-sb-w, 240px) / 2) !important;
  }
  html.has-sidebar.sidebar-collapsed .undo-toast,
  html.has-sidebar.sidebar-collapsed .app-toast,
  html.has-sidebar.sidebar-collapsed .lifeos-hist-banner,
  html.has-sidebar.sidebar-collapsed .banner-success{
    left:calc(50% + var(--lifeos-sb-w-collapsed, 64px) / 2) !important;
  }
}

/* ============================================================
 * Fin-tx-row em mobile — vira layout vertical (5 colunas não cabe)
 * ============================================================ */
@media (max-width: 680px){
  .fin-tx-row{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-rows:auto auto !important;
    grid-template-areas:
      "date desc val"
      "cat  meta meta" !important;
    gap:4px 8px !important;
    padding:10px 12px !important;
  }
  .fin-tx-row .fin-tx-date{grid-area:date;font-size:10.5px}
  .fin-tx-row .fin-tx-desc{grid-area:desc;font-size:13px;overflow:hidden;text-overflow:ellipsis}
  .fin-tx-row .fin-tx-val{grid-area:val;font-size:13px;justify-self:end}
  .fin-tx-row .fin-tx-cat{grid-area:cat;font-size:10.5px;display:flex;align-items:center;gap:4px}
  .fin-tx-row .fin-tx-meta{grid-area:meta;font-size:10.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:end}

  .fin-tx-day-header{padding:10px 12px 4px;position:relative}
  .fin-tx-day-label{font-size:11px}
  .fin-tx-day-count{font-size:9.5px}
}

/* ============================================================
 * Hub-zone-head: garante wrap em mobile (3 elementos baseline)
 * ============================================================ */
@media (max-width: 680px){
  .hub-zone-head{flex-wrap:wrap;gap:8px}
  .hub-zone-line{flex-basis:100%;order:99;height:1px}
  .hub-zone-meta{order:2;margin-left:auto}
}

/* ============================================================
 * Bank-person-card (saldo casal) — mais compacto em mobile
 * ============================================================ */
@media (max-width: 680px){
  .bank-person-card{padding:11px 12px !important}
  .bank-person-avatar{width:34px;height:34px;font-size:14px}
  .bank-person-name{font-size:12px}
  .bank-person-total{font-size:15px !important}
  .bank-person-meta{font-size:10.5px}
  .bank-person-arrow svg{width:14px;height:14px}
}

/* ============================================================
 * Twt-modal (tabela semanal de tarefas) — scroll horizontal em mobile
 * ============================================================ */
@media (max-width: 900px){
  .twt-modal{width:100% !important;max-width:100% !important}
  .twt-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .twt-grid{min-width:580px} /* força scroll */
}

/* ============================================================
 * Cal-grid (calendário mês) — células menores em mobile
 * ============================================================ */
@media (max-width: 680px){
  .cal-modal{max-width:100% !important;width:100% !important;max-height:92vh !important}
  .cal-day{font-size:12px;min-height:38px;padding:4px 2px}
  .cal-day-n{font-size:13px}
  .cal-wk{font-size:11px}
  .cal-title{font-size:16px}
  .cal-year{font-size:13px}
  .cal-nav{width:30px;height:30px}
  .cal-nav svg{width:13px;height:13px}
}

/* ============================================================
 * Fin-hero (resumo financeiro) — colunas viram stacked em mobile
 * ============================================================ */
@media (max-width: 680px){
  .fin-hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .fin-hero-cell{padding:12px 14px}
  .fin-hero-lbl{font-size:10.5px}
  .fin-hero-val{font-size:clamp(20px, 6vw, 32px) !important}
}

/* ============================================================
 * Cards-list, recv-list — wrap mais agressivo em mobile
 * ============================================================ */
@media (max-width: 680px){
  .fin-card-row{padding:10px 12px;gap:8px}
  .fin-card-owner-pill{font-size:10px;padding:3px 7px}
  .fin-card-name{font-size:13px}
  .fin-card-cycle{font-size:10.5px}
  .fin-card-val{font-size:14px}
}

/* ============================================================
 * Form-modal em mobile: padding interno reduzido + scrollable
 * (importante porque agora é bottom-sheet)
 * ============================================================ */
@media (max-width: 680px){
  .v-modal-body, .v-form-body{padding:14px 16px !important}
  .v-modal-head, .v-form-head{padding:14px 16px !important}
  .v-form-row{grid-template-columns:1fr !important}
  .v-inp, .v-sel, .v-ta{font-size:14px !important; padding:12px 13px !important} /* iOS: 14px+ pra não dar zoom */
  .v-form-foot{padding:12px 16px 14px !important;gap:8px;flex-wrap:wrap}
  .v-btn{flex:1;min-width:0}
}

/* ============================================================
 * Sticky day header em fin-tx-list em modais bottom-sheet:
 * desliga sticky em mobile pra evitar conflito com handle do bottom-sheet
 * ============================================================ */
@media (max-width: 680px){
  .modal .fin-tx-day-header,
  .v-form-modal .fin-tx-day-header{position:static}
}

/* ============================================================
 * Sidebar collapse toggle no mobile: garantia que NÃO aparece
 * ============================================================ */
@media (max-width: 1199px){
  .lifeos-sb-collapse-toggle{display:none !important}
}

/* ============================================================
 * Tap targets a11y mínimos (44x44 em mobile)
 * ============================================================ */
@media (max-width: 680px){
  .lifeos-sb-hamburger, .lifeos-sb-topbar-cmdk{min-width:44px;min-height:44px}
  .fin-nav-btn, .cal-nav{min-width:38px;min-height:38px}
  button.edit-del, button.edit-del2{min-width:32px;min-height:32px}
}

/* ============================================================
 * Hub-cmdk-hint: hide em tablet (entre 681 e 1199 — sidebar é drawer
 * e o usuário usa o hambúrguer/topbar pra Cmd+K)
 * ============================================================ */
@media (max-width: 1199px){
  .hub-cmdk-hint{display:none !important}
}

/* ============================================================
 * Login screen: NÃO sofre influência do body padding (inset:0 é
 * relativo a viewport). Mas pra garantir que esteja por cima da sidebar:
 * ============================================================ */
.login-screen{z-index:calc(var(--z-critical, 99999) + 1) !important}

/* ============================================================
 * Loading: garantir z-index acima da sidebar
 * ============================================================ */
.loading{z-index:calc(var(--z-critical, 99999) + 2) !important}

/* ============================================================
 * Body em mobile <=680: padding lateral reduzido pra ganhar área útil
 * em containers internos
 * ============================================================ */
@media (max-width: 680px){
  .hub-wrap{padding:24px 12px 60px !important}
  .hub-zone{margin-top:32px}
  .hub-zone-title{font-size:18px}
}

/* ============================================================
 * Lifeos-sb-topbar em mobile: garantir que NÃO desaparece atrás
 * de modais com z-index alto. Confirma z acima de sidebar mas
 * abaixo de modal-backdrop.
 * ============================================================ */
.lifeos-sb-topbar{z-index:calc(var(--z-sidebar, 50) - 2)}
.lifeos-sb-overlay{z-index:calc(var(--z-sidebar, 50) - 1)}

/* ============================================================
 * Tabela twt e cal em mobile: garantir que não estourem viewport
 * ============================================================ */
@media (max-width: 1199px){
  .twt-modal, .cal-modal{max-height:88vh !important;overflow-y:auto}
}

/* ============================================================
 * scroll horizontal: garantir disable de horizontal scroll em todo body
 * exceto onde explicitamente queremos
 * ============================================================ */
html, body{max-width:100vw;overflow-x:hidden}

/* ============================================================
 * Wrap (dashboard) em tablet: sidebar é drawer mas o grid ainda
 * é 4 colunas até 1199. Forçar flex column em <=1199 pra evitar
 * grid de 4 col em tela tablet apertada
 * ============================================================ */
@media (max-width: 1199px){
  body:has(> .wrap) .wrap{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:calc(100vh - var(--lifeos-sb-topbar-h, 54px)) !important;
  }
}

/* ============================================================
 * Fase 5 — Responsividade global (v2.42.0)
 * ============================================================ */

/* E3: modais como bottom-sheet em mobile (<=680px).
   Slide-up ocupando 80-90% bottom, com handle no topo. */
@media (max-width: 680px){
  .v-modal-backdrop{
    padding:0;
    align-items:flex-end;justify-content:stretch;
  }
  .modal, .v-form-modal{
    max-width:none !important;
    width:100%;
    max-height:90vh;
    border-radius:18px 18px 0 0;
    margin:0;
    animation:lifeosBottomSheetIn var(--d2) var(--ease-out) !important;
  }
  /* handle no topo (visual de bottom-sheet) */
  .modal::before, .v-form-modal::before{
    content:'';
    display:block;
    width:36px;height:4px;
    background:rgba(255,255,255,0.18);
    border-radius:var(--r-full);
    margin:8px auto 0;
    flex-shrink:0;
  }
  .confirm-modal{
    max-width:none !important;
    width:100%;
    margin:0;
    border-radius:18px 18px 0 0;
    animation:lifeosBottomSheetIn var(--d2) var(--ease-out) !important;
  }
  .v-modal-backdrop.closing .modal,
  .v-modal-backdrop.closing .v-form-modal,
  .v-modal-backdrop.closing .confirm-modal{
    animation:lifeosBottomSheetOut var(--d2) ease-in forwards !important;
  }
}
@keyframes lifeosBottomSheetIn{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
@keyframes lifeosBottomSheetOut{
  from{transform:translateY(0)}
  to{transform:translateY(100%)}
}

/* J4: font-size mínimo 11px em mobile (era 9-10px ilegível).
   Aplicado em labels mono frequentes. */
@media (max-width: 680px){
  .v-form-label,
  .sec .sc,
  .hub-zone-num,
  .hub-zone-meta,
  .lifeos-breadcrumb{
    font-size:11px !important;
  }
}

/* C2: accordion mobile no Saldo casal (já controlado por .fin-balance-strip layout).
   Adiciona expand/collapse via classe .fin-balance-collapsed (toggle por JS).
   Cards .fin-balance-pat e .fin-balance-pam ficam ocultos por default em mobile,
   um botão expande. */
@media (max-width: 680px){
  .fin-balance-strip.fin-balance-collapsed .fin-balance-pat,
  .fin-balance-strip.fin-balance-collapsed .fin-balance-pam{
    display:none;
  }
  .fin-balance-strip .fin-balance-accordion-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    width:100%;padding:8px 12px;margin-top:8px;
    background:transparent;
    border:1px dashed var(--line-2);
    border-radius:var(--r-md);
    color:var(--tx2);
    font:600 11px/1 var(--ff-mono);
    text-transform:uppercase;letter-spacing:0.08em;
    cursor:pointer;
  }
  .fin-balance-strip:not(.fin-balance-collapsed) .fin-balance-accordion-btn span::before{
    content:'recolher detalhamento';
  }
  .fin-balance-strip.fin-balance-collapsed .fin-balance-accordion-btn span::before{
    content:'mostrar por pessoa';
  }
}
@media (min-width: 681px){
  .fin-balance-accordion-btn{display:none !important}
}

/* J11: ícones featured cards do hub maiores (28-32px). */
.hub-card.featured .hub-icon{
  width:54px;height:54px;
}
.hub-card.featured .hub-icon svg{
  width:28px;height:28px;
}

/* J12: fin-hero-val auto-shrink em mobile. */
.fin-hero-val{
  font-size:clamp(24px, 4.5vw, 42px) !important;
}

/* C4: hub mobile reordenado — featured primeiro. */
@media (max-width: 680px){
  .hub-grid{display:flex;flex-direction:column;gap:10px}
  .hub-grid .hub-card.featured{order:-1}
  .hub-grid .hub-card.s-1{order:1}
  .hub-grid .hub-card.s-2:not(.featured){order:2}
  .hub-grid .hub-card.s-3:not(.featured){order:3}
}

/* E2: botões de reorder em tarefas (mobile). Inseridos via JS quando innerWidth<=680. */
.t-reorder-btns{
  display:inline-flex;flex-direction:column;gap:1px;
  margin-right:8px;flex-shrink:0;
}
.t-reorder-btn{
  width:22px;height:18px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--tx2);
  font:700 12px/1 var(--ff);
  cursor:pointer;
  padding:0;
  transition:all var(--d1) ease;
}
.t-reorder-btn:hover{
  background:var(--panel-2);
  color:var(--tx);
  border-color:var(--line-2);
}
.t-reorder-btn:active{
  transform:scale(0.92);
}

/* ============ K3: hint Cmd+K na home (badge canto sup direito) ============ */
.hub-cmdk-hint{
  position:absolute;top:18px;right:22px;
  display:flex;align-items:center;gap:6px;
  padding:6px 11px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  color:var(--tx2);
  font:600 11px/1 var(--ff-mono);
  letter-spacing:0.04em;text-transform:uppercase;
  cursor:pointer;
  transition:all var(--d1) ease;
  z-index:2;
}
.hub-cmdk-hint:hover{
  background:color-mix(in srgb, var(--brand) 10%, transparent);
  border-color:color-mix(in srgb, var(--brand) 30%, transparent);
  color:color-mix(in srgb, var(--brand) 70%, var(--tx));
}
.hub-cmdk-hint svg{width:12px;height:12px;opacity:.8}
@media (max-width:680px){.hub-cmdk-hint{display:none}}