/**
 * Organizer Dashboard - Mobile Ultra Responsive
 * Optimizaciones adicionales para pantallas pequeñas
 * @version 4.1.0
 */

/* ==========================================================================
   FORZAR WIDTH 100% EN TODOS LOS ELEMENTOS
   ========================================================================== */
@media (max-width: 1024px) {

    .mec-organizer-portal-wrapper,
    .mec-organizer-dashboard,
    .mec-dash-header,
    .mec-dash-tabs,
    .mec-tab-content,
    .mec-stats-grid,
    .mec-card,
    .mec-panel,
    .mec-table-responsive {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   TABLET OPTIMIZATION (1024px and below)
   ========================================================================== */

@media (max-width: 1024px) {

    /* Force proper sizing */
    .mec-organizer-portal-wrapper {
        padding: 16px;
        overflow-x: hidden;
    }

    .mec-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
        gap: 14px;
    }

    .mec-dash-header {
        padding: 20px;
        gap: 14px;
    }

    .mec-dash-tabs {
        padding: 0 16px;
    }

    .mec-tab-link {
        font-size: 13px;
        padding: 13px 16px;
    }

    .mec-card,
    .mec-panel {
        padding: 18px;
    }

    .mec-table {
        min-width: 600px;
    }
}

/* ==========================================================================
   MOBILE OPTIMIZATION (768px and below)
   ========================================================================== */

@media (max-width: 768px) {

    /* CRITICAL: Force no horizontal scroll */
    body {
        overflow-x: hidden;
    }

    .mec-organizer-portal-wrapper {
        padding: 10px;
        overflow-x: hidden;
        width: 100%;
    }

    /* Header Stack */
    .mec-dash-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .mec-dash-header>div:first-child,
    .mec-dash-header>div:last-child {
        width: 100%;
    }

    .mec-dash-header h1 {
        font-size: 20px;
    }

    .mec-dash-header span {
        font-size: 13px;
    }

    .mec-dash-actions {
        width: 100%;
        justify-content: stretch;
    }

    .mec-dash-actions .button {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    /* Stats Grid - Stack Vertical */
    .mec-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }

    .mec-stat-card,
    .mec-overview-card {
        padding: 16px;
    }

    .mec-stat-card h4,
    .mec-overview-card-title {
        font-size: 11px;
    }

    .mec-stat-value,
    .mec-overview-card-value {
        font-size: 24px !important;
    }

    .mec-overview-card-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Tabs - Horizontal Scroll */
    .mec-dash-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        padding: 0 10px;
        margin: 0 -10px 16px -10px;
        scrollbar-width: thin;
        -ms-overflow-style: none;
        scroll-padding: 10px;
        width: calc(100% + 20px);
    }

    .mec-dash-tabs::-webkit-scrollbar {
        height: 2px;
    }

    .mec-tab-link {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 12px 14px;
    }

    .mec-tab-link i {
        font-size: 13px;
    }

    /* Tables - Improve Mobile Scroll */
    .mec-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
        width: calc(100% + 20px);
    }

    .mec-table {
        min-width: 550px;
        font-size: 12px;
    }

    .mec-table thead th {
        padding: 10px 8px;
        font-size: 10px;
        position: sticky;
        top: 0;
        background: var(--mec-gray-50);
        z-index: 10;
    }

    .mec-table tbody td {
        padding: 12px 8px;
        font-size: 12px;
    }

    /* Stack Action Buttons */
    .mec-action-group {
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }

    .mec-action-group .mec-btn {
        width: 100%;
        justify-content: center;
    }

    /* Toolbar Stack */
    .mec-toolbar,
    .mec-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .mec-toolbar-left,
    .mec-toolbar-right,
    .mec-bulk-actions {
        width: 100%;
    }

    .mec-search-box {
        width: 100%;
        max-width: 100%;
    }

    .mec-bulk-actions {
        flex-direction: column;
    }

    .mec-bulk-actions select,
    .mec-bulk-actions button {
        width: 100%;
    }

    /* Cards */
    .mec-card,
    .mec-panel {
        padding: 14px;
        margin-bottom: 14px;
    }

    .mec-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 14px;
    }

    .mec-card-header h3 {
        font-size: 17px;
    }

    /* Modals - Near Fullscreen */
    .mec-modal-overlay {
        padding: 8px;
    }

    .mec-modal-content {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100vh - 16px);
        border-radius: 16px;
        animation: slideFromBottom 0.3s ease;
    }

    @keyframes slideFromBottom {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .mec-modal-header,
    .mec-modal-content h3 {
        padding: 16px 18px;
        font-size: 18px;
    }

    .mec-modal-body {
        padding: 18px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }

    .mec-modal-footer {
        flex-direction: column-reverse;
        padding: 14px 18px;
        gap: 8px;
    }

    .mec-modal-footer .mec-btn {
        width: 100%;
        margin: 0;
    }

    .mec-modal-close {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    /* Forms */
    .mec-form-row {
        flex-direction: column;
        gap: 0;
    }

    .mec-form-row>* {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .mec-input,
    .mec-organizer-dashboard input,
    .mec-organizer-dashboard select,
    .mec-organizer-dashboard textarea {
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .mec-organizer-dashboard label {
        font-size: 12px;
        margin-bottom: 6px;
    }

    /* Buttons - Touch Optimized */
    button,
    .mec-btn,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 46px;
        font-size: 14px;
        padding: 12px 18px;
    }

    .mec-btn-sm {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 12px;
    }

    /* Event Items */
    .mec-event-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .mec-event-info h4 {
        font-size: 14px;
    }

    /* Badges */
    .mec-badge {
        font-size: 11px;
        padding: 5px 10px;
    }

    /* Notifications */
    .mec-notification {
        left: 10px;
        right: 10px;
        top: 10px;
        min-width: auto;
        max-width: none;
        padding: 14px 16px;
    }

    /* Empty State */
    .mec-empty-state {
        padding: 50px 16px;
    }

    .mec-empty-state-icon {
        font-size: 48px;
    }

    .mec-empty-state h3 {
        font-size: 17px;
    }

    .mec-empty-state p {
        font-size: 13px;
    }

    /* Magic Link - Truncate Better */
    .mec-magic-link {
        max-width: 140px;
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Improve touch targets for checkboxes */
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
}

/* ==========================================================================
   SMALL MOBILE OPTIMIZATION (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
    .mec-organizer-portal-wrapper {
        padding: 8px;
    }

    .mec-dash-header {
        padding: 14px;
        margin-bottom: 14px;
        border-radius: 16px;
    }

    .mec-dash-header h1 {
        font-size: 18px;
        line-height: 1.3;
    }

    .mec-dash-header span {
        font-size: 12px;
    }

    .mec-stat-value,
    .mec-overview-card-value {
        font-size: 22px !important;
    }

    .mec-overview-card-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .mec-tab-link {
        font-size: 11px;
        padding: 11px 12px;
    }

    .mec-tab-link i {
        font-size: 12px;
    }

    .mec-table {
        min-width: 500px;
        font-size: 11px;
    }

    .mec-table thead th {
        padding: 8px 6px;
        font-size: 9px;
    }

    .mec-table tbody td {
        padding: 10px 6px;
        font-size: 11px;
    }

    .mec-card,
    .mec-panel {
        padding: 12px;
    }

    .mec-card-header h3 {
        font-size: 16px;
    }

    .mec-modal-header,
    .mec-modal-content h3 {
        font-size: 17px;
        padding: 14px 16px;
    }

    .mec-modal-body {
        padding: 16px;
    }

    button,
    .mec-btn,
    a.button {
        font-size: 13px;
        min-height: 44px;
    }

    /* Stack ALL toolbar items vertically */
    .mec-toolbar>*,
    .mec-table-toolbar>* {
        width: 100%;
    }

    /* Smaller empty state */
    .mec-empty-state {
        padding: 40px 14px;
    }

    .mec-empty-state-icon {
        font-size: 42px;
    }

    .mec-empty-state h3 {
        font-size: 16px;
    }

    .mec-empty-state p {
        font-size: 12px;
    }
}

/* ==========================================================================
   EXTRA SMALL MOBILE (360px and below)
   ========================================================================== */

@media (max-width: 360px) {
    .mec-organizer-portal-wrapper {
        padding: 6px;
    }

    .mec-dash-header {
        padding: 12px;
    }

    .mec-dash-header h1 {
        font-size: 16px;
    }

    .mec-tab-link {
        font-size: 10px;
        padding: 10px;
        gap: 4px;
    }

    .mec-table {
        min-width: 450px;
    }

    .mec-card,
    .mec-panel {
        padding: 10px;
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE OPTIMIZATION
   ========================================================================== */

@media (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
    .mec-dash-header {
        padding: 14px 16px;
    }

    .mec-modal-content {
        max-height: 96vh;
    }

    .mec-modal-body {
        max-height: calc(96vh - 140px);
    }

    .mec-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
        gap: 10px;
    }

    .mec-stat-card,
    .mec-overview-card {
        padding: 12px;
    }
}

/* ==========================================================================
   ACCESSIBILITY & PERFORMANCE
   ========================================================================== */

@media (max-width: 768px) {

    /* Increase tap targets */
    a,
    button,
    input,
    select,
    textarea,
    .mec-tab-link,
    .mec-btn {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    }

    /* Better focus states for keyboard navigation */
    *:focus-visible {
        outline: 3px solid var(--mec-primary);
        outline-offset: 2px;
    }

    /* Prevent zoom on input focus (iOS) */
    select:focus,
    textarea:focus,
    input:focus {
        font-size: 16px;
    }

    /* Smooth scroll behavior */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   PWA / STANDALONE MODE
   ========================================================================== */

@media all and (display-mode: standalone) {
    .mec-dash-header {
        padding-top: max(env(safe-area-inset-top, 20px), 20px);
    }

    .mec-modal-overlay {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mec-notification {
        top: max(env(safe-area-inset-top, 12px), 12px);
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {

    .mec-btn,
    .mec-tab-link.active,
    .mec-badge {
        border: 2px solid currentColor;
    }

    .mec-card,
    .mec-panel,
    .mec-stat-card,
    .mec-overview-card {
        border: 2px solid var(--mec-gray-300);
    }

    .mec-table tbody tr:hover {
        background: var(--mec-gray-100);
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {

    .mec-dash-header,
    .mec-dash-tabs,
    .mec-dash-actions,
    .mec-toolbar,
    .mec-table-toolbar,
    .mec-action-group,
    .mec-btn,
    button,
    .mec-modal-overlay {
        display: none !important;
    }

    .mec-organizer-portal-wrapper {
        background: white;
        padding: 0;
    }

    .mec-organizer-portal-wrapper::before {
        display: none;
    }

    .mec-card,
    .mec-stat-card,
    .mec-overview-card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
        margin-bottom: 10px;
    }

    .mec-table-responsive {
        overflow: visible;
    }

    .mec-table {
        min-width: auto;
        width: 100%;
    }

    .mec-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}

/* ==========================================================================
   FIX COMMON OVERFLOW ISSUES
   ========================================================================== */

@media (max-width: 768px) {

    /* Prevent any element from causing horizontal scroll */
    .mec-organizer-portal-wrapper * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Ensure images never overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Wrap long text instead of overflow */
    .mec-card-header h3,
    .mec-stat-card h4,
    .mec-overview-card-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Force text truncation where needed */
    .mec-table tbody td {
        max-width: 200px;
    }

    /* ==========================================================================
       TICKETS SECTION MOBILE OPTIMIZATION
       ========================================================================== */
    
    /* Ticket Manager Container */
    #mec-ticket-manager-list {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Ticket Cards stacked vertically on mobile */
    .mec-ticket-card,
    .mec-table-responsive .mec-ticket-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 16px;
        margin-bottom: 12px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Ticket card header */
    .mec-ticket-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 12px;
    }
    
    /* Ticket title */
    .mec-ticket-card h4,
    .mec-ticket-item-title {
        font-size: 15px;
        margin: 0 0 8px 0;
        font-weight: 700;
        color: #1a1f3c;
    }
    
    /* Ticket metadata */
    .mec-ticket-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 0;
    }
    
    .mec-ticket-meta-item {
        font-size: 12px;
        padding: 4px 10px;
        background: #f3f4f6;
        border-radius: 6px;
        color: #6b7280;
    }
    
    /* Ticket actions - stack vertically on mobile */
    .mec-ticket-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        width: 100%;
    }
    
    .mec-ticket-actions .mec-btn {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 12px;
    }
    
    /* Ticket form on mobile */
    .mec-ticket-form-group,
    #mec-ticket-form .mec-form-group {
        width: 100%;
        margin-bottom: 16px;
    }
    
    .mec-ticket-form-group input,
    .mec-ticket-form-group select,
    #mec-ticket-form input,
    #mec-ticket-form select {
        width: 100%;
        font-size: 16px;
    }
}