/* Responsive Design - Podstawowe style */

/* 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;
    }
    
    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;
    }
}

/* Mobile First Approach */
* {
    box-sizing: border-box;
}

/* Responsive typography */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

/* Responsive containers */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .container {
        padding: 0 0.5rem;
    }
}

/* Responsive grid system */
.grid {
    display: grid;
    gap: 1rem;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-2 { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 480px) {
    .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: repeat(1, 1fr); }
}

/* Responsive flexbox utilities */
.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .flex-responsive {
        flex-direction: column;
    }
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive tables */
table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

@media (min-width: 768px) {
    table {
        display: table;
    }
}

/* Responsive buttons */
.btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

@media (max-width: 768px) {
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Responsive forms */
input, textarea, select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
}

@media (max-width: 768px) {
    input, textarea, select {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
}

/* Responsive cards */
.card {
    padding: 1.5rem;
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    .card {
        padding: 1rem;
    }
}

/* Responsive spacing */
@media (max-width: 768px) {
    .p-8 { padding: 1rem; }
    .p-6 { padding: 0.75rem; }
    .p-4 { padding: 0.5rem; }
    
    .m-8 { margin: 1rem; }
    .m-6 { margin: 0.75rem; }
    .m-4 { margin: 0.5rem; }
}

/* Hide/show elements based on screen size */
.hidden-mobile { display: block; }
.visible-mobile { display: none; }

/* ULTIMATE MOBILE POST CARD LAYOUT FIX */
@media (max-width: 768px) {
    /* NUCLEAR APPROACH - OVERRIDE EVERYTHING */
    .post-card .post-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 12px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    
    .post-card .post-header > div:first-child {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .post-card .post-header > div:last-child {
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-left: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Avatar container - fixed size */
    .post-card .post-header a > div {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    
    /* Meta info container */
    .post-card .post-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    /* Badges row - kompaktowy layout */
    .post-card .post-badges {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }
    
    /* Remove all space-x margins */
    .post-card .post-badges > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Username link - kompaktowy */
    .post-card .post-badges a {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-right: 3px !important;
    }
    
    /* Badge styling - bardzo kompaktowe */
    .post-card .post-badge {
        font-size: 9px !important;
        padding: 1px 3px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        margin: 0 1px !important;
        vertical-align: middle !important;
        border-radius: 3px !important;
    }
    
    /* Premium badge kompaktowy */
    .post-card .premium-badge {
        font-size: 9px !important;
        padding: 1px 3px !important;
        line-height: 1.1 !important;
    }
    
    /* Date positioning */
    .post-card .post-header .text-xs.text-gray-400 {
        font-size: 10px !important;
        margin-top: 2px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Three-dot menu button */
    .post-card .post-menu-btn {
        padding: 4px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-shrink: 0 !important;
    }
    
    /* Follow button */
    .post-card .follow-btn,
    .post-card .unfollow-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* MOBILE ONLY - Prosty fix */
    
    /* Ukryj desktop badge'e na mobile */
    .post-card .post-badge {
        display: none !important;
    }
    
    /* Pokaż mobile badge'e */
    .post-card .mobile-badges-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        position: absolute !important;
        top: 12px !important;
        right: 40px !important;
    }
    
    /* Nick i data bliżej siebie - AGRESYWNY FIX */
    .post-card .post-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        line-height: 1 !important;
    }
    
    .post-card .post-badges {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    
    .post-card .post-badges a {
        font-size: 14px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: inline !important;
    }
    
    .post-card .text-xs.text-gray-400.mt-1 {
        font-size: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
        margin-top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* Header pozycjonowanie */
    .post-card .post-header {
        position: relative !important;
    }
    
    /* FOOTER - ULTRA KOMPAKTOWY */
    .post-card .p-4.border-t.border-gray-700,
    .post-card div[style*="border-top"],
    .post-card > div:last-child {
        padding: 8px 12px !important;
        margin: 0 !important;
        border-top: 1px solid #374151 !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.2 !important;
    }
    
    .post-card .flex.items-center.space-x-4 {
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Usuń wszystkie space-x marginesy */
    .post-card .flex.items-center.space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }
    
    .post-card .like-btn,
    .post-card .comment-btn,
    .post-card .tip-btn,
    .post-card .save-btn {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 2px !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }
    
    .post-card .like-btn svg,
    .post-card .comment-btn svg,
    .post-card .tip-btn svg,
    .post-card .save-btn svg {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
    }
    
    /* View comments link - bliżej przycisków */
    .post-card .mt-3 {
        margin-top: 2px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    .post-card .view-comments-btn {
        font-size: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* BARDZO KOMPAKTOWY FOOTER - ULTIMATE FIX - TYLKO DLA MOBILE */
    .post-card .p-4.border-t.border-gray-700:not(.desktop-reset) {
        padding: 8px 12px !important;
        margin: 0 !important;
        border-top: 1px solid #374151 !important;
    }
    
    .post-card .flex.items-center.space-x-4:not(.desktop-reset),
    .post-card .flex.items-center.space-x-2:not(.desktop-reset) {
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Usuń wszystkie space-x marginesy - AGRESYWNY FIX - TYLKO MOBILE */
    .post-card .flex.items-center:not(.desktop-reset) > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .post-card .like-btn:not(.desktop-reset),
    .post-card .comment-btn:not(.desktop-reset),
    .post-card .tip-btn:not(.desktop-reset),
    .post-card .save-btn:not(.desktop-reset) {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 4px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    
    .post-card .like-btn:not(.desktop-reset) svg,
    .post-card .comment-btn:not(.desktop-reset) svg,
    .post-card .tip-btn:not(.desktop-reset) svg,
    .post-card .save-btn:not(.desktop-reset) svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
    
    /* View comments - jeszcze bliżej - TYLKO MOBILE */
    .post-card [style*="margin-top: 0.1rem"]:not(.desktop-reset),
    .post-card [style*="margin-top: 0.5rem"]:not(.desktop-reset),
    .post-card [style*="margin: 0"]:not(.desktop-reset),
    .post-card > div:last-child > div:last-child:not(.desktop-reset),
    .post-card > div:last-child > div:not(.desktop-reset) {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1 !important;
    }
    
    /* NUCLEAR OPTION - usuń wszystkie marginesy i paddingi - TYLKO MOBILE */
    .post-card > div:last-child *:not(.desktop-reset) {
        margin: 0 !important;
        padding: 2px !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.2 !important;
    }
    
    /* View comments text - trochę większy odstęp - TYLKO MOBILE */
    .post-card .view-comments-btn:not(.desktop-reset) {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        font-size: 12px !important;
    }
    
    /* Disable image clicks on mobile - TYLKO MOBILE */
    .post-card .post-image-clickable:not(.desktop-reset) {
        cursor: default !important;
        pointer-events: none !important;
    }
    
    .post-card video:not(.desktop-reset) {
        cursor: default !important;
        pointer-events: none !important;
    }
    
    /* Mobile comments section styling */
    .mobile-comments-section {
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from { 
            opacity: 0; 
            max-height: 0; 
        }
        to { 
            opacity: 1; 
            max-height: 500px; 
        }
    }
    
    /* Fix avatar sizing inconsistency */
    .mobile-comments-section .comment-item div[style*="width: 24px"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        flex-shrink: 0 !important;
        font-size: 10px !important;
    }
    
    .mobile-comments-section .comment-item img[style*="width: 24px"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 768px) {
    .hidden-mobile { display: none; }
    .visible-mobile { display: block; }
}

/* Desktop styles - COMPLETELY disable mobile styles */
@media (min-width: 769px) {
    
    /* Add desktop-reset class to all elements to bypass mobile styles */
    .post-card .p-4.border-t.border-gray-700 {
        padding: 1rem !important;
        margin: 0 !important;
        border-top: 1px solid rgb(55, 65, 81) !important;
    }
    
    .post-card .flex.items-center.space-x-4,
    .post-card .flex.items-center.space-x-2 {
        gap: 1rem !important;
    }
    
    .post-card .like-btn,
    .post-card .comment-btn,
    .post-card .tip-btn,
    .post-card .save-btn {
        gap: 0.25rem !important;
        padding: 0.25rem !important;
        font-size: 0.875rem !important;
        line-height: 1.25 !important;
    }
    
    .post-card .like-btn svg,
    .post-card .comment-btn svg,
    .post-card .tip-btn svg,
    .post-card .save-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .post-card .view-comments-btn {
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
        font-size: 0.875rem !important;
    }
    
    /* Enable image clicks on desktop */
    .post-card .post-image-clickable {
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .post-card video {
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    /* Reset modal comment spacing to original */
    #modal-comments .comment-item {
        margin-bottom: 1rem !important;
    }
    
    #modal-comments .space-y-3 > * + * {
        margin-top: 0.75rem !important;
    }
    
    /* Prevent mobile styles affecting modal */
    .modal-content .comment-item {
        margin-bottom: 1rem !important;
    }
    
    /* Reset modal comments container padding */
    div[id^="modal-comments-"] {
        padding: 1rem !important;
    }
    
    /* Reset modal comments area to original padding */
    .modal-content .overflow-y-auto {
        padding: 1rem !important;
    }
}

/* Responsive navigation improvements */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background: var(--card);
        transition: left 0.3s ease;
        z-index: 1000;
    }
    
    .nav-menu.active {
        left: 0;
    }
}

/* Responsive sidebar */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -100%;
        width: 100%;
        height: 100vh;
        z-index: 999;
        transition: left 0.3s ease;
    }
    
    .sidebar.active {
        left: 0;
    }
}

/* Responsive modal */
@media (max-width: 768px) {
    .modal {
        width: 95%;
        margin: 2.5% auto;
    }
}

/* Touch-friendly elements */
@media (max-width: 768px) {
    button, a, input, select {
        min-height: 44px; /* Apple's recommended minimum touch target */
    }
    
    .clickable {
        cursor: pointer;
        user-select: none;
    }
}

/* Responsive text */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }
}

/* Responsive utilities */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 769px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* Responsive aspect ratios */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Responsive shadows */
@media (max-width: 768px) {
    .shadow-lg {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
}

/* Print styles */
@media print {
    .no-print { display: none; }
    body { font-size: 12pt; }
    .container { max-width: none; }
}