/* "Taskhub" dark theme: near-black green-tinted surfaces, soft rounded cards,
   green accent. Built on Bootstrap's data-bs-theme="dark". */

:root, [data-bs-theme="dark"] {
  --th-bg: #141816;          /* page background */
  --th-sidebar: #181d1a;     /* sidebar surface */
  --th-surface: #1e2421;     /* cards */
  --th-surface-2: #262d29;   /* nested surfaces, hovers, inputs */
  --th-border: #2b332e;
  --th-text: #e8ece9;
  --th-muted: #93a09a;
  --th-green: #3ddc84;       /* accent */
  --th-green-dim: rgba(61, 220, 132, 0.12);
  --th-amber: #fbbf24;
  --th-red: #f87171;
  --th-blue: #60a5fa;

  --bs-body-bg: var(--th-bg);
  --bs-body-color: var(--th-text);
  --bs-border-color: var(--th-border);
  --bs-secondary-color: var(--th-muted);
}

body {
  background: var(--th-bg);
  color: var(--th-text);
  font-size: 0.93rem;
  -webkit-font-smoothing: antialiased;
}

main.container { max-width: 1100px; }

h1, .h3, .h4 { font-weight: 700; letter-spacing: -0.01em; }

/* ---- App shell ---- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.1rem 0.9rem;
  background: var(--th-sidebar);
  border-right: 1px solid var(--th-border);
}
.sidebar-brand {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--th-text);
  padding: 0.3rem 0.8rem 1.1rem;
  border-bottom: 1px dashed var(--th-border);
  margin-bottom: 0.9rem;
}
.sidebar-brand:hover { color: var(--th-green); }
.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.75rem;
  color: var(--th-muted);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-link:hover { color: var(--th-text); background: var(--th-surface-2); }
.sidebar-link.active {
  color: var(--th-text);
  background: var(--th-surface-2);
  box-shadow: inset 2px 0 0 var(--th-green);
}
.sidebar-link.disabled { color: #5c665f; cursor: default; }
.sidebar-sublink {
  margin-left: 1.6rem;
  padding: 0.42rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 500;
}
.sidebar-sublink .sidebar-icon { width: 1.1rem; font-size: 0.85em; }
.sidebar-link.disabled:hover { background: none; }
.sidebar-icon { width: 1.35rem; text-align: center; }
.sidebar-user {
  border-top: 1px dashed var(--th-border);
  padding: 1rem 0.85rem 0.25rem;
  color: var(--th-muted);
}
.sidebar-user .fw-bold { color: var(--th-text); }
.sidebar-user .btn-outline-light {
  color: var(--th-muted);
  border: 1px solid var(--th-border);
  border-radius: 0.75rem;
  font-weight: 600;
}
.sidebar-user .btn-outline-light:hover {
  color: #0e1411;
  background: var(--th-green);
  border-color: var(--th-green);
}
.content { flex-grow: 1; min-width: 0; padding: 1.9rem 2.1rem 3rem; max-width: 1200px; }

@media (max-width: 767.98px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--th-border); }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-user { border-top: none; padding-top: 0.5rem; }
  .content { padding: 1.1rem 1rem 2rem; }
}

/* ---- Cards ---- */
.card {
  border: 1px solid var(--th-border);
  border-radius: 1rem;
  background: var(--th-surface);
  box-shadow: none;
  overflow: hidden;
}
.card .card-title { font-weight: 700; }

/* Stat blocks (home page) */
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.stat-label { color: var(--th-muted); font-weight: 600; font-size: 0.85rem; }
.stat-delta-up { color: var(--th-green); font-weight: 700; }
.stat-delta-warn { color: var(--th-amber); font-weight: 700; }

