/* ========================================================================== 
   Wakko Serviços — Mobile & Native Browser Compatibility Layer — 2026-09-30
   Objetivo: comportamento consistente em Chrome/Android, Samsung Internet,
   Safari/iOS/iPadOS, Firefox e WebViews/PWA, sem alterar a experiência desktop.
   ========================================================================== */

:root{
  --wakko-vvh:100dvh;
  --wakko-vvtop:0px;
  --wakko-safe-top:env(safe-area-inset-top,0px);
  --wakko-safe-right:env(safe-area-inset-right,0px);
  --wakko-safe-bottom:env(safe-area-inset-bottom,0px);
  --wakko-safe-left:env(safe-area-inset-left,0px);
  --wakko-dialog-bg:#fff;
}
@supports not (height:100dvh){:root{--wakko-vvh:100vh}}
html[data-theme="dark"]{--wakko-dialog-bg:#0b1f32}

html,body{max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
input,select,textarea{max-width:100%;min-width:0}
textarea{overflow:auto}
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{display:block;width:100%;min-width:0}
input::-webkit-date-and-time-value{text-align:left}
select{width:100%}
img,video,canvas,svg{max-width:100%}

/* Prefixo ainda necessário em alguns Safari/WebViews. */
.crud-dialog::backdrop,.quick-actions-dialog::backdrop,.portfolio-gallery::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.auth-theme-toggle,.plain-theme-toggle,.app-body .dialog-head{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Evita conteúdo flex/grid forçando largura acima da viewport. */
.app-body .main-area,.app-body .page-content,.app-body .panel,.app-body .module-head,
.app-body .dash-hero,.app-body .top-actions,.app-body .settings-grid>*{min-width:0}
.app-body .page-content{width:100%}
.app-body .panel-head>div,.app-body .module-head>div,.app-body .dash-hero>div{min-width:0}
.app-body h1,.app-body h2,.app-body h3,.app-body p,.app-body strong,.app-body small{overflow-wrap:anywhere}

/* Formulários: controle de largura e toque, sem zoom involuntário no Safari iOS. */
.app-body .stack-form input,.app-body .stack-form select,.app-body .stack-form textarea,
.app-body .grid-form input,.app-body .grid-form select,.app-body .grid-form textarea,
.app-body .settings-grid input,.app-body .settings-grid select,.app-body .settings-grid textarea,
.public-body input,.public-body select,.public-body textarea,
.auth-body input,.auth-body select,.auth-body textarea,
.plain-body input,.plain-body select,.plain-body textarea{box-sizing:border-box;min-width:0;max-width:100%}

.app-body input[type="file"],.plain-body input[type="file"],.public-body input[type="file"]{width:100%;overflow:hidden}
.app-body input[type="file"]::file-selector-button,.plain-body input[type="file"]::file-selector-button,.public-body input[type="file"]::file-selector-button{
  max-width:100%;min-height:40px;margin-right:8px;border:1px solid #c8daea;border-radius:9px;padding:7px 10px;background:#f5f9fd;color:inherit;font:inherit
}

/* Tabelas administrativas ganham modo cartão via compat.js. */
@media(max-width:860px){
  .app-body section.table-panel:not(.module-table-desktop){overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
  .app-body section.table-panel:not(.module-table-desktop)>.table-scroll{overflow:visible!important;max-width:100%}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"]{display:block;width:100%;min-width:0!important;background:transparent!important}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] thead{display:none}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] tbody{display:grid;gap:10px;width:100%}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] tr{display:grid;width:100%;min-width:0;border:1px solid #dfe9f3;border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 6px 18px rgba(12,48,80,.045)}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] td{display:grid;grid-template-columns:minmax(92px,.72fr) minmax(0,1.28fr);gap:10px;align-items:start;width:100%;min-width:0;padding:11px 12px!important;border-bottom:1px solid #edf2f7!important;white-space:normal!important;text-align:left!important}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] td:last-child{border-bottom:0!important}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] td::before{content:attr(data-label);font-size:.72rem;line-height:1.35;font-weight:800;color:#6b8094;text-transform:uppercase;letter-spacing:.035em}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] td[colspan]{display:block;text-align:center!important;padding:22px!important}
  .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] td[colspan]::before{display:none}
  .app-body .responsive-cell-value{min-width:0;overflow-wrap:anywhere}
  .app-body td[data-label="Ações"] .responsive-cell-value{display:grid;grid-template-columns:1fr;gap:8px}
  .app-body td[data-label="Ações"] .responsive-cell-value>.btn,.app-body td[data-label="Ações"] .responsive-cell-value>form,.app-body td[data-label="Ações"] .responsive-cell-value>form .btn{width:100%;margin:0}
  html[data-theme="dark"] .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] tr{background:linear-gradient(180deg,#0e263c,#0b2033);border-color:#27465f;box-shadow:0 8px 22px rgba(0,0,0,.14)}
  html[data-theme="dark"] .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] td{border-color:#203b53!important;color:#e3f0fb}
  html[data-theme="dark"] .app-body section.table-panel:not(.module-table-desktop) table[data-responsive-table="true"] td::before{color:#91a9bd}
}

/* Navegação responsiva / safe areas. */
@media(max-width:860px){
  .app-body .topbar{
    height:auto!important;min-height:calc(64px + var(--wakko-safe-top));padding-top:var(--wakko-safe-top)!important;
    padding-left:max(14px,var(--wakko-safe-left))!important;padding-right:max(14px,var(--wakko-safe-right))!important
  }
  .app-body .sidebar{
    height:var(--wakko-vvh)!important;max-height:var(--wakko-vvh)!important;min-height:0!important;
    padding-top:max(16px,var(--wakko-safe-top))!important;padding-bottom:max(14px,var(--wakko-safe-bottom))!important;
    overflow:hidden!important
  }
  .app-body .sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .app-body .sidebar-foot{flex:0 0 auto}
  .app-body .page-content{padding-left:max(14px,var(--wakko-safe-left))!important;padding-right:max(14px,var(--wakko-safe-right))!important;padding-bottom:calc(94px + var(--wakko-safe-bottom))!important}
  .app-body .mobile-bottom{padding-left:max(10px,var(--wakko-safe-left))!important;padding-right:max(10px,var(--wakko-safe-right))!important;padding-bottom:var(--wakko-safe-bottom)!important}
  html.wakko-keyboard-open .app-body .mobile-bottom{display:none!important}
  body.menu-open{overflow:hidden;touch-action:none}
  body.menu-open .sidebar{touch-action:auto}

  .app-body .module-head,.app-body .dash-hero{display:grid!important;grid-template-columns:minmax(0,1fr);align-items:start!important;gap:12px!important}
  .app-body .module-head>.btn,.app-body .dash-hero>.btn{width:100%;min-width:0}
  .app-body .module-head-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .app-body .module-head-actions .btn{width:100%;min-width:0;padding-left:8px;padding-right:8px}
  .app-body .panel-head{align-items:flex-start;flex-wrap:wrap}
  .app-body .panel-head>div{width:100%}
}

@media(max-width:520px){
  .app-body .module-head-actions{grid-template-columns:1fr!important}
  .app-body .metrics-grid{grid-template-columns:1fr!important}
  .app-body .metric{min-height:0!important}
  .app-body .quick-grid{grid-template-columns:1fr 1fr!important}
  .app-body .top-actions{gap:7px}
  .app-body .icon-button{width:40px;height:40px;flex:0 0 40px}
}

/* Todos os controles do app usam 16px no telefone para evitar auto-zoom no Safari iOS. */
@media(max-width:700px){
  .app-body input,.app-body select,.app-body textarea{font-size:16px!important}
}

/* Dialogs: no celular funcionam como painel de viewport, não como desktop espremido. */
@media(max-width:700px){
  .app-body dialog.crud-dialog,.app-body dialog.financial-flow-dialog,.app-body dialog.receipt-issue-dialog{
    box-sizing:border-box!important;position:fixed!important;
    top:calc(var(--wakko-vvtop) + 6px)!important;bottom:auto!important;left:6px!important;right:6px!important;
    width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;
    height:calc(var(--wakko-vvh) - 12px)!important;max-height:calc(var(--wakko-vvh) - 12px)!important;
    margin:0 auto!important;padding:0!important;border-radius:20px!important;overflow:hidden!important
  }
  .app-body dialog.crud-dialog>form,.app-body dialog.financial-flow-dialog>form,.app-body dialog.receipt-issue-dialog>form,
  .app-body .payment-dialog>.stack-form,.app-body .financial-group-dialog-body{
    box-sizing:border-box;width:100%;height:100%;max-height:100%!important;min-height:0;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    scroll-padding-top:82px;scroll-padding-bottom:92px
  }
  .app-body dialog.crud-dialog>form:not(#module-crud-form),.app-body dialog.financial-flow-dialog>form,.app-body dialog.receipt-issue-dialog>form,
  .app-body .payment-dialog>.stack-form{padding:14px 14px max(14px,var(--wakko-safe-bottom))!important}

  .app-body dialog .dialog-head{
    position:sticky!important;top:-1px!important;z-index:30!important;margin:0 0 8px!important;
    padding:10px 2px 12px!important;background:var(--wakko-dialog-bg)!important;border-bottom:1px solid rgba(148,163,184,.22)!important
  }
  .app-body dialog .dialog-head>div{min-width:0}
  .app-body dialog .dialog-head h2{font-size:1.34rem!important;line-height:1.18;overflow-wrap:anywhere}
  .app-body dialog .dialog-head button{width:44px!important;height:44px!important;min-width:44px!important;border-radius:12px!important;display:grid!important;place-items:center!important;line-height:1!important}

  /* 16px evita zoom automático do Safari ao focar input. */
  .app-body dialog input,.app-body dialog select,.app-body dialog textarea,
  .app-body .settings-grid input,.app-body .settings-grid select,.app-body .settings-grid textarea,
  .auth-body input,.auth-body select,.auth-body textarea,.plain-body input,.plain-body select,.plain-body textarea,
  .public-body input,.public-body select,.public-body textarea{font-size:16px!important}
  .app-body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.app-body dialog select{min-height:50px!important}
  .app-body dialog input[type="checkbox"],.app-body dialog input[type="radio"]{min-height:0!important}
  .app-body dialog textarea{min-height:92px!important}
  .app-body dialog .stack-form{gap:11px!important}
  .app-body dialog .stack-form label{gap:5px!important}

  /* Endereço sempre em uma coluna no telefone: mais linhas e menos colunas. */
  .app-body .address-fields,.plain-body .address-fields,.public-body .address-fields,.app-body .settings-grid .address-fields{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .app-body .address-fields>*,.plain-body .address-fields>*,.public-body .address-fields>*,.app-body .settings-grid .address-fields>*{grid-column:auto!important;min-width:0!important}
  .app-body .form-grid-2,.app-body .form-grid-3,.app-body .receipt-inline-fields{grid-template-columns:minmax(0,1fr)!important}
  .app-body .receipt-inline-fields .wide{grid-column:auto!important}

  /* Ação principal sempre alcançável mesmo com teclado/barra do navegador. */
  .app-body #module-crud-form>[data-save-label],
  .app-body #tenant-form>[data-submit-label],
  .app-body #password-reset-form>button[type="submit"],
  .app-body #portfolio-new>form>.stack-form>.btn:last-child,
  .app-body dialog.financial-flow-dialog>form>.btn:last-child,
  .app-body dialog.receipt-issue-dialog>form>.btn:last-child{
    position:sticky!important;bottom:calc(-1px + var(--wakko-safe-bottom))!important;z-index:35!important;
    width:100%!important;min-height:52px!important;margin-top:4px!important;box-shadow:0 -12px 28px rgba(15,23,42,.10)
  }

  /* OS e financeiro mantêm suas composições especiais, mas sem largura mínima. */
  .app-body .crud-dialog-order,.app-body .crud-dialog-finance{max-width:calc(100vw - 12px)!important}
  .app-body .crud-dialog-order *,.app-body .crud-dialog-finance *{min-width:0}
  .app-body .wo-material-row,.app-body .finance-premium-layout,.app-body .finance-premium-main,.app-body .finance-premium-side{max-width:100%;min-width:0}
}

/* Telas de configurações / onboarding / login. */
@media(max-width:760px){
  .auth-body,.plain-body{padding-left:max(10px,var(--wakko-safe-left))!important;padding-right:max(10px,var(--wakko-safe-right))!important;padding-bottom:max(10px,var(--wakko-safe-bottom))!important}
  .auth-body .auth-shell{min-height:calc(var(--wakko-vvh) - 20px)!important}
  .auth-body .login-card{padding:24px 18px max(24px,var(--wakko-safe-bottom))!important}
  .auth-body .login-inner{width:100%!important;max-width:420px}
  .auth-body .stack-form input,.auth-body .stack-form select{min-height:50px}
  .plain-body .onboarding-wrap{min-height:calc(var(--wakko-vvh) - 24px)!important}
  .plain-body .onboarding-card{width:100%!important;padding:22px 16px!important;border-radius:20px!important}
  .plain-body .grid-form{grid-template-columns:1fr!important;gap:12px!important}
  .plain-body .span-2{grid-column:auto!important}
  .plain-body input,.plain-body select{min-height:50px}
  .app-body .settings-grid{grid-template-columns:1fr!important}
  .app-body .settings-save{position:sticky;bottom:calc(76px + var(--wakko-safe-bottom));z-index:12;width:100%;padding:8px;background:rgba(245,249,253,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px}
  .app-body .settings-save .btn{width:100%;min-height:50px}
  html[data-theme="dark"] .app-body .settings-save{background:rgba(8,27,44,.92)}
}

/* Perfil público e solicitações. */
@media(max-width:860px){
  .public-body .public-header{min-height:calc(60px + var(--wakko-safe-top));height:auto!important;padding-top:var(--wakko-safe-top)!important;padding-left:max(14px,var(--wakko-safe-left))!important;padding-right:max(14px,var(--wakko-safe-right))!important}
  .public-body .public-main{padding-bottom:calc(92px + var(--wakko-safe-bottom))!important}
  .public-body .mobile-cta{padding-left:max(10px,var(--wakko-safe-left))!important;padding-right:max(10px,var(--wakko-safe-right))!important;padding-bottom:calc(8px + var(--wakko-safe-bottom))!important}
  .public-body .public-request-form input,.public-body .public-request-form select{min-height:50px}
  .public-body .public-request-form{gap:11px!important}
  .public-mobile-menu{max-height:calc(var(--wakko-vvh) - 86px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .portfolio-gallery{max-height:calc(var(--wakko-vvh) - 12px)!important}
  .portfolio-gallery-shell{max-height:calc(var(--wakko-vvh) - 12px)!important}
}
@media(max-width:520px){
  .public-body .public-request-form .two-cols{grid-template-columns:1fr!important}
  .public-body .hero-actions{grid-template-columns:1fr 1fr!important}
  .public-body .hero-actions .btn:first-child{grid-column:1/-1}
  .public-body .slots{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Recibos e páginas utilitárias: toolbar sem estouro em telas estreitas. */
@media(max-width:560px){
  .plain-body .receipt-toolbar-left,.plain-body .receipt-toolbar-right{grid-template-columns:1fr!important}
  .plain-body .receipt-toolbar .btn{width:100%}
  .plain-body .receipt-cancel-form{padding:12px!important}
}

/* Paisagem curta: reduz chrome interno sem sacrificar toque. */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .app-body dialog.crud-dialog,.app-body dialog.financial-flow-dialog,.app-body dialog.receipt-issue-dialog{top:2px!important;height:calc(var(--wakko-vvh) - 4px)!important;max-height:calc(var(--wakko-vvh) - 4px)!important;border-radius:14px!important}
  .app-body dialog .dialog-head{padding:6px 2px 8px!important}
  .app-body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.app-body dialog select{min-height:44px!important}
  .app-body dialog textarea{min-height:72px!important}
  .app-body .mobile-bottom{height:calc(58px + var(--wakko-safe-bottom))!important}
}

/* Usuários que preferem menos animação. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}