/* ==========================================================
   JUNTÔ — RESPONSIVIDADE MOBILE-FIRST
   Camada final de compatibilidade para celular, tablet e desktop
   ========================================================== */

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
button, [role="button"], .navitem, .site-nav-item { touch-action: manipulation; }

/* As telas de autenticação não exibem o cabeçalho principal do aplicativo.
   Mantém o cabeçalho contextual no fluxo normal para não cobrir os campos. */
body.auth-mode .auth-screen.active > .auth-topbar {
  position: relative;
  top: auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 18px;
  box-sizing: border-box;
}
body.auth-mode .auth-screen.active > .auth-topbar::before { display: none; }

@media (min-width: 721px) {
  html {
    height: 100%;
    overflow-y: hidden !important;
  }
  body {
    height: 100%;
    min-height: 100%;
    overflow-y: scroll !important;
  }
}

/* Estrutura principal: usa a altura real do navegador móvel. */
.app-shell {
  min-height: 100dvh !important;
  height: 100dvh !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Desktop: reserva o espaço do cabeçalho institucional fixo. */
@media (min-width: 1025px) {
  .app-shell {
    margin-top: 72px !important;
    min-height: calc(100dvh - 72px) !important;
    height: calc(100dvh - 72px) !important;
  }
}

/* Evento: mantém hierarquia e ações legíveis no celular */
@media (max-width: 720px) {
  #screen-evento .event-header {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px !important;
  }
  #screen-evento.event-readonly .event-header-actions { display: none !important; }
  #screen-evento .event-header-buttons { display: none !important; }
  #screen-evento .event-actions-menu-wrap { display: block !important; }
  #screen-evento .event-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #screen-evento .event-financial-status,
  #screen-evento .event-total-card {
    min-height: 126px;
    padding: 13px !important;
  }
}

