/* H&E Receipt Tracker - Custom Styles */

/* Base */
html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* Scrollbar dark */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Range input styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    background: #2a2a2a;
    height: 6px;
    border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px;
    background-color: #0d9488;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 2px solid #0a0a0a;
}
input[type="range"]::-moz-range-track {
    background: #2a2a2a;
    height: 6px;
    border-radius: 3px;
}
input[type="range"]::-moz-range-thumb {
    background-color: #0d9488;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 2px solid #0a0a0a;
}

/* Date input calendar icon color */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
}

/* Select arrow fallback */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em;
    padding-right: 2.5rem;
}

/* Touch targets */
button, .nav-btn, input[type="checkbox"], input[type="range"] {
    min-height: 44px;
}

/* Image preview smooth */
#receipt-preview {
    transition: opacity 0.2s ease;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
section:not(.hidden) > div {
    animation: fadeIn 0.25s ease-out;
}

/* Modal transitions */
#modal-delete, #modal-lightbox {
    transition: opacity 0.2s ease;
}
#modal-delete.hidden, #modal-lightbox.hidden {
    opacity: 0;
    pointer-events: none;
}
#modal-delete:not(.hidden), #modal-lightbox:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Bottom safe area for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    nav { padding-bottom: env(safe-area-inset-bottom); }
    #app-shell { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* Focus visible for accessibility */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

/* Loading shimmer for images */
img[src=""] {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}