/* StableManager Pro - Mobile-First CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --brand: #22c55e;
    --brand-dark: #16a34a;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
}

/* Safe bottom area for notch phones */
.safe-bottom { padding-bottom: calc(var(--safe-bottom) + 4px); }

/* Scrollbar hide */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Page transitions */
.page { animation: fadeIn 0.2s ease; }
.page.hidden { display: none; }

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

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

@keyframes slideRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-slide-right { animation: slideRight 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Navigation */
.nav-btn {
    color: #8899aa;
    transition: all 0.2s ease;
}
.nav-btn.active {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.nav-btn:active {
    transform: scale(0.9);
}

/* Cards */
.card-hover {
    transition: all 0.2s ease;
}
.card-hover:active {
    transform: scale(0.98);
}

/* Form inputs */
input, select, textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
}

/* Toast customization */
.toast {
    background: #1a2332 !important;
    border: 1px solid #2d3f56 !important;
    color: #e8edf2 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
}
.toast-success { border-left: 4px solid #22c55e !important; }
.toast-warning { border-left: 4px solid #f59e0b !important; }
.toast-error { border-left: 4px solid #ef4444 !important; }
.toast-info { border-left: 4px solid #3b82f6 !important; }
.toast-close-button { color: #8899aa !important; }

/* Stall map */
.stall-cell {
    transition: all 0.2s ease;
    cursor: pointer;
}
.stall-cell:active {
    transform: scale(0.95);
}

/* Calendar overrides */
.fc {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
}
.fc .fc-toolbar-title {
    font-size: 16px !important;
    color: #e8edf2 !important;
}
.fc .fc-button {
    background: #243044 !important;
    border: 1px solid #2d3f56 !important;
    color: #e8edf2 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}
.fc .fc-button-active {
    background: #22c55e !important;
    border-color: #22c55e !important;
}
.fc .fc-daygrid-day-number {
    color: #8899aa !important;
}
.fc .fc-day-today {
    background: rgba(34,197,94,0.08) !important;
}
.fc .fc-event {
    border-radius: 6px !important;
    padding: 1px 4px !important;
    border: none !important;
}
.fc th {
    color: #8899aa !important;
    font-weight: 500 !important;
}
.fc .fc-col-header-cell,
.fc .fc-daygrid-day,
.fc .fc-timegrid-slot {
    border-color: #2d3f56 !important;
}

/* Pulse animation for live indicators */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* Chart.js canvas fix */
canvas { max-width: 100%; }

/* Mobile touch */
button, a { touch-action: manipulation; }

/* Skeleton measurement marker */
.skel-marker {
    filter: drop-shadow(0 0 4px rgba(34,197,94,0.6));
}

/* Print styles for QR/PDF */
@media print {
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea { position: absolute; left: 0; top: 0; }
    .no-print { display: none !important; }
}

/* File upload styling */
input[type="file"]::file-selector-button {
    background: #243044;
    border: 1px solid #2d3f56;
    color: #e8edf2;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 8px;
}

/* Recurring task badge pulse */
@keyframes recur-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responsive */
@media (min-width: 640px) {
    main { max-width: 640px; margin: 0 auto; }
}
@media (min-width: 1024px) {
    main { max-width: 800px; }
    .nav-btn span { display: inline; }
}

/* App load error fallback */
#appLoadError {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0f1419;
    color: #e8edf2;
    font-family: 'Inter', sans-serif;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
#appLoadError h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
#appLoadError p { color: #8899aa; font-size: 0.875rem; margin-bottom: 1rem; }
#appLoadError button { background: #22c55e; color: #fff; padding: 0.75rem 2rem; border-radius: 0.75rem; border: none; font-weight: 600; cursor: pointer; }