@media (max-width: 390px) {
  #screen-evento .event-financial-status .amount,
  #screen-evento .event-total-card > strong { font-size: 17px; }
}
.screen {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 1440px !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.screen > *, .content > *, .panel-heading > *, .topbar > * { min-width: 0; }

/* Conteúdos longos nunca forçam a largura da tela. */
.title, .note, p, strong, small, span, h1, h2, h3 { overflow-wrap: anywhere; }
.event-filter-group, .event-tabs, .segmented, .finance-filter-group {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.event-filter-group::-webkit-scrollbar, .event-tabs::-webkit-scrollbar,
.segmented::-webkit-scrollbar, .finance-filter-group::-webkit-scrollbar { display: none; }

/* Áreas clicáveis adequadas para toque. */
.btn, .iconbtn, .chip, .seg, .finance-filter, .site-nav-item,
.home-new-event-action, .home-new-expense-action, .participants-add-contact {
  min-height: 44px;
}
.iconbtn { min-width: 44px; }
input, select, textarea, .input { font-size: 16px; }

/* Modais responsivos e compatíveis com teclado virtual. */
.modal-overlay {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  overflow-y: auto;
  align-items: center;
}
.modal-card {
  width: min(100%, 620px) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  margin: auto;
}

/* Navegação inferior para app. */
.bottomnav {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}
.navitem { min-width: 0; }

/* Tabelas e listas complexas passam para cartões no mobile. */
@media (max-width: 820px) {
  .site-header { position: sticky !important; top: 0; z-index: 80; }
  .header-inner { min-width: 0; }
  .header-actions { gap: 6px; }
  .version-badge { display: none; }

  .screen {
    --screen-inline-gutter:clamp(12px, 4vw, 20px);
    padding-left: clamp(12px, 4vw, 20px) !important;
    padding-right: clamp(12px, 4vw, 20px) !important;
    padding-top: 16px !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
  .content, .topbar, .action-bar {
    width: 100%;
    min-width: 0;
  }
  .topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px !important;
  }
  .topbar .title { font-size: clamp(16px, 4.8vw, 20px); }

  .v2-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .event-grid, .finance-summary, .event-overview-grid,
  .event-summary-grid, .expense-detail-grid, .participant-finance-kpis,
  .contact-form-grid, .manual-participant-grid, .compact-invite-grid {
    grid-template-columns: 1fr !important;
  }

  .event-tabs, .segmented, .event-filter-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    width: 100%;
    max-width: 100%;
    padding-bottom: 2px;
  }
  .event-tabs .seg, .segmented .seg, .event-filter-group button {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  .expense-row {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px 10px !important;
    align-items: start !important;
  }
  .expense-row .expense-select, .expense-row > input[type="checkbox"] { grid-column: 1; grid-row: 1; }
  .expense-row .avatar, .expense-row .expense-avatar { grid-column: 1; grid-row: 2 / span 2; }
  .expense-row .expense-main, .expense-row .expense-info { grid-column: 2; }
  .expense-row .expense-value, .expense-row .expense-status-column { grid-column: 3 !important; }
  .expense-row .expense-category, .expense-row .expense-date,
  .expense-row .expense-payer { grid-column: 2 !important; }

  .participants-directory-tools { width: 100%; min-width: 0; }
  .participants-directory-tools .participants-search-wrap { min-width: 0 !important; width: 100%; }

  .modal-overlay { align-items: flex-end; padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .modal-card {
    width: 100% !important;
    max-height: min(88dvh, 760px);
    border-radius: 20px 20px 0 0 !important;
    margin: auto 0 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .modal-head { position: sticky; top: 0; z-index: 2; background: inherit; }
}

@media (max-width: 560px) {
  .site-header { height: 58px !important; }
  .header-inner { padding: 0 12px !important; }
  .site-logo { width: auto !important; max-width: 116px !important; }
  .header-theme { width: 40px; height: 40px; }
  .user-profile { padding: 0 !important; }
  .avatar-account { width: 38px; height: 38px; }

  .v2-welcome h1 { font-size: clamp(25px, 8vw, 32px) !important; }
  .v2-welcome p { line-height: 1.5; }
  .v2-kpi-grid { gap: 10px !important; }
  .v2-kpi { min-height: 104px !important; padding: 13px !important; }
  .v2-kpi strong { font-size: clamp(16px, 4.8vw, 20px) !important; }

  .events-panel, .finance-statement-panel, .participant-finance-panel,
  .content, .card, .panel { border-radius: 14px; }
  .events-panel { padding: 13px !important; }

  #screen-eventos .panel-heading { gap: 10px !important; }
  #screen-eventos .home-event-actions { grid-template-columns: 1fr 1fr !important; }
  #screen-eventos .home-new-event-action,
  #screen-eventos .home-new-expense-action {
    padding: 0 10px !important;
    font-size: 12px;
  }

  .finance-filter-group { grid-template-columns: repeat(3, minmax(92px, 1fr)) !important; overflow-x: auto; }
  .finance-entry { grid-template-columns: 38px minmax(0, 1fr) auto !important; }
  .finance-entry-total { grid-column: 2; text-align: left !important; }
  .finance-entry-value { grid-column: 3; grid-row: 1 / -1; text-align: right !important; }

  .participant-directory-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
  /* A seta fica na 3a coluna: com duas colunas ela caia sozinha numa linha
     extra, recortada no canto de baixo e parecendo uma vírgula solta. */
  .participant-finance-relation {
    grid-template-columns: 38px minmax(0, 1fr) 16px !important;
  }
  .participant-directory-actions {
    grid-column: 2 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }
  .participant-finance-relation-value {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }
  .participant-finance-relation > .icon {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
  }

  .contact-modal-actions, .action-bar, .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .contact-modal-actions .btn, .action-bar .btn, .form-actions .btn { width: 100% !important; }

  .bottomnav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: auto !important;
    min-height: 64px;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .navitem {
    width: auto !important;
    min-height: 56px !important;
    padding: 7px 2px !important;
    gap: 3px !important;
    font-size: 10px !important;
  }
  .navitem .icon { width: 21px; height: 21px; }
  .navitem span { font-size: 9px !important; line-height: 1.1; }
}

@media (max-width: 390px) {
  .screen { padding-left: 10px !important; padding-right: 10px !important; }
  .v2-kpi-grid { grid-template-columns: 1fr !important; }
  .v2-kpi { min-height: 82px !important; display: flex !important; }
  #screen-eventos .home-event-actions { grid-template-columns: 1fr !important; }
  .modal-card { border-radius: 16px 16px 0 0 !important; }
}

/* Desktop: restaura navegação superior e mantém conteúdo fluido. */
@media (min-width: 821px) {
  .bottomnav { display: none !important; }
  .screen { padding-bottom: 56px !important; }
  .app-shell { display: block !important; }
}

/* Orientação paisagem em celulares baixos. */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { height: 50px !important; }
  .screen { padding-top: 10px !important; padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .bottomnav { min-height: 52px; }
  .navitem { min-height: 46px !important; flex-direction: row !important; }
  .modal-card { max-height: 94dvh; }
}

/* ==========================================================
   JUNTÔ — AJUSTES DE RESPONSIVIDADE POR DISPOSITIVO
   Tablet: menu completo | Tablet mini: ícones | Celular: rodapé fixo
   ========================================================== */

/* Tablet normal: cabeçalho fixo em uma linha, com ícones e textos. */
@media (min-width: 721px) and (max-width: 1024px) {
  :root { --app-header-height: 72px; }
  .site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 72px !important;
    z-index: 1000 !important;
  }
  .header-inner {
    width: 100% !important;
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) auto !important;
    grid-template-areas: "brand nav actions" !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .brand-button { grid-area: brand !important; }
  .site-logo { width: 112px !important; max-width: 112px !important; }
  .site-header .site-nav {
    grid-area: nav !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .site-header .nav-inner {
    width: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  .site-header .site-nav-item {
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 clamp(5px, 1vw, 10px) !important;
    gap: 5px !important;
    font-size: clamp(9px, 1.25vw, 11px) !important;
  }
  .site-header .site-nav-item span:not(.menu-dot) { display: inline !important; }
  .site-header .site-nav-item .icon { width: 17px !important; height: 17px !important; }
  .header-actions { grid-area: actions !important; }
  .header-theme { width: 38px !important; height: 38px !important; }
  .user-copy { display: none !important; }
  .user-profile { padding: 4px !important; }
  .avatar-account { width: 36px !important; height: 36px !important; }
  .app-shell {
    margin-top: 72px !important;
    min-height: calc(100dvh - 72px) !important;
    height: calc(100dvh - 72px) !important;
  }
  .screen { padding-bottom: 32px !important; }
  .bottomnav { display: none !important; }
}

/* Tablet mini: cabeçalho fixo, menu reduzido somente aos ícones. */
@media (min-width: 561px) and (max-width: 720px) {
  :root { --app-header-height: 64px; }
  .site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 64px !important;
    z-index: 1000 !important;
  }
  .header-inner {
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 12px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    grid-template-areas: "brand nav actions" !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .brand-button { grid-area: brand !important; }
  .site-logo {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    object-fit: cover !important;
    object-position: left center !important;
  }
  .site-header .site-nav {
    grid-area: nav !important;
    display: block !important;
    min-width: 0 !important;
  }
  .site-header .nav-inner {
    width: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: visible !important;
  }
  .site-header .site-nav-item {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }
  .site-header .site-nav-item span:not(.menu-dot) { display: none !important; }
  .site-header .site-nav-item .icon { width: 20px !important; height: 20px !important; }
  .header-actions { grid-area: actions !important; gap: 5px !important; }
  .header-theme { width: 36px !important; height: 36px !important; }
  .user-copy { display: none !important; }
  .user-profile { padding: 3px !important; }
  .avatar-account { width: 34px !important; height: 34px !important; }
  .app-shell {
    margin-top: 64px !important;
    min-height: calc(100dvh - 64px) !important;
    height: calc(100dvh - 64px) !important;
  }
  .screen { padding-bottom: 28px !important; }
  .bottomnav { display: none !important; }
}

/* Celular: cabeçalho e menu inferior sempre fixos. */
@media (max-width: 560px) {
  :root { --app-header-height: 58px; }
  .site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 58px !important;
    z-index: 1000 !important;
  }
  .header-inner {
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 12px !important;
    display: flex !important;
    justify-content: space-between !important;
  }
  .site-header .site-nav { display: none !important; }
  .site-logo { width: 112px !important; max-width: 112px !important; }
  .app-shell {
    margin-top: 58px !important;
    min-height: calc(100dvh - 58px) !important;
    height: calc(100dvh - 58px) !important;
  }
  .screen {
    padding-top: 14px !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .bottomnav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 64px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  /* Resumo financeiro compacto em uma única linha. */
  #screen-eventos .v2-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #screen-eventos .v2-kpi {
    min-width: 0 !important;
    min-height: 72px !important;
    height: 72px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }
  #screen-eventos .v2-kpi:nth-child(3) { display: none !important; }
  #screen-eventos .v2-kpi-icon {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border-radius: 9px !important;
  }
  #screen-eventos .v2-kpi-icon .icon { width: 16px !important; height: 16px !important; }
  #screen-eventos .v2-kpi > div { min-width: 0 !important; }
  #screen-eventos .v2-kpi small {
    display: block !important;
    margin: 0 0 2px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #screen-eventos .v2-kpi strong {
    display: block !important;
    margin: 0 !important;
    font-size: clamp(14px, 4.2vw, 17px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #screen-eventos .v2-kpi em { display: none !important; }
}

@media (max-width: 350px) {
  #screen-eventos .v2-kpi { padding: 8px !important; grid-template-columns: 26px minmax(0, 1fr) !important; gap: 6px !important; }
  #screen-eventos .v2-kpi-icon { width: 26px !important; height: 26px !important; }
  #screen-eventos .v2-kpi strong { font-size: 13px !important; }
  #screen-eventos .v2-kpi small { font-size: 8px !important; }
}

/* V2.1.2 — preserva proporção dos novos arquivos de marca */
.site-logo-set{flex:0 0 auto}
.site-logo-set .site-logo{width:auto!important;max-width:190px!important;height:auto!important}
@media(max-width:1024px){.site-logo-set .site-logo{max-width:156px!important}}
@media(max-width:680px){.site-logo-set .site-logo{max-width:116px!important}}


/* V2.2.2 — filtro de Meus eventos em menu hambúrguer no celular */
.mobile-event-filter-wrap{display:none}
@media (max-width:560px){
  #screen-eventos .panel-heading{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:start!important;
  }
  #screen-eventos .events-heading-block{width:100%;min-width:0}
  #screen-eventos .events-title-row{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
  }
  #screen-eventos .events-title-row>div:first-child{min-width:0}
  #screen-eventos .events-title-row h2{margin:0}
  #screen-eventos .mobile-event-filter-wrap{
    display:block;
    position:relative;
    flex:0 0 auto;
    z-index:30;
  }
  #screen-eventos .mobile-event-filter-toggle{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    cursor:pointer;
  }
  #screen-eventos .mobile-event-filter-toggle .icon{width:21px;height:21px}
  #screen-eventos .mobile-event-filter-toggle[aria-expanded="true"]{
    color:var(--accent2);
    border-color:var(--accent2);
    background:color-mix(in srgb,var(--accent2) 10%,var(--surface));
  }
  #screen-eventos .mobile-event-filter-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:min(220px,calc(100vw - 32px));
    padding:7px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface);
    box-shadow:0 18px 44px rgba(0,0,0,.28);
    z-index:100;
  }
  #screen-eventos .mobile-event-filter-menu[hidden]{display:none!important}
  #screen-eventos .mobile-event-filter-menu .mobile-home-filter{
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 12px!important;
    display:flex!important;
    justify-content:space-between!important;
    border-radius:9px!important;
    box-shadow:none!important;
  }
  #screen-eventos .mobile-event-filter-menu .mobile-home-filter+ .mobile-home-filter{margin-top:4px}
  #screen-eventos .home-toolbar .event-filter-group{display:none!important}
  #screen-eventos .home-toolbar{
    display:block!important;
    width:100%!important;
  }
  #screen-eventos .home-event-actions{
    display:flex!important;
    width:100%!important;
    justify-content:flex-end!important;
    gap:8px!important;
  }
}

