/**
 * Installationskollen – Responsive Overrides for Route Planner (Planner3.html)
 * Modulär responsiv CSS för surfplatta och mobil fältvy.
 * RÖR INTE DESKTOP (> 1024px) – Alla regler är inkapslade i @media queries.
 */

/* ==========================================================================
   1. SURFPLATTA (Tablet: 768px – 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .top-navbar {
        padding: 0 16px;
    }

    .brand-heading {
        font-size: 0.98rem;
    }

    .nav-links-group {
        gap: 3px;
        padding: 3px 6px;
    }

    .nav-link-btn {
        font-size: 0.80rem;
        padding: 6px 12px;
        gap: 5px;
    }

    .dispatch-hud-bar {
        top: 62px;
        left: 10px;
        right: 10px;
        /* Tablet: två rader istället för hoptryckt enrad (datumkontroller rad 1, KPI/vyväxlare rad 2).
           !important eftersom bas-reglerna i planner3.css ligger senare i kaskaden. */
        height: auto !important;
        min-height: 50px;
        flex-wrap: wrap !important;
        align-content: center;
        padding: 6px 10px !important;
        gap: 6px 10px !important;
    }

    .hud-kpi-chip {
        padding: 2px 7px;
        font-size: 0.74rem;
    }

    /* Flytta ner paneler under den högre tvåraders-HUD:en (62 + ~96px) */
    .mission-drawer {
        top: 166px !important;
        left: 10px;
        bottom: 84px;
        width: 350px;
    }

    .views-overlay-layer {
        top: 170px !important;
    }

    .visual-timeline-dock {
        left: 10px;
        right: 10px;
        bottom: 8px;
        height: 66px;
    }
}


