/**
 * FILE: responsive.css
 * PURPOSE: Minimal responsive overrides for Sparkus Panel components
 * SPEC PROJECT: SP-PUX-36-responsive
 *
 * STRATEGY: Use Metronic's built-in responsive utilities first!
 * Only add CSS here for Sparkus-specific components that Metronic doesn't cover.
 *
 * Metronic utilities to use instead of custom CSS:
 * - .d-none .d-md-block     → Hide/show by breakpoint
 * - .col-12 .col-md-6       → Responsive grid
 * - .flex-column .flex-md-row → Stack/row by breakpoint
 * - .table-responsive       → Horizontal scroll tables
 * - .modal-fullscreen-lg-down → Fullscreen modals on mobile
 *
 * LAST UPDATED: December 4, 2025
 * CHANGE SUMMARY: Created minimal responsive CSS following Metronic best practices
 */

/* ============================================================
   CSS CUSTOM PROPERTIES - Mobile Overrides
   ============================================================ */

@media (max-width: 575.98px) {
    :root {
        /* Smaller health circle on mobile */
        --sp-health-circle-size: 90px;
        --sp-health-circle-stroke: 6px;
    }
}

/* ============================================================
   HEALTH SCORE CIRCLE
   Metronic doesn't have this component, need custom responsive
   ============================================================ */

@media (max-width: 767.98px) {
    .sp-health-card {
        padding: 1rem;
    }
    
    .sp-health-breakdown {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .sp-health-breakdown-item {
        flex: 1 1 45%;
    }
}

/* ============================================================
   STAGE PROGRESS INDICATOR
   Vertical layout on mobile for better readability
   ============================================================ */

@media (max-width: 575.98px) {
    .sp-stage-progress {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 1rem;
    }
    
    .sp-stage-item {
        flex-direction: row;
        margin-bottom: 0.5rem;
        width: 100%;
    }
    
    .sp-stage-label {
        margin-top: 0;
        margin-left: 0.75rem;
    }
    
    .sp-stage-line {
        width: 3px;
        height: 40px;
        margin: 0;
        position: absolute;
        top: 24px;
        left: 11px;
    }
}

/* ============================================================
   PROGRAM CARDS
   Ensure full width on mobile
   ============================================================ */

@media (max-width: 767.98px) {
    .sp-program-card {
        max-width: 100%;
        min-width: 100%;
    }
    
    .sp-program-stats {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .sp-program-stat {
        flex: 1 1 45%;
        text-align: center;
    }
}

/* ============================================================
   ROLLING WIDGET
   Simplified view on mobile
   ============================================================ */

@media (max-width: 767.98px) {
    .sp-rolling-funnel {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sp-rolling-stage {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ============================================================
   GLOBAL SEARCH MODAL
   Full width on mobile for better usability
   ============================================================ */

@media (max-width: 767.98px) {
    .search-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    
    .search-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
    
    /* Prevent iOS zoom on input focus */
    .search-input {
        font-size: 16px;
    }
}

/* ============================================================
   QUICK ACTIONS & HELP CENTER DROPDOWNS
   Full width on small mobile
   ============================================================ */

@media (max-width: 575.98px) {
    .quick-actions-dropdown,
    .help-dropdown {
        width: calc(100vw - 2rem) !important;
        max-width: 100%;
        left: 1rem !important;
        right: 1rem !important;
    }
}

/* ============================================================
   FORM ACTIONS
   Stack buttons on mobile (use .flex-column .flex-md-row in HTML)
   ============================================================ */

@media (max-width: 767.98px) {
    .form-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   WIZARD STEPPER
   Vertical layout on mobile
   ============================================================ */

@media (max-width: 767.98px) {
    .stepper.stepper-pills .stepper-nav {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stepper.stepper-pills .stepper-item {
        margin-bottom: 1rem;
    }
    
    .stepper.stepper-pills .stepper-line {
        display: none;
    }
}

/* ============================================================
   TOUCH TARGETS
   Ensure minimum 44x44px on touch devices
   ============================================================ */

@media (pointer: coarse) {
    .btn-sm,
    .nav-link,
    .menu-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Larger checkbox/radio for touch */
    .form-check-input {
        width: 22px;
        height: 22px;
    }
}

/* ============================================================
   DISABLE HOVER EFFECTS ON TOUCH
   Prevents "sticky hover" on mobile
   ============================================================ */

@media (hover: none) {
    .sp-program-card:hover {
        transform: none;
    }
    
    .card:hover {
        box-shadow: inherit;
    }
}

/* ============================================================
   PRINT STYLES
   Basic print optimization
   ============================================================ */

@media print {
    .app-sidebar,
    .app-header,
    .app-footer,
    .btn,
    .no-print {
        display: none !important;
    }
    
    .app-main {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .card {
        border: 1px solid #dee2e6;
        box-shadow: none;
    }
}

/* ============================================================
   P4.5 — SP-UX-Audit: Mobile Responsive Fixes for Key Pages
   ============================================================ */

/* Analytics sub-navigation: horizontal scroll on mobile */
@media (max-width: 767.98px) {
    .nav-line-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-line-tabs::-webkit-scrollbar {
        display: none;
    }
    .nav-line-tabs .nav-item {
        flex-shrink: 0;
    }
}

/* Library Hub category grid: 2 columns on small screens */
@media (max-width: 575.98px) {
    .col-xl-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Getting Started checklist: stack on mobile */
@media (max-width: 767.98px) {
    .getting-started-step .d-flex {
        flex-direction: column;
        text-align: center;
    }
}

/* Help drawer: full width on small screens */
@media (max-width: 575.98px) {
    #kt_help_drawer {
        width: 100% !important;
    }
}

/* Welcome modal: responsive padding */
@media (max-width: 767.98px) {
    #kt_welcome_modal .modal-body {
        padding: 1rem !important;
    }
    #kt_welcome_modal .modal-dialog {
        margin: 0.5rem;
    }
}

/* Settings vertical tabs: stack on mobile */
@media (max-width: 991.98px) {
    .nav-pills.flex-column {
        flex-direction: row !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nav-pills.flex-column .nav-item {
        flex-shrink: 0;
    }
}

/* Program Items status summary: wrap on mobile */
@media (max-width: 767.98px) {
    .d-flex.flex-wrap.gap-2.ms-auto {
        margin-left: 0 !important;
        margin-top: 0.75rem;
        width: 100%;
    }
}

/* Tour popover: full width on mobile */
@media (max-width: 575.98px) {
    .tour-popover {
        max-width: 280px !important;
    }
}

/* Lifecycle indicator in sidebar: compact on narrow screens */
@media (max-width: 575.98px) {
    .lifecycle-stage .fs-9 {
        font-size: 0.65rem !important;
    }
}

/* P5.3 — Progressive Disclosure: smooth transitions for advanced items */
[data-feature-tier="advanced"] {
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.2s ease;
}

[data-feature-tier="advanced"].sp-hidden-advanced {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}