/* Marco Iris Tecnologia v2.2.0
   Validação final: ações no fluxo, teclado mobile, menu estável e performance. */

:root{
  --osv-action-gap:10px;
  --osv-action-height:54px;
  --mobile-bottom-nav-height:76px;
  --input-surface-final:rgba(7,31,61,.92);
}

/* =========================================================
   1. MODAIS E FORMULÁRIOS: UMA ÚNICA REGIÃO DE ROLAGEM
   ========================================================= */
#modal-root .modal{
  display:flex!important;
  flex-direction:column!important;
  width:min(760px,100%)!important;
  height:auto!important;
  max-height:calc(100dvh - 36px)!important;
  overflow:hidden!important;
}
#modal-root .modal.wide,
#modal-root .modal.order-modal{width:min(1120px,100%)!important}
#modal-root .modal>.modal-header{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
}
#modal-root .modal>.modal-body,
#modal-root .modal>.modal-body.has-docked-actions{
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scroll-padding-top:18px;
  scroll-padding-bottom:24px;
}
#modal-root .modal-body>form,
#modal-root .modal-body.has-docked-actions>form{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}
#modal-root .modal-form-scroll{
  display:contents!important;
  overflow:visible!important;
}

/* Todas as ações pertencem ao fluxo do formulário. */
#modal-root .modal .form-actions,
#modal-root .modal .sticky-actions,
#modal-root .modal .form-actions.modal-action-dock,
#modal-root .modal .sticky-actions.modal-action-dock,
#modal-root .modal.has-docked-actions .form-actions,
#modal-root .modal.has-docked-actions .sticky-actions,
body.keyboard-open #modal-root .modal .form-actions,
body.modal-field-active #modal-root .modal .form-actions{
  position:static!important;
  inset:auto!important;
  display:flex!important;
  flex:0 0 auto!important;
  width:100%!important;
  margin:20px 0 0!important;
  padding:16px 0 0!important;
  gap:10px!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
  flex-wrap:wrap!important;
  background:transparent!important;
  border:0!important;
  border-top:1px solid rgba(126,184,242,.13)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#modal-root .modal .form-actions .btn{
  min-height:48px!important;
  min-width:132px!important;
  white-space:normal!important;
  text-align:center!important;
  justify-content:center!important;
}

/* =========================================================
   2. NOVA/EDITAR OSV: AÇÕES DEPOIS DE ANEXOS TÉCNICOS
   ========================================================= */
#modal-root form.osv-form>.osv-technical-attachments{
  margin-bottom:0!important;
}
#modal-root form.osv-form>.osv-form-actions{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:var(--osv-action-gap)!important;
  margin-top:18px!important;
  padding-top:16px!important;
}
#modal-root form.osv-form>.osv-form-actions>.btn{
  width:100%!important;
  min-width:0!important;
  min-height:var(--osv-action-height)!important;
  padding:11px 14px!important;
  gap:8px!important;
  font-size:.88rem!important;
  line-height:1.2!important;
  font-weight:750!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#modal-root form.osv-form>.osv-form-actions>.btn svg{
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
}
#modal-root form.osv-form>.osv-form-actions>.action-save{
  background:linear-gradient(135deg,var(--orange),#ff8d64)!important;
  color:#fff!important;
}
#modal-root form.osv-form>.osv-form-actions>.action-whatsapp{
  color:#fff!important;
}

/* =========================================================
   3. DESCONTO GERAL E ADICIONAR NOVO TIPO
   ========================================================= */
