/**
 * Mobile Responsiveness for PCFM Dashboard
 * Ensures all pages work perfectly on mobile devices
 */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Container adjustments */
    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Card adjustments */
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }

    /* Stats cards - stack vertically on mobile */
    .stats-card {
        margin-bottom: 0.75rem !important;
    }

    .stats-card h2 {
        font-size: 1.5rem;
    }

    .stats-card h6 {
        font-size: 0.85rem;
    }

    /* Button groups - wrap better */
    .btn-group {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

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

    /* Tables - make scrollable */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.85rem;
    }

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

    /* Forms - full width inputs */
    .form-control,
    .form-select {
        font-size: 0.9rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 1rem;
    }

    /* Navbar - better mobile menu */
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.95);
        padding: 1rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
    }

    .navbar-nav {
        gap: 0.5rem;
    }

    /* Quick symbol buttons - smaller and wrap */
    .quick-symbol {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
        margin: 0.1rem !important;
    }

    /* Market Explorer - stack categories vertically */
    #marketExplorer .col-md-3 {
        margin-bottom: 1rem;
    }

    /* Integration cards */
    .integration-card {
        margin-bottom: 1rem;
    }

    /* Auto-trading settings - stack sections */
    .auto-trading-section .row {
        margin-bottom: 1rem;
    }

    /* Reduce heading sizes */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 1rem;
    }

    /* Alerts and notifications */
    .alert {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    /* Code blocks */
    pre {
        font-size: 0.75rem;
        padding: 0.5rem !important;
        max-height: 300px;
    }

    /* Badge adjustments */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
    }

    /* Dropdown menus */
    .dropdown-menu {
        font-size: 0.85rem;
        max-width: calc(100vw - 2rem);
    }

    /* Charts - make responsive */
    #price-chart,
    #feature-importance-chart,
    .plotly-chart {
        height: 250px !important;
    }
}

/* Small mobile devices (< 576px) */
@media (max-width: 576px) {
    /* Even more compact */
    .container,
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Stack all columns */
    .col-sm-6,
    .col-md-4,
    .col-md-6,
    .col-md-3,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4 {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    /* Smaller text */
    body {
        font-size: 0.85rem;
    }

    /* Hide less critical elements on tiny screens */
    .d-none-xs {
        display: none !important;
    }

    /* Action buttons - full width */
    .btn-group-vertical {
        width: 100%;
    }

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

    /* Prediction form - full width */
    #prediction-form .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Stats row - single column */
    .stats-card {
        margin-bottom: 0.5rem !important;
    }

    /* Market explorer - more compact */
    .quick-symbol {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }

    /* Integration hub cards */
    .col-lg-4 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Auto-trading form elements */
    input[type="number"],
    input[type="text"],
    select {
        font-size: 0.85rem;
    }

    /* Modal full screen on small devices */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
    }
}

/* Landscape mobile devices */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .card {
        margin-bottom: 0.5rem;
    }

    .card-body {
        padding: 0.5rem;
    }

    /* Make stats cards horizontal */
    .stats-card {
        display: flex;
        align-items: center;
    }

    .stats-card .card-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .stats-card h2 {
        font-size: 1.25rem;
        margin: 0;
    }
}

/* Tablet specific (768px - 992px) */
@media (min-width: 768px) and (max-width: 992px) {
    /* Optimize for tablet */
    .col-md-4 {
        width: 50%;
    }

    .col-md-6 {
        width: 50%;
    }

    .quick-symbol {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }

    /* Stats cards - 3 per row */
    .col-lg-2 {
        width: 33.333%;
    }
}

/* Integration Hub Mobile Fixes */
@media (max-width: 768px) {
    /* Integration cards - full width */
    .integration-hub .col-md-6,
    .integration-hub .col-lg-4 {
        width: 100%;
        padding: 0.5rem;
    }

    /* Feature lists */
    .integration-hub ul {
        font-size: 0.8rem;
        padding-left: 1rem;
    }

    /* Unlock modal */
    #unlockModal .modal-dialog {
        margin: 1rem;
    }

    #unlockModal .form-check-label {
        font-size: 0.85rem;
    }
}

/* Auto-Trading Mobile Fixes */
@media (max-width: 768px) {
    /* Master toggle - make prominent */
    #masterToggle {
        width: 2.5rem !important;
        height: 1.25rem !important;
    }

    /* Platform connection cards - stack */
    .trading-platform-card {
        margin-bottom: 1rem;
    }

    /* Stop loss cards - stack vertically */
    .stop-loss-card {
        margin-bottom: 1rem;
    }

    /* Risk management inputs - full width */
    .risk-input-group {
        margin-bottom: 0.75rem;
    }

    /* Confidence slider - larger for touch */
    #min-confidence {
        height: 2rem;
    }

    /* Save settings button - sticky on mobile */
    .settings-save-btn {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        margin: 0;
        border-radius: 0;
    }
}

