:root {
    --color-primary: #06bcf9;
    --background-dark: #0f1e23;
    --border-dark: #27353a;
}

/* Utility alias to match View Financial Intelligence's Tailwind color key */
.border-border-dark { border-color: var(--border-dark) !important; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glow-effect {
    background: radial-gradient(circle at center, rgba(6, 168, 249, 0.15) 0%, transparent 70%);
}

.logo-image {
    width: 70px;
}

/* Active nav styling for app sidebar */
.fv-active {
    position: relative;
}
.fv-active::before {
    content: "";
    position: absolute;
    left: 0.25rem; /* inset from the rounded link edge */
    top: 50%;
    transform: translateY(-50%);
    width: 2px; /* thinner accent */
    height: 70%;
    background: var(--color-primary);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(6, 188, 249, 0.3);
}
.fv-active .material-symbols-outlined {
    color: var(--color-primary);
}

/* Ensure content doesn't hide behind fixed footer */
.fv-pad-footer {
    padding-bottom: 96px; /* approximate footer height */
}

/* Ensure content clears the fixed header (fallback before JS adjusts exact height) */
.fv-pad-header {
    padding-top: 64px; /* approximate header height */
}

/* Mobile drawer styles */
.fv-nav-mobile {
    /* Only affects small screens; desktop remains lg:flex via Tailwind */
    position: fixed;
    top: 0;
    left: 0;
    /* Allow CSS to size from header height variable set by JS; fallback to 100vh */
    top: var(--fv-header-height, 0);
    height: calc(100vh - var(--fv-header-height, 56px));
    width: 18rem; /* 72 * 0.25rem */
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 200ms ease-in-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    overflow-y: auto; /* make nav scrollable when content exceeds available space */
}
.fv-mobile-open {
    transform: translateX(0);
}
.fv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-in-out;
}
.fv-overlay.fv-show {
    opacity: 1;
    pointer-events: auto;
}

/* Tidy mobile nav content spacing */
@media (max-width: 1023px) {
    aside.fv-nav-mobile {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    aside.fv-nav-mobile .flex-1 {
        display: block; /* allow content to flow naturally */
        height: auto;
    }
    aside.fv-nav-mobile .truncate {
        white-space: nowrap;
    }
}

/* Reduce mobile nav top offset a bit to remove large empty gap on very small screens */
@media (max-width: 480px) {
    :root {
        /* when JS sets --fv-header-height, use a slightly reduced value for visual tightness */
        --fv-header-offset-adjust: clamp(44px, calc(var(--fv-header-height,56px) - 8px), 56px);
    }
    .fv-nav-mobile {
        top: var(--fv-header-offset-adjust, var(--fv-header-height, 56px));
        height: calc(100vh - var(--fv-header-offset-adjust, var(--fv-header-height, 56px)));
    }
}
/* Prevent body scroll when drawer is open */
.fv-no-scroll {
    overflow: hidden;
}

/* Header mobile menu panel */
.fv-header-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 56px; /* will be adjusted dynamically to real header height */
    z-index: 60;
    background: #ffffff;
    color: #111618;
    border-top: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 160ms ease, opacity 160ms ease;
}
.dark .fv-header-panel {
    background: #111618;
    color: #ffffff;
    border-top-color: var(--border-dark);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.fv-header-panel.fv-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.fv-header-links {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
}
.fv-header-links a {
    display: block;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.fv-header-links a:hover {
    background: #f4f4f4;
}
.dark .fv-header-links a:hover {
    background: #18282e;
}

/* Global scrollbar styling */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--background-dark);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: #3a4e55;
}

/* Home hero visual background */
.home-hero-visual {
    background-position: center;
    background-size: cover;
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBkvH2fQblHaBHsKV1tn7JMtJMUSU2D-M3mUpTNZjlF5U4g26zqd_8lDi10Y4yHYM8hwD3v066Ol79U_Usa3M9_B-seA_Z8IyF-yCsHQYESyI8E2GylMak4UhkCNTm4Zq_kDfuxi9vW8NP127YC821FF71tIO9Lofd002h-31IDsMKcXftbHNwf4xAAXCQqSY4EhZO_B5JuM3E4QrWa5b9seUw9zCCzcJK77aSj50O9Iud3m-AlDws877MqWNms_QkY9HTNgVHoNkk");
}

