/* Responsive Design System for NUJUM App */

/* ===== BASE RESPONSIVE UTILITIES ===== */

/* Mobile-first approach */
* {
    box-sizing: border-box;
}

/* Analyze modules: quota callout lives inside the bottom bar so it is not covered by the fixed action strip on compact viewports */
.cursor-layout .cursor-sidebar > .floating-submit-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.cursor-layout .cursor-sidebar > .floating-submit-container .analysis-quota-notice {
    margin: 0 0 10px 0;
    width: 100%;
}

/* Responsive container */
.container-responsive {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Extra small devices (phones, 480px and down) */
@media (max-width: 480px) {
    .container-responsive {
        padding: 0 12px;
    }
    
    .hidden-xs {
        display: none !important;
    }
    
    .visible-xs {
        display: block !important;
    }
}

/* Small devices (landscape phones, 576px and down) */
@media (max-width: 576px) {
    .hidden-sm {
        display: none !important;
    }
    
    .visible-sm {
        display: block !important;
    }
}

/* Medium devices (tablets, 768px and down) */
@media (max-width: 768px) {
    .container-responsive {
        padding: 0 16px;
    }
    
    .hidden-md {
        display: none !important;
    }
    
    .visible-md {
        display: block !important;
    }
    
    /* Mobile navigation adjustments */
    .nav-links {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: block !important;
    }
    
    /* Stack grid items */
    .grid-responsive {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust text sizes for mobile */
    .text-responsive {
        font-size: 0.9em !important;
    }
    
    .text-responsive-lg {
        font-size: 0.8em !important;
    }
}

/* Large devices / tablets & iPad (1366px and down) — align with compact module UI */
@media (max-width: 1366px) {
    .hidden-lg {
        display: none !important;
    }
    
    .visible-lg {
        display: block !important;
    }
}

/* Extra large devices (large desktops, 1200px and down) */
@media (max-width: 1200px) {
    .hidden-xl {
        display: none !important;
    }
    
    .visible-xl {
        display: block !important;
    }
}

/* Module pages (data, predictions, social, sentiment): fixed bottom action bar on phones, tablets & iPad */
@media (max-width: 1366px) {
    /*
     * Stacked layout: cursor-main (white) comes after cursor-sidebar in the DOM and can paint over
     * the fixed bar unless the sidebar subtree stacks above the main panel.
     */
    .cursor-layout {
        overflow: visible !important;
    }

    /*
     * Avoid flex:1 stretching the results column to the viewport — that plus inline
     * min-height:100% on .cursor-main-content created a large empty band under the sidebar.
     */
    .cursor-layout .cursor-main {
        position: relative;
        z-index: 0;
        flex: 0 0 auto;
        min-height: 0;
    }

    /* Results / scrollable main: drop inherited min-height:100% so content hugs the analysis */
    .cursor-layout .cursor-main.scrollable .cursor-main-content {
        min-height: unset !important;
    }

    .cursor-layout .cursor-sidebar {
        position: relative;
        z-index: 2;
    }

    .cursor-layout .cursor-sidebar > .floating-submit-container {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: 100%;
        margin: 0;
        /* Above .cursor-main (z-index 0); below app nav (typically 1000) and modals */
        z-index: 1050;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
        border-top: 1px solid #e5e7eb;
        background: #ffffff !important;
    }

    /*
     * Single bottom inset so the last form fields can scroll above the fixed bar.
     * (Avoid padding on both .cursor-sidebar and .cursor-sidebar-content — that doubled the gap.)
     */
    .cursor-layout .cursor-sidebar > .cursor-sidebar-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Taller fixed bar when quota notice is stacked above the primary actions */
    .cursor-layout .cursor-sidebar:has(.analysis-quota-notice) > .cursor-sidebar-content {
        padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px));
    }

    /*
     * NUJUM Analysis in Progress: centered modal + dimmed backdrop (matches JS display:block toggle).
     * Covers data-analysis, predictions/create, social-media (#progressCard) and sentiment (#sentimentProgressCard).
     */
    html:has(#progressCard[style*="display: block"]),
    html:has(#progressCard[style*="display:block"]),
    html:has(#sentimentProgressCard[style*="display: block"]),
    html:has(#sentimentProgressCard[style*="display:block"]) {
        overflow: hidden;
        /* Fills any sub-pixel gap under the fixed scrim (otherwise body #f3f4f6 shows as a band) */
        background-color: rgba(15, 23, 42, 0.55) !important;
    }

    /*
     * Extra full-viewport layer on <html>: some mobile WebViews leave a strip below body::before
     * (100vh vs visual viewport + safe area). html::before sits on the root and covers that gap.
     */
    html:has(#progressCard[style*="display: block"])::before,
    html:has(#progressCard[style*="display:block"])::before,
    html:has(#sentimentProgressCard[style*="display: block"])::before,
    html:has(#sentimentProgressCard[style*="display:block"])::before {
        content: '';
        position: fixed;
        inset: 0;
        width: 100%;
        min-width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        z-index: 1860;
        background: rgba(15, 23, 42, 0.55);
        pointer-events: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    body:has(#progressCard[style*="display: block"]),
    body:has(#progressCard[style*="display:block"]),
    body:has(#sentimentProgressCard[style*="display: block"]),
    body:has(#sentimentProgressCard[style*="display:block"]) {
        overflow: hidden;
        background-color: rgba(15, 23, 42, 0.55) !important;
    }

    /*
     * App shell wrappers default to transparent; under the modal they would otherwise reveal #f3f4f6
     * below the module column (especially when .cursor-layout height stops above the visual bottom).
     */
    body:has(#progressCard[style*="display: block"]) .desktop-only-app-shell,
    body:has(#progressCard[style*="display:block"]) .desktop-only-app-shell,
    body:has(#sentimentProgressCard[style*="display: block"]) .desktop-only-app-shell,
    body:has(#sentimentProgressCard[style*="display:block"]) .desktop-only-app-shell,
    body:has(#progressCard[style*="display: block"]) .min-h-screen,
    body:has(#progressCard[style*="display:block"]) .min-h-screen,
    body:has(#sentimentProgressCard[style*="display: block"]) .min-h-screen,
    body:has(#sentimentProgressCard[style*="display:block"]) .min-h-screen,
    body:has(#progressCard[style*="display: block"]) main,
    body:has(#progressCard[style*="display:block"]) main,
    body:has(#sentimentProgressCard[style*="display: block"]) main,
    body:has(#sentimentProgressCard[style*="display:block"]) main {
        background-color: rgba(15, 23, 42, 0.55) !important;
    }

    body:has(#progressCard[style*="display: block"])::before,
    body:has(#progressCard[style*="display:block"])::before,
    body:has(#sentimentProgressCard[style*="display: block"])::before,
    body:has(#sentimentProgressCard[style*="display:block"])::before {
        content: '';
        position: fixed;
        inset: 0;
        width: 100%;
        min-width: 100vw;
        min-height: calc(100vh + env(safe-area-inset-bottom, 0px) + 8px);
        min-height: calc(100dvh + env(safe-area-inset-bottom, 0px) + 8px);
        z-index: 1880;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        pointer-events: auto;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /*
     * Fixed bottom action bar (white + border-top) can read as a line under the modal if it
     * composites oddly; remove it from layout while the progress modal is open.
     */
    body:has(#progressCard[style*="display: block"]) .cursor-layout .cursor-sidebar > .floating-submit-container,
    body:has(#progressCard[style*="display:block"]) .cursor-layout .cursor-sidebar > .floating-submit-container,
    body:has(#sentimentProgressCard[style*="display: block"]) .cursor-layout .cursor-sidebar > .floating-submit-container,
    body:has(#sentimentProgressCard[style*="display:block"]) .cursor-layout .cursor-sidebar > .floating-submit-container {
        display: none !important;
    }

    /*
     * Progress card lives inside .cursor-main (z-index: 0). Without this, its z-index is trapped
     * below body::before (1880) — users only see the dimmed overlay.
     * The layout + main column must not use opaque white here: they stack above the backdrop,
     * so otherwise a full-width white panel (layout default + main) shows as a band under the modal.
     */
    body:has(#progressCard[style*="display: block"]) .cursor-layout,
    body:has(#progressCard[style*="display:block"]) .cursor-layout,
    body:has(#sentimentProgressCard[style*="display: block"]) .cursor-layout,
    body:has(#sentimentProgressCard[style*="display:block"]) .cursor-layout {
        background: transparent !important;
    }

    body:has(#progressCard[style*="display: block"]) .cursor-layout .cursor-main,
    body:has(#progressCard[style*="display:block"]) .cursor-layout .cursor-main,
    body:has(#sentimentProgressCard[style*="display: block"]) .cursor-layout .cursor-main,
    body:has(#sentimentProgressCard[style*="display:block"]) .cursor-layout .cursor-main {
        position: relative;
        z-index: 1920;
        background: transparent !important;
    }

    body:has(#progressCard[style*="display: block"]) .cursor-layout .cursor-main .cursor-main-content,
    body:has(#progressCard[style*="display:block"]) .cursor-layout .cursor-main .cursor-main-content,
    body:has(#sentimentProgressCard[style*="display: block"]) .cursor-layout .cursor-main .cursor-main-content,
    body:has(#sentimentProgressCard[style*="display:block"]) .cursor-layout .cursor-main .cursor-main-content {
        background: transparent !important;
    }

    #progressCard[style*="display: block"],
    #progressCard[style*="display:block"],
    #sentimentProgressCard[style*="display: block"],
    #sentimentProgressCard[style*="display:block"] {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 440px !important;
        max-height: calc(100vh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        z-index: 1900 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
        padding: 24px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Progress is fixed; override page-level flex center rules while modal is open */
    .cursor-layout .cursor-main .cursor-main-content:has(#progressCard[style*="display: block"]),
    .cursor-layout .cursor-main .cursor-main-content:has(#progressCard[style*="display:block"]),
    .cursor-layout .cursor-main .cursor-main-content:has(#sentimentProgressCard[style*="display: block"]),
    .cursor-layout .cursor-main .cursor-main-content:has(#sentimentProgressCard[style*="display:block"]) {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /*
     * After analysis completes: hide "Analysis Input Details" in the sidebar and show the default
     * module header again (JS often leaves the prompt-details header visible).
     */
    body:has(#resultCard[style*="display: block"]) #promptDetailsHeader,
    body:has(#resultCard[style*="display: block"]) #promptDetailsCard,
    body:has(#sentimentResultCard[style*="display: block"]) #sentimentPromptDetailsHeader,
    body:has(#sentimentResultCard[style*="display: block"]) #sentimentPromptDetailsCard,
    body:has(#analysisResultsContainer:not(:empty)) #promptDetailsHeader,
    body:has(#analysisResultsContainer:not(:empty)) #promptDetailsCard {
        display: none !important;
    }

    body:has(#resultCard[style*="display: block"]) #sidebarHeader,
    body:has(#analysisResultsContainer:not(:empty)) #sidebarHeader {
        display: block !important;
    }

    body:has(#sentimentResultCard[style*="display: block"]) #sentimentSidebarHeader {
        display: block !important;
    }

    /*
     * Finished analysis: .cursor-sidebar-content has flex:1, so it stretches between the module header
     * and the in-flow post-result actions (Export / New…). When the form + input-details are hidden,
     * that leaves a large empty band — shrink the middle to content height only.
     * Also strip side padding (otherwise #fafafa + 16px padding reads as a grey gap) and align
     * sidebar with the white results column; remove main panel top padding from JS (24px).
     */
    body:has(#resultCard[style*="display: block"]) .cursor-layout .cursor-sidebar > .cursor-sidebar-content,
    body:has(#resultCard[style*="display:block"]) .cursor-layout .cursor-sidebar > .cursor-sidebar-content,
    body:has(#sentimentResultCard[style*="display: block"]) .cursor-layout .cursor-sidebar > .cursor-sidebar-content,
    body:has(#sentimentResultCard[style*="display:block"]) .cursor-layout .cursor-sidebar > .cursor-sidebar-content,
    body:has(#analysisResultsContainer:not(:empty)) .cursor-layout .cursor-sidebar > .cursor-sidebar-content {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body:has(#resultCard[style*="display: block"]) .cursor-layout .cursor-sidebar,
    body:has(#resultCard[style*="display:block"]) .cursor-layout .cursor-sidebar,
    body:has(#sentimentResultCard[style*="display: block"]) .cursor-layout .cursor-sidebar,
    body:has(#sentimentResultCard[style*="display:block"]) .cursor-layout .cursor-sidebar,
    body:has(#analysisResultsContainer:not(:empty)) .cursor-layout .cursor-sidebar {
        background: #ffffff !important;
    }

    body:has(#resultCard[style*="display: block"]) .cursor-layout .cursor-main .cursor-main-content,
    body:has(#resultCard[style*="display:block"]) .cursor-layout .cursor-main .cursor-main-content,
    body:has(#sentimentResultCard[style*="display: block"]) .cursor-layout .cursor-main .cursor-main-content,
    body:has(#sentimentResultCard[style*="display:block"]) .cursor-layout .cursor-main .cursor-main-content,
    body:has(#analysisResultsContainer:not(:empty)) .cursor-layout .cursor-main .cursor-main-content {
        padding-top: 0 !important;
    }

    /*
     * Analyze modules (predictions, data, social, sentiment): on compact screens the right column is
     * only decorative until progress/results. Hiding it removes the empty purple band and tightens the
     * form + fixed Generate bar. Large desktops keep .animated-ai-background + Did you know (min-width 1367px).
     */
    .cursor-layout > .cursor-main.animated-ai-background:not(.scrollable):not(:has(#progressCard[style*="display: block"])):not(:has(#progressCard[style*="display:block"])):not(:has(#resultCard[style*="display: block"])):not(:has(#resultCard[style*="display:block"])):not(:has(#sentimentProgressCard[style*="display: block"])):not(:has(#sentimentProgressCard[style*="display:block"])):not(:has(#sentimentResultCard[style*="display: block"])):not(:has(#sentimentResultCard[style*="display:block"])) {
        display: none !important;
    }
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */

/* Responsive font sizes */
.text-responsive-xs {
    font-size: 0.75rem;
}

.text-responsive-sm {
    font-size: 0.875rem;
}

.text-responsive-base {
    font-size: 1rem;
}

.text-responsive-lg {
    font-size: 1.125rem;
}

.text-responsive-xl {
    font-size: 1.25rem;
}

.text-responsive-2xl {
    font-size: 1.5rem;
}

.text-responsive-3xl {
    font-size: 1.875rem;
}

.text-responsive-4xl {
    font-size: 2.25rem;
}

/* Mobile typography adjustments */
@media (max-width: 768px) {
    .text-responsive-4xl {
        font-size: 1.875rem !important;
    }
    
    .text-responsive-3xl {
        font-size: 1.5rem !important;
    }
    
    .text-responsive-2xl {
        font-size: 1.25rem !important;
    }
    
    .text-responsive-xl {
        font-size: 1.125rem !important;
    }
}

@media (max-width: 480px) {
    .text-responsive-4xl {
        font-size: 1.5rem !important;
    }
    
    .text-responsive-3xl {
        font-size: 1.25rem !important;
    }
    
    .text-responsive-2xl {
        font-size: 1.125rem !important;
    }
    
    .text-responsive-xl {
        font-size: 1rem !important;
    }
}

/* ===== RESPONSIVE SPACING ===== */

/* Responsive padding and margins */
.p-responsive-xs {
    padding: 0.5rem;
}

.p-responsive-sm {
    padding: 1rem;
}

.p-responsive-md {
    padding: 1.5rem;
}

.p-responsive-lg {
    padding: 2rem;
}

.p-responsive-xl {
    padding: 3rem;
}

.m-responsive-xs {
    margin: 0.5rem;
}

.m-responsive-sm {
    margin: 1rem;
}

.m-responsive-md {
    margin: 1.5rem;
}

.m-responsive-lg {
    margin: 2rem;
}

.m-responsive-xl {
    margin: 3rem;
}

/* Mobile spacing adjustments */
@media (max-width: 768px) {
    .p-responsive-xl {
        padding: 2rem !important;
    }
    
    .p-responsive-lg {
        padding: 1.5rem !important;
    }
    
    .m-responsive-xl {
        margin: 2rem !important;
    }
    
    .m-responsive-lg {
        margin: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .p-responsive-xl {
        padding: 1.5rem !important;
    }
    
    .p-responsive-lg {
        padding: 1rem !important;
    }
    
    .m-responsive-xl {
        margin: 1.5rem !important;
    }
    
    .m-responsive-lg {
        margin: 1rem !important;
    }
}

/* ===== RESPONSIVE GRID SYSTEM ===== */

.grid-responsive {
    display: grid;
    gap: 1.5rem;
}

.grid-responsive-1 {
    grid-template-columns: 1fr;
}

.grid-responsive-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-responsive-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-responsive-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-responsive-auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Mobile grid adjustments */
@media (max-width: 768px) {
    .grid-responsive-2,
    .grid-responsive-3,
    .grid-responsive-4 {
        grid-template-columns: 1fr !important;
    }
    
    .grid-responsive-auto {
        grid-template-columns: 1fr !important;
    }
}

/* ===== RESPONSIVE FLEXBOX ===== */

.flex-responsive {
    display: flex;
}

.flex-responsive-col {
    flex-direction: column;
}

.flex-responsive-wrap {
    flex-wrap: wrap;
}

.flex-responsive-center {
    justify-content: center;
    align-items: center;
}

.flex-responsive-between {
    justify-content: space-between;
}

.flex-responsive-around {
    justify-content: space-around;
}

/* Mobile flex adjustments */
@media (max-width: 768px) {
    .flex-responsive-md-col {
        flex-direction: column !important;
    }
    
    .flex-responsive-md-center {
        justify-content: center !important;
        align-items: center !important;
    }
}

@media (max-width: 480px) {
    .flex-responsive-sm-col {
        flex-direction: column !important;
    }
    
    .flex-responsive-sm-center {
        justify-content: center !important;
        align-items: center !important;
    }
}

/* ===== RESPONSIVE TABLES ===== */

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-responsive table {
    min-width: 600px;
}

/* Custom scrollbar for webkit browsers */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Mobile table adjustments */
@media (max-width: 640px) {
    .table-responsive {
        margin: 0 -16px;
    }
    
    .table-responsive table {
        min-width: 500px;
    }
    
    .table-responsive th,
    .table-responsive td {
        padding: 12px 8px !important;
    }
}

@media (max-width: 480px) {
    .table-responsive table {
        min-width: 400px;
    }
    
    .table-responsive th,
    .table-responsive td {
        padding: 8px 6px !important;
    }
}

/* ===== RESPONSIVE FORMS ===== */

.form-responsive {
    width: 100%;
}

.form-responsive input,
.form-responsive textarea,
.form-responsive select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Mobile form adjustments */
@media (max-width: 768px) {
    .form-responsive input,
    .form-responsive textarea,
    .form-responsive select {
        padding: 14px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .form-responsive label {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .form-responsive input,
    .form-responsive textarea,
    .form-responsive select {
        padding: 12px 14px;
        font-size: 15px;
    }
    
    .form-responsive label {
        font-size: 13px;
        margin-bottom: 6px;
    }
}

/* ===== RESPONSIVE BUTTONS ===== */

.btn-responsive {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    min-height: 44px;
    min-width: 44px;
}

.btn-responsive-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-responsive-lg {
    padding: 16px 32px;
    font-size: 18px;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
    .btn-responsive {
        padding: 10px 20px;
        font-size: 15px;
    }
    
    .btn-responsive-lg {
        padding: 14px 28px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .btn-responsive {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .btn-responsive-lg {
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* ===== RESPONSIVE CARDS ===== */

.card-responsive {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-responsive-header {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.card-responsive-body {
    padding: 20px;
}

.card-responsive-footer {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
}

/* Mobile card adjustments */
@media (max-width: 768px) {
    .card-responsive-header,
    .card-responsive-body,
    .card-responsive-footer {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .card-responsive-header,
    .card-responsive-body,
    .card-responsive-footer {
        padding: 12px !important;
    }
}

/* ===== RESPONSIVE NAVIGATION ===== */

.nav-responsive {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-responsive-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-responsive-brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
}

.nav-responsive-links {
    display: flex;
    gap: 24px;
    margin-left: 48px;
}

.nav-responsive-link {
    color: #64748b;
    text-decoration: none;
    padding: 8px 0;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s;
}

.nav-responsive-link:hover {
    color: #374151;
}

/* Mobile navigation */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #374151;
    cursor: pointer;
    padding: 8px;
}

.mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.mobile-nav.active {
    display: block;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-nav-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #374151;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.mobile-nav-section-content {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: stretch;
}

.mobile-nav-link:hover {
    background-color: #f1f5f9;
}

/* Mobile navigation adjustments */
@media (max-width: 768px) {
    .nav-responsive-content {
        padding: 0 16px;
    }
    
    .nav-responsive-links {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-responsive-brand {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .nav-responsive-content {
        padding: 0 12px;
    }
    
    .nav-responsive-brand {
        font-size: 1rem;
    }
}

/* ===== RESPONSIVE UTILITIES ===== */

/* Hide/show utilities */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Text alignment utilities */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Mobile text alignment */
@media (max-width: 768px) {
    .text-center-md {
        text-align: center !important;
    }
    
    .text-left-md {
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    .text-center-sm {
        text-align: center !important;
    }
    
    .text-left-sm {
        text-align: left !important;
    }
}

/* ===== RESPONSIVE ANIMATIONS ===== */

/* Smooth transitions */
.transition-responsive {
    transition: all 0.3s ease;
}

/* Hover effects */
.hover-responsive:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Mobile hover adjustments */
@media (max-width: 768px) {
    .hover-responsive:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    .container-responsive {
        max-width: none;
        padding: 0;
    }
    
    .card-responsive {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus styles */
.focus-responsive:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card-responsive {
        border: 2px solid #000;
    }
    
    .btn-responsive {
        border: 2px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .transition-responsive,
    .hover-responsive {
        transition: none;
    }
    
    .hover-responsive:hover {
        transform: none;
    }
}

/* ===== RESPONSIVE HELPERS ===== */

/* Responsive spacing helpers */
.space-responsive-xs > * + * {
    margin-left: 0.5rem;
}

.space-responsive-sm > * + * {
    margin-left: 1rem;
}

.space-responsive-md > * + * {
    margin-left: 1.5rem;
}

.space-responsive-lg > * + * {
    margin-left: 2rem;
}

/* Mobile spacing adjustments */
@media (max-width: 768px) {
    .space-responsive-lg > * + * {
        margin-left: 1rem !important;
    }
    
    .space-responsive-md > * + * {
        margin-left: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .space-responsive-md > * + *,
    .space-responsive-lg > * + * {
        margin-left: 0.5rem !important;
    }
}

/* Responsive gap helpers */
.gap-responsive-xs {
    gap: 0.5rem;
}

.gap-responsive-sm {
    gap: 1rem;
}

.gap-responsive-md {
    gap: 1.5rem;
}

.gap-responsive-lg {
    gap: 2rem;
}

/* Mobile gap adjustments */
@media (max-width: 768px) {
    .gap-responsive-lg {
        gap: 1rem !important;
    }
    
    .gap-responsive-md {
        gap: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .gap-responsive-md,
    .gap-responsive-lg {
        gap: 0.5rem !important;
    }
}

/* ===== Pricing page (/pricing) ===== */
/* Phones: one card per row, no horizontal scroll */
@media (max-width: 767px) {
    .pricing-plans-outer {
        overflow-x: visible !important;
        -webkit-overflow-scrolling: auto;
    }

    .pricing-plans-grid {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Tablets & iPad: two columns (e.g. four plans → 2×2) */
@media (min-width: 768px) and (max-width: 1199px) {
    .pricing-plans-outer {
        overflow-x: visible !important;
    }

    .pricing-plans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Odd total (3, 5, …): last row has one card — match column width, centered */
    .pricing-plans-grid > article:last-child:nth-child(odd):not(:only-child) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: min(420px, calc((100% - 24px) / 2));
    }

    .pricing-plans-grid > article:only-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: min(420px, 100%);
    }
}

/* ===== Profile page — stay within main / viewport (barcode + grid min-width) ===== */
.profile-page {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

.profile-page-shell {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-page-grid {
    min-width: 0;
}

.profile-page-grid > * {
    min-width: 0;
}

.profile-identity-card,
.profile-identity-card__inner,
.profile-identity-card__body,
.profile-identity-card__info {
    min-width: 0;
    max-width: 100%;
}

.profile-identity-card__barcode {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ~100 fixed-width bars ≈ 450px+ — contain scroll inside the card, not the page */
.profile-identity-card__barcode-track {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* iPad & compact widths: profile card above “Update” form (matches app 1366px compact range) */
@media (max-width: 1366px) {
    .profile-page-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== Profile page — compact / phone layout (grouped list + hero avatar) ===== */
@media (max-width: 767px) {
    .profile-page {
        padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
        background: #f1f5f9 !important;
        -webkit-tap-highlight-color: transparent;
    }

    .profile-page-shell {
        max-width: 100% !important;
    }

    .profile-page-header {
        text-align: left !important;
        margin-bottom: 20px !important;
    }

    .profile-page-title {
        font-size: 1.375rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;
        margin-bottom: 6px !important;
    }

    .profile-page-subtitle {
        font-size: 0.875rem !important;
        color: #64748b !important;
        line-height: 1.45 !important;
    }

    .profile-page-grid {
        gap: 16px !important;
        margin-bottom: 24px !important;
    }

    /* Identity card: inset surface, lighter elevation (mobile “settings” style) */
    .profile-identity-card {
        border-radius: 16px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
    }

    .profile-identity-card__ribbon {
        height: 44px !important;
    }

    .profile-identity-card__inner {
        padding: 20px 16px !important;
        gap: 16px !important;
    }

    .profile-identity-card__body {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .profile-identity-card__photo {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .profile-identity-card__photo-frame {
        width: min(156px, 44vw) !important;
        height: min(156px, 44vw) !important;
        max-width: 156px !important;
        max-height: 156px !important;
        border-radius: 999px !important;
    }

    .profile-identity-card__photo-frame img#profile-image-display {
        border-radius: 999px !important;
    }

    .profile-identity-card__photo-frame #profile-image-overlay {
        border-radius: 999px !important;
    }

    .profile-identity-card__info {
        width: 100% !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 16px !important;
    }

    .profile-identity-card__name {
        width: 100% !important;
    }

    .profile-identity-card__name-text {
        text-transform: none !important;
        letter-spacing: -0.02em !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
    }

    .profile-identity-card__details-wrap {
        width: 100% !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* Grouped rows (iOS/Android settings–like list) */
    .profile-identity-card__meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    .profile-identity-card__meta > div {
        padding: 14px 16px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #fff !important;
    }

    .profile-identity-card__meta > div:last-child {
        border-bottom: none !important;
    }

    .profile-identity-card__meta > div > p:first-child {
        font-size: 0.6875rem !important;
        color: #64748b !important;
        margin-bottom: 4px !important;
    }

    .profile-identity-card__meta > div > p:not(:first-child) {
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
    }

    .profile-identity-card__barcode {
        padding: 0 16px 16px !important;
    }

    .profile-identity-card__barcode-track {
        height: 52px !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
    }

    .profile-edit-panel {
        border-radius: 16px !important;
        padding: 20px 16px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
    }

    .profile-edit-panel input[type="text"],
    .profile-edit-panel input[type="email"],
    .profile-edit-panel input[type="password"] {
        min-height: 48px;
        font-size: 16px !important; /* avoids iOS zoom on focus */
    }

    /* Superadmin: pill actions (same control as superadmin sidebar “Switch to client app”) */
    .profile-mobile-superadmin-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 16px;
    }
}

/* ===== Client analytics (/analytics) — small screens: no clipping, readable grids ===== */
.analytics-page.cursor-layout {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.analytics-page .cursor-sidebar,
.analytics-page .cursor-main,
.analytics-page .cursor-main-content {
    min-width: 0;
    box-sizing: border-box;
}

/* Usage trends: page does not pan horizontally — only the chart strip scrolls */
.analytics-page .cursor-main-content {
    overflow-x: clip;
}

.analytics-page .analytics-section--trends,
.analytics-page .analytics-trends-grid {
    min-width: 0;
    max-width: 100%;
}

.analytics-page .analytics-chart-panel {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.analytics-page .analytics-chart-track {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    box-sizing: border-box;
}

.analytics-page .analytics-chart-column {
    flex: 0 0 auto !important;
    width: 40px;
    min-width: 40px;
}

.analytics-page .analytics-chart-empty {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Analytics sidebar: collapsible filters on small screens only */
@media (max-width: 767px) {
    .analytics-page .analytics-filter-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 10px 14px;
        margin: 0;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .analytics-page .analytics-filter-summary__chevron {
        flex-shrink: 0;
        font-size: 14px;
        opacity: 0.7;
        transition: transform 0.2s ease;
    }

    .analytics-page .analytics-filter-details[open] .analytics-filter-summary__chevron {
        transform: rotate(180deg);
    }

    .analytics-page .analytics-filter-body {
        padding: 12px 2px 0;
    }
}

@media (min-width: 768px) {
    .analytics-page .analytics-filter-summary {
        cursor: default;
        pointer-events: none;
        padding: 0 0 10px;
        margin: 0 0 12px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .analytics-page .analytics-filter-summary__chevron {
        display: none !important;
    }
}

@media (max-width: 1366px) {
    .analytics-page.cursor-layout {
        overflow-x: clip;
        overflow-y: visible;
        max-width: 100%;
    }

    /* iPad / tablet: Usage Trends charts stacked (one full-width row each) */
    .analytics-page .analytics-trends-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .analytics-page .analytics-filter-dates {
        grid-template-columns: 1fr !important;
    }

    .analytics-page .analytics-key-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .analytics-page .analytics-key-metrics-grid > div {
        padding: 14px 12px !important;
        min-width: 0;
    }

    .analytics-page .analytics-key-metrics-grid > div > div:first-child {
        font-size: 1.35rem !important;
        word-break: break-word;
    }

    .analytics-page .analytics-performance-grid,
    .analytics-page .analytics-apify-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .analytics-page .analytics-apify-kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .analytics-page .module-breakdown-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .analytics-page .analytics-stat-row {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px 12px !important;
    }

    .analytics-page .analytics-stat-row > span:first-of-type {
        flex: 1 1 100%;
        min-width: 0;
        padding-right: 0;
    }

    .analytics-page .analytics-stat-row > span:last-of-type {
        flex: 1 1 auto;
        text-align: right;
        margin-left: auto;
        word-break: break-word;
    }

    .analytics-page .analytics-module-card-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .analytics-page .analytics-module-card-header h3 {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.9375rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    .analytics-page .analytics-key-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Analyze modules (create / data / social / sentiment): allow touch scroll inside tall tooltips */
@media (max-width: 1366px) {
    .info-tooltip-tooltip.show {
        pointer-events: auto;
    }
}