/* SFO Webapp - Fullscreen PWA overrides */
/* Imports the shared PassPoint stylesheet */
@import url('../src/styles/passpoint.css');

/* ========== Fullscreen Layout ========== */

/* Hide prototype-only elements */
.prototype-header,
.nav-row,
.phone-wrapper,
.phone-container,
.phone-frame,
.notch,
.status-bar,
.home-indicator,
.screen-map-btn,
.screen-map-modal {
    display: none !important;
}

/* App container fills the viewport */
.sfo-app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--background, #F8FAFC);
    overscroll-behavior: none; /* Blokkeert pull-to-refresh op iOS/Android */
}

/* Screens fill the app container */
.screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--background, #F8FAFC);
}

.screen.active {
    display: flex;
}

/* Screen content: overflow hidden to prevent competing scroll containers with inner scroll wrappers.
   Alle schermen van type "scroll-wrapper" hebben een inner <div style="flex:1;overflow-y:auto"> die scrollt.
   iOS Safari kiest anders soms de verkeerde container (body i.p.v. inner div). */
.screen-content {
    flex: 1;
    overflow: hidden;
}

/* iOS scroll-latching fix: inner scroll containers krijgen GPU-accelerated momentum scrolling
   + overscroll-behavior contain voorkomt scroll-chaining naar parent bij scroll boundary */
.screen-content > [style*="overflow-y"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Screen-manual: prevent whole screen from scrolling so app-bar stays visible when keyboard opens */
#screen-manual > .screen-content {
    overflow-y: hidden;
}

/* Phone screen container no longer needed */
.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* App bar sticks to top */
.app-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: auto;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-bottom: 12px;
}

/* Toast: 10px onder webapp app-bar (safe-area + 12 + ~24 content + 12 = safe-area + 48) */
.app-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 58px);
}

/* Indicators + metrics-strip: position static in webapp — ze staan buiten de scroll container
   (elke screen wrapt scrollbare content in een eigen flex: 1; overflow-y: auto div).
   Static voorkomt dat de sticky top-waarden uit passpoint.css (112px+) een gap veroorzaken. */
.offline-indicator,
.device-check-indicator,
.metrics-strip,
.search-bar {
    position: static !important;
}

/* Bottom nav: height groeit mee met safe area zodat border-top op juiste hoogte staat */
.bottom-nav {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* BLE elements - hidden/disabled in webapp */
#cp-ble-bar {
    display: none !important;
}
/* p4-ble-icon: disabled (screen 4 has no BLE) */
#p4-ble-icon {
    pointer-events: none;
    opacity: 0.3;
}
/* p4c-ble-icon: enabled via JS feature detection (hidden by default, shown if requestLEScan available) */

/* Sync sidebar - fixed to right */
.sync-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 40vw;
    z-index: 150;
}

/* Confirm modal uses fixed positioning */
#confirmModal {
    position: fixed !important;
    border-radius: 0 !important;
}

/* QR Scanner - camera viewfinder */
.qr-viewfinder {
    flex: 1;
    overflow: hidden;
    position: relative;
}

#qr-reader {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* Hide html5-qrcode UI — keep shaded region functional but invisible borders */
#qr-reader #qr-shaded-region {
    border-color: transparent !important;
}
/* Hide any library-generated scan box borders, icons, text */
#qr-reader > div > div {
    border: none !important;
    box-shadow: none !important;
}
#qr-reader img,
#qr-reader a {
    display: none !important;
}

/* Scan frame overlay with corner markers */
.qr-scan-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    z-index: 10;
    pointer-events: none;
}

/* Corner markers (4 L-shaped corners) */
.qr-scan-frame::before,
.qr-scan-frame::after,
.qr-corner-bl,
.qr-corner-br {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border-color: #F59E0B;
    border-style: solid;
}

.qr-scan-frame::before {
    top: 0; left: 0;
    border-width: 4px 0 0 4px;
    border-radius: 4px 0 0 0;
}

.qr-scan-frame::after {
    top: 0; right: 0;
    border-width: 4px 4px 0 0;
    border-radius: 0 4px 0 0;
}

.qr-corner-bl {
    bottom: 0; left: 0;
    border-width: 0 0 4px 4px;
    border-radius: 0 0 0 4px;
}

.qr-corner-br {
    bottom: 0; right: 0;
    border-width: 0 4px 4px 0;
    border-radius: 0 0 4px 0;
}

/* Animated scan line */
.qr-scan-line {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F59E0B 20%, #F59E0B 80%, transparent);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
    animation: qr-scan-sweep 2s ease-in-out infinite;
}

