/* MailVox SaaS Admin - style.css */
:root{
  --bg:#f8fafc;
  --sidebar-bg:#ffffff;
  --card-bg:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --indigo:#4f46e5;
  --border:#e5e7eb;
  --shadow:0 6px 18px rgba(15,23,42,0.06);
  --transition:0.25s ease;
  --red: #dc3545;

  --warning-bg: #fff3cd;    /* Amarelo muito claro para o fundo */
  --warning-text: #664d03;  /* Amarelo escuro/marrom para o texto */
  --warning-border: #ffecb5; /* Amarelo intermediário para a borda */
  --warning-line: #ffc107;  /* Amarelo vibrante para a linha lateral */
}

[data-theme="dark"]{
  --bg:#0f172a;
  --sidebar-bg:#1e293b;
  --card-bg:#1e293b;
  --text:#f1f5f9;
  --muted:#9ca3af;
  --border:#334155;
  --shadow:0 6px 18px rgba(0,0,0,0.3);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, sans-serif;
  transition:background var(--transition),color var(--transition);
}

.app{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:260px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  padding:20px;
  display:flex;
  flex-direction:column;
  transition:width var(--transition),transform var(--transition);
}

.sidebar.collapsed{ width:80px; }

.brand{ display:flex;align-items:center;gap:12px;margin-bottom:24px; }

.logo{
  width:46px;height:46px;
  background:var(--indigo);
  color:white;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}

.nav a{
  display:block;
  padding:12px 14px;
  border-radius:8px;
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
}

.nav a:hover,
.nav a.active{
  background:var(--indigo);
  color:white;
}

.sidebar-footer{ margin-top:auto;display:flex;flex-direction:column;gap:12px; }

.btn{padding:10px 14px;border:0;border-radius:8px;cursor:pointer;transition:var(--transition);} 
.btn-primary{background:var(--indigo);color:white;} 
.btn-danger{background:var(--red);color:white;} 
.btn-ghost{background:none;color:var(--text);} 

main{flex:1;padding:20px;} 

topbar{display:flex;justify-content:space-between;} 

.card{
  background:var(--card-bg);
  padding:20px;
  border-radius:12px;
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.fade-in{animation:fade .4s ease;} 
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}




/* Sidebar colapsada */
.sidebar {
    width: 260px;
    transition: width .28s ease;
    overflow: hidden;
}

.sidebar.collapsed {
    width: 78px;
}

/* Links do menu */
.nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
}

/* Esconde apenas o texto, mantém ícones */
.sidebar.collapsed .nav a span.text {
    opacity: 0;
    width: 0;
}

/* Marca visual do botão de colapso */
.collapse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: .25s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* Ícone gira ao colapsar */
.sidebar.collapsed .collapse-btn .icon {
    transform: rotate(180deg);
}

/* Não some o texto completamente, deixa efeito suave */
.sidebar.collapsed .collapse-btn .text {
    opacity: 0;
    width: 0;
}

/* Ícones sempre visíveis */
.nav a .icon,
.collapse-btn .icon {
    width: 22px;
    min-width: 22px;
    text-align: center;
}

/* Mantém menu alinhado */
.sidebar-footer,
.nav {
    overflow: hidden;
}
.menu-item .submenu {
    display: none;
    padding-left: 20px;
    margin-top: 4px;
    border-left: 2px solid #e0e0e0;
}

.menu-item .submenu a {
    padding: 6px 0;
    font-size: 14px;
    color: #666;
    display: block;
}

.menu-item .submenu a:hover {
    color: #000;
}

.menu-item.open .submenu {
    display: block;
}

.label {
    flex: 1;
}

.alert.danger {
  padding: 12px 14px;
  background: rgba(255, 0, 0, 0.13);
  color: #b91c1c;
  font-size: 14px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 0, 0, 0.25);
}

.alert.success {
  padding: 12px 14px;
  background: #d4edda; 
  color: #155724; 
  font-size: 14px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid #c3e6cb;
}

 .api-box {
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px;
  word-break: break-all;
  margin-bottom: 20px;
}

.alert.warning {
  padding: 12px 14px;
  background: var(--warning-bg); 
  color: var(--warning-text); 
  font-size: 14px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid var(--warning-border);
  
  /* LINHA LATERAL DE AVISO */
  border-left: 4px solid var(--warning-line);
}


/* ===== ESTILO PARA TABELAS DO DASHBOARD ===== */

