/* ── Magellan CMS — Design System Carbon D ──────────────────────────────── */
/* Cohérent avec le site public Magellan                                     */

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --bg:          #0c0c0e;
  --bg-card:     #111114;
  --bg-input:    #18181b;
  --bg-hover:    rgba(255,255,255,0.04);
  --bg-active:   rgba(255,255,255,0.06);
  --border:      rgba(255,255,255,0.06);
  --border-focus:rgba(255,255,255,0.18);
  --text:        #fff;
  --text-dim:    rgba(255,255,255,0.55);
  --text-muted:  rgba(255,255,255,0.28);
  --accent:      #3b82f6;
  --accent-hover:#2563eb;
  --green:       #22c55e;
  --orange:      #f59e0b;
  --red:         #ef4444;
  --red-bg:      rgba(239,68,68,0.1);
  --green-bg:    rgba(34,197,94,0.1);
  --orange-bg:   rgba(245,158,11,0.1);
  --radius:      8px;
  --radius-sm:   4px;
  --font:        'Plus Jakarta Sans', sans-serif;
  --mono:        'DM Mono', monospace;
  --nav-h:       52px;
}

html,body {
  width:100%; min-height:100vh;
  background:var(--bg);
  font-family:var(--font);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Navigation ────────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:400;
  height:var(--nav-h);
  display:flex; align-items:center; padding:0 2rem; gap:1rem;
  background:#0e0f12;
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-weight:800; font-size:1rem; letter-spacing:-0.01em;
  color:var(--text);
}
.nav-logo span { color:var(--text-muted); font-weight:400; }
.nav-links {
  display:flex; align-items:center; gap:0.25rem;
  margin-left:auto;
}
.nav-link {
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-dim); padding:0.4rem 0.75rem;
  border-radius:var(--radius-sm);
  cursor:pointer; transition:all 0.2s;
  text-decoration:none;
}
.nav-link:hover { color:var(--text); background:var(--bg-hover); text-decoration:none; }
.nav-link.active { color:var(--text); background:var(--bg-active); }
.nav-user {
  font-family:var(--mono); font-size:0.65rem;
  color:var(--text-muted);
  margin-left:1rem;
}
.nav-logout {
  font-family:var(--mono); font-size:0.65rem;
  color:var(--red); cursor:pointer;
  background:none; border:none; padding:0.3rem 0.5rem;
  border-radius:var(--radius-sm);
  transition:background 0.2s;
}
.nav-logout:hover { background:var(--red-bg); }

/* ── Layout ────────────────────────────────────────────────────────────── */
.container {
  max-width:1200px;
  margin:calc(var(--nav-h) + 2rem) auto 2rem;
  padding:0 2rem;
}

.page-title {
  font-size:1.5rem; font-weight:700; margin-bottom:0.5rem;
}
.page-subtitle {
  font-size:0.85rem; color:var(--text-dim); margin-bottom:2rem;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  margin-bottom:1rem;
}
.card-title {
  font-size:1rem; font-weight:600; margin-bottom:1rem;
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table {
  width:100%; border-collapse:collapse;
  font-size:0.85rem;
}
thead th {
  font-family:var(--mono); font-size:0.65rem; letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  text-align:left; padding:0.75rem 1rem;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody tr {
  cursor:pointer;
  transition:background 0.15s;
}
tbody tr:hover { background:var(--bg-hover); }
tbody td {
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  display:inline-block;
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.2rem 0.5rem;
  border-radius:var(--radius-sm);
}
.badge-doxxed  { background:var(--green-bg);  color:var(--green); }
.badge-anon    { background:var(--orange-bg); color:var(--orange); }
.badge-unknown { background:var(--bg-active); color:var(--text-muted); }
.badge-dead    { background:var(--red-bg);    color:var(--red); }
.badge-active  { background:var(--green-bg);  color:var(--green); }
.badge-suspect { background:var(--orange-bg); color:var(--orange); }

/* ── Link status dots ──────────────────────────────────────────────────── */
.link-dot {
  display:inline-block; width:8px; height:8px;
  border-radius:50%; margin-right:0.3rem;
  vertical-align:middle;
}
.link-dot.ok      { background:var(--green);  box-shadow:0 0 6px rgba(34,197,94,0.5); }
.link-dot.redirect { background:var(--orange); box-shadow:0 0 6px rgba(245,158,11,0.5); }
.link-dot.error   { background:var(--red);    box-shadow:0 0 6px rgba(239,68,68,0.5); }
.link-dot.timeout { background:var(--red);    box-shadow:0 0 6px rgba(239,68,68,0.5); }
.link-dot.empty   { background:var(--text-muted); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom:1.25rem;
}
.form-label {
  display:block;
  font-family:var(--mono); font-size:0.65rem; letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:0.4rem;
}
.form-input,
.form-select,
.form-textarea {
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-family:var(--font);
  font-size:0.85rem;
  padding:0.6rem 0.75rem;
  transition:border-color 0.2s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline:none;
  border-color:var(--border-focus);
}
.form-input.error { border-color:var(--red); }
.form-textarea { resize:vertical; min-height:80px; }
.form-hint {
  font-size:0.75rem; color:var(--text-muted);
  margin-top:0.25rem;
}
.form-error {
  font-size:0.75rem; color:var(--red);
  margin-top:0.25rem;
}
.form-input[readonly] {
  opacity:0.5; cursor:not-allowed;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.55rem 1.25rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-dim);
  cursor:pointer; transition:all 0.2s;
  text-decoration:none;
}
.btn:hover { color:var(--text); background:var(--bg-hover); border-color:var(--border-focus); }
.btn:disabled { opacity:0.3; cursor:not-allowed; }

.btn-primary {
  background:var(--accent); border-color:var(--accent);
  color:#fff;
}
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }

