@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Logo filter for dark mode (makes black parts of the SVG white) */
    .dark .dark-logo-filter {
        filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.2));
    }
}

@layer components {
    /* Custom Checkboxes */
    .custom-checkbox input:checked + label {
        @apply bg-brand-red border-brand-red;
    }

    .custom-checkbox label:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 4px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .custom-checkbox input:checked + label:after {
        display: block;
    }

    /* Badges */
    .status-badge {
        @apply px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide inline-block;
    }
    .status-badge.paid { @apply bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400; }
    .status-badge.unpaid { @apply bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400; }
    .status-badge.partial { @apply bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400; }
}

@layer utilities {
    .animate-float {
        animation: float 10s ease-in-out infinite alternate;
    }
}

@keyframes float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

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

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