/* ===================================================================
   OFS Customer Portal — Mobile-Responsive Enhancements
   File:    customer-portal-mobile.css
   Version: 1.0.2
   Purpose: Layered on top of customer-portal.css to make the customer
            dashboard fully mobile-friendly across all screen sizes.
            All original plugin files remain untouched.
   =================================================================== */


/* ================================================================
   0. SIDEBAR LOGO — prevent broken-image rectangle on ALL devices
   ================================================================ */

/* Hidden by default; JS adds .logo-loaded only when image confirms
   it loaded without error. This prevents the empty grey rectangle
   that appears when an <img> src 404s or is slow to load. */
.ofs-sidebar-logo {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Only shown once JS confirms a valid image loaded */
.ofs-sidebar-logo.logo-loaded {
    display: flex !important;
    height: auto !important;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Hard-limit so an img tag never creates unexpected height */
.ofs-sidebar-logo img {
    display: block;
    max-height: 40px;
    overflow: hidden;
}


/* ================================================================
   0b. DESKTOP GUARD  (≥ 901px)
   Force sidebar back to normal in-flow sticky positioning.
   IMPORTANT: do NOT override overflow here — the original CSS sets
   overflow:hidden on .ofs-sidebar which is needed to clip the
   decorative green circle pseudo-element in the header.
   ================================================================ */

@media (min-width: 901px) {
    .ofs-sidebar {
        position: sticky !important;
        top: 20px !important;
        transform: none !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        /* Do NOT override overflow — original CSS needs overflow:hidden
           to clip the ::after circle accent in .ofs-sidebar-header */
        z-index: auto !important;
        box-shadow: var(--ofs-shadow) !important;
    }

    /* Mobile-only chrome must never appear on desktop */
    .ofs-mobile-hamburger,
    .ofs-sidebar-overlay,
    .ofs-sidebar-close-btn {
        display: none !important;
    }

    /* Desktop: also keep logo hidden unless a valid image loaded */
    .ofs-sidebar-logo:not(.logo-loaded) {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Restore the two-column grid layout on desktop */
    .ofs-dashboard {
        display: grid !important;
        grid-template-columns: 268px 1fr !important;
        gap: 24px !important;
    }
}


/* ================================================================
   1. GLOBAL PORTAL WRAP — comfortable mobile padding
   ================================================================ */

@media (max-width: 768px) {
    .ofs-portal-wrap {
        padding: 12px 10px 60px;
    }
}

@media (max-width: 480px) {
    .ofs-portal-wrap {
        padding: 8px 8px 80px;
    }
}


/* ================================================================
   2. PHONE NOTICE — stack vertically on small screens
   ================================================================ */

@media (max-width: 600px) {
    .ofs-phone-notice {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    .ofs-phone-notice .notice-icon {
        font-size: 1.4rem;
    }

    #ofs-update-phone-form {
        flex-direction: column !important;
    }

    #ofs-update-phone-form > div[style*="flex:1"] {
        min-width: 100% !important;
    }
}


/* ================================================================
   3. DASHBOARD LAYOUT — single column on tablet/mobile (≤ 900px)
   ================================================================ */

@media (max-width: 900px) {
    .ofs-dashboard {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* ================================================================
   4. SIDEBAR DRAWER — slides in from left on tablet/mobile
   ================================================================ */

@media (max-width: 900px) {

    /* ---- Hamburger trigger bar (injected by JS above .ofs-dashboard) ---- */
    .ofs-mobile-hamburger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--ofs-gradient);
        color: #fff;
        padding: 8px 14px;
        border-radius: var(--ofs-radius);
        margin-bottom: 12px;
        cursor: pointer;
        user-select: none;
        box-shadow: var(--ofs-shadow);
        min-height: 48px;
    }

    .ofs-mobile-hamburger-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ofs-mobile-hamburger-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.5);
        background: rgba(255,255,255,.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;
        color: rgba(255,255,255,.8);
        overflow: hidden;
        flex-shrink: 0;
    }

    .ofs-mobile-hamburger-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }

    .ofs-mobile-hamburger-info {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .ofs-mobile-hamburger-name {
        font-weight: 700;
        font-size: .82rem;
    }

    .ofs-mobile-hamburger-section {
        font-size: .68rem;
        opacity: .8;
    }

    .ofs-mobile-hamburger-icon {
        font-size: 1.25rem;
        line-height: 1;
        transition: transform .25s;
    }

    .ofs-mobile-hamburger.open .ofs-mobile-hamburger-icon {
        transform: rotate(90deg);
    }

    /* ---- Dark overlay behind the open drawer ---- */
    .ofs-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 9998;
    }

    .ofs-sidebar-overlay.show {
        display: block;
    }

    /* ---- Sidebar: fixed off-screen by default, slides in when .mobile-open ---- */
    .ofs-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;
        max-width: 80vw !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 9999 !important;
        border-radius: 0 var(--ofs-radius) var(--ofs-radius) 0 !important;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 24px rgba(0,0,0,.25) !important;
    }

    .ofs-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* ---- Very compact header on mobile ---- */
    .ofs-sidebar-header {
        padding: 10px 14px 10px;
    }

    .ofs-sidebar-avatar-wrap {
        margin-bottom: 6px;
    }

    .ofs-sidebar-avatar {
        width: 44px;
        height: 44px;
        border-width: 2px;
    }

    .ofs-sidebar-avatar-placeholder {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        border-width: 2px;
    }

    .ofs-sidebar-name {
        font-size: .8rem;
        margin-bottom: 1px;
    }

    .ofs-sidebar-id {
        font-size: .68rem;
    }

    .ofs-sidebar-header::after {
        width: 120px;
        height: 120px;
        bottom: -50px;
        right: -30px;
    }

    /* ---- Compact touch targets for nav items ---- */
    .ofs-nav-item {
        padding: 9px 14px;
        font-size: .84rem;
        gap: 9px;
    }

    .ofs-nav-item .nav-icon {
        font-size: .9rem;
        width: 18px;
    }

    /* ---- Close button (injected by JS before .ofs-sidebar-header) ---- */
    .ofs-sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        padding: 6px 12px 0;
        background: var(--ofs-gradient);    /* match sidebar header bg */
    }

    .ofs-sidebar-close-btn button {
        background: rgba(255,255,255,.2);
        border: none;
        color: #fff;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: .8rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s;
        line-height: 1;
    }

    .ofs-sidebar-close-btn button:hover {
        background: rgba(255,255,255,.35);
    }

    /* Ensure the full nav menu is always scrollable in short viewports */
    .ofs-sidebar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ofs-sidebar-nav,
    .ofs-sidebar-footer {
        overflow: visible;
    }
}

