/**
 * Rajdar Mobile CSS
 * Styles for mobile-specific UI: bottom navigation, bottom sheets, fullscreen modals.
 * Only applies on mobile devices (max-width: 768px).
 */

/* ============================================
   Mobile bottom navigation bar
   ============================================ */
.rajdar-mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    .rajdar-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: #1a202c;
        border-top: 1px solid #2d3748;
        padding: 8px 4px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
    }

    .rajdar-mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        min-height: 56px;
        text-decoration: none;
        color: #a0aec0;
        font-size: 11px;
        font-weight: 500;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.15s;
        font-family: inherit;
    }

    .rajdar-mobile-nav-item:hover,
    .rajdar-mobile-nav-item:active {
        color: #ffffff;
    }

    .rajdar-mobile-nav-item.active {
        color: #4299e1;
    }

    .rajdar-mobile-nav-item i {
        font-size: 22px;
    }

    /* Push body content above the nav bar */
    body.has-mobile-nav {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
    }
}

/* ============================================
   Mobile hamburger menu (overflow)
   ============================================ */
.rajdar-mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s;
}

.rajdar-mobile-menu-overlay.open {
    display: block;
    opacity: 1;
}

.rajdar-mobile-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    max-height: 80vh;
    overflow-y: auto;
}

.rajdar-mobile-menu.open {
    transform: translateY(0);
}

.rajdar-mobile-menu-handle {
    width: 40px;
    height: 4px;
    background: #cbd5e0;
    border-radius: 2px;
    margin: 0 auto 20px;
}

.rajdar-mobile-menu-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 16px;
    text-align: center;
}

.rajdar-mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rajdar-mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    color: #2d3748;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
    font-family: inherit;
    min-height: 48px;
}

.rajdar-mobile-menu-item:hover,
.rajdar-mobile-menu-item:active {
    background: #f7fafc;
}

.rajdar-mobile-menu-item i {
    font-size: 20px;
    color: #4a5568;
    width: 24px;
    text-align: center;
}

.rajdar-mobile-menu-item.danger {
    color: #c53030;
}

.rajdar-mobile-menu-item.danger i {
    color: #c53030;
}

.rajdar-mobile-menu-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
}

/* ============================================
   Bottom sheet (for filters etc.)
   ============================================ */
.rajdar-bottom-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 768px) {
    .rajdar-bottom-sheet {
        display: block;
    }
}

.rajdar-bottom-sheet.open {
    transform: translateY(0);
}

/* ============================================
   Mobile fullscreen modal
   ============================================ */
@media (max-width: 768px) {
    .rajdar-mobile-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        max-width: none !important;
        max-height: none !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }
}

/* ============================================
   Tap targets — minimum 44x44 px
   ============================================ */
@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================
   Body padding for installed PWA (status bar)
   ============================================ */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top, 0);
    }

    /* Let the Rajdar title bar and organization logo scroll with the content
       rather than pin to the top — user feedback: sticky headers feel noisy in PWA */
    body .rajdar-mobile-titlebar {
        position: static !important;
        top: auto !important;
    }
    body #orgLogoContainer {
        position: absolute !important;
        top: calc(env(safe-area-inset-top, 0) + 15px) !important;
    }
}

/* ============================================
   App.html / radar pages: hide non-essential UI
   The radar canvas, header, logos, and stats are
   replaced by mobile-nav + bottom sheet filter.
   ============================================ */
