/* ================================================================
   Talune — mobile.css
   Layout exclusivo mobile/tablet. Não afeta o desktop (runtime.css).
   Carregado somente em telas ≤ 1024px via <link media="...">.
   ================================================================ */

/* ── Hamburger button ── */
.mobileMenuToggle{
  position:fixed;
  top:7px;
  left:10px;
  z-index:115;
  width:38px;
  height:38px;
  border:none;
  border-radius:9px;
  background:transparent;
  cursor:pointer;
  padding:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:background .15s;
  display:none;
}
.mobileMenuToggle:hover{ background:rgba(255,255,255,.07); }
.mobileMenuToggle span{
  display:block;
  width:17px;
  height:2px;
  background:#c6ccd6;
  border-radius:2px;
  transition:transform .22s ease, opacity .18s ease, width .18s ease;
}
.mobileMenuToggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobileMenuToggle[aria-expanded="true"] span:nth-child(2){ opacity:0; width:0; }
.mobileMenuToggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Overlay ── */
.sidebarOverlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(4,7,12,.62);
  backdrop-filter:blur(3px);
  z-index:108;
}
.sidebarOverlay.active{ display:block; }

/* ================================================================
   DRAWER — max-width: 1024px  (tablet + mobile)
   ================================================================ */
@media (max-width:1024px){

  .mobileMenuToggle{ display:flex; }

  /* Container: encerra o grid de 2 colunas do desktop */
  .container{
    display:block !important;
    grid-template-columns:none !important;
    padding:16px 14px 40px !important;
  }

  /* Workspace panel: ocupa largura total */
  .workspacePanel{
    grid-column:unset !important;
    padding:0 0 4px !important;
  }

  /* Sidebar vira drawer */
  .unifiedSidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:264px !important;
    height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    padding:0 !important;
    background:#08101a !important;
    border-right:1px solid rgba(255,255,255,.07) !important;
    border-radius:0 !important;
    box-shadow:8px 0 40px rgba(0,0,0,.55) !important;
    z-index:110 !important;
    transform:translateX(-100%) !important;
    transition:transform .26s cubic-bezier(.4,0,.2,1) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(138,154,176,.2) transparent !important;
  }
  .unifiedSidebar.sidebar-open{
    transform:translateX(0) !important;
  }

  /* Gradient decorativo — desativado no drawer (brand div assume) */
  .unifiedSidebar::before{ display:none !important; }
  .unifiedSidebar::after{ display:none !important; }

  /* Brand header no drawer: recua para o hamburger */
  .unifiedSidebarBrand{
    padding-left:56px !important;
    background:linear-gradient(180deg,#0c1420 0%,#070d18 100%) !important;
  }

  /* Section labels no drawer */
  .unifiedNavSection{
    padding:14px 16px 4px !important;
  }

  /* Botões nav no drawer */
  .unifiedNavBtn{
    width:100% !important;
    min-height:40px !important;
    font-size:13px !important;
    font-weight:500 !important;
    padding:8px 16px !important;
    border-radius:0 !important;
    color:#4e6075 !important;
    background:transparent !important;
    gap:10px !important;
    position:relative !important;
  }
  .unifiedNavBtn:hover{
    color:#c5d4e8 !important;
    background:rgba(255,255,255,.04) !important;
  }
  .unifiedNavBtn.active{
    color:#2ecc7a !important;
    background:rgba(28,157,96,.1) !important;
    font-weight:600 !important;
  }
  .unifiedNavBtn.active::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    height:54% !important;
    width:3px !important;
    background:#1db974 !important;
    border-radius:0 3px 3px 0 !important;
    box-shadow:0 0 12px rgba(29,185,116,.5) !important;
  }
  .unifiedNavIcon{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
    flex-shrink:0 !important;
    opacity:.45 !important;
    transition:opacity .12s !important;
  }
  .unifiedNavBtn:hover .unifiedNavIcon{ opacity:.7 !important; }
  .unifiedNavBtn.active .unifiedNavIcon{
    opacity:1 !important;
    color:#1c9d60 !important;
  }
  .unifiedNavIcon svg{
    width:16px !important;
    height:16px !important;
  }

  /* Divisor antes dos workspaces no drawer */
  .unifiedSidebar .unifiedNavBtn[data-unified-workspace="indicadores"]{
    margin-top:4px !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
  }

  /* Grids tablet (2–3 colunas) */
  .pfPanelGrid,
  #pf-visao-geral .pfPanelGrid{
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) !important;
  }
  .macroGrid,
  #workspace-indicadores .macroGrid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  .pfCardsGrid{
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) !important;
  }
  .pfCalendarWrap,
  .pfConfigGrid,
  .pfConfigMenu,
  .calcShell{
    grid-template-columns:1fr !important;
  }
}

/* ================================================================
   MOBILE — max-width: 680px
   Layout completamente diferente do desktop:
   · Barra fixa no topo (reaproveitando #workspace-nav como header)
   · Hamburger integrado ao topo
   · Subnav sticky abaixo do header
   · Conteúdo full-width em coluna única
   ================================================================ */
