/* ==========================================================================
   v6.8.0 — Mobile UX Polish
   Login, safe-area mobile, botões legíveis e acabamento PWA.
   ========================================================================== */

:root{
  --ux-blue:#2563eb;
  --ux-blue2:#1d4ed8;
  --ux-purple:#7c3aed;
  --ux-green:#16a34a;
  --ux-red:#dc2626;
  --ux-orange:#f97316;
  --ux-text:#0f172a;
  --ux-muted:#64748b;
  --ux-border:#dbe4f0;
}

/* --------------------------------------------------------------------------
   1. Safe-area mobile / topo branco
   -------------------------------------------------------------------------- */
@media(max-width: 820px){
  body,
  body.ip-app,
  html body{
    background:
      linear-gradient(180deg,#133f78 0, #1e5f9e 92px, #f5f7fb 260px) !important;
  }

  .app-header,
  .topbar,
  .ip-topbar,
  header,
  .header{
    background:
      linear-gradient(135deg, rgba(15,23,42,.92), rgba(37,99,235,.82), rgba(124,58,237,.78)) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 10px 30px rgba(15,23,42,.18) !important;
    color:#fff !important;
  }

  .app-header *,
  .topbar *,
  .ip-topbar *,
  header *,
  .header *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  #btn-menu,
  .btn-menu,
  .menu-toggle,
  .hamburger{
    background:rgba(255,255,255,.18) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 12px 28px rgba(15,23,42,.18) !important;
  }

  .app-main,
  .main-content,
  #app-content,
  .content,
  .ip-content,
  main{
    padding-top:12px !important;
  }
}

/* --------------------------------------------------------------------------
   2. Login premium / inputs com ícones sem sobrepor placeholder
   -------------------------------------------------------------------------- */
.login-card,
.ip-login-card,
.auth-card,
.login-box,
.ip-auth-card{
  border-radius:28px !important;
  box-shadow:0 24px 80px rgba(15,23,42,.16) !important;
  border:1px solid rgba(226,232,240,.9) !important;
  background:rgba(255,255,255,.96) !important;
}

.login-card input:not([type="checkbox"]):not([type="radio"]),
.ip-login-card input:not([type="checkbox"]):not([type="radio"]),
.auth-card input:not([type="checkbox"]):not([type="radio"]),
.login-box input:not([type="checkbox"]):not([type="radio"]),
.ip-auth-card input:not([type="checkbox"]):not([type="radio"]){
  min-height:58px !important;
  border-radius:16px !important;
  padding-left:58px !important;
  font-size:18px !important;
  font-weight:750 !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  background:#fff !important;
  border:1px solid #cbd5e1 !important;
}

.login-card input::placeholder,
.ip-login-card input::placeholder,
.auth-card input::placeholder,
.login-box input::placeholder,
.ip-auth-card input::placeholder{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  opacity:1 !important;
}

/* ícones em campos de login */
.login-card .input-icon,
.ip-login-card .input-icon,
.auth-card .input-icon,
.login-box .input-icon,
.ip-auth-card .input-icon,
.login-card .field-icon,
.ip-login-card .field-icon,
.auth-card .field-icon,
.login-box .field-icon,
.ip-auth-card .field-icon{
  position:absolute !important;
  left:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  pointer-events:none !important;
  opacity:.9 !important;
}

/* fallback para emojis soltos antes dos inputs */
.login-card label + input,
.ip-login-card label + input,
.auth-card label + input,
.login-box label + input{
  margin-top:8px !important;
}

/* Segmented control login */
.login-tabs,
.auth-tabs,
.ip-login-tabs,
.login-method-tabs{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:0 !important;
  padding:4px !important;
  border:1px solid #dbe4f0 !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04) !important;
}

.login-tabs button,
.auth-tabs button,
.ip-login-tabs button,
.login-method-tabs button,
.login-tabs a,
.auth-tabs a,
.ip-login-tabs a,
.login-method-tabs a{
  min-height:52px !important;
  border-radius:15px !important;
  border:0 !important;
  background:transparent !important;
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  font-weight:900 !important;
  text-align:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.login-tabs .active,
.auth-tabs .active,
.ip-login-tabs .active,
.login-method-tabs .active,
.login-tabs button[aria-selected="true"],
.auth-tabs button[aria-selected="true"],
.ip-login-tabs button[aria-selected="true"]{
  background:linear-gradient(135deg,var(--ux-blue),var(--ux-purple)) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 12px 28px rgba(37,99,235,.22) !important;
}

/* botão login */
.login-card button[type="submit"],
.ip-login-card button[type="submit"],
.auth-card button[type="submit"],
.login-box button[type="submit"],
.ip-auth-card button[type="submit"],
.login-card input[type="submit"],
.ip-login-card input[type="submit"],
.auth-card input[type="submit"],
.login-box input[type="submit"]{
  min-height:58px !important;
  border-radius:17px !important;
  background:linear-gradient(135deg,var(--ux-blue),var(--ux-purple)) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:18px !important;
  font-weight:950 !important;
  box-shadow:0 16px 34px rgba(37,99,235,.22) !important;
}

/* --------------------------------------------------------------------------
   3. Botões ilegíveis / ações em cards, mensagens, visitantes
   -------------------------------------------------------------------------- */
.btn-wa-send,
.btn-whatsapp,
a[href*="wa.me"],
a[href*="whatsapp"],
button[data-action*="whatsapp"],
button[data-action*="wa"]{
  background:var(--ux-green) !important;
  border-color:var(--ux-green) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.btn-excluir,
.btn-delete,
.button-delete,
.delete,
button[data-action*="excluir"],
button[data-action*="delete"],
button[data-action*="remover"],
a[href*="excluir"],
a[href*="delete"],
a[href*="remover"]{
  background:var(--ux-red) !important;
  border-color:var(--ux-red) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.btn-editar,
.btn-edit,
button[data-action*="editar"],
button[data-action*="edit"],
a[href*="editar"],
a[href*="edit"]{
  background:var(--ux-blue) !important;
  border-color:var(--ux-blue) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.btn-responder,
.btn-reply,
button[data-action*="responder"],
button[data-action*="reply"],
button[data-action*="reenviar"],
.btn-mark-sent,
.btn-mark-sent *,
button.btn-mark-sent{
  background:var(--ux-blue) !important;
  border-color:var(--ux-blue) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Botões pequenos de cards no mobile */
@media(max-width:820px){
  .msg-card button,
  .msg-card a.button,
  .msg-card .btn,
  .visitor-card button,
  .visitor-card a.button,
  .visitor-card .btn,
  .card-actions button,
  .card-actions a,
  .actions button,
  .actions a{
    min-height:46px !important;
    min-width:52px !important;
    border-radius:14px !important;
    font-size:16px !important;
    font-weight:900 !important;
    box-shadow:0 8px 20px rgba(15,23,42,.10) !important;
  }

  .msg-card .actions,
  .msg-card .card-actions,
  .visitor-card .actions,
  .visitor-card .card-actions,
  .card-actions,
  .actions{
    gap:10px !important;
    flex-wrap:wrap !important;
  }

  /* se tiver apenas ícone, pelo menos deixa legível */
  .msg-card button:not(.btn-wa-send):not(.btn-whatsapp):not(.btn-delete):not(.btn-excluir):not(.btn-edit):not(.btn-editar),
  .visitor-card button:not(.btn-wa-send):not(.btn-whatsapp):not(.btn-delete):not(.btn-excluir):not(.btn-edit):not(.btn-editar){
    background:#fff !important;
    color:#0f172a !important;
    -webkit-text-fill-color:#0f172a !important;
    border:1px solid #cbd5e1 !important;
  }
}

/* --------------------------------------------------------------------------
   4. Cards mobile mais confortáveis
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  .msg-card,
  .visitor-card,
  .ip-card,
  .card,
  .panel{
    border-radius:22px !important;
  }

  .msg-card,
  .visitor-card{
    padding:18px !important;
  }

  .msg-card textarea,
  .visitor-card textarea{
    font-size:16px !important;
    line-height:1.45 !important;
  }
}