@media (max-width: 768px) {
    /* Hide all logos in header areas (Rajdar + organization logos) */
    body header img,
    body a[href*="dashboard"] img[alt*="Logo" i],
    body a[href*="dashboard"] img[alt*="logo" i],
    body img[src*="rajdar-logo"],
    body img[src*="org-logo" i],
    body img[src*="logo" i][src*=".png"],
    body img[src*="logo" i][src*=".svg"],
    #orgLogoContainer {
        display: none !important;
    }

    /* Hide entire desktop header on all pages */
    body header.header,
    body header.header * {
        display: none !important;
    }

    /* Mobile title bar — injected by mobile-nav.js
       Same light background as the rest of the page so the Rajdar logo sits
       naturally instead of contrasting against a dark gradient.
       Padding-left/right reserves space for the fixed Rajdar logo (top-left)
       so long titles don't overlap it. */
    .rajdar-mobile-titlebar {
        padding: calc(env(safe-area-inset-top, 20px) + 8px) 92px 10px;
        background: #f8fafc;
        color: #1a202c;
        border-bottom: 1px solid #e2e8f0;
        font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 90;
        min-height: calc(env(safe-area-inset-top, 20px) + 64px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide all stats sections — initiative counts, article counts, etc. */
    body .stats-dashboard,
    body section.stats-dashboard,
    body .stat-card,
    body .stats-grid,
    body .stats-row,
    body .stats-overview,
    body .radar-card-stats,
    body .stats-container {
        display: none !important;
    }

    /* Radar visualization ON mobile (Fas 1): show it, give the circle room.
       Previously hidden by a UX choice — the canvas renders fine at mobile width. */
    body .radar-section,
    body #radarSection,
    body section.radar-section {
        display: block !important;
    }
    /* Hide the vertical icon-zoom slider on mobile so the circle centers and
       its right-edge labels aren't clipped. The horizontal zoom slider stays. */
    body .radar-zoom-wrapper .radar-side-slider--inline {
        display: none !important;
    }
    /* Full-width radar container with a little breathing room for labels. */
    body .radar-container--inline,
    body #radarContainer {
        padding: 0 6px !important;
    }
    body .radar-zoom-wrapper {
        padding: 4px !important;
    }

    /* Hide floating user manual button (already in hamburger menu) */
    body a[href*="ANV"][href*="HANDLEDNING"] {
        display: none !important;
    }

    /* Floating filter button */
    /* Hide initiative search bar and sort on mobile (use filter FAB instead) */
    .initiatives-section > div:first-child > div {
        display: none !important;
    }
    /* Keep the h2 heading visible */
    .initiatives-section > div:first-child {
        justify-content: flex-start !important;
    }

    /* Remove container centering and padding on mobile */
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove initiative section "frame" — no border, no padding, edge-to-edge */
    .initiatives-section {
        padding: 8px !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    /* Remove max-height scroll box — let the page scroll naturally */
    .initiatives-grid {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }

    /* Initiative cards — tighter padding, edge-to-edge */
    .initiative-card {
        padding: 14px 12px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    /* Filter FAB — styled entirely via inline JS to avoid cache issues */

    /* Hide controls bar by default on mobile */
    body section.controls {
        display: none;
    }

    /* Always hide org/radar filter on mobile — radar is selected via dashboard */
    #orgFilterGroup,
    #radarFilterGroup {
        display: none !important;
    }

    /* When opened as bottom sheet */
    body section.controls.rajdar-mobile-sheet-open {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998;
        background: white;
        border-radius: 16px 16px 0 0;
        padding: 16px 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
        max-height: 60vh;
        overflow-y: auto;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    }
    body section.controls.rajdar-mobile-sheet-open::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #cbd5e0;
        border-radius: 2px;
        margin: 0 auto 8px;
        grid-column: 1 / -1;
    }
    body section.controls.rajdar-mobile-sheet-open .control-group {
        margin: 0;
    }
    /* Hide labels — use select placeholder text instead */
    body section.controls.rajdar-mobile-sheet-open .control-group label {
        display: none;
    }
    body section.controls.rajdar-mobile-sheet-open .control-group select,
    body section.controls.rajdar-mobile-sheet-open .control-group input[type="text"] {
        width: 100%;
        min-height: 40px;
        font-size: 14px;
        padding: 8px 10px;
    }
    /* Date range inputs — also compact */
    body section.controls.rajdar-mobile-sheet-open .date-range-group {
        grid-column: 1 / -1;
    }
    body section.controls.rajdar-mobile-sheet-open .date-range-group label {
        display: inline;
        font-size: 12px;
    }
    /* Reset button + close button span full width */
    body section.controls.rajdar-mobile-sheet-open .control-group:has(.btn-secondary),
    body section.controls.rajdar-mobile-sheet-open > button {
        grid-column: 1 / -1;
    }
    /* org/radar filter hidden globally above */
}

/* ============================================
   Profile page: stack labels vertically
   ============================================ */
@media (max-width: 768px) {
    .profile-header {
        padding: 20px !important;
    }
    .profile-header h1 {
        font-size: 22px !important;
    }
    .profile-header i {
        font-size: 40px !important;
    }
    .profile-content {
        padding: 16px !important;
    }
    .info-item {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .info-label {
        min-width: unset !important;
        font-size: 12px;
    }
    .info-value {
        word-break: break-all;
        font-size: 15px;
    }
}

/* ============================================
   Matrix.html: mobile card optimizations
   ============================================ */
@media (max-width: 768px) {
    .kanban-card,
    [draggable="true"] {
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
        user-select: none;
    }

    /* Hide matrix summary info bar */
    #matrixInfo {
        display: none !important;
    }

    /* Matrix page wrapper: full height without desktop header */
    .matrix-page-wrapper {
        height: calc(100dvh - 80px) !important;
    }

    /* Matrix container: enable horizontal scroll */
    .matrix-container {
        padding: 4px !important;
        margin: 0 !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y !important;
    }

    /* Matrix grid: ensure it's wider than viewport */
    .matrix-grid {
        gap: 8px !important;
        padding: 0 !important;
        min-width: max-content !important;
        flex-wrap: nowrap !important;
    }

    /* Columns: narrow scrollable */
    .matrix-column {
        min-width: 220px !important;
        max-width: 260px !important;
        padding: 6px !important;
        flex-shrink: 0 !important;
    }
    .matrix-column-header {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }

    /* Cards: less padding, tighter */
    .matrix-card {
        padding: 10px !important;
    }
    .matrix-card-title {
        font-size: 13px !important;
    }

    /* Hide ALL meta info on cards (dates, priorities, status, categories) */
    .matrix-card-meta,
    .matrix-card .matrix-card-meta,
    .matrix-card-meta span,
    .matrix-future-scan-badge,
    .initiative-status,
    .dossier-status,
    .card-status,
    [class*="status-badge"],
    [class*="status-label"] {
        display: none !important;
    }

    /* Tags: compact */
    .matrix-card-tags {
        margin-top: 4px !important;
    }
    .matrix-card-tag {
        font-size: 10px !important;
        padding: 1px 5px !important;
    }

    /* Controls section: less padding */
    .matrix-controls {
        padding: 8px !important;
    }

    /* Horizontal scroll for kanban columns */
    .kanban-board,
    .matrix-grid,
    .kanban-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
}