/* Base rule: close button hidden on desktop (overridden in media query above) */
.ofs-sidebar-close-btn {
    display: none;
}


/* ================================================================
   5. MAIN CONTENT — reset min-height on mobile
   ================================================================ */

@media (max-width: 900px) {
    .ofs-main {
        min-height: auto;
    }
}


/* ================================================================
   6. PANEL HEADER — stack on very small screens
   ================================================================ */

@media (max-width: 480px) {
    .ofs-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ofs-panel-title {
        font-size: 1.1rem;
    }
}


/* ================================================================
   7. STATS GRID — 2-col on phones, 1-col on very small
   ================================================================ */

@media (max-width: 640px) {
    .ofs-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .ofs-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ofs-stat-card {
        padding: 14px 12px;
    }

    .ofs-stat-value {
        font-size: 1.25rem;
    }

    .ofs-stat-label {
        font-size: .7rem;
    }
}


/* ================================================================
   8. CARDS — reduced padding on mobile
   ================================================================ */

@media (max-width: 640px) {
    .ofs-card {
        padding: 16px 14px;
        border-radius: 10px;
    }

    .ofs-card-title {
        font-size: .92rem;
    }
}

@media (max-width: 480px) {
    .ofs-card {
        padding: 14px 12px;
    }
}


/* ================================================================
   9. TABLES — horizontal scroll + scroll-hint on mobile
   ================================================================ */