@keyframes qr-scan-sweep {
    0%, 100% { top: 8px; }
    50% { top: calc(100% - 10px); }
}

/* Floating scan feedback toast */
.qr-toast {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background: rgba(0, 128, 128, 0.92);
    color: white;
    padding: 16px 24px;
    border-radius: 14px;
    text-align: center;
    min-width: 220px;
    max-width: 80%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.qr-toast p {
    margin: 0;
}
.qr-toast #qr-result-text {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.qr-toast #qr-result-sub {
    font-size: 13px;
    opacity: 0.85;
}
.qr-toast.qr-success { background: rgba(16, 185, 129, 0.92); }
.qr-toast.qr-warning { background: rgba(245, 158, 11, 0.92); }
.qr-toast.qr-error   { background: rgba(239, 68, 68, 0.92); }

/* Filter sheet fullscreen */
.filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 500;
}

/* Edit sheets fullscreen */
.cp-edit-sheet {
    position: fixed;
    inset: 0;
    z-index: 500;
}

/* ========== List item overflow fix ========== */
/* Prevent lists and scroll containers from overflowing/bouncing horizontally */
.screen-content {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
.screen-content > div[style*="overflow-y"] {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
.participant-list {
    overflow-x: hidden;
    padding: 12px 16px 0;
}
.scan-item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.scan-info {
    min-width: 0;
    overflow: hidden;
}
.scan-name,
.scan-category {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== Safe Area Insets ========== */

/* Left and right safe areas for notched devices */
.screen-content,
.settings-section {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ========== Pull-to-refresh spinner ========== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== PWA Standalone Mode ========== */

@media (display-mode: standalone) {
    /* Extra padding when running as installed PWA */
    .app-bar {
        padding-top: calc(max(env(safe-area-inset-top, 0px), 0px) + 12px);
    }
}

/* ========== Landscape Lock ========== */
.landscape-blocker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--primary, #F26522);
    color: white;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: inherit;
    text-align: center;
    padding: 32px;
}
.landscape-blocker svg {
    width: 48px;
    height: 48px;
    animation: rotate-phone 1.5s ease-in-out infinite alternate;
}
.landscape-blocker p {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}
@keyframes rotate-phone {
    from { transform: rotate(90deg); }
    to { transform: rotate(0deg); }
}
@media (orientation: landscape) and (max-height: 500px) {
    .landscape-blocker {
        display: flex;
    }
}
/* Dashboard: always suppress landscape blocker + enable full-screen landscape */
body.p8-active .landscape-blocker {
    display: none !important;
    pointer-events: none !important;
}
@media (orientation: landscape) and (max-width: 1024px) {
    body.p8-active #screen-dashboard .bottom-nav {
        display: none !important;
    }
    body.p8-active #screen-dashboard .app-bar {
        display: none !important;
    }
    body.p8-active .p8-hide-completed-btn {
        top: calc(max(env(safe-area-inset-top, 0px), 8px) + 44px);
        right: max(env(safe-area-inset-right, 0px), 10px);
    }
    body.p8-active #screen-dashboard .dashboard-scroll {
        height: 100vh;
        height: 100dvh;
        padding-top: max(env(safe-area-inset-top, 0px), 12px);
        padding-left: max(env(safe-area-inset-left, 0px), 12px);
        padding-right: max(env(safe-area-inset-right, 0px), 12px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Keep tile grids at portrait proportions in landscape (mirrors .landscape-device-frame) */
    body.p8-active .p8-cp-grid,
    body.p8-active .p8-act-grid,
    body.p8-active .p8-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    body.p8-active .p8-deelnemers-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }
    body.p8-active .p8-sub-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    body.p8-active .p8-hero {
        flex-wrap: nowrap;
    }
    body.p8-active .p8-expand,
    body.p8-active .p8-cp-expand {
        grid-column: 1 / -1;
    }
    /* Floating close button in landscape (app-bar is hidden) */
    body.p8-active .p8-floating-close {
        display: flex;
        top: max(env(safe-area-inset-top, 0px), 8px);
        right: max(env(safe-area-inset-right, 0px), 12px);
    }
}
/* Tablet landscape: slightly larger tile grids */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) {
    body.p8-active .p8-cp-grid,
    body.p8-active .p8-act-grid,
    body.p8-active .p8-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
}
/* Desktop landscape: spacious tile grids */
@media (orientation: landscape) and (min-width: 1025px) {
    body.p8-active .p8-cp-grid,
    body.p8-active .p8-act-grid,
    body.p8-active .p8-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    body.p8-active .p8-deelnemers-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    body.p8-active .p8-sub-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    body.p8-active .dashboard-scroll {
        padding: 16px 24px;
    }
    body.p8-active .p8-timeline-now-pill::after {
        left: calc(50% - 0.5px);
    }
}