/* ==========================================================================
   2. MOBIL & FÄLTVY (Max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {

    /* --- Förhindra iOS Safari auto-zoom på inputs --- */
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* --- Toppmeny Mobil --- */
    .top-navbar {
        height: 50px;
        padding: 0 10px;
        background: rgba(15, 23, 42, 0.96);
    }

    .nav-brand-wrap {
        gap: 6px;
    }

    .brand-heading {
        font-size: 0.90rem;
        gap: 6px;
    }

    .brand-heading i {
        font-size: 1rem;
    }

    .nav-center-wrap {
        position: static;
        transform: none;
        margin-left: auto;
    }

    .nav-links-group {
        padding: 2px 4px;
        gap: 2px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.5);
    }

    .nav-link-btn {
        padding: 6px 8px;
        font-size: 0.76rem;
        gap: 4px;
        border-radius: 16px;
    }

    /* Visa endast aktiv textetikett ("Ruttplanerare") på mobilen */
    .nav-link-btn span {
        display: none !important;
    }

    .nav-link-btn.active span {
        display: inline-block !important;
        font-size: 0.74rem;
    }

    .nav-right-spacer {
        display: none !important;
    }

    .brand-version-tag,
    .store-pill {
        display: none !important;
    }

    /* --- Dispatch HUD Bar Mobil --- */
    .dispatch-hud-bar {
        position: fixed !important;
        top: 54px !important;
        left: 6px !important;
        right: 6px !important;
        height: auto !important;
        padding: 6px 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        border-radius: 12px !important;
        z-index: 1100 !important;
    }

    .hud-date-controls {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-grow: 1 !important;
        justify-content: flex-start !important;
    }

    .hud-date-input {
        width: 110px !important;
        padding: 4px 6px !important;
        font-size: 0.80rem !important;
        height: 30px !important;
    }

    .btn-hud-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    .btn-hud-fetch {
        padding: 4px 10px !important;
        font-size: 0.76rem !important;
        height: 30px !important;
    }

    /* Dölj sekundära kontroller på mobilen för att hålla HUD ren */
    .hud-start-time-control,
    .hud-lunch-control,
    .hud-kpi-group {
        display: none !important;
    }

    /* Mobil Vy-väljare (Montörsläge, Packlista, Onepage – ingen Cockpit/ruttplanerare) */
    .hud-view-switcher {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        background: rgba(0, 0, 0, 0.45) !important;
        padding: 2px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        gap: 2px !important;
    }

    .btn-view-switch {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        height: 38px !important;
    }

    .btn-view-switch i {
        font-size: 0.95rem !important;
    }

    .btn-view-switch span {
        display: inline-block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.72rem !important;
    }

    /* Dölj ruttplaneraren (Cockpit) på telefonen – endast körvyerna visas */
    .btn-view-switch[data-view="cockpit"] {
        display: none !important;
    }

    /* --- Mission Drawer (Stopplistan) i Mobil --- */
    .mission-drawer {
        position: fixed !important;
        top: 130px !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        width: auto !important;
        border-radius: 14px !important;
        z-index: 1050 !important;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5) !important;
    }

    .mission-drawer.minimized {
        transform: translateY(115%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Återöppningsknapp på mobil (centrerad i botten) */
    .btn-drawer-reopen {
        top: auto !important;
        bottom: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1040 !important;
        border-radius: 24px !important;
        padding: 8px 18px !important;
        font-size: 0.85rem !important;
        background: rgba(15, 23, 42, 0.95) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
    }

    .mission-drawer-header {
        padding: 8px 12px !important;
    }

    .mission-drawer-title {
        font-size: 0.80rem !important;
    }

    .btn-magic-opt {
        padding: 8px !important;
        font-size: 0.78rem !important;
    }

    .mission-stops-list {
        padding: 8px !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .stop-cockpit-card {
        padding: 10px 10px !important;
        border-radius: 12px !important;
    }

    .stop-card-addr {
        max-width: 170px !important;
        font-size: 0.84rem !important;
    }

    /* Dölj drag-and-drop-handtag på mobil för att undvika oavsiktlig flytt vid skrollning */
    .card-reorder-controls {
        display: none !important;
    }

    /* Snabbknappar i fält på stopp-kortet */
    .stop-card-quick-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 8px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #e2e8f0 !important;
        flex-wrap: wrap !important;
    }

    .btn-stop-quick {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
    }

    .btn-stop-quick.call {
        background: #dcfce7 !important;
        color: #15803d !important;
        border: 1px solid #bbf7d0 !important;
    }

    .btn-stop-quick.nav {
        background: #e0f2fe !important;
        color: #0369a1 !important;
        border: 1px solid #bae6fd !important;
    }

    .btn-stop-quick.driver {
        background: #f8fafc !important;
        color: #334155 !important;
        border: 1px solid #cbd5e1 !important;
    }

    .btn-stop-quick:active {
        transform: scale(0.97) !important;
    }

    /* Dölj Gantt-dockan i botten på mobil (sparar skärmyta för karta och lista) */
    .visual-timeline-dock {
        display: none !important;
    }

    /* --- Körvyer (Montörsläge, Packlista, Onepage) i Mobil --- */
    /* Overlay ska ligga UNDER HUD-baren (~150px) så vylägaren förblir synlig och klickbar */
    .views-overlay-layer {
        position: fixed !important;
        top: 150px !important;
        left: 4px !important;
        right: 4px !important;
        bottom: 4px !important;
        padding: 12px 10px !important;
        border-radius: 14px !important;
        z-index: 1200 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* "Stäng till Karta" är meningslöst på mobilen (ingen cockpit) – dölj knappen */
    .btn-close-overlay {
        display: none !important;
    }

    /* "Montörsläge (Aktiv Förarassistent)"-titeln behövs inte i fält – fordonsflikarna ligger kvar */
    #overlay-driver > .d-flex.justify-content-between > h4 {
        display: none !important;
    }

    #overlay-driver > .d-flex.justify-content-between {
        margin-bottom: 8px !important;
    }
    .views-overlay-layer > .d-flex.justify-content-between {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .views-overlay-layer .btn-group {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 150px !important;
        gap: 4px !important;
    }

    .views-overlay-layer .btn-group .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.78rem !important;
        padding: 7px 6px !important;
    }

    .views-overlay-layer .btn-group .btn span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .driver-hero-card {
        padding: 12px 10px !important;
        border-radius: 14px !important;
        border-width: 1px !important;
        margin-bottom: 8px !important;
    }

    .driver-hero-card h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    .driver-hero-card .fs-5 {
        font-size: 0.84rem !important;
        margin-bottom: 8px !important;
    }

    /* Kompaktare rubrik/badges-rad – mindre luft, mindre text */
    .driver-hero-card .badge.fs-6 {
        font-size: 0.72rem !important;
        padding: 4px 9px !important;
    }

    .driver-hero-card .d-flex.align-items-center.justify-content-center {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    /* Badges-rad (där stoppsiffrorna låg): centrerad, tajt */
    .driver-hero-card .driver-badges-row {
        margin-bottom: 10px !important;
    }

    .driver-hero-card .driver-badges-row .onepage-chip {
        font-size: 0.72rem !important;
    }

    /* Navigera/Ring: mindre marginal under */
    .driver-hero-card .row.g-2.mb-4 {
        margin-bottom: 12px !important;
    }

    /* Kompakt boenderad + notering */
    .driver-housing-line {
        padding: 5px 10px !important;
        margin-bottom: 6px !important;
        font-size: 0.8rem !important;
    }

    /* Uppdragsrad: tajt men läsbar */
    .driver-task-line {
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
        font-size: 0.84rem !important;
        border-radius: 10px !important;
    }

    .driver-notes-box {
        padding: 6px !important;
        margin-bottom: 6px !important;
    }

    .driver-hero-card .fw-bold.small.text-muted.text-uppercase.mb-2 {
        margin-bottom: 4px !important;
    }

    /* Etiketterna "Montörsnotering:" och "Checklista vid installation:"
       lika stora som boende-texten ("Lägenhet"-raden) */
    .driver-hero-card .fw-bold.small.text-muted.text-uppercase {
        font-size: 0.8rem !important;
    }

    .driver-hero-card .driver-checklist-item {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }

    /* Checklistan i klarmarkerings-popupen: stora bockar för tummen */
    #complete-check-overlay .driver-checklist-item {
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
        margin-bottom: 8px !important;
    }

    #complete-check-overlay .form-check-input {
        width: 1.5em !important;
        height: 1.5em !important;
        flex-shrink: 0 !important;
    }

    #btn-confirm-complete {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    /* Klarmarkera: en stor tydlig knapp i mobil */
    .driver-action-stack {
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .driver-action-stack .btn {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 0.88rem !important;
    }

    .driver-simplified .driver-complete-btn {
        min-height: 56px !important;
        font-size: 1.05rem !important;
        border-radius: 14px !important;
    }

    /* QR-knapp samma storlek som Klar-knappen i mobil */
    .btn-qr-primary {
        min-height: 56px !important;
        font-size: 0.95rem !important;
        border-radius: 14px !important;
    }

    .driver-simplified .driver-secondary-row {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .driver-simplified .driver-sticky-action {
        left: 4px !important;
        right: 4px !important;
        bottom: 4px !important;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Fäst fältet RELATIVE KORTET (inte hela overlayn) – så det INTE spänner
       hela skärmen utan vilar exakt under kortet med. Kräver att kortet är
       position:relative i desktop-css. */
    .driver-simplified .driver-sticky-action,
    #overlay-driver .driver-hero-card.driver-simplified {
        position: relative !important;
    }
    .driver-simplified .driver-sticky-action {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #fff !important;
        border-top: 1px solid #e2e8f0 !important;
        border-radius: 0 0 13px 13px !important;
    }

    .driver-hero-card.driver-simplified {
        padding-bottom: 155px !important;
    }

    .driver-simplified .driver-topbar-row {
        font-size: 0.85rem !important;
    }

    /* Fastnålad Föregående/Nästa-rad längst ner i förarvyn */
    .driver-sticky-nav {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
        margin-bottom: -10px !important;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-top: 1px solid #e2e8f0 !important;
        border-radius: 0 0 13px 13px !important;
    }

    .driver-sticky-nav .btn {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 0.88rem !important;
        min-height: 44px !important;
    }

    .driver-action-btn {
        padding: 12px 8px !important;
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
        min-height: 52px !important;
    }

    /* LIFO Packlista i Mobil */
    .packing-step-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    /* --- Onepage Körsedel i Mobil: kortlayout istället för bred A4-tabell --- */
    .onepage-doc-card {
        padding: 12px 10px !important;
        border-radius: 12px !important;
    }

    /* Header: stapla titel + datum, mindre text */
    .onepage-doc-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .onepage-doc-head h3 {
        font-size: 0.98rem !important;
        line-height: 1.25 !important;
    }

    .onepage-doc-head h4 {
        font-size: 1rem !important;
    }

    .onepage-doc-head .text-end {
        text-align: left !important;
    }

    .onepage-summary-chips {
        display: flex !important;
    }

    /* Dölj desktop-tabellen, visa mobilkorten */
    .onepage-table-desktop {
        display: none !important;
    }

    .onepage-mobile-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .onepage-m-card {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-left: 4px solid #0284c7 !important;
        border-radius: 12px !important;
        padding: 10px 11px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    .onepage-m-card.is-paid {
        border-left-color: #10b981 !important;
        background: #f0fdf4 !important;
    }

    .onepage-m-card.onepage-m-lunch {
        border-left-color: #f59e0b !important;
        background: #fffdf5 !important;
    }

    .onepage-m-top {
        display: flex !important;
        align-items: flex-start !important;
        gap: 9px !important;
    }

    .onepage-m-num {
        flex-shrink: 0 !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 8px !important;
        border-radius: 10px !important;
        background: #0284c7 !important;
        color: #fff !important;
        font-weight: 800 !important;
        font-size: 0.85rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .onepage-m-top-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .onepage-m-time {
        font-size: 0.80rem !important;
        font-weight: 800 !important;
        color: #0369a1 !important;
    }

    .onepage-m-addr {
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    .onepage-m-cust,
    .onepage-m-sub {
        font-size: 0.78rem !important;
        color: #64748b !important;
        overflow-wrap: anywhere !important;
    }

    .onepage-m-check {
        flex-shrink: 0 !important;
        width: 26px !important;
        height: 26px !important;
        border: 2px solid #001e62 !important;
        border-radius: 7px !important;
        background: #fff !important;
        margin-top: 2px !important;
    }

    .onepage-m-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-top: 7px !important;
    }

    .onepage-m-badges .onepage-chip {
        font-size: 0.72rem !important;
    }

    .onepage-m-task {
        margin-top: 7px !important;
        padding-top: 7px !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 0.82rem !important;
        color: #334155 !important;
        line-height: 1.4 !important;
    }

    .onepage-m-task i {
        color: #0284c7 !important;
        margin-right: 4px !important;
    }

    .onepage-m-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 9px !important;
    }

    .onepage-m-btn {
        flex: 1 1 110px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    .onepage-m-btn.call {
        background: #dcfce7 !important;
        color: #15803d !important;
        border: 1px solid #bbf7d0 !important;
    }

    .onepage-m-btn.nav {
        background: #e0f2fe !important;
        color: #0369a1 !important;
        border: 1px solid #bae6fd !important;
    }

    .onepage-notes-box {
        height: 70px !important;
    }

    /* Onepage overlay-header: stapla titel + knappar på mobil */
    #overlay-onepage > .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #overlay-onepage > .d-flex.justify-content-between h4 {
        font-size: 1rem !important;
    }
}


/* ==========================================================================
   3. EXTRA SMÅ SKÄRMAR (Max-width: 400px)
   ========================================================================== */
@media (max-width: 400px) {
    .brand-heading span {
        display: none !important;
    }

    .hud-date-input {
        width: 95px !important;
    }

    .btn-view-switch span {
        font-size: 0.68rem !important;
    }

    .btn-view-switch i {
        display: none !important;
    }
}