/* ============================================================
   desktop-1920.css — Camada de telas GRANDES (>= 1500px)
   Sistema Agenda Pessoal - Pedro Said
   Objetivo: preencher bem 1920x1080 (o v28 foi calibrado ~1200-1440
   e, em Full HD, sobra espaco e os elementos ficam pequenos).
   NAO afeta laptops (< 1500px), que seguem o styles.css v28.

   COMO USAR (carregar POR ULTIMO, depois de styles.css e mobile.css):
     <link rel="stylesheet" href="styles.css?v=..." />
     <link rel="stylesheet" href="mobile.css?v=..." />
     <link rel="stylesheet" href="desktop-1920.css?v=20260712-desk1920" />
   Espelhar o arquivo em SUBIR_HOSTGATOR/ e incluir o mesmo <link>
   no index.html de la. Nao mexe em app.js nem em api/.
   ============================================================ */

@media (min-width: 1500px) {

  /* -------- respiro lateral do conteudo -------- */
  .page { padding: 0 72px 96px !important; }

  /* -------- SHELL: rail mais larga -------- */
  .app-shell { grid-template-columns: 288px 1fr !important; }

  .desktop-rail { padding: 34px 22px !important; }
  .rail-brand {
    display: flex !important; align-items: center !important; gap: 16px !important;
    height: 154px !important;            /* 34 (pad-top do rail) + 154 = 188 */
    padding: 0 8px !important; margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .rail-brand img { width: 92px !important; height: 92px !important; }
  .rail-brand strong { display: none !important; }
  .rail-brand span { font-size: 10px !important; letter-spacing: .22em !important; }
  .rail-nav { gap: 4px !important; }
  .rail-tab { font-size: 16.5px !important; padding: 15px 15px !important; gap: 14px !important; border-radius: 12px !important; }
  .rail-icon { width: 26px !important; height: 26px !important; border-radius: 8px !important; }
  .rail-badge { font-size: 11px !important; padding: 3px 9px !important; }
  .rail-primary { padding: 16px !important; font-size: 12px !important; }
  .rail-account-copy strong { font-size: 14px !important; }
  .rail-account-copy small { font-size: 9px !important; }

  /* -------- CABECALHO DO DIA (preenchido, sem carimbo solto) -------- */
  .day-head {
    grid-template-columns: 1fr !important;
    display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
    min-height: 188px !important;            /* 34 (pad-top do rail) + 154 (bloco de marca) */
    box-sizing: border-box !important;
    padding: 0 0 24px !important;
    max-width: 1780px !important;
  }
  .desktop-day-stamp { display: none !important; } /* remove a data solta no canto dir. */
  .day-head h1,
  #financeView .desktop-finance-header h1,
  #settingsView .desktop-settings-header h1 { font-size: 56px !important; }
  .h-kick { font-size: 13px !important; letter-spacing: .26em !important; margin-bottom: 8px !important; }
  .day-head .date { font-size: 17px !important; margin-top: 12px !important; }
  .day-summary { font-size: 17px !important; }
  .desktop-finance-header,
  .desktop-settings-header {
    display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
    min-height: 188px !important;
    box-sizing: border-box !important;
    padding: 0 0 24px !important;
    max-width: 1780px !important;
  }

  /* re-esconder o header compartilhado em Financas/Ajustes: o display:flex dos
     headers acima o reativava (por !important); sem isso empilha 188+188. */
  body.finance-tab-active .day-head,
  body.settings-tab-active .day-head { display: none !important; }

  /* -------- LAYOUT DO DIA: full-bleed, acao preenche + fila (fixa) -------- */
  .day-layout {
    grid-template-columns: minmax(0, 1fr) 420px !important;
    gap: 64px !important;
    max-width: 1780px !important;   /* preenche a largura util (sem ilha centralizada) */
    align-items: stretch !important;              /* as duas colunas com a mesma altura */
    grid-template-rows: 1fr !important;           /* a linha estica ate o min-height (necessario p/ centralizar) */
    min-height: calc(100vh - 240px) !important;   /* preenche abaixo do header p/ poder centralizar */
  }
  /* coluna de acao PREENCHE a largura e CENTRALIZA verticalmente (equilibra com a fila) */
  .day-action-column.day-focus-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    max-width: none !important;
  }
  /* a fila mantem o conteudo no TOPO mesmo com a coluna esticada */
  .day-queue { padding-left: 56px !important; align-self: start !important; }

  /* -------- CARD "AGORA" (focus) mais encorpado -------- */
  .focus { padding: 40px 40px 34px !important; }
  .focus__title { font-size: 42px !important; margin: 18px 52px 20px 0 !important; }
  .focus__lead { font-size: 15px !important; }
  .focus__actions > .act,
  .focus__actions > .ghost-button { font-size: 12px !important; padding: 14px 22px !important; }

  /* linhas da fila um pouco maiores (seletores reais do app) */
  .day-queue .queue-label { font-size: 12px !important; letter-spacing: .22em !important; }
  .day-queue .item__title { font-size: 16.5px !important; }
  .day-queue .item__sub { font-size: 12.5px !important; }
  .day-queue .item__date { font-size: 13px !important; }
  .day-queue .sec-head h2,
  .day-queue .fold-section > summary > span:first-child { font-size: 18px !important; }
  .day-queue .sec-head .count,
  .day-queue .fold-section > summary .count { font-size: 13px !important; }
  .day-queue .empty,
  .day-queue .empty-sections-summary { font-size: 13px !important; }

  /* -------- FINANCAS -------- */
  .finance-section { max-width: 1780px !important; }
  #financeView .finance-hero-card { gap: 16px !important; }

  /* -------- AJUSTES -------- */
  .settings-layout { max-width: 1120px !important; }
  .settings-panel { padding: 22px !important; }
}

