/* ============================================================
   mobile.css - Camada mobile FINAL e autoritativa
   Sistema Agenda Pessoal - Pedro Said
   Carregar POR ULTIMO (depois de styles.css) no index.html:
     <link rel="stylesheet" href="mobile.css?v=20260712-mobil-promax" />
   e espelhar em SUBIR_HOSTGATOR/.
   Objetivo: reproduzir o mockup aprovado no celular (< 640px),
   vencendo as camadas antigas conflitantes.
   Calibrado p/ iPhone 17 Pro Max: safe-areas (Dynamic Island + barra
   de gesto) e tipografia encorpada em telas largas (430-639px).
   ============================================================ */

@media (max-width: 639px) {
  /* -------- estrutura base da pagina -------- */
  .page {
    padding: 0 !important;
    /* espaco p/ dock + tabbar + barra de gesto (home indicator) */
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .tab-view { padding: 0 22px !important; }

  /* ============ CABECALHO (.top) ============ */
  /* ordem do mockup: marcador | (kicker data / titulo) | menu */
  .top {
    align-items: center !important;
    background: color-mix(in oklab, var(--background) 80%, transparent) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    border-bottom: 0 !important;
    display: grid !important;
    gap: 0 13px !important;
    grid-template-columns: 50px minmax(0, 1fr) 40px !important;
    margin: 0 !important;
    /* topo respeita a Dynamic Island / status bar (iPhone 17 Pro Max) */
    padding: max(36px, calc(env(safe-area-inset-top, 0px) + 12px)) 22px 10px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 15 !important;
  }
  .top::before { content: none !important; } /* remove marcador falso de camadas antigas */
  .top .brand-logo {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 50px !important;
    width: 50px !important;
    margin-left: -4px !important;
  }
  .top .grow {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  /* esconde o eyebrow generico ("Hoje"/"Controle"...) no Dia */
  .top .h-kick { display: none !important; }
  /* a DATA vira o kicker (na frente, acima do titulo) */
  .top .date {
    color: var(--muted) !important;
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
    margin: 0 0 3px !important;
    order: -1 !important;             /* move acima do h1 */
    text-transform: uppercase !important;
  }
  .top .date strong { color: var(--muted) !important; font-weight: 500 !important; }
  .top h1 {
    color: var(--text) !important;
    font-family: var(--font-display) !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  /* em Financas/Ajustes nao ha .date: mostra o eyebrow como kicker */
  .finance-tab-active .top .h-kick,
  .settings-tab-active .top .h-kick {
    color: var(--muted) !important;
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
    margin: 0 0 3px !important;
    text-transform: uppercase !important;
  }
  .desktop-day-stamp { display: none !important; }

  /* menu ... no lugar do botao Planejar no topo */
  .top-actions {
    align-items: center !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
  }
  .top-actions .btn-plan {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    color: var(--muted) !important;
    font-size: 0 !important;
    height: 36px !important;
    padding: 0 !important;
    position: relative !important;
    width: 36px !important;
  }
  .top-actions .btn-plan::after {
    content: "\2026" !important; /* reticencias */
    font-size: 18px !important;
    left: 0; right: 0; top: 46%;
    position: absolute !important;
    transform: translateY(-50%) !important;
  }
  .auth-bar, .mobile-sync-button { display: none !important; }

  /* saudacao (daySummary) abaixo do topo, acima do hero */
  .day-summary {
    display: block !important;
    font-size: 13.5px !important;
    margin: 14px 0 0 !important;
  }
  .day-summary b { color: var(--text) !important; font-weight: 600 !important; }

  /* esconde o rotulo externo "O QUE FAZER AGORA" (o card ja tem o seu) */
  .agora-head { display: none !important; }
  .agora { margin-top: 14px !important; }

  /* ============ CAPTURA = DOCK FIXO no rodape ============ */
  .capture-wrap { display: none !important; } /* remove a captura inline */
  .capture-dock {
    background: linear-gradient(to top,
      var(--background) 0%,
      color-mix(in oklab, var(--background) 88%, transparent) 70%,
      transparent 100%) !important;
    border: 0 !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;  /* acima da tab bar + gesto */
    display: block !important;
    left: 0 !important;
    padding: 10px 22px 8px !important;
    position: fixed !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 25 !important;
  }
  body.finance-tab-active .capture-dock { display: block !important; }
  body.settings-tab-active .capture-dock { display: none !important; }
  .capture-dock .quick-add-form,
  .capture-dock .dock-form {
    display: flex !important;
    gap: 9px !important;
  }
  .capture-dock input {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-input) !important;
    color: var(--text) !important;
    flex: 1 !important;
    min-height: 46px !important;
    padding: 0 15px !important;
  }
  .capture-dock button {
    background: var(--primary) !important;
    border: 0 !important;
    border-radius: var(--r-input) !important;
    color: var(--on-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    width: 52px !important;
  }

  /* ============ TAB BAR inferior ============ */
  .app-tabs {
    align-items: center !important;
    background: color-mix(in oklab, var(--background) 82%, transparent) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    border-top: 1px solid var(--glass-border) !important;
    bottom: 0 !important;
    display: flex !important;
    gap: 0 !important;
    justify-content: space-around !important;
    left: 0 !important;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
    position: fixed !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 30 !important;
  }
  .tab-button {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--faint) !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: var(--font-mono) !important;
    font-size: 8px !important;
    gap: 5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
  }
  /* icones reais (.tab-ic do styles.css): ativo ja vem verde com o
     quadradinho claro; o ::before da camada fica desligado */
  .app-tabs .tab-button::before { display: none !important; }
  .app-tabs .tab-button .tab-ic { display: inline-block !important; }
  .tab-button.active,
  .tab-button.is-active { color: var(--primary) !important; }

  /* ============ FINANCAS - topo ============ */
  .finance-mobile-heading { display: none !important; }
  .finance-section { margin: 0 !important; padding: 0 22px !important; }
  .finance-toolbar { margin-top: 4px !important; }
  .finance-add { display: flex !important; gap: 9px !important; margin-top: 12px !important; }
  .finance-add .finance-today-button { display: none !important; }
  .finance-add input {
    flex: 1 !important; min-height: 46px !important; padding: 0 15px !important;
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: var(--r-input) !important; color: var(--text) !important;
  }
  .finance-add .primary {
    min-width: 0 !important; white-space: nowrap !important;
    padding: 0 18px !important; min-height: 46px !important;
  }
  .finance-summary { grid-template-columns: 1fr !important; }
  .finance-summary .finance-hero-card { grid-row: auto !important; min-height: 104px !important; padding: 22px !important; }
  .finance-summary .finance-mini { display: none !important; }

  /* ============ AJUSTES - alinhamento ============ */
  .settings-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 4px 22px 0 !important;
  }
  .settings-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--shadow-card) !important;
    margin: 0 !important;
    padding: 18px !important;
    width: 100% !important;
  }
  .settings-heading {
    align-items: flex-start !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }
  .settings-heading h2 {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
  }
  /* selo (Administrador etc.) nao pode cortar */
  .settings-heading .a-state,
  #settingsAccountRole {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .settings-row {
    align-items: center !important;
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .settings-row .txt { flex: 1 !important; min-width: 0 !important; }
  .reminder-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .admin-summary { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
}