/* V2.2.3 — ações de Meus eventos com larguras iguais no celular */
@media (max-width:560px){
  #screen-eventos .home-event-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    align-items:stretch!important;
  }
  #screen-eventos .home-event-actions .home-new-expense-action,
  #screen-eventos .home-event-actions .home-new-event-action{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding-inline:8px!important;
    justify-content:center!important;
  }
}
/* Em telas muito estreitas "Novo planejamento" não cabe com o ícone; sem
   isto o ícone é espremido só nesse botão. Os dois ficam sem ícone. */
@media (max-width:350px){
  #screen-eventos .home-event-actions .icon{display:none!important}
}

/* V2.2.4 — ações úteis no lado direito dos cards de evento no celular */
.event-list-mobile-side{display:none}
@media (max-width:820px){
  #home-event-grid .event-list-actions{display:none!important}
}
@media (max-width:560px){
  #home-event-grid .event-list-row{
    grid-template-columns:38px minmax(0,1fr) minmax(92px,104px)!important;
    grid-template-areas:
      "icon main side"
      "icon total side"!important;
    align-items:start!important;
    gap:5px 8px!important;
    min-height:126px!important;
    padding:11px 9px!important;
  }
  #home-event-grid .event-list-icon{
    grid-area:icon!important;
    width:36px!important;
    height:36px!important;
    border-radius:10px!important;
  }
  #home-event-grid .event-list-icon .icon{width:19px!important;height:19px!important}
  #home-event-grid .event-list-main{
    grid-area:main!important;
    display:block!important;
    min-width:0!important;
    padding-top:1px!important;
  }
  #home-event-grid .event-list-title h3{
    margin-bottom:3px!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
  #home-event-grid .event-list-title p{
    font-size:8.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  #home-event-grid .event-list-metric.event-total{
    grid-area:total!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:3px 5px!important;
    min-width:0!important;
    padding-top:2px!important;
  }
  #home-event-grid .event-list-metric.event-total span{font-size:8px!important}
  #home-event-grid .event-list-metric.event-total strong{font-size:10px!important}
  #home-event-grid .event-list-mobile-side{
    grid-area:side!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:6px!important;
    min-width:0!important;
  }
  #home-event-grid .event-list-mobile-side>.event-status{
    position:static!important;
    display:flex!important;
    justify-content:center!important;
    width:100%!important;
    min-height:22px!important;
    padding:4px 5px!important;
    border-radius:7px!important;
    font-size:7.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #home-event-grid .event-list-mobile-side>.status-active{
    color:var(--status-active-ink)!important;
    background:color-mix(in srgb,var(--status-active) 14%,transparent)!important;
  }
  #home-event-grid .event-list-mobile-side>.status-planning{
    color:var(--status-planning-ink)!important;
  }
  #home-event-grid .event-list-mobile-actions{
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
  }
  #home-event-grid .mobile-event-action{
    width:100%!important;
    min-height:25px!important;
    display:grid!important;
    grid-template-columns:13px minmax(0,1fr)!important;
    align-items:center!important;
    gap:4px!important;
    padding:4px 5px!important;
    border:1px solid var(--border)!important;
    border-radius:7px!important;
    background:var(--surface-alt)!important;
    color:var(--ink-secondary)!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  #home-event-grid .mobile-event-action .icon{width:12px!important;height:12px!important}
  #home-event-grid .mobile-event-action span{
    min-width:0!important;
    font-size:7.5px!important;
    font-weight:700!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  #home-event-grid .mobile-event-action.action-finish{color:#35b98b!important}
  #home-event-grid .mobile-event-action.action-settings{color:var(--accent2)!important}
  #home-event-grid .mobile-event-action.action-delete{color:#ef6b78!important}
  #home-event-grid .event-list-mobile-status,
  #home-event-grid .event-list-chevron{display:none!important}
}
@media (max-width:350px){
  #home-event-grid .event-list-row{
    grid-template-columns:34px minmax(0,1fr) 88px!important;
    gap:5px 6px!important;
    padding-inline:7px!important;
  }
  #home-event-grid .event-list-icon{width:32px!important;height:32px!important}
  #home-event-grid .mobile-event-action span{font-size:7px!important}
}

