/* Career Plan Canvas - Custom Styles */

/* Base Canvas Styles */
.canvas-grid {
    border: 2px solid #334155;
}


/* Remove outer borders */
/* Remove bottom border from last row */
.canvas-grid>div:last-child,
.canvas-grid>div:nth-last-child(2) {
    border-bottom: none !important;
}

/* Remove right border from rightmost column */
.canvas-grid>div:nth-child(5),
.canvas-grid>div:nth-child(10) {
    border-right: none !important;
}

/* Remove top border from first row */
.canvas-grid>div:nth-child(-n+5) {
    border-top: none !important;
}

/* Remove left border from leftmost column */
.canvas-grid>div:nth-child(5n+1) {
    border-left: none !important;
}

/* Grid Cell Common Styles */
.grid-cell-content {
    display: flex;
    flex-direction: column;
}

/* Main Block Header */
.main-block-header {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.main-block-header h3 {
    font-size: 0.72rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
    white-space: nowrap;
}

/* Finance Block Header (for bottom sections) */
.finance-block-header {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.finance-block-header h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

/* Content Areas */
.main-content-area {
    font-size: 0.72rem;
    color: #475569;
    line-height: 1.4;
}

/* Vertical Split Container */
.vertical-split-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

.vertical-split-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.vertical-split-content:first-child {
    border-bottom: 1px solid #e2e8f0;
}

/* Background Colors for Each Module - Light tones matching logo colors */

/* 1. Problem - Rose/Red tones */
.bg-problem {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}

/* 2. Segments - Teal tones */
.bg-segments {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
}

/* 3. UVP - Amber/Yellow tones */
.bg-uvp {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

/* 4. Solution - Sky/Blue tones */
.bg-solution {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

/* 5. Channels - Orange tones */
.bg-channels {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

/* 6. Revenue - Green tones */
.bg-revenue {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

/* 7. Cost - Slate/Gray tones */
.bg-cost {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* 8. Metrics - Emerald tones */
.bg-metrics {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

/* 9. Advantage - Violet/Purple tones */
.bg-advantage {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}

/* Export Container Styles */
.export-container {
    background: white;
    padding: 2rem;
}

.export-title {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.export-title h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.export-title p {
    font-size: 0.95rem;
    color: #64748b;
}