must not scroll the whole page. We achieve this by making the flex column fill the screen with min-height, NOT by constraining body height (which breaks fixed positioning in Chrome's dynamic toolbar mode). ================================================================ */ /* Body: pinned to viewport so Chrome's dynamic toolbar can't shift layout. position:fixed + inset:0 locks the body to the VISUAL viewport — the area actually visible on screen. This means Chrome's dynamic URL bar cannot push the bottom nav off-screen. We also kill h-screen (100vh) from the HTML Tailwind class because 100vh includes the browser chrome on Android, which is taller than the visual viewport when the URL bar is showing. */ body[data-device="mobile"] { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; /* Kill style.css transform that creates a stacking context and breaks position:fixed on children (bottom nav, FAB, sheets, backdrops). */ transform: none !important; will-change: auto !important; /* Ensure dark background is always visible (Tailwind gradient may not render correctly with position:fixed on some browsers) */ background: linear-gradient(to bottom right, #111827, #1f2937, #111827) !important; } /* App container fills the body — also kill h-screen from Tailwind HTML class */ [data-device="mobile"] #app-container { position: absolute !important; inset: 0 !important; height: 100% !important; max-height: 100% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; background: inherit; } /* The flex wrapper around sidebar + main content */ [data-device="mobile"] .flex.flex-grow.overflow-hidden { overflow: hidden !important; flex: 1 1 0% !important; min-height: 0 !important; display: flex !important; } /* The inner column holding subtabs + filter + main */ [data-device="mobile"] .flex-grow.flex.flex-col.overflow-hidden { overflow: hidden !important; min-height: 0 !important; flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; } /* ================================================================ HEADER — compact, sticky at top In standalone PWA mode the system status bar sits above the viewport, so no extra padding-top is needed here. ================================================================ */ [data-device="mobile"] header { padding: 6px 10px !important; position: sticky; top: 0; z-index: 40; flex-shrink: 0 !important; /* Prevent touches on the header from scrolling the layout */ touch-action: manipulation; overflow: hidden !important; } [data-device="mobile"] header .max-w-7xl { max-width: 100% !important; } [data-device="mobile"] #team-name-header { font-size: 0.9rem !important; } [data-device="mobile"] #open-admin-panel-btn { padding: 4px !important; } [data-device="mobile"] #pwa-refresh-btn { padding: 4px !important; } [data-device="mobile"] #pwa-refresh-btn svg { width: 18px !important; height: 18px !important; } /* ================================================================ MOBILE SUB-TABS — sticky below header, never scrolls away ================================================================ */ #mobile-subtabs { display: none; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 5px; padding: 5px 8px; background: rgba(17,24,39,0.98); border-bottom: 1px solid rgba(99,102,241,0.15); flex-shrink: 0 !important; touch-action: pan-x; } #mobile-subtabs::-webkit-scrollbar { display: none; } .mobile-subtab-btn { flex-shrink: 0; padding: 3px 9px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #9ca3af; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; -webkit-tap-highlight-color: transparent; position: relative; min-height: 26px; } .mobile-subtab-btn.active { background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.5); color: #a5b4fc; } .mobile-subtab-dot { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; border: 2px solid #111827; display: none; } .mobile-subtab-dot.visible { display: block; } /* ================================================================ FILTER BAR — compact horizontal scroll, never scrolls away ================================================================ */ [data-device="mobile"] #tickets-filter-bar { padding: 3px 6px !important; flex-shrink: 0 !important; overflow: hidden !important; touch-action: pan-x; } [data-device="mobile"] #tickets-filter-bar .max-w-7xl { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 3px !important; max-width: 100% !important; } [data-device="mobile"] #tickets-filter-bar .max-w-7xl::-webkit-scrollbar { display: none; } [data-device="mobile"] #tickets-filter-bar .relative.flex-1 { flex: 0 0 auto; min-width: 110px !important; max-width: 140px; } [data-device="mobile"] #search-input { padding: 3px 4px 3px 26px !important; font-size: 11px !important; min-height: 26px; } [data-device="mobile"] #tickets-filter-bar .relative.flex-1 svg { width: 11px !important; height: 11px !important; left: 7px !important; } [data-device="mobile"] #filter-user, [data-device="mobile"] #filter-source, [data-device="mobile"] #filter-priority, [data-device="mobile"] #filter-tag { flex-shrink: 0; padding: 3px 5px !important; font-size: 10px !important; min-width: 0; min-height: 26px; border-radius: 6px !important; } /* ================================================================ MAIN CONTENT — the ONLY scrollable area on mobile. flex: 1 1 0% + min-height: 0 makes it fill remaining space in the flex column without exceeding it. overflow-y: auto enables scroll only within that bounded box. overscroll-behavior-y: contain prevents the scroll from "leaking" into the body (no rubber-band / infinite scroll past tickets). ================================================================ */ [data-device="mobile"] main { padding: 4px 6px !important; /* Bottom padding: enough room so the last ticket isn't behind the bottom nav */ padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch; /* Kill style.css transform/will-change that create stacking contexts */ transform: none !important; will-change: auto !important; /* Ensure dark background — prevents white flash */ background: #111827; } /* ================================================================ iOS INPUT ZOOM PREVENTION — only sheet inputs, not filter bar ================================================================ */ [data-device="mobile"] .mobile-input, [data-device="mobile"] .mobile-select, [data-device="mobile"] .mobile-sheet input, [data-device="mobile"] .mobile-sheet select, [data-device="mobile"] .mobile-sheet textarea { font-size: 16px !important; } /* ================================================================ TOUCH TARGETS — mobile nav elements ================================================================ */ [data-device="mobile"] .mobile-nav-tab, [data-device="mobile"] #mobile-fab, [data-device="mobile"] .mobile-more-item, [data-device="mobile"] .mobile-create-btn, [data-device="mobile"] .mobile-source-btn { min-height: 44px; } /* ================================================================ TICKET LIST — compact ================================================================ */ [data-device="mobile"] #ticket-list, [data-device="mobile"] #done-ticket-list, [data-device="mobile"] #follow-up-ticket-list { padding: 0 !important; gap: 4px !important; } /* ── Redesigned compact ticket card ──────────────────────────── Layout (mobile): Row 1: [avatar] #ID user → assignee Row 2: subject [O/T] [priority dot] [status] Row 3: smart date | action buttons ─────────────────────────────────────────────────────────── */ [data-device="mobile"] .ticket-card { padding: 6px 8px !important; margin-bottom: 4px !important; border-radius: 8px !important; gap: 2px !important; transform: none !important; content-visibility: visible !important; contain: none !important; will-change: auto !important; } [data-device="mobile"] .ticket-card:hover { transform: none !important; } /* ── TICKET HEADER — row layout: avatar | content stack ────── */ [data-device="mobile"] .ticket-header { gap: 6px !important; flex-direction: row !important; align-items: flex-start !important; } /* Avatar column — show inline, shrink it */ [data-device="mobile"] .ticket-header > .flex-shrink-0 { display: flex !important; align-items: center !important; flex-shrink: 0 !important; } /* The main content area becomes full-width */ [data-device="mobile"] .ticket-header > .flex-grow { width: 100% !important; flex: 1 !important; min-width: 0 !important; } /* ── ROW 1: avatar + ID + user → assignee ─────────────────── */ /* This is .flex.items-center.justify-between.gap-2 — the first child of .space-y */ [data-device="mobile"] .ticket-header .flex.items-center.justify-between.gap-2 { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; } /* Left side (user info) — takes full width on row 1 */ [data-device="mobile"] .ticket-header .flex.items-center.gap-2.flex-wrap.min-w-0 { flex: 1 !important; gap: 3px !important; flex-wrap: nowrap !important; overflow: hidden !important; } /* Move the right-side badges (source, priority, status) to row 2 — hide from row 1 */ [data-device="mobile"] .ticket-header .flex.items-center.gap-1\.5.flex-shrink-0 { display: none !important; } /* Avatar — tiny inline */ [data-device="mobile"] .ticket-card .w-8.h-8, [data-device="mobile"] .ticket-card .w-9.h-9, [data-device="mobile"] .ticket-card .w-10.h-10 { width: 18px !important; height: 18px !important; font-size: 7px !important; } /* ID badge */ [data-device="mobile"] .ticket-header .font-bold.text-indigo-400 { font-size: 9px !important; } /* Username text */ [data-device="mobile"] .ticket-header .text-xs { font-size: 9px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ── Hide tags row on mobile (save vertical space) ─────────── */ /* Tags row is the 2nd child of .space-y-1.5 (1st=ID/user row, 2nd=tags, 3rd=subject) */ [data-device="mobile"] .ticket-header .space-y-1\.5 > :nth-child(2) { display: none !important; } /* ── Subject row (3rd child of .space-y): subject text + source/status pills ── */ [data-device="mobile"] .ticket-header .space-y-1\.5 > :nth-child(3) { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; align-items: center !important; } /* Subject text */ [data-device="mobile"] .ticket-header p.text-white.text-sm { font-size: 11px !important; line-height: 1.3 !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Hide linked tickets badges on mobile to save space */ [data-device="mobile"] .ticket-header .flex.flex-wrap.gap-1.ml-1 { display: none !important; } /* ── Space-y tighter ───────────────────────────────────────── */ [data-device="mobile"] .ticket-header .space-y-1\.5 { gap: 2px !important; } [data-device="mobile"] .ticket-header .space-y-1\.5 > * + * { margin-top: 2px !important; } /* ── Mobile-injected row 2 badges (.m-ticket-row2) ─────────── */ .m-ticket-row2 { display: flex; align-items: center; gap: 4px; margin-top: 2px; } /* m-src and m-status: shared base — tiny pill badges injected into subject row */ .m-src { font-size: 9px !important; font-weight: 700 !important; padding: 1px 5px !important; border-radius: 4px !important; line-height: 1.4 !important; flex-shrink: 0 !important; white-space: nowrap !important; vertical-align: middle; } .m-src-o { background: rgba(59,130,246,0.15) !important; color: #60a5fa !important; border: 1px solid rgba(59,130,246,0.35) !important; } .m-src-t { background: rgba(168,85,247,0.15) !important; color: #c084fc !important; border: 1px solid rgba(168,85,247,0.35) !important; } .m-status { font-size: 9px !important; font-weight: 600 !important; padding: 1px 5px !important; border-radius: 4px !important; line-height: 1.4 !important; flex-shrink: 0 !important; white-space: nowrap !important; cursor: pointer !important; vertical-align: middle; } .m-ticket-row2 .m-priority-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Collapse chevron — inline in row 1 area */ [data-device="mobile"] .ticket-collapse-btn { display: none !important; } /* ── Mobile-injected row 3 (.m-ticket-row3) ─────────────────── */ .m-ticket-row3 { display: flex; align-items: center; gap: 4px; margin-top: 2px; padding-top: 2px; border-top: 1px solid rgba(75,85,99,0.3); } .m-ticket-row3 .m-date { font-size: 9px; color: #6b7280; white-space: nowrap; flex-shrink: 0; } .m-ticket-row3 .m-actions { display: flex; align-items: center; gap: 1px; flex: 1; justify-content: flex-end; } .m-ticket-row3 .m-actions button, .m-ticket-row3 .m-actions label, .m-ticket-row3 .m-actions a { padding: 3px !important; font-size: 0 !important; line-height: 0; } .m-ticket-row3 .m-actions svg { width: 13px !important; height: 13px !important; } /* Hide the desktop footer (timestamps + actions) on mobile */ [data-device="mobile"] .ticket-card > .mt-2.pt-3.border-t, [data-device="mobile"] .ticket-card > .mt-3.pt-3.border-t { display: none !important; } /* Presence indicator — hide when empty, show compact when someone is viewing */ [data-device="mobile"] .ticket-header [id^="presence-"]:empty { display: none !important; } [data-device="mobile"] .ticket-header [id^="presence-"] { margin-top: 2px; } [data-device="mobile"] .ticket-header [id^="presence-"] > div { padding: 3px 6px !important; gap: 4px !important; border-radius: 6px !important; } [data-device="mobile"] .ticket-header [id^="presence-"] svg { width: 11px !important; height: 11px !important; flex-shrink: 0; } [data-device="mobile"] .ticket-header [id^="presence-"] span { font-size: 9px !important; } /* Linked ticket badges in ticket body (keep visible there) */ [data-device="mobile"] .ticket-card span[class*="bg-blue-500"] { font-size: 8px !important; padding: 0px 4px !important; } /* Tag badges (if shown elsewhere) */ [data-device="mobile"] .ticket-card span[class*="bg-gray-700"] { font-size: 8px !important; padding: 0px 3px !important; } /* Hide "Add to KB" text — icon only */ [data-device="mobile"] .ticket-card .kb-button { font-size: 0 !important; padding: 3px !important; } /* Divider line between timestamps and actions */ [data-device="mobile"] .ticket-card .w-px.h-4 { height: 10px !important; } /* General ticket card text */ [data-device="mobile"] .ticket-card .text-sm { font-size: 10px !important; } [data-device="mobile"] .ticket-card p { font-size: 9px !important; margin: 0 !important; } /* Ticket body (expanded) — compact */ [data-device="mobile"] .ticket-body { font-size: 11px !important; } [data-device="mobile"] .ticket-body .space-y-2 { gap: 4px !important; } /* Note editor area — smaller padding */ [data-device="mobile"] .ticket-body .note-container { font-size: 12px; } /* Add Note button */ [data-device="mobile"] .ticket-body button[onclick*="addNote"] { padding: 4px 10px !important; font-size: 10px !important; } /* Unread note dot */ [data-device="mobile"] .ticket-header .relative.flex.h-2\.5.w-2\.5 { width: 6px !important; height: 6px !important; } [data-device="mobile"] .ticket-header .relative.flex.h-2\.5.w-2\.5 span { width: 6px !important; height: 6px !important; } /* ================================================================ MOBILE ELEMENTS — show when device is mobile ================================================================ */ [data-device="mobile"] #mobile-bottom-nav { display: flex !important; } [data-device="mobile"] #mobile-fab { display: flex !important; } [data-device="mobile"] #mobile-subtabs { display: flex; } [data-device="mobile"] #mobile-ptr-indicator { display: flex; opacity: 0; pointer-events: none; } [data-device="mobile"] .mobile-sheet-backdrop { display: block; } /* ================================================================ BOTTOM NAVIGATION BAR — always fixed at bottom ================================================================ */ #mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; /* Base height + safe area for notched phones / Chrome Android bottom bar */ height: calc(52px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(17,24,39,0.98); border-top: 1px solid rgba(99,102,241,0.25); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); align-items: center; justify-content: space-around; box-shadow: 0 -2px 16px rgba(0,0,0,0.4); /* Force GPU layer — prevents it from being painted behind Chrome's UI */ transform: translateZ(0); -webkit-transform: translateZ(0); /* Prevent dragging on the nav from scrolling the layout */ touch-action: none; } .mobile-nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; gap: 1px; padding: 4px 4px; border: none; background: transparent; cursor: pointer; transition: all 0.2s ease; position: relative; color: #6b7280; -webkit-tap-highlight-color: transparent; } .mobile-nav-tab.active { color: #818cf8; } .mobile-nav-tab svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s ease; } .mobile-nav-tab.active svg { transform: scale(1.1); } .mobile-nav-tab span { font-size: 9px; font-weight: 600; letter-spacing: 0.02em; } .mobile-nav-tab.active::before { content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #818cf8; } .mobile-nav-dot { position: absolute; top: 6px; right: calc(50% - 14px); width: 7px; height: 7px; border-radius: 50%; background: #ef4444; border: 2px solid #111827; display: none; } .mobile-nav-dot.visible { display: block; } /* ================================================================ MOBILE FAB (Floating Action Button) ================================================================ */ #mobile-fab { display: none; position: fixed; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); right: 14px; z-index: 99; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #4f46e5); border: none; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(99,102,241,0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; } #mobile-fab:active { transform: scale(0.92); box-shadow: 0 2px 10px rgba(99,102,241,0.4); } #mobile-fab svg { width: 22px; height: 22px; color: white; transition: transform 0.3s ease; } #mobile-fab.open svg { transform: rotate(45deg); } /* ================================================================ BOTTOM SHEETS ================================================================ */ .mobile-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 60; backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .mobile-sheet-backdrop.open { opacity: 1; pointer-events: auto; } .mobile-sheet { position: fixed; /* Sit above the bottom nav bar (52px + safe area) so content is never hidden */ bottom: calc(52px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 61; background: linear-gradient(to bottom, rgba(31,41,55,0.99), rgba(17,24,39,0.99)); border-top: 1px solid rgba(99,102,241,0.2); border-radius: 16px 16px 0 0; max-height: calc(85vh - 52px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; transform: translateY(calc(100% + 52px + env(safe-area-inset-bottom, 0px))); visibility: hidden; pointer-events: none; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.35s; padding-bottom: 12px; box-shadow: 0 -8px 40px rgba(0,0,0,0.5); } .mobile-sheet.open { transform: translateY(0) !important; visibility: visible; pointer-events: auto; } .mobile-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); margin: 10px auto 0; cursor: grab; } .mobile-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); } .mobile-sheet-header h3 { font-size: 0.85rem; font-weight: 700; color: white; margin: 0; } .mobile-sheet-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.08); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .mobile-sheet-close:active { background: rgba(255,255,255,0.15); color: white; } .mobile-sheet-body { padding: 10px 14px 14px; } /* ================================================================ TICKET CREATION SHEET ================================================================ */ #mobile-create-sheet .mobile-sheet-body { display: flex; flex-direction: column; gap: 10px; } .mobile-source-row { display: flex; gap: 8px; } .mobile-source-btn { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #d1d5db; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-align: center; -webkit-tap-highlight-color: transparent; } .mobile-source-btn.selected { background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.6); color: white; } .mobile-field-label { font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; } .mobile-input { width: 100%; background: rgba(55,65,81,0.6); border: 1px solid rgba(75,85,99,0.5); border-radius: 10px; padding: 10px 12px; color: white; font-size: 16px; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .mobile-input:focus { border-color: rgba(99,102,241,0.6); } .mobile-select { width: 100%; background: rgba(55,65,81,0.6); border: 1px solid rgba(75,85,99,0.5); border-radius: 10px; padding: 10px 12px; color: white; font-size: 16px; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-color: rgba(55,65,81,0.6); padding-right: 32px; box-sizing: border-box; } .mobile-create-btn { width: 100%; padding: 12px; border-radius: 10px; border: none; background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .mobile-create-btn:active { opacity: 0.85; transform: scale(0.98); } /* ── Tag pill buttons in create sheet ────────────────────── */ .mobile-tags-row { display: flex; flex-wrap: wrap; gap: 6px; } .mobile-tag-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(99,102,241,0.35); background: rgba(99,102,241,0.08); color: #a5b4fc; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; } .mobile-tag-btn.selected { background: rgba(99,102,241,0.35); border-color: rgba(99,102,241,0.8); color: #fff; } /* ================================================================ SCORES SHEET & TEAM SHEET ================================================================ */ #mobile-scores-sheet .mobile-sheet-body, #mobile-team-sheet .mobile-sheet-body { padding: 0 14px 16px; } /* ================================================================ MORE MENU SHEET ================================================================ */ #mobile-more-sheet .mobile-sheet-body { display: flex; flex-direction: column; gap: 4px; } .mobile-more-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: white; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; -webkit-tap-highlight-color: transparent; width: 100%; box-sizing: border-box; text-align: left; } .mobile-more-item:active { background: rgba(255,255,255,0.1); } .mobile-more-item svg { width: 18px; height: 18px; color: #818cf8; flex-shrink: 0; } .mobile-more-item.danger { color: #f87171; border-color: rgba(239,68,68,0.15); } .mobile-more-item.danger svg { color: #f87171; } /* Shift button — prominent full-width button at top of More menu */ .mobile-shift-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: 12px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; margin-bottom: 8px; min-height: 48px; box-sizing: border-box; } .mobile-shift-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .mobile-shift-btn.shift-start { background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(6,182,212,0.15)); border: 1px solid rgba(6,182,212,0.4); color: #67e8f9; } .mobile-shift-btn.shift-start svg { color: #22d3ee; } .mobile-shift-btn.shift-end { background: linear-gradient(135deg, rgba(249,115,22,0.25), rgba(249,115,22,0.15)); border: 1px solid rgba(249,115,22,0.4); color: #fdba74; } .mobile-shift-btn.shift-end svg { color: #f97316; } .mobile-shift-btn.shift-done { background: rgba(107,114,128,0.12); border: 1px solid rgba(107,114,128,0.3); color: #9ca3af; pointer-events: none; opacity: 0.6; } /* ================================================================ PULL-TO-REFRESH INDICATOR ================================================================ */ #mobile-ptr-indicator { display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); z-index: 55; width: 36px; height: 36px; border-radius: 50%; background: rgba(99,102,241,0.9); align-items: center; justify-content: center; transition: transform 0.3s ease; box-shadow: 0 4px 12px rgba(99,102,241,0.4); } #mobile-ptr-indicator svg { width: 18px; height: 18px; color: white; } #mobile-ptr-indicator.ptr-visible { transform: translateX(-50%) translateY(70px); } @keyframes ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #mobile-ptr-indicator.ptr-loading svg { animation: ptr-spin 0.8s linear infinite; } /* ================================================================ SKELETON LOADING ================================================================ */ .skeleton-card { background: rgba(55,65,81,0.5); border-radius: 8px; padding: 10px; margin-bottom: 6px; animation: skeleton-wave 1.4s ease infinite; } .skeleton-line { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); margin-bottom: 6px; } .skeleton-line.wide { width: 70%; } .skeleton-line.medium { width: 45%; } .skeleton-line.short { width: 25%; } @keyframes skeleton-wave { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ================================================================ MODALS — mobile-friendly: full-screen, proper z-index ================================================================ */ [data-device="mobile"] .modal { z-index: 110 !important; } [data-device="mobile"] .modal > div { max-width: 100% !important; width: 100% !important; max-height: 100% !important; margin: 0 !important; border-radius: 0 !important; padding: 12px !important; } [data-device="mobile"] .modal h2 { font-size: 1rem !important; } [data-device="mobile"] .modal button { font-size: 12px !important; } [data-device="mobile"] .modal input, [data-device="mobile"] .modal select { font-size: 14px !important; } /* Activity log — mobile-friendly position */ [data-device="mobile"] #activity-log { z-index: 110 !important; left: 4px !important; right: 4px !important; width: auto !important; max-height: 70vh !important; top: 60px !important; } /* ================================================================ DASHBOARD VIEW — compact ================================================================ */ [data-device="mobile"] #dashboard-view .glassmorphism { padding: 8px !important; } [data-device="mobile"] #dashboard-view h2 { font-size: 0.9rem !important; } [data-device="mobile"] #dashboard-view .grid { gap: 6px !important; } [data-device="mobile"] #dashboard-view .grid.grid-cols-1.md\:grid-cols-3 { grid-template-columns: 1fr !important; } /* ================================================================ KNOWLEDGE BASE — compact ================================================================ */ [data-device="mobile"] #knowledge-base-view { padding: 0 !important; } [data-device="mobile"] #knowledge-base-view .text-lg, [data-device="mobile"] #knowledge-base-view .text-xl { font-size: 0.85rem !important; } /* KB filter/sort controls — compact on mobile */ [data-device="mobile"] #knowledge-base-view .space-y-4 { gap: 8px !important; } [data-device="mobile"] #knowledge-base-view .bg-gray-800\/40 { padding: 10px !important; } [data-device="mobile"] #knowledge-base-view h3.text-sm { font-size: 11px !important; margin-bottom: 6px !important; } [data-device="mobile"] #knowledge-base-view .flex-wrap.gap-3 { gap: 8px !important; } [data-device="mobile"] #kb-creator-filter, [data-device="mobile"] #kb-sort-select { font-size: 11px !important; padding: 5px 8px !important; } [data-device="mobile"] #kb-search-input { font-size: 12px !important; padding: 7px 10px !important; } /* KB entry cards — compact on mobile */ [data-device="mobile"] #kb-entries-container .p-4 { padding: 8px 10px !important; } [data-device="mobile"] #kb-entries-container h4 { font-size: 12px !important; font-weight: 600 !important; } [data-device="mobile"] #kb-entries-container .flex.justify-between { flex-direction: column !important; gap: 4px !important; } [data-device="mobile"] #kb-entries-container .flex.items-center.gap-3.text-sm { font-size: 10px !important; gap: 6px !important; flex-wrap: wrap; } [data-device="mobile"] #kb-entries-container .px-2.py-1 { font-size: 9px !important; padding: 1px 5px !important; } /* Section headers */ [data-device="mobile"] #kb-entries-container h3 { font-size: 12px !important; padding-bottom: 4px !important; margin-bottom: 4px !important; } [data-device="mobile"] #kb-entries-container h3 svg { width: 14px !important; height: 14px !important; } /* ================================================================ NOTIFICATIONS — compact on mobile ================================================================ */ /* Notification center panel — full-screen overlay on mobile */ [data-device="mobile"] #notification-center { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 0 !important; z-index: 200 !important; background: rgba(17,24,39,0.99) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } [data-device="mobile"] #notification-center .notif-item { padding: 10px !important; } [data-device="mobile"] #notification-center .notif-item .text-sm { font-size: 13px !important; } [data-device="mobile"] #notification-center .notif-item .text-xs { font-size: 11px !important; } [data-device="mobile"] #notification-center .notif-item .text-\[10px\] { font-size: 10px !important; } [data-device="mobile"] #notif-list { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; } /* General notification panel (top-right toasts) */ [data-device="mobile"] #notification-panel { top: 4px !important; right: 4px !important; left: 4px !important; width: auto !important; max-width: none !important; max-height: 70vh !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 3px !important; } [data-device="mobile"] #notification-panel > :not([hidden]) ~ :not([hidden]) { margin-top: 3px !important; } [data-device="mobile"] #notification-panel .notification { padding: 6px 8px !important; margin-bottom: 0 !important; border-radius: 7px !important; font-size: 10px !important; } [data-device="mobile"] #notification-panel .notification .font-bold { font-size: 10px !important; line-height: 1.2 !important; } [data-device="mobile"] #notification-panel .notification .text-sm { font-size: 9px !important; line-height: 1.2 !important; } [data-device="mobile"] #notification-panel .notification svg { width: 12px !important; height: 12px !important; flex-shrink: 0; } /* Dismiss-all button — pinned to top of panel */ [data-device="mobile"] #dismiss-all-btn { position: sticky !important; top: 0 !important; z-index: 1 !important; background: rgba(15, 15, 35, 0.95) !important; backdrop-filter: blur(6px) !important; padding: 3px 0 4px !important; margin-bottom: 2px !important; border-radius: 6px !important; } [data-device="mobile"] #dismiss-all-btn button { font-size: 9px !important; padding: 3px 8px !important; } /* Status / break notification toasts */ [data-device="mobile"] #status-notifications-container { top: auto !important; right: 4px !important; left: 4px !important; bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; } [data-device="mobile"] .status-notification-toast { padding: 6px 8px !important; border-radius: 7px !important; } [data-device="mobile"] .status-notification-toast .text-2xl { font-size: 0.95rem !important; } [data-device="mobile"] .status-notification-toast .font-semibold { font-size: 10px !important; } [data-device="mobile"] .status-notification-toast .text-xs { font-size: 9px !important; } /* Badge notification toasts (inline-styled, override with !important) */ [data-device="mobile"] [style*="z-index: 10000"] { top: 4px !important; right: 4px !important; left: 4px !important; max-width: none !important; padding: 8px 32px 8px 10px !important; font-size: 10px !important; border-radius: 7px !important; } /* Reminder modals — compact */ [data-device="mobile"] [id^="reminder-"] > div { max-width: calc(100% - 24px) !important; margin: 0 12px !important; } [data-device="mobile"] [id^="reminder-"] .text-2xl { font-size: 1.1rem !important; } [data-device="mobile"] [id^="reminder-"] .text-lg { font-size: 0.85rem !important; } [data-device="mobile"] [id^="reminder-"] .p-6 { padding: 14px !important; } [data-device="mobile"] [id^="reminder-"] .bg-gray-700 { padding: 10px !important; } /* ================================================================ GENERAL TEXT SIZING ================================================================ */ [data-device="mobile"] .text-lg { font-size: 0.85rem !important; } [data-device="mobile"] .text-xl { font-size: 0.9rem !important; } [data-device="mobile"] .text-2xl { font-size: 1rem !important; } [data-device="mobile"] .glassmorphism { padding: 6px !important; } /* ================================================================ SCHEDULE MODAL — MOBILE ================================================================ */ /* Schedule modals: make the overlay a simple full-screen column */ [data-device="mobile"] #schedule-modal, [data-device="mobile"] #default-schedule-modal { align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; } /* Inner container fills the whole screen */ [data-device="mobile"] #schedule-modal > div, [data-device="mobile"] #default-schedule-modal > div { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 0 !important; padding: 10px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Compact header on mobile */ [data-device="mobile"] #schedule-modal h2, [data-device="mobile"] #default-schedule-modal h2 { font-size: 1rem !important; } /* Smaller week navigator */ [data-device="mobile"] #schedule-modal .flex.items-center.justify-center.gap-3 { gap: 4px !important; margin-bottom: 8px !important; } [data-device="mobile"] #schedule-week-label { font-size: 11px !important; padding: 2px 6px !important; } /* All children of the schedule modal EXCEPT the display area must not grow */ [data-device="mobile"] #schedule-modal > div > *:not(#schedule-display) { flex-shrink: 0 !important; } /* Schedule display area — the ONE scrollable child */ [data-device="mobile"] #schedule-display { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x pan-y !important; overscroll-behavior: contain !important; } /* Cell edit popup — must be above everything on mobile */ [data-device="mobile"] #cell-edit-overlay { z-index: 60 !important; } [data-device="mobile"] #cell-edit-popup { z-index: 70 !important; width: 90vw !important; max-width: 320px !important; } /* Schedule week grid — mobile optimized */ [data-device="mobile"] .schedule-week-grid { font-size: 10px !important; } [data-device="mobile"] .schedule-week-grid th { font-size: 9px !important; padding: 4px 2px !important; letter-spacing: 0 !important; } [data-device="mobile"] .schedule-week-grid td { font-size: 9px !important; padding: 6px 2px !important; min-width: 0 !important; } [data-device="mobile"] .schedule-week-grid td:first-child { min-width: 55px !important; max-width: 70px !important; font-size: 9px !important; padding-left: 3px !important; overflow: hidden; text-overflow: ellipsis; } /* Working time — stack start/end on separate lines */ [data-device="mobile"] .sched-cell-working { display: flex !important; flex-direction: column !important; align-items: center !important; line-height: 1.3 !important; font-size: 9px !important; } [data-device="mobile"] .sched-time-sep { display: none !important; } [data-device="mobile"] .sched-time-start, [data-device="mobile"] .sched-time-end { display: block !important; } [data-device="mobile"] .sched-cell-off { font-size: 9px !important; } /* Bigger tap target for editable cells */ [data-device="mobile"] .sched-cell-edit { min-height: 40px !important; vertical-align: middle; } /* Cell edit popup — mobile friendly */ [data-device="mobile"] #cell-edit-popup { min-width: 280px !important; width: 90vw !important; max-width: 320px !important; } /* Default schedule grid — mobile */ /* Force table wider than viewport so horizontal scroll works */ [data-device="mobile"] .default-schedule-grid { min-width: 600px !important; table-layout: fixed !important; } [data-device="mobile"] .default-schedule-grid td.default-grid-cell { min-width: 70px !important; padding: 4px 2px !important; } [data-device="mobile"] .default-schedule-grid td.default-grid-cell .def-cell-status { font-size: 9px !important; } [data-device="mobile"] .default-schedule-grid .def-cell-times { flex-direction: column !important; gap: 0 !important; } [data-device="mobile"] .default-schedule-grid .def-cell-times span { display: none !important; } [data-device="mobile"] .default-schedule-grid .def-cell-times input[type="time"] { font-size: 9px !important; width: 100% !important; padding: 2px !important; } /* Admin buttons smaller on mobile */ [data-device="mobile"] #admin-schedule-buttons button { font-size: 9px !important; padding: 3px 6px !important; } /* Edit form on mobile — stack better */ [data-device="mobile"] #schedule-edit-form .grid-cols-4 { grid-template-columns: 1fr 1fr !important; gap: 4px !important; } [data-device="mobile"] #schedule-edit-form .schedule-edit-username { grid-column: 1 / -1 !important; font-size: 11px !important; } [data-device="mobile"] #schedule-edit-form select, [data-device="mobile"] #schedule-edit-form input[type="time"] { font-size: 12px !important; padding: 6px !important; } /* Edit actions on mobile */ [data-device="mobile"] #schedule-edit-actions button { font-size: 11px !important; padding: 8px 12px !important; } /* Default schedule description text */ /* All children of default schedule modal must not shrink EXCEPT the form */ [data-device="mobile"] #default-schedule-modal > div > *:not(#default-schedule-form) { flex-shrink: 0 !important; } /* Default schedule form — the ONE scrollable child */ [data-device="mobile"] #default-schedule-form { flex: 1 1 0% !important; flex-shrink: 1 !important; min-height: 0 !important; overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x pan-y !important; overscroll-behavior: contain !important; padding-bottom: 60px !important; } /* Hide original save buttons row on mobile (inline ones are inside the table area) */ [data-device="mobile"] #default-schedule-modal > div > .flex.justify-end { display: none !important; } /* Inline save buttons under the table */ [data-device="mobile"] .default-schedule-inline-actions { display: flex !important; justify-content: center !important; gap: 12px !important; padding: 16px 8px !important; margin-top: 12px !important; } [data-device="mobile"] .default-schedule-inline-actions button { font-size: 13px !important; padding: 10px 20px !important; border-radius: 8px !important; } [data-device="mobile"] #default-schedule-modal p.text-xs { font-size: 9px !important; margin-bottom: 6px !important; } /* Save buttons on mobile */ [data-device="mobile"] #default-schedule-modal .flex.justify-end button { font-size: 11px !important; padding: 8px 12px !important; } /* ================================================================ MOBILE SCHEDULE — Day/Week Toggle View ================================================================ */ /* Header container */ [data-device="mobile"] .mobile-sched-header { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 4px; margin-bottom: 8px; } /* Day / Week toggle pill */ [data-device="mobile"] .mobile-sched-toggle { display: flex; background: #1e293b; border-radius: 8px; padding: 3px; gap: 2px; } [data-device="mobile"] .mobile-sched-toggle-btn { padding: 6px 20px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; color: #94a3b8; background: transparent; cursor: pointer; transition: all 0.15s ease; } [data-device="mobile"] .mobile-sched-toggle-btn.active { background: #3b82f6; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* Day navigation row */ [data-device="mobile"] .mobile-sched-daynav { display: flex; align-items: center; gap: 8px; } [data-device="mobile"] .mobile-sched-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; } [data-device="mobile"] .mobile-sched-nav-btn:active { background: #334155; } [data-device="mobile"] .mobile-sched-day-label { padding: 6px 16px; border: 1px solid #334155; border-radius: 8px; background: #1e293b; color: #f1f5f9; font-size: 15px; font-weight: 700; cursor: pointer; min-width: 120px; text-align: center; } [data-device="mobile"] .mobile-sched-day-label:active { background: #334155; } /* Weekday subtitle */ [data-device="mobile"] .mobile-sched-weekday { font-size: 12px; color: #64748b; font-weight: 500; } /* Stats bar */ [data-device="mobile"] .mobile-sched-stats { display: flex; gap: 16px; justify-content: center; padding: 6px 0; font-size: 13px; font-weight: 600; } [data-device="mobile"] .mobile-stat-working { color: #22c55e; } [data-device="mobile"] .mobile-stat-off { color: #ef4444; } /* Cards container */ [data-device="mobile"] .mobile-sched-cards { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; } /* Individual card */ [data-device="mobile"] .mobile-sched-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; border: 1px solid #334155; background: #1e293b; cursor: pointer; transition: background 0.15s; } [data-device="mobile"] .mobile-sched-card:active { background: #334155; } /* Card status colors */ [data-device="mobile"] .mobile-card-working { border-left: 4px solid #22c55e; } [data-device="mobile"] .mobile-card-off { border-left: 4px solid #ef4444; opacity: 0.7; } [data-device="mobile"] .mobile-card-notset { border-left: 4px solid #475569; opacity: 0.5; } [data-device="mobile"] .mobile-card-late { border-left: 4px solid #f59e0b !important; background: rgba(245, 158, 11, 0.08) !important; opacity: 1 !important; } /* Card left (name + status) */ [data-device="mobile"] .mobile-card-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; } [data-device="mobile"] .mobile-card-name { font-size: 14px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-device="mobile"] .mobile-card-status { font-size: 12px; color: #94a3b8; } /* Card right (tags) */ [data-device="mobile"] .mobile-card-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } [data-device="mobile"] .mobile-override-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(99, 102, 241, 0.2); color: #818cf8; font-weight: 600; } [data-device="mobile"] .mobile-pending-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(234, 179, 8, 0.2); color: #eab308; font-weight: 600; } [data-device="mobile"] .mobile-card-pending { border-left: 4px solid #eab308 !important; outline: 1px dashed rgba(234, 179, 8, 0.3); } [data-device="mobile"] .mobile-late-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(245, 158, 11, 0.2); color: #f59e0b; font-weight: 700; text-transform: uppercase; }