/* TradingView Page Mobile */
@media (max-width: 768px) {
    /* Code blocks - better scroll */
    pre code {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    /* Webhook URL input */
    #webhook-url {
        font-size: 0.75rem;
    }

    /* Feature comparison table */
    .comparison-table {
        font-size: 0.75rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.25rem;
    }
}

/* ChatGPT/Claude Desktop Page Mobile */
@media (max-width: 768px) {
    /* Step cards - more compact */
    .setup-step {
        padding: 0.75rem;
    }

    /* API key input */
    .api-key-input {
        font-size: 0.8rem;
        word-break: break-all;
    }

    /* Download buttons */
    .download-btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Installation commands */
    .install-command {
        font-size: 0.7rem;
    }
}

/* History Page Mobile */
@media (max-width: 768px) {
    /* Make predictions table scrollable */
    #predictions-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide less important columns on mobile */
    #predictions-table th:nth-child(3),
    #predictions-table td:nth-child(3),
    #predictions-table th:nth-child(6),
    #predictions-table td:nth-child(6) {
        display: none;
    }

    /* Larger action buttons */
    .prediction-action-btn {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    /* Filter controls - stack */
    .history-filters {
        flex-direction: column;
        gap: 0.5rem;
    }

    .history-filters .form-select,
    .history-filters .form-control {
        width: 100%;
    }
}

/* Crypto Dashboard Mobile */
@media (max-width: 768px) {
    /* Hyperliquid cards - stack */
    .crypto-card {
        margin-bottom: 1rem;
    }

    /* Funding rate chart - reduce height */
    .funding-chart {
        height: 200px !important;
    }

    /* Perpetual metrics - smaller text */
    .perp-metric {
        font-size: 0.8rem;
    }

    .perp-metric-value {
        font-size: 1.1rem;
    }
}

/* Admin Dashboard Mobile */
@media (max-width: 768px) {
    /* User table - scrollable */
    .admin-users-table {
        font-size: 0.75rem;
    }

    /* Admin action buttons - stack */
    .admin-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .admin-actions .btn {
        width: 100%;
    }

    /* Stats cards - single column */
    .admin-stats {
        margin-bottom: 0.5rem;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Larger checkboxes and radio buttons */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Larger range sliders */
    input[type="range"] {
        height: 2rem;
    }

    /* Prevent zoom on input focus */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Better spacing for touch */
    .nav-link {
        padding: 0.75rem 1rem;
    }
}

/* Print styles */
@media print {
    /* Hide navigation and non-essential elements */
    .navbar,
    .btn,
    .alert,
    #prediction-form,
    .quick-symbol {
        display: none !important;
    }

    /* Expand all collapsed sections */
    .collapse {
        display: block !important;
        height: auto !important;
    }

    /* Better table printing */
    table {
        page-break-inside: avoid;
    }

    /* Card borders for clarity */
    .card {
        border: 1px solid #000;
        page-break-inside: avoid;
    }
}

/* Dark mode mobile adjustments */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* Ensure good contrast on mobile dark mode */
    .card {
        background-color: #1a1a1a;
        border-color: #333;
    }

    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.98);
    }

    /* Better readability */
    body {
        background-color: #0d0d0d;
    }

    .text-muted {
        color: #aaa !important;
    }
}