.ofs-table-wrapper {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .ofs-table {
        font-size: .8rem;
        min-width: 480px;
    }

    .ofs-table thead th,
    .ofs-table td {
        padding: 9px 10px;
        white-space: nowrap;
    }

    /* Right-edge fade to hint at horizontal scroll */
    .ofs-table-wrapper {
        position: relative;
    }

    .ofs-table-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 100%;
        background: linear-gradient(to left, rgba(255,255,255,.85), transparent);
        pointer-events: none;
        border-radius: 0 8px 8px 0;
    }
}

@media (max-width: 480px) {
    .ofs-table {
        font-size: .75rem;
        min-width: 440px;
    }

    .ofs-table thead th,
    .ofs-table td {
        padding: 8px 9px;
    }
}


/* ================================================================
   10. LOAN CARDS — accordion header
   ================================================================ */

@media (max-width: 640px) {
    .ofs-loan-card-header {
        padding: 13px 14px;
        gap: 8px;
    }

    .ofs-loan-card-title {
        font-size: .88rem;
    }

    .ofs-loan-card-meta {
        font-size: .72rem;
    }

    .ofs-loan-card-body {
        padding: 14px 12px;
    }
}

@media (max-width: 480px) {
    .ofs-loan-card-header {
        flex-wrap: wrap;
    }

    .ofs-loan-card-header > div:last-child {
        width: 100%;
        justify-content: space-between;
        margin-top: 4px;
    }
}


/* ================================================================
   11. LOAN DETAIL GRID — 2-col then 1-col on smaller phones
   ================================================================ */

@media (max-width: 560px) {
    .ofs-loan-detail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 380px) {
    .ofs-loan-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ofs-loan-detail-item label {
        font-size: .68rem;
    }

    .ofs-loan-detail-item span {
        font-size: .85rem;
    }
}


/* ================================================================
   12. SUB-TABS — scrollable row on mobile
   ================================================================ */

@media (max-width: 480px) {
    .ofs-subtabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        gap: 2px;
    }

    .ofs-subtab {
        flex-shrink: 0;
        padding: 8px 13px;
        font-size: .8rem;
    }
}


/* ================================================================
   13. PROFILE SECTION
   ================================================================ */

@media (max-width: 600px) {
    .ofs-profile-photo-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
    }

    .ofs-profile-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .ofs-profile-photo-wrap img#ofs-passport-preview,
    .ofs-profile-photo-placeholder {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
}


/* ================================================================
   14. LOAN APPLICATION FORM
   ================================================================ */

@media (max-width: 600px) {
    .ofs-loan-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ofs-col-full {
        grid-column: 1;
    }
}


/* ================================================================
   15. SECURITY / FORMS
   ================================================================ */

@media (max-width: 600px) {
    #ofs-change-pwd-form,
    #ofs-update-phone-form[style*="max-width"] {
        max-width: 100% !important;
    }
}

/* Prevent iOS zoom: input font-size must be >= 16px */
@media (max-width: 768px) {
    .ofs-form-control,
    .ofs-form-control:focus,
    select.ofs-form-control {
        font-size: 16px;
    }

    textarea.ofs-form-control {
        resize: vertical;
        min-height: 80px;
    }
}


/* ================================================================
   16. BUTTONS
   ================================================================ */

@media (max-width: 480px) {
    .ofs-btn {
        padding: 10px 18px;
        font-size: .88rem;
    }

    .ofs-btn-sm {
        padding: 7px 12px;
        font-size: .78rem;
    }
}

@media (max-width: 360px) {
    .ofs-btn-submit {
        width: 100%;
        justify-content: center;
    }
}