#modal-root .order-total-panel .discount-input,
#modal-root input[data-field="general-discount"]{
  width:100%!important;
  min-height:52px!important;
  padding:12px 15px!important;
  color:var(--text-primary,#f3f8ff)!important;
  -webkit-text-fill-color:var(--text-primary,#f3f8ff)!important;
  background:var(--input-surface-final)!important;
  border:1px solid rgba(70,151,245,.34)!important;
  border-radius:14px!important;
  outline:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  font:inherit!important;
}
#modal-root .order-total-panel .discount-input:hover,
#modal-root input[data-field="general-discount"]:hover{
  border-color:rgba(82,166,255,.52)!important;
}
#modal-root .order-total-panel .discount-input:focus,
#modal-root input[data-field="general-discount"]:focus{
  background:rgba(7,35,69,.98)!important;
  border-color:rgba(82,166,255,.92)!important;
  box-shadow:0 0 0 3px rgba(52,133,230,.17)!important;
}
#modal-root .order-total-panel .discount-input:disabled,
#modal-root input[data-field="general-discount"]:disabled{
  opacity:.62!important;
}
#modal-root .order-total-panel .discount-input:-webkit-autofill,
#modal-root input[data-field="general-discount"]:-webkit-autofill{
  -webkit-text-fill-color:#f3f8ff!important;
  -webkit-box-shadow:0 0 0 1000px #071f3d inset!important;
  transition:background-color 9999s ease-out 0s!important;
}

/* 2.2.6 — os botões de cadastro rápido viraram um "+" compacto ao lado do campo.
   O botão largo de largura total abaixo do seletor de tipo deixou de existir.
   Mesma identidade visual do sistema: mesmas cores, bordas, raio e transição de antes. */
#modal-root .inline-add-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:44px!important;
  padding:0 12px!important;
  margin:0!important;
  color:#e7f3ff!important;
  background:rgba(48,129,225,.15)!important;
  border:1px solid rgba(82,166,255,.38)!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  font:inherit!important;
  font-weight:700!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  transition:transform 150ms ease,background-color 150ms ease,border-color 150ms ease!important;
}
#modal-root .inline-add-button svg{width:18px;height:18px;flex:0 0 auto}
#modal-root .inline-add-button:hover{background:rgba(48,129,225,.22)!important;border-color:rgba(102,181,255,.55)!important}
#modal-root .inline-add-button:active{transform:scale(.985)!important}
#modal-root .inline-add-button:focus-visible{outline:3px solid rgba(82,166,255,.24)!important;outline-offset:2px!important}

/* Linha [ seletor ][ + ] — o "+" nunca cobre a seta do select nem cai para a linha de baixo. */
#modal-root .inline-add-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}
#modal-root .inline-add-row>select,#modal-root .inline-add-row>input{min-width:0!important;width:100%!important}
#modal-root .equipment-type-field{min-width:0}

/* =========================================================
   4. MENU MOBILE ESTÁVEL E BLOQUEIO DO FUNDO
   ========================================================= */
