/**
 * MigroStack Mobile Dashboard & Admin Panel Styles
 * Optimized for mobile devices, tablets, and touch interfaces
 */

/* ==================== MOBILE NAVIGATION ==================== */

/* Mobile menu toggle button - Hidden on desktop */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    background: var(--bg-elevated);
    border: 2px solid var(--primary-blue);
    border-radius: 8px;
    padding: 0.75rem;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

.mobile-menu-toggle svg,
.mobile-menu-toggle span {
    color: var(--primary-blue);
    font-size: 24px;
    line-height: 1;
}

/* Hamburger icon */
.mobile-menu-toggle .hamburger {
    width: 24px;
    height: 2px;
    background: var(--primary-blue);
    position: relative;
    display: block;
    transition: all 0.3s ease;
}

.mobile-menu-toggle .hamburger::before,
.mobile-menu-toggle .hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--primary-blue);
    left: 0;
    transition: all 0.3s ease;
}

.mobile-menu-toggle .hamburger::before {
    top: -8px;
}

.mobile-menu-toggle .hamburger::after {
    bottom: -8px;
}

.mobile-menu-toggle.active .hamburger {
    background: transparent;
}

.mobile-menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* Mobile sidebar overlay */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9997;
    -webkit-backdrop-filter: blur(4px); /* Safari 9+ support */
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.mobile-sidebar-overlay.active {
    display: block;
    animation: fadeIn 0.3s ease;
    pointer-events: auto;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================== MOBILE RESPONSIVE (0-767px) ==================== */
@media (max-width: 767px) {
    /* Reset body and html for mobile */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Sidebar - Off-canvas on mobile */
    .admin-sidebar, #sidebar-nav {
        position: fixed !important;
        left: -100% !important;
        top: 0;
        width: 220px !important;
        height: 100vh;
        z-index: 9998;
        transition: left 0.3s ease;
        overflow-y: auto;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
        pointer-events: none;
    }

    .admin-sidebar.mobile-open, #sidebar-nav.mobile-open {
        left: 0 !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* Ensure all nav items are clickable when menu is open */
    .admin-sidebar.mobile-open .nav-item,
    .admin-sidebar.mobile-open .sidebar-nav-item,
    .admin-sidebar.mobile-open a,
    #sidebar-nav.mobile-open .nav-item,
    #sidebar-nav.mobile-open .sidebar-nav-item,
    #sidebar-nav.mobile-open a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Main content - Full width on mobile */
    .admin-main, main, .container, #root {
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* React app container */
    #root > div {
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Header - Mobile adjustments */
    .admin-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .header-left {
        width: 100%;
        padding-left: 60px; /* Space for hamburger */
    }

    .header-left h1 {
        font-size: 1rem;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* User menu - Compact on mobile */
    .user-menu {
        padding: 0.5rem 0.75rem;
    }

    .user-info {
        display: none; /* Hide on very small screens */
    }

    .user-avatar {
        width: 36px;
        height: 36px;
    }

    /* Content area - Better mobile padding */
    .admin-content {
        padding: 1rem;
    }

    /* Stats grid - Stack on mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Stat card - Mobile optimized */
    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    /* Tables - Horizontal scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    table {
        min-width: 600px;
        font-size: 0.875rem;
    }

    th, td {
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }

    /* Cards - Better spacing */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .card-header {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    /* Forms - Full width inputs */
    .form-group {
        margin-bottom: 1rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.875rem 0.75rem;
        width: 100%;
    }

    /* Buttons - Touch friendly */
    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        min-height: 44px;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-sm {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-height: 40px;
    }

    .btn-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group .btn {
        width: 100%;
    }

    /* Modals - Full screen on mobile */
    .modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    /* Navigation items - Larger touch targets */
    .nav-item {
        padding: 1rem 0.75rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .nav-item-icon {
        font-size: 20px;
        width: 24px;
    }

    .nav-section-title {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }

    /* Sidebar header */
    .sidebar-header {
        padding: 1rem;
    }

    .sidebar-logo-text {
        font-size: 1.125rem;
    }

    /* Sidebar footer */
    .sidebar-footer {
        padding: 1rem;
    }

    /* Action buttons container */
    .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .action-buttons .btn {
        width: 100%;
    }

    /* Filter bar - Stack on mobile */
    .filter-bar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-bar select,
    .filter-bar input {
        width: 100%;
    }

    /* Pagination - Compact on mobile */
    .pagination {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .pagination button {
        min-width: 40px;
        padding: 0.5rem;
    }

    /* Grid layouts - Single column */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }

    /* Chart containers */
    .chart-container {
        height: 250px;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    /* Tabs - Scrollable on mobile */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .tab-list {
        display: flex;
        gap: 0.5rem;
        white-space: nowrap;
        min-width: min-content;
    }

    .tab {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-width: 100px;
    }

    /* Dropdown menus - Full width on mobile */
    .dropdown-menu {
        width: calc(100vw - 2rem);
        left: 1rem;
        right: 1rem;
    }

    /* Search bar */
    .search-bar {
        width: 100%;
        margin-bottom: 1rem;
    }

    .search-input {
        width: 100%;
        font-size: 16px;
    }

    /* Breadcrumbs - Wrap on mobile */
    .breadcrumbs {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.875rem;
    }

    /* Alert messages */
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        margin: 0 -1rem 1rem -1rem;
        border-radius: 0;
    }

    /* File upload area */
    .file-upload-area {
        padding: 2rem 1rem;
        min-height: 150px;
    }

    /* Progress bars */
    .progress-container {
        margin-bottom: 1rem;
    }

    .progress-label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    /* Badge groups */
    .badge-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Loading states */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
    }
}

/* ==================== TABLET RESPONSIVE (768px - 1023px) ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Narrower sidebar on tablet */
    .admin-sidebar {
        width: 220px;
    }

    .admin-main {
        margin-left: 220px;
    }

    /* Header adjustments */
    .admin-header {
        padding: 1rem 1.5rem;
    }

    .header-left h1 {
        font-size: 1.25rem;
    }

    /* Content padding */
    .admin-content {
        padding: 1.5rem;
    }

    /* Stats grid - 2 columns on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tables - Smaller font */
    table {
        font-size: 0.875rem;
    }

    /* Forms - Two columns where appropriate */
    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Cards */
    .card {
        padding: 1.25rem;
    }

    /* Buttons - Normal size */
    .btn {
        padding: 0.75rem 1.5rem;
        width: auto;
    }

    /* Grid layouts - 2 columns */
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modal */
    .modal-content {
        max-width: 90%;
        border-radius: var(--radius-lg);
    }

    /* Navigation */
    .nav-item {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* ==================== LANDSCAPE ORIENTATION ==================== */
@media (max-width: 926px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .admin-content {
        padding: 1rem;
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }

    .sidebar-nav {
        max-height: calc(100vh - 200px);
    }

    .chart-container {
        height: 200px;
    }
}

/* ==================== TOUCH DEVICE OPTIMIZATIONS ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .nav-item,
    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch */
    .card:hover,
    .nav-item:hover,
    .btn:hover {
        transform: none;
    }

    /* Disable tap highlight */
    button,
    .btn,
    .nav-item,
    a {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none; /* Safari 3+ */
        user-select: none;
    }

    /* Larger form controls */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    /* Scrollbar visibility */
    .admin-sidebar,
    .table-container {
        scrollbar-width: thin;
    }

    .admin-sidebar::-webkit-scrollbar,
    .table-container::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
}

/* ==================== DESKTOP (1024px+) ==================== */
@media (min-width: 1024px) {
    /* Hide mobile elements on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }

    .mobile-sidebar-overlay {
        display: none !important;
    }

    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }

    /* Restore desktop sidebar */
    .admin-sidebar {
        position: fixed;
        left: 0;
    }

    /* User info visible on desktop */
    .user-info {
        display: flex !important;
    }
}

/* ==================== DASHBOARD LAYOUT FIX ==================== */
/* Prevent cards from overlaying sidebar */
#root {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Ensure sidebar stays fixed and doesn't shrink */
#root > aside {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Main content area should take remaining space */
#root > div:not(aside) {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

/* Dashboard cards container */
.dashboard-cards-container,
[style*="display: grid"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Stats grid - ensure proper spacing */
[style*="grid-template-columns"] {
    padding: 1rem;
    gap: 1rem;
}

@media (max-width: 767px) {
    /* On mobile, sidebar should overlay */
    #root {
        display: block;
    }

    #root > aside {
        position: fixed !important;
        top: 0;
        left: -100%;
        transition: left 0.3s ease;
    }

    #root > aside.mobile-open {
        left: 0 !important;
    }

    #root > div:not(aside) {
        margin-left: 0 !important;
        width: 100%;
    }
}

/* ==================== UTILITIES ==================== */

/* Mobile stack utility */
.mobile-stack {
    display: flex;
}

@media (max-width: 767px) {
    .mobile-stack {
        flex-direction: column !important;
    }
}

/* Mobile hide/show utilities */
@media (max-width: 767px) {
    .mobile-hide {
        display: none !important;
    }

    .mobile-show {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-show {
        display: none !important;
    }

    .mobile-hide {
        display: block !important;
    }
}

/* Text truncate on mobile */
@media (max-width: 767px) {
    .mobile-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
    }
}

/* Responsive text sizes */
@media (max-width: 767px) {
    .responsive-text-lg {
        font-size: 1rem !important;
    }

    .responsive-text-xl {
        font-size: 1.25rem !important;
    }

    .responsive-text-2xl {
        font-size: 1.5rem !important;
    }
}

/* ==================== DARK ICONS IN LIGHT MODE ==================== */
/* Make specific navigation icons darker for better visibility in light mode */
[data-theme="light"] .nav-icon-dark {
  filter: brightness(0.5) contrast(1.4) saturate(1.2);
  opacity: 0.95;
}

/* Keep icons normal in dark mode */
[data-theme="dark"] .nav-icon-dark {
  filter: none;
  opacity: 1;
}