:root{
  --bg:#f6f7fb; --card:#fff; --text:#101828; --muted:#667085; --line:#e6e8ee;
  --primary:#2563eb; --danger:#ef4444; --shadow:0 10px 25px rgba(16,24,40,.08);
  --radius:16px;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

*{box-sizing:border-box}

body{margin:0;background:var(--bg);color:var(--text)}

.topbar{
  position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px
}

.brand{font-weight:800;letter-spacing:.2px}
.brand span{color:var(--primary)}

.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 56px)}

.sidebar{
  border-right:1px solid var(--line);
  background:var(--card);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px
}

.nav{
  border:1px solid var(--line);
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  text-align:left;
  cursor:pointer
}
.nav.active{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.06)}

.content{padding:16px}
.view{display:none}
.view.active{display:block}

.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
h2{margin:0}

.btn{
  background:var(--primary);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer
}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}

.tablewrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:auto
}

/* ✅ TABELA: alinhamento perfeito e comportamento SaaS */
.table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; /* ⭐ ESSENCIAL pra alinhar thead e tbody */
}

.table th,
.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-size:14px;

  text-align:left;
  vertical-align:middle;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ✅ larguras fixas por coluna (Tenants) */
.table th:nth-child(1),
.table td:nth-child(1){ width:70px; }          /* ID */

.table th:nth-child(2),
.table td:nth-child(2){ width:220px; }         /* Nome */

.table th:nth-child(3),
.table td:nth-child(3){ width:160px; }         /* Subdomínio */

.table th:nth-child(4),
.table td:nth-child(4){ width:120px; }         /* Status */

.table th:nth-child(5),
.table td:nth-child(5){ width:120px; }         /* Plano */

.table th:nth-child(6),
.table td:nth-child(6){
  width:320px;                                 /* Licença */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.table th:nth-child(7),
.table td:nth-child(7){
  width:140px;                                 /* Ações */
  text-align:center;
}

.muted{color:var(--muted);font-size:13px}
.link{color:var(--primary);text-decoration:none}

.auth{display:grid;place-items:center;min-height:100vh}
.card{
  width:min(420px,92vw);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px
}
.card h1{margin:0 0 6px}

label{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
input,select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-top:6px
}

.alert{
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.25);
  color:#7f1d1d;
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0
}

/* ✅ botão copiar key mais “SaaS” */
.copyKey{
  margin-left:8px;
  padding:6px 8px;
  border-radius:10px;
  line-height:1;
}

/* modal */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(16,24,40,.45);padding:14px}
.modal.show{display:grid}
.modal-card{
  width:min(520px,96vw);
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid var(--line)
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.icon{border:0;background:transparent;font-size:18px;cursor:pointer}
.form{padding:14px}
.row{display:flex;gap:10px;margin-top:14px}

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

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{flex-direction:row;overflow:auto}
}