/**
 * ElevaCash — tema mobile (mockup ref. ago/2026).
 * Aplica SOMENTE com body.is-mobile-shell (≤768). Desktop inalterado.
 *
 * Paleta: navy #003F9E, fundo #F5F7FA, verde receita, vermelho despesa.
 */

@media (max-width: 768px) {
  body.is-mobile-shell {
    --color-primary: #003f9e;
    --color-primary-hover: #002f78;
    --color-primary-soft: #e8f0fb;
    --color-bg: #f5f7fa;
    --color-success: #059669;
    --color-success-soft: #d1fae5;
    --color-danger: #dc2626;
    --color-warning: #ea580c;
    --color-warning-soft: #ffedd5;
    --m-navy: #003f9e;
    --m-navy-deep: #002a6e;
    --m-radius-lg: 16px;
    --shadow: 0 1px 3px rgba(0, 47, 120, 0.06);
  }

  body.is-mobile-shell .app-shell__column {
    background: var(--color-bg, #f5f7fa);
  }

  body.is-mobile-shell .main {
    padding: 0.65rem 0.85rem 1rem;
  }

  /* —— Topbar navy —— */
  body.is-mobile-shell .app-topbar {
    background: linear-gradient(165deg, var(--m-navy-deep) 0%, var(--m-navy) 55%, #0052c4 100%);
    border-bottom: 0;
    color: #f8fafc;
    padding: 0.65rem 0.85rem 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 42, 110, 0.22);
  }

  body.is-mobile-shell .app-topbar__title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  body.is-mobile-shell .app-topbar__help {
    display: none;
  }

  body.is-mobile-shell .app-topbar__month {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.2rem 0.35rem;
  }

  body.is-mobile-shell .app-topbar__month .ms-stepper__label,
  body.is-mobile-shell .app-topbar__month #month-label {
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
  }

  body.is-mobile-shell .ms-stepper__btn {
    color: rgba(255, 255, 255, 0.9);
    border-color: transparent;
    background: transparent;
  }

  body.is-mobile-shell .ms-stepper__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
  }

  body.is-mobile-shell #topbar-privacy-toggle {
    color: rgba(255, 255, 255, 0.92);
  }

  body.is-mobile-shell #topbar-privacy-toggle.is-pressed,
  body.is-mobile-shell #topbar-privacy-toggle[aria-pressed="true"] {
    color: #fff;
  }

  /* —— Subnav (Análise / Cadastros) estilo abas —— */
  body.is-mobile-shell .app-subnav {
    background: var(--color-surface, #fff);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    padding: 0 0.85rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.is-mobile-shell .app-subnav__label {
    display: none;
  }

  body.is-mobile-shell .app-subnav__items {
    gap: 0;
    flex-wrap: nowrap;
  }

  body.is-mobile-shell .app-subnav__tab {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.65rem 0.85rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  body.is-mobile-shell .app-subnav__tab--active {
    color: var(--m-navy, #003f9e);
    background: transparent;
    border-bottom-color: var(--m-navy, #003f9e);
    box-shadow: none;
  }

  /* —— Bottom nav —— */
  body.is-mobile-shell #app-mobile-nav.mobile-nav {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  }

  body.is-mobile-shell .mobile-nav__item--active,
  body.is-mobile-shell .mobile-nav__item[aria-current="page"] {
    color: var(--m-navy, #003f9e);
  }

  body.is-mobile-shell .mobile-nav__fab {
    background: var(--m-navy, #003f9e);
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0, 63, 158, 0.38);
  }

  body.is-mobile-shell .mobile-nav__fab:active {
    background: var(--color-primary-hover, #002f78);
  }

  /* —— Início: hero navy —— */
  body.is-mobile-shell .m-inicio__greet {
    margin-bottom: 0.85rem;
  }

  body.is-mobile-shell .m-inicio__hello {
    font-size: 1.25rem;
    color: var(--color-text, #172033);
  }

  body.is-mobile-shell .m-inicio__tagline {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--color-muted, #64748b);
    font-weight: 500;
  }

  body.is-mobile-shell .m-inicio__month {
    display: none;
  }

  body.is-mobile-shell .m-hero--navy {
    background: linear-gradient(145deg, var(--m-navy-deep) 0%, var(--m-navy) 48%, #0052c4 100%);
    border: 0;
    border-radius: var(--m-radius-lg, 16px);
    box-shadow: 0 10px 28px rgba(0, 42, 110, 0.28);
    color: #f8fafc;
    padding: 1.15rem 1.1rem 1rem;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__label {
    color: rgba(248, 250, 252, 0.82);
    font-size: 0.75rem;
    font-weight: 500;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__value {
    color: #fff;
    font-size: 2rem;
    margin-top: 0.35rem;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__hint {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    color: rgba(248, 250, 252, 0.72);
    font-weight: 500;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__row {
    border-top-color: rgba(255, 255, 255, 0.18);
    margin-top: 1rem;
    padding-top: 0.85rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__stat span {
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.65rem;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__stat strong {
    font-size: 0.82rem;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__stat--ok {
    color: #6ee7b7;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__stat--bad {
    color: #fca5a5;
  }

  body.is-mobile-shell .m-hero--navy .m-hero__stat--neutral {
    color: #fff;
  }

  /* —— Atenção: scroll horizontal —— */
  body.is-mobile-shell .m-attn-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    margin-bottom: 0.5rem;
  }

  body.is-mobile-shell .m-attn-grid::-webkit-scrollbar {
    display: none;
  }

  body.is-mobile-shell .m-attn {
    flex: 0 0 auto;
    min-width: 7.5rem;
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
  }

  body.is-mobile-shell .m-attn--info {
    background: #e0f2fe;
    border-color: #bae6fd;
  }

  body.is-mobile-shell .m-attn--info strong {
    color: #0369a1;
  }

  /* —— Vencimentos com ícone —— */
  body.is-mobile-shell .m-due-item {
    grid-template-columns: auto 1fr auto auto;
    gap: 0.65rem;
  }

  body.is-mobile-shell .m-due-item__icon,
  body.is-mobile-shell .m-account-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--color-primary-soft, #e8f0fb);
    color: var(--m-navy, #003f9e);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  body.is-mobile-shell .m-chip-pay {
    background: var(--m-navy, #003f9e);
    border-color: var(--m-navy, #003f9e);
    color: #fff;
    border-radius: 10px;
    font-size: 0.72rem;
    padding: 0.4rem 0.75rem;
  }

  /* —— Cards gerais —— */
  body.is-mobile-shell .m-list-card,
  body.is-mobile-shell .m-account-card,
  body.is-mobile-shell .m-analise-card,
  body.is-mobile-shell .m-analise-kpi {
    border-radius: var(--m-radius-lg, 16px);
    border-color: #e8ecf1;
    box-shadow: var(--shadow);
  }

  body.is-mobile-shell .m-chip[aria-pressed="true"] {
    background: var(--m-navy, #003f9e);
    border-color: var(--m-navy, #003f9e);
  }

  body.is-mobile-shell .m-account-card__top {
    align-items: center;
  }

  body.is-mobile-shell .m-account-card__actions .btn--primary {
    background: var(--m-navy, #003f9e);
    border-color: var(--m-navy, #003f9e);
  }

  body.is-mobile-shell .m-account-card__actions .btn--primary:hover {
    background: var(--color-primary-hover, #002f78);
  }

  body.is-mobile-shell .badge {
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
  }

  /* —— Contas: painéis resumo/rateio/bancos —— */
  body.is-mobile-shell #view-contas .toolbar {
    display: none;
  }

  body.is-mobile-shell #view-contas .dashboard {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
  }

  body.is-mobile-shell #view-contas .contas-hub__header .btn--primary {
    display: none;
  }

  body.is-mobile-shell #view-contas .contas-hub__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #64748b);
  }

  body.is-mobile-shell .contas-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.65rem;
  }

  body.is-mobile-shell .contas-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.65rem;
  }

  body.is-mobile-shell .contas-totals .contas-totals__item {
    background: var(--color-surface, #fff);
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    padding: 0.65rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow);
  }

  body.is-mobile-shell #view-contas .contas-hub {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0.25rem 0 0;
    gap: 0.65rem;
  }

  body.is-mobile-shell #view-contas .panel,
  body.is-mobile-shell #view-contas .panel--resumo-bancos {
    border-radius: var(--m-radius-lg, 16px);
    box-shadow: var(--shadow);
  }

  /* —— Análise mobile —— */
  body.is-mobile-shell .m-analise__head {
    display: none;
  }

  body.is-mobile-shell .m-analise-kpi__value--ok {
    color: var(--color-success, #059669);
  }

  body.is-mobile-shell .m-analise-bar__fill {
    background: var(--m-navy, #003f9e);
  }

  body.is-mobile-shell .m-analise-saude__ring {
    background: var(--color-success-soft, #d1fae5);
    color: var(--color-success, #059669);
  }

  body.is-mobile-shell .m-analise-cta {
    background: var(--m-navy, #003f9e);
    border-color: var(--m-navy, #003f9e);
    color: #fff;
  }

  /* —— Mais / Sistema —— */
  body.is-mobile-shell .m-more-row,
  body.is-mobile-shell .m-sys-row {
    border-radius: 12px;
  }

  body.is-mobile-shell .m-more-group {
    border-radius: var(--m-radius-lg, 16px);
  }

  /* —— FAB sheet choices —— */
  body.is-mobile-shell .m-fab-choice:hover,
  body.is-mobile-shell .m-fab-choice:focus-visible {
    border-color: var(--m-navy, #003f9e);
    background: var(--color-primary-soft, #e8f0fb);
  }
}