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

/* PWA Base styles */
:root {
    --pwa-primary: #0d9488;
    --pwa-primary-dark: #0f766e;
    --pwa-success: #16a34a;
    --pwa-warning: #f59e0b;
    --pwa-danger: #dc2626;
}

/* Prevent text selection on touch */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Safe area handling */
html {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Hide scrollbar but keep functionality */
::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Input styles for mobile */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
}

/* Number input - hide spinners */
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;
}

/* Active states for better touch feedback */
button:active,
a:active {
    opacity: 0.9;
}

/* Custom focus states */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* Loading spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Pulse animation for indicators */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Page transition */
.page-enter-active,
.page-leave-active {
    transition: opacity 0.15s ease;
}

.page-enter-from,
.page-leave-to {
    opacity: 0;
}

/* Card press effect */
.card-press {
    transition: transform 0.1s ease;
}

.card-press:active {
    transform: scale(0.98);
}

/* Status colors */
.status-pending {
    @apply bg-gray-100 text-gray-600;
}

.status-overdue {
    @apply bg-red-100 text-red-700;
}

.status-partial {
    @apply bg-amber-100 text-amber-700;
}

.status-paid {
    @apply bg-green-100 text-green-700;
}

/* Large touch targets */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* iOS notch handling */
@supports (padding-top: env(safe-area-inset-top)) {
    .safe-area-top {
        padding-top: env(safe-area-inset-top);
    }

    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}