/* ==========================================================
   Painel SMS - gmsync
   Design baseado nas telas NextBilling (topbar azul + tabelas)
   ========================================================== */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
  font-size: 13px;
  color:#333;
  background: #eef2f5;
}

a{color:#0e62b0;text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Topbar ---------- */
.topbar{
  background: linear-gradient(180deg, #30495f 0%, #1c2c3b 100%);
  color:#eaf2fa;
  padding: 10px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom: 3px solid #0e62b0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.topbar .brand{flex:0 0 auto}
.topbar .brand-title{font-weight:700;font-size:16px;letter-spacing:.3px}
.topbar .brand-sub{font-size:11px;color:#b5c9df}

.topbar .topnav{
  flex:1 1 auto;
  display:flex;
  gap:4px;
  justify-content:center;
}
.topbar .topnav a{
  color:#cfe0f2;
  background: rgba(255,255,255,.04);
  padding: 6px 14px;
  border-radius: 4px;
  font-weight:600;
  font-size:13px;
}
.topbar .topnav a:hover{background: rgba(255,255,255,.10); text-decoration:none}
.topbar .topnav a.active{
  background:#fff; color:#0e62b0;
  box-shadow: inset 0 -3px 0 #0e62b0;
}

.topinfo{display:flex;align-items:center;gap:12px}
.topinfo .badge{
  background:#fff;
  color:#0e62b0;
  padding:6px 10px;
  border-radius:20px;
  font-size:12px;
  border:1px solid #d2dce6;
}
.topinfo .badge.saldo strong{color:#178050;font-size:13px}
.topinfo .logout{
  background:#c0392b;color:#fff;
  padding:6px 12px; border-radius:4px; font-size:12px; font-weight:600;
}
.topinfo .logout:hover{background:#a5281a; text-decoration:none}

/* ---------- Conteúdo ---------- */
.page{max-width:1200px;margin:20px auto 60px;padding:0 16px}
.foot{
  text-align:center;color:#889;font-size:12px;
  padding:14px 0 18px; border-top:1px solid #dde3ea;
}

.panel{
  background:#fff;
  border:1px solid #d2dce6;
  border-radius:5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom:16px;
}
.panel-header{
  background:#f4f7fa;
  border-bottom:1px solid #d2dce6;
  padding:10px 14px;
  font-weight:700;
  color:#0e62b0;
  display:flex; align-items:center; justify-content:space-between;
}
.panel-body{padding:14px}

.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1 1 300px}
label{display:block;font-weight:600;margin-bottom:4px;color:#445}
input[type=text], input[type=password], input[type=number], input[type=file], select, textarea{
  width:100%;
  padding:8px 10px;
  border:1px solid #c7d2dc;
  border-radius:4px;
  background:#fff;
  font:inherit;
  color:#222;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:#0e62b0; box-shadow:0 0 0 2px rgba(14,98,176,.15);
}
textarea{min-height:110px; resize:vertical; font-family: "Consolas","Monaco",monospace; font-size:13px}
.counter{font-size:11px;color:#667;margin-top:4px;text-align:right}

.btn{
  display:inline-block;
  padding:8px 16px;
  border:none;
  border-radius:4px;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.btn-primary{background:#0e62b0;color:#fff}
.btn-primary:hover{background:#0a4d8c}
.btn-success{background:#27ae60;color:#fff}
.btn-success:hover{background:#1e8c4c}
.btn-danger{background:#c0392b;color:#fff}
.btn-danger:hover{background:#a5281a}
.btn-secondary{background:#e2e8ee;color:#333}
.btn-secondary:hover{background:#cfd7df}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Tabela estilo NextBilling ---------- */
table.data{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  background:#fff;
}
table.data thead th{
  background:#f4f7fa;
  color:#0e62b0;
  font-weight:700;
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid #d2dce6;
  border-right:1px solid #e6ecf2;
  white-space:nowrap;
}
table.data tbody td{
  padding:7px 10px;
  border-bottom:1px solid #eef1f4;
  vertical-align: top;
}
table.data tbody tr:nth-child(even) td{ background:#fafbfc }
table.data tbody tr:hover td{ background:#eef6ff }
table.data td.num{font-family:"Consolas","Monaco",monospace}

.badge-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.s-del{background:#d4f4de;color:#178050}
.s-undel{background:#fbe3e1;color:#b3301e}
.s-wait{background:#e8eef6;color:#445c77}
.s-spam{background:#fde5c8;color:#a05b10}
.s-fail{background:#f4d4d0;color:#8b1a0e}

/* ---------- Flash ---------- */
.flash{
  padding:10px 14px; border-radius:4px; margin-bottom:14px;
  border:1px solid transparent; font-weight:600;
}
.flash.ok  {background:#e8f6ec;color:#1f6c3a;border-color:#bfe2c9}
.flash.err {background:#fae5e1;color:#9a2715;border-color:#f3c7bf}
.flash.info{background:#e5eff7;color:#154d7a;border-color:#c0d7ea}

/* ---------- Login ---------- */
.login-wrap{
  min-height:calc(100vh - 50px);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #1c2c3b 0%, #0e62b0 100%);
}
.login-card{
  width:360px; background:#fff; border-radius:6px;
  padding:28px 26px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.login-card h1{margin:0 0 4px;font-size:20px;color:#1c2c3b}
.login-card p.sub{margin:0 0 20px;color:#667;font-size:12.5px}
.login-card .btn{width:100%}

/* ---------- Progress bar ---------- */
.progress-wrap{margin-top:16px;display:none}
.progress-wrap.on{display:block}
.progress-bar{
  width:100%; height:22px; background:#e2e8ee; border-radius:3px; overflow:hidden;
  border:1px solid #c7d2dc;
}
.progress-bar > span{
  display:block; height:100%; background: linear-gradient(90deg,#0e62b0,#27ae60);
  width:0%; transition: width .4s ease;
}
.progress-info{
  font-size:12px;color:#445;margin-top:6px;display:flex;justify-content:space-between
}

/* ---------- Totais / cards ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.stat{
  background:#fff;border:1px solid #d2dce6;border-radius:5px;padding:12px 14px;
}
.stat .t{font-size:11px;color:#7a8290;text-transform:uppercase;letter-spacing:.6px}
.stat .v{font-size:22px;font-weight:700;color:#1c2c3b;margin-top:2px}
.stat.ok  .v{color:#178050}
.stat.err .v{color:#b3301e}
.stat.wait .v{color:#445c77}

/* ---------- Toolbar filtros ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.toolbar input,.toolbar select{max-width:220px}

/* ---------- Forms inline ---------- */
form.inline{display:inline}
.actions a, .actions button{margin-right:6px}