/* V2.2.5 — ações rápidas compactas nos cards de evento no celular */
@media (max-width:560px){
  #home-event-grid .event-list-row{
    grid-template-columns:38px minmax(0,1fr) 94px!important;
    grid-template-areas:
      "icon main side"
      "icon total side"!important;
    min-height:82px!important;
    padding:10px 9px!important;
    align-items:center!important;
  }
  #home-event-grid .event-list-mobile-side{
    align-self:start!important;
    align-items:flex-end!important;
    gap:5px!important;
    width:94px!important;
  }
  #home-event-grid .event-list-mobile-side>.event-status{
    width:auto!important;
    max-width:94px!important;
    min-height:18px!important;
    padding:3px 6px!important;
    border-radius:999px!important;
    font-size:7px!important;
  }
  #home-event-grid .event-list-mobile-actions{
    display:grid!important;
    grid-template-columns:repeat(3,24px)!important;
    justify-content:end!important;
    gap:4px!important;
    width:100%!important;
  }
  #home-event-grid .mobile-event-action{
    width:24px!important;
    height:24px!important;
    min-height:24px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:7px!important;
    text-align:center!important;
  }
  #home-event-grid .mobile-event-action .icon{
    width:12px!important;
    height:12px!important;
    margin:0!important;
  }
  #home-event-grid .mobile-event-action span{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  #home-event-grid .mobile-event-action.action-finish{
    background:color-mix(in srgb,#35b98b 10%,var(--surface-alt))!important;
    border-color:color-mix(in srgb,#35b98b 28%,var(--border))!important;
  }
  #home-event-grid .mobile-event-action.action-settings{
    background:color-mix(in srgb,var(--accent2) 10%,var(--surface-alt))!important;
    border-color:color-mix(in srgb,var(--accent2) 28%,var(--border))!important;
  }
  #home-event-grid .mobile-event-action.action-delete{
    background:color-mix(in srgb,#ef6b78 10%,var(--surface-alt))!important;
    border-color:color-mix(in srgb,#ef6b78 28%,var(--border))!important;
  }
}
@media (max-width:350px){
  #home-event-grid .event-list-row{
    grid-template-columns:34px minmax(0,1fr) 88px!important;
  }
  #home-event-grid .event-list-mobile-side{width:88px!important}
  #home-event-grid .event-list-mobile-actions{grid-template-columns:repeat(3,23px)!important;gap:3px!important}
  #home-event-grid .mobile-event-action{width:23px!important;height:23px!important;min-height:23px!important}
}
/* V2.2.6 — criação de evento compacta */
#screen-criar{
  max-width:860px;
  margin-inline:auto;
}
#screen-criar .create-event-topbar,
#screen-criar .create-event-content,
#screen-criar .create-event-actions{
  width:min(100%,760px);
  margin-inline:auto;
}
#screen-criar .create-event-topbar{
  min-height:52px;
  margin-bottom:14px;
}
#screen-criar .create-event-topbar .title{
  font-size:22px;
}
#screen-criar .create-event-content{
  flex:none;
  padding-bottom:18px;
  border-radius:0;
  background:transparent !important;
}
#screen-criar .create-field{
  display:grid;
  gap:7px;
}
#screen-criar .field-label{
  margin:18px 0 7px;
  font-size:13px;
  font-weight:750;
}
#screen-criar .create-field .field-label{
  margin-top:0;
}
#screen-criar #new-event-name{
  min-height:50px;
}
#screen-criar .chip-row{
  gap:8px;
  margin-bottom:0;
}
#screen-criar .chip{
  min-height:42px;
  padding:0 13px;
  border-radius:11px;
}
#screen-criar .date-range-fields{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#screen-criar .date-field{
  gap:6px;
}
#screen-criar .date-input{
  width:100%;
  min-width:0;
  min-height:50px;
  padding-inline:12px;
}
#screen-criar .optional-participants-card{
  margin-top:20px;
  padding:0;
  border:0;
  background:transparent;
}
#screen-criar .create-participants-toggle{
  width:100%;
  min-height:66px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto 18px;
  gap:11px;
  align-items:center;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  text-align:left;
  font:inherit;
  cursor:pointer;
}
#screen-criar .create-participants-toggle:hover{
  border-color:var(--primary);
  background:var(--surface-alt);
}
#screen-criar .create-participants-plus{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--surface-alt);
  color:var(--primary);
}
#screen-criar .create-participants-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
#screen-criar .create-participants-copy strong{
  font-size:14px;
}
#screen-criar .create-participants-copy small{
  color:var(--ink-secondary);
  font-size:11px;
  line-height:1.3;
}
#screen-criar .participant-count-badge{
  padding:5px 8px;
}
#screen-criar .create-participants-chevron{
  color:var(--ink-secondary);
  transform:rotate(-90deg);
  transition:transform .18s ease;
}
#screen-criar .create-participants-toggle[aria-expanded="true"] .create-participants-chevron{
  transform:rotate(90deg);
}
#screen-criar .new-event-invite-panel{
  margin-top:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