/* Helper: dot grid background for login hero */
.dot-grid-bg {
    background-image: radial-gradient(var(--color-primary) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* About page hero visual */
.about-hero-visual {
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(rgba(17, 22, 24, 0.7) 0%, rgba(17, 22, 24, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuANaqEHvdRghRyG-YyUF-PPkF6MxRHTtDIImqx6vH2ZZ5ov5BAPSSeY9HI2WqgZTEDBADwxY7OOazIwaca8eUahJ3cbAXD4Lv5p4x-p1m6JkpS2-RzBaS9HOWoDbhdkkN3ZjJr5NwoCpVStnbaYxvjjLtO3xAjabjAE1xWnblDRWWi2Ss7OuYhdGDWcm78qufpmdnv0eS5guPytSb_dZzfqtAPTRXspU3AIUe9cMUbaGgFfP9D50xH7jlSgjhaDaJA1qGEwSD_HoGw");
}

/* Card hero backgrounds for About and Solution cards */
.card-hero-1 {
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(rgba(3,7,10,0.68), rgba(3,7,10,0.4)), url("https://images.unsplash.com/photo-1526378721364-57d2b6a4f8a9?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=1");
}
.card-hero-2 {
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(rgba(2,8,19,0.6), rgba(2,8,19,0.32)), url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=4");
}

/* Image frame for section illustrations */
.img-frame {
    padding: 12px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    transition: box-shadow 280ms ease, transform 280ms ease;
}
.dark .img-frame { background: rgba(255,255,255,0.02); }
.img-frame .section-illustration {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 12px 30px rgba(2,8,19,0.35);
    transition: transform 420ms cubic-bezier(.2,.9,.3,1), box-shadow 420ms ease;
    will-change: transform;
}
.img-frame:hover .section-illustration {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(2,8,19,0.45);
}

/* Gentle idle float to make visuals feel alive; subtle and slow */
@keyframes fv-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
 100% { transform: translateY(0); }
}
.img-frame .section-illustration {
  animation: fv-float 8s ease-in-out infinite;
}

/* About page team card photo helpers */
.card-photo {
    background-position: center;
    background-size: cover;
}
.team-photo-1 {
    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCMPVawWCfBGkoVrALJATe3Vhb-cSC1M57MD1A-TX6zSSbxK5dnwOo2mjPd4V0TB9_wIatQGVYMoC9ML9JI4BmLjre_b6DiB0bMhNXoyS03ULQAzXWMyzUY8pU52HcwuBBDEMWKhj1j4oti4ZIljk_mbN4w6_g1l1tAMFStYpnrN746F9Ry56-Fy2kPqoyZNNc9GPLM3WIGhneML55krJ8PKMXA3KtHEjJ1dW8oV7Zks9HxXrDA3cmbspXn9JySluMhWs8HL-052lU');
}
.team-photo-2 {
    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDbYIyjvSh736sIEkGxi92csj8sGT8xp_cPzR8icbS1sZ32TFjuKyWqqfXupOu8SxLJPuYPWPpB679fjNAvnbeKiIcbDIJ26pJSBWGyKhyRaFRhnrtEBnJRlwHnmSSzNZoA_4aYKD5DLNrOd7T7V8Bl2NUbm9_jh-q1LojaCNDmzbikLBuKe9s9KUcVwuKZihD51q1M4-B4JZqV61DMuVfMB9p095OCut3QOacjsbVYXmipoijhSE-A7okTDSPKPbUNsJ5MTCuol3w');
}
.team-photo-3 {
    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBqbLsGJo9deRd02Y9ypXszaUQBU3qOdd9VPgrbD6lkuG45WG5SMRe1KIvDXFGzw_6iDt3z8Sfc8qQMvVrb7m2MuDgpPOvVCnqyQ5QY2YGKV98pgKpnhbJP6ZbwCcVivh8zgzOW5sh3s-W0Xckyc3xjoDB_nsM4bRmksFgzhrL-VNQNeXvYxO1Ot6JUgJiy902V4BgRDsiMRWPl0Ni0ZeaC4vwSCsc96Fn9m2adqB8DxbjTtpyE70J6okX94KvQYpg0fJmkHrl6RaE');
}
.team-photo-4 {
    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAWNKEyQHJgG-3pCJMb7oaiJYQRuaX19Cj0JFwrLFSCAQhRLFr_sWzbO9Q9iombpBW7FLsPWwWjwl2pq8ke7ntyJ0gBmJ6YVnybwED33sRHd6mJTHa9BmEUzUGFr7D11gBwWQx0Ko6vLutzA2ekuPWHJDWtSx8M-c403DdvtZWWTw1B0EzXTpcn6bYt2i1KzFgg1g2Ls63UGRqb4aMasfq9hH272Jn142J9xPsJ3LdZD0f_fb5vgl504Z8GFNbdknccxJzJnpZ_erE');
}

.app-content-container {
  margin-top: 30px;
  margin-bottom: 50px;
}

/* Footer responsive: stack elements on narrow screens so copyright appears on its own line */
@media (max-width: 640px) {
    footer.fv-fixed-footer .max-w-\[1200px\] {
        display: flex;
        flex-direction: column;        
        align-items: flex-start;
    }
    footer.fv-fixed-footer .max-w-\[1200px\] > div:last-child {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

 input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #06bcf9;
            cursor: pointer;
            margin-top: -6px;
            box-shadow: 0 0 10px rgba(6, 188, 249, 0.5);
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: #27353a;
            border-radius: 2px;
        }

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

/* Hide scrollbars for horizontally scrollable chips/rows */
.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none;            /* Chrome, Safari */
}

/* Mobile card view for tables */
@media (max-width: 640px) {
    .fv-mobile-cards {
        border-collapse: separate; /* allow rounded row cards */
        border-spacing: 0;
    }
    .fv-mobile-cards thead {
        display: none; /* hide table header on mobile */
    }
    .fv-mobile-cards tbody tr {
        display: block; /* stack as cards */
        margin: 12px;
        padding: 12px;
        border: 1px solid var(--border-dark);
        border-radius: 12px;
        background: transparent; /* keep theme background */
    }
    .fv-mobile-cards tbody tr:hover {
        background: rgba(39, 53, 58, 0.4); /* subtle hover in dark */
    }
    .fv-mobile-cards tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
    }
    .fv-mobile-cards tbody tr td:first-child {
        padding-top: 0;
        padding-bottom: 12px;
        margin-bottom: 4px;
        border-bottom: 1px dashed var(--border-dark);
    }
    .fv-mobile-cards tbody tr td:last-child {
        text-align: right;
    }
    /* Generic labels via data attributes */
    .fv-mobile-cards tbody tr td[data-label]::before {
        content: attr(data-label);
        color: #9bb3bb;
        font-weight: 600;
        margin-right: 12px;
    }

    /* Labels for asset table using nth-child mapping (scoped to .fv-assets) */
    .fv-mobile-cards.fv-assets tbody tr td:nth-child(2)::before {
        content: 'Price';
        color: #9bb3bb;
        font-weight: 600;
        margin-right: 12px;
    }
    .fv-mobile-cards.fv-assets tbody tr td:nth-child(3)::before {
        content: 'Balance';
        color: #9bb3bb;
        font-weight: 600;
        margin-right: 12px;
    }
    .fv-mobile-cards.fv-assets tbody tr td:nth-child(4)::before {
        content: 'Value';
        color: #9bb3bb;
        font-weight: 600;
        margin-right: 12px;
    }
    .fv-mobile-cards.fv-assets tbody tr td:nth-child(5)::before {
        content: '24h Change';
        color: #9bb3bb;
        font-weight: 600;
        margin-right: 12px;
    }
    .fv-mobile-cards.fv-assets tbody tr td:nth-child(6)::before {
        content: 'P/L';
        color: #9bb3bb;
        font-weight: 600;
        margin-right: 12px;
    }
}

/* Settings page mobile tweaks */
@media (max-width: 420px) {
    .fv-settings .profile-avatar {
        width: 56px;
        height: 56px;
        ring-width: 2px;
    }
    .fv-settings .profile-name {
        font-size: 1rem;
    }
    .fv-settings .profile-actions {
        flex-direction: column;
    }
    .fv-settings .profile-actions button {
        width: 100%;
    }
    /* Reduce spacing in header tabs to fit small screens */
    .fv-settings .flex.gap-8.border-b a {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Prevent accidental horizontal overflow on very small screens for settings */
    .fv-settings {
        overflow-x: hidden;
    }

    /* Ensure the centered max-width container can't exceed viewport width */
    .fv-settings .max-w-\[1200px\] {
        max-width: 100% !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
    }

    /* Make sure form controls and large elements respect the viewport */
    .fv-settings input,
    .fv-settings select,
    .fv-settings button {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Broader small-screen safeguards for settings page (covers more device widths) */
.fv-settings {
    overflow-x: hidden; /* ensure no horizontal scroll from any child */
}

@media (max-width: 640px) {
    /* make profile actions wrap earlier to avoid long button rows */
    .fv-settings .profile-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .fv-settings .profile-actions button {
        flex: 1 1 auto;
        min-width: 0; /* allow buttons to shrink below intrinsic width */
    }

    /* ensure the centered container doesn't exceed viewport on small screens */
    .fv-settings .max-w-\[1200px\] {
        max-width: 100% !important;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
}