/* Theme variables (light default) */
:root{
  --bg: #F8F8F8;
  --card: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #e8e8e8;

  --link: #111111;
  --link-hover: #000000;

  --btn-bg: #111111;
  --btn-text: #ffffff;
  --btn-border: #333333;
}

/* Dark mode overrides */
html[data-theme="dark"]{
  --bg: #0f1115;
  --card: #151a22;
  --text: #e8eaed;
  --muted: #a7adb7;
  --border: #2a3240;

  --link: #cfd6e1;
  --link-hover: #ffffff;

  --btn-bg: #ffffff;
  --btn-text: #111111;
  --btn-border: #cfcfcf;
}

/* Base page */
html, body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  background: var(--bg);
  color: var(--text);
}

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

/* Common UI blocks */
.card{
  background: var(--card);
  border: 1px solid var(--border);
}

.small{ color: var(--muted); }

/* Buttons (works for .btn and your nav buttons) */
.btn, .nav-btn{
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
}
.btn.light, .nav-btn.light{
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* Badge base (neutral) */
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid var(--border);
  background: transparent;
  color: var(--muted);
}

/* Status badges */
.badge.pending{
  background:#fff3cd;
  color:#8a6d00;
  border-color:#ffe69c;
}

.badge.rejected{
  background:#fde2e2;
  color:#a10000;
  border-color:#f5b5b5;
}

html[data-theme="dark"] .badge.pending{
  background:#3a331a;
  color:#ffcf70;
  border-color:#6b5f2a;
}

html[data-theme="dark"] .badge.rejected{
  background:#3a1a1a;
  color:#ff9b9b;
  border-color:#6b2a2a;
}

/* Drag & drop hint text */
.drop-hint{
  color: var(--muted);
  font-weight: 600;
}
html[data-theme="dark"] .drop-hint{
  color: var(--muted);
}

/* Status filter links */
.status-filter{
  margin:10px 0;
}
.status-filter a{
  color: var(--link);
  font-weight:600;
}
html[data-theme="dark"] .status-filter a{
  color: var(--link);
}

/* Optional: smooth theme switch */
*{
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}