#screen-criar .new-event-participant-list:not(:empty){
  margin-top:10px;
}
body.creating-event #bottomnav{
  display:none !important;
}
body.invite-flow-screen #bottomnav{
  display:none !important;
}

@media(max-width:760px){
  body.creating-event #screen-criar{
    padding:12px 14px calc(92px + env(safe-area-inset-bottom)) !important;
  }
  #screen-criar .create-event-topbar{
    position:sticky;
    top:calc(var(--app-header-height,58px) + 12px);
    z-index:20;
    padding:7px 0 !important;
    background:var(--v2-bg) !important;
  }
  #screen-criar .create-event-content{
    padding-bottom:6px;
  }
  #screen-criar .field-label{
    margin-top:15px;
  }
  #screen-criar .chip-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  #screen-criar .chip{
    width:100%;
    min-width:0;
    justify-content:center;
    padding-inline:8px;
  }
  #screen-criar .create-event-actions{
    position:fixed;
    z-index:90;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    background:color-mix(in srgb,var(--v2-bg) 94%,transparent);
    backdrop-filter:blur(14px);
  }
  #screen-criar .create-event-actions .create-cancel-action{
    display:none;
  }
  #screen-criar .create-event-actions .btn-primary{
    width:min(100%,520px) !important;
    min-height:50px;
    flex:none;
    margin-inline:auto;
  }
}