/* ============================================
   Heatmap: horizontal scroll with sticky category column
   ============================================ */
@media (max-width: 768px) {
    /* Enable horizontal scroll on the grid wrapper */
    .heatmap-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* Grid: fixed column widths instead of 1fr (enables overflow scroll) */
    .heatmap-grid {
        grid-template-columns: 140px repeat(4, 150px) !important;
        overflow: visible !important;
        min-width: 740px;
    }

    /* Sticky first column (category names) */
    .heatmap-row-label,
    .heatmap-col-header:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fafbfc;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    }
    .heatmap-col-header:first-child {
        background: #f8fafc;
    }

    /* Summary cards — smaller */
    .heatmap-summary {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .heatmap-summary-card {
        min-width: 60px !important;
        padding: 8px !important;
    }

    /* Hide logo on heatmap */
    .heatmap-wrapper img[src*="logo"] {
        display: none !important;
    }

    /* Legacy table-based heatmap (if any) */
    table.heatmap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.heatmap th:first-child,
    table.heatmap td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
    }
}

/* ============================================
   Initiative modal + AI chat: fullscreen overlay on mobile
   ============================================ */
@media (max-width: 768px) {
    /* Chat column: fullscreen overlay ON TOP of initiative modal */
    #chatColumn {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10001 !important;
        width: 100vw !important;
        max-width: none !important;
        max-height: none !important;
        min-width: unset !important;
        flex: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        animation: none !important;
        background: #6b7280 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Push the header content below the status bar / notch. Match <header> too —
       the Framtidsspaning/Källor child views use a <header> as first child. */
    #chatColumn > div:first-child,
    #chatColumn > header:first-child,
    #chatColumn > .dossier-header {
        padding-top: calc(env(safe-area-inset-top, 24px) + 10px) !important;
        flex-shrink: 0;
    }
    /* The child-view close (X) is position:absolute (top:14px), so header padding
       doesn't move it — on a notched phone it sits under the status bar and taps
       miss it ("X stänger inte"). Offset it down by the safe-area inset. */
    #chatColumn .dossier-header-actions {
        top: calc(env(safe-area-inset-top, 24px) + 14px) !important;
    }
    /* Same family: the Källor-modal is a separate overlay starting 5vh from the
       top, which can fall under the notch in a standalone PWA. Add the inset. */
    .rajdar-sources-overlay {
        padding-top: calc(env(safe-area-inset-top, 0px) + 5vh) !important;
    }

    /* Chat messages area: fill remaining space */
    #chatColumn #chatMessages {
        flex: 1 !important;
        height: auto !important;
    }

    /* Chat layout wrapper: keep initiative modal behind */
    #chatLayoutWrapper {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Dossier as a bottom sheet on mobile (Fas 1, harvested from mobile.html).
       Slides up from the bottom with a drag handle; swipe-to-close wired in
       mobile-nav.js (setupDossierSheet). */
    .dossier-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .dossier-modal {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 92dvh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        overscroll-behavior: contain;
        animation: rajdarSheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
    /* Drag handle at the top of the sheet */
    .dossier-modal::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #cbd5e1;
        margin: 8px auto 2px;
        flex-shrink: 0;
    }
    @keyframes rajdarSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* ============================================
   Touchpoints: hide upload zone on mobile (read-only)
   ============================================ */
@media (max-width: 768px) {
    .tp-upload-zone,
    .tp-mode-group,
    .tp-analyze-btn,
    .tp-file-list {
        display: none !important;
    }
    /* Show only history (previous analyses) */
    .tp-sidebar {
        width: 100% !important;
        max-height: 30vh;
    }
    .tp-container {
        flex-direction: column;
    }
}

/* ============================================
   Network graph: enable touch interactions
   ============================================ */
@media (max-width: 768px) {
    .graph-sidebar,
    .nw-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 40vh;
        overflow-y: auto;
        z-index: 100;
        background: white;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    svg.graph-canvas,
    #network-graph-svg {
        touch-action: pinch-zoom;
    }
}