/* ============================================================================ * mobile-shell.css – Phone-first single-view shell with bottom nav. * * Activates only when has class `mob-shell` (added by mobile-shell.js * on viewports ≤760px). Renders: * - #mob-topbar : compact top bar (logo + avatar) * - #mob-tabswitch : "Panel diagnostyczny / ICD-11 API" pill (existing kl-tabs reused) * - #mob-bottomnav : 5-slot bottom nav with center search FAB * - #mob-search : full-screen tree-search overlay * - #mob-konto : "Więcej / Konto" bottom sheet * * Tabs: body class `mob-tab-{klasyfikacja|roznicowanie|konto}` controls which * app section is visible. "Pulpit" = nav-only (links to /pl/landing). * "Lupa" (center FAB) opens search overlay over current tab without changing it. * Search result selection lands on klasyfikacja with drawer overlaying ICD tree. * Diagnoza tab removed (May 2026) – drawer now overlays klasyfikacja directly. * Legacy `mob-tab-diagnoza` CSS rules retained for any external setTab callers. * ============================================================================ */ /* ============================================================================ * MOBILE FORCE LIGHT MODE – neutralize any leftover dark-mode visuals on phones. * Backstops mobile-force-light.js (which strips dark-mode body class on mobile); * even if a stray script adds dark-mode mid-render, these selectors keep * surfaces light. Applies regardless of mob-shell so it works on every page. * ============================================================================ */ @media (max-width: 760px) { /* Force light color-scheme so UA-themed controls (scrollbars, form inputs, selection) render in light variant. */ html, body { color-scheme: light !important; } /* If dark-mode class somehow survives JS strip, bg + text stay light. */ body.dark-mode { background: #ffffff !important; color: #0f172a !important; } /* Hide all dark/light toggle buttons on mobile – feature unavailable here. */ body #dark-switch, body .dark-mode-toggle, body .ios-switch[onclick*="toggleDarkMode"], body [data-toggle="dark-mode"], body .layer-item.switch-row:has(#dark-switch), body .layer-item:has([onclick*="toggleDarkMode"]) { display: none !important; } } /* Mobile slide-over scaffolding – hidden by default, surfaced inside the mobile media query for body.mob-shell.mob-tab-diagnoza. */ .mob-slide-fab, .mob-slide-backdrop { display: none; } @media (max-width: 760px) { body.mob-shell { padding-top: 56px !important; /* clear top bar */ /* Bottom nav is 76px – add 20px clearance buffer so last item isn't flush against the nav. Final pad = 96px + safe-area-inset (iOS notch/home-bar). */ padding-bottom: 96px !important; padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; background: #f6f8fc; /* Single body scroll – kill any inner container scroll that would cause double-scrollbar. Slide-over panels (#drawer, #left) re-enable their own overflow via more specific selectors below. */ overflow-x: hidden !important; } /* Main view containers – let body own the scroll. Without these, desktop rules like `#right{min-height:calc(100vh-80px)}` paired with internal overflow on children created a nested scroll context on mobile. */ body.mob-shell #right, body.mob-shell #diagnosis-view, body.mob-shell #differential-view, body.mob-shell #kl-layout, body.mob-shell #kl-center, body.mob-shell #kl-content, body.mob-shell .welcome-hero { overflow: visible !important; height: auto !important; max-height: none !important; } /* Page brings its own topbar – shell skips topbar render. Padding-top owned by the page's mobile CSS (e.g. classification.html sets its own height). */ body.mob-shell.mob-shell-no-topbar { padding-top: 0 !important; } /* Extra top padding when tabswitch pill is visible (Klasyfikacja only) */ body.mob-shell.mob-tab-klasyfikacja { padding-top: 106px !important; padding-top: calc(106px + env(safe-area-inset-top)) !important; } body.mob-shell.dark-mode { background: #0f1018; } /* === Hide elements that conflict with mobile shell === */ body.mob-shell #topbar, body.mob-shell #qs-toggle, body.mob-shell #tree-toggle-ribbon, body.mob-shell #help-fab, body.mob-shell .help-fab { display: none !important; } /* Suppress mobile.css conflicts: backdrop, body scroll-lock, drawer slide-out */ body.mob-shell::before { content: none !important; } body.mob-shell.drawer-open-mobile { position: static !important; overflow: auto !important; } body.mob-shell.mob-tab-diagnoza #drawer:not(.closed), body.mob-shell.mob-tab-diagnoza #drawer.closed, body.mob-shell.mob-tab-klasyfikacja #drawer:not(.closed), body.mob-shell.mob-tab-klasyfikacja #drawer.closed { right: auto !important; left: auto !important; transform: none !important; } /* === Top bar === */ #mob-topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 14px; padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); background: #ffffff; border-bottom: 1px solid rgba(15,23,42,0.06); box-shadow: 0 1px 3px rgba(15,23,42,0.04); display: none; align-items: center; justify-content: space-between; gap: 10px; z-index: 9000; } body.mob-shell #mob-topbar { display: flex; } body.mob-shell.dark-mode #mob-topbar { background: #161825; border-bottom-color: rgba(96,165,250,0.16); box-shadow: 0 1px 4px rgba(0,0,0,0.4); } .mob-topbar-logo { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; flex-shrink: 0; } .mob-topbar-logo-img { height: 32px; width: auto; display: block; } /* Dark mode: boost brightness + saturation so purple gradient logo reads against dark topbar background (#161825). Filter is cheap + reversible. */ body.mob-shell.dark-mode .mob-topbar-logo-img { filter: brightness(1.25) saturate(1.15); } /* Legacy text-logo spans (kept for any straggler page) – hide if present. */ .mob-topbar-logo-icd, .mob-topbar-logo-plus { display: none; } .mob-topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.22); color: #7c3aed; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; flex-shrink: 0; } .mob-topbar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } body.mob-shell.dark-mode .mob-topbar-avatar { background: rgba(167,139,250,0.16); border-color: rgba(167,139,250,0.35); color: #c4b5fd; } /* === "Powrót do menu" button – always visible in fixed topbar so user can return to main menu from any tab. Stays right-aligned, visible during scroll. === */ .mob-topbar-back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 9px 12px; height: 38px; border-radius: 999px; background: linear-gradient(135deg,#7c3aed,#8b5cf6); border: none; color: #ffffff; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; letter-spacing: -0.01em; box-shadow: 0 4px 12px rgba(124,58,237,0.28); flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .mob-topbar-back:active { transform: scale(0.97); box-shadow: 0 2px 6px rgba(124,58,237,0.22); } .mob-topbar-back svg { flex-shrink: 0; } body.mob-shell.dark-mode .mob-topbar-back { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow: 0 4px 12px rgba(167,139,250,0.32); } /* On konto tab: hide avatar (back-to-menu is the action). Other tabs: show both. */ body.mob-shell.mob-tab-konto .mob-topbar-avatar { display: none; } /* === Tab switch pill (Panel diagnostyczny / ICD-11 API) === */ #mob-tabswitch { position: fixed; top: 56px; top: calc(56px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 8990; background: #ffffff; border-bottom: 1px solid rgba(15,23,42,0.06); display: none; padding: 8px 12px 0; } body.mob-shell.mob-tab-klasyfikacja #mob-tabswitch { display: block; } body.mob-shell.dark-mode #mob-tabswitch { background: #161825; border-bottom-color: rgba(96,165,250,0.16); } .mob-tabswitch-row { display: flex; gap: 0; border-bottom: 1px solid #e2e8f0; } body.mob-shell.dark-mode .mob-tabswitch-row { border-bottom-color: rgba(96,165,250,0.18); } .mob-tabswitch-btn { flex: 1; background: transparent; border: 0; padding: 16px 10px 18px; min-height: 52px; font-family: inherit; font-size: 15px; font-weight: 600; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: color 0.15s, border-color 0.15s; -webkit-tap-highlight-color: rgba(124,58,237,0.10); } .mob-tabswitch-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .mob-tabswitch-btn[data-mob-source="local"].active { color: #7c3aed; border-bottom-color: #7c3aed; } .mob-tabswitch-btn[data-mob-source="api"].active { color: #2563eb; border-bottom-color: #2563eb; } /* === Single-view layout: hide everything except current tab === */ body.mob-shell #app { display: block !important; min-height: 0 !important; } /* Klasyfikacja tab – mobile UX: - #kl-center is the main visible card (single-column disorder description) - #left (ICD tree) is hidden by default and slides in from LEFT via FAB - Bottom search FAB (#mob-nav-fab) opens search; result → drawerAPI.showDisorder which renders into #kl-center (existing klDisplay flow). */ body.mob-shell.mob-tab-klasyfikacja #right, body.mob-shell.mob-tab-klasyfikacja #differential-view, body.mob-shell.mob-tab-klasyfikacja #patient-panel, body.mob-shell.mob-tab-klasyfikacja #patient-panel-topbar, body.mob-shell.mob-tab-klasyfikacja #diagnosis-view { display: none !important; } /* #kl-layout was flex with desktop padding-top:80; mobile mob-shell already pads body padding-top:56, drop the redundant offset and let center own full width. */ body.mob-shell.mob-tab-klasyfikacja{ padding-top: 56px !important; } body.mob-shell.mob-tab-klasyfikacja #kl-layout{ display: block !important; /* Match body padding (56 top + 96 bottom buffer) so layout reserves the full visible viewport area between topbar and bottom-nav clearance. */ min-height: calc(100vh - 56px - 96px) !important; } /* CENTER – single visible card on mobile (override desktop margin-left:430) */ body.mob-shell.mob-tab-klasyfikacja #kl-center{ display: flex !important; flex-direction: column !important; width: 100% !important; margin-left: 0 !important; padding: 0 !important; min-height: 0 !important; } body.mob-shell.mob-tab-klasyfikacja #kl-content{ /* tabswitch fixed (~50px) sits below 56px topbar – pad top so card breathes like desktop and isn't crammed under the pill. */ padding: 64px 12px 12px 12px !important; } /* Disorder grid – single column (parent OR child shown one at a time) */ body.mob-shell.mob-tab-klasyfikacja #kl-disorder-grid{ grid-template-columns: 1fr !important; gap: 12px !important; } body.mob-shell.mob-tab-klasyfikacja .kl-grid-col{ width: 100% !important; } /* ICD tree – slide-over from LEFT, hidden by default */ body.mob-shell.mob-tab-klasyfikacja #left{ position: fixed !important; top: 56px !important; left: 0 !important; bottom: 76px !important; width: 92% !important; max-width: 480px !important; height: auto !important; min-height: 0 !important; z-index: 9999 !important; background: #ffffff !important; box-shadow: 4px 0 30px rgba(0,0,0,0.4) !important; transform: translateX(-100%) !important; transition: transform 0.3s cubic-bezier(.2,.8,.2,1) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 0 !important; border: 0 !important; } body.mob-shell.mob-tab-klasyfikacja.mob-slide-tree-open #left{ transform: translateX(0) !important; } body.dark-mode.mob-shell.mob-tab-klasyfikacja #left{ background: #161825 !important; } /* FAB tree button + backdrop on klasyfikacja tab (reuses mob-slide-fab) */ body.mob-shell.mob-tab-klasyfikacja .mob-slide-fab{ position: fixed; bottom: 88px; z-index: 9998; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: #fff; border: none; border-radius: 999px; font: 600 12px/1 'Inter', system-ui, sans-serif; box-shadow: 0 6px 20px rgba(124,58,237,0.45); cursor: pointer; } body.mob-shell.mob-tab-klasyfikacja #mob-fab-tree-kl{ left: 12px; } body.mob-shell.mob-tab-klasyfikacja #mob-fab-drawer-kl{ display: none; } body.mob-shell.mob-tab-klasyfikacja.mob-slide-tree-open #mob-fab-tree-kl{ transform: translateY(80px); opacity: 0; pointer-events: none; } body.mob-shell.mob-tab-klasyfikacja .mob-slide-backdrop{ position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity 0.25s; } body.mob-shell.mob-tab-klasyfikacja.mob-slide-tree-open .mob-slide-backdrop{ opacity: 1; pointer-events: auto; } /* Drawer overlays the ICD tree on klasyfikacja tab when user picks a node (replaces former diagnoza tab). Closed drawer hidden; open drawer covers the full content area between topbar+tabswitch and bottom-nav. */ body.mob-shell.mob-tab-klasyfikacja #drawer.closed { display: none !important; } body.mob-shell.mob-tab-klasyfikacja #drawer:not(.closed) { position: fixed !important; top: 106px; top: calc(106px + env(safe-area-inset-top)); bottom: 76px; bottom: calc(76px + env(safe-area-inset-bottom)); left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #ffffff !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; z-index: 9500 !important; padding: 12px !important; } body.mob-shell.dark-mode.mob-tab-klasyfikacja #drawer:not(.closed) { background: #161825 !important; } body.mob-shell.mob-tab-klasyfikacja #drawer-overlay { display: none !important; } /* Drawer close-X must remain clickable above content */ body.mob-shell.mob-tab-klasyfikacja #drawer-close-x { display: inline-flex !important; position: sticky; top: 4px; margin-left: auto; z-index: 9510; } /* Diagnoza tab: middle (#diagnosis-view) only. #left (ICD tree) and #drawer (Panel diagnostyczny) are hidden by default and slide in as full-height overlays via FAB buttons (#mob-fab-tree / #mob-fab-drawer). */ body.mob-shell.mob-tab-diagnoza #right { display: flex !important; width: 100% !important; padding: 12px 12px 80px !important; } /* ICD tree – slide-over from LEFT */ body.mob-shell.mob-tab-diagnoza #left { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 92% !important; max-width: 480px !important; height: 100% !important; z-index: 9999 !important; background: #ffffff !important; box-shadow: 0 0 40px rgba(0,0,0,0.4) !important; transform: translateX(-100%) !important; transition: transform 0.3s cubic-bezier(.2,.8,.2,1) !important; display: block !important; margin: 0 !important; overflow-y: auto !important; padding: 16px !important; } body.mob-shell.mob-tab-diagnoza.mob-slide-tree-open #left { transform: translateX(0) !important; } /* Drawer (Panel diagnostyczny / Opis zaburzeń) – slide-over from RIGHT */ body.mob-shell.mob-tab-diagnoza #drawer { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; width: 92% !important; max-width: 480px !important; height: 100% !important; z-index: 9999 !important; background: #ffffff !important; box-shadow: 0 0 40px rgba(0,0,0,0.4) !important; transform: translateX(100%) !important; transition: transform 0.3s cubic-bezier(.2,.8,.2,1) !important; display: block !important; margin: 0 !important; padding: 16px !important; overflow-y: auto !important; border: 0 !important; } body.mob-shell.mob-tab-diagnoza.mob-slide-drawer-open #drawer { transform: translateX(0) !important; } /* Hide drawer-overlay, differential, patient panels in diagnoza */ body.mob-shell.mob-tab-diagnoza #drawer-overlay, body.mob-shell.mob-tab-diagnoza #differential-view, body.mob-shell.mob-tab-diagnoza #patient-panel, body.mob-shell.mob-tab-diagnoza #patient-panel-topbar { display: none !important; } /* Dark mode bg for slide-over panels */ body.dark-mode.mob-shell.mob-tab-diagnoza #left, body.dark-mode.mob-shell.mob-tab-diagnoza #drawer { background: #161825 !important; } /* FAB buttons – left/right floating triggers above bottom nav */ body.mob-shell.mob-tab-diagnoza .mob-slide-fab { position: fixed; bottom: 76px; z-index: 9998; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: #fff; border: none; border-radius: 999px; font: 600 12px/1 'Inter', system-ui, sans-serif; box-shadow: 0 6px 20px rgba(124,58,237,0.45); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.18s, box-shadow 0.18s; } body.mob-shell.mob-tab-diagnoza .mob-slide-fab:active { transform: scale(0.95); } body.mob-shell.mob-tab-diagnoza #mob-fab-tree { left: 12px; } body.mob-shell.mob-tab-diagnoza #mob-fab-drawer { right: 12px; } /* Hide FAB on the active side when its panel is open */ body.mob-shell.mob-tab-diagnoza.mob-slide-tree-open #mob-fab-tree, body.mob-shell.mob-tab-diagnoza.mob-slide-drawer-open #mob-fab-drawer { transform: translateY(80px); opacity: 0; pointer-events: none; } /* Slide-over backdrop */ body.mob-shell.mob-tab-diagnoza .mob-slide-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity 0.25s; } body.mob-shell.mob-tab-diagnoza.mob-slide-tree-open .mob-slide-backdrop, body.mob-shell.mob-tab-diagnoza.mob-slide-drawer-open .mob-slide-backdrop { opacity: 1; pointer-events: auto; } /* Drawer-close-x usable on mobile when drawer slid in */ body.mob-shell.mob-tab-diagnoza #drawer-close-x { display: inline-flex !important; } /* ==================================================================== MOBILE DIAGNOZA – sekcje jako wyraźne kwadraty/cards. Każda sekcja: full-width, rounded, padded, separated by gap. ==================================================================== */ body.mob-shell.mob-tab-diagnoza #diagnosis-view { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } /* Card 1 – symptom input + tags */ body.mob-shell.mob-tab-diagnoza #symptom-box { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; padding: 14px !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; margin: 0 !important; } body.mob-shell.mob-tab-diagnoza #symptom-box .symptom-input-wrap input, body.mob-shell.mob-tab-diagnoza #symptoms { font-size: 13px !important; } /* "Uwzględnij filtry" row – sit inside symptom card visually */ body.mob-shell.mob-tab-diagnoza .symptom-action-row { margin-top: 8px !important; padding: 0 !important; } body.mob-shell.mob-tab-diagnoza .filter-trigger-btn { font-size: 12px !important; padding: 7px 14px !important; height: 34px !important; } /* Card 2 – numbered cards (czas trwania + epizody) – vertical stack */ body.mob-shell.mob-tab-diagnoza #numbered-cards { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; padding: 12px !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 !important; border-bottom: 1px solid #e5e7eb !important; } body.mob-shell.mob-tab-diagnoza .nc-card { padding: 10px 12px !important; gap: 8px !important; } body.mob-shell.mob-tab-diagnoza .nc-title { font-size: 13px !important; } body.mob-shell.mob-tab-diagnoza .nc-pill-btn { min-height: 36px !important; font-size: 12.5px !important; padding: 8px 14px !important; } body.mob-shell.mob-tab-diagnoza .nc-num { width: 24px !important; height: 24px !important; font-size: 12px !important; } /* Card 3 – diagnoses results / lock state */ body.mob-shell.mob-tab-diagnoza .diagnoses-card { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; padding: 14px !important; margin: 0 !important; box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; } /* Dark mode equivalents */ body.dark-mode.mob-shell.mob-tab-diagnoza #symptom-box, body.dark-mode.mob-shell.mob-tab-diagnoza #numbered-cards, body.dark-mode.mob-shell.mob-tab-diagnoza .diagnoses-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(96,165,250,0.18) !important; box-shadow: none !important; } /* Różnicowanie tab: show only #differential-view */ body.mob-shell.mob-tab-roznicowanie #left, body.mob-shell.mob-tab-roznicowanie #right, body.mob-shell.mob-tab-roznicowanie #drawer, body.mob-shell.mob-tab-roznicowanie #drawer-overlay, body.mob-shell.mob-tab-roznicowanie #diagnosis-view, body.mob-shell.mob-tab-roznicowanie #patient-panel, body.mob-shell.mob-tab-roznicowanie #patient-panel-topbar { display: none !important; } body.mob-shell.mob-tab-roznicowanie #differential-view { display: block !important; width: 100% !important; padding: 8px 8px 80px !important; background: #f5f8ff !important; color: #0f172a !important; min-height: calc(100vh - 56px - 60px) !important; } /* Force light bg on body for differential tab — overrides any stale dark-mode class that mobile-force-light did not strip fast enough. */ body.mob-shell.mob-tab-roznicowanie { background: #f5f8ff !important; color: #0f172a !important; } /* Hide user/account avatar icon in topbar on differential tab — user explicit: tylko Powrót do menu + logo. */ body.mob-shell.mob-tab-roznicowanie #mob-topbar-avatar { display: none !important; } /* === Wizard cards on mobile – full-width, smaller padding, touch-friendly === */ body.mob-shell .wiz { padding: 14px 14px 18px !important; margin: 0 !important; border-radius: 14px !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } /* Stepper – compact: smaller circles, hide labels under <380px width */ body.mob-shell .wiz-stepper { gap: 0 !important; padding: 0 !important; margin-bottom: 14px !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.mob-shell .wiz-stepper::-webkit-scrollbar { display: none; } body.mob-shell .wiz-step { min-width: 52px !important; gap: 4px !important; flex: 0 0 auto !important; } body.mob-shell .wiz-step-circle { width: 26px !important; height: 26px !important; font-size: 11.5px !important; } body.mob-shell .wiz-step-line { margin-top: 12px !important; min-width: 10px; } body.mob-shell .wiz-step-label { font-size: 10.5px !important; max-width: 60px !important; line-height: 1.2 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Step header – tighter */ body.mob-shell .wiz-step-counter { font-size: 10px !important; margin-bottom: 4px !important; } body.mob-shell .wiz-step-h2 { font-size: 16px !important; margin: 0 0 4px !important; line-height: 1.25 !important; } body.mob-shell .wiz-step-sub { font-size: 12.5px !important; margin: 0 0 14px !important; line-height: 1.45 !important; } /* Option rows – full-width, touch padding, no decorative icons */ body.mob-shell .wiz-row { padding: 12px 14px !important; gap: 10px !important; border-radius: 12px !important; } body.mob-shell .wiz-radio, body.mob-shell .wiz-check { padding: 12px 14px !important; border-radius: 12px !important; gap: 10px !important; } /* Y/N buttons – stack vertically on narrow viewports */ body.mob-shell .wiz-yn-row { flex-direction: column !important; gap: 8px !important; } body.mob-shell .wiz-yn-btn { padding: 12px 14px !important; font-size: 13px !important; flex: 1 1 100% !important; width: 100% !important; justify-content: center; } body.mob-shell .wiz-radio-icon, body.mob-shell .wiz-check-icon { display: none !important; } body.mob-shell .wiz-radio-text, body.mob-shell .wiz-check-text { min-width: 0; flex: 1; } body.mob-shell .wiz-radio-title, body.mob-shell .wiz-check-title { font-size: 13.5px !important; } body.mob-shell .wiz-radio-sub, body.mob-shell .wiz-check-sub { font-size: 12px !important; } /* Nav – sticky bottom, larger tap targets */ body.mob-shell .wiz-nav { position: sticky; bottom: 0; background: #fff; padding: 10px 0 !important; margin-top: 10px !important; border-top: 1px solid #f1f5f9 !important; gap: 8px !important; } body.mob-shell.dark-mode .wiz-nav { background: #161825; border-top-color: rgba(96,165,250,0.18) !important; } body.mob-shell .wiz-btn { padding: 12px 14px !important; font-size: 13px !important; border-radius: 10px !important; flex: 1 1 auto !important; justify-content: center; } body.mob-shell .wiz-nav-left { gap: 6px !important; flex: 1; } body.mob-shell .wiz-btn-secondary { flex: 0 0 auto !important; padding: 12px !important; } body.mob-shell .wiz-btn-secondary span:not(.wiz-icon) { display: none; } /* hide "Anuluj i wyjdź" text – keep only icon ✕ */ /* Hint card – compact */ body.mob-shell .wiz-hint { padding: 10px 12px !important; margin: 8px 0 !important; font-size: 12px !important; } body.mob-shell .wiz-hint-icon { width: 28px !important; height: 28px !important; } /* Result card */ body.mob-shell .wiz-result-card { padding: 16px 14px !important; border-radius: 14px !important; } /* Empty hero – keep it readable on mobile */ body.mob-shell .diff-empty-hero { padding: 24px 12px 14px !important; } body.mob-shell .diff-empty-title { font-size: 17px !important; } body.mob-shell .diff-empty-sub { font-size: 13px !important; line-height: 1.55 !important; } body.mob-shell .diff-empty-illustration svg { width: 140px !important; height: 110px !important; } body.mob-shell .diff-search-card { padding: 14px !important; } body.mob-shell .diff-empty-card { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } body.mob-shell .diff-empty-card .dec-icon { display: none !important; } /* Reset button (persistent in differential view) – touch-friendly */ body.mob-shell .diff-reset-bar { padding: 10px 4px 4px !important; } body.mob-shell .diff-reset-btn { padding: 8px 14px !important; font-size: 13px !important; } /* Konto tab: show konto sheet, hide all app */ body.mob-shell.mob-tab-konto #left, body.mob-shell.mob-tab-konto #right, body.mob-shell.mob-tab-konto #drawer, body.mob-shell.mob-tab-konto #drawer-overlay, body.mob-shell.mob-tab-konto #differential-view, body.mob-shell.mob-tab-konto #diagnosis-view, body.mob-shell.mob-tab-konto #patient-panel, body.mob-shell.mob-tab-konto #patient-panel-topbar { display: none !important; } /* === Konto sheet === */ #mob-konto { display: none; padding: 16px 14px 20px; } body.mob-shell.mob-tab-konto #mob-konto { display: block; } .mob-konto-card { background: #ffffff; border-radius: 14px; padding: 16px; box-shadow: 0 1px 3px rgba(15,23,42,0.06); margin-bottom: 12px; } body.mob-shell.dark-mode .mob-konto-card { background: #161825; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .mob-konto-user { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; margin-bottom: 12px; } body.mob-shell.dark-mode .mob-konto-user { border-bottom-color: rgba(96,165,250,0.16); } .mob-konto-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#7c3aed,#a78bfa); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; overflow: hidden; } .mob-konto-avatar img { width:100%; height:100%; object-fit:cover; } .mob-konto-user-meta { flex: 1; min-width: 0; } .mob-konto-name { font-size: 15px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.mob-shell.dark-mode .mob-konto-name { color: #f1f5f9; } .mob-konto-email { font-size: 12.5px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.mob-shell.dark-mode .mob-konto-email { color: #94a3b8; } .mob-konto-list { display: flex; flex-direction: column; gap: 2px; } .mob-konto-item { display: flex; align-items: center; gap: 12px; padding: 13px 8px; border-radius: 10px; color: #0f172a; text-decoration: none; cursor: pointer; transition: background 0.15s; font-size: 14px; font-weight: 500; background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; } .mob-konto-item:hover { background: #f5f3ff; } body.mob-shell.dark-mode .mob-konto-item { color: #e2e8f0; } body.mob-shell.dark-mode .mob-konto-item:hover { background: rgba(124,58,237,0.14); } .mob-konto-item-icon { width: 36px; height: 36px; border-radius: 10px; background: #f5f3ff; color: #7c3aed; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.mob-shell.dark-mode .mob-konto-item-icon { background: rgba(124,58,237,0.18); color: #c4b5fd; } .mob-konto-item.danger { color: #dc2626; } .mob-konto-item.danger .mob-konto-item-icon { background: rgba(220,38,38,0.10); color: #dc2626; } body.mob-shell.dark-mode .mob-konto-item.danger { color: #fca5a5; } .mob-konto-item-arrow { margin-left: auto; color: #cbd5e1; font-size: 18px; line-height: 1; } /* === Bottom nav === */ #mob-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; height: 76px; padding-bottom: env(safe-area-inset-bottom); background: #ffffff; border-top: 1px solid rgba(15,23,42,0.08); box-shadow: 0 -2px 10px rgba(15,23,42,0.04); display: none; align-items: stretch; justify-content: space-around; z-index: 9000; } body.mob-shell #mob-bottomnav { display: flex; } body.mob-shell.dark-mode #mob-bottomnav { background: #161825; border-top-color: rgba(96,165,250,0.16); box-shadow: 0 -2px 12px rgba(0,0,0,0.4); } .mob-nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: 0; color: #94a3b8; font-family: inherit; font-size: 10.5px; font-weight: 500; cursor: pointer; padding: 10px 4px 8px; min-height: 48px; transition: color 0.15s; position: relative; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mob-nav-tab:active { background: rgba(124,58,237,0.08); } .mob-nav-tab svg { width: 22px; height: 22px; stroke-width: 1.8; transition: transform 0.15s; } .mob-nav-tab.active { color: #7c3aed; } .mob-nav-tab.active svg { stroke-width: 2.2; } body.mob-shell.dark-mode .mob-nav-tab { color: #64748b; } body.mob-shell.dark-mode .mob-nav-tab.active { color: #c4b5fd; } /* Center FAB */ .mob-nav-fab-wrap { flex: 0 0 auto; width: 76px; display: flex; align-items: center; justify-content: center; position: relative; } .mob-nav-fab { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#7c3aed,#6d28d9); color: #fff; border: 0; box-shadow: 0 6px 20px rgba(124,58,237,0.36); cursor: pointer; display: flex; align-items: center; justify-content: center; transform: translateY(-14px); transition: transform 0.15s, box-shadow 0.15s; } .mob-nav-fab:active { transform: translateY(-12px) scale(0.94); } .mob-nav-fab svg { width: 24px; height: 24px; stroke-width: 2.2; } /* === Search overlay === */ #mob-search { position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); display: none; flex-direction: column; padding: env(safe-area-inset-top) 0 0; } #mob-search.open { display: flex; } body.mob-shell.dark-mode #mob-search { background: rgba(0,0,0,0.65); } .mob-search-card { background: #ffffff; border-radius: 0 0 18px 18px; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; max-height: 100%; box-shadow: 0 12px 32px rgba(15,23,42,0.18); } body.mob-shell.dark-mode .mob-search-card { background: #161825; box-shadow: 0 12px 32px rgba(0,0,0,0.5); } .mob-search-bar { display: flex; align-items: center; gap: 8px; } .mob-search-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px 0 38px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m21 21-4.5-4.5'/%3E%3C/svg%3E") no-repeat 12px center; font-family: inherit; font-size: 16px; color: #0f172a; outline: none; } .mob-search-input:focus { border-color: #a78bfa; background-color: #fff; box-shadow: 0 0 0 3px rgba(167,139,250,0.18); } body.mob-shell.dark-mode .mob-search-input { background-color: rgba(255,255,255,0.04); border-color: rgba(96,165,250,0.20); color: #e2e8f0; } .mob-search-cancel { background: transparent; border: 0; font-family: inherit; font-size: 14px; font-weight: 600; color: #7c3aed; cursor: pointer; padding: 0 8px; } body.mob-shell.dark-mode .mob-search-cancel { color: #c4b5fd; } .mob-search-results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px; } .mob-search-empty { padding: 32px 16px; text-align: center; color: #94a3b8; font-size: 13px; } .mob-search-result { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 10px; cursor: pointer; transition: background 0.15s; } .mob-search-result:hover { background: #f5f3ff; } body.mob-shell.dark-mode .mob-search-result:hover { background: rgba(124,58,237,0.14); } .mob-search-result-code { font-size: 11px; font-weight: 700; color: #7c3aed; background: #f5f3ff; padding: 3px 7px; border-radius: 5px; flex-shrink: 0; } body.mob-shell.dark-mode .mob-search-result-code { background: rgba(124,58,237,0.20); color: #c4b5fd; } .mob-search-result-name { flex: 1; min-width: 0; font-size: 13.5px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.mob-shell.dark-mode .mob-search-result-name { color: #cbd5e1; } } @media (min-width: 761px) { /* Above breakpoint: shell never renders even if class accidentally on body */ #mob-topbar, #mob-bottomnav, #mob-search, #mob-konto, #mob-tabswitch { display: none !important; } }