/* =====================================================
   VMS Global Theme — Blue / White / Grey
   Applies to Admin, Volunteer, and Super Admin panels
   ===================================================== */

:root {
    --blue-400: #f87171;
    --blue-500: #ef4444;
    --blue-600: #dc2626;
    --blue-700: #b91c1c;
    --blue-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

    /* Background */
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;

    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
}

/* ── Page background & text ───────────────────────── */
body {
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
}

/* ── Replace every indigo shade with pure blue ────── */
.bg-indigo-600, .bg-indigo-700, .bg-indigo-500 { background-color: var(--blue-600) !important; }
.bg-indigo-100  { background-color: #fee2e2 !important; }
.bg-indigo-50   { background-color: #fef2f2 !important; }
.text-indigo-600, .text-indigo-700 { color: var(--blue-600) !important; }
.text-indigo-500 { color: var(--blue-500) !important; }
.border-indigo-500 { border-color: var(--blue-500) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--blue-700) !important; }
.focus\:ring-indigo-500:focus   { --tw-ring-color: var(--blue-500) !important; }
.focus\:border-indigo-500:focus { border-color: var(--blue-500) !important; }

/* ── Remove purple/violet entirely ───────────────── */
.bg-purple-600, .bg-purple-500 { background-color: var(--blue-600) !important; }
.bg-purple-100  { background-color: #fee2e2 !important; }
.text-purple-600, .text-purple-700 { color: var(--blue-600) !important; }

/* ── Admin dashboard — override primary (indigo) colours ─── */
/* These match the custom Tailwind `primary` token in dashboard.php */
.text-primary-600  { color: var(--blue-600) !important; }
.text-primary-700  { color: var(--blue-700) !important; }
.text-primary-500  { color: var(--blue-500) !important; }
.bg-primary-50     { background-color: #fef2f2 !important; }
.bg-primary-100    { background-color: #fee2e2 !important; }
.border-primary-100{ border-color: #fecaca !important; }
.border-primary-300{ border-color: #fca5a5 !important; }
.hover\:bg-primary-50:hover { background-color: #fef2f2 !important; }
.hover\:text-primary-700:hover { color: var(--blue-700) !important; }
.from-primary-100  { --tw-gradient-from: #fee2e2 !important; }
.to-primary-50     { --tw-gradient-to: #fef2f2 !important; }

/* ── Dashboard CSS overrides (gradient-bg, gradient-subtle) ─ */
.gradient-bg {
    background: var(--blue-gradient) !important;
}
.gradient-subtle {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
}
.card-hover:hover {
    border-color: #fca5a5 !important;
}

/* ── Form inputs — blue focus ring ───────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue-500) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ── Buttons ──────────────────────────────────────── */
.btn-primary {
    background: var(--blue-gradient);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── Cards — white with light grey border ─────────── */
.card, .stat-card {
    background: var(--bg-card);
    border-color: #e2e8f0;
}

/* ── Sidebar section titles ───────────────────────── */
.sidebar-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.5rem 1rem 0.25rem;
}

/* ── Sidebar link hover ───────────────────────────── */
.sidebar-link:hover {
    background-color: #fef2f2;
    color: var(--blue-600);
}

/* ── Active nav link ──────────────────────────────── */
.sidebar-active, .nav-active {
    background-color: #fef2f2;
    color: var(--blue-700);
    font-weight: 600;
}

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #fca5a5; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-500); }

/* ── Mobile responsiveness helpers ───────────────── */
@media (max-width: 640px) {
    .stat-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1023px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}