@media(max-width:900px){
  /* Evita que ancestrais animados criem um novo containing block para o drawer fixed. */
  #root .app-bg,
  #root .app-shell{transform:none!important;filter:none!important;perspective:none!important}

  body.menu-scroll-locked{overflow:hidden!important;overscroll-behavior:none!important}
  .sidebar-scrim{
    position:fixed!important;
    inset:0!important;
    z-index:10000!important;
    height:100dvh!important;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    z-index:10001!important;
    width:min(82vw,340px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    padding-top:max(16px,env(safe-area-inset-top))!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
  }
  .mobile-bottom-nav{z-index:9000!important}

  /* Uma única rolagem no modal; ações sempre no fim do documento. */
  #modal-root .modal,
  #modal-root .modal.mobile-bottom-sheet,
  #modal-root .modal.has-docked-actions,
  #modal-root .modal.mobile-bottom-sheet.has-docked-actions{
    width:100%!important;
    height:auto!important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)))!important;
    border-radius:24px 24px 0 0!important;
    overflow:hidden!important;
  }
  #modal-root .modal>.modal-body{
    padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
  }
  #modal-root .modal .form-actions,
  #modal-root .modal .sticky-actions,
  #modal-root .modal .form-actions.modal-action-dock,
  body.keyboard-open #modal-root .modal .form-actions,
  body.modal-field-active #modal-root .modal .form-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:18px!important;
    padding:16px 0 0!important;
    gap:10px!important;
  }
  #modal-root .modal .form-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:10px 12px!important;
    font-size:.86rem!important;
    line-height:1.18!important;
  }

  #modal-root form.osv-form>.osv-form-actions,
  body.keyboard-open #modal-root form.osv-form>.osv-form-actions,
  body.modal-field-active #modal-root form.osv-form>.osv-form-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:10px!important;
    margin:18px 0 0!important;
    padding:16px 0 calc(4px + env(safe-area-inset-bottom))!important;
  }
  #modal-root form.osv-form>.osv-form-actions>.btn{
    grid-column:auto!important;
    min-height:54px!important;
    padding:11px 10px!important;
    font-size:.84rem!important;
  }
  #modal-root form.osv-form>.osv-form-actions>.action-save{
    grid-column:1 / -1!important;
    min-height:56px!important;
    font-size:.92rem!important;
  }

  /* Página principal alcança o último card sem área vazia exagerada. */
  html.marco-mobile-ui,
  html.marco-mobile-ui body:not(.login-page):not(.modal-open):not(.menu-open),
  body:not(.login-page) #root,
  body:not(.login-page) #root .app-bg,
  body:not(.login-page) #root .app-shell,
  body:not(.login-page) #root .main{
    height:auto!important;
    max-height:none!important;
    min-height:100dvh!important;
    overflow:visible!important;
  }
  body:not(.login-page) #root .main{padding-bottom:0!important}
  body:not(.login-page) #root .content{
    overflow:visible!important;
    padding-bottom:calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 20px)!important;
  }
  body:not(.login-page) #view-root{padding-bottom:0!important}
  body:not(.login-page) #view-root::after{display:none!important}

  /* Login: sem altura artificial; rola somente quando o aparelho exigir. */
  html.marco-mobile-ui:has(body.login-page),
  html.marco-mobile-ui body.login-page,
  body.login-page,
  body.login-page #root,
  body.login-page .login-screen{
    box-sizing:border-box!important;
    height:auto!important;
    max-height:none!important;
    min-height:100dvh!important;
  }
  html.marco-mobile-ui:has(body.login-page),
  html.marco-mobile-ui body.login-page,
  body.login-page,
  body.login-page #root{overflow-x:hidden!important;overflow-y:auto!important}
  body.login-page .login-screen{
    overflow:hidden!important;
    padding-bottom:max(18px,env(safe-area-inset-bottom))!important;
  }

  /* Menos custo de pintura no celular. */
  .sidebar,
  .mobile-bottom-nav,
  #modal-root .modal-header,
  #modal-root .modal,
  .card,
  .topbar{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  #modal-root .form-section{content-visibility:visible!important;contain:none!important}
  .card,.list-row,.agenda-compact-card{box-shadow:none!important}
  .sidebar,.sidebar-scrim,.modal,.modal-backdrop,.btn,.icon-btn{
    transition-property:transform,opacity,background-color,border-color!important;
  }
}

/* =========================================================
   5. TOQUE, FOCO E SEGURANÇA DOS BOTÕES
   ========================================================= */
button,.btn,.icon-btn,[role="button"]{touch-action:manipulation}
#modal-root button{min-height:44px}
#modal-root button:focus-visible,
#modal-root input:focus-visible,
#modal-root select:focus-visible,
#modal-root textarea:focus-visible{
  outline:3px solid rgba(82,166,255,.22)!important;
  outline-offset:2px!important;
}

/* v2.2.0 — portal real do menu mobile, fora da árvore rolável do aplicativo. */
@media(max-width:900px){
  html.marco-mobile-ui body.menu-scroll-locked{
    position:fixed!important;
    overflow:hidden!important;
  }
  body>.mobile-menu-layer{
    position:fixed!important;
    inset:0!important;
    z-index:10000!important;
    width:100vw!important;
    height:100dvh!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  body.menu-open>.mobile-menu-layer{pointer-events:auto!important}
  body>.mobile-menu-layer>.sidebar-scrim{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:0!important;
  }
  body>.mobile-menu-layer>.sidebar{
    position:absolute!important;
    inset:0 auto 0 0!important;
    z-index:1!important;
    height:100%!important;
    max-height:100%!important;
  }
}

/* O modal sempre fica acima da navegação inferior. A barra do app não pode cobrir Salvar OSV. */
@media(max-width:900px){
  #modal-root .modal-backdrop{
    z-index:11000!important;
  }
}

