/* OWDEX Leads 0.3.9 — identidade ativa da marca + responsividade integral */

/*
 * O sistema continua com os ícones funcionais multicoloridos da v0.3.8.
 * Somente o estado selecionado da navegação passa a usar a paleta oficial
 * da marca OWDEX Leads (rosa > magenta > roxo > violeta), como a própria logo.
 */
.app-body .nav-item.is-active{
  color:#fff!important;
  border-color:transparent!important;
  background:var(--leads-gradient)!important;
  box-shadow:0 13px 30px rgba(151,0,224,.25)!important;
}
.app-body .nav-item.is-active .nav-icon{
  color:#fff!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;
}
.app-body .nav-item.is-active:hover{
  color:#fff!important;
  transform:translateX(2px)!important;
  filter:saturate(1.04) brightness(.99);
}

/* Base responsiva: nenhum filho de grid/flex deve forçar largura da página. */
.app-body :where(.workspace,.page-content,.card,.metric-card,.product-card,.content-grid,.stack,.card-head,.split-head,.page-actions,.topbar,.topbar-actions,.filter-bar,.form-grid,.details-grid,.org-grid,.privacy-admin-grid,.question-main,.user-mini-copy){
  min-width:0;
}
.app-body :where(img,svg,video,canvas){max-width:100%}
.app-body :where(input,select,textarea,button){max-width:100%}
.app-body .page-content{width:100%;overflow-x:clip}
.app-body .table-wrap,.app-body .kanban{overscroll-behavior-inline:contain}
.app-body .card-head>*,.app-body .split-head>*{min-width:0}
.app-body .card-head :where(h2,h3,p),.app-body .split-head :where(h2,h3,p){overflow-wrap:anywhere}
.app-body .topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}

/* Desktop intermediário / notebooks menores. */
@media (max-width:1280px){
  .app-body .page-content{padding:24px!important}
  .app-body .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .app-body .cards-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-body .content-grid.two-one{grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr)!important}
  .app-body .topbar{padding-inline:22px!important}
  .app-body .tenant-chip{max-width:180px}
}

@media (max-width:1080px) and (min-width:761px){
  :root{--leads-sidebar-width:260px;--leads-sidebar-collapsed:74px}
  .app-body .sidebar{padding-inline:11px!important}
  .app-body .nav-item{padding-inline:8px!important;gap:9px!important;font-size:13px!important}
  .app-body .content-grid.two,
  .app-body .content-grid.two-one,
  .app-body .privacy-admin-grid{grid-template-columns:1fr!important}
  .app-body .filter-bar{grid-template-columns:minmax(0,1fr) minmax(160px,.45fr)!important}
  .app-body .filter-bar>*:nth-child(n+3){min-width:0}
  .app-body .topbar h1{font-size:22px!important}
  .app-body .status-chip{display:none!important}
}

/* Tablet e celular: conteúdo em uma coluna e ações sem estouro horizontal. */
@media (max-width:760px){
  .app-body .page-content{padding:14px!important;overflow-x:hidden!important}
  .app-body .topbar{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))!important}
  .app-body .topbar>div:nth-child(2){min-width:0!important}
  .app-body .topbar-actions{flex:0 0 auto!important;max-width:46%!important}
  .app-body .topbar h1{font-size:clamp(17px,5vw,20px)!important}
  .app-body .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-body .cards-list,
  .app-body .content-grid.two,
  .app-body .content-grid.two-one,
  .app-body .filter-bar,
  .app-body .details-grid,
  .app-body .org-grid,
  .app-body .privacy-admin-grid{grid-template-columns:1fr!important}
  .app-body .page-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .app-body .page-actions>*{width:100%!important;min-width:0!important}
  .app-body .card-head,.app-body .split-head{align-items:stretch!important;flex-direction:column!important}
  .app-body .card-head>.btn,.app-body .split-head>.btn{width:100%!important}
  .app-body .lead-contact-actions{flex-wrap:wrap!important}
  .app-body .lead-contact-actions>*{flex:1 1 145px!important}
  .app-body .row-actions{width:100%;gap:7px!important}
  .app-body .row-actions .btn{flex:1 1 120px!important}
  .app-body table{min-width:620px!important}
  .app-body .modal-card,.app-body .modal-card.wide{max-height:calc(100dvh - env(safe-area-inset-top))!important}
  .app-body .sidebar-footer{padding-bottom:max(14px,env(safe-area-inset-bottom))!important}
}

@media (max-width:480px){
  .app-body .metric-grid{grid-template-columns:1fr!important}
  .app-body .metric-card{min-height:0!important}
  .app-body .tenant-chip{display:none!important}
  .app-body .topbar-actions{max-width:none!important}
  .app-body .card{padding:15px!important}
  .app-body .modal-card,.app-body .modal-card.wide{padding:16px!important}
  .app-body table{min-width:560px!important}
}

