/* Bambanani - Custom Styles */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Page fade-in transition */
main {
    animation: pageIn 0.3s ease-out;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Smooth transitions */
a, button, input, select, textarea {
    transition: all 0.15s ease;
}

/* Focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(247, 123, 87, 0.15);
}

/* Table row clickable cursor */
tr[onclick] {
    cursor: pointer;
}

/* Cards hover lift */
.hover\:shadow-md:hover {
    transform: translateY(-1px);
}

/* Form labels consistency */
label {
    letter-spacing: 0.01em;
}

/* Badge consistency */
.rounded-full {
    white-space: nowrap;
}

/* Scrollbar styling for sidebar */
.overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

/* Print styles */
@media print {
    nav, footer, .no-print { display: none !important; }
    main {
        padding: 0 !important;
        animation: none !important;
    }
    .bg-white { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
    body { background: white !important; }

    /* Print report view cleanly */
    .print-report-header {
        display: block !important;
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #f77b57;
    }
    .print-report-header h1 {
        font-size: 18px;
        color: #f77b57;
    }

    .print-hide { display: none !important; }

    /* Force readable colors in print */
    * {
        color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Page break handling */
    .page-break-before { page-break-before: always; }
    .no-page-break { page-break-inside: avoid; }
}

/* Hero logo slow spin */
@keyframes heroSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.hero-spin {
    animation: heroSpin 20s linear infinite;
}

/* Subtle orange glow pulse */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(247, 123, 87, 0.15); }
    50% { box-shadow: 0 0 40px rgba(247, 123, 87, 0.3); }
}
.glow-pulse {
    animation: glowPulse 3s ease-in-out infinite;
}

/* Floating animation for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Fade-in-up for scroll reveal */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}
.fade-in-up-delay-1 { animation-delay: 0.1s; }
.fade-in-up-delay-2 { animation-delay: 0.2s; }
.fade-in-up-delay-3 { animation-delay: 0.3s; }
.fade-in-up-delay-4 { animation-delay: 0.4s; }

/* Counter number animation */
@keyframes countPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.count-pop {
    animation: countPop 0.5s ease-out forwards;
}

/* Orange gradient background accent */
.orange-gradient-bg {
    background: linear-gradient(135deg, rgba(247, 123, 87, 0.08) 0%, rgba(229, 90, 43, 0.12) 100%);
}

/* SA dot map */
.sa-dots-svg {
    color: #f77b57;
    width: 100%;
    height: auto;
}
@keyframes saDotPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.32; }
}
.sa-dot-g { opacity: 0.15; animation: saDotPulse 4s ease-in-out infinite; }
.sa-dot-hl { animation: saDotPulse 4s ease-in-out infinite; }
.sa-dot-g-0 { animation-delay: 0s; }
.sa-dot-g-1 { animation-delay: 0.7s; }
.sa-dot-g-2 { animation-delay: 1.4s; }
.sa-dot-g-3 { animation-delay: 2.1s; }
.sa-dot-g-4 { animation-delay: 2.8s; }
.sa-dot-g-5 { animation-delay: 3.5s; }

/* FAQ accordion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.faq-answer.open {
    max-height: 200px;
    padding-top: 0.75rem;
}
.faq-chevron {
    transition: transform 0.3s ease;
}
.faq-chevron.open {
    transform: rotate(180deg);
}

/* Validation error transitions */
.validation-error {
    animation: errorIn 0.2s ease-out;
}

@keyframes errorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Status card hover animation */
a[href*="reports.php?status"] {
    transition: all 0.2s ease;
}
a[href*="reports.php?status"]:hover {
    transform: translateY(-2px);
}

/* Soft green accent (success/safe signals) */
.accent-green-soft {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

/* Soft blue accent (info/neutral signals) */
.accent-blue-soft {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* Bamba guide strip text fade */
#bamba-guide-text {
    transition: opacity 0.15s ease;
}

/* Reassurance strip icon circles */
.reassurance-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Success page Bamba pulse */
@keyframes bambaPulse {
    0%, 100% { transform: scale(1.2); opacity: 0.25; }
    50% { transform: scale(1.4); opacity: 0.1; }
}
.bamba-success-ping {
    animation: bambaPulse 2s ease-in-out infinite;
}