.btn-danger {
  background:transparent; border-color:var(--red); color:var(--red);
}
.btn-danger:hover { background:var(--red-bg); }

.btn-success {
  background:var(--green); border-color:var(--green); color:#fff;
}
.btn-success:hover { background:#16a34a; border-color:#16a34a; }

.btn-sm { padding:0.35rem 0.75rem; font-size:0.6rem; }

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.toolbar {
  display:flex; align-items:center; gap:0.75rem;
  margin-bottom:1.5rem; flex-wrap:wrap;
}
.search-input {
  flex:1; min-width:200px; max-width:400px;
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:0.5rem; margin-top:1.5rem;
}
.pagination .btn { min-width:2.5rem; justify-content:center; }
.pagination .page-info {
  font-family:var(--mono); font-size:0.7rem;
  color:var(--text-muted);
}

/* ── Alert / Banner ────────────────────────────────────────────────────── */
.alert {
  padding:0.75rem 1rem;
  border-radius:var(--radius-sm);
  font-size:0.85rem;
  margin-bottom:1rem;
}
.alert-info    { background:rgba(59,130,246,0.1); color:var(--accent); border:1px solid rgba(59,130,246,0.2); }
.alert-success { background:var(--green-bg);  color:var(--green);  border:1px solid rgba(34,197,94,0.2); }
.alert-warning { background:var(--orange-bg); color:var(--orange); border:1px solid rgba(245,158,11,0.2); }
.alert-danger  { background:var(--red-bg);    color:var(--red);    border:1px solid rgba(239,68,68,0.2); }

.unpublished-banner {
  position:fixed; bottom:0; left:0; right:0;
  background:#1a1a2e; border-top:1px solid var(--orange);
  padding:0.75rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
  z-index:300;
  font-size:0.85rem;
}
.unpublished-banner.hidden { display:none; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  z-index:500;
}
.modal-overlay.hidden { display:none; }
.modal {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  max-width:480px; width:90%;
}
.modal-title { font-size:1.1rem; font-weight:600; margin-bottom:1rem; }
.modal-actions {
  display:flex; gap:0.75rem; justify-content:flex-end;
  margin-top:1.5rem;
}

/* ── Login page ────────────────────────────────────────────────────────── */
.login-wrap {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
}
.login-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:3rem;
  max-width:400px; width:90%;
  text-align:center;
}
.login-title {
  font-size:1.5rem; font-weight:700; margin-bottom:0.5rem;
}
.login-subtitle {
  font-size:0.85rem; color:var(--text-dim); margin-bottom:2rem;
}
.login-success {
  color:var(--green); margin-top:1rem;
}

/* ── Accordion ─────────────────────────────────────────────────────────── */
.accordion-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background 0.15s;
}
.accordion-header:hover { background:var(--bg-hover); }
.accordion-header .arrow {
  transition:transform 0.2s;
  color:var(--text-muted);
}
.accordion-header.open .arrow { transform:rotate(90deg); }
.accordion-body {
  max-height:0; overflow:hidden;
  transition:max-height 0.3s ease;
}
.accordion-body.open { max-height:2000px; }
.accordion-content { padding:1rem; }

/* ── Progress bar ──────────────────────────────────────────────────────── */
.progress-bar {
  width:100%; height:4px;
  background:var(--bg-input);
  border-radius:2px;
  overflow:hidden;
  margin:1rem 0;
}
.progress-fill {
  height:100%;
  background:var(--accent);
  border-radius:2px;
  width:0%;
  transition:width 0.3s;
}
.progress-fill.active {
  animation:progress-pulse 1.5s ease-in-out infinite;
}
@keyframes progress-pulse {
  0%   { width:10%; }
  50%  { width:70%; }
  100% { width:10%; }
}

/* ── Spinner ───────────────────────────────────────────────────────────── */
.spinner {
  display:inline-block; width:16px; height:16px;
  border:2px solid var(--text-muted);
  border-top-color:var(--text);
  border-radius:50%;
  animation:spin 0.6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Utility ───────────────────────────────────────────────────────────── */
.text-muted { color:var(--text-muted); }
.text-dim   { color:var(--text-dim); }
.text-green { color:var(--green); }
.text-red   { color:var(--red); }
.text-orange{ color:var(--orange); }
.text-mono  { font-family:var(--mono); }
.text-sm    { font-size:0.75rem; }
.text-center{ text-align:center; }
.mt-1 { margin-top:0.5rem; }
.mt-2 { margin-top:1rem; }
.mb-1 { margin-bottom:0.5rem; }
.mb-2 { margin-bottom:1rem; }
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-1 { gap:0.5rem; }
.gap-2 { gap:1rem; }
.hidden { display:none !important; }