/* ========================================
   FEY.COM INSPIRED DARK THEME FOR DMS PWA
   ======================================== */

/* CSS Variables - Fey.com Color Palette */
:root {
    /* Backgrounds */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #252525;

    /* Glass Effect */
    --glass-bg: rgba(26, 26, 26, 0.6);
    --glass-border: rgba(255, 255, 255, 0.05);

    /* Accent Colors */
    --accent-blue: #3b82f6;
    --accent-blue-light: #60a5fa;
    --accent-green: #10b981;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --accent-purple: #a855f7;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-emphasis: rgba(255, 255, 255, 0.15);
}

/* Smooth transitions */
* {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   GLASSMORPHIC CARDS
   ======================================== */

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(59, 130, 246, 0.05);
}

.glass-card:hover {
    border-color: var(--border-default);
    transform: translateY(-2px);
    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.5),
        0 0 50px rgba(59, 130, 246, 0.08);
}

/* ========================================
   GRADIENT DASHBOARD CARDS
   ======================================== */

/* Food Donations Card (Green) */
/* Food Donations Card (Green) */
.stat-card-food {
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.12) 0%,
            rgba(6, 78, 59, 0.06) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
    border-left: 4px solid #10b981 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
}

/* Money Donations Card (Purple - User request says Money=Blue but existing was purple for count? logic: Money Count vs Total Money) */
/* Actually user spec says "MONEY DONATIONS CARD... Blue". The existing .stat-card-money was Purple. I will change it to Blue as requested. */
/* But wait, Total Money is also Blue. If both are blue, maybe I should make one Purple? */
/* User spec: "MONEY DONATIONS CARD... Blue". I will follow spec. */
.stat-card-money {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.12) 0%,
            rgba(29, 78, 216, 0.06) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-left: 4px solid #3b82f6 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
}

/* Total Money Card (Blue -> maybe make this one Purple to differentiate? Or keep strict to Money=Blue?) */
/* I will use the Purple theme for Total Money to verify visual distinctness, or stick to user spec. 
   User gave strict spec for "Money Donations Card". 
   Let's keep Total Money distinct if possible. Or maybe the user meant "Money Donations" as the category. 
   Existing was: Food=Green, Money=Purple, Total=Blue, Active=Amber.
   User spec: Food=Green, Money=Blue. 
   I will change Money Count to Blue. Total Money is also Money. 
   Let's make .stat-card-total also Blue or maybe Indigo? 
   I'll stick to the "Money" spec for both money-related cards unless I see a reason not to.
   Actually, looking at the code `stat-card-money` is likely the "Money Donations Count". 
   `stat-card-total` is "Total Money".
   I'll apply the blue spec to `.stat-card-money`. 
   For `.stat-card-total`, I will leave it or adapt it. I'll use the Purple theme for "Active" or something else?
   Let's use the Purple accent for `stat-card-total` to keep variety? No, money is blue.
   I'll use the suggested Blue spec for `stat-card-money`. 
   I'll update `stat-card-total` to use the same Blue theme but maybe slightly different? Or identical. 
   Let's update `stat-card-total` to match the Money spec for consistency.
*/
.stat-card-total {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.12) 0%,
            rgba(29, 78, 216, 0.06) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-left: 4px solid #3b82f6 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
}

/* Active Donations Card (Amber) */
.stat-card-active {
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.12) 0%,
            rgba(217, 119, 6, 0.06) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.15) !important;
    border-left: 4px solid #f59e0b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
}

/* Stat Card Hover Effects */
.stat-card-food:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15) !important;
}

.stat-card-money:hover,
.stat-card-total:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15) !important;
}

.stat-card-active:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15) !important;
}

/* Enforce Spec Text Colors for Stat Cards */
.stat-card-food .text-sm,
.stat-card-money .text-sm,
.stat-card-total .text-sm,
.stat-card-active .text-sm {
    color: var(--text-secondary) !important;
    /* #a1a1aa */
    opacity: 1 !important;
}

.stat-card-food .text-3xl,
.stat-card-money .text-3xl,
.stat-card-total .text-3xl,
.stat-card-active .text-3xl {
    color: var(--text-primary) !important;
    /* #ffffff */
}

/* ========================================
   PREMIUM BUTTONS
   ======================================== */

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px;
    color: white !important;
    font-weight: 600 !important;
    font-size: 16px;
    letter-spacing: 0.02em;
    box-shadow:
        0 4px 12px rgba(59, 130, 246, 0.3),
        0 0 20px rgba(59, 130, 246, 0.1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(59, 130, 246, 0.4),
        0 0 30px rgba(59, 130, 246, 0.15) !important;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Danger/Logout Button */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow:
        0 4px 12px rgba(239, 68, 68, 0.3),
        0 0 20px rgba(239, 68, 68, 0.1);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(239, 68, 68, 0.4),
        0 0 30px rgba(239, 68, 68, 0.15) !important;
}

/* WhatsApp Button */
.btn-whatsapp {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow:
        0 4px 12px rgba(16, 185, 129, 0.3),
        0 0 20px rgba(16, 185, 129, 0.1);
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(16, 185, 129, 0.4),
        0 0 30px rgba(16, 185, 129, 0.15) !important;
}

