/* Responsive Components for FollowMint */ /* MOBILE BACKGROUND FIX - Prevent browser theme-color from creating blue backgrounds */ @media (max-width: 768px) { /* Force proper background colors on mobile to override theme-color effects */ html { background-color: #111 !important; background: #111 !important; height: 100% !important; min-height: 100vh !important; min-height: 100dvh !important; } body { background-color: #111 !important; background: #111 !important; height: 100% !important; min-height: 100vh !important; min-height: 100dvh !important; } /* Ensure no blue background leaks through when keyboard is open */ body::before, body::after, html::before, html::after { content: '' !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: #111 !important; z-index: -1 !important; pointer-events: none !important; } } /* Responsive Post Cards */ .post-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; transition: all 0.2s; } .post-card:hover { /* Disabled hover animation */ } .post-card-image { width: 100%; height: auto; object-fit: contain; } /* Mobile responsive post card header */ @media (max-width: 768px) { .post-card-image { height: auto; } /* Zapewnij że conversation-item są klikalne na mobilnych */ .conversation-item { pointer-events: auto !important; cursor: pointer !important; } /* MOBILE MESSAGE BUTTON - slightly bigger */ .message-btn-responsive { padding: 2px 8px !important; height: 16px !important; line-height: 12px !important; font-size: 10px !important; min-height: 16px !important; max-height: 16px !important; } /* HIDE FAN INSIGHTS HEADER AND EXPAND BUTTON ON MOBILE */ #fan-insights .p-4.border-b.border-gray-600.flex.items-center.justify-between, button[onclick="toggleFanInsights()"] { display: none !important; } /* FIX FAN INSIGHTS HEIGHT ON MOBILE - stretch to bottom */ #fan-insights { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } /* REMOVE BLACK SPACE AT BOTTOM */ .messages-container { height: 100vh !important; min-height: 100vh !important; } /* FOLLOWERS/SUBSCRIBERS MOBILE RESPONSIVE - NAJWYZSZA SPECYFIKACJA */ body.dark html #followers-container .conversation-item .flex.items-center[style*="gap"], body.dark html #subscribers-container .conversation-item .flex.items-center[style*="gap"], body html #followers-container .conversation-item .flex.items-center[style*="gap"], body html #subscribers-container .conversation-item .flex.items-center[style*="gap"] { gap: 8px !important; margin-left: 0 !important; margin-right: 0 !important; } body.dark html #followers-container .conversation-item .flex-1.min-w-0[style*="padding-left"], body.dark html #subscribers-container .conversation-item .flex-1.min-w-0[style*="padding-left"], body html #followers-container .conversation-item .flex-1.min-w-0[style*="padding-left"], body html #subscribers-container .conversation-item .flex-1.min-w-0[style*="padding-left"] { padding-left: 0px !important; margin-left: 0 !important; } body.dark html #followers-container .conversation-item .flex.justify-between.items-start[style*="margin-bottom"], body.dark html #subscribers-container .conversation-item .flex.justify-between.items-start[style*="margin-bottom"], body html #followers-container .conversation-item .flex.justify-between.items-start[style*="margin-bottom"], body html #subscribers-container .conversation-item .flex.justify-between.items-start[style*="margin-bottom"] { margin-bottom: 2px !important; } body.dark html #followers-container .conversation-item p.text-gray-400[style*="margin-top"], body.dark html #subscribers-container .conversation-item p.text-gray-400[style*="margin-top"], body html #followers-container .conversation-item p.text-gray-400[style*="margin-top"], body html #subscribers-container .conversation-item p.text-gray-400[style*="margin-top"] { margin-top: 2px !important; line-height: 1.1 !important; } /* REMOVE ONLY OUTLINE FROM FOCUS - keep original colors */ *:focus { outline: none !important; } /* COPY EXACT MOBILE SPACING FROM CONVERSATIONS */ #followers-container .conversation-item .flex.items-center.space-x-3, #subscribers-container .conversation-item .flex.items-center.space-x-3 { gap: 12px !important; } #followers-container .conversation-item .flex-1.min-w-0, #subscribers-container .conversation-item .flex-1.min-w-0 { padding-left: 2px !important; } /* MATCH CONVERSATIONS HEIGHT - reduce padding on mobile */ #followers-container .conversation-item, #subscribers-container .conversation-item { padding: 12px 16px !important; } /* Keep original tab colors */ #conversations-tab.active, #followers-tab.active, #subscribers-tab.active { background-color: #3a3a3a !important; color: white !important; } #conversations-tab:not(.active), #followers-tab:not(.active), #subscribers-tab:not(.active) { background-color: #2a2a2a !important; color: #9ca3af !important; } /* FANS FEED MOBILE SPACING FIX - BRUTAL FORCE */ .fans-feed-container .feed-header-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .fans-feed-container .feed-filters-row.space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1px * var(--tw-space-x-reverse)); margin-left: calc(1px * calc(1 - var(--tw-space-x-reverse))); } .fans-feed-container .feed-filters-row { display: flex !important; width: 100% !important; } /* Mobile-specific rules for very small screens */ @media (max-width: 480px) { body .fans-feed-container .feed-filters-row select, html .fans-feed-container .feed-filters-row select { padding: 2px 4px !important; height: 24px !important; font-size: 10px !important; line-height: 1.2 !important; } body .fans-feed-container .feed-filters-row .filter-btn, html .fans-feed-container .feed-filters-row .filter-btn { padding: 4px 6px !important; height: 26px !important; font-size: 10px !important; line-height: 1.2 !important; min-height: 26px !important; } } /* Mobile Unified Input Styling */ .mobile-unified-input { background: #262626 !important; border-radius: 8px !important; padding: 16px !important; margin-top: 16px !important; border-top: 1px solid #374151 !important; } /* Input field blends with background - JASNY TEKST! */ .mobile-unified-input input { background: #262626 !important; border: none !important; color: #ffffff !important; font-weight: 400 !important; opacity: 1 !important; } .mobile-unified-input input:focus { outline: none !important; background: #262626 !important; color: #ffffff !important; } .mobile-unified-input input::placeholder { color: #9ca3af !important; opacity: 0.7 !important; } .mobile-unified-input button, button[id*="mobile-submit-btn"], button[id*="mobile-cancel-btn"] { font-size: 13px !important; font-weight: 500 !important; padding: 8px 12px !important; border-radius: 8px !important; transition: all 0.2s !important; border: none !important; width: auto !important; max-width: none !important; min-width: 60px !important; } .mobile-unified-input button[type="submit"], button[id*="mobile-submit-btn"], #mobile-submit-btn-121, #mobile-submit-btn-125, [id^="mobile-submit-btn"] { background: #4182B7 !important; color: #ffffff !important; opacity: 1 !important; filter: none !important; box-shadow: 0 4px 8px rgba(65, 130, 183, 0.5) !important; border: 2px solid #4182B7 !important; } .mobile-unified-input button[type="submit"]:hover, button[id*="mobile-submit-btn"]:hover { background: #3a75a2 !important; box-shadow: 0 4px 8px rgba(65, 130, 183, 0.4) !important; } /* Disabled state - WYSZARZONY */ .mobile-unified-input button[type="submit"]:disabled, button[id*="mobile-submit-btn"]:disabled { background: #6b7280 !important; color: #9ca3af !important; opacity: 0.6 !important; cursor: not-allowed !important; box-shadow: none !important; border: 2px solid #6b7280 !important; } /* Mobile comments positioning - move everything except avatar up and left - DISABLED FOR EDIT FORMS */ .mobile-comments-section .flex.space-x-3 .flex-1:not(:has(.edit-comment-form:not(.hidden))):not(:has(.edit-reply-form:not(.hidden))) { position: relative !important; top: -2px !important; left: -4px !important; } /* Reset positioning for edit forms - NUCLEAR OVERRIDE */ .mobile-comments-section .flex.space-x-3 .flex-1 .edit-comment-form, body .mobile-comments-section .flex.space-x-3 .flex-1 .edit-comment-form, html .mobile-comments-section .flex.space-x-3 .flex-1 .edit-comment-form, div.mobile-comments-section .flex.space-x-3 .flex-1 .edit-comment-form { position: relative !important; top: 2px !important; left: 4px !important; margin-left: 0 !important; margin-top: 4px !important; } /* Override parent positioning when edit forms are visible - NUCLEAR FORCE */ .mobile-comments-section .flex.space-x-3 .flex-1:has(.edit-comment-form:not(.hidden)), .mobile-comments-section .flex.space-x-3 .flex-1:has(.edit-reply-form:not(.hidden)), body .mobile-comments-section .flex.space-x-3 .flex-1:has(.edit-comment-form:not(.hidden)), body .mobile-comments-section .flex.space-x-3 .flex-1:has(.edit-reply-form:not(.hidden)), html .mobile-comments-section .flex.space-x-3 .flex-1:has(.edit-comment-form:not(.hidden)), html .mobile-comments-section .flex.space-x-3 .flex-1:has(.edit-reply-form:not(.hidden)) { position: static !important; top: 0 !important; left: 0 !important; margin-left: 0 !important; transform: none !important; } /* Mobile dashboard reply styling - only for mobile */ .reply-item .text-white { font-size: 13px !important; } .reply-item img, .reply-item .bg-gradient-to-r { max-width: 32px !important; width: 32px !important; max-height: 32px !important; height: 32px !important; } /* Enabled state - JASNY NIEBIESKI */ .mobile-unified-input button[type="submit"]:not(:disabled), button[id*="mobile-submit-btn"]:not(:disabled) { background: #4182B7 !important; color: #ffffff !important; opacity: 1 !important; cursor: pointer !important; box-shadow: 0 4px 8px rgba(65, 130, 183, 0.5) !important; border: 2px solid #4182B7 !important; } /* Gray cancel button */ .mobile-unified-input button[type="button"] { background: #6b7280 !important; color: white !important; } /* Hide Follow button on profile pages on mobile - NUCLEAR FORCE */ .profile-page .post-card .follow-btn, .profile-page .post-card .unfollow-btn, .profile-page .post-card button[data-username], .profile-page .post-card button.follow-btn, .profile-page .post-card button.unfollow-btn, body.profile-page .post-card .follow-btn, body.profile-page .post-card .unfollow-btn, body.profile-page .post-card button[data-username], html.profile-page .post-card .follow-btn, html.profile-page .post-card .unfollow-btn, html.profile-page .post-card button[data-username], div.profile-page .post-card .follow-btn, div.profile-page .post-card .unfollow-btn, div.profile-page .post-card button[data-username] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; } /* Mobile badges system */ .mobile-badges-container { display: none; } /* Show mobile badges only on mobile */ @media (max-width: 768px) { .mobile-badges-container { display: block !important; position: absolute !important; right: 16px !important; top: 16px !important; z-index: 10; } /* TYLKO DLA FANS FEED - badges w prawym górnym rogu */ .fans-feed-container .mobile-badges-container, .fans-feed-container .mobile-badges-container.hidden, .fans-feed-container .mobile-badges-container.tablet-hide { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; right: 8px !important; top: 8px !important; z-index: 15 !important; } /* Hide desktop badges on mobile */ .post-card .flex.items-center.space-x-2 > div.flex.flex-col.space-y-1, .post-header .post-badges .post-badge { display: none !important; } } /* Move mobile badges to the right on profile pages */ .profile-page .mobile-badges-container { position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; text-align: right !important; } /* MOBILE ONLY - Hide Follow button on profile pages */ @media (max-width: 768px) { .profile-page .follow-btn, .profile-page .unfollow-btn, .profile-page button[data-username] { display: none !important; } } .mobile-unified-input button[type="button"]:hover { background: #4b5563 !important; } /* FINAL BRUTAL OVERRIDE - Hide Follow button on profile pages on mobile */ @media (max-width: 768px) { .profile-page .post-card .follow-btn, .profile-page .post-card .unfollow-btn, .profile-page .post-card button[data-username], .profile-page button.follow-btn, .profile-page button.unfollow-btn { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /* Manager page buttons - mobile fixes */ .manager-add-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.75rem 1rem !important; line-height: 1.2 !important; text-align: center !important; } .manager-add-btn svg { width: 1.125rem !important; height: 1.125rem !important; margin: 0 !important; flex-shrink: 0 !important; } .manager-edit-btn { width: 2.5rem !important; height: 2.5rem !important; padding: 0.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; } .manager-edit-btn svg { width: 1rem !important; height: 1rem !important; margin: 0 !important; flex-shrink: 0 !important; } /* Back arrow alignment fix on mobile */ .flex.items-center a[href*="managers"] svg { vertical-align: middle !important; display: inline-flex !important; align-items: center !important; } /* Ensure proper heading alignment */ .flex.items-center h1 { line-height: 1.2 !important; display: flex !important; align-items: center !important; } /* Cancel button text alignment fix */ .manager-cancel-btn { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.2 !important; } /* Mobile badges container - show only on mobile */ .mobile-badges-container { display: block !important; } /* Hide "Everyone" badge on mobile */ .hidden-mobile { display: none !important; } /* FANS FEED MOBILE FILTERS - OVERRIDE SPACE-X-3 */ .fans-feed-container .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 1px !important; } .fans-feed-container .feed-filters-row select { flex: 2 !important; font-size: 10px !important; padding: 3px !important; height: 28px !important; } .fans-feed-container .feed-filters-row .filter-btn { flex: 1 !important; font-size: 10px !important; padding: 3px 2px !important; height: 28px !important; } /* Mobile comment menu styling - NUCLEAR FORCE OVERRIDE EVERYTHING */ body .comment-menu, html .comment-menu, * .comment-menu, div.comment-menu, body .reply-menu, html .reply-menu, * .reply-menu, div.reply-menu { width: 80px !important; min-width: 80px !important; height: 120px !important; min-height: 120px !important; max-height: 120px !important; right: 0 !important; left: auto !important; top: 6px !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; z-index: 9999 !important; } body .comment-menu button, html .comment-menu button, * .comment-menu button, div.comment-menu button, body .reply-menu button, html .reply-menu button, * .reply-menu button, div.reply-menu button { padding: 20px 24px !important; font-size: 13px !important; height: 60px !important; line-height: 1.2 !important; min-height: 60px !important; max-height: 60px !important; box-sizing: border-box !important; width: 100% !important; border: none !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; z-index: 9999 !important; } /* Edit button color */ body .comment-menu button:first-child, html .comment-menu button:first-child, * .comment-menu button:first-child, div.comment-menu button:first-child, body .reply-menu button:first-child, html .reply-menu button:first-child, * .reply-menu button:first-child, div.reply-menu button:first-child { color: white !important; } /* Delete button color - CZERWONY! */ body .comment-menu button:last-child, html .comment-menu button:last-child, * .comment-menu button:last-child, div.comment-menu button:last-child, body .reply-menu button:last-child, html .reply-menu button:last-child, * .reply-menu button:last-child, div.reply-menu button:last-child { color: #f87171 !important; } body .comment-menu button svg, html .comment-menu button svg, * .comment-menu button svg, div.comment-menu button svg, body .reply-menu button svg, html .reply-menu button svg, * .reply-menu button svg, div.reply-menu button svg { width: 16px !important; height: 16px !important; margin-right: 10px !important; flex-shrink: 0 !important; } /* NUCLEAR FIX for mobile comments three dots positioning */ body div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="relative group"], html div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="relative group"] { position: absolute !important; right: 0 !important; top: 0 !important; margin: 0 !important; flex-shrink: 0 !important; white-space: nowrap !important; display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; z-index: 10 !important; width: auto !important; min-width: 32px !important; } body div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"], html div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] { align-items: flex-start !important; flex-wrap: nowrap !important; width: 100% !important; display: flex !important; justify-content: space-between !important; position: relative !important; padding-right: 40px !important; } body div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="flex-1"], html div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="flex-1"] { min-width: 0 !important; overflow-wrap: break-word !important; word-break: break-word !important; flex-shrink: 1 !important; max-width: calc(100% - 40px) !important; } .comment-menu button[onclick*="delete"], .reply-menu button[onclick*="delete"] { color: #ef4444 !important; } .comment-menu button[onclick*="edit"], .reply-menu button[onclick*="edit"] { color: white !important; } } /* MESSAGE HEADER ALIGNMENT - TABLET FIX */ @media (min-width: 769px) and (max-width: 1024px) { /* Force message headers to align left on tablets */ #messages-list .flex.items-center.space-x-2.mb-1, .flex.items-center.space-x-2.mb-1 { justify-content: flex-start !important; text-align: left !important; align-items: center !important; display: flex !important; width: 100% !important; } } /* Tablet specific styles (769px - 1024px) - MUST override mobile styles */ @media (min-width: 769px) and (max-width: 1024px) { /* FORCE FANS SIDEBAR TO BE COLLAPSED AND HIDE TOGGLE BUTTON ON TABLETS */ #fan-sidebar { width: 140px !important; } #fan-sidebar .sidebar-text { display: none !important; opacity: 0 !important; visibility: hidden !important; } #fan-sidebar .sidebar-item { justify-content: center !important; align-items: center !important; padding: 1rem !important; width: 3.5rem !important; height: 3.5rem !important; min-width: 3.5rem !important; min-height: 3.5rem !important; border-radius: 9999px !important; margin: 0.75rem auto !important; display: flex !important; } /* Push down all sidebar items except logout */ #fan-sidebar .sidebar-item:not([href*="logout"]) { margin-top: 1rem !important; } /* Center logout button specifically for tablets */ #fan-sidebar a[href*="logout"] { justify-content: center !important; align-items: center !important; padding: 1rem !important; width: 3.5rem !important; height: 3.5rem !important; min-width: 3.5rem !important; min-height: 3.5rem !important; border-radius: 9999px !important; margin: 0.75rem auto !important; display: flex !important; space-x: 0 !important; } /* Remove space-x class effect on logout for tablets */ #fan-sidebar a[href*="logout"] > * { margin-left: 0 !important; margin-right: 0 !important; } /* Keep first item (after wallet) with normal margin */ #fan-sidebar .sidebar-item:first-of-type { margin-top: 0.75rem !important; } #fan-sidebar .wallet-container { text-align: center !important; padding: 0.5rem 1rem !important; margin: 2rem 0.1rem 0.5rem 0.1rem !important; border-radius: 12px !important; width: calc(100% - 0.2rem) !important; } #fan-sidebar .wallet-amount { font-size: 0.875rem !important; text-align: center !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; } #fan-sidebar #add-funds-btn { width: 2rem !important; height: 2rem !important; padding: 0.25rem !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } #fan-sidebar .add-funds-plus-icon { display: block !important; } #fan-sidebar-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #fan-sidebar #fan-sidebar-toggle svg { display: none !important; } .ml-72 { margin-left: 140px !important; } /* DASHBOARD MESSAGES: Adjust for collapsed sidebar on tablets - NUCLEAR OVERRIDE */ body .dashboard-messages-container, html .dashboard-messages-container, .dashboard-messages-container, div.dashboard-messages-container, .fixed.dashboard-messages-container { margin-left: 80px !important; /* Correct margin for main sidebar (80px collapsed) */ left: 80px !important; width: calc(100% - 80px) !important; } /* FANS MESSAGES: Also adjust chat area for tablets */ body #chat-area.mobile-active, html #chat-area.mobile-active, #chat-area.mobile-active { left: 140px !important; width: calc(100% - 140px) !important; margin-left: 0 !important; } /* APPLY SAME STYLE AS HTML INLINE - TOP 64PX BOTTOM 0 */ .dashboard-messages-container { top: 64px !important; bottom: 0 !important; position: fixed !important; } /* Income Charts - Optimal height for tablets with collapsed sidebar */ .chart-container { height: 300px !important; min-height: 300px !important; } .chart-container canvas { height: 280px !important; max-height: 280px !important; min-height: 280px !important; } /* Ensure charts resize properly */ #incomeTrendChart, #categoryChart, #incomeSourcesChart { height: 280px !important; max-height: 280px !important; } /* MEDIA CONTAINER TABLET RESPONSIVE */ .media-toolbar { padding: 12px 16px !important; flex-wrap: wrap !important; gap: 12px !important; align-items: flex-start !important; } .breadcrumb-nav { flex: 1 1 100% !important; margin-bottom: 8px !important; } .media-actions { flex: 1 1 100% !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-start !important; } .search-sort-controls { flex: 1 1 100% !important; margin-right: 0 !important; margin-bottom: 8px !important; flex-wrap: wrap !important; gap: 8px !important; } .search-container { margin-right: 8px !important; } .search-container input { width: 180px !important; font-size: 13px !important; } .btn-media { padding: 6px 12px !important; font-size: 13px !important; white-space: nowrap !important; } /* Specific button adjustments */ button[onclick*="toggleSelectMode"] { flex-shrink: 0 !important; } /* Show context menu (three dots) always visible on tablets */ .media-item .context-menu { opacity: 1 !important; transform: scale(1) !important; } /* FORCE MESSAGE ACTIONS WRAPPER ALWAYS VISIBLE ON TABLETS */ #messages-list .message-actions-wrapper, .message-actions-wrapper { position: absolute !important; left: -45px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 15 !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* THREE DOTS BUTTON VISIBILITY ON TABLETS */ /* For messages with media - always visible but subtle */ #messages-list .message-with-media .tablet-always-visible, .message-with-media .tablet-always-visible { opacity: 0.3 !important; visibility: visible !important; display: block !important; transition: opacity 0.2s ease !important; } /* For messages with media - full opacity on hover */ #messages-list .message-with-media:hover .tablet-always-visible, .message-with-media:hover .tablet-always-visible { opacity: 1 !important; } /* For text-only messages - hidden until clicked */ #messages-list .message-text-only .tablet-always-visible, .message-text-only .tablet-always-visible { opacity: 0 !important; visibility: hidden !important; display: none !important; } /* For text-only messages - visible when message is clicked/active */ #messages-list .message-text-only.message-active .tablet-always-visible, .message-text-only.message-active .tablet-always-visible { opacity: 0.7 !important; visibility: visible !important; display: block !important; } /* FORCE THREE DOTS BUTTON ALWAYS VISIBLE ON TABLETS */ #messages-list .relative.flex-shrink-0 button, .relative.flex-shrink-0 button, #messages-list button[onclick*="showMessageActions"], button[onclick*="showMessageActions"] { opacity: 1 !important; visibility: visible !important; display: flex !important; background: rgba(0, 0, 0, 0.8) !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; color: white !important; border: none !important; cursor: pointer !important; padding: 6px !important; } /* ENSURE MEDIA CONTAINERS HAVE PROPER POSITIONING FOR ACTIONS */ #messages-list .message-media, #messages-list .gallery-container, #messages-list .single-media-container, .message-media, .gallery-container, .single-media-container { position: relative !important; } /* ENSURE MESSAGE CONTENT CONTAINERS HAVE PROPER POSITIONING */ #messages-list .flex.justify-end > div, #messages-list .flex.justify-start > div { position: relative !important; } /* FORCE identical positioning for both menu items */ [id^="post-menu-"] > a, [id^="post-menu-"] > button { display: flex !important; align-items: center !important; padding-left: 16px !important; padding-right: 16px !important; padding-top: 10px !important; padding-bottom: 10px !important; margin: 0 !important; box-sizing: border-box !important; } [id^="post-menu-"] > a > svg, [id^="post-menu-"] > button > svg { width: 16px !important; height: 16px !important; margin-right: 12px !important; margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; flex-shrink: 0 !important; } /* FORCE SIDEBAR TO ALWAYS BE COLLAPSED ON TABLETS - NO EXPANSION POSSIBLE */ #sidebar, div#sidebar { width: 80px !important; min-width: 80px !important; max-width: 80px !important; flex-basis: 80px !important; } /* FIX SIDEBAR CONTAINER WIDTH ON TABLETS - CRITICAL FOR CLICKS */ #sidebar-container, div#sidebar-container { width: 80px !important; min-width: 80px !important; max-width: 80px !important; flex-basis: 80px !important; } /* FORCE COLLAPSED CLASS ON SIDEBAR */ #sidebar { --sidebar-width: 70px !important; } /* COMPLETELY HIDE SIDEBAR TOGGLE BUTTON ON TABLETS */ #sidebar-toggle, #toggle-container, button[id="sidebar-toggle"], div[id="toggle-container"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; z-index: -1 !important; } /* FORCE SIDEBAR INTO COLLAPSED STATE */ #sidebar { padding: 1.5rem !important; } /* FORCE ALL SIDEBAR ITEMS TO COLLAPSED APPEARANCE */ #sidebar .sidebar-item { justify-content: center !important; padding: 0.875rem !important; width: 3rem !important; height: 3rem !important; min-width: 3rem !important; min-height: 3rem !important; border-radius: 9999px !important; } /* HIDE ALL SIDEBAR TEXT ON TABLETS */ #sidebar .sidebar-text { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* FORCE TOOLTIPS TO BE VISIBLE ON TABLETS */ #sidebar .sidebar-tooltip { display: block !important; } /* ADJUST MAIN CONTENT MARGIN FOR COLLAPSED SIDEBAR ON TABLETS */ .main-content, #main-content { margin-left: 70px !important; } /* FORCE BODY TO HAVE COLLAPSED SIDEBAR CLASS BEHAVIOR */ body { --sidebar-width: 70px !important; } /* OVERRIDE ANY JAVASCRIPT THAT MIGHT TRY TO EXPAND SIDEBAR - TABLET ONLY */ @media (min-width: 768px) and (max-width: 1024px) { #sidebar.expanded { width: 80px !important; min-width: 80px !important; max-width: 80px !important; } #sidebar.expanded .sidebar-text { display: none !important; opacity: 0 !important; visibility: hidden !important; } } /* COLLAPSED SIDEBAR SHOULD BE EVEN SMALLER - BRUTALLY OVERRIDE JAVASCRIPT */ #sidebar.collapsed { width: 70px !important; min-width: 70px !important; max-width: 70px !important; } /* DISABLE SIDEBAR HOVER EFFECTS ON TABLETS */ #sidebar:hover { width: 70px !important; } /* ENSURE SETTINGS SIDEBARS ALSO ADJUST FOR COLLAPSED MAIN SIDEBAR */ .settings-sidebar { left: 80px !important; } .settings-content { margin-left: 360px !important; /* 80px (collapsed sidebar) + 280px (settings sidebar) */ } } /* TABLET JAVASCRIPT OVERRIDE */ @media (min-width: 769px) and (max-width: 1024px) { /* Add a CSS-only solution to force collapsed state */ body::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: -1; } /* Override any inline styles on sidebar */ #sidebar[style] { width: 80px !important; min-width: 80px !important; max-width: 80px !important; } /* Upload Modal - Tablet specific styles */ #uploadModal .modal-content { width: 70vw !important; max-width: 700px !important; min-width: 0 !important; margin: 2.5vh auto !important; padding: 1.5rem !important; border-radius: 12px !important; } #uploadModal .modal { padding: 0 !important; } /* Hide Select Folder button on tablets */ #uploadModal .folder-btn, #uploadModal button[onclick*="folderInput"] { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Override mobile CSS for tablets - prevent vertical stacking */ .post-card .post-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; padding: 1rem !important; } /* Ensure post-header stays horizontal and menu button doesn't wrap */ .post-card .post-header > div:first-child { flex: 1 !important; min-width: 0 !important; /* Allow text truncation if needed */ display: flex !important; align-items: center !important; } .post-card .post-header > div:last-child { flex-shrink: 0 !important; margin-left: 8px !important; display: flex !important; align-items: center !important; } /* Ensure proper layout for tablet post meta area */ .post-card .post-meta { flex: 1 !important; min-width: 0 !important; } .post-card .post-badges { flex-wrap: wrap !important; max-width: 100% !important; } /* Hide mobile badges container on tablets */ .mobile-badges-container, .tablet-hide { display: none !important; } /* FORCE ENABLE modal onclick events on tablets for fans post-card */ div.post-card img[onclick*="openFansModal"], div.post-card video[onclick*="openFansModal"], div.post-card button[onclick*="openFansModal"], .post-card img[onclick*="openFansModal"], .post-card video[onclick*="openFansModal"], .post-card button[onclick*="openFansModal"] { pointer-events: auto !important; cursor: pointer !important; } } /* Simple tablet fix - ONLY hide the problematic div */ @media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) { .mobile-badges-container { display: none !important; } } /* Mobile form styles */ .post-card .post-header, div.post-card .post-header, div[class*="post-card"] .post-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; padding: 1rem !important; display: flex !important; width: 100% !important; box-sizing: border-box !important; } /* Force the three dots button to stay on the same line */ .post-card .post-header > div:last-child, div.post-card .post-header > div:last-child { flex-shrink: 0 !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; white-space: nowrap !important; min-width: auto !important; width: auto !important; } /* Ensure left side can compress */ .post-card .post-header > div:first-child, div.post-card .post-header > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; overflow: hidden !important; } /* Ultra specific fix for the menu button that wraps */ .post-card .post-header .relative, .post-card .post-header .post-menu-btn, .post-card .post-header button[class*="post-menu"], .post-card .post-header [data-post-id] { flex-shrink: 0 !important; margin-left: 8px !important; } /* Ensure the right side container never wraps */ .post-card .post-header .flex.items-center.space-x-2, .post-card .post-header > div:last-child .flex { flex-wrap: nowrap !important; white-space: nowrap !important; } /* Fix menu positioning on tablets - center it vertically relative to button */ div.post-card div.post-header div.relative div.absolute[id*="post-menu"], div.post-card div.post-header div[id^="post-menu-"], .post-card .post-header .relative .absolute[id*="post-menu"], .post-card [id^="post-menu-"] { top: 70% !important; transform: translateY(-30%) !important; right: 100% !important; margin-right: 8px !important; position: absolute !important; } /* Ultra specific fix for every possible menu selector */ [id^="post-menu-"] { top: 70% !important; transform: translateY(-30%) !important; } div[id^="post-menu-"] { top: 70% !important; transform: translateY(-30%) !important; } /* Fix button alignment inside post menu on tablets */ [id^="post-menu-"] a, [id^="post-menu-"] button, [id^="post-menu-"] .delete-post-btn, button.delete-post-btn { margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 8px 16px !important; display: flex !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; } /* Force SVG margins in post menu to be identical on tablets */ [id^="post-menu-"] svg.w-4.h-4.mr-3, [id^="post-menu-"] svg { margin-right: 12px !important; margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; width: 16px !important; height: 16px !important; } } /* Make sure form-input class works on mobile */ @media (max-width: 768px) { .form-input { width: 100%; padding: 0.75rem 1rem; background-color: #374151; border: 1px solid #4B5563; border-radius: 0.5rem; color: #F3F4F6; font-size: 0.875rem; transition: all 0.2s; } .form-input:focus { outline: none; border-color: #3B82F6; background-color: #4B5563; } } /* Mobile replies styling */ .replies-container .reply-item { padding: 8px 0 !important; border-left: 2px solid #374151 !important; padding-left: 12px !important; margin-left: 8px !important; } .replies-container .reply-item:last-child { border-left-color: transparent !important; } /* Post header adjustments for mobile */ .post-card .post-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; padding: 0.75rem !important; } .post-card .post-header > div:first-child { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .post-card .post-header > div:last-child { width: 100% !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 0.5rem !important; } /* FIX: Force post-badges to align left */ .post-card .post-meta .post-badges { justify-content: flex-start !important; } /* Date and badge layout for mobile */ .post-card .post-date { font-size: 0.75rem !important; margin-top: 0.25rem !important; } /* Wszystkie elementy z openFansModal są teraz klikalne - logika w JS */ .post-card img[onclick*="openFansModal"], .post-card video[onclick*="openFansModal"], .post-card button[onclick*="openFansModal"] { pointer-events: auto !important; cursor: pointer !important; } /* Re-enable pointer events for like and share buttons on mobile */ .post-card .like-btn, .post-card .share-btn, .post-card .follow-btn, .post-card .post-menu-btn { pointer-events: auto !important; } .post-card .paid-badge { font-size: 0.75rem !important; padding: 0.25rem 0.75rem !important; } /* Follow button adjustments */ .post-card .follow-btn { padding: 0.5rem 1rem !important; font-size: 0.75rem !important; } /* Post Footer mobile spacing adjustments - more specific selectors */ .post-card > div:last-child { padding: 0.5rem 0.75rem !important; } .post-card > div:last-child > div:first-child { gap: 0.5rem !important; margin-left: 0 !important; margin-right: 0 !important; } .post-card > div:last-child > div:first-child > * { margin-left: 0 !important; margin-right: 0.5rem !important; } .post-card > div:last-child > div:last-child { margin-top: 0.5rem !important; } } /* Extra small mobile devices (390px and below) */ @media (max-width: 390px) { .post-card .post-header { padding: 0.5rem !important; } .post-card .post-header > div:last-child { flex-wrap: wrap !important; gap: 0.25rem !important; } .post-card .paid-badge { font-size: 0.7rem !important; padding: 0.2rem 0.6rem !important; } .post-card .follow-btn { padding: 0.4rem 0.8rem !important; font-size: 0.7rem !important; } } /* Responsive Dashboard */ .dashboard-grid { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; min-height: calc(100vh - 200px); } @media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 200px 1fr; gap: 1rem; } } /* FANS FEED MOBILE FIXES - NUCLEAR FORCE WSZYSTKO */ @media (max-width: 768px) { /* FANS FEED MOBILE FILTERS - OVERRIDE SPACE-X-3 */ body[data-page="fans"] .space-x-3 > :not([hidden]) ~ :not([hidden]), .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 1px !important; } body[data-page="fans"] .feed-filters-row select, .feed-filters-row select { flex: 2 !important; font-size: 10px !important; padding: 3px !important; height: 28px !important; } body[data-page="fans"] .feed-filters-row .filter-btn, .feed-filters-row .filter-btn { flex: 1 !important; font-size: 10px !important; padding: 3px 2px !important; height: 28px !important; } /* Mobile comment menu styling - NUCLEAR FORCE OVERRIDE EVERYTHING */ body .comment-menu, html .comment-menu, * .comment-menu, div.comment-menu, body .reply-menu, html .reply-menu, * .reply-menu, div.reply-menu { width: 80px !important; min-width: 80px !important; height: 120px !important; min-height: 120px !important; max-height: 120px !important; right: 0 !important; left: auto !important; top: 6px !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; z-index: 9999 !important; } body .comment-menu button, html .comment-menu button, * .comment-menu button, div.comment-menu button, body .reply-menu button, html .reply-menu button, * .reply-menu button, div.reply-menu button { padding: 20px 24px !important; font-size: 13px !important; height: 60px !important; line-height: 1.2 !important; min-height: 60px !important; max-height: 60px !important; box-sizing: border-box !important; width: 100% !important; border: none !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; z-index: 9999 !important; } /* Edit button color */ body .comment-menu button:first-child, html .comment-menu button:first-child, * .comment-menu button:first-child, div.comment-menu button:first-child, body .reply-menu button:first-child, html .reply-menu button:first-child, * .reply-menu button:first-child, div.reply-menu button:first-child { color: white !important; } /* Delete button color - CZERWONY! */ body .comment-menu button:last-child, html .comment-menu button:last-child, * .comment-menu button:last-child, div.comment-menu button:last-child, body .reply-menu button:last-child, html .reply-menu button:last-child, * .reply-menu button:last-child, div.reply-menu button:last-child { color: #f87171 !important; } body .comment-menu button svg, html .comment-menu button svg, * .comment-menu button svg, div.comment-menu button svg, body .reply-menu button svg, html .reply-menu button svg, * .reply-menu button svg, div.reply-menu button svg { width: 16px !important; height: 16px !important; margin-right: 10px !important; flex-shrink: 0 !important; } /* NUCLEAR FIX for mobile comments three dots positioning */ body div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="relative group"], html div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="relative group"] { position: absolute !important; right: 0 !important; top: 0 !important; margin: 0 !important; flex-shrink: 0 !important; white-space: nowrap !important; display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; z-index: 10 !important; width: auto !important; min-width: 32px !important; } body div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"], html div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] { align-items: flex-start !important; flex-wrap: nowrap !important; width: 100% !important; display: flex !important; justify-content: space-between !important; position: relative !important; padding-right: 40px !important; } body div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="flex-1"], html div[class*="flex space-x-3 relative"] div[class*="flex-1"] div[class*="flex justify-between items-start"] div[class*="flex-1"] { min-width: 0 !important; overflow-wrap: break-word !important; word-break: break-word !important; flex-shrink: 1 !important; max-width: calc(100% - 40px) !important; } .comment-menu button[onclick*="delete"], .reply-menu button[onclick*="delete"] { color: #ef4444 !important; } .comment-menu button[onclick*="edit"], .reply-menu button[onclick*="edit"] { color: white !important; } } /* Small Tablets (768px - 900px) - Comprehensive coverage */ @media (min-width: 769px) and (max-width: 900px) { /* Dashboard and Layout */ .dashboard-grid { grid-template-columns: 180px 1fr; gap: 1rem; } /* Sidebar adjustments */ #sidebar-container { width: 180px !important; } .main-content { margin-left: 180px !important; } /* Income Charts - Better height on small tablets */ .chart-container { height: 280px !important; } .chart-container canvas { height: 260px !important; max-height: 260px !important; } /* MESSAGES PAGE SPECIFIC - NO SIDEBAR MARGIN */ body[data-page="messages"] .main-content, body[data-page="messages"] #main-content, .messages-container .main-content, .messages-container #main-content { margin-left: 0 !important; } /* Override CSS variables for messages */ body[data-page="messages"] { --sidebar-width: 0px !important; } /* Target inline styles on messages page */ body[data-page="messages"] [style*="margin-left: var(--sidebar-width"], .messages-container [style*="margin-left: var(--sidebar-width"] { margin-left: 0 !important; } /* Target specific inline style that's fucking up messages */ body[data-page="messages"] [style*="margin-left: var(--sidebar-width, 288px)"], .messages-container [style*="margin-left: var(--sidebar-width, 288px)"] { margin-left: 0 !important; } /* Post cards */ .post-card { padding: 0.75rem; margin-bottom: 0.75rem; } .post-card-image { height: 160px; } /* Forms */ .form-container { padding: 1.25rem; max-width: 100%; } .form-input { padding: 0.625rem; font-size: 0.9rem; } /* Buttons */ .btn-primary, .btn-secondary, .btn-danger { padding: 0.625rem 1.25rem; font-size: 0.9rem; } /* Tables */ .responsive-table th, .responsive-table td { padding: 0.625rem; font-size: 0.9rem; } /* Stats and Cards */ .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; } .stat-card { padding: 1.25rem; } .stat-number { font-size: 1.75rem; } /* Profile */ .profile-header { grid-template-columns: 150px 1fr; gap: 1.5rem; } .profile-avatar { width: 150px; height: 150px; } /* Wallet */ .wallet-card { padding: 1.75rem; } .wallet-balance { font-size: 2.25rem; } /* Messages */ .messages-container { grid-template-columns: 260px 1fr; } /* Gallery */ .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } /* Comments */ .comment-item { padding: 0.875rem; } /* Modals */ .modal-content { padding: 1.5rem; max-width: 95%; } /* Typography adjustments */ .text-2xl { font-size: 1.375rem !important; } .text-xl { font-size: 1.125rem !important; } .text-lg { font-size: 1rem !important; } /* Spacing adjustments */ .py-8 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .mb-8 { margin-bottom: 1.5rem !important; } .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; } /* Grid adjustments */ .grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Navigation and footer */ .mobile-bottom-nav { display: none !important; } /* Disable sidebar modal on small tablets */ .sidebar-modal, #sidebarModal { display: none !important; } /* Income dashboard specific */ .income-card { padding: 1.25rem; margin-bottom: 1rem; } .chart-container { height: 250px; } /* Responsive utilities */ .max-w-7xl { padding-left: 1rem !important; padding-right: 1rem !important; } .container { padding-left: 1rem !important; padding-right: 1rem !important; } } /* Large Tablets / Small Desktops (901px - 1699px) - Extended range */ @media (min-width: 901px) and (max-width: 1699px) { /* Force CSS variable to 220px for this range */ :root { --sidebar-width: 220px !important; } /* Dashboard and Layout */ .dashboard-grid { grid-template-columns: 220px 1fr; gap: 1.5rem; } /* Sidebar adjustments */ #sidebar-container { width: 220px !important; } .main-content { margin-left: 220px !important; } /* Income Charts - Better height on large tablets */ .chart-container { height: 320px !important; } .chart-container canvas { height: 300px !important; max-height: 300px !important; } /* Post cards */ .post-card { padding: 0 !important; margin-bottom: 1rem; } .post-card-image { height: 180px; } /* Forms */ .form-container { padding: 1.5rem; max-width: 90%; } .form-input { padding: 0.75rem; font-size: 0.95rem; } /* Buttons */ .btn-primary, .btn-secondary, .btn-danger { padding: 0.75rem 1.5rem; font-size: 0.95rem; } /* Tables */ .responsive-table th, .responsive-table td { padding: 0.75rem; font-size: 0.95rem; } /* Stats and Cards */ .stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .stat-card { padding: 1.5rem; } .stat-number { font-size: 1.875rem; } /* Profile */ .profile-header { grid-template-columns: 175px 1fr; gap: 1.75rem; } .profile-avatar { width: 175px; height: 175px; } /* Wallet */ .wallet-card { padding: 1.875rem; } .wallet-balance { font-size: 2.375rem; } /* Messages */ .messages-container { grid-template-columns: 280px 1fr; } /* Gallery */ .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } /* Comments */ .comment-item { padding: 1rem; } /* Modals */ .modal-content { padding: 1.75rem; max-width: 85%; } /* Typography adjustments */ .text-2xl { font-size: 1.5rem !important; } .text-xl { font-size: 1.25rem !important; } .text-lg { font-size: 1.125rem !important; } /* Spacing adjustments */ .py-8 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; } .mb-8 { margin-bottom: 1.75rem !important; } .px-6 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /* Grid adjustments */ .grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Navigation and footer */ .mobile-bottom-nav { display: none !important; } /* Disable sidebar modal on large tablets/small desktops */ .sidebar-modal, #sidebarModal { display: none !important; } /* Income dashboard specific */ .income-card { padding: 1.5rem; margin-bottom: 1.25rem; } .chart-container { height: 280px; } /* Responsive utilities */ .max-w-7xl { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /* Flexbox adjustments */ .flex-wrap { flex-wrap: wrap !important; } .gap-4 { gap: 1rem !important; } .gap-6 { gap: 1.25rem !important; } /* Specific adjustments for common layouts */ .rounded-xl { border-radius: 0.75rem !important; } .rounded-lg { border-radius: 0.5rem !important; } /* Post content adjustments */ .post-content { padding: 1rem; } /* Card headers */ .card-header { padding: 1rem 1.25rem; } /* Navigation items */ .nav-item { padding: 0.75rem 1rem; } /* Input groups */ .input-group { margin-bottom: 1.25rem; } /* Alert components */ .alert { padding: 1rem 1.25rem; margin-bottom: 1.25rem; } } @media (max-width: 768px) { .dashboard-grid { grid-template-columns: 1fr; gap: 1rem; } .dashboard-sidebar { position: fixed; left: -100%; top: 0; width: 80%; height: 100vh; z-index: 1000; background: var(--card); transition: left 0.3s ease; overflow-y: auto; } .dashboard-sidebar.active { left: 0; } /* Income Charts - Better height on mobile */ .chart-container { height: 250px !important; min-height: 250px !important; } .chart-container canvas { height: 230px !important; max-height: 230px !important; min-height: 230px !important; } /* Ensure charts resize properly on mobile */ #incomeTrendChart, #categoryChart, #incomeSourcesChart { height: 230px !important; max-height: 230px !important; } /* Show context menu (three dots) always visible on mobile */ .media-item .context-menu { opacity: 1 !important; transform: scale(1) !important; } /* Fix font rendering for all charts on mobile */ .chart-container canvas, #categoryChart, #incomeTrendChart, #incomeSourcesChart { image-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; } /* Ensure proper pixel ratio for crisp text */ .chart-container { transform: translateZ(0) !important; backface-visibility: hidden !important; } } /* Responsive Forms */ .form-container { max-width: 600px; margin: 0 auto; padding: 2rem; } @media (max-width: 768px) { .form-container { padding: 1rem; margin: 0; } } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--foreground); } .form-input { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; background: var(--input); color: var(--foreground); transition: border-color 0.2s; } .form-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px rgba(65, 130, 183, 0.1); } @media (max-width: 768px) { .form-input { padding: 0.5rem; font-size: 16px; /* Prevents zoom on iOS */ } } /* Responsive Tables */ .table-container { overflow-x: auto; border-radius: 0.5rem; border: 1px solid var(--border); } .responsive-table { width: 100%; border-collapse: collapse; min-width: 600px; } .responsive-table th, .responsive-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border); } .responsive-table th { background: var(--card); font-weight: 600; color: var(--foreground); } @media (max-width: 768px) { .responsive-table th, .responsive-table td { padding: 0.5rem; font-size: 0.875rem; } } /* Responsive Modals */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: var(--card); border-radius: 0.5rem; padding: 2rem; max-width: 90%; max-height: 90%; overflow-y: auto; position: relative; } @media (max-width: 768px) { .modal-content { padding: 1rem; margin: 1rem; width: calc(100% - 2rem); } } /* Responsive Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; } } /* Responsive Comments */ .comment-section { margin-top: 2rem; } .comment-item { padding: 1rem; border-bottom: 1px solid var(--border); } .comment-form { margin-bottom: 2rem; } @media (max-width: 768px) { .comment-item { padding: 0.75rem; } .comment-form textarea { min-height: 80px; } } /* Responsive Messages */ .messages-container { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 200px); border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; } .messages-sidebar { border-right: 1px solid var(--border); overflow-y: auto; } .messages-content { display: flex; flex-direction: column; } @media (max-width: 768px) { .messages-container { grid-template-columns: 1fr; height: calc(100vh - 150px); } .messages-sidebar { position: fixed; left: -100%; top: 0; width: 100%; height: 100vh; z-index: 1000; background: var(--card); transition: left 0.3s ease; } .messages-sidebar.active { left: 0; } } /* Responsive Wallet */ .wallet-card { background: linear-gradient(135deg, #4182b7 0%, #1674ae 100%); color: white; padding: 2rem; border-radius: 0.5rem; text-align: center; } .wallet-balance { font-size: 2.5rem; font-weight: bold; margin: 1rem 0; } @media (max-width: 768px) { .wallet-card { padding: 1.5rem; } .wallet-balance { font-size: 2rem; } } /* Responsive Profile */ .profile-header { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: center; margin-bottom: 2rem; } .profile-avatar { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; } @media (max-width: 768px) { .profile-header { grid-template-columns: 1fr; text-align: center; gap: 1rem; } .profile-avatar { width: 150px; height: 150px; margin: 0 auto; } } /* Responsive Stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card { background: var(--card); padding: 1.5rem; border-radius: 0.5rem; text-align: center; border: 1px solid var(--border); } .stat-number { font-size: 2rem; font-weight: bold; color: var(--accent); } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-card { padding: 1rem; } .stat-number { font-size: 1.5rem; } } /* Responsive Buttons */ .btn-primary { background: var(--accent); color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); padding: 0.75rem 1.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-danger { background: #dc2626; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } @media (max-width: 768px) { .btn-primary, .btn-secondary, .btn-danger { padding: 0.5rem 1rem; font-size: 0.875rem; width: 100%; margin-bottom: 0.5rem; } } /* Responsive Loading States */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--border); border-radius: 50%; border-top-color: var(--accent); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive Utilities */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .text-truncate { white-space: normal; overflow: visible; text-overflow: clip; } } /* Responsive Spacing */ .space-y-responsive > * + * { margin-top: 1rem; } @media (max-width: 768px) { .space-y-responsive > * + * { margin-top: 0.75rem; } } /* Responsive Visibility */ @media (max-width: 768px) { .hidden-mobile { display: none !important; } .visible-mobile { display: block !important; } } @media (min-width: 769px) { .hidden-desktop { display: none !important; } .visible-desktop { display: block !important; } } @media (max-width: 768px) { .image-indicators, .indicator, .indicator-btn { display: none !important; } } @media (max-width: 768px) { /* Przyciski upload/add-from-vault - ikona na górze, tekst pod spodem */ #upload-options button, .upload-option-btn { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 1.25rem 0.5rem !important; } #upload-options button svg, .upload-option-btn svg { margin: 0 !important; width: 28px !important; height: 28px !important; display: block; } #upload-options button span, .upload-option-btn span { font-size: 0.95rem !important; margin: 0 !important; text-align: center !important; line-height: 1.2 !important; } /* Schedule i Add to collection - mniejsza czcionka */ #schedule-action-btn span, #collection-btn span, #schedule-action-btn, #collection-btn { font-size: 0.95rem !important; padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; } #collection-btn { white-space: nowrap !important; } } @media (max-width: 768px) { #media-container-modal .bg-\[\#1a1a1a\], #media-container-modal > div, #messages-media-container-modal .bg-\[\#1a1a1a\], #messages-media-container-modal > div { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; display: flex; flex-direction: column; } #media-container-modal .p-6, #media-container-modal .px-6, #media-container-modal .py-4, #media-container-modal .border-t, #media-container-modal .border-b, #messages-media-container-modal .p-6, #messages-media-container-modal .px-6, #messages-media-container-modal .py-4, #messages-media-container-modal .border-t, #messages-media-container-modal .border-b { padding: 0.75rem !important; } #media-container-modal .flex-1.p-6, #messages-media-container-modal .flex-1.p-6 { padding: 0.5rem !important; padding-bottom: 4.5rem !important; } #media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; } /* HIDE MOBILE MESSAGES NAVIGATION WHEN MEDIA MODAL IS OPEN */ #messages-media-container-modal:not(.hidden) ~ * .mobile-messages-nav, body:has(#messages-media-container-modal:not(.hidden)) .mobile-messages-nav { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #media-container-modal h3, #messages-media-container-modal h3 { font-size: 1.1rem !important; } #media-container-modal .w-64, #media-container-modal .min-w-\[140px\], #messages-media-container-modal .w-64, #messages-media-container-modal .min-w-\[140px\] { width: 100% !important; min-width: 0 !important; } #media-container-modal .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } #media-container-modal .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } #media-container-modal .p-2 { padding: 0.25rem !important; } #media-container-modal .rounded-lg { border-radius: 0.5rem !important; } #media-container-modal .text-xl { font-size: 1rem !important; } #media-container-modal .text-2xl { font-size: 1.2rem !important; } #media-container-modal .text-4xl { font-size: 1.5rem !important; } #media-container-modal .py-2, #media-container-modal .px-4, #media-container-modal .px-6, #media-container-modal .py-4, #media-container-modal .p-6 { font-size: 0.95rem !important; } #media-container-modal .w-full { width: 100% !important; } #media-container-modal .h-24 { height: 4.5rem !important; } #media-container-modal .gap-4 { gap: 0.5rem !important; } #media-container-modal .max-w-7xl { max-width: 100vw !important; } #media-container-modal .mx-4 { margin-left: 0 !important; margin-right: 0 !important; } #media-container-modal .p-6 { padding: 0.75rem !important; } #media-container-modal .border-b, #media-container-modal .border-t { border-width: 1px !important; } #media-container-modal .rounded-lg { border-radius: 0.5rem !important; } #media-container-modal .flex { flex-wrap: wrap; } #media-container-modal .gap-3, #media-container-modal .gap-4 { gap: 0.5rem !important; } #media-container-modal .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } #media-container-modal .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } #media-container-modal .p-2 { padding: 0.25rem !important; } #media-container-modal .rounded-lg { border-radius: 0.5rem !important; } #media-container-modal .text-xl { font-size: 1rem !important; } #media-container-modal .text-2xl { font-size: 1.2rem !important; } #media-container-modal .text-4xl { font-size: 1.5rem !important; } #media-container-modal .py-2, #media-container-modal .px-4, #media-container-modal .px-6, #media-container-modal .py-4, #media-container-modal .p-6 { font-size: 0.95rem !important; } #media-container-modal .w-full { width: 100% !important; } #media-container-modal .h-24 { height: 4.5rem !important; } #media-container-modal .gap-4 { gap: 0.5rem !important; } #media-container-modal .max-w-7xl { max-width: 100vw !important; } #media-container-modal .mx-4 { margin-left: 0 !important; margin-right: 0 !important; } #media-container-modal .p-6 { padding: 0.75rem !important; } #media-container-modal .border-b, #media-container-modal .border-t { border-width: 1px !important; } #media-container-modal .rounded-lg { border-radius: 0.5rem !important; } #media-container-modal .flex { flex-wrap: wrap; } #media-container-modal .gap-3, #media-container-modal .gap-4 { gap: 0.5rem !important; } } @media (max-width: 768px) { #media-container-modal > div, #messages-media-container-modal > div { position: relative !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; display: flex; flex-direction: column; } #media-container-modal .flex-1.p-6, #messages-media-container-modal .flex-1.p-6 { overflow-y: auto !important; flex: 1 1 auto !important; height: auto !important; padding-bottom: 0 !important; } #media-container-modal .border-t, #messages-media-container-modal .border-t { position: absolute !important; left: 0; right: 0; bottom: 60px; width: 100%; background: #1a1a1a; z-index: 101; border-top: 1px solid #4b5563; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } } #media-container-modal > div { display: flex; flex-direction: column; height: 90vh; } #media-container-modal .flex-1.p-6 { overflow-y: auto; flex: 1 1 auto; } #media-container-modal .border-t { /* TESTOWE STYLE USUNIĘTE */ } #media-container-modal .border-t * { /* TESTOWE STYLE USUNIĘTE */ } /* Poprawka: okrągły przycisk X do usuwania obrazka */ button[title="Remove image"], button[title="Remove video"], button[title^="Remove "] { min-width: 32px !important; min-height: 32px !important; width: 32px !important; height: 32px !important; aspect-ratio: 1/1 !important; border-radius: 9999px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } @media (max-width: 768px) { /* Zmniejsz czcionkę w powiadomieniach na mobile */ .notification, .notification-title, .notification-body, .notification-date { font-size: 0.95rem !important; } .notification-title { font-weight: 600 !important; } .notification-body { font-size: 0.9rem !important; } .notification-date { font-size: 0.8rem !important; color: #aaa !important; } } @media (max-width: 768px) { .notification-item { position: relative !important; padding: 10px 0 22px 0 !important; gap: 10px !important; min-height: 56px !important; } .notification-meta { position: absolute !important; right: 0.5rem !important; bottom: 0.3rem !important; flex-direction: row !important; gap: 6px !important; background: none !important; font-size: 0.8rem !important; } .notification-content { min-width: 0; width: 100%; } .notification-header { flex-wrap: wrap; gap: 4px !important; } } @media (max-width: 768px) { .notifications-title { font-size: 2rem !important; } .section-title { font-size: 1.1rem !important; margin-bottom: 10px !important; margin-top: 20px !important; } .notifications-content { padding: 12px !important; } .notification-item { padding: 10px 0 !important; gap: 10px !important; } .notification-username { font-size: 1rem !important; } .notification-action { font-size: 0.95rem !important; } .notification-message { font-size: 0.9rem !important; } .notification-time { font-size: 0.8rem !important; } } @media (max-width: 768px) { .max-w-7xl { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .income-card { padding: 1rem !important; margin-bottom: 1rem !important; } .grid { gap: 0.75rem !important; } .text-2xl, .text-xl, .font-bold { font-size: 1.1rem !important; font-weight: 600 !important; } .text-sm { font-size: 0.95rem !important; } .text-xs { font-size: 0.8rem !important; } .py-8, .mb-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; margin-bottom: 1rem !important; } .rounded-xl { border-radius: 0.75rem !important; } .grid-cols-1, .md\:grid-cols-2, .lg\:grid-cols-4 { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { /* Fix upload modal width issues on mobile */ #uploadModal .modal-content { width: 95vw !important; max-width: 95vw !important; min-width: 0 !important; margin: 2.5vw auto !important; padding: 1rem !important; } #uploadModal .modal { padding: 0 !important; } #uploadModal .upload-zone { padding: 2rem 1rem !important; margin: 1rem 0 !important; } #uploadModal .upload-buttons { flex-direction: column !important; gap: 0.5rem !important; } #uploadModal .media-actions { padding: 1rem !important; flex-direction: column !important; gap: 0.5rem !important; } #uploadModal .media-actions button { width: 100% !important; } #sidebar-container { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0 !important; z-index: -1 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* TYLKO MARGIN-LEFT ZERO - NIC WIĘCEJ */ .main-content, #main-content { margin-left: 0 !important; margin-bottom: 60px !important; } /* OVERRIDE CSS VARIABLE */ :root { --sidebar-width: 0px !important; } /* TARGET INLINE STYLES */ [style*="margin-left: var(--sidebar-width, 288px)"] { margin-left: 0 !important; } .mobile-bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 60px !important; background: #323232 !important; border-top: 1px solid #666 !important; z-index: 50 !important; display: flex !important; justify-content: space-around !important; align-items: center !important; padding: 0 20px !important; transition: transform 0.3s ease-in-out !important; } } /* PHONE ONLY NAV HIDE RULES - NO POSITION FIXED */ @media (max-width: 480px) { /* Make body a flex container */ html, body { height: 100vh !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; } /* Main content takes remaining space */ .main-content { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } html body .mobile-bottom-nav { display: none !important; width: 100% !important; height: 60px !important; background: #323232 !important; border-top: 1px solid #666 !important; justify-content: space-around !important; align-items: center !important; padding: 0 20px !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; margin-top: auto !important; flex-shrink: 0 !important; transition: all 0.3s ease-in-out !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; } html body .mobile-bottom-nav.show-nav { display: flex !important; } } /* DISABLE MOBILE NAVIGATION ON ALL NON-MOBILE SCREENS - NUCLEAR OVERRIDE */ @media (min-width: 769px) { /* Disable sidebar modal */ .sidebar-modal, #sidebarModal, div[id="sidebarModal"], div.sidebar-modal { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; z-index: -1 !important; overflow: hidden !important; } .sidebar-modal-content, .sidebar-modal * { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* DISABLE MOBILE BOTTOM NAV - AGGRESSIVE OVERRIDE */ .mobile-bottom-nav, div.mobile-bottom-nav { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; z-index: -1 !important; overflow: hidden !important; } .mobile-bottom-nav *, .mobile-nav-item { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Disable any button that triggers sidebar modal */ button[onclick*="toggleSidebarModal"], button[onclick*="toggleSidebarModal()"], .mobile-nav-item[onclick*="toggleSidebarModal"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Remove bottom margin from main content on non-mobile */ .main-content { margin-bottom: 0 !important; } } /* FINAL NUCLEAR OVERRIDE - DISABLE MOBILE NAV ON ALL NON-MOBILE SCREENS */ @media (min-width: 769px) { body .mobile-bottom-nav, html .mobile-bottom-nav, * .mobile-bottom-nav, div.mobile-bottom-nav, .mobile-bottom-nav { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; z-index: -1 !important; overflow: hidden !important; } } /* FINAL NUCLEAR OVERRIDE - DISABLE SIDEBAR MODAL ON ALL NON-MOBILE SCREENS */ @media (min-width: 769px) { body .sidebar-modal, html .sidebar-modal, * .sidebar-modal, body #sidebarModal, html #sidebarModal, * #sidebarModal { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; z-index: -1 !important; overflow: hidden !important; } } @media (min-width: 1024px) { /* Income dashboard: wykresy w proporcji 2/3 i 1/3 */ .income-charts-row { display: grid !important; grid-template-columns: 2fr 1fr !important; gap: 1.5rem !important; align-items: stretch !important; } .income-category-chart { grid-column: 1 / span 1 !important; } .income-sources-chart { grid-column: 2 / span 1 !important; } } @media (min-width: 1024px) { /* Wymuś proporcje 2/3 i 1/3 dla grid-cols-3 w income dashboard */ .income-charts-row.grid.grid-cols-1.lg\:grid-cols-3 { display: grid !important; grid-template-columns: 2fr 1fr !important; gap: 1.5rem !important; align-items: stretch !important; } .income-category-chart { grid-column: 1 / span 1 !important; } .income-sources-chart { grid-column: 2 / span 1 !important; } } /* Creator Tools - General Styles */ .creator-tools-container { background: #1a1a1a; color: white; } .creator-tools-card { background: #1f2937; border: 1px solid #374151; border-radius: 0.75rem; } .creator-tools-button { background: #374151; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease; } .creator-tools-button:hover { background: #4b5563; } .creator-tools-button.primary { background: #2563eb; } .creator-tools-button.primary:hover { background: #1d4ed8; } .creator-tools-button.danger { background: #dc2626; } .creator-tools-button.danger:hover { background: #b91c1c; } /* Creator Tools - Form Styles */ .creator-tools-input { background: #374151; border: 1px solid #4b5563; color: white; padding: 0.75rem; border-radius: 0.5rem; width: 100%; } .creator-tools-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .creator-tools-textarea { background: #374151; border: 1px solid #4b5563; color: white; padding: 0.75rem; border-radius: 0.5rem; width: 100%; resize: vertical; min-height: 100px; } .creator-tools-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* Creator Tools - Message Styles */ .message-preview { background: #374151; border: 1px solid #4b5563; border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; } .message-media { max-width: 350px; width: auto; height: auto; border-radius: 8px; overflow: hidden; } .message-media img { max-width: 100%; max-height: 400px; width: auto; height: auto; object-fit: contain; border-radius: 8px; display: block; } .message-media video { max-width: 100%; max-height: 400px; width: auto; height: auto; object-fit: contain; border-radius: 8px; display: block; } /* Creator Tools - Gallery Styles */ .gallery-container { position: relative; border-radius: 12px; overflow: visible; background: transparent; } .gallery-slide { width: 100%; height: 100%; } .gallery-slide.hidden { display: none; } .gallery-slide.active { display: block; } .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 12px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 30; border: none; cursor: pointer; } .gallery-nav-btn:hover { background: rgba(0, 0, 0, 0.9); } .gallery-nav-btn.prev { left: 8px; } .gallery-nav-btn.next { right: 8px; } /* Creator Tools - Three Column Layout */ .three-column-layout { display: grid; grid-template-columns: 280px 300px 1fr; gap: 2rem; min-height: calc(100vh - 200px); background: #1a1a1a; } .sidebar-column { background: #2a2a2a; border-radius: 0.75rem; padding: 1.5rem; border: 1px solid #374151; height: fit-content; } .content-column { background: #2a2a2a; border-radius: 0.75rem; border: 1px solid #374151; overflow: hidden; } .sidebar-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.5rem; color: #d1d5db; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: none; background: none; font-size: 0.875rem; font-weight: 500; width: 100%; text-align: left; } .sidebar-item:hover { background: #374151; color: white; } .sidebar-item.active { background: #4182B7; color: white; } .sidebar-item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* Creator Tools - Responsive Layout */ @media (max-width: 1200px) { .three-column-layout { grid-template-columns: 250px 280px 1fr; gap: 1.5rem; } } @media (max-width: 1024px) { .three-column-layout { grid-template-columns: 220px 260px 1fr; gap: 1rem; } .sidebar-column { padding: 1rem; } } @media (max-width: 900px) { .three-column-layout { grid-template-columns: 200px 240px 1fr; gap: 0.75rem; } .sidebar-column { padding: 0.75rem; } .sidebar-item { padding: 0.5rem 0.75rem; font-size: 0.8rem; } .sidebar-item svg { width: 1rem; height: 1rem; } } @media (max-width: 768px) { .three-column-layout { grid-template-columns: 1fr; gap: 1rem; } .sidebar-column { order: 2; width: 100%; } .content-column { order: 1; width: 100%; } .sidebar-column:nth-child(2) { order: 3; } } /* Creator Tools - Mobile Responsive */ @media (max-width: 768px) { .automatic-message-tab { font-size: 0.875rem; padding: 0.5rem 0.75rem; } .creator-tools-button { width: 100%; margin-bottom: 0.5rem; } .message-media { max-width: 280px; } .message-media img, .message-media video { max-height: 300px; } /* === NOWE POPRAWKI RESPONSIVE === */ /* 1. Breadcrumb Alignment Fix */ #auto-messages-breadcrumb nav { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; /* Final Fix: Prevent wrapping */ } #auto-messages-breadcrumb nav a { display: inline !important; /* Final Fix: Force inline behavior */ width: auto !important; flex-shrink: 0; /* Prevent shrinking */ } #auto-messages-header { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; } #auto-messages-header > div:first-child { text-align: center; } #settings-controls-container { flex-direction: column !important; width: 100% !important; max-width: 300px !important; align-items: stretch !important; gap: 0.75rem !important; } /* Container for Delay Label + Select */ #settings-controls-container > div { display: flex; align-items: center; gap: 1rem; } /* The actual SELECT element - styled to look like other controls */ #settings-controls-container select#delay-minutes { flex-grow: 1; /* Take available space */ min-height: 44px !important; border-radius: 0.375rem !important; border: 1px solid #404040 !important; background-color: #1A1A1A !important; color: white !important; padding: 0.5rem 0.75rem !important; box-sizing: border-box; } /* The other two controls: Checkbox Label and Button */ #settings-controls-container > label, #settings-controls-container > button { width: 100% !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0.5rem 0.75rem !important; border-radius: 0.375rem !important; box-sizing: border-box !important; } /* Specifics for the checkbox label */ #settings-controls-container > label { justify-content: flex-start !important; border: 1px solid #4182B7; background-color: rgba(65, 130, 183, 0.1); } /* Manager form checkbox alignment fix for mobile */ .flex.items-start.space-x-3 { align-items: center !important; } .flex.items-start.space-x-3 input[type="checkbox"] { margin-top: 0 !important; margin-bottom: 0 !important; flex-shrink: 0 !important; } .flex.items-start.space-x-3 label { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.25 !important; } /* Managers page button styling fixes for mobile */ /* Fix "Add Manager" button text alignment */ a[href*="manager_create"] { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.75rem 1rem !important; font-size: 0.875rem !important; line-height: 1.2 !important; text-align: center !important; } a[href*="manager_create"] svg { width: 1.125rem !important; height: 1.125rem !important; flex-shrink: 0 !important; } /* Fix manager edit button - make it more compact on mobile */ a[href*="manager_edit"] { padding: 0.5rem !important; min-width: 2.5rem !important; width: 2.5rem !important; height: 2.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } a[href*="manager_edit"] svg { width: 1rem !important; height: 1rem !important; margin: 0 !important; } } /* Automatic Messages - Tablet Responsive */ @media (max-width: 1024px) { /* Ukryj emoji picker także na tabletach */ .single-column-layout #emoji-picker-container { display: none !important; } /* Gallery dots - poprawka także na tabletach */ .gallery-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; max-width: 8px !important; max-height: 8px !important; border-radius: 50% !important; flex-shrink: 0 !important; } .modal-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; max-width: 8px !important; max-height: 8px !important; border-radius: 50% !important; flex-shrink: 0 !important; } /* Kontener z kropkami - lepsze wyśrodkowanie także na tabletach */ .flex.space-x-2 { justify-content: center !important; align-items: center !important; gap: 8px !important; } } /* Creator Tools - Sidebar responsiveness when main sidebar is collapsed */ .main-sidebar-collapsed .three-column-layout { margin-left: 0; max-width: calc(100vw - 80px); } .main-sidebar-collapsed .sidebar-column, .main-sidebar-collapsed .content-column { margin-left: 0; } /* Settings Page Mobile Responsive */ @media (max-width: 768px) { /* Hide settings sidebar on mobile */ .settings-sidebar { display: none !important; } /* Show mobile menu button */ .settings-mobile-menu-btn { display: none; } @media (max-width: 1024px) { .settings-mobile-menu-btn { display: flex; background: #4182B7; color: white; border: none; padding: 12px 16px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 500; margin-bottom: 1.5rem; margin-top: 0.5rem; width: 100%; max-width: 672px; justify-content: center; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: static; margin-left: auto; margin-right: auto; } .settings-content { max-width: 672px; margin-left: auto; margin-right: auto; } } /* Adjust content margin for mobile */ .settings-content { margin-left: 0 !important; padding: 80px 1rem 1rem 1rem; } /* When main sidebar is collapsed on mobile */ .main-sidebar-collapsed .settings-mobile-menu-btn { left: 10px; } /* Mobile modal styles */ .settings-mobile-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; } .settings-mobile-modal.active { display: block; } .settings-mobile-sidebar { width: 280px; height: 100%; background: #323232; border-right: 1px solid #4a5568; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; } .settings-mobile-modal.active .settings-mobile-sidebar { transform: translateX(0); } .settings-mobile-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 24px; cursor: pointer; z-index: 1001; } } /* Settings Page Tablet Responsive */ @media (min-width: 769px) and (max-width: 1024px) { /* Hide settings sidebar on tablets */ .settings-sidebar { display: none !important; } /* Show mobile menu button on tablets */ .settings-mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; top: 80px; left: 288px; width: auto; min-width: 140px; z-index: 40; } /* Adjust content margin for tablets */ .settings-content { margin-left: 288px !important; padding: 100px 1rem 1rem 1rem; } /* When main sidebar is collapsed on tablets */ .main-sidebar-collapsed .settings-mobile-menu-btn { left: 80px; } .main-sidebar-collapsed .settings-content { margin-left: 80px !important; } /* Mobile modal styles for tablets */ .settings-mobile-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; } .settings-mobile-modal.active { display: block; } .settings-mobile-sidebar { width: 280px; height: 100%; background: #323232; border-right: 1px solid #4a5568; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; } .settings-mobile-modal.active .settings-mobile-sidebar { transform: translateX(0); } .settings-mobile-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 24px; cursor: pointer; z-index: 1001; } } /* FANS MESSAGES RESPONSIVE STYLES */ /* TABLET NAVIGATION (769px - 1024px) - Similar to dashboard messages */ @media (min-width: 769px) and (max-width: 1024px) { /* FANS MESSAGES: Show mobile navigation on tablets - use more generic selectors */ .mobile-messages-nav { display: flex !important; z-index: 50 !important; } /* MESSAGES: Show only conversations list by default - fill available space on tablets */ .dashboard-messages-container > div:first-child { width: 100% !important; /* Fill available space after sidebar margin */ max-width: 100% !important; flex: 1 !important; min-width: 0 !important; } /* CONVERSATIONS PANEL - ADJUST FOR TABLET LAYOUT */ body .tablet-conversations-panel, .tablet-conversations-panel, body #conversations-panel, #conversations-panel { width: 100% !important; max-width: 100% !important; border-right: none !important; flex: 1 !important; } /* HIDE CHAT AREA AND INSIGHTS ON TABLETS IN LIST VIEW */ #chat-area, .insights-panel { display: none !important; } /* FANS MESSAGES: When chat is active, hide list and show chat */ #chat-area.mobile-active { display: flex !important; position: fixed !important; top: 110px !important; left: 60px !important; width: calc(100% - 60px) !important; height: calc(100vh - 110px) !important; z-index: 999 !important; background: #2a2a2a !important; } /* FANS MESSAGES: Hide conversations list when other views are active */ .dashboard-messages-container.mobile-hide-list > div:first-child { display: none !important; } } /* FANS MESSAGES: MOBILE/TABLET FIX - NO MARGIN ON SMALL SCREENS */ @media (max-width: 1024px) { .dashboard-messages-container { margin-left: 0 !important; } /* FANS MESSAGES: Show mobile navigation on phones and tablets */ .mobile-messages-nav { display: flex !important; z-index: 50 !important; } /* FANS MESSAGES: Show only conversations list by default - full width */ .dashboard-messages-container > div:first-child { width: 100% !important; max-width: 100% !important; flex: 1 !important; } /* FANS MESSAGES: Hide chat area by default on mobile */ #chat-area { display: none !important; } /* FANS MESSAGES: When chat is active, hide list and show chat */ #chat-area.mobile-active { display: flex !important; position: fixed !important; top: 110px !important; left: 0 !important; width: 100% !important; height: calc(100vh - 110px) !important; z-index: 999 !important; background: #2a2a2a !important; } /* FANS MESSAGES: Hide conversations list when other views are active */ .dashboard-messages-container.mobile-hide-list > div:first-child { display: none !important; } /* FANS MESSAGES: Fix search icon positioning on mobile/tablet */ #search-conversations + svg { top: 50% !important; transform: translateY(-50%) !important; } /* FANS MESSAGES: Ensure modals appear above mobile navigation */ #tip-modal, #purchase-modal, #price-modal, #image-modal { z-index: 1000 !important; } } @media (max-width: 1024px) { .btn-primary, .btn-secondary, .btn-danger { width: 100% !important; display: block; margin-bottom: 0.5rem; } /* Dla ustawień: przycisk na całą szerokość formularza, bez paddingu rodzica */ .settings-card form button, .settings-card form .btn-primary, .settings-card form .btn-danger, .settings-card form .btn-secondary { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } .settings-card form { padding-left: 0 !important; padding-right: 0 !important; } } /* Fans Subscriptions Page Responsive Styles */ @media (max-width: 768px) { /* Subscriptions page header - stack vertically */ .max-w-5xl .flex.justify-between.items-center { flex-direction: column !important; align-items: center !important; gap: 1rem !important; text-align: center !important; } /* Header title adjustments */ .max-w-5xl h1 { font-size: 1.75rem !important; margin-bottom: 0.5rem !important; } /* Subscription cards - stack content vertically */ .bg-gradient-to-r.from-gray-800.to-gray-900 .flex.items-center.justify-between { flex-direction: column !important; align-items: stretch !important; gap: 1.5rem !important; } /* Creator info section - reduce avatar size and adjust spacing */ .bg-gradient-to-r.from-gray-800.to-gray-900 .flex.items-center.space-x-6 { flex-direction: column !important; align-items: center !important; text-align: center !important; space-x: 0 !important; gap: 1rem !important; } /* Avatar adjustments for mobile */ .w-20.h-20.rounded-full { width: 4rem !important; height: 4rem !important; } /* Creator details - center aligned */ .bg-gradient-to-r.from-gray-800.to-gray-900 .flex.items-center.space-x-6 > div:last-child { text-align: center !important; } /* Creator username - smaller font */ .bg-gradient-to-r.from-gray-800.to-gray-900 h3 { font-size: 1.125rem !important; } /* Right section - full width, centered */ .bg-gradient-to-r.from-gray-800.to-gray-900 .flex.items-center.space-x-4 { width: 100% !important; flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; } /* Subscription info card - full width */ .bg-gray-800\/50.rounded-xl.p-4 { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; } /* Action buttons container - full width */ .flex.flex-col.space-y-2.min-w-\[140px\] { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; min-width: 0 !important; } /* Individual buttons - full width */ .flex.flex-col.space-y-2.min-w-\[140px\] > a, .flex.flex-col.space-y-2.min-w-\[140px\] > button { width: 100% !important; text-align: center !important; } /* Subscription card padding adjustments */ .bg-gradient-to-r.from-gray-800.to-gray-900.rounded-2xl { padding: 1.25rem !important; } /* Empty state adjustments */ .text-center.py-16 { padding: 2rem 1rem !important; } .text-center.py-16 h3 { font-size: 1.5rem !important; } .text-center.py-16 .w-32.h-32 { width: 6rem !important; height: 6rem !important; } } /* Tablet specific adjustments (769px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { /* Subscription cards - maintain horizontal layout but reduce spacing */ .bg-gradient-to-r.from-gray-800.to-gray-900 .flex.items-center.space-x-6 { gap: 1rem !important; } /* Reduce avatar size slightly */ .w-20.h-20.rounded-full { width: 4.5rem !important; height: 4.5rem !important; } /* Creator username - slightly smaller */ .bg-gradient-to-r.from-gray-800.to-gray-900 h3 { font-size: 1.25rem !important; } /* Right section spacing */ .bg-gradient-to-r.from-gray-800.to-gray-900 .flex.items-center.space-x-4 { gap: 0.75rem !important; } /* Action buttons - smaller width */ .flex.flex-col.space-y-2.min-w-\[140px\] { min-width: 120px !important; } /* Card padding */ .bg-gradient-to-r.from-gray-800.to-gray-900.rounded-2xl { padding: 1.5rem !important; } } /* HOME PAGE MOBILE FIXES */ @media (max-width: 768px) { /* Fix button text alignment on phones for home page */ .block.w-full.mt-4.px-4.py-2.bg-blue-500.text-white.text-center.rounded-lg { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1.2 !important; padding: 0.75rem 1rem !important; min-height: 44px !important; } /* Fix specific navigation buttons - exclude the problematic ones */ .bg-blue-500:not(.px-8):not(.py-3) { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1.2 !important; } /* Fix Join Now, Sign In and bottom CTA buttons - target specific classes */ a.px-8.py-3.bg-accent-primary, a.px-8.py-3.bg-bg-elements-dark, a.px-8.py-3.bg-text-on-dark { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1.2 !important; text-align: center !important; min-height: 48px !important; } /* Discovery Gallery - make images more vertical on phones */ .flex-none.w-full.md\\:w-1\\/3.lg\\:w-1\\/5.p-2 .block.relative.group.overflow-hidden.rounded-lg { height: 300px !important; /* Reduced from h-96 (384px) */ } /* Make gallery items smaller and more vertical */ .flex-none.w-full.md\\:w-1\\/3.lg\\:w-1\\/5.p-2 { width: 50% !important; /* Show 2 per row instead of 1 */ padding: 0.25rem !important; } } /* Mobile comments buttons font size fix for fans */ @media (max-width: 768px) { .mobile-comments-section button, .comment-like-btn, .reply-like-btn, .mobile-comments-section .flex.items-center button { font-size: 9.6px !important; color: #9ca3af !important; } } /* FANS MESSAGES MOBILE - ZMNIEJSZ ROZMIARY MEDIÓW NA TELEFONACH */ @media (max-width: 768px) { /* Fans messages page - reduce media sizes significantly on mobile */ .dashboard-messages-container .message-media, .dashboard-messages-container .gallery-container, .dashboard-messages-container .single-media-container, .dashboard-messages-container .media-with-text, #messages-list .message-media, #messages-list .gallery-container, #messages-list .single-media-container, #messages-list .media-with-text { max-width: 220px !important; width: auto !important; height: auto !important; } /* Fans messages - reduce image sizes significantly */ .dashboard-messages-container .message-media img, .dashboard-messages-container .gallery-container img, .dashboard-messages-container .single-media-container img, .dashboard-messages-container .media-with-text img, #messages-list .message-media img, #messages-list .gallery-container img, #messages-list .single-media-container img, #messages-list .media-with-text img { max-width: 100% !important; max-height: 280px !important; width: 100% !important; height: auto !important; object-fit: contain !important; } /* Fans messages - reduce video sizes significantly */ .dashboard-messages-container .message-media video, .dashboard-messages-container .gallery-container video, .dashboard-messages-container .single-media-container video, .dashboard-messages-container .media-with-text video, #messages-list .message-media video, #messages-list .gallery-container video, #messages-list .single-media-container video, #messages-list .media-with-text video { max-width: 100% !important; max-height: 280px !important; width: 100% !important; height: auto !important; object-fit: contain !important; } /* Gallery slides in fans messages - smaller on mobile */ .dashboard-messages-container .gallery-slide, #messages-list .gallery-slide { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; } /* Gallery slides images/videos in fans messages */ .dashboard-messages-container .gallery-slide img, .dashboard-messages-container .gallery-slide video, #messages-list .gallery-slide img, #messages-list .gallery-slide video { max-width: 100% !important; max-height: 280px !important; width: 100% !important; height: auto !important; object-fit: contain !important; } /* Message containers - smaller max width on mobile for fans */ .dashboard-messages-container .flex.justify-end > div, .dashboard-messages-container .flex.justify-start > div { max-width: 250px !important; width: auto !important; } } /* TAB BUTTONS RESPONSIVE - FIT IN SIDEBAR */ @media (max-width: 1024px) { /* COMPRESS TABS ON TABLETS AND LAPTOPS */ #conversations-tab, #followers-tab, #subscribers-tab { font-size: 9px !important; padding: 6px 0px !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } }