/* Admin Portal - Responsive Enhancements */

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
    backdrop-filter: blur(2px);
}

@media (max-width: 1024px) {
    .sidebar-overlay {
        display: block;
    }
}

/* Full Screen Layout */
.admin-dashboard,
.admin-main-wrapper,
.admin-main,
.admin-section {
    width: 100%;
    max-width: 100%;
}

/* Ensure all content uses full width */
.section-header,
.lorebooks-filter,
.lorebooks-grid,
.dashboard-grid,
.stats-grid,
.analytics-section,
.system-card,
.welcome-section,
.notifications-section,
.pending-tasks-grid,
.quick-actions-panel,
.system-status-widget,
.recent-activity,
.bugreports-container,
.users-container,
.content-reports-container,
.logs-container {
    width: 100%;
    max-width: 100%;
}

/* Tables responsive */
.table-container,
.logs-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    background: var(--bg-secondary);
    padding: 0;
}

table {
    width: 100%;
    min-width: 600px;
}

/* Activity Log Mobile Optimization */
@media (max-width: 768px) {
    .logs-table {
        font-size: 0.875rem;
    }
    
    .logs-table th,
    .logs-table td {
        padding: 0.5rem;
    }
    
    /* Hide IP column on mobile */
    .logs-table th:last-child,
    .logs-table td:last-child {
        display: none;
    }
    
    /* Make category badges smaller */
    .logs-table .category-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
    
    .logs-table .category-badge i {
        font-size: 0.65rem;
    }
    
    /* Truncate long text with ellipsis */
    .logs-table .log-details,
    .logs-table .log-action {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Stack filters vertically on mobile */
    .logs-filters .filter-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .logs-filters .filter-group {
        width: 100%;
    }
}

/* Grid responsiveness */
@media (max-width: 1400px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .dashboard-left,
    .dashboard-right {
        width: 100%;
    }
}

/* Tablet optimizations */
@media (max-width: 992px) {
    /* Grid Layouts */
    .stats-grid,
    .traffic-stats,
    .model-stats,
    .bugreports-stats,
    .users-stats,
    .content-reports-stats,
    .empty-class-placeholder {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .lorebooks-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    /* Section spacing */
    .admin-section {
        padding: 0;
    }
    
    /* Forms */
    .lorebooks-filter,
    .users-search-filter {
        gap: 1rem;
    }
    
    /* Buttons */
    .section-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .section-actions button,
    .section-actions select {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Activity Stats Modal */
    #stats-modal .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 1.5rem;
    }
    
    #stats-modal .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Activity Log Section Actions */
    .section-header .section-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .section-header .section-actions .btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Base Layout */
    .admin-main {
        padding: 1rem;
    }
    
    /* Typography adjustments */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    
    /* Grid single column */
    .stats-grid,
    .traffic-stats,
    .model-stats,
    .bugreports-stats,
    .users-stats,
    .content-reports-stats,
    .pending-tasks-grid {
        grid-template-columns: 1fr;
    }
    
    .lorebooks-grid {
        grid-template-columns: 1fr;
    }
    
    /* Cards full width */
    .stat-card,
    .lorebook-card,
    .bugreport-card,
    .user-card {
        width: 100%;
    }
    
    /* Bug Report Modal Mobile Fix */
    #bugreport-modal .modal-close,
    #bugreport-modal-close {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Filters vertical */
    .lorebooks-filter,
    .filter-group {
        flex-direction: column;
        width: 100%;
    }
    
    .filter-group input,
    .filter-group select {
        width: 100%;
        min-width: unset;
    }
    
    /* Section headers */
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .section-header h2 {
        margin-bottom: 0.5rem;
    }
    
    /* Quick actions */
    .quick-action-buttons {
        grid-template-columns: 1fr;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        width: 100%;
    }
    
    /* Tables */
    .table-container {
        font-size: 0.875rem;
    }
    
    /* Modals */
    .modal-content {
        width: 95%;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-content.large {
        width: 95%;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    /* Hide non-essential elements */
    .header-user .user-name {
        display: none;
    }
    
    /* Dashboard specific */
    .welcome-title {
        font-size: 1.5rem;
    }
    
    .pending-task-card {
        padding: 1rem;
    }
    
    /* Activity sections */
    .analytics-section,
    .system-status-widget,
    .recent-activity {
        padding: 1rem;
    }
}

/* Small mobile optimizations */
@media (max-width: 480px) {
    /* Base font size for better readability */
    body {
        font-size: 14px;
    }
    
    /* Prevent iOS zoom on input focus */
    input,
    select,
    textarea {
        font-size: 16px;
    }
    
    /* Further reduce padding */
    .admin-main {
        padding: 0.75rem;
    }
    
    .stat-card {
        padding: 0.75rem;
    }
    
    /* Smaller buttons */
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Compact headers */
    .admin-header {
        padding: 0.75rem 1rem;
    }
    
    .page-title {
        font-size: 1.25rem;
    }
    
    /* Sidebar adjustments */
    .nav-btn {
        padding: 0.75rem 1rem;
    }
    
    .nav-btn span {
        font-size: 0.875rem;
    }
    
    /* Hide sidebar subtitle */
    .sidebar-subtitle {
        display: none;
    }
    
    /* Compact cards */
    .lorebook-card {
        padding: 1rem;
    }
    
    .lorebook-card h3 {
        font-size: 1.1rem;
    }
    
    /* User cards */
    .user-item {
        padding: 0.75rem;
    }
    
    /* Form spacing */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Table font size */
    .table-container {
        font-size: 0.75rem;
    }
    
    /* Toast notifications */
    .toast {
        width: calc(100% - 2rem);
        margin: 1rem;
    }
    
    /* Loading spinner */
    .loading-spinner {
        width: 40px;
        height: 40px;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .admin-header {
        padding: 0.5rem 1rem;
    }
    
    .admin-main {
        padding: 0.75rem;
    }
    
    .modal-content {
        max-height: 85vh;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .nav-btn,
    .quick-action-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for touch */
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    /* Larger checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    
    /* Card hover effects on touch */
    .lorebook-card:active,
    .stat-card:active,
    .user-card:active {
        transform: scale(0.98);
    }
}


/* Inline Editor Modal - Subtle Mobile Optimizations */
@media (max-width: 768px) {
    /* Better modal positioning on mobile */
    #inline-editor-modal .modal-content {
        width: 90%;
        max-width: 500px;
        margin: 2% auto;
        max-height: 96vh;
    }
    
    #inline-editor-modal .modal-body {
        max-height: calc(96vh - 160px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Memory entries - keep functional but optimize */
    .memory-entries-container {
        max-height: 250px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .memory-entry textarea {
        font-size: 14px;
        min-height: 80px;
    }
    
    /* Form spacing */
    #inline-editor-form .form-group {
        margin-bottom: 1.25rem;
    }
    
    /* Prevent iOS zoom */
    #inline-editor-form input,
    #inline-editor-form textarea {
        font-size: 16px;
    }
    
    /* Button optimization - keep side by side but add spacing */
    #inline-editor-form .button-group {
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
    
    #inline-editor-form .button-group button {
        min-height: 44px; /* Touch target */
        padding: 0.75rem 1rem;
    }
    
}

@media (max-width: 480px) {
    /* Very small screens - more adjustments */
    #inline-editor-modal .modal-content {
        width: 95%;
        margin: 1% auto;
    }
    
    /* Stack buttons on very small screens */
    #inline-editor-form .button-group {
        flex-direction: column;
    }
    
    #inline-editor-form .button-group button {
        width: 100%;
    }
    
    /* Smaller padding */
    #inline-editor-modal .modal-body {
        padding: 1rem;
    }
    
    .memory-entries-container {
        padding: 0.75rem;
    }
}

