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

/* Base Overrides */
:root {
    --primary: #146ec6;
    --primary-hover: #0f5aa3;
    --font-display: 'Barlow Condensed', 'Impact', sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* Typography */
body {
    font-family: var(--font-body);
}

h1, h2, h3, .card-title, .stat-value, .widget-title, .text-2xl, .text-3xl, .text-4xl {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}

h1 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* 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);
}

/* Glassmorphism Utility */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] .glass-panel {
    background: rgba(31, 41, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Card & Hover Effects */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 15px hsl(var(--p) / 0.4);
    transform: translateY(-1px);
}

/* Table Row Hover & Zebra */
.table tbody tr {
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border-left: 3px solid transparent;
}

.table tbody tr:hover {
    background-color: hsl(var(--p) / 0.06);
    border-left-color: hsl(var(--p));
}

.table tbody tr:nth-child(even) {
    background-color: hsl(var(--b2) / 0.5);
}

.table tbody tr:nth-child(even):hover {
    background-color: hsl(var(--p) / 0.06);
}

/* Avatar Ring on Hover */
.table tbody tr:hover .avatar > div {
    box-shadow: 0 0 0 2px hsl(var(--p) / 0.3);
    transition: box-shadow 0.2s ease;
}

/* ======================
   Sidebar Active State
   ====================== */
.menu li a.active {
    background: hsl(var(--p) / 0.12) !important;
    border-left: 3px solid hsl(var(--p)) !important;
    color: hsl(var(--p)) !important;
    font-weight: 600;
    padding-left: calc(0.75rem - 3px);
    position: relative;
}

.menu li a.active::before {
    content: '';
    position: absolute;
    inset: 4px 8px;
    background: hsl(var(--p) / 0.08);
    border-radius: 6px;
    z-index: -1;
}

.menu li a.active svg {
    color: hsl(var(--p));
}

.menu li a {
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.menu li a:hover:not(.active) {
    border-left-color: hsl(var(--bc) / 0.15);
    background: hsl(var(--bc) / 0.04);
}

/* ======================
   Focus-Visible (Accessibility)
   ====================== */
:focus-visible {
    outline: 2px solid hsl(var(--p));
    outline-offset: 2px;
    border-radius: 4px;
}

.btn:focus-visible {
    outline: 2px solid hsl(var(--p));
    outline-offset: 2px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none; /* Let DaisyUI ring handle this */
}

/* ======================
   Login Page
   ====================== */
.login-bg {
    background:
        radial-gradient(ellipse at 20% 80%, hsl(var(--p) / 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, hsl(var(--a, var(--p)) / 0.08) 0%, transparent 50%),
        hsl(var(--b3));
    min-height: 100vh;
}

.login-card {
    animation: loginSlideUp 0.5s ease-out backwards;
}

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

.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--bc) / 0.4);
    pointer-events: none;
    width: 18px;
    height: 18px;
    z-index: 1;
}

.input-icon-wrapper input {
    padding-left: 2.5rem;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: hsl(var(--bc) / 0.4);
    padding: 4px;
    z-index: 1;
}

.password-toggle:hover {
    color: hsl(var(--bc) / 0.7);
}

/* ======================
   Animated Stat Counters
   ====================== */
.stat-value[data-count-up] {
    display: inline-block;
}

/* ======================
   Skeleton Loading
   ====================== */
.skeleton-line {
    height: 0.75rem;
    border-radius: 0.375rem;
    background: linear-gradient(
        90deg,
        hsl(var(--bc) / 0.08) 25%,
        hsl(var(--bc) / 0.15) 50%,
        hsl(var(--bc) / 0.08) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-circle {
    border-radius: 9999px;
    background: linear-gradient(
        90deg,
        hsl(var(--bc) / 0.08) 25%,
        hsl(var(--bc) / 0.15) 50%,
        hsl(var(--bc) / 0.08) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Staggered widget entrance */
.widget {
    animation: widgetFadeIn 0.4s ease-out backwards;
}

.widget:nth-child(1) { animation-delay: 0.05s; }
.widget:nth-child(2) { animation-delay: 0.1s; }
.widget:nth-child(3) { animation-delay: 0.15s; }
.widget:nth-child(4) { animation-delay: 0.2s; }
.widget:nth-child(5) { animation-delay: 0.25s; }
.widget:nth-child(6) { animation-delay: 0.3s; }

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

/* ======================
   Empty States
   ====================== */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: hsl(var(--bc) / 0.5);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    opacity: 0.4;
}

.empty-state-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.empty-state-text {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Avatar-as-Checkbox */
.avatar-select {
    cursor: pointer;
    perspective: 600px;
    position: relative;
}

/* Override DaisyUI .avatar > div { overflow: hidden } which breaks preserve-3d */
.avatar-select .avatar-inner {
    position: relative !important;
    overflow: visible !important;
    width: 2.5rem;
    height: 2.5rem;
    transition: transform 0.35s ease;
    transform-style: preserve-3d !important;
}

.avatar-select.selected .avatar-inner {
    transform: rotateY(180deg);
}

.avatar-select .avatar-front,
.avatar-select .avatar-back {
    position: absolute !important;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border-radius: 9999px;
}

.avatar-select .avatar-front {
    z-index: 2;
}

.avatar-select .avatar-back {
    z-index: 1;
    transform: rotateY(180deg);
    background-color: #22c55e;
    color: #fff;
}

.avatar-select:hover {
    opacity: 0.85;
}


/* Selektierte Zeile */
tr.row-selected {
    background-color: hsl(var(--p) / 0.08) !important;
}

/* Sticky Bulk Action Bar */
.bulk-action-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: hsl(var(--b2) / 0.85);
    border: 1px solid hsl(var(--p) / 0.2);
}

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

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

/* Mobile: Stat-Cards im 2er-Grid */
@media (max-width: 639px) {
    .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-5 .stat {
        padding: 0.75rem;
    }

    .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-5 .stat-value {
        font-size: 1.5rem;
    }

    .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-5 .stat-figure {
        display: none;
    }
}

/* Stat card top accent */
.stat.glass-panel {
    border-top: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.stat.glass-panel:hover {
    border-top-color: hsl(var(--p) / 0.5);
}

/* 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);
    }
}

/* ======================
   Pulsing Online Dot
   ====================== */
@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

.online-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ======================
   Widget Accent Borders
   ====================== */
.widget-accent-error {
    border-left: 3px solid hsl(var(--er));
}

.widget-accent-success {
    border-left: 3px solid hsl(var(--su));
}

.widget-accent-warning {
    border-left: 3px solid hsl(var(--wa));
}

.widget-accent-info {
    border-left: 3px solid hsl(var(--in));
}

/* ======================
   Counter-Up Animation
   ====================== */
.count-up {
    display: inline-block;
    min-width: 1ch;
}

/* ======================
   Empty State Enhancement
   ====================== */
.empty-state-icon {
    animation: float 3s ease-in-out infinite;
}

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

/* 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;
}