/* ===================================
   MODULE 6: Recipe Costing & Analysis
   Color Theme: Gold (#D97706)
   =================================== */

:root {
    --module6-primary: #D97706;
    --module6-primary-dark: #B45309;
    --module6-primary-light: #FCD34D;
    --module6-bg-light: #FEF3C7;
    
    /* Stage Colors */
    --stage-gold: #D97706;
    --stage-sky: #0EA5E9;
    --stage-lime: #84CC16;
    --stage-red: #EF4444;
    --stage-slate: #475569;
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */

.module-6 header {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.2);
}

.module-6 .breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
}

.module-6 .breadcrumb a:hover {
    color: white;
}

.module-6 .breadcrumb span {
    color: rgba(255, 255, 255, 0.5);
}

/* ===================================
   USER GOALS - 4 COLUMN GRID
   =================================== */

.module-6 .goals-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 0;
}

@media (max-width: 1200px) {
    .module-6 .goals-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .module-6 .goals-container {
        grid-template-columns: 1fr;
    }
}

.module-6 .goal-card {
    background: white;
    border-radius: 12px;
    padding: 1.75rem !important;
    border-left: 4px solid var(--module6-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.module-6 .goal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.15);
}

.module-6 .goal-card .icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.module-6 .goal-card h4 {
    color: #1F2937;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5;
}