/* =========================================================
   v2.2.0 — COMBOBOX, PDF, RASCUNHO E REVISÃO WHATSAPP
   ========================================================= */
#modal-root .client-picker,
#modal-root .client-search-row{position:relative}
#modal-root .client-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
#modal-root .client-search-row>[data-client-search]{grid-column:1;min-width:0}
#modal-root .client-search-row>.btn{grid-column:2;white-space:nowrap}
#modal-root .client-suggestions{
  position:absolute;
  z-index:12050;
  top:calc(100% + 7px);
  left:0;
  right:0;
  max-height:min(310px,42vh);
  overflow-x:hidden;
  overflow-y:auto;
  padding:7px;
  border:1px solid rgba(91,169,255,.34);
  border-radius:15px;
  background:linear-gradient(160deg,rgba(8,39,76,.99),rgba(3,22,45,.99));
  box-shadow:0 18px 44px rgba(0,7,22,.48),inset 0 1px rgba(255,255,255,.04);
}
#modal-root .client-suggestions[hidden]{display:none!important}
#modal-root .client-suggestion,
#modal-root .client-suggestion-empty{
  width:100%;min-height:46px;padding:10px 12px;border:0;border-radius:11px;
  color:var(--text-primary,#f3f8ff);background:transparent;text-align:left;
}
#modal-root .client-suggestion{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
#modal-root .client-suggestion strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#modal-root .client-suggestion small{flex:0 0 auto;color:var(--text-muted,#a9c1db)}
#modal-root .client-suggestion:hover,
#modal-root .client-suggestion[aria-selected="true"]{background:rgba(55,143,245,.2);box-shadow:inset 0 0 0 1px rgba(87,167,255,.28)}
#modal-root .client-suggestion.add-client{justify-content:flex-start;color:#a9d6ff;border-top:1px solid rgba(114,177,240,.14);border-radius:0 0 10px 10px}
#modal-root .client-suggestion-empty{display:flex;align-items:center;color:var(--text-muted,#a9c1db)}

#modal-root form.osv-form>.osv-form-actions>.pdf-state-indicator{
  grid-column:1/-1;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  color:var(--text-muted,#a9c1db);
  background:rgba(5,31,61,.68);
  border:1px solid rgba(98,163,230,.18);
  border-radius:12px;
}
#modal-root .pdf-state-indicator .pdf-state-icon{width:10px;height:10px;border-radius:50%;background:#7291b2;box-shadow:0 0 0 4px rgba(114,145,178,.12)}
#modal-root .pdf-state-indicator[data-pdf-state="generating"] .pdf-state-icon{border:2px solid rgba(174,215,255,.25);border-top-color:#9ed2ff;background:transparent;animation:pdf-state-spin .7s linear infinite}
#modal-root .pdf-state-indicator[data-pdf-state="ready"]{color:#c9ffe0;border-color:rgba(64,210,130,.3);background:rgba(16,93,61,.2)}
#modal-root .pdf-state-indicator[data-pdf-state="ready"] .pdf-state-icon{background:#45d68b;box-shadow:0 0 0 4px rgba(69,214,139,.13)}
#modal-root .pdf-state-indicator[data-pdf-state="dirty"]{color:#ffe0a4;border-color:rgba(255,177,61,.3);background:rgba(130,78,7,.2)}
#modal-root .pdf-state-indicator[data-pdf-state="dirty"] .pdf-state-icon{background:#ffb23d}
#modal-root .pdf-state-indicator[data-pdf-state="error"]{color:#ffd0d6;border-color:rgba(255,92,113,.3);background:rgba(121,22,42,.2)}
#modal-root .pdf-state-indicator[data-pdf-state="error"] .pdf-state-icon{background:#ff6477}
#modal-root .pdf-button-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;border-radius:50%;animation:pdf-state-spin .7s linear infinite}
@keyframes pdf-state-spin{to{transform:rotate(360deg)}}
#modal-root .draft-save-state{margin-left:auto;padding:6px 9px;border-radius:999px;color:#a9c1db;background:rgba(52,125,201,.12);font-size:.73rem;white-space:nowrap}
#modal-root .draft-save-state[data-tone="saving"]{color:#cbe7ff}
#modal-root .draft-save-state[data-tone="saved"]{color:#bff5d5;background:rgba(52,181,112,.12)}