@media(max-width:390px){
  #screen-criar .create-participants-toggle{
    grid-template-columns:36px minmax(0,1fr) 18px;
  }
  #screen-criar .participant-count-badge{
    display:none;
  }
}

@media(max-width:350px){
  #screen-criar .date-range-fields{
    grid-template-columns:1fr;
  }
}

/* Evento: linha compacta de despesa sem sobreposição */
@media(max-width:720px){
  .screen:has(>.topbar),
  #screen-evento{
    padding-top:12px !important;
  }
  #screen-evento .event-financial-status,
  #screen-evento .event-total-card{
    min-height:104px !important;
    padding:13px !important;
  }
  #screen-evento .expense-row{
    display:grid !important;
    grid-template-columns:32px 36px minmax(0,1fr) 82px !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    gap:8px !important;
    padding:13px 0 !important;
  }
  #screen-evento .expense-date{
    grid-column:1 !important;
    grid-row:1 !important;
    width:32px !important;
  }
  #screen-evento .expense-tile{
    grid-column:2 !important;
    grid-row:1 !important;
    width:36px !important;
    height:36px !important;
  }
  #screen-evento .expense-mid{
    grid-column:3 !important;
    grid-row:1 !important;
    min-width:0;
  }
  #screen-evento .expense-mid .name,
  #screen-evento .expense-mid .meta{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #screen-evento .expense-status-column{
    grid-column:4 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:end;
    padding:0 !important;
  }
  #screen-evento .expense-status{
    min-width:0 !important;
    width:82px;
    max-width:82px;
    align-items:flex-end !important;
    flex-direction:column !important;
    gap:2px !important;
    text-align:right !important;
  }
  #summary-expense-list .expense-row{
    grid-template-columns:32px 36px minmax(0,1fr) 82px !important;
    grid-template-rows:auto auto !important;
  }
  #summary-expense-list .summary-expense-actions{
    display:flex !important;
    grid-column:3 / 5 !important;
    grid-row:2 !important;
    justify-content:flex-end;
    padding-top:6px;
  }
  #screen-evento .summary-debt-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }
  #screen-evento .debt-kpis{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }
  .header-actions{
    gap:6px !important;
  }
  .header-theme,
  .header-alerts{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px;
  }
  .header-alerts{
    display:none !important;
  }
  .bottomnav{
    position:fixed !important;
  }
  .global-expense-fab{
    bottom:calc(91px + env(safe-area-inset-bottom)) !important;
  }
  .history-selection-bar{
    bottom:calc(91px + env(safe-area-inset-bottom)) !important;
    z-index:1001 !important;
  }
  .app-toast{
    bottom:calc(91px + env(safe-area-inset-bottom)) !important;
  }
  #screen-despesa .expense-value-date-grid,
