/**
 * Kickbox Verein Wohlen - Custom Styles
 */

/* Base Overrides */
:root {
    --primary: #146ec6;
    --primary-hover: #0f5aa3;
}

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

/* Alpine.js x-cloak */
[x-cloak] {
    display: none !important;
}

/* Better touch targets for tablets */
@media (max-width: 1024px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    input, select, textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--b2));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--bc) / 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--bc) / 0.5);
}

/* Card hover effects */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Stat cards */
.stats {
    @apply shadow-xl bg-base-200;
}

.stat {
    @apply border-base-300;
}

/* Table improvements */
.table th {
    @apply bg-base-200/50 text-xs uppercase tracking-wider;
}

.table tr:hover {
    @apply bg-base-200/50;
}

/* Form styling */
.form-control {
    @apply mb-4;
}

.label-text {
    @apply font-medium;
}

.input, .select, .textarea {
    @apply bg-base-200 border-base-300;
}

.input:focus, .select:focus, .textarea:focus {
    @apply border-primary outline-none ring-2 ring-primary/20;
}

/* Signature Pad */
.signature-pad-container {
    @apply relative bg-white rounded-lg border-2 border-dashed border-base-300;
    touch-action: none;
}

.signature-pad-container canvas {
    @apply w-full rounded-lg;
    height: 200px;
}

.signature-pad-container .clear-btn {
    @apply absolute top-2 right-2 btn btn-ghost btn-sm;
}

/* Loading states */
.loading-overlay {
    @apply fixed inset-0 bg-base-300/80 backdrop-blur-sm z-50 flex items-center justify-center;
}

/* Status badges */
.badge-aktiv_bezahlt {
    @apply bg-success text-success-content;
}

.badge-aktiv_offen {
    @apply bg-warning text-warning-content;
}

.badge-passiv {
    @apply bg-base-300 text-base-content;
}

.badge-archiviert {
    @apply bg-error/20 text-error;
}

/* Invoice status */
.badge-entwurf {
    @apply bg-base-300;
}

.badge-proof_gesendet {
    @apply bg-info/20 text-info;
}

.badge-versendet {
    @apply bg-primary/20 text-primary;
}

.badge-bezahlt {
    @apply bg-success/20 text-success;
}

.badge-mahnung_1, .badge-mahnung_2 {
    @apply bg-warning/20 text-warning;
}

.badge-storniert {
    @apply bg-error/20 text-error;
}

/* Dashboard widgets */
.widget {
    @apply card bg-base-200 shadow-xl;
}

.widget-title {
    @apply text-lg font-bold mb-4 flex items-center gap-2;
}

.widget-content {
    @apply card-body;
}

/* Chart container */
.chart-container {
    @apply relative;
    height: 300px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* PWA install button */
.pwa-install-btn {
    @apply fixed bottom-4 right-4 btn btn-primary btn-lg shadow-xl z-50;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Mobile menu toggle animation */
.menu-toggle .line {
    @apply transition-all duration-300;
}

.menu-toggle.active .line-1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .line-2 {
    opacity: 0;
}

.menu-toggle.active .line-3 {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* QR Code styling */
.qr-code-container {
    @apply bg-white p-4 rounded-lg inline-block;
}

.qr-code-container img, .qr-code-container svg {
    @apply max-w-full h-auto;
}

/* Page Transitions */
.animate-fade-in {
    animation: fadeInUp 0.4s ease-out backwards;
}

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

/* View Transitions API Support */
::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}

::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in-up;
}