/**
 * RSO Turnkey Sales - Mobile Responsive Additions
 * Zusätzliche responsive Optimierungen für alle Komponenten
 */

/* =====================================================
   GLOBAL MOBILE OPTIMIZATIONS
   ===================================================== */

/* Touch-friendly tap targets */
@media screen and (max-width: 782px) {
    button,
    .button,
    .rso-btn,
    a.rso-tab,
    .rso-tab-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent text zoom on iOS */
@media screen and (max-width: 600px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* =====================================================
   CRM UNIFIED - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 782px) {
    .rso-crm-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .rso-crm-tabs::-webkit-scrollbar {
        display: none;
    }

    .rso-tab-btn {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 12px;
    }

    .rso-tab-btn .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
}

@media screen and (max-width: 600px) {
    .rso-crm-tabs {
        margin: -12px -12px 12px -12px;
        padding: 0 8px;
    }

    .rso-tab-btn {
        padding: 8px 10px;
        font-size: 11px;
    }

    .rso-tab-badge {
        font-size: 10px;
        padding: 1px 4px;
    }
}

/* =====================================================
   ACTION BAR - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 782px) {
    .rso-action-bar {
        flex-direction: column;
        gap: 10px;
    }

    .rso-action-bar-left,
    .rso-action-bar-right {
        width: 100%;
        justify-content: flex-start;
    }

    .rso-action-bar button {
        flex: 1;
        min-width: auto;
    }
}

@media screen and (max-width: 600px) {
    .rso-action-bar {
        padding: 10px;
    }

    .rso-action-bar button {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* =====================================================
   HELP SYSTEM - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 782px) {
    .rso-help-panel {
        width: 100%;
        right: 0;
        left: 0;
        max-width: none;
    }

    .rso-help-search {
        flex-direction: column;
    }

    .rso-help-search input {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .rso-help-panel {
        height: 100vh;
        border-radius: 0;
    }

    .rso-help-header {
        padding: 12px;
    }

    .rso-help-content {
        padding: 12px;
    }

    .rso-help-item {
        padding: 10px;
    }
}

/* =====================================================
   STATUS IMPROVEMENTS - RESPONSIVE
   ===================================================== */

@media screen and (max-width: 782px) {
    .rso-status-timeline {
        padding-left: 25px;
    }

    .rso-status-timeline::before {
        left: 10px;
    }

    .rso-timeline-item {
        margin-left: 8px;
    }

    .rso-timeline-icon {
        left: -30px;
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

@media screen and (max-width: 600px) {
    .rso-status-timeline {
        padding-left: 20px;
    }

    .rso-timeline-item {
        padding: 8px 10px;
        margin-left: 5px;
    }

    .rso-timeline-icon {
        left: -25px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .rso-timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* =====================================================
   WORDPRESS ADMIN OVERRIDES
   ===================================================== */

/* Meta Box Columns auf Mobile */
@media screen and (max-width: 782px) {
    .post-type-rso_project #poststuff #post-body.columns-2 {
        margin-right: 0;
    }

    .post-type-rso_project #poststuff #post-body.columns-2 #postbox-container-1 {
        float: none;
        width: 100%;
        margin-top: 20px;
    }

    .post-type-rso_project #poststuff #post-body.columns-2 #postbox-container-2 {
        float: none;
        width: 100%;
    }
}

/* Admin Menu auf Mobile */
@media screen and (max-width: 600px) {
    #adminmenuback,
    #adminmenuwrap {
        display: none;
    }

    #wpcontent,
    #wpfooter {
        margin-left: 0;
    }

    .auto-fold #wpcontent {
        padding-left: 0;
    }
}

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

@media print {
    /* Hide non-essential elements */
    .rso-action-bar,
    .rso-help-panel,
    .rso-whatsapp-float,
    .rso-save-progress-btn,
    .rso-nav,
    .rso-dashboard-tabs,
    button,
    .button {
        display: none !important;
    }

    /* Optimize for print */
    .rso-lead-form,
    .rso-customer-portal,
    .rso-installer-dashboard {
        max-width: 100%;
        padding: 0;
    }

    .rso-product-card,
    .rso-job-card,
    .rso-project-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Black & white friendly */
    .rso-status-badge,
    .rso-badge {
        border: 1px solid #000;
        background: #fff !important;
        color: #000 !important;
    }
}

/* =====================================================
   ACCESSIBILITY IMPROVEMENTS
   ===================================================== */

/* Focus states for keyboard navigation */
@media screen and (max-width: 782px) {
    button:focus,
    .button:focus,
    .rso-btn:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #2271b1;
        outline-offset: 2px;
    }

    /* Skip to content link */
    .skip-link:focus {
        clip: auto;
        height: auto;
        width: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100000;
    }
}

/* =====================================================
   PERFORMANCE OPTIMIZATIONS
   ===================================================== */

/* Reduce animations on low-end devices */
@media screen and (max-width: 600px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   DARK MODE SUPPORT (Optional)
   ===================================================== */

@media screen and (max-width: 782px) and (prefers-color-scheme: dark) {
    /* Nur wenn WordPress Dark Mode aktiv ist */
    .is-dark-theme .rso-lead-form,
    .is-dark-theme .rso-customer-portal,
    .is-dark-theme .rso-product-card {
        background: #1e1e1e;
        color: #e0e0e0;
        border-color: #3a3a3a;
    }

    .is-dark-theme input,
    .is-dark-theme select,
    .is-dark-theme textarea {
        background: #2a2a2a;
        color: #e0e0e0;
        border-color: #3a3a3a;
    }
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

/* Mobile-only visibility */
.rso-mobile-only {
    display: none;
}

@media screen and (max-width: 782px) {
    .rso-mobile-only {
        display: block;
    }

    .rso-desktop-only {
        display: none;
    }
}

/* Responsive text sizes */
@media screen and (max-width: 600px) {
    .rso-text-responsive {
        font-size: 14px;
    }

    .rso-heading-responsive {
        font-size: 20px;
    }
}

/* Responsive spacing */
@media screen and (max-width: 600px) {
    .rso-spacing-responsive {
        padding: 15px;
        margin: 10px 0;
    }
}

/* Full-width on mobile */
@media screen and (max-width: 600px) {
    .rso-full-width-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Stack on mobile */
@media screen and (max-width: 600px) {
    .rso-stack-mobile {
        flex-direction: column !important;
    }

    .rso-stack-mobile > * {
        width: 100% !important;
    }
}