#screen-plan-tarefa .expense-value-date-grid,
#screen-plan-item .expense-value-date-grid,
#screen-plan-pagamento .expense-value-date-grid,
#screen-planejamento .expense-value-date-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(150px,.95fr) !important;
    gap:8px !important;
  }
  #screen-despesa .expense-icon-picker,
#screen-plan-item .expense-icon-picker,
#screen-plan-pagamento .expense-icon-picker,
#screen-planejamento .expense-icon-picker{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  #screen-despesa .expense-value-date-grid .field-label,
#screen-plan-tarefa .expense-value-date-grid .field-label,
#screen-plan-item .expense-value-date-grid .field-label,
#screen-plan-pagamento .expense-value-date-grid .field-label,
#screen-planejamento .expense-value-date-grid .field-label{
    margin-top:14px;
    margin-bottom:7px;
  }
  #screen-despesa .currency-input{
    min-width:0;
    min-height:52px;
    padding-inline:11px;
    font-size:18px;
  }
  #screen-despesa .expense-date-input-wrap,
#screen-plan-tarefa .expense-date-input-wrap,
#screen-plan-item .expense-date-input-wrap,
#screen-plan-pagamento .expense-date-input-wrap,
#screen-planejamento .expense-date-input-wrap{
    grid-template-columns:32px minmax(0,1fr);
  }
  #screen-despesa .expense-date-input-wrap .date-input,