/* ---- Buttons ---- */
.btn { border-radius: 0.75rem; font-weight: 700; }
.btn-primary {
  background: var(--th-green);
  border: none;
  color: #0e1411;
}
.btn-primary:hover, .btn-primary:focus {
  background: #2fc974;
  color: #0e1411;
}
.btn-outline-primary { color: var(--th-green); border: 1px solid rgba(61, 220, 132, 0.45); }
.btn-outline-primary:hover { background: var(--th-green); border-color: var(--th-green); color: #0e1411; }
.btn-outline-secondary { color: var(--th-muted); border-color: var(--th-border); border-radius: 0.75rem; }
.btn-outline-secondary:hover { background: var(--th-surface-2); color: var(--th-text); border-color: var(--th-border); }
.btn-link { color: var(--th-green); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: #2fc974; }

/* ---- Badges: soft translucent chips ---- */
.badge { border-radius: 999px; padding: 0.38em 0.75em; font-weight: 700; }
.badge.text-bg-secondary { background: var(--th-surface-2) !important; color: var(--th-muted) !important; }
.badge.text-bg-info      { background: rgba(96, 165, 250, 0.15) !important; color: var(--th-blue) !important; }
.badge.text-bg-success   { background: var(--th-green-dim) !important; color: var(--th-green) !important; }
.badge.text-bg-warning   { background: rgba(251, 191, 36, 0.14) !important; color: var(--th-amber) !important; }
.badge.text-bg-danger    { background: rgba(248, 113, 113, 0.14) !important; color: var(--th-red) !important; }

/* ---- Tables ---- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--th-text); }
.table thead th {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--th-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--th-border);
}
.table td { border-color: var(--th-border); }
.table-hover > tbody > tr:hover > * { background-color: var(--th-surface-2); color: var(--th-text); }

/* ---- Section labels ---- */
.card .text-uppercase {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  font-weight: 800;
  color: var(--th-muted) !important;
}

/* ---- Nav pills ---- */
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--th-muted); }
.nav-pills .nav-link:hover { color: var(--th-text); }
.nav-pills .nav-link.active { background: var(--th-green); color: #0e1411; }

/* ---- Forms ---- */
.form-control, .form-select {
  background: var(--th-surface-2);
  border-color: var(--th-border);
  border-radius: 0.75rem;
  color: var(--th-text);
  padding: 0.5rem 0.85rem;
}
.form-control:focus, .form-select:focus {
  background: var(--th-surface-2);
  border-color: var(--th-green);
  color: var(--th-text);
  box-shadow: 0 0 0 0.2rem var(--th-green-dim);
}
.form-control::placeholder { color: #6b756f; }
.form-label { font-weight: 600; }
/* Checkboxes: white so they stand out on the dark surface */
.form-check-input { background-color: #f4f6f5; border-color: #8b968f; }
.form-check-input:checked { background-color: var(--th-green); border-color: var(--th-green); }
/* Toggle switches keep the dark track (the green fill shows their state) */
.form-switch .form-check-input { background-color: var(--th-surface-2); border-color: var(--th-border); }
.form-switch .form-check-input:checked { background-color: var(--th-green); border-color: var(--th-green); }
.form-text { color: var(--th-muted); }

/* ---- Alerts ---- */
.alert { border-radius: 1rem; border: 1px solid var(--th-border); }

/* ---- Pagination ---- */
.page-link {
  color: var(--th-muted);
  background: var(--th-surface);
  border-color: var(--th-border);
  border-radius: 0.5rem;
}
.page-link:hover { color: var(--th-text); background: var(--th-surface-2); }

/* ---- Misc ---- */
code {
  background: var(--th-surface-2);
  color: var(--th-green);
  padding: 0.12rem 0.45rem;
  border-radius: 0.5rem;
  font-size: 0.85em;
  font-weight: 600;
}
.text-muted { color: var(--th-muted) !important; }
dt { color: var(--th-muted); font-weight: 600; }

/* Module checklists on home */
.module-list { list-style: none; padding: 0; margin: 0; }
.module-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--th-border);
}
.module-list li:last-child { border-bottom: none; }
.module-done { color: var(--th-green); }
.module-next { color: var(--th-muted); }

/* Active-bot badge: a slow "breathing" glow so a running bot reads as alive
   without the irritation (and accessibility hazard) of a real blink.
   The pulse quickens for a few minutes after the bot actually does
   something, so movement means news. Never animates when the bot is OFF,
   and stops entirely for anyone who asks for reduced motion. */
@keyframes bot-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); filter: brightness(1); }
  50%      { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); filter: brightness(1.25); }
}
.bot-live { animation: bot-breathe 2.4s ease-in-out infinite; }
.bot-live-busy { animation-duration: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .bot-live, .bot-live-busy { animation: none; }
}