/*Marketing Report Dashboard Styles */

/* Import the Exo font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

/* backgrounds { */
/* blue */
/*background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);*/
/* orange */
/* background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E); */
/* redish brown */
/* background: linear-gradient(45deg, #5C2A21, #2D100B, #170705); */


/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Exo, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8fafc;
}

.custom-navbar {
    /* blue */
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
}


/* dcc.Loading component with transparent background */
/* this defines a style for a Loading component with parent_className='loading-wrapper' */
.loading_wrapper>div {
    visibility: visible !important;
}

.input-field {
    background-color: #f8f8f8
}

/* Main container */
.persona-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
}

/* Main container */
.age-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
}

/* Main container */
.gender-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
}

/* Main container */
.location-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
}

/* Main container */
.topics-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
}

/* Main container */
.ad_analysis-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
}


/* Main container */
.brand-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
}

div.brand-marketing-report table {
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid black;
    border-collapse: collapse;

    width: 80%;
    /* Set the overall table width */
    table-layout: auto;
    /* Let the browser size columns based on content */
    border-collapse: collapse;
}

div.brand-marketing-report table th,
div.brand-marketing-report table td {
    border: 1px solid black;
}

div.brand-marketing-report h2 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding: 24px;
    border-radius: 12px;
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
    color: white;
}

/* Header styles */
.report-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    /* blue */
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
    border-radius: 12px;
    color: white;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
}

.main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.client-title {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
}

.client-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.9;
}

.copyright {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
}

.title-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, white, transparent);
    margin-top: 1.5rem;
}

/* Section headers */
.section-header {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 2.5rem 0 1.5rem 0;
    color: #2d3748;
    border-bottom: 3px solid #e2e8f0;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
}

.appendix-header {
    margin-top: 4rem;
    border-bottom-color: #cbd5e0;
}

/* Card containers */
.recommendation-section {
    margin-bottom: 3rem;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0;
}

.recommendations-container {
    margin-bottom: 3rem;
}

.chart_wrapper {
    margin-top: 20px;
}

/* Base card styles */
.recommendation-card,
.info-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-top: 20px;
}

.recommendation-card:hover,
.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Card headers */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.segment-title,
.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.card-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

/* Card body */
.card-body {
    padding: 1.5rem;
}

.card-section {
    margin-bottom: 1.5rem;
}

.card-section:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recommendation-text {
    color: #2d3748;
    line-height: 1.7;
    margin-bottom: 0;
}


.icon-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-button {
    background: none;
    border: none;
    color: #2d3748;
    ;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: color 0.2s ease;
}

.help-button:hover {
    color: #4299e1;
    background-color: rgba(66, 153, 225, 0.1);
}

.help-button:focus {
    outline: 2px solid #4299e1;
    outline-offset: 2px;
}

/* Card type specific colors */
.segments-to-scale-up-card {
    border-left: 4px solid #E98A4C;
}

.segments-to-scale-up-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

.segments-to-hold-and-test-card {
    border-left: 4px solid #E98A4C;
}

.segments-to-hold-and-test-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

.segments-to-pull-back-exclude-card {
    border-left: 4px solid #f56565;
}

.segments-to-pull-back-exclude-card .card-header {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

/* Info cards specific styles */
.summary-card {
    border-left: 4px solid #667eea;
}

.summary-card .card-header {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
    color: white;
}

.budget-card {
    border-left: 4px solid #38b2ac;
}

.budget-card .card-header {
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
    color: white;
}

.optimization-card {
    /*border-left: 4px solid #9f7aea;*/
    border-left: 4px solid #316DF4;
}

.optimization-card .card-header {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
    color: white;
}

.usage-card {
    /*border-left: 4px solid #9f7aea;*/
    border-left: 4px solid #316DF4;
}

.usage-card .card-header {
    /*background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);*/
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);

    color: white;
}

.justification-card {
    border-left: 4px solid #667eea;
}

