/* css/styles.css */

/* Custom terminal-chic utilities & overrides */

/* ---- App Shell Layout ---- */

/* Simple, reliable layout — mirrors the Expense Tracker pattern.
   With apple-mobile-web-app-status-bar-style=default, iOS automatically
   reserves space for the status bar, so no safe-area tricks needed. */

html,
body {
    width: 100%;
    height: 100%;
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 448px;
    /* matches Tailwind max-w-md */
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Fix date input display on iOS Safari */
html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    min-height: 48px;
    display: block;
    width: 100%;
}

/* Force inner text components to be visible and inherit colors */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: inherit;
    padding: 0;
    margin: 0;
}

/* Fix calendar icon in dark mode if needed */
html.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    opacity: 0.7;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Glassmorphism for bottom nav and modals */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.85);
    /* slate-900 with opacity */
}

.glass-modal {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dark .glass-modal {
    background: rgba(30, 41, 59, 0.95);
    /* slate-800 with opacity */
}

/* Input custom styles for terminal feel */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Spinner */
.spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 3px solid #6366f1;
    /* indigo-500 */
    width: 24px;
    height: 24px;
    -webkit-animation: spin 1s linear infinite;
    /* Safari */
    animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}