/* ============================================================
   iPhone 17 Pro Max e afins (tela larga de celular, ~430-639px)
   Encorpa a tipografia p/ nao parecer pequena no 6.9".
   ============================================================ */
@media (min-width: 430px) and (max-width: 639px) {
  .top h1 { font-size: 33px !important; }
  .day-summary { font-size: 14.5px !important; }
  .tab-view { padding: 0 24px !important; }
  .focus__title { font-size: 27px !important; }
  .item__title, .finance-item__name { font-size: 15.5px !important; }
  .capture-dock, .top { padding-left: 24px !important; padding-right: 24px !important; }
}


/* ============================================================
   COMPAT (12/07) — casa a camada com o markup atual
   + decisoes anteriores do Pedro (aprovadas em v31/v34)
   ============================================================ */
@media (max-width: 639px) {
  /* 1. (invertido 13/07) icones da tab bar sao os .tab-ic reais do
        styles.css; o ::before da camada foi desligado la em cima. */

  /* 2. BUG logo descentralizada: a logo do topo e o monograma
        <span class="brand-mark">P/S</span>, nao <img>. Restaura a
        centragem das letras no circulo (display:block quebrava);
        o grid do cabecalho ja centraliza na vertical (transform off). */
  .top .brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  /* 3. Decisao do Pedro (v31): cabecalho mobile NAO e fixo —
        rola com o conteudo, sem vidro. */
  .top {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 4. Decisao do Pedro (v34): na aba Ajustes nao ha captura,
        o vao reservado embaixo e menor. */
  body.settings-tab-active .page {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 5. Logo e conteudo do Dia na MESMA margem lateral (20px).
        No DOM real o #dayView E o proprio .tab-view (22px da camada) e o
        .day-layout tem 22px proprios do styles.css — zera o de dentro
        pra nao somar (22+22=44 era o desalinho com a logo). */
  .top { padding-left: 20px !important; padding-right: 20px !important; }
  #dayView.tab-view { padding-left: 20px !important; padding-right: 20px !important; }
  #dayView .day-layout, #dayView .day-focus-col { padding-left: 0 !important; padding-right: 0 !important; }
  .day-summary, .agora, .pills { margin-left: 0 !important; padding-left: 0 !important; }

  /* 6. Financas e Ajustes na mesma margem de 20px do Dia
        (mesmo caso: a view externa da 20px, o wrapper interno zera). */
  #financeView.tab-view, #settingsView.tab-view {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  #financeView .finance-section, #settingsView .settings-layout {
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* 7. Logo do cabecalho = o MESMO svg vetorizado da web (nao o monograma CSS).
        Reaproveita o .brand-mark como suporte do SVG (background), some o texto
        P/S e a barra CSS; troca pro negativo no tema escuro. So no mobile. */
  .top .brand-mark {
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    background-image: url("logo.svg?v=20260714-logo-vetor") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: transparent !important;
    font-size: 0 !important;
  }
  .top .brand-mark .brand-slash { display: none !important; }
  [data-theme="dark"] .top .brand-mark {
    background-image: url("logo-negativo.svg?v=20260714-logo-vetor") !important;
  }

  /* 8. Financas/Ajustes: o #todayLabel (.date) carrega a DESCRICAO da pagina
        (nao a data) — vira uma 3a linha de kicker que desalinha o logo P/S.
        Esconde so ela nessas abas; o rotulo (.h-kick "Controle"/"Conta") + o
        titulo ficam = 2 linhas, igual ao Dia. So mobile; desktop nao muda. */
  .finance-tab-active .top .date,
  .settings-tab-active .top .date { display: none !important; }
}