/*
 * AgenPro · ajuste responsivo para PWA móvel · 2026-10-23.8
 * Evita foco com zoom automático em Safari/iOS sem retirar o zoom manual.
 * Mantém o menu, dashboard, confirmação pública e PWA Push existentes.
 */
@media (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body, #root {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  body { margin: 0; }

  /* O iOS aproxima a página quando um campo focado tem fonte inferior a 16 px.
     Não tocar nos botões e nos textos compactos da navegação. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.35 !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  textarea,
  select { -webkit-appearance: none; appearance: none; }
  input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; }

  .login-screen, .login-panel, .signup-screen, .signup-wrap, .signup-box,
  .signup-form, .signup-fields, .login-card, .public-confirm-screen,
  .public-confirm-card, .public-confirm-body {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .login-panel, .signup-screen {
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }
  .signup-fields, .signup-plans { grid-template-columns: minmax(0,1fr); }
  .signup-plan, .signup-plan-head, .signup-plan-head > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .signup-plan-head { flex-wrap: wrap; }

  /* Formulários de cadastro e edição: cada campo utiliza a largura disponível. */
  .formgrid, .app-modal-grid, .wa-form-grid {
    grid-template-columns: minmax(0,1fr) !important;
    width: 100%;
    min-width: 0;
  }
  .formgrid > *, .app-modal-grid > *, .wa-form-grid > * {
    min-width: 0;
    max-width: 100%;
  }
  .app-modal-grid .full, .wa-form-grid .wa-full { grid-column: 1 / -1; }
  .field, .login-field, .app-modal-field { min-width: 0; max-width: 100%; }

  /* Modais permanecem visíveis ao abrir o teclado e respeitam os recortes do aparelho. */
  .app-modal-layer {
    width: 100%;
    max-width: 100%;
    padding: 10px max(10px,env(safe-area-inset-left))
      max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));
    overflow-y: auto;
    box-sizing: border-box;
  }
  .app-modal, .app-modal.wide, .app-confirm-modal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-modal-head, .app-modal-body, .app-modal-actions,
  .app-modal-title { min-width: 0; max-width: 100%; }
  .app-modal-title h2, .app-modal-title p { overflow-wrap: anywhere; }
  .app-modal-actions { display: flex; flex-wrap: wrap; }
  .app-modal-actions > button { min-width: 0; flex: 1 1 115px; }

  .agenpro-response-overlay {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .agenpro-response-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .public-confirm-screen { width: 100%; min-height: 100dvh; }
  .public-confirm-card { width: 100%; }
  .public-confirm-summary, .public-confirm-row { min-width: 0; }
  .public-confirm-row > * { min-width: 0; overflow-wrap: anywhere; }

  /* Painel do dono, empresas e áreas de clientes compartilham a base responsiva. */
  .app, .main, .content, .booking, .bookwrap, .book,
  .panel, .card, .section-title, .toolbar, .hero,
  .section-grid, .dashboard-grid, .metrics, .money,
  .services, .finance-grid, .profile-layout, .month,
  .agenda-dashboard, .dashboard-main-grid, .dashboard-side-stack {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  .app, .main { width: 100%; }
  .content { width: 100%; }
  .content > *, .content > * > * { min-width: 0; max-width: 100%; }
  .toolbar { flex-wrap: wrap; align-items: stretch; }
  .toolbar .search-wrap { flex: 1 1 160px; min-width: 0; }
  .section-title, .service-top-actions, .inline-actions, .finance-toolbar,
  .finance-actions, .agenda-header { flex-wrap: wrap; }
  .section-title h1, .section-title h2, .section-title p,
  .panel h2, .panel h3, .card strong, .card p, .card small,
  .client strong, .appt strong { overflow-wrap: anywhere; }
  img, video, canvas { max-width: 100%; height: auto; }
  svg { max-width: 100%; }

  /* Colunas estreitas não devem empurrar a página para fora da tela. */
  .dashboard-grid, .dashboard-main-grid, .dashboard-side-stack,
  .section-grid, .finance-grid, .bookwrap {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .agenda-period-nav, .agenda-header, .agenda-nav-actions {
    min-width: 0; max-width: 100%; flex-wrap: wrap;
  }
  .agenda-period-title { min-width: 0; overflow-wrap: anywhere; }
  .agenda-nav-actions button { min-width: 34px; }

  /* Tabelas grandes rolam por dentro do card, sem deslocar a tela inteira. */
  .table-responsive, .table-scroll, .table-wrapper, .table-container,
  .horizontal-scroll, .company-app .content .panel:has(> table:not(.client-table)),
  .admin-owner-app .content .panel:has(> table:not(.client-table)) {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .client-table, .client-table tbody, .client-table tr, .client-table td {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Barra inferior com cinco ações: manter texto e ícones centralizados. */
  .company-app .bottom.company-bottom {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    box-sizing: border-box;
  }
  .company-app .bottom.company-bottom button {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .company-app .side {
    max-height: 100dvh !important;
    max-width: min(87vw,316px) !important;
  }
  .company-app .side .nav {
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }

  /* Grade mensal mantém os sete dias e se adapta até às telas estreitas. */
  .month {
    width: 100%;
    grid-template-columns: repeat(7,minmax(0,1fr)) !important;
    gap: clamp(2px,1vw,6px);
  }
  .month-label, .daybox {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .daybox { padding: clamp(3px,1.2vw,7px) !important; }
  .daybox .count { max-width: 100%; padding: 3px 4px; font-size: 9px; }
  .weekgrid {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 380px) {
  .company-app .mobile-brand-name { font-size: 15px !important; }
  .company-app .top { padding-left: 6px !important; padding-right: 6px !important; }
  .company-app .top-left { gap: 4px !important; min-width: 0; }
  .company-app .top .top-actions { gap: 0 !important; }
  .company-app .top .mobile-menu-toggle { min-width: 53px !important; padding: 0 5px !important; }
  .company-app .content, .company-app.dashboard-home .content {
    padding-left: 9px !important; padding-right: 9px !important;
  }
  .company-app .dashboard-kpis { gap: 7px !important; }
  .company-app .dashboard-kpis > .dashboard-kpi { padding: 9px !important; }
  .company-app .month { gap: 2px; }
  .company-app .daybox .count { font-size: 8px; }
  .app-modal-head { gap: 8px; }
}


/* AgenPro - cabeçalho seguro do cadastro de atendimento.
   Usa a logo original já publicada e respeita a área de status do iPhone. */
.booking .booking-logo{
  display:block;width:84px;height:84px;max-width:100%;
  object-fit:contain;flex:0 0 auto;
  background:#fff;border-radius:21px;
  box-shadow:0 5px 18px rgba(7,35,72,.08);
}
@media (max-width:720px){
  .booking{
    /* Preserva a área de segurança da barra de status em PWA standalone. */
    padding-top:max(54px, calc(env(safe-area-inset-top) + 14px))!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
  }
  .booking .bookwrap{
    padding-top:0!important;gap:14px!important;
    min-width:0!important;max-width:100%!important;
  }
  .booking .bookintro{
    display:flex!important;flex-direction:row!important;
    height:62px!important;min-height:62px!important;
    align-items:center!important;justify-content:space-between!important;
    padding:0 2px!important;margin:0!important;
  }
  .booking .bookintro .booking-logo{
    width:60px!important;height:60px!important;
    border-radius:16px!important;
    object-fit:contain!important;
    box-shadow:0 5px 13px rgba(4,36,78,.10)!important;
  }
  .booking .bookintro .booking-back{
    /* Mantém Voltar à vista ao rolar, sem invadir o relógio/câmera do iPhone. */
    position:fixed!important;
    top:max(54px, calc(env(safe-area-inset-top) + 14px))!important;
    right:max(13px,calc(env(safe-area-inset-right) + 13px))!important;
    left:auto!important;bottom:auto!important;
    z-index:180!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:46px!important;min-width:104px!important;
    padding:10px 15px!important;
    margin:0!important;
    border:1px solid #d8e1f0!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.98)!important;
    color:#0b365e!important;
    font-size:14px!important;font-weight:800!important;
    line-height:1.2!important;
    box-shadow:0 3px 12px rgba(16,42,79,.08)!important;
    white-space:nowrap!important;
  }
  .booking .bookintro .booking-back:focus-visible{
    outline:3px solid #5392dd!important;
    outline-offset:3px!important;
  }
  .booking .book{min-width:0!important;max-width:100%!important}
}
@media (max-width:360px){
  .booking .bookintro .booking-back{
    right:10px!important;min-width:96px!important;
    padding:10px 11px!important;font-size:13px!important;
  }
}


/* agenpro-mobile-logo-adjustment-20261023 — identidades e área segura iPhone */
.agenpro-mobile-logo{display:none}
.company-app .agenpro-side-logo{
  display:block;width:43px;height:43px;max-width:43px;object-fit:contain;
  flex:0 0 43px;background:#fff;border:1px solid #ebe8f6;
  border-radius:12px
}
@media(max-width:720px){
  /*
   * Safari/PWA usa viewport-fit=cover: a barra de status fica sobre a página.
   * Reserva ao menos 64px para impedir sobreposição com relógio/câmera.
   */
  .company-app .side{
    width:min(88vw,316px)!important;
    max-width:min(88vw,316px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding-top:max(64px,calc(env(safe-area-inset-top) + 16px))!important;
    padding-right:12px!important;
    padding-left:12px!important;
    padding-bottom:max(14px,calc(env(safe-area-inset-bottom) + 12px))!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .company-app .premium-brand{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
    min-height:47px!important;
    padding:0 52px 12px 6px!important;
    margin:0 0 4px!important;
  }
  .company-app .agenpro-side-logo{
    display:block!important;
    width:43px!important;height:43px!important;
    max-width:43px!important;min-width:43px!important;
    flex:0 0 43px!important;
    object-fit:contain!important;
    border-radius:12px!important;
    background:#fff!important;
  }
  .company-app .premium-brand-title{
    display:block!important;
    font-size:20px!important;
    line-height:1.1!important;
    font-weight:900!important;
    color:#24213b!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
  .company-app .mobile-side-close{
    position:absolute!important;
    top:max(64px,calc(env(safe-area-inset-top) + 16px))!important;
    right:13px!important;
    left:auto!important;bottom:auto!important;
    width:43px!important;height:43px!important;
    min-width:43px!important;
    padding:0!important;
    display:grid!important;place-items:center!important;
    z-index:25!important;
    border:0!important;
    border-radius:12px!important;
    background:#f3efff!important;
    color:#674dcc!important;
    font-size:27px!important;
    line-height:1!important;
    cursor:pointer!important;
  }
  .company-app .side .nav{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .company-app .premium-side-foot{
    flex:0 0 auto!important;
    min-height:0!important;
    margin-top:0!important;
  }

  /* Logotipo real AP + nome AgenPro, sem repetir a marca dentro da imagem. */
  .company-app .top-left .agenpro-mobile-logo{
    display:block!important;
    width:33px!important;height:33px!important;
    max-width:33px!important;min-width:33px!important;
    flex:0 0 33px!important;
    object-fit:contain!important;
    background:#fff!important;
    border:1px solid #ebe8f6!important;
    border-radius:9px!important;
  }
  .company-app .top-left .mobile-brand-name{
    display:inline-block!important;
    max-width:calc(100vw - 247px)!important;
    min-width:0!important;
    font-size:16px!important;
    font-weight:900!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    letter-spacing:-.65px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .company-app .top-left{
    flex:0 1 auto!important;
    gap:6px!important;
    min-width:0!important;
    max-width:calc(100% - 111px)!important;
  }
  .company-app .top .mobile-menu-toggle{
    min-width:57px!important;
    max-width:59px!important;
    padding:0 5px!important;
    gap:3px!important;
  }
  .company-app .top .top-actions{
    margin-left:auto!important;
    flex:0 0 auto!important;
    min-width:0!important;
    gap:3px!important;
  }
  .company-app .top .dashboard-notification-button,
  .company-app .top .agenda-update-button{
    width:32px!important;min-width:32px!important;
    flex-basis:32px!important;
  }
  .company-app .top .agenda-profile-button{
    width:34px!important;min-width:34px!important;
  }
}
@media(max-width:370px){
  .company-app .top-left{gap:3px!important}
  .company-app .top-left .agenpro-mobile-logo{
    width:29px!important;height:29px!important;
    min-width:29px!important;flex-basis:29px!important;
  }
  .company-app .top-left .mobile-brand-name{
    font-size:14px!important;
    max-width:calc(100vw - 237px)!important;
  }
  .company-app .top .top-actions{gap:1px!important}
  .company-app .top .mobile-menu-toggle{min-width:52px!important;max-width:53px!important}
}