/* Botões modernos */
.btn-modern{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}
.btn-modern .icon{
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}
/* Base comum dos botões */
.btn-modern{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    padding: 0;
}
/* Ícone centralizado */
.btn-modern .icon{
    pointer-events: none;
    width: 20px;
    height: 20px;
}
.device-actions{
    display: flex;
    justify-content: center;
    /* centraliza na linha */
  align-items: center;
    /* alinha vertical */
  gap: 8px;
    /* espaço entre botões */
  flex-wrap: wrap;
    /* permite quebra em telas pequenas */
  padding: 8px;
}
/* Botões menores para celular */
@media (max-width: 600px){
    .btn-modern {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    }
  .device-actions {
    gap: 6px;
    /* menos espaço entre eles */
  };
}
/* Estilos individuais */
.btn-atualizar{
    background: #17a2b8;
    /* azul petróleo */;
}
.btn-atualizar:hover{
    background: #138496;
}
.btn-add{
    background: #28a745;
    /* verde */;
}
.btn-add:hover{
    background: #218838;
}
.btn-edit{
    background: #ffc107;
    /* amarelo */
  color: #212529;
}
.btn-edit:hover{
    background: #e0a800;
}
.btn-delete{
    background: #dc3545;
    /* vermelho */;
}
.btn-delete:hover{
    background: #c82333;
}
.botao-personalizado{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #3498db;
    /* padrão azul */
  color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.botao-personalizado:hover{
    background-color: #2980b9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.botao-personalizado .icon{
    font-size: 16px;
}
/* Cores alternativas */
.btn-verde{
    background-color: #27ae60;
}
.btn-verde:hover{
    background-color: #1e944f;
}
.btn-vermelho{
    background-color: #e74c3c;
}
.btn-vermelho:hover{
    background-color: #c0392b;
}
#formAddDeviceMsg{
    font-size: 13px;
    line-height: 1.4;
}
.form-msg-loading{
    color: #555;
}
.form-msg-success{
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 6px 10px;
    border-radius: 6px;
}
.form-msg-error{
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 6px 10px;
    border-radius: 6px;
}
/* layout harmônico com grid (título central REAL) */
header{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
/* título ocupa a coluna central; seu text-align:center já ajuda */
.header-title{
    grid-column: 2;
}
/* bloco do usuário à direita */
.header-user{
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    white-space: nowrap;
}
/* divisória sutil entre nome e links */
.header-user .user-name{
    padding-right: 12px;
    margin-right: 4px;
    border-right: 1px solid rgba(255,255,255,0.25);
}
/* links no tema do header */
.header-user a{
    color: #fff;
    text-decoration: none;
    opacity: 0.95;
    font-weight: 500;
}
.header-user a:hover{
    opacity: 1;
    text-decoration: underline;
}
/* “Sair” com pill sutil pra destacar ação */
.header-user .logout{
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    text-decoration: none;
}
.header-user .logout:hover{
    background: rgba(255,255,255,0.12);
    text-decoration: none;
}
/* responsivo: encolhe primeiro “Minha conta” */
@media (max-width: 600px){
    .header-user { font-size: 13px;
    gap: 10px;
    }
  .header-user .link { display: none;
    }           /* esconde “Minha conta” */
  .header-title { font-size: 20px;
    }              /* leve ajuste no título */;
}
.alert-warn{
    position: relative;
    margin: 16px auto;
    padding: 14px 44px 14px 14px;
    /* espaço pro X à direita */
  border: 1px solid #ffeeba;
    border-radius: 10px;
    background: #fff3cd;
    color: #856404;
    font-size: 14px;
    max-width: 720px;
    /* largura máxima */
  text-align: center;
    /* centraliza o texto */
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.alert-warn .alert-link{
    color: #0c5460;
    font-weight: 600;
    text-decoration: underline;
}
/* Extracted from inline <style> tags */

/* Barra de paginação centralizada com fundo */
.pager-bar{
    display: flex;
    align-items: center;
    justify-content: center;
    /* centro */
  gap: 16px;
    flex-wrap: wrap;
    /* quebra em telas menores */
  margin: 14px 0 6px;
    /* 👇 Novo estilo de fundo aplicado na barra inteira */
  background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
}
/* Paginação discreta e central */
.pagination{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.pagination a,
.pagination span{
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    /* botões individuais continuam brancos */
  transition: all .2s ease;
}
.pagination a:hover{
    background: #e5e7eb;
}
.pagination span.current{
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.pagination .muted{
    border-color: transparent;
    background: none;
    color: #9ca3af;
}
/* Bloco do seletor agora sem fundo próprio */
.pager-controls{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}
/* Select compacto e elegante */
.select-compact{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 28px;
    line-height: 26px;
    font-size: 13px;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    padding: 0 26px 0 10px;
    /* espaço pro ícone */
  cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    /* 👇 novo ajuste para alinhar melhor com o texto */
  position: relative;
    top: 5px;
    /* aumenta ou diminui até ficar perfeito */;
}
.select-compact:hover{
    background: #f9fafb;
}
.select-compact:focus{
    outline: none;
    border-color: #93c5fd;
    /* azul suave */
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
/* checkbox alinhado ao texto */
  .checkbox-inline{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 8px 0;
}
.checkbox-inline input[type="checkbox"]{
    transform: translateY(3px);
    /* empurra o checkbox 2px para baixo */
    width: 16px;
    height: 16px;
    accent-color: #28a745;
    /* suporta navegadores modernos */
    cursor: pointer;
    vertical-align: middle;
    /* força alinhar no meio da linha do texto */
  position: relative;
    top: 1px;
    /* 1px ou 2px ajusta o “pulo” do checkbox */;
}
/* container do PIN com transição (abre/fecha suave) */
  .pin-field{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
}
.pin-field.open{
    max-height: 120px;
    /* suficiente para label + input */
    opacity: 1;
}
/* “efeito não editável”: visual de bloqueado */
  .readonly-effect{
    background: #f5f7fa;
    cursor: not-allowed;
    color: #555;
    border-color: #d6d9de;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.readonly-wrap{
    position: relative;
}
.readonly-wrap .lock-badge{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #777;
    pointer-events: none;
}
/* input base do seu projeto */
  .input{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
}
/* Extracted from inline <style> tags */

@keyframes indet{
    to { background-position: -200% 0 };
}
.bulk-line{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
}
.bulk-line.ok{
    background: #f0fdf4;
    border-color: #dcfce7;
}
.bulk-line.warn{
    background: #fffbeb;
    border-color: #fef3c7;
}
.bulk-line.err{
    background: #fef2f2;
    border-color: #fee2e2;
}
.bulk-mac{
    font-family: ui-monospace,Menlo,monospace;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 6px;
}
.bulk-dns{
    font-weight: 700;
}
/* Extracted from inline <style> tags */

@keyframes pulse{
    0% { opacity: 0.4;
    }
    50% { opacity: 1;
    }
    100% { opacity: 0.4;
    };
}
@keyframes spin{

  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }

}
/* ===== Appended user style ===== */

/* === BASE === */
body{
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f0f2f5;
    color: #333;
}
/* === CABEÇALHO === */
header{
    background: linear-gradient(to right, #004080, #0056b3);
    color: #ffffff;
    padding: 20px 30px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    border-bottom: 2px solid #004a99;
}
/* === CONTAINER === */
.container{
    max-width: 1200px;
    margin: 25px auto;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
/* === BOTÕES === */
button,
input[type="submit"]{
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.25s ease, transform 0.1s ease;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Hover padrão */
button:hover,
input[type="submit"]:hover{
    background: #0056b3;
    transform: scale(1.03);
}
/* Ícone animado no hover */
button .icon,
input[type="submit"] .icon{
    transition: transform 0.2s ease;
}
button:hover .icon,
input[type="submit"]:hover .icon{
    transform: scale(1.2) rotate(5deg);
}
/* Pulso contínuo opcional */
@keyframes pulse{
    0%   { transform: scale(1);
    }
    50%  { transform: scale(1.05);
    }
    100% { transform: scale(1);
    };
}
.btn-animated{
    animation: pulse 2.5s infinite;
}
button:hover,
input[type="submit"]:hover{
    background: #0056b3;
    transform: scale(1.03);
}
input[type="text"]{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
}
/* === CAMPOS DE FORMULÁRIO === */
input, textarea, select{
    width: 100%;
    padding: 10px;
    margin: 6px 0 14px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 15px;
}
/* === TABELA === */
table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
}
th{
    background: #343a40;
    color: white;
    padding: 12px;
    text-align: left;
}
td{
    padding: 12px;
    border-bottom: 1px solid #eee;
}
tr:nth-child(even){
    background: #f7f9fc;
}
/* === ALERTAS === */
.alert-success{
    background: #d4edda;
    color: #155724;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: bold;
}
/* === MODAL === */
.modal{
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.5);
}
.modal-content{
    background: white;
    margin: 10% auto;
    padding: 30px;
    border-radius: 12px;
    max-width: 600px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
/* === MODAL FECHAR === */
.modal-close{
    float: right;
    font-size: 22px;
    cursor: pointer;
    color: #999;
}
.modal-close:hover{
    color: #000;
}
/* === SIDEBAR === */
.sidebar{
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100%;
    background: #fff;
    box-shadow: -3px 0 12px rgba(0, 0, 0, 0.15);
    padding: 25px;
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1001;
}
.sidebar.open{
    right: 0;
}
/* === PAGINAÇÃO === */
.pagination a,
.pagination span{
    display: inline-block;
    margin: 0 4px;
    padding: 8px 12px;
    color: #007bff;
    text-decoration: none;
    border: 1px solid #007bff;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.pagination a:hover{
    background: #007bff;
    color: white;
}
.pagination .current{
    background: #007bff;
    color: white;
    pointer-events: none;
}
/* === BOTÃO COM ÍCONE === */
.btn-icon{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}
/* ✅ BOTÃO sem playlist com efeito */
.playlist-empty-add{
    color: #007bff;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.2s ease;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
}
.playlist-empty-add:hover{
    color: #0056b3;
    background-color: #eef4ff;
    text-decoration: none;
    transform: scale(1.02);
}
.status-header-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 -8px 0;
    padding: 0 10px;
    gap: 10px;
}
.status-filter-form{
    margin: 0;
}
.status-filter-form label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    margin: 0;
}
.status-filter-form input[type="checkbox"]{
    transform: scale(1.2);
    margin: 0;
}
.total-macs{
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    margin: 0;
}
table tr:first-child th:first-child{
    border-top-left-radius: 12px;
}
table tr:first-child th:last-child{
    border-top-right-radius: 12px;
}
.device-card{
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
}
.device-card:hover{
    background-color: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.device-client{
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin-bottom: 2px;
}
.device-mac{
    font-family: monospace;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 1px;
}
.device-key{
    font-size: 13px;
    color: #adb5bd;
}

/* ====== Cabeçalho LISTAS (alinhamento original preservado) ====== */
.th-listas{ text-align: initial; padding: 12px; }
.th-listas .th-listas-wrap{
  display: flex;
  align-items: center;
  justify-content: center; /* mude para flex-start se quiser tudo à esquerda */
  gap: 10px;
}
.th-listas .th-title{
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;   /* mantém a altura casando com o input */
  padding-top: 1px; /* micro ajuste original */
}

/* ====== Form da busca (sem alterar posicionamento) ====== */
.th-listas .status-search-form{
  flex: 0 1 auto;
  margin: 0;
}

/* ====== Campo de busca — MAIS REALCE (contraste) ======
   Mantém medidas e o micro ajuste "top: 4px" do seu script original */
.th-listas .status-search-form input[type="text"]{
  width: 220px;            /* igual ao original */
  max-width: 28vw;         /* igual ao original */
  height: 32px;            /* igual ao original */
  line-height: 32px;       /* igual ao original */
  padding: 0 12px 0 36px;  /* espaço para ícone à esquerda */
  font-size: 13px;
  position: relative;
  top: 4px;                /* micro ajuste original */

  color: #eef2ff;
  /* fundo ligeiramente mais claro para destacar no header escuro */
  background: linear-gradient(180deg, #212842, #1a2140);
  /* borda visível já em repouso */
  border: 1px solid #3a4670;
  border-radius: 12px;
  outline: none;

  /* leve glow azul + profundidade sem mudar layout */
  box-shadow:
    0 0 0 2px rgba(76,111,255,.12),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 18px rgba(0,0,0,.25);

  /* ícone de lupa embutido (SVG) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.868-3.834Zm-5.242.656a5 5 0 1 1 0-10.001 5 5 0 0 1 0 10.001Z' fill='%23b6c1ff'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px 50%;
  background-size: 16px 16px;

  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.th-listas .status-search-form input::placeholder{
  color: #b6c1ff; /* melhor contraste no novo fundo */
}

/* Hover: clareia um pouco e ressalta a borda */
.th-listas .status-search-form input[type="text"]:hover{
  background: linear-gradient(180deg, #242d4a, #1d2444);
  border-color: #5262a0;
  box-shadow:
    0 0 0 2px rgba(76,111,255,.16),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 8px 20px rgba(0,0,0,.28);
}

/* Focus: realce azul mais evidente, sem alterar alinhamento */
.th-listas .status-search-form input[type="text"]:focus{
  border-color: #6d8aff;
  box-shadow:
    0 0 0 4px rgba(93,126,255,.28),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 26px rgba(0,0,0,.32);
}

/* Toque/press sutil */
.th-listas .status-search-form input[type="text"]:active{
  transform: translateY(0.5px);
}

/* ====== Responsivo — igual ao original ====== */
@media (max-width: 900px){
  .th-listas .th-listas-wrap{ flex-direction: column; gap: 6px; }
  .th-listas .status-search-form input[type="text"]{
    width: 100%;
    max-width: 320px;
    top: 0; /* remove micro ajuste em telas pequenas */
  }
}

/* ====== Linha “🔎 X resultados para: …” (mantida) ====== */
#searchSummary{
  margin: 2px 0 !important;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
}
#searchSummary #searchCount{ font-weight: 700; color: #2151ff; }
#searchSummary strong{ color: #333; }

/* terceira linha (DNS bloqueados) */
.dns-line{
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

/* opcional: alinhar à esquerda o contêiner de 3 linhas */
div[style*="flex-direction:column"]{ align-items: flex-start; }

/* texto menor em telas estreitas */
@media (max-width: 700px){
  #searchSummary{ font-size: 12px; }
}

/* ====== Barra-resumo (controlada via JS) ====== */
.bar-summary{
  flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  color: #444;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bar-summary #searchCount{ font-weight: 700; color: #2151ff; }
.bar-summary strong{ color: #222; }