/* ================================================================
   17. MODAL — full-width bottom sheet on mobile
   ================================================================ */

@media (max-width: 600px) {
    .ofs-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .ofs-modal {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: var(--ofs-radius) var(--ofs-radius) 0 0;
    }

    .ofs-modal-header {
        border-radius: var(--ofs-radius) var(--ofs-radius) 0 0;
        padding: 16px 18px;
    }

    .ofs-modal-header h3 {
        font-size: .95rem;
    }

    .ofs-modal-body {
        padding: 16px;
    }

    .ofs-modal-footer {
        padding: 12px 16px;
    }
}


/* ================================================================
   18. BADGES — never overflow their container
   ================================================================ */

.ofs-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ================================================================
   19. PROGRESS BAR — compact on mobile
   ================================================================ */

@media (max-width: 480px) {
    .ofs-progress-label {
        font-size: .75rem;
    }

    .ofs-progress-bar {
        height: 7px;
    }
}


/* ================================================================
   20. OVERVIEW — account details grid
   ================================================================ */

@media (max-width: 560px) {
    .ofs-panel#ofs-panel-overview .ofs-loan-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 380px) {
    .ofs-panel#ofs-panel-overview .ofs-loan-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   21. CARD-LAYOUT TABLES on mobile (≤ 560px)
   Converts rows into stacked label-value cards for readability.
   Applies to: Applications, Deposits, Withdrawals, Transactions.
   ================================================================ */

@media (max-width: 560px) {

    #ofs-panel-applications .ofs-table-wrapper,
    #ofs-panel-deposits     .ofs-table-wrapper,
    #ofs-panel-withdrawals  .ofs-table-wrapper,
    #ofs-panel-transactions .ofs-table-wrapper,
    #ofs-panel-overview     .ofs-table-wrapper {
        border: none;
        background: transparent;
        overflow: visible;
    }

    #ofs-panel-applications .ofs-table,
    #ofs-panel-deposits     .ofs-table,
    #ofs-panel-withdrawals  .ofs-table,
    #ofs-panel-transactions .ofs-table,
    #ofs-panel-overview     .ofs-table {
        display: block;
        min-width: unset;
        overflow: visible;
    }

    #ofs-panel-applications .ofs-table thead,
    #ofs-panel-deposits     .ofs-table thead,
    #ofs-panel-withdrawals  .ofs-table thead,
    #ofs-panel-transactions .ofs-table thead,
    #ofs-panel-overview     .ofs-table thead {
        display: none;
    }

    #ofs-panel-applications .ofs-table tbody,
    #ofs-panel-deposits     .ofs-table tbody,
    #ofs-panel-withdrawals  .ofs-table tbody,
    #ofs-panel-transactions .ofs-table tbody,
    #ofs-panel-overview     .ofs-table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #ofs-panel-applications .ofs-table tbody tr,
    #ofs-panel-deposits     .ofs-table tbody tr,
    #ofs-panel-withdrawals  .ofs-table tbody tr,
    #ofs-panel-transactions .ofs-table tbody tr,
    #ofs-panel-overview     .ofs-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 14px;
        background: var(--ofs-card-bg);
        border: 1px solid var(--ofs-border) !important;
        border-radius: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--ofs-border) !important;
        box-shadow: 0 1px 6px rgba(139,32,130,.06);
    }

    #ofs-panel-applications .ofs-table tbody tr:hover,
    #ofs-panel-deposits     .ofs-table tbody tr:hover,
    #ofs-panel-withdrawals  .ofs-table tbody tr:hover,
    #ofs-panel-transactions .ofs-table tbody tr:hover,
    #ofs-panel-overview     .ofs-table tbody tr:hover {
        background: var(--ofs-light-bg);
    }

    #ofs-panel-applications .ofs-table td,
    #ofs-panel-deposits     .ofs-table td,
    #ofs-panel-withdrawals  .ofs-table td,
    #ofs-panel-transactions .ofs-table td,
    #ofs-panel-overview     .ofs-table td {
        display: flex;
        flex-direction: column;
        padding: 4px 0;
        border: none !important;
        font-size: .78rem;
        color: #374151;
    }

    /* Column label above each value via CSS ::before + data-label attr */
    #ofs-panel-applications .ofs-table td::before,
    #ofs-panel-deposits     .ofs-table td::before,
    #ofs-panel-withdrawals  .ofs-table td::before,
    #ofs-panel-transactions .ofs-table td::before,
    #ofs-panel-overview     .ofs-table td::before {
        content: attr(data-label);
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ofs-text-muted);
        margin-bottom: 2px;
    }

    /* Amount cells span full row width */
    #ofs-panel-applications .ofs-table td.amount,
    #ofs-panel-deposits     .ofs-table td.amount,
    #ofs-panel-withdrawals  .ofs-table td.amount,
    #ofs-panel-transactions .ofs-table td.amount,
    #ofs-panel-overview     .ofs-table td.amount {
        grid-column: 1 / -1;
        font-size: .88rem;
    }
}


