/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important;}  /* ← adaugă asta */
:root{
  --bg:#0b0e14;--card:#141820;--border:#252a33;--text:#d1d5db;--muted:#6b7280;
  --accent:#6366f1;--accent-hover:#4f46e5;--green:#22c55e;--green-bg:#052e16;
  --red:#ef4444;--red-bg:#2d0a0a;--radius:8px;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
}

/* ── Error screen ── */
.error-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--muted);font-size:1.2rem;}

/* ── Table wrap (mobile) ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}


/* ── Login ── */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-card{width:380px;padding:40px 32px;text-align:center;}
.login-card h1{font-size:1.6rem;margin-bottom:4px;}
.login-card .sub{color:var(--muted);margin-bottom:24px;}
.login-card input{display:block;width:100%;margin-bottom:12px;}
.login-card button{width:100%;margin-top:8px;}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;}

/* ── Inputs ── */
input,select{
  padding:10px 14px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-size:.95rem;
}
input:focus,select:focus{outline:none;border-color:var(--accent);}
select option{background:var(--card);}

/* ── Buttons ── */
button{cursor:pointer;border:none;border-radius:var(--radius);font-weight:600;transition:background .15s,opacity .15s;}
button:hover{opacity:.9;}
.btn-primary{background:var(--accent);color:#fff;padding:10px 18px;font-size:.9rem;}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text);padding:10px 18px;font-size:.9rem;}
.btn-outline:hover{background:var(--border);}
.btn-danger{background:transparent;border:1px solid var(--red);color:var(--red);font-size:.8rem;padding:6px 12px;}
.btn-danger:hover{background:var(--red-bg);}
.btn-sm{font-size:.78rem;padding:5px 10px;}

/* ── Header ── */
header{
  display:flex;align-items:center;gap:12px;padding:16px 32px;
  background:var(--card);border-bottom:1px solid var(--border);
}
header h1{font-size:1.15rem;flex:1;}

/* ── Navigation ── */
nav{display:flex;gap:4px;}
.nav-btn{
  background:transparent;border:none;color:var(--muted);padding:6px 14px;
  font-size:.9rem;border-radius:var(--radius);cursor:pointer;
}
.nav-btn:hover{color:var(--text);background:var(--bg);}
.nav-btn.active{color:#fff;background:var(--accent);}

/* ── Tabs ── */
.tab{padding:24px 32px;}

/* ── Stats ── */
.stats{display:flex;gap:16px;flex-wrap:wrap;}
.stat-card{
  flex:1;min-width:140px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;display:flex;flex-direction:column;gap:6px;
}
.stat-num{font-size:1.8rem;font-weight:700;}
.stat-label{font-size:.85rem;color:var(--muted);}
.stat-card.active .stat-num{color:var(--green);}
.stat-card.expired .stat-num{color:var(--red);}

/* ── Toolbar ── */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.muted{color:var(--muted);font-size:.85rem;}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
th,td{text-align:left;padding:10px 14px;font-size:.9rem;}
th{background:var(--bg);color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.5px;}
td{border-top:1px solid var(--border);}
td.act{text-align:right;white-space:nowrap;}
td code{font-family:'Fira Code','Cascadia Code',monospace;font-size:.82rem;background:var(--bg);padding:2px 6px;border-radius:4px;}
td.empty{text-align:center;color:var(--muted);padding:40px;}

/* ── Badges ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-red{background:var(--red-bg);color:var(--red);}

/* ── Modal ── */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.modal-content{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:28px;width:440px;max-width:90vw;
}
.modal-content h2{margin-bottom:16px;font-size:1.1rem;}
.modal-content label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px;margin-top:12px;}
.modal-content input,.modal-content select{width:100%;margin-bottom:4px;}
.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}

/* ── Error ── */
.error{color:var(--red);font-size:.85rem;margin-top:10px;}

/* ── Responsive ── */
@media(max-width:768px){
  header{flex-wrap:wrap;padding:12px 16px;}
  nav{order:3;width:100%;margin-top:8px;}
  .tab{padding:16px;}
  .stats{flex-direction:column;}
  .login-card{width:90%;}
}