.module-6 .goal-card p {
    color: #6B7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

/* ===================================
   GP BANDS SHOWCASE
   =================================== */

.gp-bands-showcase {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    padding: 3rem 2rem;
    border-radius: 16px;
    margin: 3rem 0;
}

.gp-bands-showcase h3 {
    color: #78350F;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

.gp-bands-showcase .subtitle {
    color: #92400E;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 2.5rem;
}

.bands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 968px) {
    .bands-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.band-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.band-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.band-excellent {
    border: 3px solid #10B981;
}

.band-acceptable {
    border: 3px solid #F59E0B;
}

.band-low {
    border: 3px solid #EF4444;
}

.band-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.band-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.band-excellent h3 {
    color: #10B981;
}

.band-acceptable h3 {
    color: #F59E0B;
}

.band-low h3 {
    color: #EF4444;
}

.band-range {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 1rem 0;
    color: #1F2937;
}

.band-card p {
    color: #6B7280;
    font-size: 0.95rem;
    margin: 0;
}

/* ===================================
   WORKFLOWS - STAGE COLORS
   =================================== */

.module-6 .workflow.stage-gold {
    border-left-color: var(--stage-gold);
}

.module-6 .workflow.stage-sky {
    border-left-color: var(--stage-sky);
}

.module-6 .workflow.stage-lime {
    border-left-color: var(--stage-lime);
}

.module-6 .workflow.stage-red {
    border-left-color: var(--stage-red);
}

.module-6 .workflow.stage-slate {
    border-left-color: var(--stage-slate);
}

.module-6 .workflow.stage-gold h3 {
    color: var(--stage-gold);
}

.module-6 .workflow.stage-sky h3 {
    color: var(--stage-sky);
}

.module-6 .workflow.stage-lime h3 {
    color: var(--stage-lime);
}

.module-6 .workflow.stage-red h3 {
    color: var(--stage-red);
}

.module-6 .workflow.stage-slate h3 {
    color: var(--stage-slate);
}

.module-6 .workflow.stage-gold .step-badge {
    background: var(--stage-gold);
}

.module-6 .workflow.stage-sky .step-badge {
    background: var(--stage-sky);
}

.module-6 .workflow.stage-lime .step-badge {
    background: var(--stage-lime);
}

.module-6 .workflow.stage-red .step-badge {
    background: var(--stage-red);
}

.module-6 .workflow.stage-slate .step-badge {
    background: var(--stage-slate);
}

/* ===================================
   COST CALCULATION SECTION
   =================================== */

.cost-calculation-section {
    background: linear-gradient(135deg, #FEF3C7 0%, #FEFCE8 100%);
    padding: 3rem 2rem;
    border-radius: 16px;
    margin: 3rem 0;
}

.cost-calculation-section h3 {
    color: #78350F;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

.cost-calculation-section .subtitle {
    color: #92400E;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 2.5rem;
}

.gp-formula {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    border: 2px solid var(--module6-primary);
    text-align: center;
}

.gp-formula h4 {
    color: #1F2937;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.gp-formula code {
    display: block;
    background: #FEF3C7;
    color: #92400E;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-family: 'Courier New', monospace;
}

.formula-example {
    color: #6B7280;
    font-size: 0.95rem;
    margin: 0;
}

.formula-example strong {
    color: #1F2937;
}

.calculation-breakdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 968px) {
    .calculation-breakdown {
        grid-template-columns: 1fr;
    }
}

.calc-step {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.calc-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.15);
}

.step-number {
    display: inline-block;
    background: var(--module6-primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.calc-step h4 {
    color: #1F2937;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.calc-step p {
    color: #6B7280;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

.calc-step code {
    display: block;
    background: #F3F4F6;
    color: #374151;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
    margin: 0;
}

/* ===================================
   DASHBOARD KPIS
   =================================== */

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (max-width: 1100px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard-kpis {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.kpi-card.gold {
    border-left: 4px solid var(--stage-gold);
}

.kpi-card.sky {
    border-left: 4px solid var(--stage-sky);
}

.kpi-card.lime {
    border-left: 4px solid var(--stage-lime);
}

.kpi-card.red {
    border-left: 4px solid var(--stage-red);
}

.kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 0.25rem;
}

.kpi-card.gold .kpi-value {
    color: var(--stage-gold);
}

.kpi-card.sky .kpi-value {
    color: var(--stage-sky);
}

.kpi-card.lime .kpi-value {
    color: var(--stage-lime);
}

.kpi-card.red .kpi-value {
    color: var(--stage-red);
}

.kpi-trend {
    font-size: 0.875rem;
    color: #6B7280;
}

.kpi-trend.positive {
    color: #10B981;
}

.kpi-trend.negative {
    color: #EF4444;
}

/* ===================================
   DATA DEPENDENCIES
   =================================== */

.module-6 .dependency-item {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    border-left: 4px solid var(--module6-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.module-6 .dependency-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
}

.module-6 .dependency-item .icon {
    color: var(--module6-primary);
}

/* ===================================
   UI ELEMENTS
   =================================== */

.module-6 .ui-element {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    border-left: 4px solid var(--module6-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.module-6 .ui-element:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
}

.module-6 .ui-element .icon {
    color: var(--module6-primary);
}

/* ===================================
   UX DESIGN GUIDELINES - 3 COLUMN
   =================================== */

.module-6 .ux-guidelines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 968px) {
    .module-6 .ux-guidelines {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .module-6 .ux-guidelines {
        grid-template-columns: 1fr;
    }
}

.module-6 .ux-card {
    background: white;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    border-left: 4px solid var(--module6-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.module-6 .ux-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.15);
}

.module-6 .ux-card h4 {
    color: var(--module6-primary);
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5;
}

.module-6 .ux-card p {
    color: #6B7280;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

/* ===================================
   PROCESS FLOW DIAGRAM
   =================================== */

.module-6 .process-flow {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.module-6 .flow-step {
    border-left: 4px solid var(--module6-primary);
}

.module-6 .flow-step h4 {
    color: var(--module6-primary);
}

.module-6 .flow-arrow {
    color: var(--module6-primary);
}

/* ===================================
   INTERACTIVE ELEMENTS
   =================================== */

.gp-calculator {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--module6-primary);
}

.gp-calculator h4 {
    color: var(--module6-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.calculator-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .calculator-inputs {
        grid-template-columns: 1fr;
    }
}

.input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.input-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--module6-primary);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

.calculator-result {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.result-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400E;
    margin-bottom: 0.5rem;
}

.result-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--module6-primary);
    margin-bottom: 0.5rem;
}

.result-band {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
}

.result-band.excellent {
    background: #D1FAE5;
    color: #065F46;
}

.result-band.acceptable {
    background: #FEF3C7;
    color: #92400E;
}

.result-band.low {
    background: #FEE2E2;
    color: #991B1B;
}

/* ===================================
   COST SIMULATION DEMO
   =================================== */

.simulation-demo {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.simulation-demo h4 {
    color: #1F2937;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.simulation-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sim-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sim-button.primary {
    background: var(--module6-primary);
    color: white;
}

.sim-button.primary:hover {
    background: var(--module6-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.sim-button.secondary {
    background: #F3F4F6;
    color: #374151;
}

.sim-button.secondary:hover {
    background: #E5E7EB;
}

.simulation-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .simulation-results {
        grid-template-columns: 1fr;
    }
}

.sim-result-card {
    background: #F9FAFB;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.sim-result-label {
    font-size: 0.75rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.sim-result-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937;
}

.sim-result-change {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.sim-result-change.positive {
    color: #10B981;
}

.sim-result-change.negative {
    color: #EF4444;
}

/* ===================================
   ANIMATIONS
   =================================== */

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.band-card,
.calc-step,
.kpi-card {
    animation: fadeInScale 0.5s ease-out;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
    .gp-bands-showcase,
    .cost-calculation-section {
        padding: 2rem 1.5rem;
    }
    
    .gp-formula {
        padding: 1.5rem;
    }
    
    .gp-formula code {
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
    }
    
    .band-card {
        padding: 1.5rem;
    }
}