/* Call Button */
.btn-call {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow:
        0 4px 12px rgba(59, 130, 246, 0.3),
        0 0 20px rgba(59, 130, 246, 0.1);
}

.btn-call:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(59, 130, 246, 0.4),
        0 0 30px rgba(59, 130, 246, 0.15) !important;
}

/* ========================================
   NAVIGATION - HEADER
   ======================================== */

header {
    background: rgba(26, 26, 26, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

header button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

header button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   SIDEBAR
   ======================================== */

#sidebar {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--border-subtle) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}

/* Sidebar active nav item */
.nav-item.active {
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.15) 0%,
            rgba(37, 99, 235, 0.08) 100%);
    border-left: 3px solid #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

/* Nav item hover */
.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   NOTIFICATION PANEL
   ======================================== */

#notificationPanel {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid var(--border-subtle) !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

#notificationPanel .border-b {
    border-color: var(--border-subtle) !important;
}

#notificationPanel h2 {
    color: var(--text-primary) !important;
}

#notificationPanel button {
    color: var(--text-secondary) !important;
}

#notificationPanel button:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.05);
}

/* Notification items */
.notification-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-default);
}

/* Notification urgency colors */
.notification-urgent {
    border-left: 4px solid var(--accent-red);
    background: linear-gradient(135deg,
            rgba(239, 68, 68, 0.1) 0%,
            rgba(220, 38, 38, 0.05) 100%);
}

.notification-warning {
    border-left: 4px solid var(--accent-amber);
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.1) 0%,
            rgba(217, 119, 6, 0.05) 100%);
}

.notification-normal {
    border-left: 4px solid var(--accent-green);
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.1) 0%,
            rgba(6, 78, 59, 0.05) 100%);
}

/* ========================================
   DONATION CARDS
   ======================================== */

.donation-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(59, 130, 246, 0.05);
}

.donation-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-default);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(59, 130, 246, 0.08);
}

/* Urgency gradient backgrounds */
.urgency-urgent {
    background: linear-gradient(135deg,
            rgba(239, 68, 68, 0.15) 0%,
            rgba(220, 38, 38, 0.08) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.urgency-warning {
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.15) 0%,
            rgba(217, 119, 6, 0.08) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.urgency-normal {
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.15) 0%,
            rgba(6, 78, 59, 0.08) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

/* ========================================
   MODALS
   ======================================== */

.modal-overlay {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-default) !important;
    border-radius: 20px !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(59, 130, 246, 0.05);
}

.modal-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
}

/* ========================================
   FREE DATES CALENDAR
   ======================================== */

/* Calendar Cell - Available (Green) */
.calendar-cell.available {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.calendar-cell.available:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

/* Calendar Cell - Morning Only (Yellow) */
.calendar-cell.morning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.calendar-cell.morning:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
}

/* Calendar Cell - Afternoon Only (Blue) */
.calendar-cell.afternoon {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.calendar-cell.afternoon:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Calendar Cell - Blocked (Red) */
.calendar-cell.blocked {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.calendar-cell.blocked:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Calendar Cell - Special (Orange) */
.calendar-cell.special {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.calendar-cell.special:hover {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.3);
}

/* ========================================
   LOADING & SKELETON
   ======================================== */

.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Countdown timer styling */
.countdown-timer {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* ========================================
   STATUS INDICATORS
   ======================================== */

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-active {
    background-color: var(--accent-green);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.status-pending {
    background-color: var(--accent-amber);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.status-completed {
    background-color: var(--text-muted);
}

/* ========================================
   PAGE & MODAL ANIMATIONS
   ======================================== */

.page {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-slide-up {
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-slide-down {
    animation: slideDown 0.3s ease-in forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Pull to refresh */
.pull-to-refresh-active {
    transform: translateY(0) !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar for all browsers */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Prevent text selection on buttons */
button,
a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .donation-card {
        min-height: 200px;
    }
}

/* ========================================
   SPLASH SCREEN ANIMATIONS
   ======================================== */

/* Logo Animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.logo-text {
    animation: fadeInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dots Animation */
@keyframes dotPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.dot:nth-child(1) {
    animation: dotPulse 1.5s ease-in-out infinite;
}

.dot:nth-child(2) {
    animation: dotPulse 1.5s ease-in-out 0.3s infinite;
}

.dot:nth-child(3) {
    animation: dotPulse 1.5s ease-in-out 0.6s infinite;
}

/* Fade out on hide */
#splash.hidden {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ========================================
   RECENT DONATIONS SECTION
   ======================================== */

#recentDonationsList>div {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
}

#recentDonationsList>div:hover {
    border-color: var(--border-default);
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   INPUT FIELDS (Login, Forms)
   ======================================== */

input[type="text"],
input[type="password"],
input[type="email"],
select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

input::placeholder {
    color: var(--text-muted) !important;
}

/* Checkbox styling */
input[type="checkbox"] {
    accent-color: var(--accent-blue);
}

/* Biometric login section - matches glass theme */
#biometricLoginBtn:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #bfdbfe !important;
}
#biometricLoginBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}