/* Theme CSS — Unified design matching public_dashboard.html
   Uses Bootstrap 5 utilities + custom overrides for consistency. */

:root {
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-50: #F0FDF4;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-700: #374151;
  --gray-900: #111827;
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
body {
  background-color: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Django messages → floating toasts ── */
.msg-stack {
  position: fixed; top: 80px; right: 24px; z-index: 1080;
  display: flex; flex-direction: column; gap: 8px; max-width: 360px;
}
.msg {
  padding: 12px 16px; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.875rem; animation: msg-in 0.25s ease-out;
}
.msg.success { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.msg.error   { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
.msg.info    { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.msg.warning { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msg-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ── Custom form input ── */
.input-custom {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--gray-200); border-radius: 8px;
  background: #fff; font-size: 0.875rem; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-custom:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* ── Buttons — unified green using Bootstrap success palette ── */
.btn-green {
  background: var(--green-600); color: white; border: none;
  font-weight: 500; border-radius: 8px; padding: 8px 16px; font-size: 0.875rem;
}
.btn-green:hover { background: #15803d; color: white; }

.btn-green-gradient {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  color: white; border: none; font-weight: 600; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
.btn-green-gradient:hover { opacity: 0.9; color: white; }

.btn-custom-outline {
  background: #fff; border: 1px solid var(--gray-200); color: var(--gray-700);
  font-weight: 500; border-radius: 8px; padding: 8px 16px; font-size: 0.875rem;
}
.btn-custom-outline:hover { background: var(--gray-50); }

.btn-custom-danger { background: #ef4444; color: white; border: none; border-radius: 8px; }
.btn-custom-danger:hover { background: #dc2626; color: white; }

/* ── Card — matches public_dashboard white cards ── */
.card-custom {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

/* ── Table — matches public_dashboard table ── */
.table-custom {
  width: 100%; margin-bottom: 0;
}
.table-custom thead th {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.8rem; font-weight: 500; color: var(--gray-500);
  padding: 12px 16px; text-align: left;
}
.table-custom tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle; font-size: 0.875rem;
}
.table-custom tbody tr:hover { background: var(--gray-50); }
.table-custom tbody tr { transition: background 0.1s; }

/* ── Badge pill ── */
.badge-pill-custom {
  display: inline-block; padding: 3px 10px;
  border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}

/* ── Modal ── */
.modal-custom .modal-content {
  border-radius: 12px; border: none;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}
.modal-custom .modal-header {
  border-bottom: 1px solid var(--gray-200); padding: 16px 24px;
}
.modal-custom .modal-body { padding: 20px 24px; }

/* ── Topbar nav links ── */
.nav-link-custom {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 0.875rem; color: var(--gray-500);
  text-decoration: none; transition: all 0.15s; font-weight: 400;
}
.nav-link-custom:hover { background: var(--gray-50); color: var(--gray-700); }
.nav-link-custom.active {
  color: var(--green-600); font-weight: 600; background: var(--green-50);
}

/* ── Progress bar ── */
.progress-green {
  height: 8px; border-radius: 9999px; background: var(--gray-200);
}
.progress-green .progress-bar { border-radius: 9999px; }

/* ── Text truncate ── */
.text-truncate-custom {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}