/* =====================================================
   MRBANKERS - MOBILE RESPONSIVE STYLES
   ===================================================== */

/* ============================================
   GENERAL MOBILE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px;
    }
    
    /* Hide desktop sidebar */
    .desktop-sidebar {
        display: none !important;
    }
    
    /* Show bottom navigation */
    .bottom-nav {
        display: flex !important;
    }
    
    /* Adjust container padding */
    .feed-container,
    .profile-container,
    .settings-container,
    .notifications-container,
    .search-container,
    .groups-container,
    .chat-container,
    .stories-container,
    .tools-container,
    .about-container,
    .contact-container {
        padding: 12px 12px 80px;
    }
    
    /* Smaller cards */
    .post-card,
    .group-card,
    .settings-card,
    .edit-card,
    .legal-card {
        padding: 12px;
    }
    
    /* Smaller avatars */
    .post-header .avatar,
    .create-post-input .avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    /* Smaller post content */
    .post-content {
        font-size: 14px;
    }
}

/* ============================================
   PHONE (480px and below)
   ============================================ */
@media (max-width: 480px) {
    /* Header */
    .fb-header {
        padding: 0 10px;
        height: 50px;
    }
    
    .fb-header .search-box {
        min-width: 80px;
        max-width: 120px;
        height: 32px;
        padding: 4px 10px;
    }
    
    .fb-header .search-box input {
        font-size: 12px;
    }
    
    .fb-header .logo {
        font-size: 18px;
    }
    
    .fb-header .logo i {
        font-size: 20px;
    }
    
    .fb-header .user-menu .user-name {
        display: none;
    }
    
    .fb-header .user-menu .user-avatar {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .fb-header .user-menu .icon-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    
    /* Stories Bar */
    .stories-bar {
        margin: 8px 8px;
        padding: 8px 12px;
        gap: 6px;
    }
    
    .story-item .story-avatar {
        width: 52px;
        height: 52px;
    }
    
    .story-item .story-avatar .avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }
    
    .story-item .story-ring {
        width: 56px;
        height: 56px;
        border-width: 2px;
    }
    
    .story-item .story-label {
        font-size: 9px;
        max-width: 52px;
    }
    
    .story-item.create-story .add-story-btn {
        width: 20px;
        height: 20px;
        font-size: 11px;
        border-width: 2px;
    }
    
    /* Create Post Box */
    .create-post-box {
        margin: 8px 8px;
        padding: 10px 12px;
    }
    
    .create-post-input input {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .create-post-actions button {
        font-size: 12px;
        padding: 6px 4px;
    }
    
    .create-post-actions button i {
        font-size: 14px;
    }
    
    /* Post Card */
    .post-card {
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    
    .post-header .post-info .name {
        font-size: 14px;
    }
    
    .post-header .post-info .time {
        font-size: 11px;
    }
    
    .post-content {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .post-content .post-image {
        max-height: 300px;
    }
    
    .post-stats {
        font-size: 12px;
        padding: 6px 0;
    }
    
    .post-actions .action-btn {
        font-size: 13px;
        padding: 6px 4px;
    }
    
    .post-actions .action-btn i {
        font-size: 14px;
    }
    
    /* Post Stats */
    .post-stats span {
        display: flex;
        align-items: center;
        gap: 3px;
    }
    
    /* Link Preview */
    .link-preview {
        flex-direction: column;
        padding: 10px;
    }
    
    .link-preview img {
        width: 100%;
        height: auto;
        max-height: 150px;
    }
    
    /* Poll */
    .poll-container {
        padding: 10px;
    }
    
    .poll-option {
        font-size: 13px;
        padding: 6px 10px;
    }
    
    /* Post Options Menu */
    .post-options-menu {
        min-width: 180px;
        right: -10px;
    }
    
    .post-options-menu button {
        font-size: 13px;
        padding: 6px 12px;
    }
    
    /* Bottom Nav */
    .bottom-nav {
        padding: 4px 0 8px;
    }
    
    .bottom-nav a {
        font-size: 9px;
        min-width: 44px;
        padding: 2px 6px;
    }
    
    .bottom-nav a i {
        font-size: 18px;
    }
    
    .bottom-nav a .badge {
        min-width: 14px;
        height: 14px;
        font-size: 8px;
        right: 2px;
        top: 0;
    }
    
    /* Modals */
    .post-popup-box {
        padding: 12px;
        width: 98%;
        border-radius: 8px;
    }
    
    .post-popup-box .post-popup-header {
        font-size: 16px;
        padding-right: 30px;
    }
    
    .post-popup-box .modal-close-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .custom-modal-box {
        padding: 16px;
        width: 95%;
    }
    
    /* Admin */
    .admin-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-card .stat-number {
        font-size: 22px;
    }
    
    .admin-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tables */
    .user-table,
    .comment-table,
    .post-table {
        overflow-x: auto;
    }
    
    .user-table table,
    .comment-table table,
    .post-table table {
        min-width: 600px;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .actions {
        flex-direction: column;
    }
    
    .actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Chat */
    .chat-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .chat-sidebar {
        height: 250px;
    }
    
    .chat-main {
        height: 400px;
    }
    
    .chat-message {
        max-width: 85%;
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .chat-input-area {
        padding: 8px 12px;
        flex-wrap: wrap;
    }
    
    .chat-input-area input {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .chat-input-area .btn {
        padding: 6px 14px;
        font-size: 13px;
    }
    
    /* Groups */
    .group-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }
    
    .group-card .group-avatar {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }
    
    .group-card .group-actions {
        flex-direction: row;
        width: 100%;
        margin-top: 8px;
    }
    
    .group-card .group-actions .btn {
        flex: 1;
        justify-content: center;
        font-size: 12px;
    }
    
    .groups-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .groups-header .btn {
        justify-content: center;
    }
    
    /* Stories */
    .story-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .story-card {
        aspect-ratio: 9/16;
    }
    
    .story-upload-box .upload-area {
        padding: 20px 12px;
    }
    
    .story-upload-box .upload-area i {
        font-size: 32px;
    }
    
    .story-upload-box .upload-area h3 {
        font-size: 16px;
    }
    
    /* Legal Pages */
    .legal-card {
        padding: 16px;
    }
    
    .legal-card h1 {
        font-size: 22px;
    }
    
    .legal-content h2 {
        font-size: 17px;
    }
    
    /* Tools */
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .tool-card {
        padding: 14px 10px;
    }
    
    .tool-card .tool-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .tool-card h3 {
        font-size: 13px;
    }
    
    .tool-card p {
        font-size: 11px;
    }
    
    /* Profile */
    .profile-info .avatar-section .avatar {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }
    
    .profile-info .avatar-section {
        margin-top: -35px;
    }
    
    .profile-info .avatar-section .profile-name h1 {
        font-size: 18px;
    }
    
    .profile-info .avatar-section .profile-actions .btn {
        font-size: 12px;
        padding: 6px 14px;
    }
    
    .profile-stats .stat .number {
        font-size: 15px;
    }
    
    .profile-tabs .tab {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    /* Settings */
    .settings-tabs .tab {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    /* Search */
    .search-form {
        flex-direction: column;
    }
    
    .search-form .btn-search {
        width: 100%;
    }
    
    .search-tabs .tab {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    .result-item {
        padding: 10px 12px;
    }
    
    .result-item .result-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ============================================
   TABLET (481px - 768px)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
    .tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .story-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .admin-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   LARGE SCREENS (769px and above)
   ============================================ */
@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
    
    body {
        padding-bottom: 0;
    }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .fb-header,
    .bottom-nav,
    .story-upload-box,
    .create-post-box,
    .post-actions,
    .post-options-menu {
        display: none !important;
    }
    
    body {
        padding: 20px !important;
        background: #fff !important;
    }
    
    .post-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }
}