/*
 * DashNOX 4.0.5 · Mobile Refresh
 * Camada visual exclusivamente mobile. Mantem a identidade/cores existentes,
 * reduz scroll, melhora hierarquia e transforma a interface em um painel mais compacto.
 */
@media (max-width: 860px) {
  :root {
    --mobile-gutter: clamp(9px, 2.7vw, 13px);
    --mobile-radius: 15px;
    --mobile-nav-space: calc(88px + env(safe-area-inset-bottom));
  }

  html { scroll-padding-bottom: var(--mobile-nav-space); }

  body {
    background-attachment: fixed;
  }

  .main-content {
    padding:
      max(8px, env(safe-area-inset-top))
      var(--mobile-gutter)
      var(--mobile-nav-space) !important;
  }

  /* Header vira uma barra de marca compacta em vez de consumir a primeira dobra. */
  .hero-header {
    min-height: 58px !important;
    margin-bottom: 7px !important;
    padding: 9px 58px 9px 12px !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
  }

  .hero-copy { display: flex; align-items: center; min-height: 38px; }
  .hero-badge, .hero-description, .hero-logo-wrap { display: none !important; }
  .brand-title {
    margin: 0 !important;
    font-size: clamp(1.38rem, 6vw, 1.7rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em;
  }

  .mobile-account { top: max(15px, env(safe-area-inset-top)) !important; }
  .mobile-account-button {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  /* Titulo da area atual, sem segundo hero empilhado. */
  .module-switcher-panel {
    min-height: 42px !important;
    margin-bottom: 8px !important;
    padding: 8px 11px !important;
    border-radius: 13px !important;
  }
  .module-switcher-panel h2 {
    font-size: 1rem !important;
    letter-spacing: -0.01em;
  }

  /* Ritmo vertical mais apertado, mantendo o visual premium. */
  .panel,
  .chart-panel,
  .table-panel,
  .settings-panel,
  .goals-panel,
  .module-functional-panel,
  .module-placeholder-panel,
  .insight-panel {
    padding: 12px !important;
    border-radius: 15px !important;
  }

  .toolbar-panel {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .panel,
  .chart-panel,
  .table-panel,
  .toolbar-panel,
  .cards-grid,
  .cards-grid-main,
  .summary-grid,
  .goals-panel {
    margin-bottom: 8px !important;
  }

  .panel-header, .panel-header-split { margin-bottom: 9px !important; }
  .panel-header h2,
  .module-functional-panel .panel-header h2,
  .goals-panel .panel-header h2 {
    font-size: 1.08rem !important;
  }
  .panel-eyebrow { font-size: .66rem !important; }
  .panel-description, .goals-helper, .field-hint, .stat-footnote {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  /* KPIs voltam a aproveitar a largura do celular: duas colunas de verdade. */
  .cards-grid,
  .cards-grid-main,
  .summary-grid,
  .module-mini-grid,
  .goals-progress-grid,
  .goals-form-grid,
  .today-kpi-strip,
  .bet-core-kpis,
  .bet-core-cash-grid,
  .club365-kpi-grid,
  .club365-result-grid,
  .club365-tier-status {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .cards-grid-main .stat-card:first-child { grid-column: 1 / -1 !important; }
  .stat-card {
    min-height: 88px !important;
    padding: 11px !important;
    border-radius: 13px !important;
  }
  .stat-card-featured { min-height: 98px !important; }
  .stat-label { font-size: .72rem !important; }
  .stat-value, .stat-value.small {
    font-size: clamp(1.15rem, 5.8vw, 1.55rem) !important;
    line-height: 1.05 !important;
  }
  .stat-footnote { margin-top: 5px !important; }

  /* Tabs parecem controle segmentado e ocupam menos altura. */
  .finance-internal-tabs,
  .bet-core-tabs,
  .automation-tabs,
  [role="tablist"] {
    margin-bottom: 8px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }
  .finance-internal-tabs > button,
  .bet-core-tabs > button,
  .automation-tabs > button,
  [role="tablist"] > button {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: .78rem !important;
  }

  /* Formularios: mais dados por dobra sem sacrificar toque. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
  select, textarea {
    min-height: 42px !important;
  }
  textarea { min-height: 82px !important; }
  button, .primary-button, .secondary-button, .danger-button, .edit-button, .icon-button {
    min-height: 40px;
  }
  .form-grid,
  .transaction-form,
  .settings-form-grid,
  .theme-custom-grid {
    gap: 8px !important;
  }
  .form-actions,
  .settings-actions,
  .monthly-closing-actions,
  .bet-core-modal-actions,
  .modal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  /* Financeiro: filtros numa faixa compacta 2xN. */
  .filters-inline,
  #transactions-section .table-filters-extended,
  #transactions-section .table-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .filter-group label { font-size: .72rem !important; }
  #openModalButton { min-height: 44px !important; }

  /* Hoje: transforma a tela inicial num dashboard e nao numa lista infinita. */
  .today-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 11px !important;
  }
  .today-header h2 { margin: 0 !important; font-size: 1.1rem !important; }
  .today-subtitle { display: none !important; }
  .today-date-control {
    grid-template-columns: 38px minmax(0, 1fr) 38px auto !important;
    gap: 6px !important;
  }
  .today-date-control button,
  .today-date-control input { min-height: 38px !important; height: 38px !important; }
  .today-kpi-strip article {
    min-width: 0 !important;
    min-height: 84px !important;
    padding: 11px !important;
    border-radius: 13px !important;
  }
  .today-kpi-strip article span { font-size: .7rem !important; }
  .today-kpi-strip article strong { font-size: clamp(1.05rem, 5vw, 1.35rem) !important; }
  .today-kpi-strip article small { font-size: .67rem !important; }
  .today-grid { gap: 8px !important; }
  .today-panel-heading { margin-bottom: 9px !important; }
  .today-panel-heading h3 { font-size: 1rem !important; }
  .today-link-button { min-height: 34px !important; font-size: .72rem !important; }
  .today-month-summary,
  .today-betting-summary,
  .today-house-summary {
    gap: 6px !important;
  }
  .today-month-summary > span,
  .today-betting-summary > span,
  .today-house-summary > span {
    padding: 8px !important;
    border-radius: 10px !important;
  }

  /* Apostas: terminal e cards ficam mais densos, mantendo separacao visual. */
  .bet-core-hero { padding: 11px !important; gap: 8px !important; }
  .bet-core-terminal { padding: 11px 9px !important; }
  .bet-core-quickbar,
  .bet-core-top-controls,
  .bet-core-adjustments,
  .bet-core-form-tail,
  .bet-core-filter-grid,
  .bet-core-freebet-filters,
  .bet-core-outcome-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .bet-core-operation-card,
  .bet-core-operation-card.is-history {
    padding: 10px !important;
    border-radius: 13px !important;
  }
  .bet-core-operation-accounts,
  .bet-core-operation-metrics,
  .bet-core-operation-actions,
  .bet-core-history-hit { margin-top: 7px !important; }

  /* Clube 365: contas continuam legiveis, KPIs compactos. */
  .club365-week-navigation { gap: 6px !important; }
  .club365-week-navigation button { min-height: 40px !important; padding: 7px 9px !important; }
  .club365-accounts-grid { gap: 8px !important; }
  .club365-entry-item { padding-block: 8px !important; }

  /* Modais como sheets, mas com cabecalho e respiros menores. */
  .modal-content,
  .modal .modal-content,
  .modal .modal-content.modal-confirm,
  #section-betting .modal > .bet-core-modal-card,
  #section-betting .modal > .bet-core-calendar-card,
  .invoice-modal-content,
  .import-modal-content,
  .club365-modal-content {
    max-height: calc(96dvh - env(safe-area-inset-top)) !important;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .modal-header,
  #section-betting .modal .modal-header {
    top: -14px !important;
    margin: -14px -12px 10px !important;
    padding: 11px 12px 9px !important;
  }

  /* Bottom nav: menor, mais limpa e ainda impactante. */
  .mobile-dock {
    right: max(7px, env(safe-area-inset-right)) !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    left: max(7px, env(safe-area-inset-left)) !important;
  }
  .mobile-bottom-nav {
    min-height: 60px !important;
    padding: 4px !important;
    border-radius: 17px !important;
    box-shadow: 0 16px 46px rgba(0,0,0,.38), 0 0 0 1px rgba(var(--user-accent-rgb), .08) !important;
  }
  .mobile-bottom-nav button {
    min-height: 50px !important;
    border-radius: 11px !important;
    font-size: clamp(.55rem, 2.35vw, .62rem) !important;
  }
  .mobile-nav-icon { font-size: 1rem !important; }
  .quick-add-button {
    right: 7px !important;
    bottom: calc(100% + 8px) !important;
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 600px) {
  /* A regra antiga empilhava quase tudo em 1 coluna. Esta camada devolve
     densidade onde a informacao cabe confortavelmente lado a lado. */
  .cards-grid,
  .cards-grid-main,
  .summary-grid,
  .module-mini-grid,
  .goals-progress-grid,
  .today-kpi-strip,
  .bet-core-kpis,
  .bet-core-cash-grid,
  .club365-kpi-grid,
  .club365-result-grid,
  .club365-tier-status {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .filters-inline,
  #transactions-section .table-filters-extended,
  #transactions-section .table-filters,
  .form-actions,
  .settings-actions,
  .monthly-closing-actions,
  .bet-core-quickbar,
  .bet-core-top-controls,
  .bet-core-adjustments,
  .bet-core-form-tail,
  .bet-core-filter-grid,
  .bet-core-freebet-filters,
  .bet-core-outcome-options,
  .automation-header-actions,
  .backup-primary-actions,
  .user-admin-actions,
  .invoice-actions,
  .bet-core-modal-actions,
  .modal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bet-core-modifier-toggles,
  .bet-core-span,
  .bet-core-form-tail > button,
  #transactions-section #searchInput,
  #transactions-section .bulk-delete-button {
    grid-column: 1 / -1 !important;
  }

  .today-quick-actions > div,
  .analytics-view-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Conteudo textual/complexo continua em uma coluna para nao virar miniatura. */
  .club365-accounts-grid,
  .settings-grid,
  .settings-category-grid,
  .balance-location-grid,
  .balance-position-strip,
  .invoice-summary-grid,
  .recurring-template-list,
  .backup-point-list,
  .publication-readiness-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  :root { --mobile-gutter: 7px; }
  .hero-header { min-height: 54px !important; }
  .brand-title { font-size: 1.34rem !important; }
  .panel, .chart-panel, .table-panel, .settings-panel, .goals-panel { padding: 10px !important; }
  .today-date-control { grid-template-columns: 36px minmax(0,1fr) 36px !important; }
  #todayResetButton { grid-column: 1 / -1 !important; }
}