#screen-plan-tarefa .expense-date-input-wrap .date-input,
#screen-plan-item .expense-date-input-wrap .date-input,
#screen-plan-pagamento .expense-date-input-wrap .date-input,
#screen-planejamento .expense-date-input-wrap .date-input{
    min-width:0;
    padding-inline:5px;
    font-size:12px;
  }
  #screen-despesa .expense-date-input-wrap small,
#screen-plan-tarefa .expense-date-input-wrap small,
#screen-plan-item .expense-date-input-wrap small,
#screen-plan-pagamento .expense-date-input-wrap small,
#screen-planejamento .expense-date-input-wrap small{
    left:37px;
  }
  #screen-despesa>.action-bar,
#screen-plan-tarefa>.action-bar,
#screen-plan-item>.action-bar,
#screen-plan-pagamento>.action-bar,
  #screen-despesa>.form-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    flex-direction:initial !important;
    gap:8px !important;
  }
  #screen-financeiro .finance-summary{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }
  #screen-financeiro .finance-balance-card{
    grid-column:1/-1 !important;
  }
}

/* V2.5.4 — cabeçalho do evento legível em qualquer largura de celular. */
@media (max-width:560px){
  #screen-evento .event-tabs{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    overflow:visible !important;
  }
  #screen-evento .event-tabs .seg{
    width:auto !important;
    min-width:0 !important;
    padding-inline:4px !important;
    font-size:clamp(9px,2.55vw,11px) !important;
  }
}

@media (max-width:350px){
  #screen-evento .event-tabs{
    display:flex !important;
    overflow-x:auto !important;
    scroll-snap-type:x proximity;
  }
  #screen-evento .event-tabs .seg{
    flex:0 0 76px !important;
    scroll-snap-align:start;
  }
}

/* Tablet compacto: mantém cada despesa em uma linha sem herdar o grid genérico. */
@media (min-width:561px) and (max-width:820px){
  #screen-evento .expense-row{
    display:grid !important;
    grid-template-columns:42px 44px minmax(0,1fr) 120px !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    gap:10px !important;
  }
  #screen-evento .expense-date{grid-column:1 !important;grid-row:1 !important;width:42px !important}
  #screen-evento .expense-tile{grid-column:2 !important;grid-row:1 !important;width:42px !important;height:42px !important}
  #screen-evento .expense-mid{grid-column:3 !important;grid-row:1 !important;min-width:0 !important}
  #screen-evento .expense-status-column{
    grid-column:4 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:end !important;
    padding:0 !important;
  }
  #screen-evento .expense-status{
    width:120px !important;
    min-width:0 !important;
    align-items:flex-end !important;
    text-align:right !important;
  }
  #summary-expense-list .expense-row{grid-template-rows:auto auto !important}
  #summary-expense-list .summary-expense-actions{
    display:flex !important;
    grid-column:3 / 5 !important;
    grid-row:2 !important;
    justify-content:flex-end !important;
    padding-top:6px !important;
  }
}

/* Celular: a busca de participantes ficava achatada (flex:1 numa coluna
   encolhia a altura de 44px), e campos com fonte abaixo de 16px fazem o
   iPhone dar zoom sozinho ao tocar. */
@media(max-width:720px){
  .participants-directory-tools .participants-search-wrap{flex:none;height:44px}
  .participants-search-wrap input{font-size:16px}
  #search-input{font-size:16px!important}
  /* Nome de evento comprido numa linha sem quebra esticava a coluna e o
     cartão passava da tela; agora o texto é cortado com reticências. */
  .participants-directory-grid{grid-template-columns:minmax(0,1fr)}
  .participant-directory-card{min-width:0}
}