/*
 * LOGIN / PRIMEIRO ACESSO
 * Em desktop o login ocupa exatamente a altura útil da tela. O documento não
 * cresce além do viewport; a composição se adapta à altura disponível.
 * Em telas estreitas a área visual some e o cartão volta a rolar normalmente.
 */
@media (min-width:901px){
  html:has(.auth-body-v30),body.auth-body-v30{height:100%;overflow:hidden!important}
  .auth-body-v30{height:100vh!important;height:100dvh!important;min-height:0!important}
  .auth-shell-v30{height:100vh!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
  .auth-visual-panel-v30,.auth-card-v30{height:100vh!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
  .auth-visual-panel-v30{padding:clamp(28px,4.4vh,56px) clamp(36px,5vw,88px)!important}
  .auth-wordmark{width:clamp(158px,20vh,220px)!important;padding:8px 11px!important;border-radius:16px!important}
  .auth-visual-copy{margin-top:clamp(28px,6vh,66px)!important}
  .auth-visual-copy h1{font-size:clamp(42px,4.35vw,70px)!important;line-height:1.01!important;margin:clamp(12px,2vh,18px) 0 clamp(10px,1.7vh,18px)!important}
  .auth-visual-copy p{font-size:clamp(14px,1.1vw,18px)!important;line-height:1.55!important}
  .auth-feature-grid{margin-top:clamp(16px,2.7vh,28px)!important;gap:9px!important}
  .auth-feature-grid>div{min-height:0!important;padding:clamp(10px,1.5vh,14px)!important}
  .auth-feature-grid>div>span{width:34px!important;height:34px!important;margin-bottom:7px!important}
  .auth-feature-grid small{line-height:1.35!important}
  .auth-visual-art{bottom:5%!important;transform:scale(.92)!important}
  .auth-card-v30{padding:clamp(30px,5.2vh,68px) clamp(38px,5vw,76px)!important}
  .auth-card-v30 .auth-card-head h1{font-size:clamp(30px,2.3vw,38px)!important}
  .auth-card-v30 .auth-card-head p{margin-bottom:clamp(18px,3vh,28px)!important}
}

/* Alturas de notebook: compacta o painel sem cortar conteúdo nem criar scroll. */
@media (min-width:901px) and (max-height:860px){
  .auth-visual-panel-v30{padding-top:28px!important;padding-bottom:26px!important}
  .auth-wordmark{width:clamp(140px,18vh,176px)!important}
  .auth-visual-copy{margin-top:26px!important}
  .auth-visual-copy h1{font-size:clamp(38px,4vw,58px)!important;margin:11px 0 10px!important}
  .auth-visual-copy p{font-size:14px!important;line-height:1.45!important}
  .auth-feature-grid{margin-top:16px!important}
  .auth-feature-grid>div{padding:9px 10px!important}
  .auth-feature-grid>div>span{width:30px!important;height:30px!important;margin-bottom:5px!important}
  .auth-feature-grid small{font-size:9.5px!important}
  .auth-visual-footer{font-size:9.5px!important}
  .auth-visual-art{display:none!important}
  .auth-card-v30{padding-top:30px!important;padding-bottom:30px!important}
}

@media (min-width:901px) and (max-height:700px){
  .auth-wordmark{width:118px!important}
  .auth-visual-copy{margin-top:17px!important}
  .auth-kicker{padding:6px 9px!important;font-size:10.5px!important}
  .auth-visual-copy h1{font-size:38px!important}
  .auth-feature-grid{margin-top:12px!important}
  .auth-feature-grid small{display:none!important}
  .auth-feature-grid>div{display:flex!important;align-items:center!important;gap:8px!important;padding:8px!important}
  .auth-feature-grid>div>span{margin:0!important;flex:0 0 28px!important;width:28px!important;height:28px!important}
  .auth-card-v30{padding-top:22px!important;padding-bottom:22px!important}
}

@media (max-width:900px){
  html:has(.auth-body-v30),body.auth-body-v30{height:auto;overflow-x:hidden!important;overflow-y:auto!important}
  .auth-body-v30{min-height:100dvh!important;height:auto!important}
  .auth-shell-v30,.auth-card-v30{min-height:100dvh!important;height:auto!important;overflow:visible!important}
  .auth-card-v30{justify-content:center!important;padding:max(28px,env(safe-area-inset-top)) max(20px,6vw) max(30px,env(safe-area-inset-bottom))!important}
  .auth-mobile-brand-v35{margin-bottom:clamp(26px,7vw,44px)!important}
  .auth-mobile-brand-v35 .owdex-leads-wordmark{width:min(170px,58vw)!important}
}

@media (max-width:460px){
  .auth-card-v30{justify-content:flex-start!important;padding-inline:18px!important}
  .auth-card-v30 .auth-card-head h1{font-size:30px!important}
  .auth-card-v30 .auth-card-head p{margin-bottom:20px!important}
  .auth-form-v21{gap:14px!important}
  .auth-input-wrap{height:48px!important}
}

@media (prefers-reduced-motion:reduce){
  .app-body .nav-item,.app-body .sidebar,.app-body .workspace,.btn{transition:none!important}
}