/* ========== Live Tracker: header + bottom-nav op tablet/desktop ========== */
/* Tablet/desktop landscape: live modal header match app-bar dimensies */
@media (orientation: landscape) and (min-width: 768px) {
    .p8-live-modal-header {
        height: 48px;
        padding: 0 20px;
        font-size: 17px;
    }
    /* Bottom-nav zichtbaar boven live overlay op tablet/desktop */
    #screen-dashboard:has(.p8-live-overlay.active) > .bottom-nav {
        display: flex !important;
        position: relative;
        z-index: 170;
    }
}

/* ========== Android: BLE badge links van titel ========== */
.is-android .app-bar .ble-status-btn {
    margin-left: 4px;
    margin-right: 0;
    z-index: 10;
    position: relative;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Prevent title from overlapping badge after DOM reorder */
.is-android .app-bar .app-bar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== In-app handleiding (screen-help) - alleen webapp/PWA ========== */
/* Scroll-wrapper via classes (help-content.html wordt door de projectvalidatie
   gescand, dus geen inline styles). Functioneel gelijk aan het scroll-wrapper
   patroon: screen-content = flex-kolom, inner .help-scroll = het scrollende vlak. */
.help-screen-content {
    display: flex;
    flex-direction: column;
    background: var(--background);
}
.help-scroll {
    flex: 1;
    overflow-y: auto;
}

.help-content {
    padding: 4px 0 88px;
}

.help-intro {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 12px 16px;
    padding: 14px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
}
.help-intro-icon {
    flex-shrink: 0;
    color: var(--primary);
}
.help-intro-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.help-intro p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Kaart die de hoofdstukken bundelt (zelfde look als .settings-section) */
.help-chapters {
    background: var(--surface);
    margin: 8px 16px 16px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.help-chapter-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    min-height: 48px;
    box-sizing: border-box;
    cursor: pointer;
}
.help-chapter + .help-chapter .help-chapter-head {
    border-top: 1px solid var(--border);
}
.help-chapter-head:hover {
    background: var(--background);
}
.help-chapter-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.help-chapter-icon .sfo-icon {
    width: 18px;
    height: 18px;
}
.help-chapter-titleblock {
    flex: 1;
    min-width: 0;
}
.help-chapter-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.help-chapter-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.help-chapter .accordion-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}
.help-chapter.open .accordion-chevron {
    transform: rotate(90deg);
}

/* Hoofdstuk-inhoud (lopende tekst) - standaard ingeklapt */
.help-chapter-body {
    display: none;
    padding: 4px 14px 16px;
}
.help-chapter.open .help-chapter-body {
    display: block;
}
.help-chapter-body p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}
.help-chapter-body h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.help-chapter-body h4 .sfo-icon {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
}
.help-chapter-body ul {
    margin: 6px 0;
    padding-left: 20px;
}
.help-chapter-body li {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
}
.help-chapter-body strong {
    font-weight: 600;
}

/* Tip/aandacht-blok (geen linkerborder-accent, alleen achtergrondtint) */
.help-tip {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 12px 0 2px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.help-tip .sfo-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--primary);
}

/* FAQ-rijen */
.help-faq {
    padding: 8px 0;
}
.help-faq + .help-faq {
    border-top: 1px solid var(--border);
}
.help-faq-q {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.help-faq-a {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.help-footer {
    margin: 4px 16px 0;
    padding: 12px 4px;
    text-align: center;
}
.help-footer p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Inline tekstlink binnen de handleiding (bv. "Support" in de footer). */
.help-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Deep-link doel van goToSupportSettings(): markeer de Support-sectie in
   Instellingen kort nadat ernaartoe is gescrolld. Ring rond de hele kaart
   (geen linker-accent), fade-out in dezelfde primary-tint als p8-flash. */
@keyframes settings-section-focus-ring {
    0%   { box-shadow: 0 0 0 3px rgba(0, 162, 191, 0.45); }
    70%  { box-shadow: 0 0 0 3px rgba(0, 162, 191, 0.45); }
    100% { box-shadow: 0 0 0 3px rgba(0, 162, 191, 0); }
}
.settings-section--focus {
    animation: settings-section-focus-ring 2.4s ease-out;
}