/* PABX PRIME MONITOR RAMAIS CARDS V1 20260904
 * Escopo exclusivo: Monitoramento > Ramais SIP.
 * Nao altera Troncos, Chamadas, Filas, backend ou Asterisk.
 */

/* Toolbar de busca e filtros */
[data-monitor-section="extensions"] .pabxprime-monitor-ramal-tools-v1{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px;
  padding:10px;
  border:1px solid #d8e1ea;
  border-radius:10px;
  background:#fff;
}

[data-monitor-section="extensions"] .pabxprime-monitor-ramal-search-v1{
  flex:1 1 320px;
  min-width:220px;
  height:36px;
  padding:0 11px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  color:#1f2937;
  font:inherit;
  outline:none;
}

[data-monitor-section="extensions"] .pabxprime-monitor-ramal-search-v1:focus{
  border-color:#5a88b5;
  box-shadow:0 0 0 3px rgba(90,136,181,.13);
}

[data-monitor-section="extensions"] .pabxprime-monitor-ramal-filter-v1{
  height:34px;
  padding:0 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

[data-monitor-section="extensions"] .pabxprime-monitor-ramal-filter-v1:hover{
  background:#eef3f7;
}

[data-monitor-section="extensions"] .pabxprime-monitor-ramal-filter-v1.active{
  border-color:#506f8f;
  background:#eaf0f6;
  color:#24415d;
}

[data-monitor-section="extensions"] .pabxprime-monitor-ramal-count-v1{
  margin-left:auto;
  white-space:nowrap;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

/* O status fica somente na borda completa do card. */
[data-monitor-section="extensions"] .monitor-extension-card{
  border-width:2px !important;
  border-style:solid !important;
  border-left-width:2px !important;
}

/* Verde: online */
[data-monitor-section="extensions"] .monitor-extension-card.online,
[data-monitor-section="extensions"] .monitor-extension-card.active,
[data-monitor-section="extensions"] .monitor-extension-card.is-online{
  border-color:#1eaa68 !important;
}

/* Vermelho: offline */
[data-monitor-section="extensions"] .monitor-extension-card.offline,
[data-monitor-section="extensions"] .monitor-extension-card.inactive,
[data-monitor-section="extensions"] .monitor-extension-card.is-offline{
  border-color:#dc4b5a !important;
}

/* Azul: tocando/chamando */
[data-monitor-section="extensions"] .monitor-extension-card.ringing,
[data-monitor-section="extensions"] .monitor-extension-card.calling{
  border-color:#2563eb !important;
}

/* Laranja: em ligacao. Mantido por ultimo para prevalecer sobre online. */
[data-monitor-section="extensions"] .monitor-extension-card.in-call,
[data-monitor-section="extensions"] .monitor-extension-card.call,
[data-monitor-section="extensions"] .monitor-extension-card.is-in-call{
  border-color:#e87500 !important;
}

/* Remove somente os indicadores redundantes de status dentro do card.
 * O status continua integralmente representado pela borda.
 */
[data-monitor-section="extensions"] .monitor-extension-card .monitor-extension-status,
[data-monitor-section="extensions"] .monitor-extension-card .monitor-extension-state,
[data-monitor-section="extensions"] .monitor-extension-card .monitor-status-dot,
[data-monitor-section="extensions"] .monitor-extension-card .monitor-extension-status-dot,
[data-monitor-section="extensions"] .monitor-extension-card [class*="status-dot"]{
  display:none !important;
}

[data-monitor-section="extensions"] .monitor-extension-card::before{
  display:none !important;
}

/* Filtro visual local: nao dispara nova consulta ao backend. */
[data-monitor-section="extensions"] .monitor-extension-card.pabxprime-monitor-ramal-hidden-v1{
  display:none !important;
}

[data-monitor-section="extensions"] .pabxprime-monitor-ramal-empty-v1{
  grid-column:1 / -1;
  padding:22px 14px;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  color:#64748b;
  text-align:center;
  font-size:13px;
  font-weight:600;
}

@media (max-width:760px){
  [data-monitor-section="extensions"] .pabxprime-monitor-ramal-tools-v1{
    align-items:stretch;
  }

  [data-monitor-section="extensions"] .pabxprime-monitor-ramal-search-v1{
    flex-basis:100%;
    width:100%;
  }

  [data-monitor-section="extensions"] .pabxprime-monitor-ramal-count-v1{
    width:100%;
    margin-left:0;
  }
}

/* PABX PRIME MONITOR RAMAIS CARDS V1.1 20260904
 * Multi-select: mais de um filtro pode permanecer ativo.
 */
[data-monitor-section="extensions"]
.pabxprime-monitor-ramal-filter-v1[aria-pressed="true"]:not([data-pabxprime-monitor-ramal-filter="all"]){
  border-color:#4f6f91;
  background:#dfeaf5;
  color:#183b5d;
  box-shadow:inset 0 0 0 1px rgba(79,111,145,.10);
}

/* PABX PRIME MONITOR RAMAIS CARDS V1.2 20260906
 * Teste de desempenho Latasa:
 * nenhum efeito visual adicional ao passar o mouse sobre os cards.
 * O cursor/click continuam funcionando normalmente.
 */
[data-monitor-section="extensions"] .monitor-extension-card,
[data-monitor-section="extensions"] .monitor-extension-card:hover{
  transition:none !important;
}

[data-monitor-section="extensions"] .monitor-extension-card:hover{
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}

/* PABX PRIME MONITOR RAMAIS CARD LEVE V2.2 20260906 */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22{
  box-sizing:border-box !important;
  width:240px !important;
  min-width:240px !important;
  max-width:240px !important;
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
  padding:9px !important;
  overflow:hidden !important;
  border-width:2px !important;
  border-style:solid !important;
  border-radius:9px !important;
  background:#fff !important;
  cursor:pointer !important;
  contain:layout paint !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22 .monitor-extension-lite-title-v22{
  display:block !important;
  max-width:100% !important;
  margin:0 0 8px !important;
  overflow:hidden !important;
  color:#17233a !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22 .monitor-extension-device{
  display:block !important;
  width:100% !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;
  margin:0 0 8px !important;
  padding:4px 6px !important;
  overflow:hidden !important;
  border-radius:5px !important;
  background:#f3f6fa !important;
  color:#334155 !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:12px !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22 .monitor-extension-lite-ip-v22{
  display:block !important;
  max-width:100% !important;
  margin:0 !important;
  overflow:hidden !important;
  color:#506176 !important;
  font-family:Consolas,monospace !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.online{
  border-color:#1eaa68 !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.offline{
  border-color:#dc4b5a !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.ringing,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.calling{
  border-color:#2563eb !important;
  animation:none !important;
  box-shadow:none !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.in-call{
  border-color:#e87500 !important;
  animation:none !important;
  box-shadow:none !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22:hover{
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}

@media(max-width:520px){
  [data-monitor-section="extensions"] .monitor-extension-card-lite-v22{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* PABX PRIME MONITOR RAMAIS STATUS COLUNA V2.3 20260906
 * Mantem o card leve atual.
 * Borda continua indicando registro SIP.
 * Coluna direita indica atividade da chamada:
 * - branca = sem atividade
 * - azul escuro = chamando/tocando
 * - verde = em ligacao/atendido
 */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22{
  position:relative !important;
  padding-right:50px !important;
  overflow:hidden !important;
}

/* Coluna branca padrao */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  width:40px !important;
  height:100% !important;
  background:#ffffff !important;
  border-left:1px solid #dbe4ee !important;
  border-top-right-radius:7px !important;
  border-bottom-right-radius:7px !important;
  z-index:0 !important;
}

/* Icone padrao oculto */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22::before{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  right:10px !important;
  width:20px !important;
  height:20px !important;
  transform:translateY(-50%) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  opacity:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
}

/* Online sempre verde, offline sempre vermelho,
   independentemente da atividade da chamada */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.online,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.online.ringing,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.online.calling,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.online.in-call{
  border-color:#16a34a !important;
}

[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.offline,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.offline.ringing,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.offline.calling,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.offline.in-call{
  border-color:#e11d48 !important;
}

/* Azul escuro quando chamando/tocando */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.ringing::after,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.calling::after{
  background:#1d4ed8 !important;
  border-left-color:#c7d2fe !important;
}

/* Verde quando atendido / em ligacao */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.in-call::after{
  background:#22c55e !important;
  border-left-color:#86efac !important;
}

/* Telefone com ondas para chamando */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.ringing::before,
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.calling::before{
  opacity:1 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 14.5l2.5 2.5a2.2 2.2 0 0 1 0 3.1l-.7.7a2.8 2.8 0 0 1-3 .65 17.1 17.1 0 0 1-6-3.86 17.1 17.1 0 0 1-3.86-6 2.8 2.8 0 0 1 .65-3l.7-.7a2.2 2.2 0 0 1 3.1 0l2.5 2.5a2.2 2.2 0 0 1 .48 2.38l-.44 1.02a1 1 0 0 0 .2 1.1l1.45 1.45a1 1 0 0 0 1.1.2l1.02-.44a2.2 2.2 0 0 1 2.38.48Z'/%3E%3Cpath d='M16.5 4.8a6.2 6.2 0 0 1 2.7 2.7'/%3E%3Cpath d='M15.7 1.8a10 10 0 0 1 6.5 6.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Telefone atendido para em ligacao */
[data-monitor-section="extensions"] .monitor-extension-card-lite-v22.in-call::before{
  opacity:1 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 14.5l2.5 2.5a2.2 2.2 0 0 1 0 3.1l-.7.7a2.8 2.8 0 0 1-3 .65 17.1 17.1 0 0 1-6-3.86 17.1 17.1 0 0 1-3.86-6 2.8 2.8 0 0 1 .65-3l.7-.7a2.2 2.2 0 0 1 3.1 0l2.5 2.5a2.2 2.2 0 0 1 .48 2.38l-.44 1.02a1 1 0 0 0 .2 1.1l1.45 1.45a1 1 0 0 0 1.1.2l1.02-.44a2.2 2.2 0 0 1 2.38.48Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* PABX PRIME MONITOR RAMAIS ICONES V2.3.1 20260906
 *
 * Icones via CSS mask:
 * - zero elementos DOM adicionais
 * - zero imagens externas
 * - zero requisicoes HTTP adicionais
 * - zero animacoes
 *
 * O pseudo-elemento ::before ja existe na V2.3.
 * Aqui apenas tornamos o desenho mais claro e confiavel.
 */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22::before{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  right:7px !important;
  width:26px !important;
  height:26px !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  pointer-events:none !important;

  background-color:#ffffff !important;
  background-image:none !important;
  background-repeat:no-repeat !important;

  opacity:0 !important;

  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;

  -webkit-mask-position:center !important;
  mask-position:center !important;

  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}

/* Chamando/tocando: telefone + ondas */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.ringing::before,
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.calling::before{
  opacity:1 !important;

  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M9.1 3.8c.8-.6 1.9-.5 2.6.2l3.2 3.2c.6.6.8 1.5.4 2.3l-1.6 3.1c-.2.5-.2 1 .2 1.4l4.1 4.1c.4.4.9.4 1.4.2l3.1-1.6c.8-.4 1.7-.2 2.3.4l3.2 3.2c.7.7.8 1.8.2 2.6l-1.7 2.4c-1.1 1.6-3.1 2.3-5 1.8-4.6-1.3-8.8-3.8-12.2-7.2S3.4 12.3 2.1 7.7c-.5-1.9.2-3.9 1.8-5L6.3 1l2.8 2.8Zm11.3-.4c3.8.8 6.8 3.8 7.6 7.6l-2.6.5a7.4 7.4 0 0 0-5.5-5.5l.5-2.6Zm.9 5.1c1.7.5 3 1.8 3.5 3.5l-2.5.7c-.2-.8-.9-1.5-1.7-1.7l.7-2.5Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M9.1 3.8c.8-.6 1.9-.5 2.6.2l3.2 3.2c.6.6.8 1.5.4 2.3l-1.6 3.1c-.2.5-.2 1 .2 1.4l4.1 4.1c.4.4.9.4 1.4.2l3.1-1.6c.8-.4 1.7-.2 2.3.4l3.2 3.2c.7.7.8 1.8.2 2.6l-1.7 2.4c-1.1 1.6-3.1 2.3-5 1.8-4.6-1.3-8.8-3.8-12.2-7.2S3.4 12.3 2.1 7.7c-.5-1.9.2-3.9 1.8-5L6.3 1l2.8 2.8Zm11.3-.4c3.8.8 6.8 3.8 7.6 7.6l-2.6.5a7.4 7.4 0 0 0-5.5-5.5l.5-2.6Zm.9 5.1c1.7.5 3 1.8 3.5 3.5l-2.5.7c-.2-.8-.9-1.5-1.7-1.7l.7-2.5Z'/%3E%3C/svg%3E") !important;
}

/* Atendido/em ligacao: telefone simples */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.in-call::before{
  opacity:1 !important;

  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M8.7 3.5c.9-.7 2.1-.6 2.9.2l3.5 3.5c.7.7.9 1.8.4 2.7l-1.7 3.3c-.3.5-.2 1.1.2 1.5l4.3 4.3c.4.4 1 .5 1.5.2l3.3-1.7c.9-.5 2-.3 2.7.4l3.5 3.5c.8.8.9 2 .2 2.9l-1.8 2.6c-1.2 1.7-3.4 2.5-5.4 1.9-5-1.4-9.6-4.1-13.3-7.8S3.6 12.7 2.2 7.7c-.6-2 .2-4.2 1.9-5.4L6.7.5l2 3Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M8.7 3.5c.9-.7 2.1-.6 2.9.2l3.5 3.5c.7.7.9 1.8.4 2.7l-1.7 3.3c-.3.5-.2 1.1.2 1.5l4.3 4.3c.4.4 1 .5 1.5.2l3.3-1.7c.9-.5 2-.3 2.7.4l3.5 3.5c.8.8.9 2 .2 2.9l-1.8 2.6c-1.2 1.7-3.4 2.5-5.4 1.9-5-1.4-9.6-4.1-13.3-7.8S3.6 12.7 2.2 7.7c-.6-2 .2-4.2 1.9-5.4L6.7.5l2 3Z'/%3E%3C/svg%3E") !important;
}

/* PABX PRIME MONITOR RAMAIS ICONES LOCAIS V2.3.2 20260906
 *
 * Fallback robusto para navegadores/CSP que nao renderizam data-URI/mask.
 * Usa dois SVGs locais same-origin, carregados uma unica vez e cacheados.
 * Nenhum elemento DOM adicional por card.
 */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22::before{
  background-color:transparent !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:28px 28px !important;
}

/* Azul: telefone chamando com ondas */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.ringing::before,
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.calling::before{
  opacity:1 !important;
  background-image:url("/assets/pabxprime-monitor-phone-ringing-v2-3-2.svg?v=20260907-svg-cachefix-v1") !important;
}

/* Verde: telefone atendido */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.in-call::before{
  opacity:1 !important;
  background-image:url("/assets/pabxprime-monitor-phone-incall-v2-3-2.svg?v=20260907-svg-cachefix-v1") !important;
}

/* PABX PRIME MONITOR RAMAIS ICONE ELEMENTO V2.3.3 20260906
 *
 * O pseudo-elemento ::before foi descartado para o icone.
 * Cada card tem somente 1 span vazio real.
 * O desenho continua vindo dos 2 SVGs locais cacheados.
 */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22::before{
  display:none !important;
}

[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22
.monitor-extension-call-icon-v233{
  display:none !important;
  position:absolute !important;
  top:50% !important;
  right:6px !important;
  width:28px !important;
  height:28px !important;
  transform:translateY(-50%) !important;
  z-index:10 !important;
  pointer-events:none !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:28px 28px !important;
}

/* Chamando/tocando */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.ringing
.monitor-extension-call-icon-v233,
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.calling
.monitor-extension-call-icon-v233{
  display:block !important;
  background-image:url("/assets/pabxprime-monitor-phone-ringing-v2-3-2.svg?v=20260907-svg-cachefix-v1") !important;
}

/* Atendido/em ligacao */
[data-monitor-section="extensions"]
.monitor-extension-card-lite-v22.in-call
.monitor-extension-call-icon-v233{
  display:block !important;
  background-image:url("/assets/pabxprime-monitor-phone-incall-v2-3-2.svg?v=20260907-svg-cachefix-v1") !important;
}