/* * Plik: style-mobile.css (Wersja zoptymalizowana z "Tarczą Ochronną") * Ładowane przez dodanie klasy .is-mobile na tagu przez boot.js */ body.is-mobile { background-color: var(--bg-color); color: var(--text-color); flex-direction: column; overflow-x: hidden !important; /* TARCZA */ overflow-y: hidden; height: 100%; width: 100% !important; /* TARCZA: Wymuszenie pełnej szerokości */ margin: 0 !important; /* TARCZA */ padding: 0 !important; /* TARCZA */ } body.is-mobile #sidebar, body.is-mobile #top-bar { display: none !important; /* TARCZA: Bezwzględne ukrycie elementów desktopowych */ } /* ========================================================= */ /* 1. KONTENER 1: Pasek dolny */ /* ========================================================= */ body.is-mobile #bottom-nav { display: flex; position: fixed; bottom: 0; left: 0 !important; /* TARCZA */ width: 100% !important; /* TARCZA */ height: calc(85px + env(safe-area-inset-bottom)); background-color: var(--bg-color); border: none; border-top: 1px solid var(--border-color); padding: 10px 10px env(safe-area-inset-bottom) 10px; gap: 8px; align-items: center; justify-content: space-evenly; z-index: 9999; box-sizing: border-box; box-shadow: 0 -4px 10px rgba(0,0,0,0.05); transform: none !important; /* TARCZA: Ochrona przed animacjami z desktopu */ } body.is-mobile .nav-item { background-color: transparent; color: var(--text-color); border-radius: 20px; height: 65px; width: 100%; max-width: 80px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s; padding: 0; margin: 0; border: none; outline: none; -webkit-tap-highlight-color: transparent; } body.is-mobile .nav-item:focus, body.is-mobile .nav-item:active { outline: none; } body.is-mobile .nav-item.active { background-color: var(--sidebar-btn-active); transform: translateY(4px); box-shadow: 0 0 0 var(--shadow-color); } body.is-mobile:not(.dark) .nav-item.active, body.is-mobile:not(.dark) .nav-item.active .nav-icon { color: #ffffff; } body.is-mobile .nav-item .nav-icon { font-size: 1.6rem; margin: 0 0 3px 0; } body.is-mobile .nav-item .nav-text { font-size: 0.75rem; font-weight: 700; display: block; white-space: nowrap; } body.is-mobile.dark #bottom-nav { background-color: var(--bg-color); border-top-color: #2a4b9e; } body.is-mobile.dark .nav-item { color: #e2e8f0; } body.is-mobile.dark .nav-item.active { background-color: var(--special-border, #38bdf8); color: #0f172a; } /* ========================================================= */ /* KONTENER GŁÓWNY (Wrapper dla Kontenera 2) */ /* ========================================================= */ body.is-mobile #main-content-area { position: fixed; top: 0; bottom: 85px; left: 0 !important; /* TARCZA */ width: 100% !important; /* TARCZA */ height: calc(100vh - 85px); margin: 0 !important; /* TARCZA */ padding: 0; overflow: hidden; display: flex; flex-direction: column; background-color: var(--bg-color); z-index: 1; transition: left 0.3s, width 0.3s; transform: none !important; /* TARCZA */ } body.is-mobile .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.is-mobile .desktop-text, body.is-mobile .desktop-only { display: none; } body.is-mobile .mobile-only { display: flex; } body.is-mobile button.mobile-only.action-btn { display: inline-flex; } body.is-mobile .view-container { display: none; background-color: var(--bg-color); } /* ========================================================= */ /* 2. KONTENER 2 (Zależny od zakładki) */ /* ========================================================= */ body.is-mobile .view-container[style*="block"], body.is-mobile .view-container[style*="flex"], body.is-mobile .view-container[aria-hidden="false"] { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding: 15px; box-sizing: border-box; background-color: var(--bg-color); } body.is-mobile #view-tasks[style*="block"], body.is-mobile #view-tasks[style*="flex"], body.is-mobile #view-tasks[aria-hidden="false"] { padding: 0; overflow: hidden; } /* ========================================================= */ /* 3. KONTENER 3 (Top bar tylko dla Zadań) */ /* ========================================================= */ body.is-mobile .view-header.mobile-header-tasks { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 15px 10px 15px; background-color: var(--bg-color); z-index: 1000; height: 70px; flex-shrink: 0; } body.is-mobile .view-header.mobile-header-tasks h1 { display: block; flex: 1; text-align: center; font-size: 1.4rem; font-weight: 800; margin: 0; color: var(--text-color); } body.is-mobile .task-header-btn { flex: 0 0 auto; background-color: var(--sidebar-btn-bg); color: var(--sidebar-btn-text); border: none; border-radius: 99px; height: 40px; padding: 0 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 var(--shadow-color); font-size: 0.95rem; font-weight: 800; outline: none; -webkit-tap-highlight-color: transparent; } body.is-mobile .task-header-btn:active, body.is-mobile .task-header-btn:focus { transform: translateY(4px); box-shadow: 0 0 0 var(--shadow-color); outline: none; } body.is-mobile #view-tasks .task-filters { display: none; } /* ========================================================= */ /* USTAWIENIA I ZESPÓŁ */ /* ========================================================= */ body.is-mobile .settings-section-title { margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 800; text-align: left; width: 100%; color: var(--text-color); border-bottom: 2px solid var(--border-color); padding-bottom: 8px; } body.is-mobile .settings-section-grid, body.is-mobile .ui-grid, body.is-mobile .sys-grid, body.is-mobile .color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; margin-bottom: 20px; } body.is-mobile .settings-card { background-color: var(--sidebar-btn-bg); color: var(--sidebar-btn-text); border: none; padding: 10px 8px; min-height: 55px; font-size: 0.9rem; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 14px; box-shadow: 0 4px 0 var(--shadow-color); outline: none; -webkit-tap-highlight-color: transparent; } body.is-mobile .settings-card:active, body.is-mobile .settings-card:focus { transform: translateY(4px); box-shadow: 0 0px 0 var(--shadow-color); outline: none; } /* ========================================================= */ /* ZAKŁADKA OSOBY - KARUZELA KOLUMNOWA */ /* ========================================================= */ body.is-mobile #view-users { overflow: hidden; padding-left: 0; padding-right: 0; padding-bottom: 0; display: flex; flex-direction: column; } body.is-mobile #users-container { display: grid; flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(auto-fill, minmax(80px, 1fr)); grid-auto-flow: column; grid-auto-columns: calc(50vw - 22.5px); gap: 15px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 5px 15px 15px 15px; box-sizing: border-box; scroll-behavior: smooth; } body.is-mobile #users-container .user-card, body.is-mobile #users-container .assignee-tile, body.is-mobile #users-container li { width: 100%; height: 100%; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 20px; text-align: center; box-sizing: border-box; background-color: var(--sidebar-btn-bg); color: var(--sidebar-btn-text); border: none; box-shadow: 0 5px 0 var(--shadow-color); font-size: 1rem; font-weight: 800; padding: 10px; outline: none; -webkit-tap-highlight-color: transparent; } body.is-mobile #users-container .user-card:active, body.is-mobile #users-container .assignee-tile:active, body.is-mobile #users-container .user-card:focus, body.is-mobile #users-container .assignee-tile:focus { transform: translateY(5px); box-shadow: 0 0px 0 var(--shadow-color); outline: none; } /* ========================================================= */ /* MODALE: BEZWZGLĘDNA LOGIKA */ /* ========================================================= */ body.is-mobile #fontSettingsModal .close-btn, body.is-mobile #taskSizeModal .close-btn, body.is-mobile #btnSizeModal .close-btn, body.is-mobile #taskBtnSizeModal .close-btn, body.is-mobile #themeModal .close-btn { display: none; } /* PEŁNY EKRAN */ body.is-mobile:not(.modal-style-popup) .modal-overlay:not(#loginModal):not(#startup-loader):not(#customDatePickerModal):not(#customTimePickerModal):not(#customGridPickerModal) .modal { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; border: none; padding: 30px 20px; margin: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background-color: var(--bg-color); overflow-y: auto; position: fixed; top: 0; left: 0; } body.is-mobile:not(.modal-style-popup) #mobileActionModal .modal { justify-content: center; } /* WYSKAKUJĄCE OKIENKO */ body.is-mobile.modal-style-popup .modal-overlay:not(#loginModal):not(#startup-loader):not(#detailsModal):not(#customDatePickerModal):not(#customTimePickerModal):not(#customGridPickerModal) .modal { width: 90vw; height: auto; min-height: 0; max-height: 85vh; max-width: 500px; border-radius: 24px; border: 2px solid var(--border-color); padding: 25px; margin: auto; justify-content: center; align-items: stretch; background-color: var(--bg-color); overflow-y: auto; position: relative; top: auto; left: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.4); } body.is-mobile.modal-style-popup #mobileActionModal .modal, body.is-mobile.modal-style-popup #filterModal .modal, body.is-mobile.modal-style-popup #editPriorityModal .modal, body.is-mobile.modal-style-popup .system-filter-modal .modal { display: flex; } body.is-mobile #filterModal #mobile-filters-wrap { flex-grow: 1; overflow-y: auto; padding-bottom: 20px; } body.is-mobile #mobileActionModal.modal-overlay { z-index: 99999; } body.is-mobile #mobileActionModal .modal-close-bar { display: none; } body.is-mobile #mobileActionContent { justify-content: center; gap: 20px; margin-bottom: 0; flex-grow: 1; display: flex; flex-direction: column; } body.is-mobile #mobileActionModal .mobile-pill-btn { height: 75px; font-size: 1.45rem; width: 100%; margin: 0; border-radius: 99px; } /* ========================================================= */ /* ROZMIAR PRZYCISKÓW */ /* ========================================================= */ body.is-mobile[data-task-btn-size="small"] .mobile-action-btn { height: 40px; font-size: 0.95rem; } body.is-mobile[data-task-btn-size="medium"] .mobile-action-btn { height: 48px; font-size: 1.05rem; } body.is-mobile[data-task-btn-size="large"] .mobile-action-btn { height: 58px; font-size: 1.15rem; } /* ========================================================= */ /* KARUZELA ZADAŃ */ /* ========================================================= */ body.is-mobile #tasks.grid-list, body.is-mobile #clients-container { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 0; margin: 0; padding: 0; width: 100%; height: 100%; flex-grow: 1; align-items: center; box-sizing: border-box; background-color: transparent; } body.is-mobile .card-item.task { flex: 0 0 90vw; scroll-snap-align: center; scroll-snap-stop: always; max-width: 90vw; min-width: 90vw; margin: 0 5vw; height: 94%; max-height: 75vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; box-sizing: border-box; border-radius: 25px; transform: translateZ(0) translateY(-1vh); background-color: var(--card-bg); border: 4px solid var(--border-color); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } body.is-mobile.dark .card-item.task { background: linear-gradient(145deg, #152750, #1d3773); border-color: #2a4b9e; box-shadow: 0 8px 16px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.05); } body.is-mobile .task-content-wrapper { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 5px 20px; align-items: flex-start; flex: 1 1 auto; width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; } body.is-mobile .card-item.task .card-header { width: 100%; margin: 0; } body.is-mobile .card-item.task .card-title { text-align: left; margin: 0 2% 15px 2%; width: 96%; font-size: 1.25rem; } body.is-mobile .card-item.task .description { text-align: center; margin: 0; width: 100%; background: transparent; border: none; font-size: 0.9rem; } body.is-mobile .assignee-badge { padding: 8px 12px; border-radius: 12px; display: inline-flex; font-size: 0.95rem; } body.is-mobile .assignee-meta { align-self: stretch; text-align: center; padding: 8px 5px; margin: 20px 0; background: transparent; border: none; } body.is-mobile .assignee-meta .meta-text.assignees-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } body.is-mobile .date-meta { padding: 8px 5px; margin: 20px 0 20px 25%; background: transparent; border: none; } body.is-mobile .desc-container { margin: 5px 0 0 0; width: 100%; overflow: hidden; display: flex; justify-content: center; } body.is-mobile .timer-meta { margin: auto auto 5px auto; align-self: center; width: 60%; height: 15%; background-color: var(--accent-light, #e0f2fe); border: none; border-radius: 35px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; } body.is-mobile.dark .timer-meta { background-color: var(--accent-light, rgba(56, 189, 248, 0.1)); } body.is-mobile .timer-meta::before, body.is-mobile .timer-meta::after, body.is-mobile .timer-display { display: none; } body.is-mobile .timer-text { font-size: 1.8rem; font-weight: 800; text-align: center; } body.is-mobile .task-meta-row { display: none; } body.is-mobile .task-actions-row.book-actions { flex: 0 0 auto; order: 5; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 12px; padding: 10px 15px 15px 15px; width: 100%; box-sizing: border-box; } body.is-mobile .mobile-action-btn { border-radius: 99px; border: none; font-weight: 800; background-color: var(--sidebar-btn-bg); color: var(--sidebar-btn-text); box-shadow: 0 4px 0 var(--shadow-color); outline: none; -webkit-tap-highlight-color: transparent; } body.is-mobile .mobile-action-btn:active, body.is-mobile .mobile-action-btn:focus { transform: translateY(4px); box-shadow: 0 0px 0 var(--shadow-color); outline: none; } body.is-mobile .task-actions-row.book-actions button[onclick^="openMobileStatusFullscreen"] { flex: 0 0 35%; width: 35%; } body.is-mobile .task-actions-row.book-actions button[onclick^="openMobileMoreFullscreen"] { flex: 0 0 45%; width: 45%; } /* Elementy formularzy na mobilkach */ body.is-mobile .custom-select-pill { position: relative; width: 100%; height: 64px; background-color: var(--sidebar-btn-bg); border-radius: 99px; box-shadow: 0 4px 0 var(--shadow-color); display: flex; align-items: center; margin: 0; } body.is-mobile .custom-select-pill:active { transform: translateY(4px); box-shadow: 0 0px 0 var(--shadow-color); } body.is-mobile .custom-select-pill select { position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; appearance: none; outline: none; } body.is-mobile .pill-visible { pointer-events: none; color: var(--sidebar-btn-text); display: flex; gap: 12px; font-weight: 800; font-size: 1.15rem; width: 100%; padding: 0 0 0 25px; justify-content: flex-start; align-items: center; white-space: nowrap; overflow: hidden; box-sizing: border-box; } body.is-mobile .pill-title { opacity: 0.7; font-weight: 600; text-align: left; } body.is-mobile .pill-value { font-weight: 800; text-overflow: ellipsis; overflow: hidden; text-align: left; } body.is-mobile .grid-cell-btn { background-color: var(--sidebar-btn-active); color: #ffffff; border: 2px solid transparent; transition: all 0.2s; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold; outline: none; -webkit-tap-highlight-color: transparent; } body.is-mobile .grid-cell-btn.selected-cell { background-color: var(--sidebar-btn-bg); color: var(--sidebar-btn-text); border-color: var(--sidebar-btn-bg); } body.is-mobile .mobile-pill-btn { background-color: var(--sidebar-btn-bg); color: var(--sidebar-btn-text); box-shadow: 0 4px 0 var(--shadow-color); border: none; outline: none; -webkit-tap-highlight-color: transparent; } body.is-mobile .mobile-pill-btn:active, body.is-mobile .mobile-pill-btn:focus { transform: translateY(4px); box-shadow: 0 0px 0 var(--shadow-color); outline: none; } body.is-mobile .system-filter-modal .task-filters-content select { width: 100%; padding: 16px 15px; font-size: 1.1rem; border-radius: 16px; border: 2px solid var(--border-color); background-color: var(--bg-color); color: var(--text-color); font-weight: bold; margin-bottom: 10px; outline: none; }