/* ==========================================================================
   Features Page Styles
   ONLY using: golden-green (#8B9A46), dark-red (#8B2C2C), pale-yellow (#FFF8DC)
   ========================================================================== */

/* Features Hero */
.features-hero {
    padding: 6rem 2rem 3rem;
    background: linear-gradient(135deg, 
        rgba(139, 154, 70, 0.05) 0%, 
        rgba(139, 44, 44, 0.03) 100%);
    text-align: center;
}

.features-hero h1 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--dark-red);
    opacity: 0.8;
    max-width: 700px;
    margin: 0 auto;
}

/* Category Tabs */
.feature-categories {
    padding: 3rem 2rem 5rem;
    background: var(--pale-yellow);
}

/* Module Navigation Dropdown */
.module-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, rgba(139, 154, 70, 0.08) 0%, rgba(139, 154, 70, 0.15) 100%);
    border-radius: 12px;
    max-width: 600px;
    margin: 0 auto 2rem;
    box-shadow: 0 2px 8px rgba(139, 69, 69, 0.08);
}

.module-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.module-label {
    font-family: 'Georgia', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-red);
    white-space: nowrap;
}

.module-dropdown {
    min-width: 280px;
    padding: 0.85rem 2.5rem 0.85rem 1.25rem;
    font-family: 'Georgia', serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark-red);
    background: white;
    border: 2px solid var(--golden-green);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%238B2C2C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
}

.module-dropdown:hover {
    border-color: var(--dark-red);
    box-shadow: 0 4px 12px rgba(139, 69, 69, 0.15);
}

.module-dropdown:focus {
    outline: none;
    border-color: var(--dark-red);
    box-shadow: 0 0 0 3px rgba(139, 69, 69, 0.15);
}

.module-dropdown option {
    padding: 0.75rem;
    font-size: 0.95rem;
    color: var(--dark-red);
}

.module-dropdown optgroup {
    font-weight: 600;
    color: var(--golden-green);
    font-style: normal;
}

/* Legacy tab button styles (kept for backwards compatibility) */
.category-tabs {
    display: none; /* Hidden - replaced by module dropdown */
}

.tab-button {
    display: none; /* Hidden - replaced by module dropdown */
}

/* Features Content */
.features-content {
    max-width: 1200px;
    margin: 0 auto;
}

.feature-section {
    display: none;
    animation: fadeIn 0.5s ease-out;
}

.feature-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-header {
    text-align: center;
    margin-bottom: 3rem;
}

.feature-header h2 {
    color: var(--dark-red);
    margin-bottom: 0.5rem;
}

.feature-header p {
    color: var(--dark-red);
    opacity: 0.8;
    font-style: italic;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: rgba(255, 248, 220, 0.5);
    border: 2px solid rgba(139, 154, 70, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--golden-green), var(--dark-red));
    transform: scaleX(0);
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(139, 44, 44, 0.15);
    border-color: var(--golden-green);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.feature-card:nth-child(odd) .feature-icon {
    animation-delay: 0.5s;
}

.feature-card h3 {
    color: var(--dark-red);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.feature-card p {
    color: var(--dark-red);
    opacity: 0.85;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.feature-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-benefits li {
    color: var(--dark-red);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
    opacity: 0.9;
}

.feature-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--golden-green);
    font-weight: bold;
}

/* Integration Section */
.integration-section {
    background: linear-gradient(to bottom, 
        rgba(139, 154, 70, 0.05), 
        transparent);
    padding: 5rem 2rem;
}

.integration-section h2 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.integration-section .section-subtitle {
    text-align: center;
    color: var(--dark-red);
    opacity: 0.8;
    margin-bottom: 3rem;
}

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

.integration-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
}

.integration-card:hover {
    background: rgba(139, 154, 70, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(139, 44, 44, 0.1);
}

.integration-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.integration-card h3 {
    color: var(--dark-red);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.integration-card p {
    color: var(--dark-red);
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Why Different Section */
.why-different-section {
    background: linear-gradient(to bottom,
        rgba(139, 154, 70, 0.05),
        transparent);
    padding: 4rem 2rem;
}

.why-different-section h2 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 1rem;
}

.why-different-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--golden-green);
    border-radius: 2px;
}

.why-different-section .section-subtitle {
    text-align: center;
    color: var(--dark-red);
    opacity: 0.75;
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.diff-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 15px;
    border: 2px solid var(--golden-green);
}

.diff-row.left-aligned {
    flex-direction: row;
}

.diff-row.right-aligned {
    flex-direction: row-reverse;
}

.diff-row.content-only {
    flex-direction: row;
}

.diff-row.content-only .diff-content {
    flex: 1;
    max-width: 100%;
}

.diff-content {
    flex: 1;
}

