/* Additional CSS for Static Portfolio User Controls */
/* Add this to your existing portfolios.css or create as separate file */

/* Static Portfolio Container Styles */
.static-portfolio-container {
    margin-bottom: 40px;
}

/* Portfolio Controls - Modified for Static Portfolios */
.portfolio-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--curve-box-border-color);
}

.portfolio-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.portfolio-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--main-font-color);
}

.portfolio-description {
    font-size: 14px;
    color: #6c757d;
}

/* Multiple Portfolio Layout Support */
.portfolio-comparison-container .static-portfolio-container {
    margin-bottom: 20px;
}

.portfolio-section {
    margin-bottom: 40px;
}

    .portfolio-section h2 {
        color: var(--main-font-color);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--accent-main);
    }

/* Static Portfolio Table Enhancements */
.static-portfolio-container .stock-table {
    box-shadow: var(--shadow);
    border: 1px solid var(--curve-box-border-color);
}

    .static-portfolio-container .stock-table table {
        width: 100%;
    }

/* Unique styling for static portfolios */
.static-portfolio-container .page-header h1::after {
    content: "";
    font-size: 14px;
    color: #6c757d;
    font-weight: normal;
    margin-left: 10px;
}

/* Remove the view-only indicator if you don't want it */
.static-portfolio-container.hide-view-only .page-header h1::after {
    display: none;
}

/* Enhanced stats grid for static portfolios */
.static-portfolio-container .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.static-portfolio-container .stat-card {
    background: white;
    padding: 18px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--curve-box-border-color);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .static-portfolio-container .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

/* Portfolio comparison specific styles */
.portfolio-comparison-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 1200px) {
    .portfolio-comparison-container {
        grid-template-columns: 1fr 1fr;
    }
}

.portfolio-comparison-container .portfolio-section {
    border: 1px solid var(--curve-box-border-color);
    border-radius: 8px;
    padding: 25px;
    background: white;
    box-shadow: var(--shadow);
}

.portfolio-comparison-container .static-portfolio-container .page-header {
    margin-bottom: 20px;
    border-bottom: none;
    padding-bottom: 0;
}

    .portfolio-comparison-container .static-portfolio-container .page-header h1 {
        font-size: 24px;
        margin: 0;
    }

    .portfolio-comparison-container .static-portfolio-container .page-header p {
        margin: 5px 0 0 0;
        font-size: 14px;
    }

/* Responsive adjustments for static portfolios */
@media (max-width: 768px) {
    .portfolio-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .portfolio-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .refresh-controls {
        justify-content: center;
    }

    .static-portfolio-container .stats-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-comparison-container {
        grid-template-columns: 1fr;
    }
}

/* Print styles for static portfolios */
@media print {
    .static-portfolio-container .portfolio-controls,
    .static-portfolio-container .refresh-controls,
    .btn {
        display: none !important;
    }

    .static-portfolio-container .page-header h1::after {
        display: none;
    }

    .static-portfolio-container .stock-table {
        box-shadow: none;
        border: 1px solid #000;
    }

    .static-portfolio-container .stat-card {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Loading states */
.static-portfolio-container .loading {
    opacity: 0.6;
    pointer-events: none;
}

.static-portfolio-container .price-status.loading::before {
    content: "⏳ ";
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Cash position styling */
.static-portfolio-container tbody tr:has(.stock-symbol:contains("$CASH")) {
    background-color: rgba(40, 167, 69, 0.05);
    border-left: 3px solid #28a745;
}

.static-portfolio-container .stock-symbol:contains("$CASH") {
    color: #28a745;
    font-weight: 700;
}

/* Alternative approach for cash styling (more compatible) */
.static-portfolio-container tbody tr.cash-position {
    background-color: rgba(40, 167, 69, 0.05);
    border-left: 3px solid #28a745;
}

.static-portfolio-container .cash-symbol {
    color: #28a745 !important;
    font-weight: 700;
}

.static-portfolio-container .cash-name {
    color: #155724 !important;
    font-style: italic;
}

/* Cash-specific styling for gain/loss columns */
.static-portfolio-container .cash-position .numcell {
    color: #6c757d;
}

/* Portfolio weight column styling */
.static-portfolio-container th:last-child,
.static-portfolio-container td:last-child { 
    font-weight: 600;
}

/* Alternative color scheme for different portfolio types */
.static-portfolio-container.dividend-theme {
    --accent-main: #28a745;
}

.static-portfolio-container.tech-theme {
    --accent-main: #007bff;
}

.static-portfolio-container.value-theme {
    --accent-main: #fd7e14;
}

    /* Apply theme colors to headers and accents */
    .static-portfolio-container.dividend-theme .page-header,
    .static-portfolio-container.tech-theme .page-header,
    .static-portfolio-container.value-theme .page-header {
        border-bottom-color: var(--accent-main);
    }

    .static-portfolio-container.dividend-theme .portfolio-section h2,
    .static-portfolio-container.tech-theme .portfolio-section h2,
    .static-portfolio-container.value-theme .portfolio-section h2 {
        border-bottom-color: var(--accent-main);
    }