/* Accessibility improvements */
@media (max-width: 768px) {
    /* Skip to main content link */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: #fff;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
    }

    .skip-link:focus {
        top: 0;
    }

    /* Focus indicators - larger on mobile */
    *:focus {
        outline: 3px solid #007bff;
        outline-offset: 2px;
    }

    /* Better error messages */
    .invalid-feedback {
        font-size: 0.9rem;
        display: block;
        margin-top: 0.5rem;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce expensive animations on mobile for performance */
    /* Only target specific heavy animations instead of disabling everything */
    .card-molecular,
    .glass,
    [class*="animate-"] {
        animation-duration: 0.3s !important;
    }

    /* Faster transitions for interactive elements */
    .btn,
    .dropdown-menu,
    .modal {
        transition-duration: 0.2s !important;
    }

    /* Disable expensive GPU-intensive effects on mobile */
    .card-molecular,
    .glass {
        backdrop-filter: none !important;
    }

    .glow,
    [class*="glow"] {
        box-shadow: var(--shadow-md) !important; /* Simpler shadow instead of glow */
    }

    /* Disable hover effects on touch devices */
    .card:hover,
    .btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ===================================
   TERMS OF SERVICE MODAL - MOBILE OPTIMIZED
   =================================== */

/* Mobile optimizations for TOS modal */
@media (max-width: 768px) {
    /* Modal takes full screen on mobile */
    #tosModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
    }

    #tosModal .modal-content {
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    /* Modal header - compact on mobile */
    #tosModal .modal-header {
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 1050;
    }

    #tosModal .modal-header .modal-title {
        font-size: 1rem;
        line-height: 1.3;
    }

    #tosModal .modal-header .btn-close {
        padding: 0.5rem;
        margin: 0;
    }

    /* Modal body - optimized scrolling */
    #tosModal .modal-body {
        padding: 1rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        max-height: calc(100vh - 140px); /* Account for header and footer */
    }

    /* Cards within modal - more compact */
    #tosModal .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }

    #tosModal .card-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    #tosModal .card-body {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    #tosModal .card-body p,
    #tosModal .card-body ul,
    #tosModal .card-body ol {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    #tosModal .card-body li {
        margin-bottom: 0.4rem;
    }

    #tosModal .card-body strong {
        font-weight: 600;
    }

    /* Alert boxes within modal */
    #tosModal .alert {
        padding: 0.75rem;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    #tosModal .alert-heading {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    /* Icons in headers */
    #tosModal .card-header i {
        font-size: 0.9rem;
        margin-right: 0.4rem;
    }

    /* Modal footer - sticky on mobile */
    #tosModal .modal-footer {
        padding: 0.75rem 1rem;
        position: sticky;
        bottom: 0;
        z-index: 1050;
        background: #212529;
        border-top: 1px solid #495057;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #tosModal .modal-footer p {
        width: 100%;
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }

    /* Buttons in footer - stack on small mobile */
    #tosModal .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 120px;
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }

    /* Smaller heading adjustments */
    #tosModal h5 {
        font-size: 1rem;
    }

    #tosModal h6 {
        font-size: 0.9rem;
    }

    /* Lead text */
    #tosModal .lead {
        font-size: 1rem;
    }

    /* Small text within modal */
    #tosModal .small,
    #tosModal small {
        font-size: 0.8rem;
    }

    /* List styling improvements */
    #tosModal ul,
    #tosModal ol {
        padding-left: 1.2rem;
    }
}

/* Extra small devices (phones in portrait, less than 576px) */
@media (max-width: 576px) {
    /* Even more compact on very small screens */
    #tosModal .modal-body {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    #tosModal .card-body {
        padding: 0.6rem;
        font-size: 0.8rem;
    }

    #tosModal .card-body p,
    #tosModal .card-body ul,
    #tosModal .card-body ol {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    #tosModal .modal-footer .btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        min-width: 100px;
    }

    /* Reduce spacing between sections */
    #tosModal .card {
        margin-bottom: 0.75rem;
    }

    /* Compact list items */
    #tosModal .card-body li {
        margin-bottom: 0.3rem;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    #tosModal .modal-body {
        max-height: calc(100vh - 100px); /* Less space for header/footer in landscape */
    }
}

/* Touch-friendly improvements for TOS modal */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets for buttons */
    #tosModal .modal-footer .btn {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Larger close button */
    #tosModal .btn-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Better scroll indicators */
    #tosModal .modal-body {
        padding-bottom: 2rem; /* Extra padding to show more content is below */
    }

    /* Smooth momentum scrolling */
    #tosModal .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* Dark theme specific adjustments for mobile */
@media (max-width: 768px) {
    #tosModal .modal-content {
        background-color: #1a1a1a;
    }

    #tosModal .card {
        background-color: #2a2a2a;
    }

    #tosModal .card-header {
        background-color: rgba(0, 0, 0, 0.3);
    }

    /* Better contrast for text */
    #tosModal .text-white {
        color: #ffffff !important;
    }

    #tosModal .text-muted {
        color: #adb5bd !important;
    }

    /* Alert backgrounds */
    #tosModal .alert-warning {
        background-color: rgba(255, 193, 7, 0.2);
        border-color: rgba(255, 193, 7, 0.3);
        color: #ffc107;
    }

    #tosModal .alert-danger {
        background-color: rgba(220, 53, 69, 0.2);
        border-color: rgba(220, 53, 69, 0.3);
        color: #ff6b6b;
    }

    #tosModal .alert-info {
        background-color: rgba(13, 202, 240, 0.2);
        border-color: rgba(13, 202, 240, 0.3);
        color: #17a2b8;
    }

    #tosModal .alert-success {
        background-color: rgba(25, 135, 84, 0.2);
        border-color: rgba(25, 135, 84, 0.3);
        color: #28a745;
    }
}

/* Footer links - mobile optimized */
@media (max-width: 576px) {
    footer .container p {
        flex-direction: column;
        gap: 0.5rem;
    }

    footer a {
        display: block;
        margin: 0.3rem 0 !important;
        font-size: 0.9rem;
    }

    footer small {
        font-size: 0.75rem;
    }
}