/* ==========================================================================
   WalletWatcher - Main Stylesheet
   Core styles, base resets, utilities, and global UI patterns.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font Imports (single declaration per family)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Cairo:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------------
   2. Base / Reset
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', 'Cairo', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.5);
}

/* --------------------------------------------------------------------------
   3. Alpine.js Cloak
   -------------------------------------------------------------------------- */
[x-cloak] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   4. Dark Mode Base
   -------------------------------------------------------------------------- */
.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
}

/* --------------------------------------------------------------------------
   5. Glass Effect
   -------------------------------------------------------------------------- */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(99, 102, 241, 0.15);
}

/* --------------------------------------------------------------------------
   6. Loading Pulse Animation
   -------------------------------------------------------------------------- */
@keyframes loading-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

.loading-pulse {
    animation: loading-pulse 1.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   7. Form Focus Styles
   -------------------------------------------------------------------------- */
.form-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15),
                0 0 0 1px rgba(99, 102, 241, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dark .form-input {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.dark .form-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15),
                0 0 0 1px rgba(129, 140, 248, 0.3);
}

/* --------------------------------------------------------------------------
   8. Modal Backdrop
   -------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Modal transitions */
.modal-enter {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-enter-from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
}

.modal-enter-to {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.modal-leave {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal-leave-from {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.modal-leave-to {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
}

/* --------------------------------------------------------------------------
   9. Loading Overlay
   -------------------------------------------------------------------------- */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dark .loading-overlay {
    background-color: rgba(15, 23, 42, 0.85);
}

.loading-overlay .spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   10. Hide Scrollbar Utility
   -------------------------------------------------------------------------- */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* --------------------------------------------------------------------------
   11. Focus Ring Improvements
   -------------------------------------------------------------------------- */
*:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 4px;
}

.dark *:focus-visible {
    outline-color: #818cf8;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* --------------------------------------------------------------------------
   12. Dark Mode Input Placeholder
   -------------------------------------------------------------------------- */
.dark input::placeholder,
.dark textarea::placeholder,
.dark select::placeholder {
    color: #64748b;
}

/* --------------------------------------------------------------------------
   13. RTL Specific Styles
   -------------------------------------------------------------------------- */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }

[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }

[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

[dir="rtl"] .rounded-l-lg { border-radius: 0 0.5rem 0.5rem 0; }
[dir="rtl"] .rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem; }

[dir="rtl"] .border-l { border-left: 0; border-right-width: 1px; }
[dir="rtl"] .border-r { border-right: 0; border-left-width: 1px; }

[dir="rtl"] .translate-x-full { --tw-translate-x: -100%; }
[dir="rtl"] .-translate-x-full { --tw-translate-x: 100%; }