@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Base styles */
:root {
    --brand-primary: #1ABC9C;
    --brand-dark: #16A085;
    --brand-light: #E8F8F5;
    --gold: #FFD700;
    --gray-100: #F7FAFC;
    --gray-200: #EDF2F7;
    --gray-300: #E2E8F0;
    --gray-400: #CBD5E0;
    --gray-500: #A0AEC0;
    --gray-600: #718096;
    --gray-700: #4A5568;
    --gray-800: #2D3748;
    --gray-900: #1A202C;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
}

/* Prevent pull-to-refresh on mobile */
body {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#app-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Loading overlay */
#loading-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(26, 188, 156, .7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(26, 188, 156, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(26, 188, 156, 0);
    }
}

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

/* Loading skeleton */
.loading-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0)
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
    color: transparent !important;
}

/* Tab content transitions */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.tab-content.active {
    display: block;
}

/* Brand gradient */
.brand-gradient {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-dark));
    color: white;
    position: relative;
    overflow: hidden;
    /* padding: 1rem; REMOVED */
    /* The following properties were specific to when .brand-gradient was used for the balance display area,
       and are not part of the header's .brand-gradient styling.
       They are removed here to revert .brand-gradient to its generic definition.
       The header element itself has its own padding defined by Tailwind's p-4.
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    */
}

/*
.brand-gradient::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}
*/

/* Buttons */
button {
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

button:active {
    transform: scale(0.98);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Radio tiles */
.radio-tile {
    transition: all 0.2s ease;
    border-width: 2px;
}

input[type=radio]:checked + .radio-tile {
    border-color: var(--brand-primary);
    background: var(--brand-light);
    transform: scale(1.02);
}

/* FAB button */
.fab {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Toast notifications */
#toast {
    z-index: 1000;
    pointer-events: none;
}

#toast.opacity-100 {
    pointer-events: auto;
}

/* Form inputs */
input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.1);
}

/* Transaction list items */
.rounded-xl {
    transition: all 0.2s ease;
}

.rounded-xl:hover {
    transform: translateY(-1px);
}

/* Network status indicator */
#connection-status i {
    animation: pulse 2s infinite;
}

/* Dark mode styles */
body.dark {
    background-color: var(--gray-900);
    color: var(--gray-100);
}

body.dark #app-container {
    background-color: var(--gray-900);
}

body.dark .bg-white {
    background-color: var(--gray-800);
}

body.dark .text-gray-800 {
    color: var(--gray-100);
}

body.dark .text-gray-700 {
    color: var(--gray-200);
}

body.dark .text-gray-500 {
    color: var(--gray-400);
}

body.dark .border-gray-100 {
    border-color: var(--gray-700);
}

body.dark .border-gray-200 {
    border-color: var(--gray-700);
}

body.dark .border-gray-300 {
    border-color: var(--gray-600);
}

body.dark .bg-gray-100 {
    background-color: var(--gray-700);
}

body.dark .bg-gray-50 {
    background-color: var(--gray-800);
}

body.dark nav {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

/* QR Code styling */
#qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 192px;
}

#qrcode img {
    display: block;
}

/* Utility classes */
.text-brand { color: var(--brand-primary); }
.bg-brand { background-color: var(--brand-primary); }
.hover\:bg-brand-dark:hover { background-color: var(--brand-dark); }
.border-brand { border-color: var(--brand-primary); }
.focus\:ring-brand:focus {
    --tw-ring-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.5);
}
.focus\:border-brand:focus { border-color: var(--brand-primary); }
.text-brand-dark { color: var(--brand-dark); }
.bg-brand-light { background-color: var(--brand-light); }
.text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.hover\:bg-gold:hover { background-color: var(--gold); }

/* Gain/Loss percentage text colors */
/* Removing old classes: .text-gain-on-dark, .text-loss-on-dark, .text-gain-on-light, .text-loss-on-light */

.balance-area-light {
    background-color: var(--brand-light); /* --brand-light is #E8F8F5 */
    color: var(--brand-dark); /* --brand-dark is #16A085 */
    padding: 1rem; /* Changed from 1.5rem (p-4 Tailwind equivalent) */
    margin-bottom: 1rem; /* From original classes (mb-4) */
    border-radius: 0.75rem; /* From original classes (rounded-xl) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* From original classes (shadow) */
    position: relative; /* Maintain for consistency, though ::after animation is not used */
    overflow: hidden; /* Maintain for consistency */
}

/* Neutral muted color for balance change percentage */
.text-balance-change-muted {
    color: var(--gray-600); /* --gray-600 is #718096 */
}

.crypto-select-tile input:checked + .tile-content {
    border-color: var(--brand-primary); /* Highlight border of selected tile */
    background-color: var(--brand-light); /* Light background for selected tile */
    transform: scale(1.02); /* Optional: slight scale effect */
}
.crypto-select-tile .tile-content {
    transition: all 0.2s ease; /* Smooth transition for selection */
    display: flex; /* For better internal alignment if needed */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* Ensure tiles have some minimum height */
}

/* Safe area adjustments for iOS */
@supports (padding: max(0px)) {
    header {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    
    nav {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #app-container {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (min-width: 640px) {
    #app-container {
        max-height: 90vh;
        margin-top: 5vh;
        margin-bottom: 5vh;
        border-radius: 1rem;
    }
}

/* Performance optimizations */
.fab,
button,
.rounded-xl {
    will-change: transform;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Print styles */
@media print {
    #loading-overlay,
    nav,
    .fab,
    button {
        display: none !important;
    }
    
    .tab-content {
        display: block !important;
        page-break-after: always;
    }
}