/* =========================================================
   ClickaNerd Admin – Neutral Scientific Theme
   Font: IBM Plex Sans (clean, technical, readable)
   ========================================================= */

/* Google Fonts import (safe to keep at very top) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Palette */
  --bg: #f6f8fa;
  --panel: #ffffff;
  --text: #2b2f36;
  --muted: #6b7280;

  --accent: #3a6ea5;          /* primary */
  --accent-2: #2b5680;         /* hover/darker */
  --accent-weak: #e9f0f9;      /* light bg */

  --border: #d9dfe5;
  --border-soft: #e6eaee;

  --success-bg: #e7f7e7;
  --success-bd: #81c784;
  --success-tx: #235b23;

  --error-bg: #fdeaea;
  --error-bd: #e59a9a;
  --error-tx: #842020;

  --warn-bg: #fff7e6;
  --warn-bd: #f0c36d;
  --warn-tx: #7a5a15;

  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --radius: 12px;

  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --focus-ring: 0 0 0 3px rgba(58,110,165,.25), 0 0 0 1.5px var(--accent);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 15px/1.45 var(--font-body);
}

/* Headings */
h1,h2,h3{margin:0 0 .5rem}
h2{
  text-align:center;
  color:var(--accent);
  border-bottom:2px solid var(--border-soft);
  padding-bottom:.5rem;
}
h3{color:var(--accent)}

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

/* Focus (keyboard accessibility) */
:focus-visible{
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: 6px;
}

/* ===== Layout ===== */
main{
  max-width:1000px;
  margin:40px auto;
  background:var(--panel);
  padding:30px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===== Top Navigation ===== */
.nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:25px auto 35px;
  padding:10px;
  background:#f1f3f5;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.nav a{
  background:#e4e8ec;
  color:#2d2d2d;
  text-decoration:none;
  padding:8px 18px;
  border-radius:6px;
  font-weight:600;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.nav a:hover{
  background:#d5dbe0;
  color:#111;
  transform:translateY(-1px);
}
.nav a.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

/* ===== Alerts ===== */
.alert{
  padding:10px 14px;
  border-radius:8px;
  margin:15px 0;
  font-weight:600;
}
.alert.success{background:var(--success-bg);border:1px solid var(--success-bd);color:var(--success-tx)}
.alert.error{background:var(--error-bg);border:1px solid var(--error-bd);color:var(--error-tx)}
.alert.warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx)}

/* ===== Tables ===== */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  font-size:15px;
}
th,td{
  border:1px solid var(--border);
  padding:8px 10px;
  text-align:left;
  vertical-align:middle;
}
th{
  background:var(--accent-weak);
  color:var(--accent);
  font-weight:600;
}
tr:nth-child(even){background:#fafbfc}
td img{
  border-radius:6px;
  width:60px;height:60px;object-fit:cover;
}
.table-actions a{margin-right:10px;font-weight:600}

/* ===== Forms ===== */
label{
  display:block;
  margin-top:12px;
  font-weight:600;
  color:var(--accent);
}
input[type=text],
input[type=number],
input[type=email],
input[type=url],
textarea,
select{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  font: 15px/1.35 var(--font-body);
}
textarea{resize:vertical;min-height:100px}
input::placeholder,textarea::placeholder{color:#9aa3ad}

input[type=submit],
button,
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5ch;
  margin-top:16px;
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:background .2s ease, transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
}
input[type=submit]:hover,
button:hover,
.button:hover{
  background:var(--accent-2);
  transform:translateY(-1px);
}
input[type=submit]:disabled,
button:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
}

/* Inline button variants */
.button.secondary{
  background:#e4e8ec;color:#1f2937;
}
.button.secondary:hover{
  background:#d5dbe0;
}

/* ===== Summary / Stats ===== */
.summary{
  text-align:center;
  font-size:15px;
  margin-bottom:25px;
  color:var(--accent);
  background:var(--accent-weak);
  display:inline-block;
  padding:8px 18px;
  border-radius:8px;
  border:1px solid var(--border);
}
.summary b{color:var(--accent-2)}

/* ===== Blocks ===== */
.table-block{
  margin-bottom:35px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:15px;
  background:#fdfdfd;
}
.table-block h3{
  margin-top:0;
  background:var(--accent-weak);
  padding:10px;
  border-radius:8px;
  color:var(--accent);
  font-size:18px;
}
.table-block h3 span{font-weight:700;color:var(--accent)}
.table-block h3 em{font-style:normal;color:#777;font-size:14px;margin-left:6px}

/* ===== Back link ===== */
a.back{
  display:inline-block;margin-top:15px;
  font-weight:600;
}
a.back:hover{text-decoration:underline}

/* ===== Code / Mono ===== */
code,kbd,pre,samp{font-family:var(--font-mono)}
pre{
  background:#0f172a;
  color:#e5e7eb;
  padding:14px;
  border-radius:8px;
  overflow:auto;
}

/* ===== Cards (optional utility) ===== */
.card{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow);padding:18px;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 720px){
  main{margin:20px 12px;padding:20px}
  .nav{gap:8px;margin:15px auto 25px}
  .nav a{padding:7px 14px}
  table{font-size:14px}
  th,td{padding:7px 8px}
}

/* ===== Utilities ===== */
.m0{margin:0}.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.p0{padding:0}.p8{padding:8px}.p12{padding:12px}.p16{padding:16px}.p24{padding:24px}
.center{text-align:center}
.hide{display:none!important}