/*
 * Densidade móvel final.
 * Carregado por último para unificar os patches antigos sem alterar o iPad/desktop.
 */

@media (max-width: 1180px) {
  .topbar-main .mobile-menu-btn { display: inline-flex !important; }
  .raffinato-hero {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .raffinato-hero-copy,
  .raffinato-hero-copy > div { min-width: 0 !important; max-width: 100% !important; }
  .raffinato-hero :is(h2, p) { overflow-wrap: anywhere; }
}

@media (max-width: 700px) {
  :root {
    --mobile-gap: 6px;
    --mobile-control: 32px;
    --mobile-radius: 8px;
  }

  body { font-size: 12px; }
  .content { padding: 7px 7px 16px !important; }
  .pagina.ativa > .page-title {
    margin-bottom: 7px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  .pagina.ativa .card {
    padding: 8px !important;
    margin-bottom: 7px !important;
    border-radius: 9px !important;
  }
  .pagina.ativa .card-title,
  .pagina.ativa .campo-label,
  .pagina.ativa .filter-field-standard > span,
  .pagina.ativa .date-filter-standard > label > span {
    font-size: 8px !important;
    line-height: 1.15 !important;
    letter-spacing: .04em !important;
  }
  .pagina.ativa :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, .btn) {
    min-height: var(--mobile-control) !important;
    border-radius: var(--mobile-radius) !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
  .pagina.ativa :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    padding: 5px 7px !important;
  }
  .pagina.ativa :is(button, .btn) { padding: 5px 7px !important; }

  /* Períodos são uma unidade visual: início e fim permanecem lado a lado. */
  .date-filter-standard {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mobile-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .date-filter-start-field { grid-column: 1 !important; grid-row: 1 !important; }
  .date-filter-end-field { grid-column: 2 !important; grid-row: 1 !important; }
  .date-filter-criterion-field { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  .date-filter-standard > label,
  .date-filter-standard input,
  .date-filter-standard select { min-width: 0 !important; width: 100% !important; }

  .checklist-filtros-datas,
  .checklist-data-grid,
  .relatorio-periodo,
  .periodo-filtros,
  .agenda-relatorio-periodo {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mobile-gap) !important;
  }
  .checklist-filtros-unificados {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mobile-gap) !important;
  }
  .checklist-filtros-unificados > :not(.checklist-data-campo) { grid-column: span 1 !important; }
  .checklist-data-campo { min-width: 0 !important; width: 100% !important; }

  .escala-relatorio-filtros-export {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mobile-gap) !important;
  }
  .escala-relatorio-filtros-export > label { min-width: 0 !important; width: 100% !important; }
  .escala-relatorio-filtros-export > .page-sub { grid-column: 1 / -1 !important; }

  /* Relatórios Raffinato: datas juntas; horários juntos na linha seguinte. */
  .rs-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rs-filter-grid > label:has(#rpStart),
  .rs-filter-grid > label:has(#rsStart) { grid-column: 1 !important; grid-row: 1 !important; }
  .rs-filter-grid > label:has(#rpEnd),
  .rs-filter-grid > label:has(#rsEnd) { grid-column: 2 !important; grid-row: 1 !important; }
  .rs-filter-grid > label:has(#rpStartTime),
  .rs-filter-grid > label:has(#rsStartTime) { grid-column: 1 !important; grid-row: 2 !important; }
  .rs-filter-grid > label:has(#rpEndTime),
  .rs-filter-grid > label:has(#rsEndTime) { grid-column: 2 !important; grid-row: 2 !important; }

  /* Topo compacto: informações úteis sem consumir metade da tela. */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 5px !important;
    padding: max(5px, env(safe-area-inset-top)) 7px 6px !important;
  }
  .topbar-main {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  .topbar-main .mobile-menu-btn {
    width: 38px !important; min-width: 38px !important;
    height: 36px !important; min-height: 36px !important;
    font-size: 17px !important;
  }
  .topbar-clock,
  .topbar-business-day {
    height: 36px !important; min-height: 36px !important;
    padding: 3px 5px !important;
  }
  .topbar-info-label { font-size: 6.5px !important; }
  .topbar-clock-time,
  .topbar-business-day-date { font-size: clamp(13px, 4vw, 16px) !important; }
  .topbar-store,
  .topbar-actions { min-height: 36px !important; }
  .topbar-store {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 2px 5px !important;
    border-radius: 8px !important;
  }
  .topbar-store-main {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    line-height: 1 !important;
  }
  .topbar-store .topbar-user-label { display: none !important; }
  .topbar-store-name {
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .topbar-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 32px 32px 32px !important;
    width: 104px !important;
    min-width: 104px !important;
    gap: 4px !important;
  }
  .topbar-store-name,
  .topbar-user-name { font-size: 10px !important; }
  .topbar-user-label { font-size: 6.5px !important; }
  #topbarUserInfo {
    grid-column: 2 !important;
    position: relative !important;
    z-index: 7060 !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 2px !important;
    overflow: visible !important;
  }
  #topbarUserInfo .account-menu-trigger {
    position: relative !important;
    z-index: 1 !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 1px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
  #topbarUserInfo .account-avatar {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
  #topbarUserInfo .topbar-user-name,
  #topbarUserInfo .account-menu-trigger > span[aria-hidden="true"] { display: none !important; }
  #topbarUserInfo .account-menu {
    position: absolute !important;
    z-index: 7070 !important;
    top: calc(100% + 7px) !important;
    right: -36px !important;
    left: auto !important;
    display: grid;
    width: 178px !important;
    min-width: 178px !important;
    max-width: calc(100vw - 14px) !important;
    padding: 5px !important;
    overflow: visible !important;
  }
  #topbarUserInfo .account-menu[hidden] { display: none !important; }
  /* Contingência para o Safari/iPhone: o toque sempre foca o botão, então o
     menu abre mesmo quando o navegador não dispara o onclick inline. */
  #topbarUserInfo:focus-within .account-menu[hidden] { display: grid !important; }
  #topbarUserInfo .account-menu button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }
  .mobile-account-sheet {
    position: fixed !important;
    z-index: 50000 !important;
    inset: 0 !important;
    display: grid !important;
    align-items: end !important;
    padding: 10px !important;
  }
  .mobile-account-sheet-backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(2, 6, 23, .66) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }
  .mobile-account-sheet > section {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 17px !important;
    background: var(--surface) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
  }
  .mobile-account-sheet > section > div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 3px 4px 9px !important;
  }
  .mobile-account-sheet p { display: grid !important; gap: 2px !important; margin: 0 !important; }
  .mobile-account-sheet small { color: var(--text-muted) !important; font-size: 8px !important; letter-spacing: .08em !important; }
  .mobile-account-sheet strong { color: var(--text) !important; font-size: 14px !important; }
  .mobile-account-sheet .mobile-account-action,
  .mobile-account-sheet .mobile-account-cancel {
    min-height: 43px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }
  .mobile-account-sheet .mobile-account-action { border: 1px solid var(--border) !important; color: var(--text) !important; background: var(--surface2) !important; }
  .mobile-account-sheet .mobile-account-logout { border-color: color-mix(in srgb, var(--cd-danger) 42%, var(--border)) !important; color: #fff !important; background: var(--cd-danger) !important; }
  .mobile-account-sheet .mobile-account-cancel { border: 0 !important; color: var(--text-muted) !important; background: transparent !important; }
  .topbar-actions > .checkia-fab,
  #topbarUserInfo,
  .topbar-actions .notification-btn,
  .topbar-actions > .btn-red {
    height: 32px !important; min-height: 32px !important;
  }
  .topbar-actions > .checkia-fab {
    grid-column: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 4px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }
  .topbar-actions > .checkia-fab .checkia-vbot { width: 18px !important; height: 18px !important; }
  .topbar-actions > .checkia-fab .checkia-fab-label,
  .topbar-actions > .checkia-fab .checkia-fab-dot { display: none !important; }
  .topbar-actions .notification-btn {
    grid-column: 3 !important;
    width: 32px !important;
    min-width: 32px !important;
    padding: 6px !important;
  }
  .topbar-actions .notification-btn svg { width: 15px !important; height: 15px !important; }
  /* Sair permanece dentro do menu do perfil; evita um quinto controle duplicado. */
  .topbar-actions > .btn-red { display: none !important; }
  .topbar-store-switch {
    width: auto !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 3px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  .topbar-store-switch::after {
    content: '(trocar loja)';
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  /* Relatório financeiro: todas as funções compactas, sem linhas vazias. */
  #relatorio_financeiro { --rf-control: 32px; --rf-gap: 5px; --rf-text: 8.5px; --rf-small: 7px; }
  #relatorio_financeiro .relatorio-financeiro-filtros {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--rf-gap) !important;
  }
  #relatorio_financeiro .relatorio-financeiro-filtros > .date-filter-standard { display: contents !important; }
  #relatorio_financeiro .date-filter-start-field { grid-column: 1 / 4 !important; grid-row: 1 !important; }
  #relatorio_financeiro .date-filter-end-field { grid-column: 4 / 7 !important; grid-row: 1 !important; }
  #relatorio_financeiro .date-filter-criterion-field { grid-column: 1 / 3 !important; grid-row: 2 !important; }
  #relatorio_financeiro .campo-com-label:has(#filtroRelFinanceiroStatus) { grid-column: 3 / 5 !important; grid-row: 2 !important; }
  #relatorio_financeiro .campo-com-label:has(#filtroRelFinanceiroCategoria) { grid-column: 5 / 7 !important; grid-row: 2 !important; }
  #relatorio_financeiro .relatorio-financeiro-filtros > .btn { grid-column: span 3 !important; grid-row: 3 !important; }
  #relatorio_financeiro .relatorio-financeiro-acoes {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--rf-gap) !important;
  }
  #relatorio_financeiro .relatorio-financeiro-atalho { grid-column: span 2 !important; }
  #relatorio_financeiro .relatorio-financeiro-acoes label {
    grid-column: span 3 !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 1px 2px !important;
    margin: 0 !important;
    font-size: 7px !important;
  }
  #relatorio_financeiro .relatorio-financeiro-aplicar {
    grid-template-columns: minmax(0, 1fr) 66px !important;
    gap: var(--rf-gap) !important;
  }
  #relatorio_financeiro .relatorio-financeiro-exportacoes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rf-gap) !important;
  }
  #relatorio_financeiro .relatorio-financeiro-exportacoes .btn { min-width: 0 !important; width: 100% !important; }
  #relatorio_financeiro #cardsRelatorioFinanceiro { gap: 6px !important; }
  #relatorio_financeiro #cardsRelatorioFinanceiro .stat-card { min-height: 76px !important; padding: 8px !important; }
  #relatorio_financeiro .stat-card .s-value { font-size: clamp(16px, 5vw, 20px) !important; }
  #relatorio_financeiro .stat-card .s-desc { font-size: 7.5px !important; }
}

@media (max-width: 374px) {
  .content { padding-inline: 5px !important; }
  .pagina.ativa :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, .btn) { font-size: 9px !important; }
  #relatorio_financeiro { --rf-text: 8px; --rf-small: 6.5px; }
  #relatorio_financeiro .relatorio-financeiro-aplicar { grid-template-columns: minmax(0, 1fr) 58px !important; }
}