.diff-heading {
    color: var(--dark-red);
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

.diff-description {
    color: var(--dark-red);
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.diff-industries {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--golden-green);
    font-style: italic;
}

.diff-visual {
    flex: 0 0 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Mini Gantt Chart Visual */
.gantt-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.gantt-mini.continuous .gantt-bar {
    margin-bottom: -4px;
}

.gantt-bar {
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    text-align: center;
}

.gantt-bar.step1 {
    background: #3498db;
    width: 70%;
}

.gantt-bar.step2 {
    background: #2ecc71;
    width: 85%;
    margin-left: auto;
}

.gantt-bar.step3 {
    background: #9b59b6;
    width: 60%;
}

.gantt-gap {
    height: 15px;
    border-left: 2px dashed var(--golden-green);
    margin-left: 35%;
}

.gantt-mini.continuous {
    gap: 0;
}

.gantt-mini.continuous .gantt-bar {
    border-radius: 0;
}

.gantt-mini.continuous .gantt-bar:first-child {
    border-radius: 6px 6px 0 0;
}

.gantt-mini.continuous .gantt-bar:last-child {
    border-radius: 0 0 6px 6px;
}

/* Penalty Visual */
.penalty-visual {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    height: 120px;
    position: relative;
    padding-bottom: 25px;
}

.penalty-bar {
    width: 50px;
    background: linear-gradient(to top, #3498db, #2ecc71);
    border-radius: 6px 6px 0 0;
    transition: height 0.3s;
}

.penalty-bar.bar1 { height: 60px; }
.penalty-bar.bar2 { height: 55px; }
.penalty-bar.bar3 { height: 65px; }

.penalty-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--golden-green);
    white-space: nowrap;
}

/* Bottleneck Visual */
.bottleneck-visual {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    padding-bottom: 25px;
}

.station {
    width: 50px;
    height: 50px;
    background: var(--golden-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.station.bottleneck {
    background: #e74c3c;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.bottleneck-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--golden-green);
    white-space: nowrap;
}

/* Diff Details */
.diff-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(139, 154, 70, 0.3);
}

.diff-details p {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--dark-red);
    opacity: 0.9;
}

.diff-details strong {
    color: var(--dark-red);
}

/* Example Comparison */
.diff-example {
    background: rgba(139, 154, 70, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.75rem;
}

.diff-example > strong {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.example-comparison {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.example-standard,
.example-enhanced {
    font-size: 0.85rem;
    padding: 0.5rem;
    border-radius: 4px;
}

.example-standard {
    background: rgba(231, 76, 60, 0.1);
    border-left: 3px solid #e74c3c;
}

.example-enhanced {
    background: rgba(52, 152, 219, 0.1);
    border-left: 3px solid #3498db;
}

.example-label {
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Metrics */
.diff-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.metric {
    background: var(--golden-green);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Visual Label */
.visual-label {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: var(--golden-green);
    margin-top: 0.75rem;
}

/* Comparison Visual for Enhanced Batch */
.comparison-visual {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-end;
    height: 140px;
    padding-bottom: 30px;
    position: relative;
}

.comparison-standard,
.comparison-enhanced {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    position: relative;
}

.delay-bar {
    width: 25px;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s;
}

.delay-bar.extreme {
    background: #e74c3c;
}

.delay-bar.moderate {
    background: #f39c12;
}

.delay-bar.none {
    background: #2ecc71;
}

.delay-bar.balanced {
    background: #3498db;
}

.comparison-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--dark-red);
    white-space: nowrap;
    opacity: 0.8;
}

/* Bottleneck Comparison for Enhanced Continuous */
.bottleneck-comparison {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bottleneck-standard,
.bottleneck-enhanced {
    text-align: center;
    position: relative;
}

.station-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.station.small {
    width: 35px;
    height: 35px;
    font-size: 0.7rem;
}

.wip-indicator {
    display: inline-block;
    background: #e74c3c;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wip-indicator.good {
    background: #2ecc71;
}

/* Summary Section */
.diff-summary {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.diff-summary h3 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 1.5rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.summary-card {
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid;
}

.summary-card.standard {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

.summary-card.enhanced {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.summary-card h4 {
    color: var(--dark-red);
    margin-bottom: 0.75rem;
}

.summary-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--dark-red);
    opacity: 0.9;
    margin: 0;
}

.summary-card strong {
    color: var(--dark-red);
}

/* Scheduling Intro */
.scheduling-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.scheduling-intro .intro-heading {
    color: var(--dark-red);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.scheduling-intro p {
    color: var(--dark-red);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Model Sections */
.model-section {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 15px;
    border: 2px solid var(--golden-green);
}

.model-section .model-heading {
    color: var(--dark-red);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}

.model-section .model-subtitle {
    color: var(--golden-green);
    font-size: 1rem;
    font-style: italic;
    text-align: center;
    margin-bottom: 2rem;
}

.model-subsection {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.3);
}

.model-subsection:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.model-subsection h4 {
    color: var(--dark-red);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.model-subsection p {
    color: var(--dark-red);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Scenario Examples */
.scenario-example {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 1.25rem;
    margin: 1.25rem 0;
    border-left: 4px solid var(--golden-green);
}

.scenario-example.disruption {
    border-left-color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

.scenario-example.comparison {
    border-left-color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.scenario-example h5 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.scenario-example p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.scenario-example p:last-child {
    margin-bottom: 0;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

.comparison-card {
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid;
}

.comparison-card.standard-approach {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

.comparison-card.hybrid-approach {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.08);
}

.comparison-card .approach-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--dark-red);
}

.comparison-card ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.comparison-card li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

/* Adaptive List */
.adaptive-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.adaptive-list li {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

/* Choice Section */
.choice-section {
    background: linear-gradient(135deg, var(--pale-yellow), rgba(139, 154, 70, 0.1));
}

.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.choice-card {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
}

.choice-card h5 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.choice-card p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.choice-industries {
    display: block;
    font-size: 0.85rem;
    color: var(--golden-green);
    font-style: italic;
    margin-top: 0.5rem;
}

/* Philosophy Grid */
.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.philosophy-card {
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid;
}

.philosophy-card.standard {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

.philosophy-card.hybrid {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.philosophy-card h5 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.philosophy-card ul {
    margin: 0;
    padding-left: 1.25rem;
}

.philosophy-card li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* Wisdom Section */
.wisdom-intro {
    text-align: center;
    color: var(--dark-red);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.wisdom-conclusion {
    text-align: center;
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 8px;
}

/* Why Different Responsive */
@media (max-width: 768px) {
    .diff-row,
    .diff-row.left-aligned,
    .diff-row.right-aligned {
        flex-direction: column;
        text-align: center;
    }

    .diff-visual {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 1.5rem;
    }

    .gantt-mini {
        max-width: 250px;
        margin: 0 auto;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .diff-metrics {
        justify-content: center;
    }

    .example-comparison {
        text-align: left;
    }

    .comparison-visual {
        gap: 1rem;
    }

    /* New scheduling guide responsive */
    .model-section {
        padding: 1.5rem;
    }

    .comparison-grid,
    .choice-grid,
    .philosophy-grid {
        grid-template-columns: 1fr;
    }

    .scheduling-intro {
        text-align: left;
    }

    .model-section .model-heading {
        font-size: 1.3rem;
    }
}

/* What-If Scenarios Section */
.what-if-section {
    background: linear-gradient(to bottom,
        rgba(139, 44, 44, 0.03),
        transparent);
    padding: 4rem 2rem;
}

.what-if-section h2 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.what-if-section .section-subtitle {
    text-align: center;
    color: var(--dark-red);
    opacity: 0.75;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.what-if-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.what-if-intro p {
    color: var(--dark-red);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.scenarios-heading {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

/* Scenario Rows - Zigzag Pattern */
.scenario-row {
    max-width: 800px;
    margin: 0 auto 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--pale-yellow);
    border-radius: 12px;
    border: 2px solid var(--golden-green);
}

.scenario-row.left-aligned {
    margin-left: auto;
    margin-right: 15%;
}

.scenario-row.right-aligned {
    margin-left: 15%;
    margin-right: auto;
}

.scenario-content {
    width: 100%;
}

.scenario-title {
    color: var(--dark-red);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.scenario-question {
    color: var(--golden-green);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.scenario-description {
    color: var(--dark-red);
    opacity: 0.9;
    line-height: 1.6;
    margin: 0;
}

/* How It Works Section */
.how-it-works {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.how-it-works h3 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

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

.step-item {
    text-align: center;
    padding: 1rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--golden-green);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.step-item h4 {
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.step-item p {
    color: var(--dark-red);
    opacity: 0.85;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Benefits Section */
.benefits-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.benefits-section h3 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

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

.benefit-item {
    text-align: center;
    padding: 1rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 10px;
}

.benefit-item strong {
    display: block;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.benefit-item p {
    color: var(--dark-red);
    opacity: 0.85;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* What-If Responsive */
@media (max-width: 992px) {
    .scenario-row.left-aligned,
    .scenario-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
    }

    .scenario-row {
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* Sandbox Mode Section */
.sandbox-section {
    background: linear-gradient(to bottom,
        rgba(139, 154, 70, 0.05),
        transparent);
    padding: 4rem 2rem;
}

.sandbox-section h2 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.sandbox-section .section-subtitle {
    text-align: center;
    color: var(--dark-red);
    opacity: 0.75;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.sandbox-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.sandbox-intro p {
    color: var(--dark-red);
    line-height: 1.7;
}

.sandbox-features-heading {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

/* Sandbox Rows - Zigzag Pattern */
.sandbox-row {
    max-width: 800px;
    margin: 0 auto 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--pale-yellow);
    border-radius: 12px;
    border: 2px solid var(--golden-green);
}

.sandbox-row.left-aligned {
    margin-left: auto;
    margin-right: 15%;
}

.sandbox-row.right-aligned {
    margin-left: 15%;
    margin-right: auto;
}

.sandbox-content {
    width: 100%;
}

.sandbox-title {
    color: var(--dark-red);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.sandbox-description {
    color: var(--dark-red);
    opacity: 0.9;
    line-height: 1.6;
    margin: 0;
}

/* Approval Workflow Section */
.approval-workflow {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.approval-workflow h3 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.workflow-step {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 10px;
    position: relative;
}

.workflow-step::after {
    content: '→';
    position: absolute;
    right: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--golden-green);
    font-size: 1.5rem;
    font-weight: bold;
}

.workflow-step:last-child::after {
    display: none;
}

.workflow-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--golden-green);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.workflow-step h4 {
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.workflow-step p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Use Cases Section */
.sandbox-use-cases {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.sandbox-use-cases h3 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

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

.use-case-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--pale-yellow);
    border-radius: 10px;
    border: 1px solid var(--golden-green);
}

.use-case-item h4 {
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.use-case-item p {
    color: var(--dark-red);
    opacity: 0.85;
    font-size: 0.9rem;
    margin: 0;
}

/* Sandbox Benefits */
.sandbox-benefits {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.sandbox-benefits h3 {
    text-align: center;
    color: var(--dark-red);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

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

.sandbox-benefit {
    text-align: center;
    padding: 1rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 10px;
}

.sandbox-benefit strong {
    display: block;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.sandbox-benefit p {
    color: var(--dark-red);
    opacity: 0.85;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Sandbox Responsive */
@media (max-width: 992px) {
    .sandbox-row.left-aligned,
    .sandbox-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .workflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-step::after {
        display: none;
    }

    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sandbox-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sandbox-row {
        padding: 1.25rem 1.5rem;
    }

    .use-cases-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .workflow-steps {
        grid-template-columns: 1fr;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
    }

    .sandbox-benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   INVENTORY WHY DIFFERENT SECTION
   ===================================================== */

.inventory-why-different {
    background: linear-gradient(to bottom,
        rgba(52, 152, 219, 0.05),
        transparent);
    display: none; /* Hidden by default, shown when inventory module selected */
}

.inventory-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.inventory-intro p {
    color: var(--dark-red);
    line-height: 1.7;
    font-size: 1rem;
}

/* Advantage Rows - Zigzag Pattern */
.inv-advantage-row {
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 15px;
    border: 2px solid var(--golden-green);
}

.inv-advantage-row.left-aligned {
    margin-left: 0;
    margin-right: auto;
}

.inv-advantage-row.right-aligned {
    margin-left: auto;
    margin-right: 0;
}

.inv-advantage-heading {
    color: var(--dark-red);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.inv-advantage-intro {
    color: var(--dark-red);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Release Modes */
.release-modes {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.release-mode {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid var(--golden-green);
}

.release-mode h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.release-mode p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Traceability Views */
.traceability-views {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.trace-view {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid #3498db;
}

.trace-view h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.trace-view p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Stock Features */
.stock-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stock-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid #2ecc71;
}

.stock-feature h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stock-feature p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Scrap Workflow */
.scrap-workflow {
    margin-bottom: 1.5rem;
}

.scrap-workflow > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.scrap-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.scrap-item {
    background: rgba(231, 76, 60, 0.08);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 3px solid #e74c3c;
    color: var(--dark-red);
    font-size: 0.9rem;
}

.scrap-item strong {
    color: var(--dark-red);
}

/* Archive Features */
.archive-features {
    margin-bottom: 1.5rem;
}

.archive-features > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.archive-list {
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
}

.archive-list li {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.restore-highlight {
    background: rgba(46, 204, 113, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid #2ecc71;
}

.restore-highlight h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.restore-highlight p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Shipping Features */
.shipping-features {
    margin-bottom: 1.5rem;
}

.shipping-features > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

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

.shipping-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(139, 154, 70, 0.3);
}

.shipping-item h4 {
    color: var(--dark-red);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.shipping-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.shipping-note {
    color: var(--dark-red);
    font-weight: 500;
    font-style: italic;
    font-size: 0.95rem;
}

/* Timeline Features */
.timeline-features {
    margin-bottom: 1.5rem;
}

.timeline-features > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

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

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}

.timeline-item.receipts {
    border-left: 4px solid #2ecc71;
}

.timeline-item.releases {
    border-left: 4px solid #e74c3c;
}

.timeline-item.adjustments {
    border-left: 4px solid #f39c12;
}

.timeline-item.transfers {
    border-left: 4px solid #3498db;
}

.timeline-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.timeline-item.receipts .timeline-icon {
    background: #2ecc71;
    color: white;
}

.timeline-item.releases .timeline-icon {
    background: #e74c3c;
    color: white;
}

.timeline-item.adjustments .timeline-icon {
    background: #f39c12;
    color: white;
}

.timeline-item.transfers .timeline-icon {
    background: #3498db;
    color: white;
}

.timeline-detail strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.timeline-detail p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Document Features */
.document-features {
    margin-bottom: 1.5rem;
}

.document-features > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.doc-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.doc-category {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--golden-green);
}

.doc-category strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.doc-category p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Business Value Box */
.inv-business-value {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-top: 1.5rem;
}

.inv-business-value h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.inv-business-value ul {
    margin: 0;
    padding-left: 1.25rem;
}

.inv-business-value li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

/* Inventory Summary Section */
.inv-summary {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.inv-summary h3 {
    text-align: center;
    color: var(--dark-red);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.inv-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.inv-summary-item {
    background: var(--pale-yellow);
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    text-align: center;
}

.inv-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.inv-summary-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Inventory Section Responsive */
@media (max-width: 992px) {
    .inv-advantage-row.left-aligned,
    .inv-advantage-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .inv-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shipping-grid,
    .timeline-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .inv-advantage-row {
        padding: 1.5rem;
    }

    .inv-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shipping-grid,
    .timeline-grid,
    .scrap-details,
    .doc-categories {
        grid-template-columns: 1fr;
    }

    .inventory-intro {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .inv-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   MACHINE MANAGEMENT WHY DIFFERENT SECTION
   ===================================================== */

.machine-why-different {
    background: linear-gradient(to bottom,
        rgba(231, 76, 60, 0.05),
        transparent);
    display: none; /* Hidden by default, shown when machines module selected */
}

.machine-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.machine-intro p {
    color: var(--dark-red);
    line-height: 1.7;
    font-size: 1rem;
}

/* Advantage Rows - Zigzag Pattern */
.mach-advantage-row {
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 15px;
    border: 2px solid var(--golden-green);
}

.mach-advantage-row.left-aligned {
    margin-left: 0;
    margin-right: auto;
}

.mach-advantage-row.right-aligned {
    margin-left: auto;
    margin-right: 0;
}

.mach-advantage-heading {
    color: var(--dark-red);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.mach-advantage-intro {
    color: var(--dark-red);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Production Features */
.production-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.prod-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid var(--golden-green);
}

.prod-feature h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.prod-feature p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* OEE Components */
.oee-components {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.oee-component {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.oee-component.availability {
    border-left: 4px solid #3498db;
}

.oee-component.performance {
    border-left: 4px solid #f39c12;
}

.oee-component.quality {
    border-left: 4px solid #2ecc71;
}

.oee-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.oee-detail strong {
    display: block;
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.oee-detail p {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.oee-extras {
    margin-bottom: 1.5rem;
}

.oee-extras h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.oee-extras > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

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

.breakdown-item {
    background: rgba(231, 76, 60, 0.08);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: var(--dark-red);
    font-size: 0.9rem;
    text-align: center;
}

/* Vendor Features */
.vendor-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.vendor-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid #9b59b6;
}

.vendor-feature h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.vendor-feature p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* History Features */
.history-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.history-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid #1abc9c;
}

.history-feature.highlight {
    border-left-color: var(--golden-green);
    background: rgba(139, 154, 70, 0.1);
}

.history-feature h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.history-feature p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Severity Levels */
.severity-levels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.severity-level {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.severity-level.critical {
    border-left: 4px solid #e74c3c;
}

.severity-level.major {
    border-left: 4px solid #f39c12;
}

.severity-level.minor {
    border-left: 4px solid #2ecc71;
}

.severity-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.severity-level.critical .severity-badge {
    background: #e74c3c;
}

.severity-level.major .severity-badge {
    background: #f39c12;
}

.severity-level.minor .severity-badge {
    background: #2ecc71;
}

.severity-detail strong {
    display: block;
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.severity-detail p {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.failure-dashboard-info {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.failure-dashboard-info h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.failure-dashboard-info p {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Document Organization */
.document-organization {
    margin-bottom: 1.5rem;
}

.document-organization h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.document-organization > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.doc-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.doc-type {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--golden-green);
}

.doc-type strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.doc-type p {
    color: var(--dark-red);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.85;
}

.doc-access-info {
    margin-bottom: 1.5rem;
}

.doc-access-info h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.doc-access-info p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Configuration Examples */
.config-examples {
    margin-bottom: 1.5rem;
}

.config-examples h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.config-examples > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

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

.config-card {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid rgba(139, 154, 70, 0.3);
    text-align: center;
}

.config-card.active {
    border-color: var(--golden-green);
    background: rgba(139, 154, 70, 0.1);
}

.config-status {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #2ecc71;
    color: white;
    margin-bottom: 0.5rem;
}

.config-status.inactive {
    background: #95a5a6;
}

.config-card strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.config-card p {
    color: var(--dark-red);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.85;
}

.config-details {
    margin-bottom: 1.5rem;
}

.config-details h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.config-details p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Status Indicators */
.status-indicators {
    margin-bottom: 1.5rem;
}

.status-indicators h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.status-indicators > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.status-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.status-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-item.online .status-dot {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

.status-item.offline .status-dot {
    background: #95a5a6;
}

.status-item.maintenance .status-dot {
    background: #f39c12;
}

.status-info strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.status-info p {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

.realtime-info {
    margin-bottom: 1.5rem;
}

.realtime-info h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.realtime-info p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Calendar Features */
.calendar-features {
    margin-bottom: 1.5rem;
}

.calendar-features > h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.calendar-features > p {
    color: var(--dark-red);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.maintenance-types h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.maint-type-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.maint-type {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.maint-type.pm {
    border-left: 4px solid #3498db;
}

.maint-type.cal {
    border-left: 4px solid #f39c12;
}

.maint-type.ins {
    border-left: 4px solid #2ecc71;
}

.maint-badge {
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.maint-type.pm .maint-badge {
    background: #3498db;
}

.maint-type.cal .maint-badge {
    background: #f39c12;
}

.maint-type.ins .maint-badge {
    background: #2ecc71;
}

.maint-detail strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.maint-detail p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Business Value Box */
.mach-business-value {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-top: 1.5rem;
}

.mach-business-value h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.mach-business-value ul {
    margin: 0;
    padding-left: 1.25rem;
}

.mach-business-value li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

/* Machine Summary Section */
.mach-summary {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.mach-summary h3 {
    text-align: center;
    color: var(--dark-red);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

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

.mach-summary-item {
    background: var(--pale-yellow);
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    text-align: center;
}

.mach-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.mach-summary-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Machine Section Responsive */
@media (max-width: 992px) {
    .mach-advantage-row.left-aligned,
    .mach-advantage-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .mach-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .config-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mach-advantage-row {
        padding: 1.5rem;
    }

    .mach-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .breakdown-grid,
    .doc-type-grid {
        grid-template-columns: 1fr;
    }

    .config-cards {
        grid-template-columns: 1fr;
    }

    .machine-intro {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .mach-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Data Analysis Why Different Section
   ========================================================================== */

.data-analysis-why-different {
    background: var(--pale-yellow);
    padding: 4rem 2rem;
    display: none;
}

.data-analysis-why-different .container {
    max-width: 1200px;
    margin: 0 auto;
}

.data-analysis-why-different h2 {
    text-align: center;
    color: var(--dark-red);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.data-analysis-why-different .section-subtitle {
    text-align: center;
    color: var(--dark-red);
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.data-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.data-intro p {
    color: var(--dark-red);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Data Advantage Rows - Zigzag Pattern */
.data-advantage-row {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid var(--golden-green);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    max-width: 85%;
}

.data-advantage-row.left-aligned {
    margin-right: auto;
    margin-left: 0;
    border-left: 6px solid var(--golden-green);
}

.data-advantage-row.right-aligned {
    margin-left: auto;
    margin-right: 0;
    border-right: 6px solid var(--golden-green);
    border-left: 2px solid var(--golden-green);
}

.data-advantage-heading {
    color: var(--dark-red);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.data-advantage-intro {
    color: var(--dark-red);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

/* Natural Language Query Features */
.query-example-box {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.query-example-box h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.query-examples {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.query-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    flex-wrap: wrap;
}

.query-input {
    font-family: 'Courier New', monospace;
    background: var(--pale-yellow);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--dark-red);
    font-size: 0.9rem;
    border: 1px solid var(--golden-green);
}

.query-arrow {
    color: var(--golden-green);
    font-weight: bold;
    font-size: 1.2rem;
}

.query-result {
    color: var(--dark-red);
    font-size: 0.9rem;
    font-style: italic;
}

.nl-capabilities h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.capability-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(139, 154, 70, 0.3);
}

.capability-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.capability-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* AI Model Features */
.offline-benefits h4,
.ai-reliability h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.benefit-card {
    background: rgba(255, 255, 255, 0.7);
    padding: 1.25rem;
    border-radius: 10px;
    border: 1px solid rgba(139, 154, 70, 0.3);
    text-align: center;
}

.benefit-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.benefit-card strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.benefit-card p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.ai-reliability {
    background: rgba(139, 154, 70, 0.1);
    padding: 1rem;
    border-radius: 8px;
}

.ai-reliability p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Domain Knowledge Grid */
.domain-knowledge h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.domain-area {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--golden-green);
}

.domain-area strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.domain-area ul {
    margin: 0;
    padding-left: 1.25rem;
}

.domain-area li {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.9;
}

.vocabulary-note {
    background: rgba(139, 44, 44, 0.08);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--dark-red);
}

.vocabulary-note p {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Widget Features */
.widget-creation,
.customization-options,
.sharing-features {
    margin-bottom: 1.5rem;
}

.widget-creation h4,
.customization-options h4,
.sharing-features h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.widget-creation p,
.sharing-features > p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.custom-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.custom-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.custom-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

.permission-levels {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.perm-badge {
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.perm-badge.view {
    background: #e3f2fd;
    color: #1976d2;
}

.perm-badge.duplicate {
    background: #fff3e0;
    color: #f57c00;
}

.perm-badge.edit {
    background: #e8f5e9;
    color: #388e3c;
}

.perm-badge.owner {
    background: #fce4ec;
    color: #c2185b;
}

/* Desktop Display Features */
.display-usecases h4,
.display-capabilities h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.usecase-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(139, 154, 70, 0.3);
}

.usecase-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.usecase-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.usecase-item p {
    color: var(--dark-red);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

.display-list {
    margin: 0;
    padding-left: 1.25rem;
}

.display-list li {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.display-list li strong {
    color: var(--dark-red);
}

/* Real-Time Features */
.websocket-explanation h4,
.live-updates h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.realtime-comparison {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.comparison-item {
    flex: 1;
    padding: 1rem;
    border-radius: 8px;
}

.comparison-item.old {
    background: rgba(139, 44, 44, 0.1);
    border: 1px solid rgba(139, 44, 44, 0.3);
}

.comparison-item.new {
    background: rgba(139, 154, 70, 0.15);
    border: 2px solid var(--golden-green);
}

.comparison-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.comparison-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.comparison-arrow {
    color: var(--golden-green);
    font-size: 1.5rem;
    font-weight: bold;
}

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

.update-cat {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--golden-green);
}

.update-cat strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.update-cat p {
    color: var(--dark-red);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Multi-Table Query Features */
.join-examples h4,
.relationship-mapping h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.complex-query-examples {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.complex-query {
    background: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(139, 154, 70, 0.3);
}

.query-text {
    font-family: 'Courier New', monospace;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border-radius: 6px;
}

.tables-involved {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.table-tag {
    background: var(--golden-green);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.join-symbol {
    color: var(--dark-red);
    font-weight: bold;
}

.relationship-mapping > p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.relationship-chain {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.rel-item {
    background: rgba(139, 154, 70, 0.1);
    padding: 0.75rem;
    border-radius: 8px;
    color: var(--dark-red);
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    text-align: center;
}

/* Dashboard Builder & Export Features */
.dashboard-builder h4,
.export-options h4,
.additional-features h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.builder-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.builder-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.builder-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

.export-formats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.export-format {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(139, 154, 70, 0.3);
}

.format-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.4rem;
}

.export-format strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.export-format p {
    color: var(--dark-red);
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 0;
    opacity: 0.85;
}

.additional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.additional-item {
    background: rgba(139, 154, 70, 0.1);
    padding: 1rem;
    border-radius: 8px;
}

.additional-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.additional-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Business Value Box */
.data-business-value {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-top: 1.5rem;
}

.data-business-value h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.data-business-value ul {
    margin: 0;
    padding-left: 1.25rem;
}

.data-business-value li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

/* Data Summary Section */
.data-summary {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.data-summary h3 {
    text-align: center;
    color: var(--dark-red);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.data-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.data-summary-item {
    background: var(--pale-yellow);
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    text-align: center;
}

.data-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.data-summary-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Data Analysis Section Responsive */
@media (max-width: 992px) {
    .data-advantage-row.left-aligned,
    .data-advantage-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .data-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .capability-grid,
    .domain-grid,
    .usecase-grid,
    .update-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .export-formats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .data-advantage-row {
        padding: 1.5rem;
        max-width: 100%;
    }

    .data-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .capability-grid,
    .benefit-cards,
    .domain-grid,
    .custom-grid,
    .usecase-grid,
    .update-categories,
    .builder-features,
    .additional-grid,
    .relationship-chain {
        grid-template-columns: 1fr;
    }

    .export-formats {
        grid-template-columns: repeat(2, 1fr);
    }

    .realtime-comparison {
        flex-direction: column;
    }

    .comparison-arrow {
        transform: rotate(90deg);
    }

    .data-intro {
        text-align: left;
    }

    .query-item {
        flex-direction: column;
        text-align: center;
    }

    .query-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 480px) {
    .data-summary-grid {
        grid-template-columns: 1fr;
    }

    .export-formats {
        grid-template-columns: 1fr;
    }

    .permission-levels {
        justify-content: center;
    }
}

/* =====================================================
   PROCESS EXECUTION WHY DIFFERENT SECTION
   ===================================================== */

.process-why-different {
    background: linear-gradient(to bottom,
        rgba(139, 154, 70, 0.08),
        transparent);
    display: none; /* Hidden by default, shown when process module selected */
}

.process-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.process-intro p {
    color: var(--dark-red);
    line-height: 1.7;
    font-size: 1rem;
}

/* Process Advantage Rows - Zigzag Pattern */
.proc-advantage-row {
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 15px;
    border: 2px solid var(--golden-green);
}

.proc-advantage-row.left-aligned {
    margin-left: 0;
    margin-right: auto;
}

.proc-advantage-row.right-aligned {
    margin-left: auto;
    margin-right: 0;
}

.proc-advantage-heading {
    color: var(--dark-red);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.proc-advantage-intro {
    color: var(--dark-red);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Material Balance Equation */
.balance-equation {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    margin-bottom: 1.5rem;
    text-align: center;
}

.equation-formula {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    color: var(--dark-red);
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--pale-yellow);
    border-radius: 8px;
    display: inline-block;
}

.equation-explanation {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Balance Categories Grid */
.balance-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.balance-cat {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid var(--golden-green);
}

.balance-cat strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.balance-cat p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Material Transformation */
.transformation-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.transform-stage {
    text-align: center;
    padding: 1rem;
    background: var(--pale-yellow);
    border-radius: 8px;
    border: 2px solid var(--golden-green);
    min-width: 120px;
}

.transform-stage strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.transform-stage span {
    color: var(--golden-green);
    font-weight: 700;
    font-size: 1.2rem;
}

.transform-arrow {
    color: var(--golden-green);
    font-size: 1.5rem;
    font-weight: bold;
}

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

.transform-type {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--golden-green);
}

.transform-type strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.transform-type p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Quality Check Integration */
.quality-integration {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.quality-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.quality-step-number {
    width: 40px;
    height: 40px;
    background: var(--golden-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.quality-step-content strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.quality-step-content p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

.quality-outcomes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.outcome {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.outcome.pass {
    background: rgba(139, 154, 70, 0.15);
    border: 2px solid var(--golden-green);
}

.outcome.fail {
    background: rgba(139, 44, 44, 0.1);
    border: 2px solid rgba(139, 44, 44, 0.4);
}

.outcome strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.outcome p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Process History Timeline */
.history-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.timeline-event {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--pale-yellow);
    border-radius: 8px;
    border-left: 4px solid var(--golden-green);
}

.event-time {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.8;
    min-width: 60px;
}

.event-type {
    background: var(--golden-green);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}

.event-type.start {
    background: #4CAF50;
}

.event-type.quality {
    background: #2196F3;
}

.event-type.material {
    background: #FF9800;
}

.event-type.complete {
    background: var(--golden-green);
}

.event-details {
    color: var(--dark-red);
    font-size: 0.85rem;
    flex: 1;
}

.history-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.history-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.history-feature strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.history-feature p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Document Access */
.document-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.doc-category {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid var(--golden-green);
}

.doc-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.doc-category strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.doc-category p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

.doc-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.doc-benefit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.benefit-icon {
    font-size: 1.2rem;
}

.doc-benefit p {
    color: var(--dark-red);
    font-size: 0.9rem;
    margin: 0;
}

/* Process Business Value Box */
.proc-business-value {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-top: 1.5rem;
}

.proc-business-value h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.proc-business-value ul {
    margin: 0;
    padding-left: 1.25rem;
}

.proc-business-value li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

/* Process Summary Section */
.proc-summary {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.proc-summary h3 {
    text-align: center;
    color: var(--dark-red);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.proc-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.proc-summary-item {
    background: var(--pale-yellow);
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    text-align: center;
}

.proc-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.proc-summary-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Process Execution Section Responsive */
@media (max-width: 992px) {
    .proc-advantage-row.left-aligned,
    .proc-advantage-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .proc-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .balance-categories {
        grid-template-columns: repeat(3, 1fr);
    }

    .transformation-types,
    .quality-outcomes,
    .history-features,
    .document-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .proc-advantage-row {
        padding: 1.5rem;
        max-width: 100%;
    }

    .proc-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .balance-categories,
    .transformation-types,
    .quality-outcomes,
    .history-features,
    .document-categories {
        grid-template-columns: 1fr;
    }

    .transformation-flow {
        flex-direction: column;
    }

    .transform-arrow {
        transform: rotate(90deg);
    }

    .process-intro {
        text-align: left;
    }

    .timeline-event {
        flex-wrap: wrap;
    }

    .event-time {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .proc-summary-grid {
        grid-template-columns: 1fr;
    }

    .quality-step {
        flex-direction: column;
        text-align: center;
    }

    .history-timeline {
        padding: 0.75rem;
    }

    .timeline-event {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* =====================================================
   LIBRARY MANAGEMENT WHY DIFFERENT SECTION
   ===================================================== */

.library-why-different {
    background: linear-gradient(to bottom,
        rgba(139, 154, 70, 0.08),
        transparent);
    display: none; /* Hidden by default, shown when library module selected */
}

.library-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.library-intro p {
    color: var(--dark-red);
    line-height: 1.7;
    font-size: 1rem;
}

/* Library Advantage Rows - Zigzag Pattern */
.lib-advantage-row {
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 15px;
    border: 2px solid var(--golden-green);
}

.lib-advantage-row.left-aligned {
    margin-left: 0;
    margin-right: auto;
}

.lib-advantage-row.right-aligned {
    margin-left: auto;
    margin-right: 0;
}

.lib-advantage-heading {
    color: var(--dark-red);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.lib-advantage-intro {
    color: var(--dark-red);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Module Sources Grid */
.module-sources h4,
.visual-features h4,
.customer-sources h4,
.customer-features h4,
.folder-structure h4,
.folder-features h4,
.hierarchy-levels h4,
.hierarchy-example h4,
.version-features h4,
.version-history-example h4,
.audit-actions h4,
.audit-record-details h4,
.audit-timeline-example h4,
.expiration-features h4,
.expiry-examples h4,
.file-formats h4,
.file-size-limit h4,
.preview-capabilities h4,
.unsupported-handling h4,
.mobile-features h4,
.touch-elements h4,
.tab-structure h4,
.search-capabilities h4,
.filter-options h4,
.sort-options h4,
.folder-operations h4,
.context-menu-example h4,
.metadata-fields h4,
.format-table h4,
.file-validation h4,
.category-overview h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.source-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border-left: 3px solid var(--golden-green);
}

.source-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.source-name {
    display: block;
    color: var(--dark-red);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.source-desc {
    display: block;
    color: var(--dark-red);
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Feature List */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--dark-red);
    font-size: 0.95rem;
}

.feature-bullet {
    color: var(--golden-green);
    font-weight: bold;
}

/* Business Value Box */
.lib-business-value {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-top: 1.5rem;
}

.lib-business-value h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.lib-business-value ul {
    margin: 0;
    padding-left: 1.25rem;
}

.lib-business-value li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

/* Customer Source List */
.customer-source-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.customer-source {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.source-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    min-width: 90px;
    text-align: center;
}

.source-badge.library { background: #3498db; }
.source-badge.quotes { background: #e67e22; }
.source-badge.invoices { background: #27ae60; }
.source-badge.jobs { background: #2980b9; }
.source-badge.prr { background: #9b59b6; }
.source-badge.opportunities { background: #f39c12; }

.source-text {
    color: var(--dark-red);
    font-size: 0.9rem;
}

/* Feature Cards */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.feature-card {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.feature-card strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.feature-card p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Folder Structure Display */
.folder-tree-display {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.folder-branch {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--golden-green);
}

.folder-root {
    color: var(--dark-red);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.folder-icon {
    margin-right: 0.5rem;
}

.folder-children {
    color: var(--dark-red);
    font-size: 0.85rem;
    opacity: 0.85;
    padding-left: 1.5rem;
}

/* Folder Feature Grid */
.folder-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.folder-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.folder-feature strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.folder-feature p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Hierarchy Level Diagram */
.level-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.level-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem 2rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    width: 100%;
    max-width: 400px;
}

.level-item.job-level { border-color: #3498db; }
.level-item.recipe-level { border-color: #27ae60; }
.level-item.step-level { border-color: #e67e22; }
.level-item.prr-level { border-color: #9b59b6; }

.level-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.level-icon {
    font-size: 1.2rem;
}

.level-name {
    color: var(--dark-red);
    font-weight: 600;
    font-size: 1rem;
}

.level-desc {
    color: var(--dark-red);
    font-size: 0.85rem;
    opacity: 0.85;
}

.level-arrow {
    color: var(--golden-green);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Path Display */
.path-display {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--golden-green);
}

.path-display code {
    display: block;
    font-family: 'Courier New', monospace;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border-radius: 4px;
}

.path-contents {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.path-file, .path-folder {
    color: var(--dark-red);
}

.path-folder {
    font-weight: 600;
}

.path-file.nested, .path-folder.nested {
    padding-left: 1rem;
}

.path-file.nested-2 {
    padding-left: 2rem;
}

/* Version Feature Grid */
.version-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.version-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.version-feature strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.version-feature p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Version Timeline */
.version-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 10px;
}

.version-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--pale-yellow);
    border-radius: 8px;
    border-left: 4px solid #ccc;
}

.version-entry.active {
    border-left-color: var(--golden-green);
}

.version-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #e0e0e0;
    color: var(--dark-red);
}

.version-badge.active {
    background: var(--golden-green);
    color: white;
}

.version-info {
    color: var(--dark-red);
    font-size: 0.85rem;
    opacity: 0.85;
}

.version-note {
    width: 100%;
    color: var(--dark-red);
    font-size: 0.85rem;
    font-style: italic;
}

/* Audit Action Grid */
.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.action-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.action-icon {
    font-size: 1.5rem;
}

.action-details strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.action-details p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Audit Record Fields */
.record-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.record-field {
    background: rgba(139, 154, 70, 0.15);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

/* Audit Timeline */
.audit-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 10px;
}

.audit-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--pale-yellow);
    border-radius: 8px;
    border-left: 4px solid var(--golden-green);
}

.audit-entry.upload { border-left-color: #27ae60; }
.audit-entry.download { border-left-color: #3498db; }
.audit-entry.move { border-left-color: #e67e22; }

.audit-icon {
    font-size: 1.2rem;
}

.audit-action {
    background: var(--golden-green);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.audit-user {
    color: var(--dark-red);
    font-weight: 600;
    font-size: 0.85rem;
}

.audit-time {
    color: var(--dark-red);
    font-size: 0.8rem;
    opacity: 0.7;
}

.audit-detail {
    width: 100%;
    color: var(--dark-red);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Expiration Features */
.expiry-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.expiry-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.expiry-icon {
    font-size: 1.5rem;
}

.expiry-icon.warning { color: #f39c12; }
.expiry-icon.expired { color: #e74c3c; }

.expiry-feature strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.expiry-feature p {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

/* Expiry Document List */
.expiry-doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.expiry-doc {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #ccc;
}

.expiry-doc.warning { border-left-color: #f39c12; }
.expiry-doc.expired { border-left-color: #e74c3c; }
.expiry-doc.valid { border-left-color: #27ae60; }

.expiry-doc .doc-icon {
    font-size: 1.5rem;
}

.expiry-doc .doc-info {
    flex: 1;
}

.expiry-doc .doc-info strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.expiry-doc .doc-meta {
    color: var(--dark-red);
    font-size: 0.8rem;
    opacity: 0.85;
}

.expiry-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.expiry-badge.warning {
    background: rgba(243, 156, 18, 0.2);
    color: #d68910;
}

.expiry-badge.expired {
    background: rgba(231, 76, 60, 0.2);
    color: #c0392b;
}

.expiry-badge.valid {
    background: rgba(39, 174, 96, 0.2);
    color: #1e8449;
}

/* Format Categories */
.format-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.format-category {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.format-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.format-header strong {
    color: var(--dark-red);
    font-size: 0.9rem;
}

.format-list {
    color: var(--dark-red);
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
}

/* File Size Limit */
.file-size-limit {
    margin-bottom: 1.5rem;
}

.size-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(139, 154, 70, 0.15);
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid var(--golden-green);
}

.size-icon {
    font-size: 2rem;
}

.size-info strong {
    display: block;
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.size-info p {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

/* Preview Types */
.preview-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.preview-type {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.preview-icon {
    font-size: 1.3rem;
}

.preview-header strong {
    color: var(--dark-red);
    font-size: 0.95rem;
}

.preview-features {
    margin: 0;
    padding-left: 1.25rem;
}

.preview-features li {
    color: var(--dark-red);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

/* Unsupported Handling */
.unsupported-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.unsupported-icon {
    font-size: 1.5rem;
}

.unsupported-info p {
    color: var(--dark-red);
    font-size: 0.9rem;
    margin: 0;
}

/* Mobile Feature Grid */
.mobile-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mobile-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.mobile-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.mobile-feature strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.mobile-feature p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Touch Elements List */
.touch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.touch-item {
    background: rgba(139, 154, 70, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

/* Tab Structure */
.tab-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tab-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.tab-number {
    width: 40px;
    height: 40px;
    background: var(--golden-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tab-content strong {
    display: block;
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.tab-purpose {
    color: var(--dark-red);
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
}

.tab-usecase {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.75;
    font-style: italic;
}

/* Search Fields */
.search-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.search-field {
    background: rgba(139, 154, 70, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--dark-red);
}

/* Filter Grid */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.filter-icon {
    font-size: 1.2rem;
}

/* Sort List */
.sort-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.sort-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

/* Operation Grid */
.operation-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.operation-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.operation-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.operation-details strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.operation-details p {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

/* Context Menu */
.context-menu {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #ccc;
    max-width: 350px;
}

.menu-header {
    font-weight: 600;
    color: var(--dark-red);
    font-size: 0.95rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.5rem;
}

.menu-item {
    padding: 0.5rem 0;
    color: var(--dark-red);
    font-size: 0.85rem;
}

/* Metadata Grid */
.metadata-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metadata-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.metadata-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.metadata-item p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Format Table Grid */
.format-table-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.format-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 1rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.format-category-name {
    color: var(--dark-red);
    font-weight: 600;
    font-size: 0.9rem;
}

.format-extensions {
    color: var(--dark-red);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.format-usecase {
    color: var(--dark-red);
    font-size: 0.85rem;
    opacity: 0.85;
}

/* File Validation */
.validation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.validation-item {
    background: rgba(139, 154, 70, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--dark-red);
    border: 1px solid var(--golden-green);
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.category-card {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
    text-align: center;
    border-left: 4px solid var(--golden-green);
}

.category-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.category-card strong {
    display: block;
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.category-card p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Library Summary Section */
.lib-summary {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.lib-summary h3 {
    text-align: center;
    color: var(--dark-red);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.lib-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.lib-summary-item {
    background: var(--pale-yellow);
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    text-align: center;
}

.lib-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.lib-summary-item p {
    color: var(--dark-red);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Library Section Responsive */
@media (max-width: 992px) {
    .lib-advantage-row.left-aligned,
    .lib-advantage-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .source-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .feature-cards,
    .folder-feature-grid,
    .version-feature-grid,
    .action-grid,
    .format-categories,
    .preview-types,
    .mobile-feature-grid,
    .filter-grid,
    .metadata-grid,
    .category-grid,
    .lib-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .folder-tree-display {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .lib-advantage-row {
        padding: 1.5rem;
        max-width: 100%;
    }

    .source-grid,
    .feature-cards,
    .folder-tree-display,
    .folder-feature-grid,
    .version-feature-grid,
    .action-grid,
    .format-categories,
    .preview-types,
    .mobile-feature-grid,
    .filter-grid,
    .metadata-grid,
    .category-grid,
    .lib-summary-grid {
        grid-template-columns: 1fr;
    }

    .format-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .library-intro {
        text-align: left;
    }

    .level-item {
        max-width: 100%;
    }

    .customer-source {
        flex-direction: column;
        align-items: flex-start;
    }

    .expiry-doc {
        flex-direction: column;
        align-items: flex-start;
    }

    .expiry-badge {
        align-self: flex-start;
    }

    .audit-entry {
        flex-direction: column;
        align-items: flex-start;
    }

    .tab-item {
        flex-direction: column;
        text-align: center;
    }

    .tab-number {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .lib-summary-grid {
        grid-template-columns: 1fr;
    }

    .search-fields,
    .touch-list,
    .sort-list,
    .record-fields,
    .validation-list {
        flex-direction: column;
    }

    .context-menu {
        max-width: 100%;
    }

    .size-indicator {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   BOM (BILL OF MATERIALS) WHY DIFFERENT SECTION
   ===================================================== */

.bom-why-different {
    background: linear-gradient(to bottom,
        rgba(139, 154, 70, 0.08),
        transparent);
    display: none; /* Hidden by default, shown when bom module selected */
}

.bom-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.bom-intro p {
    color: var(--dark-red);
    line-height: 1.7;
    font-size: 1rem;
}

/* BOM Advantage Rows - Zigzag Pattern */
.bom-advantage-row {
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 15px;
    border: 2px solid var(--golden-green);
}

.bom-advantage-row.left-aligned {
    margin-left: 0;
    margin-right: auto;
}

.bom-advantage-row.right-aligned {
    margin-left: auto;
    margin-right: 0;
}

.bom-advantage-heading {
    color: var(--dark-red);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.bom-advantage-intro {
    color: var(--dark-red);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Section Headers */
.whereused-features h4,
.whereused-usecases h4,
.cost-accumulation-concept h4,
.cost-tracking-per-step h4,
.cost-flow-visual h4,
.true-scrap-value h4,
.kit-screens h4,
.kit-info-tracked h4,
.hybrid-boms h4,
.batch-tracking h4,
.batch-example h4,
.audit-actions-tracked h4,
.audit-features h4,
.history-views h4,
.cost-categories h4,
.cost-rollup h4,
.cost-analysis-screen h4,
.integration-section h4 {
    color: var(--dark-red);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Where-Used Feature List */
.whereused-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.whereused-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
}

.whereused-feature .feature-icon {
    font-size: 1.3rem;
}

.whereused-feature strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.whereused-feature p {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

/* Use Case Grid */
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.usecase-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--golden-green);
}

.usecase-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.usecase-item p {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

/* Business Value Box */
.bom-business-value {
    background: rgba(139, 154, 70, 0.1);
    padding: 1.25rem;
    border-radius: 10px;
    margin-top: 1.5rem;
}

.bom-business-value h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.bom-business-value ul {
    margin: 0;
    padding-left: 1.25rem;
}

.bom-business-value li {
    color: var(--dark-red);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

/* Cost Accumulation Concept */
.concept-text {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.7;
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

/* Step Tracking Items */
.step-tracking-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tracking-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--golden-green);
}

.tracking-label {
    display: block;
    color: var(--dark-red);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.tracking-desc {
    display: block;
    color: var(--dark-red);
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Flow Diagram */
.flow-diagram {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.flow-step {
    background: var(--pale-yellow);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 2px solid var(--golden-green);
    text-align: center;
    min-width: 100px;
}

.flow-step.final {
    background: var(--golden-green);
}

.flow-step.final .flow-label,
.flow-step.final .flow-add {
    color: white;
}

.flow-label {
    display: block;
    color: var(--dark-red);
    font-weight: 600;
    font-size: 0.9rem;
}

.flow-add {
    display: block;
    color: var(--dark-red);
    font-size: 0.75rem;
    opacity: 0.85;
}

.flow-arrow {
    color: var(--golden-green);
    font-size: 1.5rem;
    font-weight: bold;
}

/* Scrap Explanation */
.scrap-explanation {
    background: rgba(139, 44, 44, 0.1);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid rgba(139, 44, 44, 0.5);
}

.scrap-explanation p {
    color: var(--dark-red);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Kit Screen Grid */
.kit-screen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kit-screen-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.kit-screen-item .screen-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.kit-screen-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.kit-screen-item p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Kit Info List */
.kit-info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.kit-info-item {
    background: rgba(139, 154, 70, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

/* Hybrid Features */
.hybrid-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hybrid-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--dark-red);
    font-size: 0.9rem;
}

.hybrid-icon {
    font-size: 1.2rem;
}

/* Batch Tracking Grid */
.batch-tracking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.batch-track-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.batch-track-item .track-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.batch-track-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.batch-track-item p {
    color: var(--dark-red);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Batch Example Display */
.batch-example-display {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--golden-green);
}

.batch-component-name {
    color: var(--dark-red);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
}

.batch-allocations {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.batch-allocation-item {
    background: var(--pale-yellow);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--golden-green);
}

.batch-header {
    margin-bottom: 0.5rem;
}

.batch-id {
    color: var(--dark-red);
    font-weight: 600;
    font-size: 0.95rem;
}

.batch-supplier {
    color: var(--dark-red);
    font-size: 0.85rem;
    opacity: 0.85;
}

.batch-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.batch-status {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.batch-status.allocated {
    background: rgba(139, 154, 70, 0.2);
    color: #5a6b2a;
}

/* Audit Action Grid */
.audit-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.audit-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.75rem;
    border-radius: 8px;
}

.action-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    min-width: 100px;
    text-align: center;
}

.action-badge.created { background: #27ae60; }
.action-badge.changed { background: #3498db; }
.action-badge.status { background: #9b59b6; }
.action-badge.added { background: #2ecc71; }
.action-badge.removed { background: #e74c3c; }
.action-badge.modified { background: #f39c12; }
.action-badge.batch { background: #1abc9c; }
.action-badge.cost { background: #e67e22; }

.action-desc {
    color: var(--dark-red);
    font-size: 0.85rem;
}

/* Audit Feature List */
.audit-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.audit-feature {
    background: rgba(139, 154, 70, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

/* History View Cards */
.history-view-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.history-view-card {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 2px solid var(--golden-green);
}

.history-view-card strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.history-view-card p {
    color: var(--dark-red);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

/* Cost Category Grid */
.cost-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cost-category-item {
    background: rgba(255, 255, 255, 0.6);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.category-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.category-icon {
    font-size: 1.5rem;
}

.category-header strong {
    color: var(--dark-red);
    font-size: 0.85rem;
}

.cost-category-item p {
    color: var(--dark-red);
    font-size: 0.75rem;
    margin: 0;
    opacity: 0.85;
    line-height: 1.4;
}

/* Rollup Features */
.rollup-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.rollup-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--dark-red);
    font-size: 0.9rem;
}

.rollup-icon {
    font-size: 1.2rem;
}

/* Analysis Features */
.analysis-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.analysis-feature {
    background: rgba(255, 255, 255, 0.6);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

/* Integration Sections */
.integration-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.integration-section {
    background: rgba(255, 255, 255, 0.6);
    padding: 1.25rem;
    border-radius: 10px;
}

.integration-section h4 {
    margin-bottom: 0.75rem;
}

.integration-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.integration-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dark-red);
    font-size: 0.85rem;
}

.int-icon {
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
}

/* BOM Summary Section */
.bom-summary {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--golden-green);
}

.bom-summary h3 {
    text-align: center;
    color: var(--dark-red);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.bom-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.bom-summary-item {
    background: var(--pale-yellow);
    padding: 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--golden-green);
    text-align: center;
}

.bom-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.bom-summary-item p {
    color: var(--dark-red);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* BOM Section Responsive */
@media (max-width: 992px) {
    .bom-advantage-row.left-aligned,
    .bom-advantage-row.right-aligned {
        margin-left: auto;
        margin-right: auto;
    }

    .kit-screen-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .batch-tracking-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cost-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .integration-sections {
        grid-template-columns: repeat(2, 1fr);
    }

    .bom-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .bom-advantage-row {
        padding: 1.5rem;
        max-width: 100%;
    }

    .usecase-grid,
    .step-tracking-items,
    .history-view-cards,
    .audit-action-grid {
        grid-template-columns: 1fr;
    }

    .kit-screen-grid,
    .batch-tracking-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cost-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .integration-sections {
        grid-template-columns: 1fr;
    }

    .bom-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .flow-diagram {
        flex-direction: column;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    .bom-intro {
        text-align: left;
    }

    .batch-details {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .bom-summary-grid {
        grid-template-columns: 1fr;
    }

    .kit-screen-grid,
    .batch-tracking-grid,
    .cost-category-grid {
        grid-template-columns: 1fr;
    }

    .kit-info-list,
    .audit-feature-list,
    .analysis-features {
        flex-direction: column;
    }
}

/* ==========================================================================
   Material Disposition - Why Different Section
   ========================================================================== */

.disposition-why-different {
    background: linear-gradient(135deg,
        rgba(255, 248, 220, 0.95) 0%,
        rgba(255, 253, 240, 0.9) 100%);
    padding: 4rem 2rem;
    margin-top: 3rem;
    border-top: 3px solid var(--golden-green);
}

.disposition-why-different-container {
    max-width: 1200px;
    margin: 0 auto;
}

.disposition-section-title {
    text-align: center;
    color: var(--dark-red);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.disposition-intro {
    text-align: center;
    color: var(--dark-green);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* Disposition Advantage Rows */
.disposition-advantage-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 20px;
    border: 2px solid var(--golden-green-medium);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.disposition-advantage-row:hover {
    border-color: var(--golden-green);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Left-aligned rows */
.disposition-left-aligned {
    flex-direction: row;
}

.disposition-left-aligned .disposition-advantage-number {
    text-align: left;
}

.disposition-left-aligned .disposition-advantage-title {
    text-align: left;
}

/* Right-aligned rows */
.disposition-right-aligned {
    flex-direction: row-reverse;
}

.disposition-right-aligned .disposition-advantage-number {
    text-align: right;
}

.disposition-right-aligned .disposition-advantage-title {
    text-align: right;
}

.disposition-advantage-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--golden-green);
    opacity: 0.7;
    min-width: 80px;
    line-height: 1;
}

.disposition-advantage-content {
    flex: 1;
}

.disposition-advantage-title {
    color: var(--dark-red);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.disposition-advantage-description {
    color: var(--dark-green);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Disposition Types Grid */
.disposition-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.disposition-type-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 1px solid var(--golden-green-light);
}

.disposition-type-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.disposition-type-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.disposition-type-info strong {
    color: var(--dark-red);
    font-size: 0.95rem;
}

.disposition-type-info span {
    color: var(--dark-green);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Handling Cases List */
.handling-cases-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.handling-case-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border-left: 3px solid var(--golden-green);
}

.case-bullet {
    color: var(--golden-green);
    font-weight: 600;
    flex-shrink: 0;
}

.handling-case-item span:last-child {
    color: var(--dark-green);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Workflow Stages */
.workflow-stages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.workflow-stage {
    flex: 1;
    min-width: 180px;
    max-width: 250px;
    text-align: center;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    border: 2px solid var(--golden-green-light);
}

.stage-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.pending-stage {
    background: rgba(255, 193, 7, 0.2);
    color: #856404;
}

.progress-stage {
    background: rgba(0, 123, 255, 0.2);
    color: #004085;
}

.completed-stage {
    background: rgba(40, 167, 69, 0.2);
    color: #155724;
}

.stage-icon {
    font-size: 1.25rem;
}

.stage-name {
    font-weight: 600;
    font-size: 1rem;
}

.stage-description {
    color: var(--dark-green);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

.workflow-arrow {
    font-size: 1.5rem;
    color: var(--golden-green);
    font-weight: 600;
}

/* Routing Factors */
.routing-factors {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.routing-factor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 25px;
    border: 1px solid var(--golden-green-light);
}

.factor-icon {
    font-size: 1.25rem;
}

.factor-text {
    color: var(--dark-green);
    font-size: 0.95rem;
}

/* Snapshot Elements */
.snapshot-elements {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.snapshot-element {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.element-marker {
    color: var(--golden-green);
    font-size: 0.75rem;
}

.snapshot-element span:last-child {
    color: var(--dark-green);
    font-size: 0.95rem;
}

/* Traceability Chain */
.traceability-chain {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trace-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border-left: 3px solid var(--dark-red);
}

.trace-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.trace-text {
    color: var(--dark-green);
    font-size: 0.95rem;
}

/* Expiration Features */
.expiration-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.expiration-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.exp-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.expiration-feature span:last-child {
    color: var(--dark-green);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Global Release Features */
.global-release-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.release-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.release-bullet {
    color: var(--golden-green);
    font-weight: 600;
    font-size: 1.1rem;
}

.release-feature span:last-child {
    color: var(--dark-green);
    font-size: 0.95rem;
}

/* Shipping Features Grid */
.shipping-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.shipping-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 1px solid var(--golden-green-light);
}

.shipping-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.shipping-feature-item span:last-child {
    color: var(--dark-green);
    font-size: 0.9rem;
}

/* Audit Trail Elements */
.audit-trail-elements {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.audit-element {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.audit-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.audit-element span:last-child {
    color: var(--dark-green);
    font-size: 0.9rem;
}

/* Disposition Summary Section */
.disposition-summary {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg,
        var(--golden-green) 0%,
        rgba(139, 154, 70, 0.9) 100%);
    border-radius: 20px;
}

.disposition-summary h3 {
    text-align: center;
    color: var(--pale-yellow);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.disposition-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.disposition-summary-item {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
}

.disposition-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.disposition-summary-item p {
    color: var(--dark-green);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Disposition Section Responsive - 992px */
@media (max-width: 992px) {
    .disposition-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .disposition-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .workflow-stages {
        flex-direction: column;
    }

    .workflow-arrow {
        transform: rotate(90deg);
    }

    .workflow-stage {
        width: 100%;
        max-width: 100%;
    }
}

/* Disposition Section Responsive - 768px */
@media (max-width: 768px) {
    .disposition-why-different {
        padding: 3rem 1.5rem;
    }

    .disposition-section-title {
        font-size: 1.8rem;
    }

    .disposition-advantage-row {
        flex-direction: column !important;
        padding: 1.5rem;
    }

    .disposition-left-aligned .disposition-advantage-number,
    .disposition-right-aligned .disposition-advantage-number,
    .disposition-left-aligned .disposition-advantage-title,
    .disposition-right-aligned .disposition-advantage-title {
        text-align: left;
    }

    .disposition-advantage-number {
        font-size: 2.5rem;
    }

    .disposition-types-grid {
        grid-template-columns: 1fr;
    }

    .shipping-features-grid,
    .audit-trail-elements {
        grid-template-columns: 1fr;
    }

    .disposition-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .routing-factors {
        flex-direction: column;
    }

    .routing-factor {
        width: 100%;
    }
}

/* Disposition Section Responsive - 480px */
@media (max-width: 480px) {
    .disposition-why-different {
        padding: 2rem 1rem;
    }

    .disposition-section-title {
        font-size: 1.5rem;
    }

    .disposition-intro {
        font-size: 1rem;
    }

    .disposition-advantage-row {
        padding: 1.25rem;
        margin-bottom: 2rem;
    }

    .disposition-advantage-title {
        font-size: 1.25rem;
    }

    .disposition-summary-grid {
        grid-template-columns: 1fr;
    }

    .disposition-summary {
        padding: 1.5rem;
    }

    .disposition-type-card {
        flex-direction: column;
        text-align: center;
    }

    .disposition-type-info {
        align-items: center;
    }
}

/* ==========================================================================
   Job Management - Why Different Section
   ========================================================================== */

.job-why-different {
    background: linear-gradient(135deg,
        rgba(255, 248, 220, 0.95) 0%,
        rgba(255, 253, 240, 0.9) 100%);
    padding: 4rem 2rem;
    margin-top: 3rem;
    border-top: 3px solid var(--golden-green);
}

.job-why-different-container {
    max-width: 1200px;
    margin: 0 auto;
}

.job-section-title {
    text-align: center;
    color: var(--dark-red);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.job-intro {
    text-align: center;
    color: var(--dark-green);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* Job Advantage Rows */
.job-advantage-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 20px;
    border: 2px solid var(--golden-green-medium);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.job-advantage-row:hover {
    border-color: var(--golden-green);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Left-aligned rows */
.job-left-aligned {
    flex-direction: row;
}

.job-left-aligned .job-advantage-number {
    text-align: left;
}

.job-left-aligned .job-advantage-title {
    text-align: left;
}

/* Right-aligned rows */
.job-right-aligned {
    flex-direction: row-reverse;
}

.job-right-aligned .job-advantage-number {
    text-align: right;
}

.job-right-aligned .job-advantage-title {
    text-align: right;
}

.job-advantage-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--golden-green);
    opacity: 0.7;
    min-width: 80px;
    line-height: 1;
}

.job-advantage-content {
    flex: 1;
}

.job-advantage-title {
    color: var(--dark-red);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.job-advantage-description {
    color: var(--dark-green);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Job Feature Blocks */
.job-feature-block {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border-left: 3px solid var(--golden-green);
}

.job-feature-block:last-child {
    margin-bottom: 0;
}

.job-feature-block h4 {
    color: var(--dark-red);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.job-feature-block p {
    color: var(--dark-green);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Job Metrics List */
.job-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.job-metric-item {
    padding: 0.5rem 1rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 8px;
    color: var(--dark-green);
    font-size: 0.95rem;
    border-left: 3px solid var(--golden-green);
}

/* Job Integration Grid */
.job-integration-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.job-integration-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--golden-green-light);
}

.job-integration-item h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.job-integration-item p {
    color: var(--dark-green);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Job Summary Section */
.job-summary {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg,
        var(--golden-green) 0%,
        rgba(139, 154, 70, 0.9) 100%);
    border-radius: 20px;
}

.job-summary h3 {
    text-align: center;
    color: var(--pale-yellow);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.job-summary-item {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
}

.job-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.job-summary-item p {
    color: var(--dark-green);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Job Section Responsive - 992px */
@media (max-width: 992px) {
    .job-integration-grid {
        grid-template-columns: 1fr;
    }

    .job-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Job Section Responsive - 768px */
@media (max-width: 768px) {
    .job-why-different {
        padding: 3rem 1.5rem;
    }

    .job-section-title {
        font-size: 1.8rem;
    }

    .job-advantage-row {
        flex-direction: column !important;
        padding: 1.5rem;
    }

    .job-left-aligned .job-advantage-number,
    .job-right-aligned .job-advantage-number,
    .job-left-aligned .job-advantage-title,
    .job-right-aligned .job-advantage-title {
        text-align: left;
    }

    .job-advantage-number {
        font-size: 2.5rem;
    }

    .job-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Job Section Responsive - 480px */
@media (max-width: 480px) {
    .job-why-different {
        padding: 2rem 1rem;
    }

    .job-section-title {
        font-size: 1.5rem;
    }

    .job-intro {
        font-size: 1rem;
    }

    .job-advantage-row {
        padding: 1.25rem;
        margin-bottom: 2rem;
    }

    .job-advantage-title {
        font-size: 1.25rem;
    }

    .job-summary-grid {
        grid-template-columns: 1fr;
    }

    .job-summary {
        padding: 1.5rem;
    }

    .job-feature-block {
        padding: 1rem;
    }
}

/* ==========================================================================
   User Management - Why Different Section
   ========================================================================== */

.user-why-different {
    background: linear-gradient(135deg,
        rgba(255, 248, 220, 0.95) 0%,
        rgba(255, 253, 240, 0.9) 100%);
    padding: 4rem 2rem;
    margin-top: 3rem;
    border-top: 3px solid var(--golden-green);
}

.user-why-different-container {
    max-width: 1200px;
    margin: 0 auto;
}

.user-section-title {
    text-align: center;
    color: var(--dark-red);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.user-intro {
    text-align: center;
    color: var(--dark-green);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* User Advantage Rows */
.user-advantage-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--pale-yellow);
    border-radius: 20px;
    border: 2px solid var(--golden-green-medium);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.user-advantage-row:hover {
    border-color: var(--golden-green);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Left-aligned rows */
.user-left-aligned {
    flex-direction: row;
}

.user-left-aligned .user-advantage-number {
    text-align: left;
}

.user-left-aligned .user-advantage-title {
    text-align: left;
}

/* Right-aligned rows */
.user-right-aligned {
    flex-direction: row-reverse;
}

.user-right-aligned .user-advantage-number {
    text-align: right;
}

.user-right-aligned .user-advantage-title {
    text-align: right;
}

.user-advantage-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--golden-green);
    opacity: 0.7;
    min-width: 80px;
    line-height: 1;
}

.user-advantage-content {
    flex: 1;
}

.user-advantage-title {
    color: var(--dark-red);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.user-advantage-description {
    color: var(--dark-green);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* User Modules Grid */
.user-modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-module-card {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 12px;
    border-left: 3px solid var(--golden-green);
}

.user-module-card h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.user-module-card p {
    color: var(--dark-green);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* User Feature Note */
.user-feature-note {
    background: rgba(139, 154, 70, 0.1);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border-left: 4px solid var(--golden-green);
    margin-top: 1rem;
}

.user-feature-note p {
    color: var(--dark-green);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* User Approval Features */
.user-approval-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.approval-feature-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 12px;
    border-left: 3px solid var(--golden-green);
}

.approval-feature-item h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.approval-feature-item p {
    color: var(--dark-green);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* User Template Section */
.user-template-section {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid var(--golden-green-light);
}

.user-template-section h4 {
    color: var(--dark-red);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.user-template-section > p {
    color: var(--dark-green);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Template Features List */
.template-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.template-feature {
    padding: 0.75rem 1rem;
    background: rgba(139, 154, 70, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--golden-green);
}

.template-feature strong {
    color: var(--dark-red);
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.25rem;
}

.template-feature span {
    color: var(--dark-green);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* User Hierarchy Features */
.user-hierarchy-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hierarchy-feature-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 12px;
    border-left: 3px solid var(--dark-red);
}

.hierarchy-feature-item h4 {
    color: var(--dark-red);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hierarchy-feature-item p {
    color: var(--dark-green);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* User Summary Section */
.user-summary {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg,
        var(--golden-green) 0%,
        rgba(139, 154, 70, 0.9) 100%);
    border-radius: 20px;
}

.user-summary h3 {
    text-align: center;
    color: var(--pale-yellow);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.user-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.user-summary-item {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
}

.user-summary-item strong {
    display: block;
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.user-summary-item p {
    color: var(--dark-green);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* User Section Responsive - 992px */
@media (max-width: 992px) {
    .user-modules-grid {
        grid-template-columns: 1fr;
    }

    .user-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* User Section Responsive - 768px */
@media (max-width: 768px) {
    .user-why-different {
        padding: 3rem 1.5rem;
    }

    .user-section-title {
        font-size: 1.8rem;
    }

    .user-advantage-row {
        flex-direction: column !important;
        padding: 1.5rem;
    }

    .user-left-aligned .user-advantage-number,
    .user-right-aligned .user-advantage-number,
    .user-left-aligned .user-advantage-title,
    .user-right-aligned .user-advantage-title {
        text-align: left;
    }

    .user-advantage-number {
        font-size: 2.5rem;
    }

    .user-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* User Section Responsive - 480px */
@media (max-width: 480px) {
    .user-why-different {
        padding: 2rem 1rem;
    }

    .user-section-title {
        font-size: 1.5rem;
    }

    .user-intro {
        font-size: 1rem;
    }

    .user-advantage-row {
        padding: 1.25rem;
        margin-bottom: 2rem;
    }

    .user-advantage-title {
        font-size: 1.25rem;
    }

    .user-summary-grid {
        grid-template-columns: 1fr;
    }

    .user-summary {
        padding: 1.5rem;
    }

    .user-module-card,
    .approval-feature-item,
    .hierarchy-feature-item {
        padding: 1rem;
    }

    .user-template-section {
        padding: 1rem;
    }
}

/* ==================== PROJECT MODULE WHY DIFFERENT ==================== */

.project-why-different {
    background: linear-gradient(135deg,
        rgba(255, 248, 220, 0.95) 0%,
        rgba(255, 253, 240, 0.9) 100%);
    padding: 4rem 2rem;
    margin-top: 3rem;
    border-top: 3px solid var(--golden-green);
}

.project-why-different .module-difference-title {
    text-align: center;
    color: var(--dark-red);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.project-intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    max-width: 900px;
    margin: 0 auto 3rem auto;
    text-align: center;
    padding: 0 1rem;
}

.project-intro-text strong {
    color: var(--dark-red);
}

/* Project Advantage Rows - Zigzag Pattern */
.project-why-different .module-advantage-row {
    display: flex;
    margin-bottom: 2.5rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.project-why-different .module-advantage-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(139, 154, 70, 0.2);
    width: 85%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-why-different .module-advantage-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(139, 154, 70, 0.15);
}

.project-why-different .module-left-aligned {
    margin-right: auto;
    border-left: 4px solid var(--dark-red);
}

.project-why-different .module-right-aligned {
    margin-left: auto;
    border-right: 4px solid var(--dark-red);
    text-align: right;
}

.project-why-different .module-right-aligned .module-advantage-features {
    text-align: left;
    direction: ltr;
}

.project-why-different .module-advantage-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark-red);
    margin-bottom: 0.75rem;
}

.project-why-different .module-advantage-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.project-why-different .module-advantage-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.project-why-different .module-advantage-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.project-why-different .module-advantage-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--dark-red);
    font-weight: bold;
}

.project-why-different .module-advantage-features li strong {
    color: var(--dark-red);
}

.project-why-different .module-advantage-users {
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(139, 154, 70, 0.3);
}

.project-why-different .module-advantage-users strong {
    color: var(--dark-red);
}

/* Project Stakeholder Table */
.project-stakeholder-table {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.stakeholder-row {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
}

.stakeholder-row:last-child {
    border-bottom: none;
}

.stakeholder-row.header {
    background: var(--dark-red);
    color: white;
    font-weight: 600;
}

.stakeholder-row:not(.header):nth-child(even) {
    background: rgba(255, 248, 220, 0.5);
}

.stakeholder-col {
    padding: 0.75rem 1rem;
    flex: 1;
    font-size: 0.9rem;
}

.stakeholder-col:first-child {
    flex: 0 0 160px;
    border-right: 1px solid #e8e8e8;
}

.stakeholder-row.header .stakeholder-col:first-child {
    border-right-color: rgba(255,255,255,0.2);
}

.project-result-text {
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.08) 0%, rgba(139, 69, 19, 0.03) 100%);
    border-radius: 8px;
    font-size: 1rem;
    color: #555;
    text-align: center;
    border: 1px solid rgba(139, 69, 19, 0.1);
}

.project-result-text strong {
    color: var(--dark-red);
}

/* Project Section Responsive - 992px */
@media (max-width: 992px) {
    .project-why-different {
        padding: 3rem 1.5rem;
    }

    .project-why-different .module-advantage-content {
        width: 90%;
    }

    .project-intro-text {
        font-size: 1rem;
    }
}

/* Project Section Responsive - 768px */
@media (max-width: 768px) {
    .project-why-different {
        padding: 2.5rem 1rem;
    }

    .project-why-different .module-advantage-content {
        width: 100%;
        border-left: 4px solid var(--dark-red) !important;
        border-right: none !important;
        text-align: left !important;
    }

    .project-why-different .module-right-aligned {
        margin-left: 0;
    }

    .project-why-different .module-advantage-title {
        font-size: 1.25rem;
    }

    .stakeholder-col:first-child {
        flex: 0 0 120px;
    }

    .stakeholder-col {
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem;
    }
}

/* Project Section Responsive - 480px */
@media (max-width: 480px) {
    .project-why-different {
        padding: 2rem 1rem;
    }

    .project-intro-text {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .project-why-different .module-advantage-content {
        padding: 1.5rem;
    }

    .project-why-different .module-advantage-title {
        font-size: 1.15rem;
    }

    .project-why-different .module-advantage-description {
        font-size: 0.95rem;
    }

    .project-why-different .module-advantage-features li {
        font-size: 0.9rem;
    }

    .stakeholder-row {
        flex-direction: column;
    }

    .stakeholder-col {
        flex: 1 1 auto !important;
        border-right: none !important;
    }

    .stakeholder-col:first-child {
        border-bottom: 1px solid #e8e8e8;
        background: rgba(255, 248, 220, 0.5);
    }

    .stakeholder-row.header .stakeholder-col:first-child {
        border-bottom-color: rgba(255,255,255,0.2);
    }

    .project-result-text {
        font-size: 0.95rem;
        padding: 0.75rem;
    }
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, 
        var(--golden-green) 0%, 
        rgba(139, 154, 70, 0.8) 100%);
    padding: 4rem 2rem;
    border-radius: 50px;
    margin: 3rem 2rem;
    text-align: center;
}

.cta-content h2 {
    color: var(--pale-yellow);
    margin-bottom: 1rem;
}

.cta-content p {
    color: var(--pale-yellow);
    opacity: 0.95;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Module Navigation Responsive */
    .module-navigation {
        padding: 1rem;
        margin: 0 1rem 1.5rem;
    }

    .module-selector {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .module-dropdown {
        min-width: 100%;
        width: 100%;
    }

    .integration-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons a {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .features-hero {
        padding: 4rem 1rem 2rem;
    }

    .features-hero h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    .feature-icon {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Screen Gallery & Mockup Styles - Data Analysis Module
   ========================================================================== */

/* Module Icon Large */
.module-icon-large {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

/* Feature Tags */
.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.feature-tag {
    background: var(--golden-green-light);
    color: var(--golden-green);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 400;
    border: 1px solid var(--golden-green);
}

/* Screen Gallery Container */
.screen-gallery {
    background: rgba(255, 248, 220, 0.7);
    border: 2px solid var(--golden-green);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 2rem;
}

.gallery-title {
    color: var(--dark-red);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Screen Thumbnails Grid */
.screen-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.screen-thumb {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green-medium);
    border-radius: 12px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.screen-thumb:hover {
    border-color: var(--golden-green);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--dark-red-light);
}

.screen-thumb.active {
    border-color: var(--golden-green);
    background: var(--golden-green-light);
    box-shadow: 0 4px 12px var(--golden-green-medium);
}

.screen-thumb-preview {
    width: 100%;
    height: 70px;
    background: linear-gradient(135deg, var(--golden-green-light) 0%, var(--pale-yellow) 100%);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.screen-thumb-name {
    font-size: 0.85rem;
    color: var(--dark-red);
    font-weight: 400;
}

/* Screen Preview Window */
.screen-preview {
    background: var(--pale-yellow);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px var(--dark-red-light);
    border: 2px solid var(--golden-green);
}

.screen-preview-header {
    background: var(--dark-red);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.window-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.window-dot.red { background: #ff5f57; }
.window-dot.yellow { background: #febc2e; }
.window-dot.green { background: #28c840; }

.screen-preview-title {
    color: var(--pale-yellow);
    font-size: 0.85rem;
    margin-left: 1rem;
    opacity: 0.9;
}

.screen-preview-content {
    padding: 1.5rem;
    min-height: 400px;
    background: var(--pale-yellow);
}

/* Mockup Screen States */
.mockup-screen {
    display: none;
    animation: fadeInMockup 0.4s ease-out;
}

.mockup-screen.active {
    display: block;
}

@keyframes fadeInMockup {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mockup Header */
.mockup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--golden-green-light);
}

.mockup-title {
    font-size: 1.4rem;
    color: var(--dark-red);
    font-weight: 400;
}

.mockup-actions {
    display: flex;
    gap: 0.5rem;
}

/* Mockup Buttons */
.mockup-btn-primary {
    padding: 0.5rem 1rem;
    background: var(--golden-green);
    color: var(--pale-yellow);
    border: none;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.mockup-btn-secondary {
    padding: 0.5rem 1rem;
    background: var(--pale-yellow);
    color: var(--dark-red);
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.mockup-select {
    padding: 0.5rem;
    background: var(--pale-yellow);
    color: var(--dark-red);
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
}

/* Mockup Search Bar */
.mockup-search-bar {
    background: var(--golden-green-light);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
}

.mockup-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    background: var(--pale-yellow);
    color: var(--dark-red);
}

/* Mockup Query Result */
.mockup-query-result {
    background: var(--pale-yellow);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--golden-green);
}

.mockup-query-result strong {
    color: var(--dark-red);
    display: block;
    margin-bottom: 0.5rem;
}

.mockup-query-result code {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--dark-red);
    background: var(--golden-green-light);
    padding: 0.5rem;
    border-radius: 4px;
    display: block;
    overflow-x: auto;
}

/* Mockup Table */
.mockup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.mockup-table th {
    background: var(--golden-green);
    color: var(--pale-yellow);
    padding: 0.75rem;
    text-align: left;
    font-weight: 400;
}

.mockup-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--golden-green-light);
    color: var(--dark-red);
}

.mockup-table tr:hover {
    background: var(--golden-green-light);
}

.mockup-table.compact th,
.mockup-table.compact td {
    padding: 0.5rem;
    font-size: 0.8rem;
}

/* Query Builder Layout */
.query-builder-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    min-height: 300px;
}

.query-builder-sidebar {
    background: var(--golden-green-light);
    border-radius: 8px;
    padding: 1rem;
}

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

.sidebar-section h4 {
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--golden-green);
}

.table-list,
.field-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-list li,
.field-list li {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    color: var(--dark-red);
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.table-list li:hover,
.field-list li:hover {
    background: var(--golden-green-medium);
}

.table-list li.selected {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.query-builder-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.query-editor {
    background: var(--dark-red);
    border-radius: 8px;
    padding: 1rem;
    flex: 1;
}

.query-code {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--pale-yellow);
    margin: 0;
    white-space: pre-wrap;
}

.query-results {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 8px;
    overflow: hidden;
}

.results-header {
    background: var(--golden-green-light);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--dark-red);
    border-bottom: 1px solid var(--golden-green);
}

/* Charts Layout */
.charts-layout {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 1.5rem;
}

.chart-container-large {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1.5rem;
}

.chart-title {
    font-size: 1rem;
    color: var(--dark-red);
    margin-bottom: 1rem;
    font-weight: 400;
}

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bar-item {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    align-items: center;
    gap: 0.75rem;
}

.bar-label {
    font-size: 0.85rem;
    color: var(--dark-red);
}

.bar-track {
    height: 24px;
    background: var(--golden-green-light);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--golden-green), var(--dark-red));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bar-value {
    font-size: 0.85rem;
    color: var(--dark-red);
    font-weight: 400;
    text-align: right;
}

/* Chart Visualization Container */
.chart-visualization {
    display: none;
    animation: fadeInChart 0.4s ease-out;
}

.chart-visualization.active {
    display: block;
}

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

/* Line Chart Styles */
.line-chart {
    padding: 1rem 0;
}

.line-chart-container {
    width: 100%;
    max-width: 100%;
}

.line-chart-svg {
    width: 100%;
    height: auto;
    min-height: 200px;
}

/* Pie Chart Styles */
.pie-chart {
    padding: 1rem 0;
}

.pie-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.pie-chart-svg {
    width: 200px;
    height: 200px;
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.chart-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-card {
    background: var(--golden-green-light);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    color: var(--dark-red);
    font-weight: 400;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.8;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.dashboard-widget {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.widget-header {
    font-size: 0.9rem;
    color: var(--dark-red);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--golden-green-light);
    font-weight: 400;
}

.widget-stats-row {
    display: flex;
    justify-content: space-between;
}

.mini-stat {
    text-align: center;
}

.mini-value {
    display: block;
    font-size: 1.25rem;
    color: var(--dark-red);
    font-weight: 400;
}

.mini-label {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.mini-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 60px;
    gap: 4px;
}

.mini-bar {
    flex: 1;
    background: var(--golden-green);
    border-radius: 2px 2px 0 0;
}

.widget-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-list-items li {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--dark-red);
    border-bottom: 1px solid var(--golden-green-light);
}

.widget-list-items li:last-child {
    border-bottom: none;
}

.list-value {
    color: var(--golden-green);
    font-weight: 400;
}

.alert-item {
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.alert-item.warning {
    background: rgba(254, 188, 46, 0.2);
    color: var(--dark-red);
    border-left: 3px solid #febc2e;
}

.alert-item.info {
    background: var(--golden-green-light);
    color: var(--dark-red);
    border-left: 3px solid var(--golden-green);
}

/* Widgets Library */
.widgets-library {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.widget-category h4 {
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--golden-green);
}

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

.widget-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.widget-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--dark-red-light);
    border-color: var(--dark-red);
}

.widget-preview {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    background: var(--golden-green-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-info {
    flex: 1;
}

.widget-name {
    font-size: 0.95rem;
    color: var(--dark-red);
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.widget-desc {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Responsive Adjustments for Screen Gallery */
@media (max-width: 768px) {
    .screen-thumbnails {
        grid-template-columns: repeat(3, 1fr);
    }

    .query-builder-layout {
        grid-template-columns: 1fr;
    }

    .query-builder-sidebar {
        display: flex;
        gap: 1rem;
    }

    .sidebar-section {
        flex: 1;
        margin-bottom: 0;
    }

    .charts-layout {
        grid-template-columns: 1fr;
    }

    .chart-stats {
        flex-direction: row;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .widget-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .screen-thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }

    .screen-thumb-preview {
        height: 50px;
        font-size: 1.5rem;
    }

    .screen-preview-content {
        padding: 1rem;
        min-height: 300px;
    }

    .mockup-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .bar-item {
        grid-template-columns: 60px 1fr 40px;
    }

    .chart-stats {
        flex-direction: column;
    }
}

/* ==========================================================================
   Library Module Styles
   ========================================================================== */

/* Library Upload Layout */
.library-upload-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
}

.upload-form {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1.5rem;
}

.form-section h4 {
    color: var(--dark-red);
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--golden-green);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--dark-red);
    margin-bottom: 0.4rem;
    font-weight: 400;
}

.mockup-textarea {
    padding: 0.75rem;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    background: var(--pale-yellow);
    color: var(--dark-red);
    resize: vertical;
    min-height: 60px;
}

.tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--golden-green-light);
    border: 2px solid var(--golden-green);
    border-radius: 6px;
}

.tag-badge {
    background: var(--golden-green);
    color: var(--pale-yellow);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
}

/* Upload Staging Area */
.upload-staging {
    background: var(--golden-green-light);
    border: 2px dashed var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.upload-staging h4 {
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.staging-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.staging-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--pale-yellow);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--golden-green);
}

.staging-icon {
    font-size: 1.2rem;
}

.staging-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--dark-red);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.staging-size {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Documents Grid */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.document-card {
    display: flex;
    gap: 1rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.document-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--dark-red-light);
    border-color: var(--dark-red);
}

.doc-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.doc-icon.pdf {
    background: #dc3545;
    color: white;
}

.doc-icon.cad {
    background: #007bff;
    color: white;
}

.doc-icon.xls {
    background: #28a745;
    color: white;
}

.doc-icon.img {
    background: #6f42c1;
    color: white;
}

.doc-icon.doc {
    background: #0056b3;
    color: white;
}

.doc-info {
    flex: 1;
    min-width: 0;
}

.doc-name {
    font-size: 0.95rem;
    color: var(--dark-red);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-bottom: 0.2rem;
}

.doc-source {
    font-size: 0.75rem;
    color: var(--golden-green);
}

/* Pagination Bar */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--golden-green-light);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-btn {
    padding: 0.4rem 0.8rem;
    background: var(--pale-yellow);
    border: 1px solid var(--golden-green);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--dark-red);
    cursor: pointer;
}

.page-btn:hover {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.page-num {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--dark-red);
    cursor: pointer;
}

.page-num.active {
    background: var(--golden-green);
    color: var(--pale-yellow);
    border-radius: 4px;
}

.page-dots {
    color: var(--dark-red);
    opacity: 0.6;
}

/* Customer Documents Layout */
.customer-docs-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
    min-height: 350px;
}

.customer-list {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 0.5rem;
}

.customer-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.customer-item:hover {
    background: var(--golden-green-medium);
}

.customer-item.active {
    background: var(--golden-green);
}

.customer-item.active .customer-name,
.customer-item.active .customer-docs-count {
    color: var(--pale-yellow);
}

.customer-avatar {
    width: 40px;
    height: 40px;
    background: var(--dark-red);
    color: var(--pale-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
}

.customer-info {
    flex: 1;
}

.customer-name {
    font-size: 0.9rem;
    color: var(--dark-red);
    margin-bottom: 0.2rem;
}

.customer-docs-count {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.customer-documents {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--golden-green);
}

.customer-header h4 {
    color: var(--dark-red);
    font-size: 1.1rem;
}

.doc-count {
    font-size: 0.85rem;
    color: var(--golden-green);
}

/* Category Documents Layout */
.category-docs-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    min-height: 350px;
}

.category-tree {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 1rem;
}

.category-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 0.25rem;
}

.category-node:hover {
    background: var(--golden-green-medium);
}

.category-node.active {
    background: var(--golden-green);
}

.category-node.active .node-name,
.category-node.active .node-count {
    color: var(--pale-yellow);
}

.node-icon {
    font-size: 1rem;
}

.node-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.node-count {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
    background: var(--pale-yellow);
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
}

.category-node.active .node-count {
    background: var(--dark-red);
}

.category-children {
    margin-left: 1.5rem;
}

.category-documents {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.crumb {
    color: var(--golden-green);
    cursor: pointer;
}

.crumb:hover {
    text-decoration: underline;
}

.crumb.active {
    color: var(--dark-red);
    font-weight: 400;
    cursor: default;
}

.crumb.active:hover {
    text-decoration: none;
}

.separator {
    color: var(--dark-red);
    opacity: 0.5;
}

/* Category Stats */
.category-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--golden-green-light);
    border-radius: 8px;
}

.stat-item {
    text-align: center;
}

.stat-item .stat-value {
    font-size: 1.2rem;
    color: var(--dark-red);
    display: block;
}

.stat-item .stat-label {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Documents List */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.doc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--golden-green-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doc-row:hover {
    background: var(--golden-green-medium);
}

.doc-row .doc-icon {
    font-size: 1.2rem;
    width: auto;
    height: auto;
    background: none;
}

.doc-row .doc-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.doc-row .doc-date {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Folder Browser Layout */
.folder-browser-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    min-height: 350px;
}

.folder-tree {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 1rem;
}

.tree-node {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.tree-node:hover {
    background: var(--golden-green-medium);
}

.tree-node.active {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.tree-node.root {
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.tree-toggle {
    font-size: 0.7rem;
    width: 1rem;
    text-align: center;
}

.tree-icon {
    font-size: 1rem;
}

.tree-name {
    flex: 1;
}

.tree-children {
    margin-left: 0.5rem;
}

.tree-children.nested {
    margin-left: 1.5rem;
}

/* Folder Contents */
.folder-contents {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--golden-green-light);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-item:hover {
    background: var(--golden-green-medium);
    transform: translateY(-2px);
}

.folder-item .folder-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.folder-item .folder-name {
    font-size: 0.8rem;
    color: var(--dark-red);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.folder-item .folder-meta {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* Version History */
.version-history {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--golden-green);
}

.version-history h4 {
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* Library Module Responsive */
@media (max-width: 768px) {
    .library-upload-layout {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .customer-docs-layout,
    .category-docs-layout,
    .folder-browser-layout {
        grid-template-columns: 1fr;
    }

    .customer-list,
    .category-tree,
    .folder-tree {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .customer-item,
    .category-node,
    .tree-node {
        flex: 1;
        min-width: 150px;
    }

    .category-children,
    .tree-children {
        margin-left: 0;
        width: 100%;
    }

    .documents-grid {
        grid-template-columns: 1fr;
    }

    .folder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pagination-bar {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .folder-grid {
        grid-template-columns: 1fr 1fr;
    }

    .category-stats {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==========================================================================
   Quality Management Module Styles
   ========================================================================== */

/* Quality Dashboard Grid */
.quality-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.quality-stat-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.pass { background: rgba(139, 154, 70, 0.2); }
.stat-icon.checks { background: rgba(139, 154, 70, 0.15); }
.stat-icon.deviations { background: rgba(254, 188, 46, 0.2); }
.stat-icon.capa { background: rgba(139, 44, 44, 0.15); }

.stat-content .stat-value {
    font-size: 1.5rem;
    color: var(--dark-red);
    font-weight: 400;
}

.stat-content .stat-label {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Quality Charts Row */
.quality-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.quality-chart {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.quality-chart h4 {
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.trend-chart {
    padding: 0.5rem 0;
}

.chart-legend-inline {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--dark-red);
    margin-top: 0.5rem;
}

.legend-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.legend-line.green { background: var(--golden-green); }
.legend-line.red { background: var(--dark-red); }
.legend-line.dashed { background: repeating-linear-gradient(90deg, var(--dark-red) 0, var(--dark-red) 4px, transparent 4px, transparent 8px); }

/* Defect Bars */
.defect-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.defect-bar-item {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    align-items: center;
    gap: 0.5rem;
}

.defect-name {
    font-size: 0.85rem;
    color: var(--dark-red);
}

.defect-bar-track {
    height: 20px;
    background: var(--golden-green-light);
    border-radius: 4px;
    overflow: hidden;
}

.defect-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dark-red), rgba(139, 44, 44, 0.7));
    border-radius: 4px;
}

.defect-count {
    font-size: 0.85rem;
    color: var(--dark-red);
    text-align: right;
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.status-badge.pass {
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
}

.status-badge.fail {
    background: rgba(139, 44, 44, 0.2);
    color: var(--dark-red);
}

.status-badge.pending {
    background: rgba(254, 188, 46, 0.2);
    color: #b8860b;
}

/* Deviations List */
.deviations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.deviation-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.deviation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.deviation-id {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
}

.deviation-status {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.deviation-status.open {
    background: rgba(139, 44, 44, 0.2);
    color: var(--dark-red);
}

.deviation-status.investigation {
    background: rgba(254, 188, 46, 0.2);
    color: #b8860b;
}

.deviation-title {
    font-size: 1rem;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
}

.deviation-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

.deviation-details {
    background: var(--golden-green-light);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.detail-row {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.detail-label {
    color: var(--dark-red);
    opacity: 0.7;
}

.detail-value {
    color: var(--dark-red);
}

.detail-value.capa-link {
    color: var(--golden-green);
    cursor: pointer;
}

/* Workflow Steps */
.deviation-workflow {
    display: flex;
    gap: 0.25rem;
}

.workflow-step {
    flex: 1;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.7rem;
    background: var(--golden-green-light);
    color: var(--dark-red);
    opacity: 0.5;
}

.workflow-step:first-child {
    border-radius: 4px 0 0 4px;
}

.workflow-step:last-child {
    border-radius: 0 4px 4px 0;
}

.workflow-step.completed {
    background: var(--golden-green);
    color: var(--pale-yellow);
    opacity: 1;
}

.workflow-step.active {
    background: var(--dark-red);
    color: var(--pale-yellow);
    opacity: 1;
}

/* Genealogy Layout */
.genealogy-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
}

.genealogy-info {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 1rem;
}

.genealogy-info h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.batch-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.batch-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.genealogy-tree {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.genealogy-tree h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.tree-visualization {
    padding: 1rem;
}

.tree-node {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.tree-node .node-label {
    font-size: 0.85rem;
    font-weight: bold;
    display: block;
}

.tree-node .node-product {
    font-size: 0.75rem;
    opacity: 0.8;
}

.tree-node.root-batch {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.tree-node.child-batch {
    background: var(--golden-green-light);
    color: var(--dark-red);
    border: 1px solid var(--golden-green);
}

.tree-node.grandchild-batch {
    background: var(--pale-yellow);
    color: var(--dark-red);
    border: 1px solid var(--golden-green-medium);
}

.tree-branches {
    margin-left: 2rem;
    padding-left: 1rem;
    border-left: 2px solid var(--golden-green);
}

.tree-branch {
    margin: 0.5rem 0;
}

.tree-sub-branches {
    margin-left: 2rem;
    padding-left: 1rem;
    border-left: 2px dashed var(--golden-green-medium);
}

/* Templates Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.template-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.template-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    background: var(--golden-green-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-info {
    flex: 1;
}

.template-name {
    font-size: 1rem;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.template-meta {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.template-usage {
    font-size: 0.75rem;
    color: var(--golden-green);
    margin-top: 0.25rem;
}

/* Rework Layout */
.rework-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
}

.rework-queue h4,
.rework-stats h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.rework-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rework-item {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.rework-priority {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
}

.rework-item.priority-high .rework-priority {
    background: rgba(139, 44, 44, 0.2);
    color: var(--dark-red);
}

.rework-item.priority-medium .rework-priority {
    background: rgba(254, 188, 46, 0.2);
    color: #b8860b;
}

.rework-item.priority-low .rework-priority {
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
}

.rework-info {
    flex: 1;
}

.rework-batch {
    font-size: 0.95rem;
    color: var(--dark-red);
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.rework-issue {
    font-size: 0.85rem;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.rework-meta {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.rework-stats {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 1rem;
}

.rework-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rework-stat {
    text-align: center;
    padding: 0.75rem;
    background: var(--pale-yellow);
    border-radius: 8px;
}

.rework-stat-value {
    font-size: 1.5rem;
    color: var(--dark-red);
}

.rework-stat-label {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Reports Layout */
.reports-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
}

.spc-chart {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.spc-chart h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.spc-visualization {
    margin-bottom: 1rem;
}

.spc-svg {
    width: 100%;
    height: auto;
}

.spc-stats {
    display: flex;
    gap: 2rem;
    padding: 0.75rem;
    background: var(--golden-green-light);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.reports-summary {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.reports-summary h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-indicator.good {
    background: var(--golden-green);
}

.status-indicator.warning {
    background: #febc2e;
}

.status-indicator.bad {
    background: var(--dark-red);
}

/* Quality Module Responsive */
@media (max-width: 768px) {
    .quality-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quality-charts-row {
        grid-template-columns: 1fr;
    }

    .genealogy-layout,
    .rework-layout,
    .reports-layout {
        grid-template-columns: 1fr;
    }

    .templates-grid {
        grid-template-columns: 1fr;
    }

    .deviation-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

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

    .deviation-workflow {
        flex-wrap: wrap;
    }

    .workflow-step {
        flex: 1 1 30%;
    }
}

/* ==========================================================================
   BOM Module Styles
   ========================================================================== */

/* Additional Status Badges */
.status-badge.active {
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
}

.status-badge.draft {
    background: rgba(254, 188, 46, 0.2);
    color: #b8860b;
}

.status-badge.obsolete {
    background: rgba(139, 44, 44, 0.15);
    color: var(--dark-red);
    opacity: 0.7;
}

/* BOM Builder Layout */
.bom-builder-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
}

.bom-tree-panel {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 1rem;
}

.bom-tree-panel h4,
.bom-details-panel h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.bom-tree {
    font-size: 0.9rem;
}

.bom-tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0.25rem;
}

.bom-tree-node:hover {
    background: var(--golden-green-medium);
}

.bom-tree-node.level-0 {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.bom-tree-node.level-1 {
    margin-left: 1.5rem;
}

.bom-tree-node.level-2 {
    margin-left: 3rem;
}

.node-expand {
    font-size: 0.7rem;
    width: 1rem;
}

.node-icon {
    font-size: 1rem;
}

.node-name {
    flex: 1;
    color: var(--dark-red);
}

.bom-tree-node.level-0 .node-name {
    color: var(--pale-yellow);
}

.node-qty {
    font-size: 0.8rem;
    opacity: 0.8;
}

.bom-tree-children {
    border-left: 2px solid var(--golden-green);
    margin-left: 0.75rem;
    padding-left: 0.5rem;
}

.bom-details-panel {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.component-detail-card {
    background: var(--golden-green-light);
    border-radius: 8px;
    padding: 1rem;
}

.detail-header {
    font-size: 1rem;
    color: var(--dark-red);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--golden-green);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-item .detail-label {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.detail-item .detail-value {
    font-size: 0.9rem;
    color: var(--dark-red);
}

/* Cost Analysis Layout */
.cost-analysis-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
}

.cost-summary {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 1.5rem;
}

.cost-total {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--golden-green);
}

.cost-total .cost-label {
    display: block;
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.cost-total .cost-value {
    font-size: 2rem;
    color: var(--dark-red);
    font-weight: 400;
}

.cost-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cost-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border-radius: 6px;
}

.cost-category {
    flex: 1;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.cost-amount {
    font-size: 0.9rem;
    color: var(--dark-red);
    font-weight: 400;
}

.cost-percent {
    font-size: 0.75rem;
    color: var(--golden-green);
    width: 45px;
    text-align: right;
}

.cost-by-step {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.cost-by-step h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.step-costs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step-cost-item {
    display: grid;
    grid-template-columns: 180px 1fr 80px;
    align-items: center;
    gap: 1rem;
}

.step-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.step-num {
    width: 24px;
    height: 24px;
    background: var(--golden-green);
    color: var(--pale-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.step-name {
    font-size: 0.9rem;
    color: var(--dark-red);
}

.step-bar-track {
    height: 20px;
    background: var(--golden-green-light);
    border-radius: 4px;
    overflow: hidden;
}

.step-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--golden-green), rgba(139, 154, 70, 0.7));
    border-radius: 4px;
}

.step-amount {
    font-size: 0.9rem;
    color: var(--dark-red);
    text-align: right;
}

/* Where-Used Layout */
.where-used-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.component-search-result {
    background: var(--golden-green-light);
    padding: 1rem;
    border-radius: 8px;
}

.component-search-result h4 {
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.component-desc {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.usage-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.usage-item {
    display: grid;
    grid-template-columns: 1fr 150px 150px;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 8px;
}

.bom-name {
    font-size: 0.95rem;
    color: var(--dark-red);
    display: block;
}

.bom-id {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.usage-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.usage-impact {
    text-align: right;
}

.impact-label {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.7;
    display: block;
}

.impact-value {
    font-size: 1rem;
    color: var(--golden-green);
    font-weight: 400;
}

/* Kit Templates Grid */
.kit-templates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.kit-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.kit-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--golden-green-light);
}

.kit-icon {
    font-size: 1.5rem;
}

.kit-name {
    font-size: 0.95rem;
    color: var(--dark-red);
}

.kit-contents {
    margin-bottom: 1rem;
}

.kit-item {
    font-size: 0.85rem;
    color: var(--dark-red);
    padding: 0.25rem 0;
    padding-left: 1rem;
    position: relative;
}

.kit-item::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--golden-green);
}

.kit-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--golden-green-light);
}

.kit-cost {
    font-size: 1rem;
    color: var(--dark-red);
    font-weight: 400;
}

.kit-usage {
    font-size: 0.8rem;
    color: var(--golden-green);
}

/* Scrap Analysis Layout */
.scrap-analysis-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

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

.scrap-stat {
    background: var(--golden-green-light);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
}

.scrap-value {
    font-size: 2rem;
    color: var(--dark-red);
    display: block;
}

.scrap-label {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.scrap-label.improvement {
    color: var(--golden-green);
    opacity: 1;
}

.scrap-by-component h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

/* BOM History Layout */
.bom-history-layout {
    padding: 1rem;
}

.version-timeline {
    position: relative;
    padding-left: 2rem;
}

.version-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--golden-green);
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0;
    width: 18px;
    height: 18px;
    background: var(--pale-yellow);
    border: 3px solid var(--golden-green);
    border-radius: 50%;
}

.timeline-item.current .timeline-marker {
    background: var(--golden-green);
}

.timeline-content {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 8px;
    padding: 1rem;
}

.timeline-item.current .timeline-content {
    border-color: var(--dark-red);
}

.version-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.version-num {
    font-size: 1rem;
    color: var(--dark-red);
    font-weight: bold;
}

.version-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.version-badge.current {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.version-date {
    font-size: 0.85rem;
    color: var(--dark-red);
}

.version-author {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.version-changes {
    font-size: 0.85rem;
    color: var(--dark-red);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--golden-green-light);
}

/* BOM Module Responsive */
@media (max-width: 768px) {
    .bom-builder-layout,
    .cost-analysis-layout {
        grid-template-columns: 1fr;
    }

    .usage-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .usage-impact {
        text-align: left;
    }

    .kit-templates-grid {
        grid-template-columns: 1fr;
    }

    .scrap-summary {
        grid-template-columns: 1fr;
    }

    .step-cost-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .step-amount {
        text-align: left;
    }
}

/* ==========================================================================
   Material Disposition Module Styles
   ========================================================================== */

/* Disposition Stats Grid */
.disposition-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.disposition-stat {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.disposition-stat .stat-icon {
    font-size: 2rem;
}

.disposition-stat .stat-info {
    display: flex;
    flex-direction: column;
}

.disposition-stat .stat-value {
    font-size: 1.5rem;
    color: var(--dark-red);
}

.disposition-stat .stat-label {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.disposition-stat.quarantine { border-left: 4px solid #febc2e; }
.disposition-stat.released { border-left: 4px solid var(--golden-green); }
.disposition-stat.rejected { border-left: 4px solid var(--dark-red); }
.disposition-stat.disposed { border-left: 4px solid #666; }

/* Activity List */
.disposition-activity h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--golden-green-light);
    border-radius: 8px;
}

.activity-icon {
    font-size: 1.2rem;
}

.activity-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.activity-time {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.6;
}

/* Quarantine List */
.quarantine-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quarantine-item {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-left: 4px solid #febc2e;
    border-radius: 10px;
    padding: 1rem;
}

.quarantine-info {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.75rem;
}

.quarantine-batch {
    font-size: 1rem;
    color: var(--dark-red);
    font-weight: bold;
}

.quarantine-material {
    font-size: 0.95rem;
    color: var(--dark-red);
}

.quarantine-qty {
    font-size: 0.9rem;
    color: var(--golden-green);
}

.quarantine-reason {
    background: var(--golden-green-light);
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.reason-label {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.reason-text {
    font-size: 0.9rem;
    color: var(--dark-red);
}

.quarantine-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

.quarantine-actions {
    display: flex;
    gap: 0.5rem;
}

/* Release Workflow Layout */
.release-workflow-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
}

.release-form {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.release-form h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.release-details {
    background: var(--golden-green-light);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.release-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--dark-red);
    padding: 0.25rem 0;
}

.release-checklist h5 {
    color: var(--dark-red);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    font-size: 0.9rem;
    color: var(--dark-red);
    opacity: 0.6;
}

.checklist-item.checked {
    opacity: 1;
}

.checklist-item .check-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
}

.checklist-item.checked .check-icon {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.release-approval {
    background: var(--golden-green-light);
    border-radius: 10px;
    padding: 1rem;
}

.release-approval h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.approval-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.approval-step {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--pale-yellow);
    border-radius: 8px;
}

.step-indicator {
    width: 30px;
    height: 30px;
    background: var(--golden-green-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.approval-step.completed .step-indicator {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-role {
    font-size: 0.85rem;
    color: var(--dark-red);
    font-weight: 400;
}

.step-name {
    font-size: 0.9rem;
    color: var(--dark-red);
}

.step-date {
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.6;
}

/* Action Badges */
.action-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.action-badge.return {
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
}

.action-badge.dispose {
    background: rgba(139, 44, 44, 0.2);
    color: var(--dark-red);
}

/* Rejection Summary */
.rejection-summary {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--golden-green-light);
    border-radius: 8px;
    margin-top: 1rem;
}

.summary-item {
    display: flex;
    gap: 0.5rem;
}

.summary-label {
    font-size: 0.9rem;
    color: var(--dark-red);
}

.summary-value {
    font-size: 0.9rem;
    color: var(--golden-green);
    font-weight: bold;
}

/* Disposal Layout */
.disposal-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.disposal-stat-card {
    background: var(--golden-green-light);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
}

.disposal-stat-card .stat-value {
    font-size: 1.75rem;
    color: var(--dark-red);
    display: block;
}

.disposal-stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.disposal-log h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

/* Material Disposition Responsive */
@media (max-width: 768px) {
    .disposition-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .release-workflow-layout {
        grid-template-columns: 1fr;
    }

    .quarantine-info {
        flex-direction: column;
        gap: 0.25rem;
    }

    .disposal-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .disposition-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Process Execution Module Styles
   ========================================================================== */

/* Process Stats Grid */
.process-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.process-stat {
    background: var(--golden-green-light);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
}

.process-stat .stat-value {
    font-size: 2rem;
    color: var(--dark-red);
    display: block;
}

.process-stat .stat-label {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Active Processes */
.active-processes h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.process-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.process-card {
    display: grid;
    grid-template-columns: 200px 1fr 100px;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 8px;
}

.process-info {
    display: flex;
    flex-direction: column;
}

.process-job {
    font-size: 0.85rem;
    color: var(--golden-green);
}

.process-name {
    font-size: 1rem;
    color: var(--dark-red);
}

.process-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--golden-green-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--golden-green);
    border-radius: 4px;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--dark-red);
    white-space: nowrap;
}

.process-operator {
    font-size: 0.9rem;
    color: var(--dark-red);
    text-align: right;
}

/* Tracking Layout */
.tracking-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
}

.tracking-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tracking-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--golden-green-light);
    border-radius: 8px;
    opacity: 0.5;
}

.tracking-step.completed {
    opacity: 1;
    background: rgba(139, 154, 70, 0.3);
}

.tracking-step.active {
    opacity: 1;
    background: var(--golden-green);
}

.tracking-step.active .step-content span {
    color: var(--pale-yellow);
}

.step-marker {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pale-yellow);
    border-radius: 50%;
    font-size: 0.9rem;
    color: var(--golden-green);
}

.tracking-step.completed .step-marker {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.tracking-step.active .step-marker {
    background: var(--pale-yellow);
    color: var(--golden-green);
}

.step-content {
    display: flex;
    flex-direction: column;
}

.step-name {
    font-size: 0.95rem;
    color: var(--dark-red);
}

.step-time {
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.current-step-detail {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.current-step-detail h4 {
    color: var(--dark-red);
    margin-bottom: 1rem;
}

.step-details p {
    font-size: 0.9rem;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
}

/* Recipes Grid */
.recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.recipe-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 1rem;
}

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.recipe-name {
    font-size: 1rem;
    color: var(--dark-red);
}

.recipe-version {
    font-size: 0.8rem;
    color: var(--golden-green);
    background: var(--golden-green-light);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.recipe-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.recipe-usage {
    font-size: 0.8rem;
    color: var(--golden-green);
}

/* Priority Badges */
.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.priority-badge.high {
    background: rgba(139, 44, 44, 0.2);
    color: var(--dark-red);
}

.priority-badge.medium {
    background: rgba(254, 188, 46, 0.2);
    color: #b8860b;
}

.priority-badge.low {
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
}

/* History Stats */
.history-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.history-stat {
    background: var(--golden-green-light);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
}

.history-stat .stat-value {
    font-size: 1.75rem;
    color: var(--dark-red);
    display: block;
}

.history-stat .stat-label {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Process Module Responsive */
@media (max-width: 768px) {
    .process-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-card {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .process-operator {
        text-align: left;
    }

    .tracking-layout {
        grid-template-columns: 1fr;
    }

    .recipes-grid {
        grid-template-columns: 1fr;
    }

    .history-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .process-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Tab-Based Mockup Styles (Material Disposition, BOM, Process Execution)
   ========================================================================== */

/* Mockup Tab Bar */
.mockup-tab-bar {
    display: flex;
    background: var(--golden-green);
    border-bottom: 2px solid var(--golden-green);
}

.mockup-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    text-align: center;
    color: var(--pale-yellow);
    opacity: 0.7;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.mockup-tab.active {
    opacity: 1;
    border-bottom-color: var(--pale-yellow);
    font-weight: bold;
}

.mockup-tab .tab-badge {
    background: rgba(255, 248, 220, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* Mockup Menu Icon */
.mockup-menu-icon {
    font-size: 1.5rem;
    color: var(--dark-red);
    cursor: pointer;
    padding: 0 0.5rem;
}

/* Mockup Filter Bar */
.mockup-filter-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--golden-green-light);
    border-bottom: 1px solid var(--golden-green);
}

.mockup-select-small {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--golden-green);
    border-radius: 4px;
    font-size: 0.85rem;
    background: var(--pale-yellow);
}

/* Mockup FAB (Floating Action Button) - Hidden */
.mockup-fab {
    display: none;
}

/* Mockup Back Buttons - Hidden */
.mockup-back-btn,
.mockup-back,
.back-btn {
    display: none;
}

/* Material Disposition - Job Cards */
.disposition-jobs-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 350px;
    overflow-y: auto;
}

.disposition-job-card {
    background: var(--pale-yellow);
    border: 1px solid var(--golden-green);
    border-radius: 8px;
    overflow: hidden;
}

.disposition-job-card.expanded {
    border-width: 2px;
}

.job-card-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    background: rgba(139, 154, 70, 0.05);
    cursor: pointer;
}

.job-expand-icon {
    color: var(--golden-green);
    font-size: 0.9rem;
}

.job-card-info {
    flex: 1;
}

.job-id {
    font-weight: bold;
    color: var(--dark-red);
    font-size: 0.95rem;
}

.job-desc {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.8;
}

.job-customer {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.job-card-stats {
    text-align: right;
}

.items-badge {
    background: rgba(139, 154, 70, 0.1);
    color: var(--golden-green);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
}

.completed-count {
    display: block;
    font-size: 0.75rem;
    color: var(--golden-green);
    margin-top: 0.25rem;
}

/* Disposition Groups */
.disposition-groups {
    border-top: 1px solid var(--golden-green-light);
}

.disposition-group {
    border-bottom: 1px solid var(--golden-green-light);
}

.disposition-group:last-child {
    border-bottom: none;
}

.group-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    background: rgba(139, 154, 70, 0.03);
    font-size: 0.85rem;
    cursor: pointer;
}

.group-expand {
    color: var(--golden-green);
    margin-right: 0.5rem;
    font-size: 0.8rem;
}

.group-type {
    flex: 1;
    font-weight: 500;
    color: var(--dark-red);
}

.group-count {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.group-batches {
    padding: 0.25rem 0;
}

.batch-item {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    gap: 0.5rem;
}

.batch-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.3rem;
}

.batch-indicator.pending {
    background: #888;
}

.batch-indicator.partial {
    background: #f0ad4e;
}

.batch-indicator.completed {
    background: var(--golden-green);
}

.batch-info {
    flex: 1;
}

.batch-id {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dark-red);
}

.batch-time {
    font-size: 0.75rem;
    color: #888;
    margin-left: 0.5rem;
}

.batch-qty {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.batch-operator {
    font-size: 0.75rem;
    color: #888;
}

/* Material History List */
.material-history-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--pale-yellow);
    border: 1px solid var(--golden-green-light);
    border-radius: 8px;
}

.history-icon {
    font-size: 1.5rem;
}

.history-details {
    flex: 1;
}

.history-title {
    font-weight: bold;
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--golden-green);
    margin-bottom: 0.25rem;
}

.history-reason {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

/* Shipping Stats */
.shipping-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: var(--golden-green-light);
}

.shipping-stat {
    text-align: center;
}

.shipping-stat .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dark-red);
}

.shipping-stat .stat-label {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.status-badge.shipped {
    background: rgba(139, 154, 70, 0.1);
    color: var(--golden-green);
}

/* Material Release Form Preview */
.release-description {
    padding: 0.75rem;
    background: var(--golden-green-light);
    font-size: 0.9rem;
    color: var(--dark-red);
}

.release-form-preview {
    padding: 1rem;
}

.form-section {
    margin-bottom: 1rem;
}

.form-section h4 {
    color: var(--dark-red);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.material-select-card,
.job-select-card {
    padding: 0.75rem;
    border: 2px solid var(--golden-green-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.material-select-card.selected,
.job-select-card.selected {
    border-color: var(--golden-green);
    background: rgba(139, 154, 70, 0.05);
}

.material-icon {
    font-size: 1.5rem;
}

.material-name,
.job-select-id {
    font-weight: bold;
    color: var(--dark-red);
}

.material-stock,
.job-select-desc,
.job-select-need {
    font-size: 0.85rem;
    color: var(--golden-green);
}

.qty-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qty-unit {
    color: var(--golden-green);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* BOM Cards List */
.bom-cards-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
}

.bom-card {
    background: var(--pale-yellow);
    border: 1px solid var(--golden-green-light);
    border-radius: 8px;
    padding: 0.75rem;
}

.bom-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bom-name {
    font-weight: bold;
    color: var(--dark-red);
}

.bom-card-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.bom-job {
    color: var(--golden-green);
}

.bom-cost {
    font-weight: bold;
    color: var(--dark-red);
}

.bom-card-desc {
    font-size: 0.8rem;
    color: #666;
}

/* Process Cards List */
.process-cards-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 350px;
    overflow-y: auto;
}

.process-card-item {
    background: var(--pale-yellow);
    border: 1px solid var(--golden-green-light);
    border-radius: 8px;
    overflow: hidden;
}

.process-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.05);
}

.process-id-info {
    flex: 1;
}

.process-job-id {
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.process-desc {
    font-size: 0.85rem;
    color: var(--dark-red);
    opacity: 0.8;
}

.status-badge.running {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.status-badge.paused {
    background: #f0ad4e;
    color: white;
}

.process-card-body {
    padding: 0.75rem;
}

.process-customer {
    font-size: 0.85rem;
    color: var(--golden-green);
    margin-bottom: 0.5rem;
}

.process-step-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.current-step {
    color: var(--dark-red);
}

.step-machine {
    color: var(--golden-green);
}

.process-progress-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progress-track {
    flex: 1;
    height: 8px;
    background: var(--golden-green-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-track .progress-fill {
    height: 100%;
    background: var(--golden-green);
    border-radius: 4px;
}

.progress-parts {
    font-size: 0.8rem;
    color: var(--golden-green);
    white-space: nowrap;
}

.process-card-footer {
    padding: 0.5rem 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    border-top: 1px solid var(--golden-green-light);
}

.user-can-work {
    font-size: 0.8rem;
    color: var(--golden-green);
    font-weight: 500;
}

/* Process Control Layout */
.process-control-layout {
    padding: 1rem;
}

.control-job-info {
    margin-bottom: 1rem;
}

.control-job-info h4 {
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.control-job-info p {
    font-size: 0.9rem;
    color: var(--golden-green);
    margin: 0;
}

.control-step-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--golden-green-light);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.step-indicator-large {
    text-align: left;
}

.step-number {
    display: block;
    font-size: 0.85rem;
    color: var(--golden-green);
}

.step-name-large {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--dark-red);
}

.step-progress-circle {
    text-align: center;
}

.parts-done {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--golden-green);
}

.parts-total {
    font-size: 1rem;
    color: var(--dark-red);
}

.control-steps-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.timeline-step {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--golden-green-light);
    border-radius: 4px;
    color: var(--dark-red);
}

.timeline-step.completed {
    background: rgba(139, 154, 70, 0.2);
}

.timeline-step.active {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.timeline-step.pending {
    opacity: 0.5;
}

.step-dot {
    font-size: 0.8rem;
}

.control-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mockup-btn-primary.large {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* ==========================================================================
   Job Management Module Styles
   ========================================================================== */

/* Job Cards List */
.job-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    max-height: calc(100% - 140px);
    overflow-y: auto;
}

.job-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    overflow: hidden;
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    border-bottom: 1px solid var(--golden-green-light);
}

.job-number {
    font-family: Georgia, serif;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
}

.status-badge.in-progress {
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
}

.job-card-body {
    padding: 0.75rem;
}

.job-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.job-customer {
    font-size: 0.85rem;
    color: var(--golden-green);
    margin-bottom: 0.5rem;
}

.job-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.job-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar-mini {
    flex: 1;
    height: 6px;
    background: var(--golden-green-light);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-mini .progress-fill {
    height: 100%;
    background: var(--golden-green);
    border-radius: 3px;
}

.progress-text {
    font-size: 0.75rem;
    color: var(--golden-green);
    white-space: nowrap;
}

/* Document Management Grouped Layout */
.documents-grouped-layout {
    padding: 0.75rem;
}

.doc-group {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.doc-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    cursor: pointer;
}

.group-icon {
    font-size: 1.25rem;
}

.group-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--dark-red);
}

.group-count {
    font-size: 0.8rem;
    color: var(--golden-green);
    background: var(--golden-green-light);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.doc-items {
    padding: 0.5rem;
}

.doc-items.collapsed {
    display: none;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--golden-green-light);
}

.doc-item:last-child {
    border-bottom: none;
}

.doc-icon {
    font-size: 1.25rem;
}

.doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.doc-name {
    font-size: 0.9rem;
    color: var(--dark-red);
}

.doc-date {
    font-size: 0.75rem;
    color: var(--golden-green);
}

/* Job History List */
.history-filter-bar {
    padding: 0.5rem 0.75rem;
    background: var(--golden-green-light);
}

.history-filter-select {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    background: var(--pale-yellow);
    color: var(--dark-red);
    font-family: Georgia, serif;
}

.job-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
}

.history-item {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 0.75rem;
}

.history-job-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.history-job-number {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--golden-green);
}

.history-job-title {
    font-size: 0.95rem;
    color: var(--dark-red);
}

.history-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.history-stats {
    display: flex;
    gap: 1rem;
}

.history-stats .stat {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    background: rgba(139, 154, 70, 0.15);
    color: var(--golden-green);
    border-radius: 4px;
}

/* Procedure Templates List */
.templates-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
}

.template-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 0.75rem;
}

.template-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.template-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: rgba(139, 154, 70, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-info {
    flex: 1;
}

.template-name {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.template-steps {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.template-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--dark-red);
    opacity: 0.7;
    padding-left: 55px;
}

/* ==========================================================================
   Department Management Module Styles
   ========================================================================== */

/* Department Search Bar */
.dept-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin: 0.5rem 0.75rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 8px;
}

.dept-search-bar .search-icon {
    font-size: 1rem;
}

.dept-search-bar .search-placeholder {
    font-size: 0.9rem;
    color: var(--golden-green);
    opacity: 0.7;
}

/* Department Cards List */
.dept-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    max-height: calc(100% - 100px);
    overflow-y: auto;
}

.dept-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 12px;
    overflow: hidden;
}

.dept-card.expanded {
    border-color: var(--dark-red);
}

.dept-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
}

.dept-icon-container {
    width: 40px;
    height: 40px;
    background: rgba(139, 154, 70, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dept-building-icon {
    font-size: 1.25rem;
}

.dept-header-info {
    flex: 1;
}

.dept-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.dept-quick-stats {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--golden-green);
    margin-top: 0.25rem;
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.expand-icon {
    font-size: 0.8rem;
    color: var(--golden-green);
}

/* Department Card Body (expanded) */
.dept-card-body {
    padding: 0 0.75rem 0.75rem;
    border-top: 1px solid var(--golden-green-light);
}

.dept-description {
    font-size: 0.85rem;
    color: var(--dark-red);
    margin: 0.75rem 0;
    line-height: 1.4;
}

.dept-details-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.detail-icon {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.detail-label {
    color: var(--golden-green);
}

.detail-value {
    color: var(--dark-red);
    font-weight: 500;
}

/* Department Metrics */
.dept-metrics {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.metric-item {
    flex: 1;
    background: rgba(139, 154, 70, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
    text-align: center;
}

.metric-label {
    font-size: 0.7rem;
    color: var(--golden-green);
    display: block;
}

.metric-value {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
}

/* Department Actions */
.dept-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.mockup-btn-outline {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    color: var(--golden-green);
    font-family: Georgia, serif;
    font-size: 0.85rem;
    cursor: pointer;
}

.mockup-btn-outline.danger {
    border-color: var(--dark-red);
    color: var(--dark-red);
}

/* Department Detail Form */
.dept-detail-form {
    padding: 0.75rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    font-size: 0.85rem;
    color: var(--golden-green);
    display: block;
    margin-bottom: 0.25rem;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    background: var(--pale-yellow);
    color: var(--dark-red);
    font-family: Georgia, serif;
    font-size: 0.9rem;
}

.form-textarea {
    min-height: 60px;
    resize: none;
}

.form-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    background: var(--pale-yellow);
    color: var(--dark-red);
    font-size: 0.9rem;
}

.select-arrow {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.form-section {
    margin: 1rem 0;
}

.section-title {
    font-size: 0.9rem;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
}

.assigned-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.user-chip,
.machine-chip {
    padding: 0.35rem 0.6rem;
    background: rgba(139, 154, 70, 0.15);
    border-radius: 15px;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Reporting Hierarchy View */
.hierarchy-tree-view {
    padding: 0.75rem;
}

.hierarchy-head-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.head-avatar {
    width: 40px;
    height: 40px;
    background: var(--golden-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pale-yellow);
    font-weight: bold;
    font-size: 0.9rem;
}

.head-info {
    flex: 1;
}

.head-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.head-role {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.head-badge {
    padding: 0.25rem 0.6rem;
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
}

/* Hierarchy Tree */
.hierarchy-tree {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 1px solid var(--golden-green-light);
    border-radius: 8px;
}

.tree-node.level-1 {
    margin-left: 1.5rem;
}

.tree-connector {
    color: var(--golden-green);
    font-size: 0.9rem;
}

.node-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

.node-avatar.manager { background: var(--golden-green); }
.node-avatar.engineer { background: #4A90D9; }
.node-avatar.operator { background: #5CB85C; }
.node-avatar.unassigned { background: #ccc; }

.node-info {
    flex: 1;
}

.node-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-red);
    display: block;
}

.node-role {
    font-size: 0.75rem;
    color: var(--golden-green);
}

.reports-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: rgba(139, 154, 70, 0.15);
    color: var(--golden-green);
    border-radius: 10px;
}

/* Unassigned Users Section */
.unassigned-section {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    border-radius: 10px;
}

.section-header {
    font-size: 0.9rem;
    color: var(--dark-red);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.unassigned-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.unassigned-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border-radius: 6px;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.7rem;
    font-weight: bold;
}

.user-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.warning-icon {
    font-size: 0.9rem;
}

/* ==========================================================================
   Job Management - Edit Job, Procedure Builder, Step Editor Styles
   ========================================================================== */

/* Edit Job Form */
.job-edit-form {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(100% - 50px);
    overflow-y: auto;
}

.form-section-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 0.75rem;
}

.form-section-card .section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--golden-green-light);
}

.form-section-card .section-icon {
    font-size: 1rem;
}

.form-section-card .section-title {
    flex: 1;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
}

.form-section-card .add-btn,
.form-section-card .view-btn {
    font-size: 0.75rem;
    color: var(--golden-green);
    cursor: pointer;
}

.form-row {
    display: flex;
    gap: 0.5rem;
}

.form-group.half {
    flex: 1;
}

.form-input.date-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-icon {
    font-size: 0.9rem;
}

/* Priority Selector */
.priority-selector {
    display: flex;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    overflow: hidden;
}

.priority-option {
    flex: 1;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--dark-red);
    background: var(--pale-yellow);
    cursor: pointer;
    border-right: 1px solid var(--golden-green-light);
}

.priority-option:last-child {
    border-right: none;
}

.priority-option.active {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

/* Status Dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.in-progress { background: var(--golden-green); }
.status-dot.pending { background: #FFA500; }
.status-dot.completed { background: #5CB85C; }

/* Assignment Toggle */
.assignment-toggle {
    display: flex;
    background: var(--golden-green-light);
    border-radius: 6px;
    padding: 2px;
    margin-bottom: 0.75rem;
}

.toggle-option {
    flex: 1;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--dark-red);
    border-radius: 4px;
    cursor: pointer;
}

.toggle-option.active {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

/* Chip Selection */
.chip-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selection-chip {
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--golden-green);
    border-radius: 15px;
    font-size: 0.8rem;
    color: var(--dark-red);
    cursor: pointer;
}

.selection-chip.selected {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

/* Material List Compact */
.material-list-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.material-item-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 6px;
}

.material-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.material-qty {
    font-size: 0.8rem;
    color: var(--golden-green);
}

.material-source {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.material-source.inventory {
    background: rgba(139, 154, 70, 0.2);
    color: var(--golden-green);
}

/* Procedure Summary */
.procedure-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 6px;
}

.procedure-name {
    font-size: 0.9rem;
    color: var(--dark-red);
}

.procedure-steps {
    font-size: 0.8rem;
    color: var(--golden-green);
}

/* Procedure Builder */
.procedure-info-bar {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--golden-green-light);
    font-size: 0.85rem;
}

.procedure-job {
    font-weight: bold;
    color: var(--dark-red);
}

.procedure-total {
    color: var(--golden-green);
}

.procedure-steps-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    max-height: calc(100% - 100px);
    overflow-y: auto;
}

.procedure-step-card {
    display: flex;
    align-items: stretch;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    overflow: hidden;
}

.step-number {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--golden-green);
    color: var(--pale-yellow);
    font-weight: bold;
    font-size: 0.9rem;
}

.step-content {
    flex: 1;
    padding: 0.5rem;
}

.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.step-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
}

.step-time {
    font-size: 0.75rem;
    color: var(--golden-green);
    background: rgba(139, 154, 70, 0.15);
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.step-details {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--dark-red);
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.step-materials,
.step-quality {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.material-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(139, 44, 44, 0.1);
    color: var(--dark-red);
    border-radius: 8px;
}

.quality-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(92, 184, 92, 0.2);
    color: #5CB85C;
    border-radius: 8px;
}

.step-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.05);
    border-left: 1px solid var(--golden-green-light);
}

.action-icon {
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.7;
}

.action-icon:hover {
    opacity: 1;
}

.action-icon.drag {
    color: var(--golden-green);
    cursor: grab;
}

/* Step Editor Form */
.step-edit-form {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(100% - 50px);
    overflow-y: auto;
}

.form-section-card.collapsible .section-header {
    cursor: pointer;
}

.form-section-card.collapsible .section-content {
    display: none;
}

.form-section-card.collapsible.expanded .section-content {
    display: block;
}

.collapse-icon {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.badge-count {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background: var(--golden-green);
    color: var(--pale-yellow);
    border-radius: 10px;
    margin-left: auto;
    margin-right: 0.5rem;
}

/* Time Inputs */
.time-inputs-row {
    display: flex;
    gap: 0.5rem;
}

.time-input-group {
    flex: 1;
    text-align: center;
}

.time-input-group label {
    font-size: 0.75rem;
    color: var(--golden-green);
    display: block;
    margin-bottom: 0.25rem;
}

.time-input {
    padding: 0.4rem;
    border: 2px solid var(--golden-green);
    border-radius: 6px;
    background: var(--pale-yellow);
    color: var(--dark-red);
    font-size: 0.85rem;
    text-align: center;
}

/* Assignee Chips */
.assignee-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.assignee-chip {
    padding: 0.35rem 0.6rem;
    border: 2px solid var(--golden-green);
    border-radius: 15px;
    font-size: 0.8rem;
    color: var(--dark-red);
    cursor: pointer;
}

.assignee-chip.selected {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

.add-assignee {
    padding: 0.35rem 0.6rem;
    border: 2px dashed var(--golden-green);
    border-radius: 15px;
    font-size: 0.8rem;
    color: var(--golden-green);
    cursor: pointer;
}

/* ==========================================================================
   User Management Module Styles
   ========================================================================== */

/* User Cards List */
.user-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    max-height: calc(100% - 90px);
    overflow-y: auto;
}

.user-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    overflow: hidden;
}

.user-card.expanded {
    border-color: var(--dark-red);
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
}

.user-avatar-large {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--golden-green);
    color: var(--pale-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.user-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user-fullname {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--dark-red);
}

.user-role {
    font-size: 0.75rem;
    color: var(--golden-green);
}

.user-email {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.status-badge.on-leave {
    background: rgba(255, 165, 0, 0.2);
    color: #FFA500;
}

.user-card-body {
    padding: 0.5rem;
    border-top: 1px solid var(--golden-green-light);
}

.user-details-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.user-quick-stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.quick-stat-item {
    flex: 1;
    text-align: center;
    padding: 0.35rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 6px;
}

.quick-stat-item .stat-value {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.quick-stat-item .stat-label {
    font-size: 0.65rem;
    color: var(--golden-green);
}

.user-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Leave Management Styles */
.leave-types-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.leave-type-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
}

.leave-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.leave-type-info {
    flex: 1;
}

.leave-type-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.leave-type-days {
    font-size: 0.75rem;
    color: var(--golden-green);
}

.leave-type-status {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(92, 184, 92, 0.2);
    color: #5CB85C;
}

/* Holiday Management Styles */
.holiday-list-content {
    padding: 0.5rem;
}

.holiday-year-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.year-nav {
    padding: 0.25rem 0.5rem;
    background: var(--golden-green);
    color: var(--pale-yellow);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.year-display {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
}

.holiday-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.holiday-date {
    width: 45px;
    text-align: center;
    padding: 0.35rem;
    background: var(--golden-green);
    border-radius: 6px;
}

.holiday-day {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--pale-yellow);
    display: block;
}

.holiday-month {
    font-size: 0.65rem;
    color: var(--pale-yellow);
    text-transform: uppercase;
}

.holiday-info {
    flex: 1;
}

.holiday-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.holiday-type {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.holiday-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.holiday-badge.mandatory {
    background: rgba(139, 44, 44, 0.15);
    color: var(--dark-red);
}

.holiday-badge.optional {
    background: rgba(139, 154, 70, 0.15);
    color: var(--golden-green);
}

/* Expense/Reimbursement Styles */
.expense-types-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.expense-type-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
}

.expense-type-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.expense-type-info {
    flex: 1;
}

.expense-type-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.expense-type-limit {
    font-size: 0.75rem;
    color: var(--golden-green);
}

.expense-type-status {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(92, 184, 92, 0.2);
    color: #5CB85C;
}

/* Asset Management Styles */
.asset-types-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.asset-type-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
}

.asset-type-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.asset-type-info {
    flex: 1;
}

.asset-type-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.asset-type-count {
    font-size: 0.75rem;
    color: var(--golden-green);
}

.asset-type-assigned {
    font-size: 0.75rem;
    color: var(--dark-red);
    background: rgba(139, 154, 70, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

/* Travel Management Styles */
.travel-requests-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.travel-request-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    overflow: hidden;
}

.travel-request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
}

.travel-destination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
}

.travel-arrow {
    color: var(--golden-green);
}

.travel-request-body {
    padding: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--dark-red);
}

/* Training Management Styles */
.training-catalog-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.training-course-card {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
}

.course-thumbnail {
    width: 45px;
    height: 45px;
    background: rgba(139, 154, 70, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.course-info {
    flex: 1;
}

.course-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.course-duration,
.course-instructor {
    font-size: 0.7rem;
    color: var(--golden-green);
    display: block;
}

.course-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.7rem;
}

.course-enrolled {
    color: var(--dark-red);
}

.course-rating {
    color: var(--golden-green);
}

/* Self Service Styles */
.mockup-tab-bar.scrollable {
    overflow-x: auto;
    flex-wrap: nowrap;
}

.mockup-tab-bar.scrollable .mockup-tab {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.self-service-profile-content {
    padding: 0.5rem;
}

.profile-header-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.profile-avatar-large {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--golden-green);
    color: var(--pale-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.profile-name-info {
    flex: 1;
}

.profile-fullname {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.profile-title,
.profile-department {
    font-size: 0.75rem;
    color: var(--golden-green);
    display: block;
}

.mockup-btn-outline.small {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

.profile-section-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.profile-section-card .section-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--golden-green-light);
}

.profile-field {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.8rem;
}

.field-label {
    color: var(--golden-green);
}

.field-value {
    color: var(--dark-red);
}

/* Workflow List Styles */
.workflow-list-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.workflow-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
}

.workflow-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.workflow-info {
    flex: 1;
}

.workflow-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.workflow-steps {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.workflow-status {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(92, 184, 92, 0.2);
    color: #5CB85C;
}

/* History Timeline */
.history-timeline {
    padding: 0.5rem;
}

.timeline-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-left: 2px solid var(--golden-green);
    margin-left: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.timeline-dot {
    position: absolute;
    left: -6px;
    top: 0.75rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--golden-green);
}

.timeline-content {
    flex: 1;
}

.timeline-action {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.timeline-details {
    font-size: 0.75rem;
    color: var(--golden-green);
    display: block;
}

.timeline-date {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.6;
}

/* Onboarding Styles */
.onboarding-stats-bar {
    display: flex;
    justify-content: space-around;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
}

.onboard-stat {
    text-align: center;
}

.onboard-stat .stat-number {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.onboard-stat .stat-label {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.onboarding-list {
    padding: 0.5rem;
}

.onboarding-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.onboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--golden-green);
    color: var(--pale-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.onboard-info {
    flex: 1;
}

.onboard-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.onboard-role,
.onboard-start {
    font-size: 0.7rem;
    color: var(--golden-green);
    display: block;
}

.onboard-progress {
    text-align: center;
}

.progress-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--golden-green);
    color: var(--pale-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}

.progress-label {
    font-size: 0.65rem;
    color: var(--golden-green);
}

/* Offboarding Styles */
.offboarding-list {
    padding: 0.5rem;
}

.offboarding-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
}

.offboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dark-red);
    color: var(--pale-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.offboard-info {
    flex: 1;
}

.offboard-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.offboard-role,
.offboard-lastday {
    font-size: 0.7rem;
    color: var(--golden-green);
    display: block;
}

.offboard-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.checklist-item {
    font-size: 0.7rem;
}

.checklist-item.done {
    color: #5CB85C;
}

.checklist-item.pending {
    color: var(--golden-green);
}

/* Skills Styles */
.skills-categories {
    padding: 0.5rem;
}

.skill-category-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.category-icon {
    font-size: 1.25rem;
}

.category-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
}

.category-count {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.skill-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: rgba(139, 154, 70, 0.15);
    color: var(--dark-red);
    border-radius: 10px;
}

.skill-tag.more {
    background: var(--golden-green);
    color: var(--pale-yellow);
}

/* Certifications Styles */
.certifications-list {
    padding: 0.5rem;
}

.certification-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.cert-icon {
    font-size: 1.5rem;
}

.cert-info {
    flex: 1;
}

.cert-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.cert-issuer,
.cert-validity {
    font-size: 0.7rem;
    color: var(--golden-green);
    display: block;
}

.cert-holders {
    font-size: 0.7rem;
    color: var(--dark-red);
    background: rgba(139, 154, 70, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

/* Performance Styles */
.performance-overview {
    padding: 0.5rem;
}

.perf-cycle-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.cycle-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
}

.cycle-status {
    font-size: 0.7rem;
    color: var(--golden-green);
    float: right;
}

.cycle-progress-bar {
    height: 8px;
    background: var(--golden-green-light);
    border-radius: 4px;
    margin: 0.5rem 0;
    overflow: hidden;
}

.cycle-fill {
    height: 100%;
    background: var(--golden-green);
    border-radius: 4px;
}

.cycle-stats {
    font-size: 0.75rem;
    color: var(--golden-green);
}

.perf-metrics {
    display: flex;
    gap: 0.5rem;
}

.metric-card {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 8px;
}

.metric-card .metric-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.metric-card .metric-label {
    font-size: 0.65rem;
    color: var(--golden-green);
}

/* Attendance Styles */
.attendance-summary {
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
}

.attendance-date {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    text-align: center;
    margin-bottom: 0.5rem;
}

.attendance-stats-row {
    display: flex;
    justify-content: space-around;
}

.att-stat {
    text-align: center;
    padding: 0.35rem;
}

.att-stat .att-count {
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
}

.att-stat .att-label {
    font-size: 0.65rem;
}

.att-stat.present .att-count { color: #5CB85C; }
.att-stat.absent .att-count { color: #D9534F; }
.att-stat.late .att-count { color: #FFA500; }
.att-stat.leave .att-count { color: #5BC0DE; }

.attendance-list {
    padding: 0.5rem;
}

.attendance-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border-bottom: 1px solid var(--golden-green-light);
}

.att-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--golden-green);
    color: var(--pale-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.att-info {
    flex: 1;
}

.att-name {
    font-size: 0.85rem;
    color: var(--dark-red);
    display: block;
}

.att-time {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.att-status {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.att-status.present {
    background: rgba(92, 184, 92, 0.2);
    color: #5CB85C;
}

.att-status.on-leave {
    background: rgba(91, 192, 222, 0.2);
    color: #5BC0DE;
}

/* Analytics Dashboard */
.analytics-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem;
}

.analytics-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    padding: 0.5rem;
    text-align: center;
}

.analytics-title {
    font-size: 0.75rem;
    color: var(--golden-green);
    display: block;
    margin-bottom: 0.25rem;
}

.mini-chart {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.analytics-value {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-red);
}

/* Organization Chart */
.org-chart-view {
    padding: 0.5rem;
    text-align: center;
}

.org-node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin: 0.25rem;
}

.org-node.ceo {
    border-color: var(--dark-red);
}

.org-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--golden-green);
    color: var(--pale-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.org-name {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--dark-red);
}

.org-title {
    font-size: 0.65rem;
    color: var(--golden-green);
}

.org-level {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Pending Approvals */
.pending-summary {
    padding: 0.5rem;
    background: rgba(255, 165, 0, 0.1);
    text-align: center;
}

.pending-count {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
}

.pending-list {
    padding: 0.5rem;
}

.pending-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.pending-icon {
    font-size: 1.25rem;
}

.pending-info {
    flex: 1;
}

.pending-type {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.pending-from,
.pending-details {
    font-size: 0.7rem;
    color: var(--golden-green);
    display: block;
}

.pending-actions {
    display: flex;
    gap: 0.25rem;
}

.btn-approve,
.btn-reject {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-approve {
    background: #5CB85C;
    color: white;
}

.btn-reject {
    background: #D9534F;
    color: white;
}

/* My Requests */
.my-requests-filter {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-x: auto;
}

.my-requests-list {
    padding: 0.5rem;
}

.request-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border-bottom: 1px solid var(--golden-green-light);
}

.request-icon {
    font-size: 1.25rem;
}

.request-info {
    flex: 1;
}

.request-type {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.request-dates {
    font-size: 0.7rem;
    color: var(--golden-green);
}

/* Delegations */
.delegations-info {
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
}

.delegation-desc {
    font-size: 0.8rem;
    color: var(--dark-red);
    text-align: center;
    margin: 0;
}

.delegation-list {
    padding: 0.5rem;
}

.delegation-card {
    background: var(--pale-yellow);
    border: 2px solid var(--golden-green);
    border-radius: 10px;
    overflow: hidden;
}

.delegation-card.active-delegation {
    border-color: #5CB85C;
}

.delegation-header {
    padding: 0.5rem;
    background: rgba(92, 184, 92, 0.1);
}

.delegation-status {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(92, 184, 92, 0.2);
    color: #5CB85C;
}

.delegation-body {
    padding: 0.5rem;
}

.delegate-to,
.delegate-period,
.delegate-types {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
}

.delegate-to .label,
.delegate-period .label,
.delegate-types .label {
    color: var(--golden-green);
}

.delegate-to .value,
.delegate-period .value {
    color: var(--dark-red);
    font-weight: 500;
}

.delegation-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(139, 154, 70, 0.15);
    color: var(--dark-red);
    border-radius: 8px;
    margin-left: 0.25rem;
}

/* Deleted Users */
.deleted-users-info {
    padding: 0.5rem;
    background: rgba(217, 83, 79, 0.1);
}

.deleted-desc {
    font-size: 0.8rem;
    color: var(--dark-red);
    text-align: center;
    margin: 0;
}

.deleted-users-list {
    padding: 0.5rem;
}

.deleted-user-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--pale-yellow);
    border: 2px solid var(--dark-red);
    border-radius: 10px;
}

.deleted-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.deleted-info {
    flex: 1;
}

.deleted-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--dark-red);
    display: block;
}

.deleted-role,
.deleted-date {
    font-size: 0.7rem;
    color: var(--golden-green);
    display: block;
}

.deleted-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mockup-btn-outline.small.danger {
    border-color: var(--dark-red);
    color: var(--dark-red);
}

/* ==========================================================================
   Machine Management Mockup Styles
   ========================================================================== */

/* Machine List Styles */
.machine-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.machine-card {
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(139, 44, 44, 0.1);
    overflow: hidden;
}

.machine-card.expandable .machine-card-expanded {
    display: block;
}

.machine-card-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    cursor: pointer;
}

.machine-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.machine-status-indicator.online {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

.machine-status-indicator.offline {
    background: #9E9E9E;
}

.machine-status-indicator.maintenance {
    background: #FF9800;
}

.machine-info {
    flex: 1;
    min-width: 0;
}

.machine-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.machine-type {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.machine-oee {
    text-align: right;
}

.oee-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--golden-green);
}

.oee-label {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.expand-icon {
    color: var(--dark-red);
    opacity: 0.5;
    font-size: 0.7rem;
}

.machine-card-expanded {
    display: none;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.03);
    border-top: 1px solid rgba(139, 44, 44, 0.1);
}

.machine-stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 0.75rem;
}

.machine-stat {
    text-align: center;
}

.machine-stat .stat-label {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.machine-stat .stat-value {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--golden-green);
}

.machine-actions-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-chip {
    padding: 0.25rem 0.5rem;
    background: rgba(139, 154, 70, 0.1);
    border: 1px solid var(--golden-green);
    border-radius: 12px;
    font-size: 0.65rem;
    color: var(--dark-red);
    cursor: pointer;
}

/* OEE Analytics Styles */
.oee-main-card {
    background: linear-gradient(135deg, var(--golden-green), rgba(139, 154, 70, 0.8));
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    color: white;
    margin-bottom: 1rem;
}

.oee-title {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.oee-circular {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

.oee-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 4px solid white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.oee-percentage {
    font-size: 1.2rem;
    font-weight: 700;
}

.oee-trend {
    font-size: 0.65rem;
    color: #90EE90;
}

.oee-status {
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: inline-block;
}

.oee-status.good {
    background: rgba(76, 175, 80, 0.3);
}

.oee-components {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.oee-component-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 3px solid var(--golden-green);
}

.oee-component-card.availability {
    border-left-color: #2196F3;
}

.oee-component-card.performance {
    border-left-color: #FF9800;
}

.oee-component-card.quality {
    border-left-color: #4CAF50;
}

.component-icon {
    font-size: 1.2rem;
}

.component-info {
    flex: 1;
}

.component-label {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.component-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.component-bar {
    height: 4px;
    background: rgba(139, 44, 44, 0.1);
    border-radius: 2px;
    margin-top: 0.25rem;
}

.component-bar .bar-fill {
    height: 100%;
    background: var(--golden-green);
    border-radius: 2px;
}

.oee-details-section {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(139, 44, 44, 0.05);
}

.breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-label {
    font-size: 0.75rem;
    color: var(--dark-red);
}

.breakdown-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--golden-green);
}

/* Maintenance Schedule Styles */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.cal-nav {
    background: none;
    border: none;
    color: var(--dark-red);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.cal-month {
    font-weight: 600;
    color: var(--dark-red);
    font-size: 0.85rem;
}

.maintenance-calendar {
    background: white;
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.cal-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.7;
    padding-bottom: 0.5rem;
}

.cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--dark-red);
    border-radius: 4px;
    position: relative;
}

.cal-day.today {
    background: var(--golden-green);
    color: white;
}

.cal-day.weekend {
    opacity: 0.5;
}

.cal-event {
    position: absolute;
    bottom: 2px;
    font-size: 0.5rem;
    padding: 1px 3px;
    border-radius: 2px;
    color: white;
}

.cal-event.pm {
    background: #2196F3;
}

.cal-event.calibration {
    background: #FF9800;
}

.cal-event.inspection {
    background: #4CAF50;
}

.maintenance-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem;
    font-size: 0.6rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--dark-red);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.legend-dot.pm {
    background: #2196F3;
}

.legend-dot.calibration {
    background: #FF9800;
}

.legend-dot.inspection {
    background: #4CAF50;
}

.maintenance-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.maintenance-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
}

.maint-date {
    background: var(--golden-green);
    color: white;
    padding: 0.5rem;
    border-radius: 6px;
    text-align: center;
    min-width: 40px;
}

.maint-day {
    font-size: 1rem;
    font-weight: 700;
    display: block;
}

.maint-month {
    font-size: 0.6rem;
    display: block;
}

.maint-info {
    flex: 1;
}

.maint-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.maint-desc {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.maint-status {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
}

.maint-status.pending {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.maint-status.scheduled {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

/* Failure Reporting Styles */
.failure-summary-card {
    display: flex;
    justify-content: space-around;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.summary-stat {
    text-align: center;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-number.red {
    color: var(--dark-red);
}

.stat-number.orange {
    color: #FF9800;
}

.stat-number.green {
    color: #4CAF50;
}

.failure-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.failure-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border-left: 3px solid var(--golden-green);
}

.failure-card.critical {
    border-left-color: var(--dark-red);
}

.failure-card.major {
    border-left-color: #FF9800;
}

.failure-card.minor {
    border-left-color: #4CAF50;
}

.failure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.failure-severity {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    color: white;
}

.failure-severity.critical {
    background: var(--dark-red);
}

.failure-severity.major {
    background: #FF9800;
}

.failure-severity.minor {
    background: #4CAF50;
}

.failure-time {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.6;
}

.failure-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.failure-desc {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.failure-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.failure-reporter {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.6;
}

.failure-status {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.failure-status.in-progress {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.failure-status.pending {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.failure-status.resolved {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

/* Configuration Styles */
.config-info-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.info-icon {
    font-size: 1.2rem;
}

.info-text {
    font-size: 0.7rem;
    color: var(--dark-red);
    line-height: 1.4;
}

.config-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid rgba(139, 44, 44, 0.1);
}

.config-card.active-config {
    border-color: var(--golden-green);
    border-width: 2px;
}

.config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.config-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.config-status {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.config-status.active {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.config-status.inactive {
    background: rgba(158, 158, 158, 0.1);
    color: #9E9E9E;
}

.config-details {
    margin-bottom: 0.5rem;
}

.config-param {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    font-size: 0.7rem;
}

.param-label {
    color: var(--dark-red);
    opacity: 0.7;
}

.param-value {
    color: var(--dark-red);
    font-weight: 500;
}

.config-actions {
    display: flex;
    gap: 0.5rem;
}

.config-btn {
    padding: 0.25rem 0.5rem;
    background: rgba(139, 154, 70, 0.1);
    border: 1px solid var(--golden-green);
    border-radius: 4px;
    font-size: 0.65rem;
    color: var(--golden-green);
    cursor: pointer;
}

/* Configuration Editor Styles */
.material-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.material-chip {
    padding: 0.35rem 0.75rem;
    background: rgba(139, 44, 44, 0.05);
    border: 1px solid rgba(139, 44, 44, 0.2);
    border-radius: 15px;
    font-size: 0.7rem;
    color: var(--dark-red);
    cursor: pointer;
}

.material-chip.selected {
    background: var(--golden-green);
    border-color: var(--golden-green);
    color: white;
}

.material-chip.add-chip {
    background: transparent;
    border-style: dashed;
    border-color: var(--golden-green);
    color: var(--golden-green);
}

.tool-requirements {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tool-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.05);
    border-radius: 6px;
}

.tool-name {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--dark-red);
}

.tool-spec {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.add-tool-btn {
    padding: 0.5rem;
    background: transparent;
    border: 1px dashed var(--golden-green);
    border-radius: 6px;
    color: var(--golden-green);
    font-size: 0.7rem;
    cursor: pointer;
    text-align: center;
}

/* Quick Actions in Machine Detail */
.quick-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.quick-action-btn {
    padding: 0.75rem 0.5rem;
    background: rgba(139, 154, 70, 0.1);
    border: 1px solid var(--golden-green);
    border-radius: 8px;
    font-size: 0.7rem;
    color: var(--dark-red);
    cursor: pointer;
    text-align: center;
}

.quick-action-btn:hover {
    background: var(--golden-green);
    color: white;
}

/* Danger button styles */
.mockup-btn-danger-sm {
    background: var(--dark-red);
    color: white;
    border: none;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
}

/* ==========================================================================
   Inventory Management Mockup Styles
   ========================================================================== */

/* Inventory List Styles */
.inventory-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inventory-card {
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(139, 44, 44, 0.1);
    overflow: hidden;
}

.inventory-card.low-stock {
    border-left: 3px solid #FF9800;
}

.inventory-card.expandable .inventory-card-expanded {
    display: block;
}

.inventory-card-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    cursor: pointer;
}

.inventory-icon {
    font-size: 1.2rem;
}

.inventory-info {
    flex: 1;
    min-width: 0;
}

.inventory-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-category {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.inventory-qty {
    text-align: right;
}

.inventory-qty.low .qty-value {
    color: #FF9800;
}

.inventory-card-expanded {
    display: none;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.03);
    border-top: 1px solid rgba(139, 44, 44, 0.1);
}

.inv-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.75rem;
}

.inv-label {
    color: var(--dark-red);
    opacity: 0.7;
}

.inv-value {
    color: var(--dark-red);
    font-weight: 500;
}

.inv-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: center;
}

/* Transaction Tracking Styles */
.tracking-summary {
    display: flex;
    justify-content: space-around;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.tracking-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tracking-stat .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.tracking-stat .stat-icon.in {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.tracking-stat .stat-icon.out {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.tracking-stat .stat-info {
    display: flex;
    flex-direction: column;
}

.tracking-stat .stat-info .stat-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.tracking-stat .stat-info .stat-label {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.transaction-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.transaction-item {
    display: flex;
    position: relative;
    padding-left: 1.5rem;
}

.transaction-line {
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: -10px;
    width: 2px;
    background: rgba(139, 44, 44, 0.1);
}

.transaction-item:last-child .transaction-line {
    display: none;
}

.transaction-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--golden-green);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--golden-green);
}

.transaction-item.receipt .transaction-dot {
    background: #4CAF50;
    box-shadow: 0 0 0 2px #4CAF50;
}

.transaction-item.release .transaction-dot {
    background: #FF9800;
    box-shadow: 0 0 0 2px #FF9800;
}

.transaction-item.adjustment .transaction-dot {
    background: #9E9E9E;
    box-shadow: 0 0 0 2px #9E9E9E;
}

.transaction-item.transfer .transaction-dot {
    background: #2196F3;
    box-shadow: 0 0 0 2px #2196F3;
}

.transaction-content {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    flex: 1;
}

.trans-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.trans-type {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.trans-time {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.6;
}

.trans-detail {
    font-size: 0.75rem;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.trans-user {
    font-size: 0.65rem;
    color: var(--golden-green);
}

/* Batch Tracking Styles */
.batch-info-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--golden-green);
}

.batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.batch-id {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.batch-status {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.batch-status.active {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.batch-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.batch-detail {
    display: flex;
    font-size: 0.75rem;
}

.batch-detail .detail-label {
    color: var(--dark-red);
    opacity: 0.7;
    width: 80px;
}

.batch-detail .detail-value {
    color: var(--dark-red);
    font-weight: 500;
}

.batch-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline-event {
    display: flex;
    gap: 0.75rem;
}

.event-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.event-dot.received {
    background: #4CAF50;
}

.event-dot.qa {
    background: #2196F3;
}

.event-dot.released {
    background: #FF9800;
}

.event-content {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    flex: 1;
}

.event-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.event-desc {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.8;
}

.event-time {
    font-size: 0.6rem;
    color: var(--golden-green);
    margin-top: 0.25rem;
}

/* Stock Release Mode Toggle */
.mode-toggle-bar {
    display: flex;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 8px;
    padding: 0.25rem;
    margin-bottom: 1rem;
}

.mode-btn {
    flex: 1;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--golden-green);
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}

.mode-btn.active {
    background: var(--golden-green);
    color: white;
}

.selected-job-card {
    background: rgba(139, 154, 70, 0.05);
    border: 1px solid var(--golden-green);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.selected-job-card .job-id {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--golden-green);
}

.selected-job-card .job-desc {
    font-size: 0.75rem;
    color: var(--dark-red);
}

.selected-job-card .job-meta {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-top: 0.25rem;
}

.material-release-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 2px solid var(--golden-green);
}

.material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.material-release-card .material-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.material-check {
    color: var(--golden-green);
    font-size: 1.2rem;
}

.material-qty-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.qty-box {
    text-align: center;
}

.qty-box .qty-label {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.7;
    display: block;
}

.qty-box .qty-val {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.qty-box .qty-val.good {
    color: #4CAF50;
}

.batch-select-btn {
    text-align: center;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--golden-green);
    cursor: pointer;
}

/* Archived Inventory Styles */
.search-filter-bar {
    margin-bottom: 0.75rem;
}

.archive-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(139, 44, 44, 0.05);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.archive-icon {
    font-size: 1rem;
}

.archive-count {
    font-size: 0.75rem;
    color: var(--dark-red);
}

.archived-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.archived-item {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid rgba(139, 44, 44, 0.1);
}

.archived-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.archived-info .archived-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.archived-info .archived-id {
    font-size: 0.65rem;
    color: var(--golden-green);
}

.restore-btn {
    background: #4CAF50;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.9rem;
    cursor: pointer;
}

.archive-details {
    background: rgba(139, 44, 44, 0.03);
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.archive-detail {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.archive-detail .icon {
    font-size: 0.8rem;
    width: 18px;
}

.archived-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Scrap Material Styles */
.scrap-material-info {
    background: rgba(139, 44, 44, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(139, 44, 44, 0.2);
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.scrap-material-info .info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

.scrap-material-info .label {
    color: var(--dark-red);
    opacity: 0.7;
}

.scrap-material-info .value {
    color: var(--dark-red);
    font-weight: 600;
}

.doc-upload-area {
    border: 2px dashed var(--golden-green);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
}

.upload-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.25rem;
}

.upload-text {
    font-size: 0.75rem;
    color: var(--golden-green);
}

.scrap-action-bar {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.scrap-action-bar button {
    flex: 1;
    padding: 0.75rem;
}

.mockup-btn-danger {
    background: var(--dark-red);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Global Material Release Styles */
.global-release-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.job-release-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.job-release-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid rgba(139, 44, 44, 0.1);
}

.job-release-card.selected {
    border-color: var(--golden-green);
    background: rgba(139, 154, 70, 0.05);
}

.job-checkbox {
    font-size: 1.1rem;
}

.job-release-card .job-info {
    flex: 1;
}

.job-release-card .job-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.job-release-card .job-materials {
    font-size: 0.65rem;
    color: var(--golden-green);
}

.job-date {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.release-summary {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.05);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--dark-red);
    margin-bottom: 0.75rem;
}

/* Inventory Documents Styles */
.doc-category-section {
    margin-bottom: 1rem;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.category-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.category-count {
    background: var(--golden-green);
    color: white;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
}

.doc-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.doc-items .doc-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 6px;
    padding: 0.5rem;
}

.doc-items .doc-item .doc-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
}

.doc-items .doc-item .doc-icon.pdf {
    background: var(--dark-red);
}

.doc-items .doc-item .doc-info {
    flex: 1;
}

.doc-items .doc-item .doc-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dark-red);
}

.doc-items .doc-item .doc-meta {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.6;
}

/* Shipping History Styles */
.shipping-stats {
    display: flex;
    justify-content: space-around;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.ship-stat {
    text-align: center;
}

.ship-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-red);
}

.ship-stat .stat-label {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.shipping-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shipping-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border-left: 3px solid var(--golden-green);
}

.shipping-card.in-transit {
    border-left-color: #FF9800;
}

.shipping-card.delivered {
    border-left-color: #4CAF50;
}

.shipping-card .shipping-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ship-id {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.ship-status {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.ship-status.transit {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.ship-status.delivered {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.shipping-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ship-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--dark-red);
}

.ship-detail .icon {
    width: 16px;
}

/* Shipping Detail Styles */
.shipment-status-banner {
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.shipment-status-banner.transit {
    background: linear-gradient(135deg, #FF9800, #FFB74D);
    color: white;
}

.shipment-status-banner.delivered {
    background: linear-gradient(135deg, #4CAF50, #81C784);
    color: white;
}

.shipment-status-banner .status-icon {
    font-size: 2rem;
}

.shipment-status-banner .status-text {
    font-weight: 700;
    font-size: 1rem;
}

.shipment-status-banner .status-eta {
    font-size: 0.75rem;
    opacity: 0.9;
}

.mockup-form-section .info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(139, 44, 44, 0.05);
    font-size: 0.75rem;
}

.mockup-form-section .info-row .label {
    color: var(--dark-red);
    opacity: 0.7;
}

.mockup-form-section .info-row .value {
    color: var(--dark-red);
    font-weight: 500;
}

.mockup-form-section .info-row .value.tracking-link {
    color: #2196F3;
    cursor: pointer;
}

.shipped-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shipped-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.05);
    border-radius: 6px;
    font-size: 0.75rem;
}

.shipped-item .item-name {
    color: var(--dark-red);
}

.shipped-item .item-qty {
    color: var(--golden-green);
    font-weight: 600;
}

.address-box {
    background: rgba(139, 44, 44, 0.03);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.75rem;
    color: var(--dark-red);
    line-height: 1.5;
}

/* Ship Material Styles */
.ship-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ship-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-radius: 6px;
    padding: 0.5rem;
    border: 1px solid rgba(139, 44, 44, 0.1);
}

.ship-item-info {
    flex: 1;
}

.ship-item-info .item-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.ship-item-info .item-available {
    font-size: 0.65rem;
    color: var(--golden-green);
}

.qty-input {
    width: 60px;
    padding: 0.35rem;
    border: 1px solid var(--golden-green);
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
}

.add-item-btn {
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: 1px dashed var(--golden-green);
    border-radius: 6px;
    color: var(--golden-green);
    font-size: 0.75rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

/* Success Button */
.mockup-btn-success {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}

.mockup-btn-success:hover {
    background: #43A047;
}

/* ==========================================================================
   Scheduling Module Mockup Styles
   ========================================================================== */

/* Schedule Calendar Styles */
.schedule-calendar {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.cal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.cal-nav-btn {
    background: none;
    border: none;
    color: var(--golden-green);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.cal-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.cal-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--dark-red);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.cal-cell.selected {
    background: var(--golden-green);
    color: white;
}

.cal-cell.weekend {
    opacity: 0.5;
}

.booking-dots {
    display: flex;
    gap: 2px;
    position: absolute;
    bottom: 2px;
}

.booking-dots .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.booking-dots .dot.green { background: #4CAF50; }
.booking-dots .dot.blue { background: #2196F3; }
.booking-dots .dot.orange { background: #FF9800; }

.day-summary-bar {
    display: flex;
    justify-content: space-around;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.05);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--dark-red);
    margin-bottom: 0.75rem;
}

.booking-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.booking-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border-left: 3px solid var(--golden-green);
}

.booking-card.scheduled {
    border-left-color: #2196F3;
}

.booking-card.completed {
    border-left-color: #4CAF50;
}

.booking-time {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    white-space: nowrap;
}

.booking-info {
    flex: 1;
}

.booking-job {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.booking-machine {
    font-size: 0.7rem;
    color: var(--golden-green);
}

.booking-status-badge {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

/* Gantt Chart Styles */
.gantt-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(139, 154, 70, 0.05);
    margin-bottom: 0.5rem;
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zoom-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--golden-green);
    background: white;
    color: var(--golden-green);
    cursor: pointer;
}

.zoom-level {
    font-size: 0.7rem;
    color: var(--dark-red);
}

.gantt-toggles {
    display: flex;
    gap: 0.75rem;
}

.toggle-label {
    font-size: 0.65rem;
    color: var(--dark-red);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gantt-chart-area {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.gantt-header {
    display: flex;
    background: rgba(139, 44, 44, 0.05);
    font-size: 0.65rem;
    color: var(--dark-red);
}

.gantt-resource-col {
    width: 70px;
    padding: 0.5rem;
    border-right: 1px solid rgba(139, 44, 44, 0.1);
    font-weight: 600;
}

.gantt-timeline {
    flex: 1;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem;
}

.gantt-row {
    display: flex;
    border-bottom: 1px solid rgba(139, 44, 44, 0.05);
    min-height: 35px;
}

.gantt-resource {
    width: 70px;
    padding: 0.5rem;
    font-size: 0.7rem;
    color: var(--dark-red);
    border-right: 1px solid rgba(139, 44, 44, 0.1);
}

.gantt-bars {
    flex: 1;
    position: relative;
    padding: 0.25rem 0;
}

.gantt-bar {
    position: absolute;
    height: 22px;
    background: var(--golden-green);
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
}

.gantt-bar.critical {
    background: var(--dark-red);
}

.bar-label {
    font-size: 0.55rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
}

.gantt-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem;
    font-size: 0.65rem;
}

.legend-box {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 0.25rem;
}

.legend-box.normal { background: var(--golden-green); }
.legend-box.critical { background: var(--dark-red); }

/* Book Slot Styles */
.job-info-preview {
    background: rgba(139, 154, 70, 0.05);
    border-radius: 6px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.job-info-preview .info-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding: 0.2rem 0;
}

.job-info-preview .label {
    color: var(--dark-red);
    opacity: 0.7;
}

.job-info-preview .value {
    color: var(--dark-red);
    font-weight: 500;
}

.job-info-preview .value.high {
    color: var(--dark-red);
    font-weight: 700;
}

/* Modify Booking Styles */
.booking-detail-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(139, 44, 44, 0.1);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.booking-detail-card .booking-id {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.booking-badge {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.booking-badge.in-progress {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--dark-red);
    padding: 0.25rem 0;
}

.detail-row .icon {
    font-size: 0.85rem;
}

.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.action-btn {
    padding: 0.6rem;
    background: rgba(139, 154, 70, 0.1);
    border: 1px solid var(--golden-green);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--dark-red);
    cursor: pointer;
    text-align: center;
}

.step-progress-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
}

.step-check {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.step-item.completed .step-check { color: #4CAF50; }
.step-item.in-progress .step-check { color: #2196F3; }
.step-item.pending .step-check { color: #9E9E9E; }

.step-name {
    font-size: 0.75rem;
    color: var(--dark-red);
}

/* KPI Dashboard Styles */
.kpi-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.kpi-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 3px solid var(--golden-green);
}

.kpi-card.good {
    border-left-color: #4CAF50;
}

.kpi-card.warning {
    border-left-color: #FF9800;
}

.kpi-icon {
    font-size: 1.2rem;
}

.kpi-info {
    flex: 1;
}

.kpi-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.kpi-label {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.kpi-trend {
    font-size: 0.55rem;
    margin-top: 0.1rem;
}

.kpi-trend.up { color: #4CAF50; }
.kpi-trend.down { color: #FF9800; }

.chart-placeholder {
    background: white;
    border-radius: 8px;
    padding: 1rem;
}

.mini-bar-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 80px;
}

.mini-bar-chart .bar {
    width: 30px;
    background: var(--golden-green);
    border-radius: 3px 3px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 0.25rem;
}

.mini-bar-chart .bar span {
    font-size: 0.5rem;
    color: white;
}

/* Analytics Hub Styles */
.analytics-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.analytics-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
}

.analytics-icon {
    font-size: 1.5rem;
}

.analytics-info {
    flex: 1;
}

.analytics-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.analytics-desc {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.nav-arrow {
    color: var(--golden-green);
}

/* What-If Scenario Styles */
.scenario-info-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.scenario-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.option-label {
    font-size: 0.8rem;
    color: var(--dark-red);
}

/* Sandbox Styles */
.sandbox-info-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(156, 39, 176, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.sandbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sandbox-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid rgba(139, 44, 44, 0.1);
}

.sandbox-card.active {
    border-color: var(--golden-green);
    border-width: 2px;
}

.sandbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.sandbox-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.sandbox-badge {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    background: rgba(158, 158, 158, 0.1);
    color: #9E9E9E;
}

.sandbox-badge.draft {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.sandbox-meta {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.sandbox-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
}

.sandbox-actions {
    display: flex;
    gap: 0.5rem;
}

.sandbox-btn {
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: 1px solid var(--golden-green);
    border-radius: 4px;
    font-size: 0.65rem;
    color: var(--golden-green);
    cursor: pointer;
}

.sandbox-btn.primary {
    background: var(--golden-green);
    color: white;
}

/* Constraint Violations Styles */
.violation-summary {
    display: flex;
    justify-content: space-around;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.violation-stat {
    text-align: center;
}

.violation-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.violation-stat.critical .stat-value { color: var(--dark-red); }
.violation-stat.warning .stat-value { color: #FF9800; }
.violation-stat.info .stat-value { color: #2196F3; }

.violation-stat .stat-label {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.violation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.violation-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    border-left: 3px solid var(--golden-green);
}

.violation-card.critical { border-left-color: var(--dark-red); }
.violation-card.warning { border-left-color: #FF9800; }
.violation-card.info { border-left-color: #2196F3; }

.violation-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.violation-type {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
}

.violation-time {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.6;
}

.violation-detail {
    font-size: 0.75rem;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.violation-affected {
    font-size: 0.65rem;
    color: var(--golden-green);
    margin-bottom: 0.5rem;
}

.resolve-btn {
    padding: 0.35rem 0.75rem;
    background: var(--golden-green);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.65rem;
    cursor: pointer;
}

/* Resource Capacity Styles */
.capacity-overview {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.capacity-gauge {
    height: 20px;
    background: rgba(139, 44, 44, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.5rem;
}

.gauge-fill {
    height: 100%;
    background: var(--golden-green);
    border-radius: 10px;
}

.gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--dark-red);
}

.capacity-label {
    font-size: 0.7rem;
    color: var(--dark-red);
}

.capacity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.capacity-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.capacity-machine {
    width: 70px;
    font-size: 0.7rem;
    color: var(--dark-red);
}

.capacity-bar-wrapper {
    flex: 1;
    height: 12px;
    background: rgba(139, 44, 44, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.capacity-bar {
    height: 100%;
    border-radius: 6px;
}

.capacity-bar.high { background: #4CAF50; }
.capacity-bar.medium { background: #FF9800; }
.capacity-bar.low { background: #2196F3; }

.capacity-percent {
    width: 35px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    text-align: right;
}

.gap-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gap-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 6px;
    font-size: 0.7rem;
}

.gap-machine {
    font-weight: 600;
    color: var(--dark-red);
}

.gap-time {
    color: #4CAF50;
}

/* Schedule Comparison Styles */
.comparison-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.compare-item {
    flex: 1;
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    border: 2px solid transparent;
}

.compare-item.selected {
    border-color: var(--golden-green);
}

.compare-label {
    font-size: 0.6rem;
    color: var(--golden-green);
}

.compare-name {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--dark-red);
}

.vs-badge {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--dark-red);
}

.comparison-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.comparison-row {
    display: flex;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(139, 44, 44, 0.05);
}

.comparison-row.header {
    background: rgba(139, 154, 70, 0.1);
    font-weight: 600;
}

.metric-name {
    flex: 1;
    color: var(--dark-red);
}

.metric-current, .metric-compare {
    width: 70px;
    text-align: right;
    color: var(--dark-red);
}

.metric-compare.better {
    color: #4CAF50;
    font-weight: 600;
}

/* Optimize Schedule Styles */
.optimize-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.optimize-icon {
    font-size: 2rem;
}

.optimize-text {
    font-size: 0.8rem;
    color: var(--dark-red);
}

.goal-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.goal-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
}

.goal-option.selected {
    background: rgba(139, 154, 70, 0.1);
}

.goal-label {
    font-size: 0.75rem;
    color: var(--dark-red);
}

.algorithm-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.algorithm-option {
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(139, 44, 44, 0.1);
    cursor: pointer;
}

.algorithm-option.selected {
    border-color: var(--golden-green);
    background: rgba(139, 154, 70, 0.05);
}

.algo-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark-red);
    display: block;
}

.algo-desc {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}
/* ==================== PROJECT MANAGEMENT STYLES ==================== */

/* Mini thumbnails for project screens */
.mini-project-dashboard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
}

.mini-kpi-row {
    display: flex;
    gap: 2px;
    height: 8px;
}

.mini-kpi-row::before,
.mini-kpi-row::after {
    content: '';
    flex: 1;
    background: rgba(139, 154, 70, 0.3);
    border-radius: 2px;
}

.mini-customer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mini-customer-list::before,
.mini-customer-list::after {
    content: '';
    height: 10px;
    background: rgba(139, 44, 44, 0.1);
    border-radius: 2px;
}

.mini-template-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
}

.mini-template-card {
    height: 12px;
    background: linear-gradient(90deg, rgba(139, 154, 70, 0.2) 0%, rgba(139, 44, 44, 0.1) 100%);
    border-radius: 3px;
}

.mini-instance-tabs {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: rgba(139, 44, 44, 0.1);
    border-radius: 3px 3px 0 0;
}

.mini-instance-tabs::before,
.mini-instance-tabs::after {
    content: '';
    flex: 1;
    height: 6px;
    background: rgba(139, 154, 70, 0.4);
    border-radius: 2px;
}

.mini-instance-content {
    height: 20px;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 0 0 3px 3px;
}

/* Project Dashboard KPI Row */
.project-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.project-kpi-card {
    background: white;
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.project-kpi-card .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-red);
    display: block;
}

.project-kpi-card .kpi-label {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* Project Filter Bar */
.project-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: white;
    border-radius: 8px;
}

.project-filter-bar .mockup-search {
    flex: 2;
}

.project-filter-bar .mockup-select.small {
    flex: 1;
    font-size: 0.7rem;
}

/* Customer List */
.project-customer-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
}

.customer-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.customer-card.expandable .customer-templates {
    display: block;
}

.customer-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    cursor: pointer;
}

.customer-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.customer-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.priority-badge {
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.critical {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.priority-badge.high {
    background: rgba(255, 193, 7, 0.2);
    color: #856404;
}

.customer-stats {
    display: flex;
    gap: 0.5rem;
}

.customer-stats .stat {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.customer-stats .stat.active {
    color: #28a745;
}

.customer-stats .stat.scheduled {
    color: #fd7e14;
}

.expand-icon {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.5;
}

.customer-templates {
    display: none;
    padding: 0 0.75rem 0.75rem;
    background: rgba(139, 154, 70, 0.05);
    border-top: 1px solid rgba(139, 44, 44, 0.1);
}

.template-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.template-icon {
    font-size: 0.9rem;
}

.template-item .template-name {
    flex: 1;
    font-size: 0.75rem;
    color: var(--dark-red);
}

.instance-count {
    font-size: 0.65rem;
    color: var(--golden-green);
}

/* Template Filter Bar */
.template-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.template-filter-bar .mockup-search {
    flex: 2;
}

.template-filter-bar .mockup-select {
    flex: 1;
}

/* Template Card List */
.template-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 320px;
    overflow-y: auto;
}

.template-card {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.template-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.template-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark-red);
}

.template-badges {
    display: flex;
    gap: 0.25rem;
}

.template-badges .badge {
    font-size: 0.55rem;
    padding: 0.15rem 0.35rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge.blanket {
    background: rgba(255, 165, 0, 0.2);
    color: #d97706;
}

.badge.recurrence {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.template-card-body {
    margin-bottom: 0.5rem;
}

.template-meta {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.template-po {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
}

.po-icon {
    font-size: 0.75rem;
}

.po-number {
    color: var(--dark-red);
    font-weight: 500;
}

.po-value {
    color: #059669;
    font-weight: 600;
    margin-left: auto;
}

.template-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(139, 44, 44, 0.1);
}

.job-count {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.template-actions {
    display: flex;
    gap: 0.25rem;
}

.action-icon {
    background: none;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
}

.action-icon:hover {
    background: rgba(139, 154, 70, 0.1);
}

/* Instance Monitor Styles */
.instance-id {
    font-size: 0.7rem;
    color: var(--golden-green);
    font-weight: 500;
}

.instance-tabs {
    display: flex;
    background: rgba(139, 44, 44, 0.05);
    border-radius: 8px;
    padding: 0.25rem;
    margin-bottom: 1rem;
    gap: 0.25rem;
}

.instance-tab {
    flex: 1;
    padding: 0.5rem 0.25rem;
    border: none;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    opacity: 0.6;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.instance-tab:hover {
    opacity: 0.8;
    background: rgba(139, 154, 70, 0.1);
}

.instance-tab.active {
    background: white;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.instance-tab-content {
    min-height: 280px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Clone Tab */
.clone-summary {
    padding: 1rem;
    background: white;
    border-radius: 8px;
}

.clone-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 8px;
}

.clone-status.completed .status-icon {
    color: #059669;
    font-size: 1.2rem;
}

.status-text {
    font-weight: 600;
    color: var(--dark-red);
}

.clone-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--dark-red);
}

/* Edit Tab */
.edit-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-job-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
}

.edit-job-card .job-icon {
    font-size: 1.2rem;
}

.edit-job-card .job-info {
    flex: 1;
}

.edit-job-card .job-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-red);
}

.edit-job-card .job-dept {
    font-size: 0.7rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.edit-btn {
    background: var(--golden-green);
    color: white;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

/* Execute Tab */
.execute-progress {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.progress-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-red);
}

.progress-percent {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--golden-green);
}

.progress-bar-large {
    height: 12px;
    background: rgba(139, 44, 44, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--golden-green), #6b7a34);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.execute-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.execute-stat {
    background: white;
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
}

.execute-stat .stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-red);
}

.execute-stat .stat-label {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.execute-jobs-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}

.timeline-job {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.timeline-job.completed {
    border-left-color: #059669;
}

.timeline-job.in-progress {
    border-left-color: #f59e0b;
}

.timeline-job.pending {
    border-left-color: #9ca3af;
}

.job-status-icon {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.job-status-icon.spinning {
    animation: spin 1.5s linear infinite;
}

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

.job-timeline-info {
    flex: 1;
}

.job-timeline-info .job-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-red);
}

.job-timeline-info .job-time {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.mini-progress {
    width: 60px;
    height: 4px;
    background: rgba(139, 44, 44, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    background: #f59e0b;
    border-radius: 2px;
}

/* Track Tab */
.track-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.material-flow-diagram {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.flow-source .source-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(139, 154, 70, 0.1);
    border-radius: 8px;
    min-width: 80px;
}

.source-box .material-icon {
    font-size: 1.2rem;
}

.source-box .material-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
}

.source-box .batch-id {
    font-size: 0.55rem;
    color: var(--golden-green);
}

.source-box .material-qty {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.flow-arrow {
    font-size: 1.2rem;
    color: var(--dark-red);
    opacity: 0.5;
}

.flow-stages {
    display: flex;
    gap: 0.5rem;
}

.flow-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    min-width: 60px;
}

.flow-stage.completed {
    background: rgba(5, 150, 105, 0.1);
}

.flow-stage.active {
    background: rgba(245, 158, 11, 0.1);
}

.flow-stage.pending {
    background: rgba(156, 163, 175, 0.1);
}

.flow-stage .stage-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--dark-red);
}

.flow-stage .stage-qty {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.track-events-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}

.track-event {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
}

.track-event .event-time {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.6;
    min-width: 50px;
}

.track-event .event-icon {
    font-size: 0.9rem;
    width: 24px;
    text-align: center;
}

.event-details {
    flex: 1;
}

.event-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.event-desc {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

/* BOM Tab */
.bom-summary-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bom-stat {
    background: white;
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
}

.bom-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-red);
}

.bom-stat-label {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.bom-tree {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.bom-job-node {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.bom-job-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
}

.bom-job-header .expand-icon {
    font-size: 0.6rem;
    color: var(--dark-red);
    opacity: 0.5;
    width: 12px;
}

.bom-job-header .job-icon {
    font-size: 0.9rem;
}

.bom-job-header .job-name {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-red);
}

.bom-job-header .job-cost {
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
}

.bom-materials {
    display: none;
    padding: 0 0.75rem 0.75rem;
    background: rgba(139, 154, 70, 0.05);
}

.bom-job-node.expanded .bom-materials {
    display: block;
}

.bom-material-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.bom-material-row .material-icon {
    font-size: 0.8rem;
}

.bom-material-row .material-name {
    flex: 1;
    font-size: 0.7rem;
    color: var(--dark-red);
}

.bom-material-row .material-qty {
    font-size: 0.65rem;
    color: var(--dark-red);
    opacity: 0.7;
}

.bom-material-row .material-cost {
    font-size: 0.7rem;
    font-weight: 600;
    color: #059669;
}

/* ==================== SCREEN DROPDOWN SELECTOR ==================== */

.screen-selector {
    margin-bottom: 1rem;
}

.screen-dropdown {
    width: 100%;
    max-width: 300px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-red);
    background: white;
    border: 2px solid rgba(139, 154, 70, 0.3);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B2C2C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.screen-dropdown:hover {
    border-color: var(--golden-green);
}

.screen-dropdown:focus {
    outline: none;
    border-color: var(--golden-green);
    box-shadow: 0 0 0 3px rgba(139, 154, 70, 0.15);
}

.screen-dropdown option {
    padding: 0.5rem;
    color: var(--dark-red);
}

/* ==================== CRM MODULE STYLES ==================== */

/* CRM Filter Bar */
.crm-filter-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fefce8;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    flex-wrap: wrap;
    align-items: center;
}

.crm-filter-bar .mockup-search {
    flex: 1;
    min-width: 150px;
    padding: 0.4rem 0.6rem;
    font-size: 0.65rem;
    border: 1px solid rgba(139, 154, 70, 0.3);
    border-radius: 4px;
}

.crm-filter-bar .mockup-select.small {
    padding: 0.4rem 0.5rem;
    font-size: 0.6rem;
    border: 1px solid rgba(139, 154, 70, 0.3);
    border-radius: 4px;
    background: white;
    color: var(--dark-red);
}

/* CRM Cards List */
.crm-cards-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Lead Cards */
.lead-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    overflow: hidden;
}

.lead-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-bottom: 1px solid rgba(139, 154, 70, 0.15);
}

.lead-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lead-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.lead-company {
    font-size: 0.6rem;
    color: #666;
}

.lead-badges {
    display: flex;
    gap: 0.25rem;
}

/* Status and Qualification Badges */
.status-badge,
.qualification-badge {
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Status Badges */
.status-badge.new {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-badge.contacted {
    background: #fef3c7;
    color: #b45309;
}

.status-badge.qualified {
    background: #d1fae5;
    color: #047857;
}

.status-badge.disqualified {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.converted {
    background: #e0e7ff;
    color: #4338ca;
}

/* Lead Qualification Badges */
.qualification-badge.hot {
    background: #fee2e2;
    color: #dc2626;
}

.qualification-badge.warm {
    background: #fed7aa;
    color: #c2410c;
}

.qualification-badge.cold {
    background: #e0f2fe;
    color: #0369a1;
}

.lead-card-body {
    padding: 0.6rem;
}

.lead-contact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.4rem;
    font-size: 0.55rem;
    color: #666;
}

.lead-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    color: #888;
}

.lead-value {
    font-weight: 600;
    color: #059669;
}

/* Lead Detail Styles */
.lead-detail-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.lead-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    margin-bottom: 0.75rem;
}

.lead-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dark-red) 0%, #b91c1c 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.lead-primary-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lead-fullname {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-red);
}

.lead-company-name {
    font-size: 0.7rem;
    color: #666;
}

.lead-status-row {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

/* Detail Sections */
.detail-section {
    margin-bottom: 0.75rem;
}

.detail-section h4 {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.15);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.detail-label {
    font-size: 0.55rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value {
    font-size: 0.65rem;
    color: var(--dark-red);
    font-weight: 500;
}

.detail-value.highlight {
    color: #059669;
    font-weight: 600;
}

/* Detail Actions */
.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(139, 154, 70, 0.2);
}

.mockup-btn-primary {
    background: linear-gradient(135deg, var(--dark-red) 0%, #b91c1c 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.mockup-btn-primary.small {
    padding: 0.3rem 0.6rem;
    font-size: 0.6rem;
}

.mockup-btn-outline {
    background: white;
    color: var(--dark-red);
    border: 1px solid var(--dark-red);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.mockup-btn-outline.danger {
    color: #dc2626;
    border-color: #dc2626;
}

/* Lead Form Styles */
.lead-form-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.form-section {
    margin-bottom: 0.75rem;
}

.form-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.15);
}

.form-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.form-label {
    font-size: 0.55rem;
    color: #666;
    font-weight: 500;
}

.mockup-input,
.mockup-select-form,
.mockup-textarea {
    padding: 0.4rem 0.5rem;
    font-size: 0.6rem;
    border: 1px solid rgba(139, 154, 70, 0.3);
    border-radius: 4px;
    background: white;
    color: var(--dark-red);
}

.mockup-textarea {
    min-height: 50px;
    resize: none;
}

/* Campaign Styles */
.campaign-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    overflow: hidden;
}

.campaign-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.campaign-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.campaign-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.campaign-type {
    font-size: 0.55rem;
    color: #666;
}

.campaign-status {
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.campaign-status.active {
    background: #d1fae5;
    color: #047857;
}

.campaign-status.draft {
    background: #e5e7eb;
    color: #6b7280;
}

.campaign-status.completed {
    background: #e0e7ff;
    color: #4338ca;
}

.campaign-status.scheduled {
    background: #fef3c7;
    color: #b45309;
}

.campaign-card-body {
    padding: 0.6rem;
}

.campaign-metrics {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.campaign-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.metric-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark-red);
}

.metric-label {
    font-size: 0.5rem;
    color: #888;
}

.campaign-dates {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    color: #888;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(139, 154, 70, 0.1);
}

/* Campaign Detail Styles */
.campaign-detail-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.campaign-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    margin-bottom: 0.6rem;
}

.campaign-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.campaign-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-red);
}

.campaign-subtitle {
    font-size: 0.6rem;
    color: #666;
}

.campaign-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.campaign-stat-card {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
}

.stat-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark-red);
}

.stat-label {
    font-size: 0.5rem;
    color: #666;
    text-transform: uppercase;
}

.campaign-progress-section {
    margin-bottom: 0.75rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: #666;
    margin-bottom: 0.3rem;
}

.progress-bar-large {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--golden-green) 0%, #9ca642 100%);
    border-radius: 4px;
}

/* Pipeline Dashboard Styles */
.pipeline-dashboard-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.pipeline-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pipeline-summary-card {
    background: white;
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(139, 69, 69, 0.08);
}

.summary-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark-red);
}

.summary-label {
    font-size: 0.5rem;
    color: #666;
    text-transform: uppercase;
}

/* Pipeline Funnel */
.pipeline-funnel {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    margin-bottom: 0.75rem;
}

.funnel-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
}

.funnel-stages {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.funnel-stage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stage-bar-container {
    flex: 1;
    position: relative;
}

.stage-bar {
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    position: relative;
}

.stage-bar.prospecting {
    background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 100%);
    width: 100%;
}

.stage-bar.qualification {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    width: 80%;
}

.stage-bar.proposal {
    background: linear-gradient(90deg, #fed7aa 0%, #fdba74 100%);
    width: 60%;
}

.stage-bar.negotiation {
    background: linear-gradient(90deg, #fecaca 0%, #fca5a5 100%);
    width: 40%;
}

.stage-bar.closed-won {
    background: linear-gradient(90deg, #d1fae5 0%, #a7f3d0 100%);
    width: 25%;
}

.stage-name {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--dark-red);
    white-space: nowrap;
}

.stage-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 50px;
}

.stage-count {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--dark-red);
}

.stage-value {
    font-size: 0.5rem;
    color: #059669;
}

/* Opportunity Cards */
.opportunity-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    overflow: hidden;
}

.opportunity-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-bottom: 1px solid rgba(139, 154, 70, 0.15);
}

.opportunity-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.opportunity-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.opportunity-company {
    font-size: 0.6rem;
    color: #666;
}

.opportunity-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.opportunity-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: #059669;
}

.stage-badge {
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.stage-badge.prospecting {
    background: #dbeafe;
    color: #1d4ed8;
}

.stage-badge.qualification {
    background: #fef3c7;
    color: #b45309;
}

.stage-badge.proposal {
    background: #fed7aa;
    color: #c2410c;
}

.stage-badge.negotiation {
    background: #fecaca;
    color: #dc2626;
}

.stage-badge.won {
    background: #d1fae5;
    color: #047857;
}

.stage-badge.lost {
    background: #e5e7eb;
    color: #6b7280;
}

.opportunity-card-body {
    padding: 0.6rem;
}

.opportunity-progress {
    margin-bottom: 0.4rem;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    color: #666;
    margin-bottom: 0.2rem;
}

.progress-bar-small {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-small .progress-fill {
    height: 100%;
    background: var(--golden-green);
}

.opportunity-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    color: #888;
}

/* Opportunity Detail Styles */
.opportunity-detail-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.opportunity-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    margin-bottom: 0.6rem;
}

.opportunity-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.opportunity-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-red);
}

.opportunity-header-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #059669;
}

.stage-indicator {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
    background: #f9fafb;
    padding: 0.5rem;
    border-radius: 6px;
}

.stage-step {
    flex: 1;
    padding: 0.3rem 0.2rem;
    text-align: center;
    font-size: 0.45rem;
    font-weight: 600;
    color: #9ca3af;
    background: #e5e7eb;
    border-radius: 3px;
}

.stage-step.completed {
    background: var(--golden-green);
    color: white;
}

.stage-step.current {
    background: var(--dark-red);
    color: white;
}

/* Quote Styles */
.quote-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    overflow: hidden;
}

.quote-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.quote-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.quote-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.quote-customer {
    font-size: 0.6rem;
    color: #666;
}

.quote-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.quote-total {
    font-size: 0.7rem;
    font-weight: 700;
    color: #059669;
}

.quote-status {
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.quote-status.draft {
    background: #e5e7eb;
    color: #6b7280;
}

.quote-status.sent {
    background: #dbeafe;
    color: #1d4ed8;
}

.quote-status.accepted {
    background: #d1fae5;
    color: #047857;
}

.quote-status.declined {
    background: #fee2e2;
    color: #dc2626;
}

.quote-status.expired {
    background: #fef3c7;
    color: #b45309;
}

.quote-card-body {
    padding: 0.6rem;
}

.quote-items-preview {
    font-size: 0.55rem;
    color: #666;
    margin-bottom: 0.4rem;
}

.quote-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    color: #888;
}

/* Quote Detail Styles */
.quote-detail-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.quote-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    margin-bottom: 0.6rem;
}

.quote-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.quote-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-red);
}

.quote-customer-name {
    font-size: 0.65rem;
    color: #666;
}

.quote-header-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.quote-total-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: #059669;
}

/* Line Items Table */
.line-items-section {
    margin-bottom: 0.75rem;
}

.line-items-section h4 {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    margin-bottom: 0.4rem;
}

.line-items-table {
    width: 100%;
    font-size: 0.55rem;
    border-collapse: collapse;
}

.line-items-table th {
    background: #f9fafb;
    padding: 0.35rem;
    text-align: left;
    color: #666;
    font-weight: 600;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
}

.line-items-table td {
    padding: 0.35rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.1);
    color: var(--dark-red);
}

.line-items-table .item-name {
    font-weight: 500;
}

.line-items-table .item-total {
    font-weight: 600;
    color: #059669;
}

.quote-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    padding-top: 0.5rem;
    border-top: 2px solid rgba(139, 154, 70, 0.2);
}

.quote-totals-row {
    display: flex;
    gap: 1rem;
    font-size: 0.6rem;
}

.quote-totals-row span:first-child {
    color: #666;
}

.quote-totals-row span:last-child {
    font-weight: 600;
    color: var(--dark-red);
}

.quote-totals-row.grand-total {
    font-size: 0.7rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(139, 154, 70, 0.2);
}

.quote-totals-row.grand-total span:last-child {
    color: #059669;
}

/* Quote Templates */
.templates-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.template-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    padding: 0.6rem;
}

.template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}

.template-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
}

.template-category {
    font-size: 0.5rem;
    padding: 0.15rem 0.4rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 10px;
}

.template-items {
    font-size: 0.55rem;
    color: #666;
    margin-bottom: 0.3rem;
}

.template-total {
    font-size: 0.65rem;
    font-weight: 600;
    color: #059669;
}

/* Invoice Styles */
.invoice-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    overflow: hidden;
}

.invoice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid rgba(234, 179, 8, 0.15);
}

.invoice-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.invoice-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.invoice-customer {
    font-size: 0.6rem;
    color: #666;
}

.invoice-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.invoice-total {
    font-size: 0.7rem;
    font-weight: 700;
    color: #059669;
}

.invoice-status {
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.invoice-status.draft {
    background: #e5e7eb;
    color: #6b7280;
}

.invoice-status.sent {
    background: #dbeafe;
    color: #1d4ed8;
}

.invoice-status.paid {
    background: #d1fae5;
    color: #047857;
}

.invoice-status.partial {
    background: #fef3c7;
    color: #b45309;
}

.invoice-status.overdue {
    background: #fee2e2;
    color: #dc2626;
}

.invoice-card-body {
    padding: 0.6rem;
}

.invoice-progress {
    margin-bottom: 0.4rem;
}

.invoice-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    color: #888;
}

/* Invoice Detail Styles */
.invoice-detail-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.invoice-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    margin-bottom: 0.6rem;
}

.invoice-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.invoice-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-red);
}

.invoice-customer-name {
    font-size: 0.65rem;
    color: #666;
}

.invoice-header-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.invoice-total-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: #059669;
}

.payment-progress-section {
    background: #f9fafb;
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.6rem;
}

.payment-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    color: #666;
    margin-bottom: 0.3rem;
}

.payment-amounts {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
}

.payment-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-amount .amount-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dark-red);
}

.payment-amount .amount-label {
    font-size: 0.5rem;
    color: #888;
}

.payment-amount.paid .amount-value {
    color: #059669;
}

.payment-amount.remaining .amount-value {
    color: #dc2626;
}

/* Payment History */
.payment-history-section {
    margin-bottom: 0.75rem;
}

.payment-history-section h4 {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    margin-bottom: 0.4rem;
}

.payment-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.payment-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem;
    background: #f9fafb;
    border-radius: 4px;
}

.payment-history-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.payment-date {
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--dark-red);
}

.payment-method {
    font-size: 0.5rem;
    color: #888;
}

.payment-history-amount {
    font-size: 0.65rem;
    font-weight: 600;
    color: #059669;
}

/* Record Payment Styles */
.record-payment-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.payment-summary-card {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.payment-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
}

.payment-invoice-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.payment-invoice-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.payment-customer {
    font-size: 0.55rem;
    color: #666;
}

.payment-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.balance-label {
    font-size: 0.5rem;
    color: #888;
}

.balance-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #dc2626;
}

.payment-form-section {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
}

.payment-form-section h4 {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
    margin-bottom: 0.5rem;
}

.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.payment-method-option {
    padding: 0.4rem;
    text-align: center;
    border: 1px solid rgba(139, 154, 70, 0.3);
    border-radius: 6px;
    font-size: 0.5rem;
    color: var(--dark-red);
    cursor: pointer;
}

.payment-method-option.selected {
    background: var(--golden-green);
    color: white;
    border-color: var(--golden-green);
}

/* PRR Styles */
.prr-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    overflow: hidden;
}

.prr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.prr-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.prr-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dark-red);
}

.prr-project {
    font-size: 0.6rem;
    color: #666;
}

.prr-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.prr-status {
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.prr-status.pending,
.status-badge.pending {
    background: #fef3c7;
    color: #b45309;
}

.prr-status.in-review,
.status-badge.in-review {
    background: #e0e7ff;
    color: #4338ca;
}

.prr-status.approved,
.status-badge.approved {
    background: #d1fae5;
    color: #047857;
}

.prr-status.rejected,
.status-badge.rejected {
    background: #fee2e2;
    color: #dc2626;
}

.prr-card-body {
    padding: 0.6rem;
}

.prr-progress {
    margin-bottom: 0.4rem;
}

.prr-checklist-summary {
    display: flex;
    gap: 0.5rem;
    font-size: 0.5rem;
    color: #666;
}

.prr-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    color: #888;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(139, 154, 70, 0.1);
}

/* PRR Detail Styles */
.prr-tabs {
    display: flex;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    background: #f9fafb;
}

.prr-tab {
    flex: 1;
    padding: 0.4rem 0.5rem;
    font-size: 0.55rem;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: none;
    cursor: pointer;
}

.prr-tab.active {
    color: var(--dark-red);
    background: white;
    border-bottom: 2px solid var(--dark-red);
}

.prr-detail-content {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.prr-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.prr-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-red);
}

.prr-progress-section {
    background: #f9fafb;
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.6rem;
}

.progress-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 0.4rem;
    font-size: 0.55rem;
}

/* Checklist Items */
.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem;
    background: white;
    border-radius: 4px;
    border: 1px solid rgba(139, 154, 70, 0.1);
}

.checklist-item.completed {
    background: #f0fdf4;
    border-color: rgba(34, 197, 94, 0.2);
}

.checklist-item.pending {
    background: #fffbeb;
    border-color: rgba(234, 179, 8, 0.2);
}

.checklist-item.issue {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.2);
}

.check-icon {
    font-size: 0.7rem;
}

.check-label {
    font-size: 0.55rem;
    color: var(--dark-red);
}

/* Email History Styles */
.email-filter-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fefce8;
    border-bottom: 1px solid rgba(139, 154, 70, 0.2);
    flex-wrap: wrap;
    align-items: center;
}

.email-threads-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.email-thread {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(139, 69, 69, 0.1);
    border: 1px solid rgba(139, 154, 70, 0.15);
    overflow: hidden;
}

.email-thread-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-bottom: 1px solid rgba(139, 154, 70, 0.15);
}

.email-sender-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dark-red) 0%, #b91c1c 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
}

.email-sender-details {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.email-sender {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dark-red);
}

.email-company {
    font-size: 0.55rem;
    color: #666;
}

.email-date {
    font-size: 0.5rem;
    color: #888;
}

.email-thread-body {
    padding: 0.6rem;
}

.email-subject {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--dark-red);
    margin-bottom: 0.25rem;
}

.email-preview {
    display: block;
    font-size: 0.55rem;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.email-thread-meta {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: #f9fafb;
    border-top: 1px solid rgba(139, 154, 70, 0.1);
    align-items: center;
}

.email-type-badge {
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.email-type-badge.lead {
    background: #dbeafe;
    color: #1d4ed8;
}

.email-type-badge.opportunity {
    background: #fed7aa;
    color: #c2410c;
}

.email-type-badge.quote {
    background: #d1fae5;
    color: #047857;
}

.email-type-badge.invoice {
    background: #fef3c7;
    color: #b45309;
}

.email-status {
    font-size: 0.5rem;
    color: #666;
}

.email-status.sent {
    color: #059669;
}

.email-status.received {
    color: #1d4ed8;
}

.email-thread-count {
    font-size: 0.5rem;
    color: #888;
    margin-left: auto;
}

/* ==================== SCREEN DESCRIPTIONS ==================== */

.screen-description {
    background: linear-gradient(135deg, rgba(139, 154, 70, 0.08) 0%, rgba(139, 154, 70, 0.15) 100%);
    border-left: 3px solid var(--golden-green);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem 0;
}

.screen-desc-line {
    font-family: 'Georgia', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dark-red);
    margin: 0;
    padding: 0.35rem 0;
}

.screen-desc-line:first-child {
    padding-top: 0;
}

.screen-desc-line:last-child {
    padding-bottom: 0;
}

.screen-desc-line[data-line="1"] {
    font-weight: 500;
}

.screen-desc-line[data-line="2"] {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .screen-description {
        padding: 0.75rem 1rem;
        margin: 0.75rem 0 1rem 0;
    }

    .screen-desc-line {
        font-size: 0.85rem;
    }
}

/* ==================== CRM MODULE WHY DIFFERENT ==================== */

.crm-why-different {
    background: linear-gradient(135deg,
        rgba(255, 248, 220, 0.95) 0%,
        rgba(255, 253, 240, 0.9) 100%);
    padding: 4rem 2rem;
    margin-top: 3rem;
    border-top: 3px solid var(--golden-green);
}

.crm-module-difference-title {
    text-align: center;
    color: var(--dark-red);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.crm-intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    max-width: 900px;
    margin: 0 auto 3rem auto;
    text-align: center;
    padding: 0 1rem;
}

.crm-intro-text strong {
    color: var(--dark-red);
}

/* CRM Advantage Rows - Zigzag Pattern */
.crm-advantage-row {
    display: flex;
    margin-bottom: 2.5rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.crm-advantage-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(139, 154, 70, 0.2);
    width: 85%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.crm-advantage-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(139, 154, 70, 0.15);
}

.crm-left-aligned {
    margin-right: auto;
    border-left: 4px solid var(--dark-red);
}

.crm-right-aligned {
    margin-left: auto;
    border-right: 4px solid var(--dark-red);
    text-align: right;
}

.crm-right-aligned .crm-advantage-features {
    text-align: left;
    direction: ltr;
}

.crm-advantage-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark-red);
    margin-bottom: 0.75rem;
}

.crm-advantage-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.crm-advantage-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.crm-advantage-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.crm-advantage-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--dark-red);
    font-weight: bold;
}

.crm-advantage-features li strong {
    color: var(--dark-red);
}

.crm-advantage-users {
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(139, 154, 70, 0.3);
}

.crm-advantage-users strong {
    color: var(--dark-red);
}

/* CRM Why Different Responsive Styles */
@media (max-width: 992px) {
    .crm-why-different {
        padding: 3rem 1.5rem;
    }

    .crm-advantage-content {
        width: 90%;
    }

    .crm-module-difference-title {
        font-size: 1.9rem;
    }
}

@media (max-width: 768px) {
    .crm-why-different {
        padding: 2.5rem 1rem;
    }

    .crm-advantage-content {
        width: 100%;
        padding: 1.5rem;
    }

    .crm-right-aligned {
        text-align: left;
        border-right: none;
        border-left: 4px solid var(--dark-red);
    }

    .crm-module-difference-title {
        font-size: 1.6rem;
    }

    .crm-intro-text {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .crm-advantage-title {
        font-size: 1.2rem;
    }

    .crm-advantage-description {
        font-size: 0.95rem;
    }

    .crm-advantage-features li {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .crm-why-different {
        padding: 2rem 0.75rem;
    }

    .crm-module-difference-title {
        font-size: 1.4rem;
    }

    .crm-intro-text {
        font-size: 0.95rem;
    }

    .crm-advantage-content {
        padding: 1.25rem;
    }

    .crm-advantage-title {
        font-size: 1.1rem;
    }

    .crm-advantage-description {
        font-size: 0.9rem;
    }

    .crm-advantage-features li {
        font-size: 0.85rem;
        padding-left: 1.25rem;
    }
}