/* Redesigned UI: clean, rounded cards, improved timeline and recipient expand */
:root{
  --bg:#0b1220;
  --panel:#0f1724;
  --muted:#9aa8b6;
  --text:#e6eef6;
  --accent:#38bdf8;
  --accent-2:#7c3aed;
  --card:#0e1a25;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;background:linear-gradient(180deg,#071428 0%, #081424 100%);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:28px auto;padding:0 20px}
.site-header{background:transparent;padding:10px 0;margin-bottom:6px}
.navwrap{display:flex;align-items:center;justify-content:space-between}
.brand a{font-weight:700;color:var(--text);font-size:20px;text-decoration:none}
.site-header nav a{color:var(--muted);margin-left:16px;text-decoration:none}
.btn{background:var(--accent);border:none;color:#012; padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}
.header-actions{display:flex;gap:8px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* Cards */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.04);box-shadow: 0 6px 20px rgba(2,6,23,0.6)}
.card h2{margin:0 0 8px 0;font-size:20px}
.meta{color:var(--muted);font-size:13px;margin-top:6px}

/* Campaign header */
.campaign-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.campaign-info{flex:1}
.campaign-stats{display:flex;gap:10px}
.stat-pill{background:var(--glass);padding:10px 14px;border-radius:12px;text-align:center;min-width:80px}

/* Recipients table */
.table{width:100%;border-collapse:collapse}
.table thead th{ text-align:left;padding:12px;color:var(--muted);font-size:13px;border-bottom:1px solid rgba(255,255,255,0.03)}
.table tbody td{padding:12px;border-top:1px solid rgba(255,255,255,0.02);vertical-align:middle}
.recipient-row{cursor:pointer;transition:background .12s ease}
.recipient-row:hover{background:rgba(255,255,255,0.01)}

/* Expand area */
.expand-row{background:rgba(0,0,0,0.15);border-radius:10px;padding:16px;margin:12px 0;border:1px solid rgba(255,255,255,0.02)}
.timeline{display:flex;flex-direction:column;gap:14px;padding-left:6px}
.timeline-item{display:flex;gap:14px;align-items:flex-start}
.timeline-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;flex:0 0 44px;transition:transform 0.15s ease,filter 0.2s ease}
.timeline-item .body{flex:1}
.timeline-item .time{color:var(--muted);font-size:13px}

.timeline-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.3);
}

