/* Enhanced Mobile Responsive Design */

/* Global Mobile Optimizations */
@media (max-width: 768px) {
    /* Base Layout */
    body {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .container, .main-content {
        padding: 0.75rem;
        margin: 0;
        max-width: 100%;
    }
    
    /* Typography */
    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; }
    
    /* Buttons */
    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        border-radius: 0.5rem !important;
        margin-bottom: 0.5rem;
    }
}

/* Admin Panel Mobile Optimizations */
@media (max-width: 768px) {
    .admin-container {
        padding: 0.5rem;
    }
    
    .admin-header {
        padding: 1rem;
        text-align: center;
    }
    
    .admin-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .admin-stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        padding: 1rem;
        border-radius: 0.75rem;
        text-align: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border-light);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .stat-card h3 {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
        color: var(--primary);
    }
    
    .stat-card p {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
    }
    
    .admin-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .admin-btn-primary,
    .admin-btn-secondary,
    .admin-btn-danger {
        padding: 1rem;
        font-size: 0.875rem;
        border-radius: 0.75rem;
        text-align: center;
        justify-content: center;
    }
    
    .admin-section {
        margin-bottom: 2rem;
        background: var(--bg-primary);
        border-radius: 1rem;
        padding: 1.5rem;
        border: 1px solid var(--border-light);
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    
    .admin-section h4 {
        font-size: 1.125rem;
        margin-bottom: 1rem;
        text-align: center;
        color: var(--text-primary);
    }
}

