/* ============================================
   SPV Manager — Investor Portal
   Companion CSS for Tailwind — only overrides,
   animations, and fixed-position layout.
   ============================================ */

/* ---- Critical CSS to prevent FOUC ---- */
.spv-sidebar {
    width: 260px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    border-right: 1px solid rgba(226, 232, 240, 0.8);
}
.spv-main {
    margin-left: 260px;
    min-height: 100vh;
}
body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Force full-bleed: hide theme chrome ---- */
body.spv-portal-active .site-header,
body.spv-portal-active .entry-header,
body.spv-portal-active .entry-footer,
body.spv-portal-active .site-footer,
body.spv-portal-active .page-header,
body.spv-portal-active .comments-area,
body.spv-portal-active #masthead,
body.spv-portal-active #colophon,
body.spv-portal-active .elementor-location-header,
body.spv-portal-active .elementor-location-footer,
body.spv-login-active .site-header,
body.spv-login-active .entry-header,
body.spv-login-active .entry-footer,
body.spv-login-active .site-footer,
body.spv-login-active .page-header,
body.spv-login-active .comments-area,
body.spv-login-active #masthead,
body.spv-login-active #colophon,
body.spv-login-active .elementor-location-header,
body.spv-login-active .elementor-location-footer,
body.spv-profile-active .site-header,
body.spv-profile-active .entry-header,
body.spv-profile-active .entry-footer,
body.spv-profile-active .site-footer,
body.spv-profile-active .page-header,
body.spv-profile-active .comments-area,
body.spv-profile-active #masthead,
body.spv-profile-active #colophon,
body.spv-profile-active .elementor-location-header,
body.spv-profile-active .elementor-location-footer,
body.spv-banking-active .site-header,
body.spv-banking-active .entry-header,
body.spv-banking-active .entry-footer,
body.spv-banking-active .site-footer,
body.spv-banking-active .page-header,
body.spv-banking-active .comments-area,
body.spv-banking-active #masthead,
body.spv-banking-active #colophon,
body.spv-banking-active .elementor-location-header,
body.spv-banking-active .elementor-location-footer {
    display: none !important;
}
body.spv-portal-active .site-content,
body.spv-portal-active .entry-content,
body.spv-portal-active .page-content,
body.spv-portal-active .site-main,
body.spv-portal-active main#content,
body.spv-portal-active #content,
body.spv-portal-active .elementor-section-wrap,
body.spv-login-active .site-content,
body.spv-login-active .entry-content,
body.spv-login-active .page-content,
body.spv-login-active .site-main,
body.spv-login-active main#content,
body.spv-login-active #content,
body.spv-login-active .elementor-section-wrap,
body.spv-profile-active .site-content,
body.spv-profile-active .entry-content,
body.spv-profile-active .page-content,
body.spv-profile-active .site-main,
body.spv-profile-active main#content,
body.spv-profile-active #content,
body.spv-profile-active .elementor-section-wrap,
body.spv-banking-active .site-content,
body.spv-banking-active .entry-content,
body.spv-banking-active .page-content,
body.spv-banking-active .site-main,
body.spv-banking-active main#content,
body.spv-banking-active #content,
body.spv-banking-active .elementor-section-wrap {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
body.spv-portal-active,
body.spv-login-active,
body.spv-profile-active,
body.spv-banking-active {
    background: #f8fafc !important;
}
body.spv-portal-active #wpadminbar,
body.spv-login-active #wpadminbar,
body.spv-profile-active #wpadminbar,
body.spv-banking-active #wpadminbar {
    display: none !important;
}
html.spv-portal-active-html,
html.spv-login-active-html,
html.spv-profile-active-html,
html.spv-banking-active-html {
    margin-top: 0 !important;
}

/* ---- Sidebar: fixed position ---- */
.spv-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 100;
    transition: transform .25s ease;
}
.spv-main {
    margin-left: 260px;
}

/* ---- Sidebar logo ---- */
.spv-sidebar-logo {
    max-width: 160px;
    height: auto;
    display: block;
}

/* ---- Nav item transitions ---- */
.spv-nav-item {
    transition: all .15s ease;
}
.spv-nav-item:hover {
    text-decoration: none;
}
.spv-nav-icon {
    transition: color .15s ease;
}
.spv-sidebar-logout {
    transition: color .15s ease;
}
.spv-sidebar-logout:hover {
    color: #ef4444;
}

/* ---- Toast notifications ---- */
.spv-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0,0,0,.12);
    transform: translateX(120%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-width: 420px;
}
.spv-toast.show {
    transform: translateX(0);
}
.spv-toast-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.spv-toast-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ---- Mobile overlay ---- */
.spv-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99;
    backdrop-filter: blur(2px);
}
.spv-mobile-overlay.show {
    display: block;
}

/* ---- Focus ring for inputs ---- */
.spv-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* ---- Table: constrained to card ---- */
.spv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .spv-sidebar {
        transform: translateX(-100%);
    }
    .spv-sidebar.open {
        transform: translateX(0);
    }
    .spv-main {
        margin-left: 0;
    }
    .spv-mobile-btn {
        display: flex !important;
    }
}