/* Hamburger Menu Mobile Improvements */
@media (max-width: 1024px) {
    .menu-toggle {
        position: fixed;
        left: 1rem;
        top: 1rem;
        z-index: 1000;
        background: var(--primary-gradient);
        border: none;
        width: 48px;
        height: 48px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        box-shadow: 
            0 4px 20px rgba(103, 126, 234, 0.3),
            0 2px 10px rgba(0, 0, 0, 0.2);
        animation: pulse-subtle 2s ease-in-out infinite;
    }
    
    @keyframes pulse-subtle {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    .menu-toggle i {
        font-size: 1.25rem;
        color: white;
    }
    
    .menu-toggle:hover {
        background: var(--secondary-gradient);
        transform: scale(1.1);
        box-shadow: 
            0 6px 30px rgba(103, 126, 234, 0.4),
            0 3px 15px rgba(0, 0, 0, 0.3);
    }
    
    .menu-toggle:active {
        transform: scale(0.95);
    }
    
    /* Adjust header to accommodate fixed button */
    .admin-header {
        padding-left: 5rem;
    }
    
    /* When sidebar is active, hide the button */
    .admin-sidebar.active ~ .admin-main-wrapper .menu-toggle {
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        left: 0.75rem;
        top: 0.75rem;
        width: 44px;
        height: 44px;
    }
    
    .admin-header {
        padding-left: 4rem;
    }
}

/* Print styles */
@media print {
    .admin-sidebar,
    .admin-header,
    .menu-toggle,
    .section-actions,
    .modal,
    .toast-container,
    #particles-js {
        display: none !important;
    }
    
    .admin-main-wrapper {
        margin: 0;
        width: 100%;
    }
    
    .admin-main {
        padding: 0;
    }
    
    .admin-section {
        page-break-inside: avoid;
    }
}