/* states */
/* timeline icon colour states */
.timeline-icon.ic-sent {
  background: var(--accent, #38bdf8);  /* blue: email sent */
}

.timeline-icon.ic-open {
  background: var(--warning, #f59e0b); /* amber: opened */
}

.timeline-icon.ic-click {
  background: var(--accent-2, #7c3aed); /* purple: clicked */
}

.timeline-icon.ic-submit {
  background: var(--danger, #ef4444);   /* red: submitted data */
  animation: pulse-danger 1.6s infinite ease-in-out;
}

.timeline-icon.ic-reported {
  background: var(--success, #22c55e);  /* green: reported */
}

.timeline-icon.ic-created {
  background: #64748b; /* neutral grey fallback */
}

/* pulse animation for submitted data */
@keyframes pulse-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

/* Optional: reported (user took action to report) */
.timeline-icon.ic-reported {
  background: var(--success, #22c55e);
}





/* existing badges */
.badge {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
}

/* opened */
.badge.open {
  background: rgba(245,158,11,0.12);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,0.12);
}

/* clicked */
.badge.click {
  background: rgba(124,58,237,0.12);
  color: var(--accent-2);
  border: 1px solid rgba(124,58,237,0.12);
}

/* submitted */
.badge.submitted {
  background: rgba(239,68,68,0.12);  /* subtle red background */
  color: var(--danger, #ef4444);      /* use --danger if defined */
  border: 1px solid rgba(239,68,68,0.12);
}


/* reported */
.badge.reported {
  background: rgba(34,197,94,0.12);  /* subtle green background */
  color: var(--success, #22c55e);    /* use --success if defined, fallback to green */
  border: 1px solid rgba(34,197,94,0.12);
}

/* responsive */
@media (max-width:800px){
  .campaign-header{flex-direction:column;align-items:flex-start}
  .campaign-stats{width:100%;justify-content:space-between}
}

/* small helper */
.kv{color:var(--muted);font-size:13px;margin-top:6px}
.details-pre{background:rgba(0,0,0,0.12);padding:8px;border-radius:8px;color:var(--muted);font-family:monospace;font-size:13px;overflow:auto}




/* Cybermail SIEM styles */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:#1f2940;
  --sky:#38bdf8;
  --green:#22c55e;
  --yellow:#eab308;
  --red:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif}
a{color:var(--sky);text-decoration:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b1220,#0b1220ee)}
.brand{font-weight:700;letter-spacing:.5px}
.brand .muted{color:var(--muted);font-weight:500}
.search{display:flex;gap:8px}
.search input{background:#0c162b;border:1px solid var(--line);padding:8px 10px;border-radius:8px;color:var(--text);min-width:280px}
.search button{background:var(--sky);border:0;color:#00172a;padding:8px 10px;border-radius:8px;font-weight:600;cursor:pointer}
.grid{display:grid;grid-template-columns: 420px 1fr;gap:16px;padding:16px}
.column{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.column.detail{min-height:70vh}
h2{margin:8px 0 12px 0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pill{background:#0c162b;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:999px;cursor:pointer}
.pill.active{border-color:var(--sky)}
.list{display:flex;flex-direction:column;gap:8px;max-height:72vh;overflow:auto;padding-right:6px}
.item{display:flex;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:#0c162b;cursor:pointer}
.item:hover{border-color:var(--sky)}
.badge{padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.badge.pass,.badge.quarantine{border-color:var(--green);color:var(--green)}
.badge.fail,.badge.reject{border-color:var(--red);color:var(--red)}
.badge.none,.badge.unknown,.badge.neutral{border-color:var(--muted);color:var(--muted)}
.card{background:#0c162b;border:1px solid var(--line);border-radius:16px;padding:12px}
.empty{color:var(--muted)}
.kv{list-style:none;padding:0;margin:0}
.kv li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:6px 0}
.pre{background:#0b1327;border:1px solid var(--line);padding:10px;border-radius:12px;white-space:pre-wrap;word-break:break-word}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pad{padding:16px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
button.action{background:#0b1327;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer}
button.action.primary{background:var(--sky);color:#00172a;border-color:var(--sky)}
small.muted{color:var(--muted)}
.foot{padding:10px;color:var(--muted);text-align:center;border-top:1px solid var(--line)}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
}
.brand-logo {
    height: 70px;
    transform: scale(2);
    transform-origin: left center;
    will-change: transform;
}

img {
    max-width: 100%;
    display: block;
}

* {
    box-sizing: border-box;
}

/* --------------------------------------------- */
/* CYBERLINE LOGIN REWORK — glass, glow, luxury  */
/* --------------------------------------------- */

/* Only affect login page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #0e1a3a 0%, #070c18 80%);
  color: var(--text, #e6eef6);
  font-family: "Inter", system-ui, sans-serif;
}

/* Card styling */
.login-page .card.form {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(56, 189, 248, 0.04);
  animation: fadeInUp 0.8s ease-out;
}

/* Headings */
.login-page .card.form h2 {
  text-align: center;
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: 0.5px;
}

/* Input fields */
.login-page .card.form label {
  display: block;
  margin-bottom: 18px;
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  color: #aab6c5;
}

.login-page .card.form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #e6eef6;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  outline: none;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.05);
}

.login-page .card.form input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.login-page .card.form input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3),
              inset 0 0 10px rgba(56, 189, 248, 0.05);
  background: rgba(255, 255, 255, 0.08);
}

/* Button */
.login-page .btn {
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg, #38bdf8, #7c3aed);
  color: #fff;
  font-weight: 600;
  padding: 12px 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s ease;
  margin-top: 8px;
}

.login-page .btn:hover {
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

/* Flash message */
.login-page .flash {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  text-align: center;
}

/* Brand title */
.login-page h1.brand {
  font-size: 2rem;
  font-weight: 700;
  color: #38bdf8;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

/* Simple fade-up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Match dropdowns to textbox style */
.login-page .card.form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #e6eef6;
  font-size: 0.95rem;
  appearance: none;
  transition: all 0.25s ease;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.05);
  outline: none;
}

.login-page .card.form select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3),
              inset 0 0 10px rgba(56, 189, 248, 0.05);
  background: rgba(255, 255, 255, 0.08);
}

/* Optional dropdown arrow aesthetic */
.login-page .card.form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10'><path fill='%23e6eef6' d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}