/* ============================================================
   OCIIP PORTAL — MOBILE & DESKTOP OVERRIDES
   Loads AFTER everything else. Safe to iterate.
   Scope: portal pages + public innovation page only.
   ============================================================ */

/* ---------- DESKTOP SAFETY ---------- */
@media (min-width: 641px) {
    .ociip-portal-dash {
        max-width: 1040px !important;
        margin: 0 auto !important;
        padding: 20px 24px 60px !important;
        box-sizing: border-box !important;
    }
    .ociip-portal-dash * { box-sizing: border-box; }
    .ociip-portal-panel,
    .ociip-portal-hero { max-width: 100% !important; }
    .ociip-portal-pay-grid,
    .ociip-portal-feature-grid,
    .ociip-portal-plan-grid,
    .ociip-up-grid {
        gap: 18px !important;
    }
}

/* ---------- MOBILE: <= 640px ---------- */
@media (max-width: 640px) {

    /* Global box + wrapper */
    .ociip-portal-dash {
        padding: 12px 12px 40px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .ociip-portal-dash * { max-width: 100% !important; box-sizing: border-box !important; }
    body { overflow-x: hidden !important; }

    /* Hero */
    .ociip-portal-hero {
        padding: 24px 18px !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }
    .ociip-portal-hero h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }
    .ociip-portal-hero-sub { font-size: 13px !important; line-height: 1.55 !important; }
    .ociip-portal-hero-label { font-size: 10px !important; letter-spacing: 1.2px !important; }
    .ociip-portal-hero-badge { font-size: 11px !important; padding: 6px 12px !important; }
    .ociip-portal-hero-row { gap: 12px !important; flex-wrap: wrap !important; }
    .ociip-portal-hero-avatar { width: 52px !important; height: 52px !important; }
    .ociip-portal-hero-text { min-width: 0 !important; flex: 1 !important; }
    .ociip-portal-hero-text h1 { word-break: break-word !important; }
    .ociip-portal-member-id { font-size: 11.5px !important; }

    /* Hero back links that float right */
    .ociip-portal-hero-back,
    .ociip-portal-hero > a[style*="right"] {
        position: static !important;
        display: inline-block !important;
        margin: 0 0 14px 0 !important;
        font-size: 12px !important;
    }

    /* Panels */
    .ociip-portal-panel {
        padding: 18px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }
    .ociip-portal-panel-title { font-size: 14px !important; }

    /* Feature grid — one column */
    .ociip-portal-feature-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .ociip-portal-feature-card { padding: 16px 18px !important; }
    .ociip-portal-feature-title { font-size: 14px !important; }
    .ociip-portal-feature-desc,
    .ociip-portal-feature-preview { font-size: 12px !important; line-height: 1.5 !important; }
    .ociip-portal-feature-icon { font-size: 22px !important; }

    /* Stats grid — one column */
    .ociip-portal-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .ociip-portal-stat { padding: 12px 14px !important; }
    .ociip-portal-stat-value { font-size: 20px !important; }
    .ociip-portal-stat-label { font-size: 10px !important; }

    /* Buttons */
    .ociip-portal-btn,
    button.ociip-portal-btn,
    a.ociip-portal-btn,
    .ociip-portal-btn--big,
    .ociip-up-cta {
        padding: 12px 20px !important;
        font-size: 13.5px !important;
        min-height: 44px !important;
        line-height: 1.25 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ociip-portal-btn--big { padding: 14px 22px !important; font-size: 14.5px !important; }

    /* Two-column grids we've written inline */
    .ociip-portal-dash [style*="grid-template-columns:1fr 1fr"],
    .ociip-portal-dash [style*="grid-template-columns: 1fr 1fr"],
    .ociip-up-grid,
    .ociip-portal-plan-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Plan / upgrade cards */
    .ociip-portal-plan-card,
    .ociip-up-card {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }
    .ociip-portal-plan-amount,
    .ociip-up-amount { font-size: 30px !important; }
    .ociip-portal-plan-label,
    .ociip-up-name { font-size: 17px !important; }
    .ociip-portal-plan-desc,
    .ociip-up-desc { font-size: 13px !important; }
    .ociip-portal-plan-features li { font-size: 13px !important; padding: 6px 0 !important; }
    .ociip-up-benefits-wrap { padding: 22px 18px !important; }
    .ociip-up-benefits-title { font-size: 18px !important; }
    .ociip-up-benefits-sub { font-size: 13px !important; }
    .ociip-up-group-title { font-size: 13px !important; }
    .ociip-up-b-title { font-size: 13.5px !important; }
    .ociip-up-b-desc { font-size: 12.5px !important; }
    .ociip-up-note { font-size: 12.5px !important; padding: 14px 16px !important; }

    /* Payment rows */
    .ociip-portal-pay-grid { grid-template-columns: 1fr !important; }
    .ociip-pay-row { padding: 14px !important; border-radius: 12px !important; }
    .ociip-pay-row-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .ociip-pay-row-icon {
        width: 44px !important; height: 44px !important;
        align-self: flex-start !important;
    }
    .ociip-pay-row-info { min-width: 0 !important; }
    .ociip-pay-row-title { font-size: 14px !important; }
    .ociip-pay-row-sub,
    .ociip-pay-row-desc { font-size: 12px !important; line-height: 1.5 !important; }
    .ociip-pay-row-action { width: 100% !important; }
    .ociip-pay-row-action button,
    .ociip-pay-toggle,
    .ociip-pay-submit {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }
    .ociip-pay-details-box,
    .ociip-pay-file,
    .ociip-pay-label { font-size: 12.5px !important; }

    /* Lock screens */
    .ociip-portal-lock {
        padding: 28px 20px !important;
        border-radius: 12px !important;
    }
    .ociip-portal-lock-icon { font-size: 40px !important; margin-bottom: 10px !important; }
    .ociip-portal-lock-title { font-size: 17px !important; line-height: 1.3 !important; }
    .ociip-portal-lock-sub { font-size: 13px !important; line-height: 1.65 !important; }

    /* Forms */
    .ociip-portal-dash input[type="text"],
    .ociip-portal-dash input[type="email"],
    .ociip-portal-dash input[type="number"],
    .ociip-portal-dash input[type="url"],
    .ociip-portal-dash input[type="search"],
    .ociip-portal-dash input[type="tel"],
    .ociip-portal-dash input[type="password"],
    .ociip-portal-dash input[type="date"],
    .ociip-portal-dash input[type="file"],
    .ociip-portal-dash select,
    .ociip-portal-dash textarea {
        width: 100% !important;
        padding: 11px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
    .ociip-portal-field label { font-size: 12px !important; }

    /* Tables — scroll horizontally instead of breaking layout */
    .ociip-portal-dash table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    .ociip-portal-dash table thead,
    .ociip-portal-dash table tbody { display: table !important; width: 100% !important; min-width: 520px !important; }
    .ociip-portal-dash table th,
    .ociip-portal-dash table td { padding: 10px 10px !important; font-size: 12.5px !important; }

    /* Text safety */
    .ociip-portal-dash h1,
    .ociip-portal-dash h2,
    .ociip-portal-dash h3,
    .ociip-portal-dash p,
    .ociip-portal-dash a { word-break: break-word !important; overflow-wrap: anywhere !important; }
    .ociip-portal-dash h1 { font-size: 22px !important; }
    .ociip-portal-dash h2 { font-size: 18px !important; }
    .ociip-portal-dash h3 { font-size: 15px !important; }
    .ociip-portal-dash p  { font-size: 13.5px !important; line-height: 1.65 !important; }

    /* Inline flex rows that overflow */
    .ociip-portal-dash [style*="display:flex"] { flex-wrap: wrap !important; }
    .ociip-portal-dash [style*="display: flex"] { flex-wrap: wrap !important; }

    /* Success/error alerts */
    .ociip-portal-alert { padding: 12px 14px !important; font-size: 13px !important; line-height: 1.6 !important; }
    .ociip-portal-alert--success { font-size: 13px !important; }

    /* Country picker flag chips */
    .ociip-portal-dash [style*="padding: 10px 18px 10px 10px"] {
        padding: 8px 14px 8px 8px !important;
    }

    /* Notification cards */
    .ociip-portal-notification-card { padding: 14px !important; flex-wrap: wrap !important; }
    .ociip-portal-notification-title { font-size: 13.5px !important; }
    .ociip-portal-notification-message { font-size: 12.5px !important; }

    /* Any remaining fixed-width inline elements */
    .ociip-portal-dash [style*="width: 300px"],
    .ociip-portal-dash [style*="width:300px"],
    .ociip-portal-dash [style*="min-width: 260px"],
    .ociip-portal-dash [style*="min-width:260px"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Public innovation page (share strip + gallery) */
    .ociip-pp { padding: 20px 12px 40px !important; }
    .ociip-pp-hero { padding: 26px 20px !important; border-radius: 14px !important; }
    .ociip-pp-hero h1 { font-size: 22px !important; line-height: 1.25 !important; }
    .ociip-pp-panel { padding: 20px 16px !important; border-radius: 12px !important; }
    .ociip-pp-gallery { grid-template-columns: 1fr !important; }
    .ociip-pp-cta { padding: 22px 18px !important; }
    .ociip-pp-cta-btn { width: 100% !important; padding: 14px 22px !important; font-size: 14px !important; }
}

/* ---------- EXTRA-TIGHT: 375px & below ---------- */
@media (max-width: 380px) {
    .ociip-portal-hero h1 { font-size: 20px !important; }
    .ociip-portal-stats { grid-template-columns: 1fr !important; }
    .ociip-up-amount,
    .ociip-portal-plan-amount { font-size: 26px !important; }
}
/* ════════════════════════════════════════════════════════════
   CERTIFICATES TABLE — card layout on mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .ociip-cert-table { display: block !important; width: 100% !important; }
    .ociip-cert-table thead { display: none !important; }
    .ociip-cert-table tbody { display: block !important; width: 100% !important; }
    .ociip-cert-table tr {
        display: block !important;
        background: #fff;
        border: 2px solid #e8edf2 !important;
        border-radius: 14px !important;
        padding: 16px 18px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    }
    .ociip-cert-table td {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
        border: none !important;
        font-size: 13px !important;
    }
    .ociip-cert-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 900;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 3px;
    }
    .ociip-cert-table td:first-child { padding-top: 0 !important; }
    .ociip-cert-table td:last-child {
        padding-top: 14px !important;
        margin-top: 10px !important;
        border-top: 1px dashed #e8edf2 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .ociip-cert-table td:last-child::before { display: none !important; }
    .ociip-cert-table td:last-child .ociip-portal-btn {
        flex: 1 1 auto !important;
        min-width: 80px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        font-size: 12.5px !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .ociip-cert-table td strong { font-size: 15px !important; color: #0f4a2e !important; }
}

/* Admin tables + admin tables wrapper */
@media (max-width: 900px) {
    /* Search bar wraps cleanly */
    .ociip-search-bar { flex-wrap: wrap !important; gap: 8px !important; }
    .ociip-search-bar input[type="text"],
    .ociip-search-bar input[type="search"] { flex: 1 1 100% !important; width: 100% !important; }
    .ociip-search-bar .ociip-btn { flex: 1 1 auto !important; }

    /* Admin data tables — horizontal scroll with minimum width */
    .ociip-panel table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .ociip-panel table thead,
    .ociip-panel table tbody { display: table !important; width: 100% !important; min-width: 640px !important; }
    .ociip-panel table th,
    .ociip-panel table td { padding: 10px !important; font-size: 12.5px !important; white-space: nowrap !important; }

    /* Filter tabs (All / Active / Pending / ...) */
    .ociip-greeting + .ociip-sub + div a.ociip-btn { font-size: 12px !important; padding: 8px 14px !important; }
}

/* ════════════════════════════════════════════════════════════
   MEMBER PORTAL TOPBAR — mobile hamburger overhaul
   ════════════════════════════════════════════════════════════ */

/* Hamburger button — desktop hidden */
.ociip-portal-mobile-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    color: #0f4a2e;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
}
.ociip-portal-mobile-toggle:hover { border-color: #008751; color: #008751; }
.ociip-portal-mobile-toggle svg { flex-shrink: 0; }

@media (max-width: 900px) {
    /* Show hamburger, hide desktop menu */
    .ociip-portal-mobile-toggle { display: inline-flex !important; }
    .ociip-portal-topbar-right {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        border-top: 2px solid #f0c420 !important;
        box-shadow: 0 16px 40px rgba(0,0,0,0.14) !important;
        padding: 14px 18px 20px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        z-index: 9998 !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        border-radius: 0 0 18px 18px !important;
    }
    .ociip-portal-topbar-right.is-mobile-open { display: flex !important; }

    /* Topbar container must be relative for positioning */
    .ociip-portal-topbar { position: relative !important; }

    /* Top-level links — full width row */
    .ociip-portal-topbar-right > a.ociip-nav-top-link,
    .ociip-portal-topbar-right > a.ociip-portal-topbar-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        width: 100% !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0f4a2e !important;
        text-decoration: none !important;
        background: #f8fafc !important;
        margin-bottom: 4px !important;
    }
    .ociip-portal-topbar-right > a.ociip-nav-top-link:hover,
    .ociip-portal-topbar-right > a.ociip-portal-topbar-link:hover {
        background: #f0fdf4 !important;
        color: #008751 !important;
    }

    /* Group toggles (Community / Rewards / Account) */
    .ociip-portal-topbar-right .ociip-nav-group {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1.5px solid #e2e8f0 !important;
        margin-bottom: 4px !important;
    }
    .ociip-portal-topbar-right .ociip-nav-group-btn {
        display: flex !important;
        width: 100% !important;
        padding: 12px 14px !important;
        justify-content: space-between !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0f4a2e !important;
        background: #f8fafc !important;
        border-radius: 0 !important;
    }
    .ociip-portal-topbar-right .ociip-nav-group.is-open .ociip-nav-group-btn {
        background: #f0fdf4 !important;
        color: #008751 !important;
    }

    /* Dropdown — inline expanded, not floating */
    .ociip-portal-topbar-right .ociip-nav-dropdown {
        display: none !important;
        position: static !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        border-radius: 0 !important;
        padding: 6px 8px 10px !important;
        min-width: 0 !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
    }
    .ociip-portal-topbar-right .ociip-nav-group.is-open .ociip-nav-dropdown { display: block !important; }

    .ociip-portal-topbar-right .ociip-nav-dropdown-item {
        padding: 11px 14px !important;
        border-radius: 8px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .ociip-portal-topbar-right .ociip-nav-dropdown-item:hover {
        background: #f0fdf4 !important;
        color: #008751 !important;
    }

    /* Logout link — standout */
    .ociip-portal-topbar-right > a.ociip-portal-topbar-logout,
    .ociip-portal-topbar-right > a.ociip-nav-top-link[href*="/logout"] {
        background: #fef2f2 !important;
        color: #991b1b !important;
        margin-top: 8px !important;
    }
    .ociip-portal-topbar-right > a.ociip-portal-topbar-logout:hover,
    .ociip-portal-topbar-right > a.ociip-nav-top-link[href*="/logout"]:hover {
        background: #fee2e2 !important;
    }

    /* User name chip */
    .ociip-portal-topbar-right .ociip-portal-topbar-user {
        display: block !important;
        text-align: center !important;
        padding: 10px !important;
        font-size: 12px !important;
        color: #64748b !important;
        font-weight: 800 !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 8px !important;
    }

    /* Body scroll lock when menu open */
    body.ociip-portal-menu-open { overflow: hidden !important; }

    /* Brand shrinks on mobile */
    .ociip-portal-topbar-brand img { max-width: 70px !important; }
    .ociip-portal-topbar-brand span { font-size: 12px !important; }
}

@media (max-width: 480px) {
    .ociip-portal-mobile-toggle span { display: none !important; }
    .ociip-portal-mobile-toggle { padding: 10px 12px !important; }
}

.ociip-cert-table td:last-child .ociip-portal-btn { min-width: 85px !important; }

@media (max-width: 720px) { .ociip-cert-table { max-width: 100% !important; overflow-x: hidden !important; } .ociip-cert-table td:last-child .ociip-portal-btn { min-width: 80px !important; font-size: 12px !important; padding: 9px 12px !important; } }

/* ════════════════════════════════════════════════════════════
   CERTIFICATE BUTTONS — always inline side-by-side
   ════════════════════════════════════════════════════════════ */
.ociip-cert-table td:last-child {
    white-space: normal !important;
}
.ociip-cert-table td:last-child .ociip-portal-btn {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 6px 6px 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

/* Admin panel cert table (uses .ociip-table) */
.ociip-table td .ociip-btn,
.ociip-table td .ociip-btn-secondary {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 6px 6px 0 !important;
    padding: 6px 12px !important;
    font-size: 11.5px !important;
}

@media (max-width: 720px) {
    /* Force the cert panel to never overflow */
    .ociip-portal-dash .ociip-portal-panel,
    .ociip-portal-dash .ociip-panel {
        overflow-x: hidden !important;
    }
    .ociip-cert-table { overflow-x: hidden !important; }
    .ociip-cert-table td:last-child .ociip-portal-btn {
        min-width: 70px !important;
        padding: 9px 12px !important;
    }
}
/* ═══════════════════════════════════════════════════════════
   CERT ACTION BUTTONS — force side-by-side NO MATTER WHAT
   ═══════════════════════════════════════════════════════════ */
.ociip-cert-actions,
.ociip-cert-table td:last-child {
    white-space: normal !important;
    overflow: hidden !important;
}
.ociip-cert-actions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}
.ociip-cert-actions-row .ociip-portal-btn,
.ociip-cert-table td:last-child .ociip-portal-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Force the table to always fit its container */
.ociip-cert-table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}
.ociip-cert-table th,
.ociip-cert-table td {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.ociip-cert-table th:nth-child(1) { width: 30% !important; }
.ociip-cert-table th:nth-child(2) { width: 22% !important; }
.ociip-cert-table th:nth-child(3) { width: 16% !important; }
.ociip-cert-table th:nth-child(4) { width: 32% !important; }

/* On mobile, stack the whole row into a card as before, but keep buttons inline */
@media (max-width: 720px) {
    .ociip-cert-table { table-layout: auto !important; }
    .ociip-cert-table th:nth-child(1),
    .ociip-cert-table th:nth-child(2),
    .ociip-cert-table th:nth-child(3),
    .ociip-cert-table th:nth-child(4) { width: auto !important; }
    .ociip-cert-actions-row .ociip-portal-btn {
        flex: 0 1 auto !important;
        min-width: 68px !important;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   ADMIN MEMBERS — pager styling
   ═══════════════════════════════════════════════════════════ */
.ociip-admin-pager {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 24px 0 !important;
    padding: 20px !important;
    background: #fff !important;
    border: 2px solid #e8edf2 !important;
    border-radius: 12px !important;
}
.ociip-admin-pager a {
    padding: 10px 18px !important;
    background: #fff !important;
    color: #0f4a2e !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}
.ociip-admin-pager a:hover { border-color: #008751 !important; color: #008751 !important; }
.ociip-admin-pager span {
    font-weight: 800 !important;
    color: #64748b !important;
    font-size: 13px !important;
}