#confirm-root .whatsapp-review-backdrop{
  position:fixed;inset:0;z-index:15000;display:grid;place-items:center;padding:18px;
  background:rgba(0,8,23,.76);
}
#confirm-root .whatsapp-review-modal{
  width:min(620px,100%);max-height:min(760px,calc(100dvh - 36px));overflow:auto;
  padding:22px;border:1px solid rgba(104,174,246,.28);border-radius:22px;
  color:var(--text-primary,#f3f8ff);background:linear-gradient(155deg,#0b315d,#061c39 72%);
  box-shadow:0 28px 76px rgba(0,5,18,.58);
}
#confirm-root .whatsapp-review-modal header h2{margin:0 0 6px;font-size:1.25rem}
#confirm-root .whatsapp-review-modal header p{margin:0;color:var(--text-muted,#abc3dc)}
#confirm-root .whatsapp-review-modal textarea{
  width:100%;min-height:180px;margin-top:18px;padding:14px;resize:vertical;
  color:#f4f8ff;-webkit-text-fill-color:#f4f8ff;background:rgba(3,21,43,.72);
  border:1px solid rgba(102,171,242,.3);border-radius:14px;font:inherit;line-height:1.5;
}
#confirm-root .whatsapp-review-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
#confirm-root .whatsapp-review-actions .btn{min-width:0;min-height:46px;width:100%;white-space:normal;text-align:center;justify-content:center}

@media(max-width:900px){
  /* 2.2.6 — mesmo no mobile o "+" continua ao lado do campo: alvo de toque de 44px, sem rolagem lateral. */
  #modal-root .client-search-row{grid-template-columns:minmax(0,1fr) auto}
  #modal-root .client-search-row>[data-client-search]{grid-column:1;width:100%}
  #modal-root .client-search-row>.inline-add-button{grid-column:2;min-width:44px!important;min-height:44px!important}
  #modal-root .client-suggestions{top:calc(50% + 4px);max-height:min(270px,38vh)}
  #confirm-root .whatsapp-review-backdrop{align-items:end;padding:10px 10px max(10px,env(safe-area-inset-bottom))}
  #confirm-root .whatsapp-review-modal{padding:18px;border-radius:22px 22px 14px 14px;max-height:calc(100dvh - 20px)}
  #confirm-root .whatsapp-review-modal textarea{min-height:150px}
  #confirm-root .whatsapp-review-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #confirm-root .whatsapp-review-actions .btn{min-height:48px;padding:9px 6px;font-size:.78rem}
}
@media(max-width:360px){#confirm-root .whatsapp-review-actions{grid-template-columns:1fr}.whatsapp-review-actions .btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){#modal-root .pdf-button-spinner,#modal-root .pdf-state-indicator[data-pdf-state="generating"] .pdf-state-icon{animation-duration:1.4s}}

/* v2.2.0 — acabamento do cabeçalho do rascunho e do autocomplete. */
#modal-root .osv-code-preview{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
}
#modal-root .osv-code-preview>span:first-child{margin-right:0}
#modal-root .osv-code-preview>strong{white-space:nowrap}
#modal-root .osv-code-preview>[data-draft-status]{margin-left:auto}
#modal-root .client-search-row.suggestions-open>.btn[data-action="new-client-from-order"]{
  visibility:hidden;
  pointer-events:none;
}
#modal-root .client-suggestions{
  background:#061f3e;
}
@media(max-width:900px){
  #modal-root .osv-code-preview>[data-draft-status]{margin-left:0;flex:1 1 100%;width:max-content}
}