/* ============================================
   SAKUKU - Custom Styles
   ============================================ */

/* Safe area for notch phones */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Smooth transitions */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Minimum touch target */
button, a, input, select, textarea {
    min-height: 44px;
}

/* Scroll behavior */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

body {
    overscroll-behavior-y: contain;
}

/* Remove number input arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 4px;
}

/* Animations */
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

.animate-slideDown {
    animation: slideDown 0.3s ease-out;
}

.animate-slideUp {
    animation: slideUp 0.3s ease-out;
}

.animate-shake {
    animation: shake 0.5s ease-out;
}

/* Bottom sheet handle */
#bottom-sheet {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* FAB button — positioned via inline style */

/* Print styles */
@media print {
    #bottom-nav, #fab-btn, #offline-bar, #toast-container, button {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .bg-dark-card {
        background: #f8f9fa !important;
        border: 1px solid #dee2e6;
    }

    .text-emerald-400 { color: #059669 !important; }
    .text-red-400 { color: #dc2626 !important; }
    .text-blue-400 { color: #2563eb !important; }
    .text-slate-400 { color: #4b5563 !important; }

    #app {
        max-width: 100% !important;
    }
}

/* Skeleton loader */
.animate-pulse {
    background: linear-gradient(
        90deg,
        rgba(30, 41, 59, 1) 0%,
        rgba(51, 65, 85, 1) 50%,
        rgba(30, 41, 59, 1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Date input styling for dark theme */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Color input */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 4px;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

/* Select dropdown styling */
select {
    -webkit-appearance: none;
}

/* PWA Install Banner */
.pwa-banner-slide-up {
    animation: bannerSlideUp 0.4s ease-out;
}

@keyframes bannerSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Progress bar transitions */
.bg-emerald-500, .bg-amber-500, .bg-red-500 {
    transition: width 0.6s ease-out;
}