/* IntoTrader Responsive Styles
 * This file contains responsive styles for the IntoTrader platform
 * It improves spacing and mobile-friendliness across all pages
 */

/* Base responsive variables */
:root {
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* Global spacing improvements */
body {
    padding-bottom: var(--spacing-xl);
}

.container {
    padding: var(--spacing-md);
}

.card {
    margin-bottom: var(--spacing-lg);
}

.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-content {
    padding: var(--spacing-lg);
}

/* Improved spacing between elements */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--spacing-md);
}

p {
    margin-bottom: var(--spacing-md);
}

ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-sm);
}

/* Form elements spacing */
.form-group {
    margin-bottom: var(--spacing-md);
}

label {
    display: block;
    margin-bottom: var(--spacing-sm);
}

input, select, textarea, button {
    margin-bottom: var(--spacing-md);
}

/* Button spacing */
.btn {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* Mobile navigation improvements */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        height: auto;
        padding: var(--spacing-md);
    }
    
    .nav-logo {
        margin-bottom: var(--spacing-md);
    }
    
    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-sm);
    }
    
    .nav-link {
        display: block;
        padding: var(--spacing-sm);
        border-bottom: 1px solid var(--color-gray-200);
    }
}

/* Responsive grid layout */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Mobile-first approach */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--spacing-md));
}

.col {
    flex: 1 0 100%;
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Responsive columns */
@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* Stock page specific responsive improvements */
@media (max-width: 992px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    
    .left-column,
    .right-column {
        width: 100%;
    }
    
    .chart-card .card-content {
        height: 300px;
    }
}

/* Dashboard specific responsive improvements */
.dashboard-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .dashboard-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Improved spacing for market data section */
.market-data {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
}

.market-data-header {
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Trade popup improvements */
#tradePopup > div {
    padding: var(--spacing-lg);
    max-width: 90%;
    width: 500px;
}

/* Improved spacing for analysis results */
.analysis-result {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
}

/* Improved spacing for lists */
.indicator-list li,
.sentiment-list li {
    padding: var(--spacing-md) 0;
}

/* Mobile-friendly search form */
@media (max-width: 576px) {
    .input-group {
        flex-direction: column;
    }
    
    .input-group input,
    .input-group button {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
}

/* Utility spacing classes */
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.ml-1 { margin-left: var(--spacing-sm); }
.ml-2 { margin-left: var(--spacing-md); }
.ml-3 { margin-left: var(--spacing-lg); }
.ml-4 { margin-left: var(--spacing-xl); }

.mr-1 { margin-right: var(--spacing-sm); }
.mr-2 { margin-right: var(--spacing-md); }
.mr-3 { margin-right: var(--spacing-lg); }
.mr-4 { margin-right: var(--spacing-xl); }

.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }
.gap-3 { gap: var(--spacing-lg); }
.gap-4 { gap: var(--spacing-xl); }