/* Webcam Monitor Mobile Optimizations */
@media (max-width: 768px) {
    .webcam-monitor-header {
        padding: 1.5rem 1rem;
        text-align: center;
        border-radius: 0.75rem;
        margin: 0.5rem;
    }
    
    .webcam-monitor-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .webcam-monitor-header p {
        font-size: 0.875rem;
        margin: 0;
    }
    
    .webcam-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem;
    }
    
    .webcam-card {
        border-radius: 1rem;
        overflow: hidden;
        margin-bottom: 1rem;
    }
    
    .user-header {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .user-info {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .user-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .user-details h3 {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }
    
    .user-status {
        font-size: 0.875rem;
    }
    
    .status-indicator {
        width: 10px;
        height: 10px;
        margin-right: 0.5rem;
    }
    
    .webcam-video-container {
        height: 200px;
    }
    
    .webcam-overlay {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 1rem;
    }
    
    .webcam-controls {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .webcam-btn {
        width: 100%;
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.75rem;
        min-width: auto;
    }
    
    .captured-images {
        padding: 0 1rem 1rem;
    }
    
    .captured-image {
        height: 150px;
        border-radius: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .message {
        margin: 0.75rem 1rem;
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
    }
    
    .notes-input {
        padding: 0.875rem;
        font-size: 0.875rem;
        border-radius: 0.5rem;
        min-height: 80px;
    }
}

/* User List Mobile Optimizations */
@media (max-width: 768px) {
    .user-search {
        padding: 1rem;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .user-search input {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.75rem;
        width: 100%;
    }
    
    .user-item {
        padding: 1rem;
        margin: 0.5rem;
        border-radius: 1rem;
        flex-direction: row;
        align-items: center;
    }
    
    .user-item .user-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.125rem;
        margin-left: 0.75rem;
        flex-shrink: 0;
    }
    
    .user-item .user-info {
        flex: 1;
        min-width: 0;
        margin-right: 0.75rem;
    }
    
    .user-item .user-name {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .user-item .user-username {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    
    .user-item .badge {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 1rem;
        flex-shrink: 0;
    }
}

/* Chat Mobile Optimizations */
@media (max-width: 768px) {
    .chat-container {
        height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .chat-header {
        padding: 1rem;
        flex-direction: row;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--bg-secondary);
        backdrop-filter: blur(10px);
    }
    
    .chat-user-info {
        flex: 1;
        gap: 0.75rem;
    }
    
    .chat-user-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    .chat-user-details h5 {
        font-size: 0.875rem;
        margin: 0;
    }
    
    .chat-user-details .status {
        font-size: 0.75rem;
        margin-top: 0.125rem;
    }
    
    .chat-header-actions {
        flex-shrink: 0;
    }
    
    .chat-header-actions .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        width: auto;
        margin: 0;
    }
    
    .chat-log {
        padding: 1rem 0.75rem;
        height: calc(100vh - 140px);
        overflow-y: auto;
    }
    
    .message {
        max-width: 85%;
        margin: 0.75rem 0;
    }
    
    .message-bubble {
        padding: 0.875rem 1rem;
        border-radius: 1.25rem;
        font-size: 0.875rem;
        line-height: 1.4;
    }
    
    .message-time {
        font-size: 0.75rem;
        margin-top: 0.375rem;
    }
    
    .chat-input-container {
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-light);
    }
    
    .chat-input-wrapper {
        padding: 0.75rem;
        border-radius: 1.5rem;
        gap: 0.75rem;
    }
    
    .chat-input-actions {
        gap: 0.5rem;
    }
    
    .chat-action-btn {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    .chat-input {
        font-size: 0.875rem;
        line-height: 1.4;
    }
    
    /* Voice Recording Mobile */
    .voice-controls-container {
        margin-top: 1rem;
    }
    
    .voice-controls {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .voice-record-btn {
        width: 100%;
        max-width: 280px;
        padding: 1rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .voice-wave {
        height: 24px;
        gap: 3px;
    }
    
    .voice-wave-bar {
        width: 4px;
    }
    
    .recording-time {
        font-size: 0.875rem;
        padding: 0.5rem 0.875rem;
    }
    
    .voice-cancel-hint {
        font-size: 0.75rem;
        padding: 0.75rem;
        text-align: center;
    }
    
    .voice-actions {
        flex-direction: row;
        gap: 0.75rem;
        justify-content: center;
    }
    
    .voice-action-btn {
        flex: 1;
        max-width: 120px;
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }
    
    /* Voice Message Mobile */
    .voice-message {
        min-width: 200px;
        max-width: 280px;
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }
    
    .voice-play-btn {
        width: 36px;
        height: 36px;
    }
    
    .voice-duration {
        font-size: 0.75rem;
        min-width: 40px;
    }
    
    /* File Message Mobile */
    .file-message {
        padding: 0.875rem;
        gap: 0.75rem;
        border-radius: 1rem;
    }
    
    .file-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .file-name {
        font-size: 0.75rem;
        margin-bottom: 0.375rem;
    }
    
    .file-actions {
        gap: 0.5rem;
        margin-top: 0.5rem;
        flex-wrap: wrap;
    }
    
    .file-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        flex: 1;
        min-width: 80px;
        text-align: center;
    }
}

/* Emoji & Sticker Picker Mobile */
@media (max-width: 768px) {
    .emoji-picker,
    .sticker-picker {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60vh;
        border-radius: 1rem 1rem 0 0;
        border: none;
        border-top: 1px solid var(--border-light);
    }
    
    .emoji-header,
    .sticker-header {
        padding: 1rem;
        border-bottom: 1px solid var(--border-light);
    }
    
    .emoji-categories,
    .sticker-categories {
        padding: 0.75rem;
        gap: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    
    .emoji-categories::-webkit-scrollbar,
    .sticker-categories::-webkit-scrollbar {
        display: none;
    }
    
    .emoji-category,
    .sticker-category {
        flex-shrink: 0;
        min-width: 44px;
        height: 44px;
        border-radius: 0.75rem;
    }
    
    .sticker-category {
        min-width: 60px;
        padding: 0.5rem;
    }
    
    .emoji-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 0.5rem;
        padding: 1rem;
        max-height: 40vh;
    }
    
    .emoji-item {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
        border-radius: 0.5rem;
    }
    
    .sticker-search {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    .sticker-search-input {
        padding: 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.75rem;
    }
    
    .sticker-search-btn {
        width: 44px;
        height: 44px;
        border-radius: 0.75rem;
    }
    
    .sticker-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 1rem;
        max-height: 35vh;
    }
    
    .sticker-item {
        border-radius: 0.75rem;
        aspect-ratio: 1;
    }
    
    .sticker-loading,
    .sticker-error,
    .sticker-empty {
        padding: 2rem 1rem;
        font-size: 0.875rem;
    }
}

/* Form Mobile Optimizations */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .form-control {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.75rem;
        width: 100%;
        border: 2px solid var(--border-light);
    }
    
    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
    
    .form-text {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.375rem;
    }
    
    .input-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .input-group .form-control {
        border-radius: 0.75rem !important;
    }
    
    .input-group-text {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.75rem !important;
        background: var(--bg-secondary);
        border: 2px solid var(--border-light);
    }
}

/* Table Mobile Optimizations */
@media (max-width: 768px) {
    .table-responsive {
        border: none;
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    
    .table {
        font-size: 0.875rem;
        margin: 0;
    }
    
    .table th {
        padding: 0.875rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: var(--bg-secondary);
        border-bottom: 2px solid var(--border-light);
    }
    
    .table td {
        padding: 0.875rem 0.75rem;
        border-bottom: 1px solid var(--border-light);
        vertical-align: middle;
    }
    
    .table tbody tr:hover {
        background: var(--bg-secondary);
    }
    
    /* Stack table on very small screens */
    @media (max-width: 576px) {\n        .table-responsive table,\n        .table-responsive thead,\n        .table-responsive tbody,\n        .table-responsive th,\n        .table-responsive td,\n        .table-responsive tr {\n            display: block;\n        }\n        \n        .table-responsive thead tr {\n            position: absolute;\n            top: -9999px;\n            left: -9999px;\n        }\n        \n        .table-responsive tr {\n            border: 1px solid var(--border-light);\n            border-radius: 0.75rem;\n            margin-bottom: 1rem;\n            padding: 1rem;\n            background: var(--bg-primary);\n        }\n        \n        .table-responsive td {\n            border: none;\n            position: relative;\n            padding: 0.5rem 0 0.5rem 30%;\n            text-align: right;\n        }\n        \n        .table-responsive td:before {\n            content: attr(data-label);\n            position: absolute;\n            left: 0;\n            width: 25%;\n            padding-right: 10px;\n            white-space: nowrap;\n            font-weight: 600;\n            color: var(--text-secondary);\n        }\n    }\n}

/* Card Mobile Optimizations */
@media (max-width: 768px) {
    .card {
        border-radius: 1rem;\n        border: 1px solid var(--border-light);\n        box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n        margin-bottom: 1.5rem;\n        overflow: hidden;\n    }\n    \n    .card-header {\n        padding: 1.25rem 1rem;\n        background: var(--bg-secondary);\n        border-bottom: 1px solid var(--border-light);\n    }\n    \n    .card-body {\n        padding: 1.5rem 1rem;\n    }\n    \n    .card-footer {\n        padding: 1rem;\n        background: var(--bg-secondary);\n        border-top: 1px solid var(--border-light);\n    }\n    \n    .card-title {\n        font-size: 1.125rem;\n        font-weight: 600;\n        margin-bottom: 0.75rem;\n    }\n    \n    .card-text {\n        font-size: 0.875rem;\n        line-height: 1.5;\n        color: var(--text-secondary);\n    }\n}

/* Modal Mobile Optimizations */\n@media (max-width: 768px) {\n    .modal-dialog {\n        margin: 0.5rem;\n        max-width: calc(100% - 1rem);\n    }\n    \n    .modal-content {\n        border-radius: 1rem;\n        border: none;\n        box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n    }\n    \n    .modal-header {\n        padding: 1.25rem 1rem;\n        border-bottom: 1px solid var(--border-light);\n    }\n    \n    .modal-body {\n        padding: 1.5rem 1rem;\n    }\n    \n    .modal-footer {\n        padding: 1rem;\n        border-top: 1px solid var(--border-light);\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n    \n    .modal-footer .btn {\n        width: 100%;\n        margin: 0;\n    }\n    \n    .modal-title {\n        font-size: 1.125rem;\n        font-weight: 600;\n    }\n}\n\n/* Alert Mobile Optimizations */\n@media (max-width: 768px) {\n    .alert {\n        border-radius: 0.75rem;\n        padding: 1rem;\n        margin-bottom: 1rem;\n        font-size: 0.875rem;\n        line-height: 1.5;\n    }\n    \n    .alert-dismissible .btn-close {\n        padding: 0.75rem;\n        font-size: 0.75rem;\n    }\n}\n\n/* Badge Mobile Optimizations */\n@media (max-width: 768px) {\n    .badge {\n        font-size: 0.75rem;\n        padding: 0.375rem 0.75rem;\n        border-radius: 0.5rem;\n    }\n    \n    .badge-lg {\n        font-size: 0.875rem;\n        padding: 0.5rem 1rem;\n    }\n}\n\n/* Pagination Mobile Optimizations */\n@media (max-width: 768px) {\n    .pagination {\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 0.25rem;\n    }\n    \n    .page-link {\n        padding: 0.5rem 0.75rem;\n        font-size: 0.875rem;\n        border-radius: 0.5rem;\n        margin: 0;\n    }\n    \n    .page-item:first-child .page-link,\n    .page-item:last-child .page-link {\n        border-radius: 0.5rem;\n    }\n}\n\n/* Breadcrumb Mobile Optimizations */\n@media (max-width: 768px) {\n    .breadcrumb {\n        padding: 0.75rem 1rem;\n        margin-bottom: 1rem;\n        font-size: 0.875rem;\n        background: var(--bg-secondary);\n        border-radius: 0.75rem;\n        flex-wrap: wrap;\n    }\n    \n    .breadcrumb-item {\n        margin-bottom: 0.25rem;\n    }\n    \n    .breadcrumb-item + .breadcrumb-item::before {\n        padding: 0 0.375rem;\n    }\n}\n\n/* Progress Mobile Optimizations */\n@media (max-width: 768px) {\n    .progress {\n        height: 0.75rem;\n        border-radius: 0.5rem;\n        background: var(--bg-tertiary);\n        overflow: hidden;\n    }\n    \n    .progress-bar {\n        border-radius: 0.5rem;\n        transition: width 0.3s ease;\n    }\n}\n\n/* Spinner Mobile Optimizations */\n@media (max-width: 768px) {\n    .spinner-border {\n        width: 2rem;\n        height: 2rem;\n        border-width: 0.25em;\n    }\n    \n    .spinner-border-sm {\n        width: 1rem;\n        height: 1rem;\n        border-width: 0.125em;\n    }\n}\n\n/* Utility Classes for Mobile */\n@media (max-width: 768px) {\n    .d-mobile-none { display: none !important; }\n    .d-mobile-block { display: block !important; }\n    .d-mobile-flex { display: flex !important; }\n    .d-mobile-grid { display: grid !important; }\n    \n    .text-mobile-center { text-align: center !important; }\n    .text-mobile-left { text-align: left !important; }\n    .text-mobile-right { text-align: right !important; }\n    \n    .flex-mobile-column { flex-direction: column !important; }\n    .flex-mobile-row { flex-direction: row !important; }\n    \n    .w-mobile-100 { width: 100% !important; }\n    .h-mobile-auto { height: auto !important; }\n    \n    .p-mobile-0 { padding: 0 !important; }\n    .p-mobile-1 { padding: 0.5rem !important; }\n    .p-mobile-2 { padding: 1rem !important; }\n    .p-mobile-3 { padding: 1.5rem !important; }\n    \n    .m-mobile-0 { margin: 0 !important; }\n    .m-mobile-1 { margin: 0.5rem !important; }\n    .m-mobile-2 { margin: 1rem !important; }\n    .m-mobile-3 { margin: 1.5rem !important; }\n    \n    .gap-mobile-1 { gap: 0.5rem !important; }\n    .gap-mobile-2 { gap: 1rem !important; }\n    .gap-mobile-3 { gap: 1.5rem !important; }\n}\n\n/* Touch Optimizations */\n@media (max-width: 768px) {\n    /* Increase touch targets */\n    button, .btn, a, input, select, textarea {\n        min-height: 44px;\n        min-width: 44px;\n    }\n    \n    /* Improve touch scrolling */\n    .overflow-auto {\n        -webkit-overflow-scrolling: touch;\n        scroll-behavior: smooth;\n    }\n    \n    /* Prevent zoom on input focus */\n    input, select, textarea {\n        font-size: 16px;\n    }\n    \n    /* Improve tap highlighting */\n    * {\n        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2);\n    }\n}\n\n/* Dark Mode Mobile Adjustments */\n@media (max-width: 768px) {\n    :root.dark {\n        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);\n        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);\n        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);\n        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);\n    }\n}\n\n/* Performance Optimizations for Mobile */\n@media (max-width: 768px) {\n    /* Reduce animations on mobile for better performance */\n    @media (prefers-reduced-motion: no-preference) {\n        * {\n            animation-duration: 0.2s !important;\n            transition-duration: 0.2s !important;\n        }\n    }\n    \n    /* Optimize transforms for mobile */\n    .hover-lift:hover {\n        transform: translateY(-1px);\n    }\n    \n    /* Reduce blur effects on mobile */\n    .backdrop-blur {\n        backdrop-filter: blur(5px);\n    }\n}\n