/* Container da tabela */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 20px;
}

/* Tabela */
.table-dashboard {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: #333;
}

/* Cabeçalho */
.table-dashboard thead {
    background: #f7f7f7;
}

.table-dashboard th {
    text-align: left;
    padding: 12px;
    font-weight: 700;
    color: #444;
    border-bottom: 2px solid #e5e5e5;
}

/* Linhas */
.table-dashboard td {
    padding: 12px;
    border-bottom: 1px solid #ededed;
}

/* Alternância de linhas */
.table-dashboard tbody tr:nth-child(even) {
    background: #fafafa;
}

/* Hover */
.table-dashboard tbody tr:hover {
    background: #f1f7ff;
}

.status-badge {
    padding:4px 8px;
    border-radius:6px;
    color:#fff;
    font-size:12px;
    font-weight:600;
}

/* Responsivo */
@media(max-width: 760px) {
    .table-dashboard thead {
        display:none;
    }
    .table-dashboard tr {
        display:block;
        margin-bottom:12px;
        border:1px solid #ddd;
        padding:12px;
        border-radius:10px;
    }
    .table-dashboard td {
        display:flex;
        justify-content:space-between;
        padding:6px 0;
    }
    .table-dashboard td::before {
        content: attr(data-label);
        font-weight:700;
        color:#333;
    }
}










/* ==============================
   INPUTS E SELECTS
============================== */
input[type="date"],
select {
    width: 20%;
    padding: 12px;
    margin-top: 8px;
    border-radius: 10px;

    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
}

/* placeholder / texto interno */
input[type="date"]::placeholder {
    color: var(--muted);
}


/* ==============================
   MODAL RDAP (estrutura)
============================== */
#modalRdap {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 30px;
    z-index: 9999;
}


/* ==============================
   CONTEÚDO DO MODAL
============================== */
#modalRdap > div {
    background: #ffffff; /* fundo branco fixo */
    padding: 20px;
    border-radius: 10px;

    width: 90%;
    max-width: 800px;
    max-height: 90%;
    overflow: auto;

    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);

    font-family: inherit;
    font-size: 14px;
    color: #111827;
}

/* dark mode — apenas texto */
[data-theme="dark"] #modalRdap > div {
    color: #020617;
}


/* ==============================
   BOTÃO FECHAR
============================== */
#modalRdap span {
    color: #6b7280;
    cursor: pointer;
}

#modalRdap span:hover {
    color: #111827;
}


/* ==============================
   CARD DE COTA RDAP (barra lateral)
============================== */
#rdapQuotaCard {
    background: #ffffff;
    border-left: 4px solid #2563eb;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 14px;

    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

/* dark mode — mantém contraste */
[data-theme="dark"] #rdapQuotaCard {
    color: #020617;
    border-left-color: #3b82f6;
}



/* ==============================
   SELECT — COMPATÍVEL COM DARK MODE
============================== */
.form-select,
select {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

/* remove estilos nativos problemáticos */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* opções do dropdown */
select option {
    background: var(--card-bg);
    color: var(--text);
}

/* opção selecionada */
select option:checked {
    background: var(--accent);
    color: #ffffff;
}

/* foco */
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}




/* ===============================
   TABELA DASHBOARD (LIGHT + DARK)
================================ */

.table-dashboard {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

/* HEADER */
.table-dashboard thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

/* CELULAS */
.table-dashboard td {
    padding: 10px;
    font-size: 13px;
    color: var(--text);
}

/* LINHA BASE */
.table-dashboard tbody tr {
    background: var(--card-bg);
}

/* ZEBRA — LIGHT */
[data-theme="light"] .table-dashboard tbody tr:nth-child(even) {
    background: #f8fafc;
}

/* ZEBRA — DARK (visível de verdade) */
[data-theme="dark"] .table-dashboard tbody tr:nth-child(even) {
    background: #0b1220; /* 👈 contraste perceptível */
}

/* LINHA DIVISÓRIA */
.table-dashboard tbody tr + tr td {
    border-top: 1px solid var(--border-soft);
}

/* HOVER — LIGHT */
[data-theme="light"] .table-dashboard tbody tr:hover {
    background: #eef2ff;
}

/* HOVER — DARK (controle fino) */
[data-theme="dark"] .table-dashboard tbody tr:hover {
    background: #111827; /* 👈 mais escuro, não claro */
}