/* * native-app.css — UI-anpassningar för Pekunia i native-app-läge (Capacitor). * --------------------------------------------------------------------------- * Aktiveras av klassen `is-native-app` på , som sätts av: * 1. fallback-scriptet i base.html (tidigt, via UA-markören "PekuniaNative" * eller window.Capacitor) — ger zero-flash, och * 2. native-bootstrap.js i appen. * `is-native-loggedin` / `is-native-loggedout` speglar auth-state. * * Vanliga webbläsare saknar dessa klasser -> reglerna får INGEN effekt. * * SYFTE: alla native-UI-tweaks ligger HÄR (web-repot) och deployas via vanlig * staging-/prod-deploy. Inga APK-uppdateringar behövs för UI-ändringar. */ /* Marketing-utility-baren (telefon/e-post/"KONTAKTA OSS") döljs i appen. */ html.is-native-app .top-utility-bar { display: none !important; } /* Sidfoten (CTA "Behöver du hjälp..." + legal) är ren marketing -> döljs. */ html.is-native-app body > footer { display: none !important; } /* #site-header är SAMMA element som in-app-navigeringen när man är inloggad (logo + notisklocka + användarmeny + #user-nav). Den är "marketing-header" bara i UTLOGGAT läge (t.ex. /login). Dölj därför hela headern endast då. */ html.is-native-app.is-native-loggedout #site-header { display: none !important; } /* Marketing-menyn (Priser/Vanliga frågor/Blogg) döljs i appen: marketing- hamburgern (#mobile-menu-btn) + dess panel (#mobile-menu) + desktop-länkarna (#nav-links). Användarmenyn behålls oförändrad: burger-ikonen #user-menu-btn (öppnar #user-mobile-menu) samt #user-nav visas som vanligt när inloggad. */ html.is-native-app #mobile-menu-btn, html.is-native-app #mobile-menu, html.is-native-app #nav-links { display: none !important; } /* ─────────────────────────────────────────────────────────────────────────── * DOKUMENT-FLIK — native foto-/fil-upload (Fix 87) * I appen ersätts webb-uppladdningsformulären med två floating-action-buttons * (kamera + gem) som öppnar native kamera / filväljare. Webbformulären döljs: * - .documents-upload-section : drag-drop-zonen + "Ladda upp flersidigt"-knappen * - #inbound-email-info : "Skicka dokument via e-post"-sektionen * ─────────────────────────────────────────────────────────────────────────── */ html.is-native-app .documents-upload-section, html.is-native-app #inbound-email-info { display: none !important; } /* FAB-raden renderas alltid i DOM (case_detail.html) men är dold som default — visas BARA i appen, BARA när Dokument-fliken är aktiv (body.docs-tab-active sätts av _case_native_documents.html). Skanning/filväljare öppnar native UI ovanpå hela skärmen, så FAB:arna behöver inte döljas under tiden. */ .documents-fab-row { display: none; } html.is-native-app body.docs-tab-active .documents-fab-row { position: fixed; /* Ovanför den fasta bottom-navigationen (~72px + safe-area) så Skanna/Filer inte täcker nav-slotsen. */ bottom: calc(96px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 22px; z-index: 10020; } /* När Pekunia Support-chatten är öppen (body.chat-open, sätts av toggleChat i base.html): dölj dokument-FAB:arna helt. De överlappar annars chattens bifoga-/skicka-knappar och förvirrar (chatten har egna). Visas igen när chatten stängs/minimeras. */ html.is-native-app body.docs-tab-active.chat-open .documents-fab-row { display: none; } /* Doelj Skanna/Filer-FAB:arna helt medan onboarding-guiden aer aktiv saa de inte konkurrerar med tour-overlayets highlights/bubblor. Klassen saetts/rensas av startTour/closeTour (_case_js_tour.html, _case_js_estate.html). Gaeller paa baade native-appen och touch-mobil (samma villkor som visnings-regeln). */ body.onboarding-tour-active .documents-fab-row { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Samma bruna/primary cirkel-stil som Tillgångar-FAB:en (#estate-fab-btn): primary-bakgrund + accent-border, 64px cirkel, vit ikon. */ .documents-fab-btn { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--primary, #002733); color: #ffffff; border: 2px solid var(--accent, #d6a600); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 26px; padding: 0; transition: transform 0.2s ease, background 0.2s ease; } .documents-fab-btn:hover, .documents-fab-btn:focus { transform: scale(1.05); background: var(--primary-light, #0a4a5c); outline: 2px solid var(--accent, #d6a600); outline-offset: 3px; } .documents-fab-btn .documents-fab-label { position: absolute; bottom: -22px; font-size: 11px; font-weight: 600; color: var(--primary, #002733); white-space: nowrap; background: rgba(255, 255, 255, 0.9); padding: 1px 8px; border-radius: 8px; pointer-events: none; } /* ─────────────────────────────────────────────────────────────────────────── * AI.pekunia.se — synlighet per plattform (Store-policy). * * ANDROID (html.is-native-android, sätts av base.html-head-scriptet på * UA:n): AI-länkarna VISAS — PT-topup går via Google Play Billing sedan * 2026-07-04 (backend: /api/ai/verify-iap-purchase; Klarna är server- * blockerad för native i /api/ai/topup|subscribe/initiate). * * iOS / övriga natives (is-native-app UTAN is-native-android): fortsatt * helt dolt — App Store-IAP (StoreKit) är inte byggt än, och backend * 403:ar alla /ai/*-routes för native-iOS (se app/api/ai_chat.py). * * Selektorerna är breda men gated på html.is-native-app, så vanlig webb är * opåverkad. .ai-chat-link / .pekunia-ai-cta är konventionella krokar att * sätta på framtida AI-länkar; [href*="ai.pekunia.se"] fångar hårdkodade. * ─────────────────────────────────────────────────────────────────────────── */ html.is-native-app:not(.is-native-android) .ai-chat-link, html.is-native-app:not(.is-native-android) .pekunia-ai-cta, html.is-native-app:not(.is-native-android) [href*="ai.pekunia.se"], html.is-native-app:not(.is-native-android) [href^="https://ai.pekunia.se"], html.is-native-app:not(.is-native-android) [href="/ai-tools/handoff"] { display: none !important; } /* ─────────────────────────────────────────────────────────────────────────── * ADMIN — inte tillgängligt i native-appen. Admin-länken visas bara för * admin/superadmin (renderas i base.html user-menyn). Backend redirectar * /admin* + /api/admin* till dashboard för PekuniaNative-UA (se * app/__init__.py block_native_admin) — detta döljer själva länken så att * superadmins inte ens ser admin-vägen i appen. .admin-nav-link sätts på * länkarna; [href="/admin"] fångar dem oavsett klass. * ─────────────────────────────────────────────────────────────────────────── */ html.is-native-app .admin-nav-link, html.is-native-app [href="/admin"] { display: none !important; } /* ─────────────────────────────────────────────────────────────────────────── * BETAL-TEXTER — service-orienterade formuleringar i native (Store-policy). * Variant A: templaten renderar BÅDA texterna i syskon-spans. Webben visar * .text-web (default), appen visar .text-native. Lås-ikonen (fa-lock / * fa-lock-open) på betalknappen läggs INUTI .text-web så att den döljs i * native på köpet — vilket också uppfyller kravet "ta bort hänglås i appen" * UTAN en bred html.is-native-app .fa-lock-regel (lås används legitimt på * massor av andra ställen: krypterad data, BankID-badge, fältlås i Mitt konto, * checklist-gating m.m. — en global regel skulle dölja alla dessa felaktigt). * ─────────────────────────────────────────────────────────────────────────── */ .text-native { display: none; } html.is-native-app .text-web { display: none; } html.is-native-app .text-native { display: inline; } /* Defensiv, SCOPAD lås-dolning: bara på de faktiska betalknapparna (testamente * + äktenskapsförord = #pay-btn, dashboard nytt-ärende = #btn-pay). Fångar * den ev. kodväg som sätter button.innerHTML utan .text-web-wrappern. INGEN * påverkan på andra fa-lock/fa-lock-open i appen. */ html.is-native-app #pay-btn .fa-lock, html.is-native-app #pay-btn .fa-lock-open, html.is-native-app #pay-btn .fa-unlock, html.is-native-app #btn-pay .fa-lock, html.is-native-app #btn-pay .fa-lock-open, html.is-native-app #btn-pay .fa-unlock { display: none !important; } /* ─────────────────────────────────────────────────────────────────────────── * GEMENSAM NATIVE DOKUMENT-UPLOAD — två-vals-vyn (Ladda upp fil / Skanna). * Används av ALLA upload-punkter i appen (nytt-ärende-wizarden, efterarv- * bouppteckning/arvskifte i arvsberäkningen, Förbered-portalen m.fl.) via * Jinja-makrot `native_upload_choices` resp. window.PekuniaUpload. Drag-drop- * zonen (klass .native-upload-zone) döljs i appen och ersätts av korten * (.native-upload-choices, fyllda av PekuniaUpload). * * Synlighet: * • .native-upload-choices är dold som default → visas bara i native. * • .native-upload-zone döljs i native. * • Ligger korten DIREKT efter en zon som får .hidden (t.ex. medan upload/ * status visas) döljs korten med — sibling-combinatorn återanvänder sidans * befintliga zon-toggling utan extra JS. Fristående kort (JS-modaler utan * adjacent zon) visas alltid i native. * I vanlig webbläsare är .native-upload-choices alltid dold (display:none). * ─────────────────────────────────────────────────────────────────────────── */ .native-upload-choices { display: none; flex-direction: column; gap: 12px; margin-bottom: 1rem; } html.is-native-app .native-upload-choices { display: flex; } html.is-native-app .native-upload-zone { display: none !important; } html.is-native-app .native-upload-zone.hidden + .native-upload-choices { display: none; } html.is-native-app .native-hidden { display: none !important; } .native-upload-choice { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; min-height: 64px; /* tydlig touch-yta (> 48px) */ padding: 14px 16px; border: 2px solid var(--accent, #d6a600); background: var(--bg-beige, #ede8e1); border-radius: 14px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .native-upload-choice:hover, .native-upload-choice:focus { background: #f3eee6; box-shadow: 0 4px 14px rgba(0, 39, 51, 0.12); transform: translateY(-1px); outline: none; } .native-upload-choice:active { transform: scale(0.99); } .native-upload-choice[disabled] { opacity: 0.5; pointer-events: none; } .native-upload-choice-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--primary, #002733); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 20px; } .native-upload-choice-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .native-upload-choice-title { font-weight: 700; color: var(--primary, #002733); font-size: 15px; line-height: 1.25; } .native-upload-choice-sub { font-size: 12.5px; color: #6b6256; margin-top: 2px; line-height: 1.3; } .native-upload-choice-chev { flex: 0 0 auto; color: var(--accent, #d6a600); font-size: 14px; } .native-upload-choice-hint { font-size: 11.5px; color: #9a9285; text-align: center; margin-top: 2px; } /* ─────────────────────────────────────────────────────────────────────────── * APP-HEADER — högre header, större logga, ren burger-meny (Fix 90) * I native vill vi ha en tydligare app-header: högre header-rad, större * Pekunia-logga och en REN hamburgar-ikon för användarmenyn (#user-menu-btn) * i stället för "person-ikon + tre streck". Klick-beteendet är OFÖRÄNDRAT * (öppnar fortfarande #user-mobile-menu = Mina ärenden / Mitt konto / Logga ut) * — bara utseendet byts, helt CSS-drivet. Allt gated på html.is-native-app, så * vanlig webbläsare är opåverkad. * * OBS !important: header-radens höjd (72px), logo-höjden (32px) och ikon- * storlekarna sätts som INLINE-styles i base.html (raden + img + ), samt * att JS sätter knappens display=inline-flex. !important krävs för att vinna * över inline-styles. Scopen är smal (#site-header / #user-menu-btn). * ─────────────────────────────────────────────────────────────────────────── */ /* (a) Högre header-rad — flex-raden bär inline height:72px. ~+22%. */ html.is-native-app #site-header nav .flex.justify-between.items-center { height: 88px !important; } /* (b) Större logga — inline height:32px → 46px (+44%). width:auto bevarar aspect ratio; 46px ryms väl i 88px-raden (≈21px luft över/under). */ html.is-native-app #site-header nav a img { height: 46px !important; width: auto !important; } /* (c) Ren burger-meny: #user-menu-btn blir en cirkulär knapp i EXAKT samma stil och storlek som notisklockan (#pek-notif-btn). Person-ikonen (fa-user-circle) döljs och fa-bars förstoras till klockans ikonstorlek och centreras. */ html.is-native-app #user-menu-btn { width: 3rem !important; height: 3rem !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; background: rgba(255, 255, 255, 0.08) !important; justify-content: center !important; gap: 0 !important; flex-shrink: 0; } html.is-native-app #user-menu-btn .fa-user-circle { display: none !important; } html.is-native-app #user-menu-btn .fa-bars { font-size: 1.3rem !important; opacity: 1 !important; margin-left: 0 !important; } /* (d) Större action-ikoner i den nya större headern (Fix 90c). Bell + burger var 2.1rem-cirklar (33.6px) — för små relativt 88px-headern + 46px-loggan, och under Androids 48dp touch-target-minimum. Båda → 3rem (48px) cirkel med 1.3rem inner-ikon (+~43% cirkel / +30% ikon). #pek-notif-btn-storleken sätts som INLINE-style i base.html → !important krävs. Burgern (ovan) matchar exakt. gap-3 (12px) mellan ikonerna behålls → ingen krock; 48px ryms i 88px-raden. */ html.is-native-app #pek-notif-btn { width: 3rem !important; height: 3rem !important; } html.is-native-app #pek-notif-btn .fa-bell { font-size: 1.3rem !important; } /* (e) Notis-klockan ALLTID i headern (Fix 90d). På webben döljer _notification_center.html den globala header-klockan (#pek-notif-btn) på ärendevyer (/case/...) och låter ärendets action-rad-klocka (#case-notif-btn) ta över → klockan "flyttar sig" när man går in i ett ärende. I native vill vi ha en stabil header: behåll header-klockan + burger ALLTID och ta bort den dubblerade action-rad-klockan. Header-klockans display sätts av JS (inline- flex på icke-case-sidor, lämnas display:none på case-sidor) → !important tvingar fram den även på case-sidor. Klockan är fullt funktionell där: _notification_center.js pollar och uppdaterar .js-notif-badge på ALLA klockor oavsett sida, och #pek-notif-btn har .js-notif-bell (klick→dropdown). Action-radens mail (#case-inbox-btn) + hjälp (?) + ev. chat behålls. */ html.is-native-app.is-native-loggedin #pek-notif-btn { display: inline-flex !important; } html.is-native-app #case-notif-btn { display: none !important; } /* (f) Burger från FÖRSTA FRAME under loading (Fix 90e). Burgern (#user-menu-btn) har klassen `hidden` i base.html och visas först av updateNav() — som körs EFTER `await loadNavPages()` i DOMContentLoaded. Under den asynkrona loading- fasen ("Laddar ärenden…") fanns därför bara klockan (som redan tvingas fram av regel (e) ovan), medan burgern saknades → layout-shift + försvunnen meny. Eftersom is-native-loggedin sätts SYNKRONT av native-bootstrap (samma token/ exp-check som updateNav:s getToken()) vet vi redan att användaren är inloggad → visa burgern direkt. Klick-handlern är redan kopplad vid script-parse (före updateNav), så knappen funkar omedelbart; updateNav uppdaterar bara menyns innehåll senare. Speglar klockans regel (e) → symmetrisk header från start. */ html.is-native-app.is-native-loggedin #user-menu-btn { display: inline-flex !important; } /* (g) Chatt-triggern i headern (#chat-header-slot / #chat-header-btn) i samma 3rem-storlek som bell + burger (Fix 90f, Emil 2026-07-04). Web-CSS:n i base.html sätter 2.1rem (= webbens bell-storlek), men i native förstoras bell + burger till 3rem av reglerna (c)/(d) ovan -> support-avataren såg mindre ut trots att den matchade webbens 2.1rem. Knappen är width/height:100% av slot:en -> bara slot-storleken behöver skalas upp; avatar-bilden fyller hela knappen (object-fit:cover). Flytande läge har egen fast storlek (2.1rem i base.html) -> samma 3rem-override här. Fallback-ikonen (inline font-size:1rem) och gröna online-pricken skalas proportionerligt (jfr bell-ikonen 1rem -> 1.3rem i (d)). */ html.is-native-app #chat-header-slot { width: 3rem !important; height: 3rem !important; } html.is-native-app #chat-header-btn.is-floating { width: 3rem !important; height: 3rem !important; } html.is-native-app #chat-header-btn #chat-header-avatar-fallback .fa-comments { font-size: 1.3rem !important; } html.is-native-app .chat-header-online-dot { width: 13px !important; height: 13px !important; } /* ─────────────────────────────────────────────────────────────────────────── * CHATT — mindre & subtilare STÄNG-knapp i native (Fix 90b) * Chat-toggle-knappen (.chat-toggle-btn, 64px) är BÅDE launcher (avatar, stängd * chatt) OCH stäng-× när chatten är öppen (JS visar #chat-icon-close och sätter * #chat-window till display:flex). I native ligger den nära dokument-FAB:arna * (Skanna/Filer) → lätt att RÅKA stänga chatten när man siktar på en FAB. * * Vi krymper BARA stäng-läget. Det finns ingen state-klass att haka på, men när * chatten är öppen har #chat-window inline `display: flex` → fångas med :has() * (stöds i modern Android System WebView). Launchern (stängd chatt) lämnas helt * orörd. Stäng-knappen blir en liten subtil VIT cirkel med BRUN × (i stället * för stor brun cirkel med vit ×), ~halva FAB-storleken. Endast native. * ─────────────────────────────────────────────────────────────────────────── */ html.is-native-app #chatbot-widget:has(#chat-window[style*="flex"]) .chat-toggle-btn { width: 38px !important; height: 38px !important; background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(0, 39, 51, 0.25) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important; font-size: 1rem !important; } /* Brun × i stället för vit. */ html.is-native-app #chatbot-widget:has(#chat-window[style*="flex"]) #chat-icon-close { color: var(--primary, #002733) !important; } /* Pulse-ringen + status-pricken är dimensionerade för 64px-knappen och blir distraherande/felplacerade på den lilla stäng-knappen → dölj i stäng-läget. */ html.is-native-app #chatbot-widget:has(#chat-window[style*="flex"]) .chat-pulse-ring, html.is-native-app #chatbot-widget:has(#chat-window[style*="flex"]) .chat-status-dot { display: none !important; } /* ─────────────────────────────────────────────────────────────────────────── * SCROLL-INDIKATOR — tunn vertikal progress-pill på höger sida (Fix 90f) * Mobil-vanligt mönster: visar hur långt man scrollat + att det finns mer * innehåll under. Markup + logik ligger i base.html (#pek-scroll-indicator med * .pek-scroll-thumb); JS:en är gated på html.is-native-app och styr display + * .pek-scroll-visible (fade). På webb körs JS:en aldrig → elementet förblir * display:none (inline i base.html) → ingen påverkan. * * Spår (#pek-scroll-indicator): smal bg-bar centrerad vertikalt till höger som * visar full skala. Pillen (.pek-scroll-thumb) åker längs den via translateY. * z-index 800 → ovanpå case-content men under modaler/FAB:ar (chat 9999, * dok-FAB:ar 10020). pointer-events:none → blockerar aldrig touch. opacity- * fade ger det subtila auto-göm-beteendet. ─────────────────────────────────── */ html.is-native-app #pek-scroll-indicator { position: fixed; right: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 40vh; max-height: 300px; min-height: 140px; background: rgba(0, 0, 0, 0.06); border-radius: 4px; z-index: 800; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } html.is-native-app #pek-scroll-indicator.pek-scroll-visible { opacity: 0.7; } html.is-native-app #pek-scroll-indicator .pek-scroll-thumb { position: absolute; top: 0; left: 0; width: 4px; height: 60px; border-radius: 4px; background: var(--accent, #d6a600); will-change: transform; }