@media (max-width:680px){

  /* ── Container: padding-top = altura do header fixo ── */
  .container{
    padding:52px 0 32px !important;
  }

  /* ── Header fixo no topo (workspace bar reproposta como app bar) ── */
  #workspace-nav.workspaceBar{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:52px !important;
    padding:0 14px 0 56px !important;
    align-items:center !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none !important;
    background:#07080f !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    z-index:100 !important;
    margin:0 !important;
  }
  #workspace-nav.workspaceBar::-webkit-scrollbar{ display:none; }

  /* Abas de workspace no header */
  .workspaceBtn{
    flex-shrink:0 !important;
    padding:5px 14px !important;
    font-size:12.5px !important;
    font-weight:500 !important;
    border-radius:7px !important;
    height:32px !important;
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
  }

  /* ── Hamburger: encaixado sobre o header ── */
  .mobileMenuToggle{
    top:7px !important;
    left:10px !important;
    z-index:115 !important;
    width:38px !important;
    height:38px !important;
    border:none !important;
    background:transparent !important;
  }
  .mobileMenuToggle:hover{ background:rgba(255,255,255,.06) !important; }

  /* ── Workspace panel ── */
  .workspacePanel{
    padding:0 12px 4px !important;
  }

  /* ── Subnav PF: sticky abaixo do header ── */
  #pf-subnav{
    position:sticky !important;
    top:52px !important;
    z-index:90 !important;
    background:#07080f !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none !important;
    gap:4px !important;
    padding:8px 12px !important;
    margin:0 -12px !important;
  }
  #pf-subnav::-webkit-scrollbar{ display:none; }

  /* Override das regras desktop que ocultam o subnav */
  #workspace-pf > #pf-subnav{
    justify-content:flex-start !important;
    border:none !important;
    border-radius:0 !important;
    background:#07080f !important;
    box-shadow:0 3px 12px rgba(0,0,0,.45) !important;
    padding:8px 12px !important;
  }
  #workspace-pf > #pf-subnav .subnavBtn{
    display:inline-flex !important;
    flex-shrink:0 !important;
    padding:5px 12px !important;
    font-size:12px !important;
    border-radius:7px !important;
    white-space:nowrap !important;
    height:30px !important;
    align-items:center !important;
  }
  #pf-subnav .subnavRightControls{
    flex-shrink:0 !important;
    margin-left:auto !important;
  }

  /* ── Layouts de conteúdo mobile ── */

  /* Overview: hero coluna única */
  .pfQuickHero{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  /* Quick cards: 2 colunas */
  .pfQuickGrid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:7px !important;
  }
  #pf-visao-geral .pfQuickCard .v{ font-size:17px !important; }
  .pfQuickGreeting{ font-size:18px !important; }

  /* Quick actions: row wrap */
  #pf-visao-geral .pfQuickActionsBox{
    min-height:auto !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:8px !important;
    padding:10px 12px !important;
  }
  #pf-visao-geral .pfQuickActionsBox .ttl{
    width:100%;
    text-align:center;
  }

  /* Panel grid: coluna única */
  .pfPanelGrid,
  #pf-visao-geral .pfPanelGrid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* Tabela de lançamentos: scroll horizontal */
  #pf-lancamentos .pfTableWrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  #pf-lancamentos .pfTable{ min-width:560px !important; }

  /* Modais: coluna única */
  .finModalBody{ grid-template-columns:1fr !important; }
  .finModal#pf-card-modal #pfw-card-closing-day-wrap,
  .finModal#pf-card-modal #pfw-card-closing-offset-wrap,
  .finModal#pf-card-modal #pfw-card-due-day-wrap,
  .finModal#pf-card-modal #pfw-card-due-offset-wrap,
  .finModal#pf-card-modal #pfw-card-due-business-wrap{ grid-column:1 !important; }
  .finModalFoot{ flex-wrap:wrap !important; gap:8px !important; }

  /* Cards grid: coluna única */
  .pfCardsGrid{ grid-template-columns:1fr !important; }

  /* KPI grid: 2 colunas */
  .wsKpiGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }

  /* Investimentos */
  #pf-investimentos .invDashKpiGrid{ grid-template-columns:1fr !important; }

  /* Workspace head */
  .wsHead{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:12px !important;
  }
  .wsActions{ justify-content:flex-end !important; flex-wrap:wrap !important; }
  .wsFilterBar{ flex-wrap:wrap !important; gap:6px !important; }

  /* Documentação */
  #pf-documentacao .pfDocsMd pre{ font-size:12px !important; padding:12px 14px !important; }
  #pf-documentacao .pfDocsMd table{ display:block !important; overflow-x:auto !important; }
  #pf-documentacao .pfDocsContent{ padding:14px !important; }

  /* Previne zoom em inputs no iOS */
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], input[type="search"],
  select, textarea{ font-size:16px !important; }
}

/* ================================================================
   TABLET — min-width: 681px e max-width: 1024px
   ================================================================ */
@media (min-width:681px) and (max-width:1024px){
  .pfQuickHero{ grid-template-columns:1.55fr .72fr !important; }
  .pfQuickGrid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  .wsKpiGrid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}

/* ================================================================
   EXTRA PEQUENO — max-width: 420px
   ================================================================ */
@media (max-width:420px){
  .pfQuickGrid{ grid-template-columns:1fr !important; }
  .wsKpiGrid{ grid-template-columns:1fr !important; }
  .subnavBtn{ font-size:11px !important; padding:5px 9px !important; }
}