/* ================================================================
   22. LOAN SCHEDULE TABLES — keep horizontal scroll (all columns
       needed: #, Due Date, Principal, Interest, Payment, Paid, Status)
   ================================================================ */

@media (max-width: 640px) {
    .ofs-subtab-panel .ofs-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ofs-subtab-panel .ofs-table {
        min-width: 520px;
        font-size: .75rem;
    }

    .ofs-subtab-panel .ofs-table thead th,
    .ofs-subtab-panel .ofs-table td {
        padding: 8px 9px;
        white-space: nowrap;
    }
}


/* ================================================================
   23. EMPTY STATE — compact on mobile
   ================================================================ */

@media (max-width: 480px) {
    .ofs-empty-state {
        padding: 32px 16px;
    }

    .ofs-empty-state .empty-icon {
        font-size: 2.2rem;
    }

    .ofs-empty-state p {
        font-size: .88rem;
    }
}


/* ================================================================
   24. MISC UTILITIES
   ================================================================ */

@media (max-width: 480px) {
    .ofs-section-divider {
        margin: 14px 0;
    }
}

/* Auth page touch-ups */
@media (max-width: 480px) {
    .ofs-auth-body {
        padding: 24px 18px;
    }

    .ofs-auth-logo .ofs-logo-img {
        height: 56px;
    }

    .ofs-auth-tab {
        padding: 13px 10px;
        font-size: .88rem;
    }
}

/* Global safety: images never break layout */
.ofs-portal-wrap img {
    max-width: 100%;
    height: auto;
}

.ofs-portal-wrap table {
    table-layout: auto;
}

/* Long reference codes wrap gracefully on small screens */
@media (max-width: 560px) {
    .ofs-table td[style*="font-family:monospace"] {
        word-break: break-all;
        max-width: 110px;
    }
}

@media (min-width: 561px) {
    .ofs-table td[style*="font-family:monospace"] {
        max-width: unset;
        word-break: normal;
    }
}


/* ================================================================
   THEME-BLEED SUPPRESSION
   Some WordPress themes output the post featured image or raw
   content before/after the shortcode. These rules prevent any
   stray <img> tags or text nodes that appear immediately adjacent
   to .ofs-portal-wrap from breaking the dashboard layout.
   ================================================================ */

/* Hide any <img> that is a direct child of the WordPress page
   content wrapper but sits outside our portal container.
   We target the most common theme wrappers. */
.entry-content > img:not(.ofs-portal-wrap img),
.post-content > img:not(.ofs-portal-wrap img),
.page-content > img:not(.ofs-portal-wrap img),
.wp-post-content > img:not(.ofs-portal-wrap img) {
    display: none !important;
}

/* Ensure our portal wrap starts with no stray top margin/padding
   that would create a visible gap where a theme image was removed */
.ofs-portal-wrap {
    margin-top: 0;
}