/* -------- HEADER OPACO: mata a transparencia/vidro ao rolar -------- */
/* Antes, os cabecalhos fixos usavam --glass-fill-light + blur, entao o
   conteudo rolado aparecia borrado na faixa do topo. Deixamos solidos.
   IMPORTANTE: a cor tem de ser --surface (a .page nao tem fundo proprio e
   mostra o --surface do app-shell); usar --background criava uma FAIXA
   destacada ("corte" na lateral). Vale em qualquer desktop (>=900px). */
@media (min-width: 900px) {
  .day-head,
  .desktop-finance-header,
  .desktop-settings-header {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* modo escuro: o logo do rail usa a versao NEGATIVA (o logo.svg de tinta
     escura sumiria no fundo escuro). Mobile ja resolve isso no mobile.css. */
  [data-theme="dark"] .rail-brand img {
    content: url("logo-negativo.svg?v=20260714-logo-vetor") !important;
  }

  /* AJUSTES: no desktop a .settings-layout vira display:block, entao o gap do
     flex (mobile) deixa de valer e os paineis ficam colados. Recompomos o
     respiro com margem entre paineis (igual ao mockup). */
  .settings-panel + .settings-panel { margin-top: 26px !important; }

  /* -------- ICONES DA NAVEGACAO (bater com o mockup) -------- */
  /* Financas volta a ser CIRCULO (o rail-icon do layer forcava 8px em todos). */
  .rail-icon-circle { border-radius: 50% !important; }
  /* Ajustes: no sistema era um PONTO central (radial-gradient); no mockup e um
     quadrado arredondado como os outros. Removemos o ponto. */
  .rail-icon-settings { background: none !important; }
  /* ...mas na aba ATIVA o icone enche de verde como Dia/Financas.
     (o background:none acima estava vencendo o preenchimento ativo por
     causa do !important; aqui usamos especificidade maior + !important) */
  .rail-tab.active .rail-icon-settings,
  .rail-tab.is-active .rail-icon-settings {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  /* Aba ativa: quadradinho/circulo DENTRO do icone cheio (como o mockup). */
  .rail-tab.active .rail-icon { position: relative !important; }
  .rail-tab.active .rail-icon::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border: 1.5px solid rgba(255, 255, 255, .9) !important;
    border-radius: 3px !important;
  }
  .rail-tab.active .rail-icon-circle::after { border-radius: 50% !important; }
}

/* -------- telas ULTRA-largas (>= 2200px): teto maior, ainda full-bleed -------- */
@media (min-width: 2200px) {
  .day-head,
  .day-layout,
  .desktop-finance-header,
  .finance-section { max-width: 2000px !important; }
}

/* -------- REPARO DIA DESKTOP (15/07): header full-width + conteudo no topo -------- */
@media (min-width: 1500px) {
  body:not(.finance-tab-active):not(.settings-tab-active) .day-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    align-items: end !important;
    height: auto !important;
    padding: 34px 0 20px !important;
    max-width: 1560px !important;
    text-align: left !important;
  }

  body:not(.finance-tab-active):not(.settings-tab-active) .day-head .grow {
    grid-column: 1 !important;
    justify-self: start !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  body:not(.finance-tab-active):not(.settings-tab-active) .desktop-day-stamp {
    display: none !important;
  }

  body:not(.finance-tab-active):not(.settings-tab-active) .day-layout {
    grid-template-columns: minmax(0, 1fr) 420px !important;
    gap: 64px !important;
    align-items: start !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
    max-width: 1560px !important;
    margin-top: 0 !important;
  }

  body:not(.finance-tab-active):not(.settings-tab-active) .day-action-column.day-focus-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }
}