.justification-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.notes-card {
    border-left: 4px solid #667eea;
}

.notes-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}


/* Card type specific colors */
.recommended-city-card {
    border-left: 4px solid #E98A4C;
}

.recommended-city-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

/* Card type specific colors */
.recommended-age-card {
    border-left: 4px solid #E98A4C;
}

.recommended-age-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

/* Card type specific colors */
.recommended-gender-card {
    border-left: 4px solid #E98A4C;
}

.recommended-gender-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

/* Card type specific colors */
.recommended-persona-card {
    border-left: 4px solid #E98A4C;
}

.recommended-persona-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}


/* Lists styling */
.actions-list,
.blueprint-list,
.levers-list,
.usage_list {
    list-style: none;
    padding: 0;
}

.action-item,
.blueprint-item,
.lever-item,
.usage_item {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 3px solid #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.action-item:hover,
.blueprint-item:hover,
.lever-item:hover,
.usage-item:hover {
    background: #edf2f7;
    border-left-color: #a0aec0;
}

.action-item:last-child,
.blueprint-item:last-child,
.lever-item:last-child,
.usage-item:last-child {
    margin-bottom: 0;
}

/* Summary text */
.summary-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2d3748;
    font-weight: 400;
}

/* Appendix styles */
.appendix-section {
    /*margin-top: 4rem;*/
    /*padding-top: 2rem;*/
    border-top: 2px solid #e2e8f0;
}

.dash-table-container {
    font-size: 0.8rem;
    font-weight: 400;
}

.table-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2d3748;
    margin: 2rem 0 1rem 0;
}

.table-container {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.table-description {
    color: #718096;
    font-style: italic;
    margin: 0;
}


.settings-tooltip  .tooltip-inner {
    width: 260px !important;
    max-width: 260px !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .persona-marketing-report {
        padding: 1rem;
    }

    .age-marketing-report {
        padding: 1rem;
    }

    .gender-marketing-report {
        padding: 1rem;
    }

    .location-marketing-report {
        padding: 1rem;
    }

    .main-title {
        font-size: 2rem;
    }

    .client-title {
        font-size: 1.25rem;
    }

    .client-subtitle {
        font-size: 1.0rem;
    }

    .copyright {
        font-size: 0.6rem;
    }

    .cards-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-cards-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-header,
    .card-body {
        padding: 1rem;
    }

    .section-header {
        font-size: 1.5rem;
        margin: 2rem 0 1rem 0;
    }
}

@media (max-width: 480px) {
    .report-header {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .main-title {
        font-size: 1.75rem;
    }

    .client-title {
        font-size: 1.1rem;
    }

    .client-subtitle {
        font-size: 1.0rem;
    }

    .copyright {
        font-size: 0.6rem;
    }

    .cards-container {
        gap: 0.75rem;
    }

    .card-header,
    .card-body {
        padding: 0.75rem;
    }

    .segment-title,
    .card-title {
        font-size: 1.2rem;
    }
}

/* Print styles */
@media print {
    .persona-marketing-report {
        background: white;
        box-shadow: none;
    }

    .age-marketing-report {
        background: white;
        box-shadow: none;
    }

    .location-marketing-report {
        background: white;
        box-shadow: none;
    }

    .recommendation-card,
    .info-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
        margin-top: 20px;
    }

    .report-header {
        background: #f0f0f0 !important;
        color: black !important;
        box-shadow: none;
    }

    .card-header {
        background: #f9f9f9 !important;
        color: black !important;
    }
}


/* Page breaks for printing */
.page-break-before {
    page-break-before: always;
}

.page-break-after {
    page-break-after: always;
}

.no-page-break {
    page-break-inside: avoid;
}

/* For better compatibility */
@media print {
    .page-break-before {
        break-before: page;
    }

    .page-break-after {
        break-after: page;
    }

    .no-page-break {
        break-inside: avoid;
    }
}