/* =========================================
   OOR (FEP & SIMULATOR) PRODUCT STYLES
   ========================================= */

/* FEP Card */
.fep-card { --card-color: var(--fep-blue); --card-bg: var(--fep-bg); --btn-hover: #0069d9; --shadow-color: rgba(0, 123, 255, 0.15); --grad-end: #60a5fa; }
.fep-card { border-left: 5px solid var(--card-color); }
.fep-card .tool-icon { background: var(--card-bg); color: var(--card-color); }
.fep-card .btn.primary { background: var(--card-color); color: #fff; }
.fep-card .btn.primary:hover { background: var(--btn-hover); }
.fep-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px var(--shadow-color); border-color: var(--card-color); }
.fep-bar {
    position: absolute; bottom: 0; left: 0; width: 0%; height: 4px;
    background: linear-gradient(90deg, var(--card-color), var(--grad-end));
    transition: width 0.4s ease;
}
.fep-card:hover .fep-bar { width: 100%; }

/* Simulator Card */
.simulator-card { --card-color: var(--simulator-green); --card-bg: var(--simulator-bg); --btn-hover: #047857; --shadow-color: rgba(16, 185, 129, 0.15); --grad-end: #34D399; }
.simulator-card { border-left: 5px solid var(--card-color); }
.simulator-card .tool-icon { background: var(--card-bg); color: var(--card-color); }
.simulator-card .btn.primary { background: var(--card-color); color: #fff; }
.simulator-card .btn.primary:hover { background: var(--btn-hover); }
.simulator-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px var(--shadow-color); border-color: var(--card-color); }
.simulator-bar {
    position: absolute; bottom: 0; left: 0; width: 0%; height: 4px;
    background: linear-gradient(90deg, var(--card-color), var(--grad-end));
    transition: width 0.4s ease;
}
.simulator-card:hover .simulator-bar { width: 100%; }

/* Diagnostics Card */
.diagnostics-card { --card-color: var(--diagnostics-purple); --card-bg: var(--diagnostics-bg); --btn-hover: #7c3aed; --shadow-color: rgba(139, 92, 246, 0.15); --grad-end: #a78bfa; }
.diagnostics-card { border-left: 5px solid var(--card-color); }
.diagnostics-card .tool-icon { background: var(--card-bg); color: var(--card-color); }
.diagnostics-card .btn.primary { background: var(--card-color); color: #fff; }
.diagnostics-card .btn.primary:hover { background: var(--btn-hover); }
.diagnostics-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px var(--shadow-color); border-color: var(--card-color); }
.diagnostics-bar {
    position: absolute; bottom: 0; left: 0; width: 0%; height: 4px;
    background: linear-gradient(90deg, var(--card-color), var(--grad-end));
    transition: width 0.4s ease;
}
.diagnostics-card:hover .diagnostics-bar { width: 100%; }

/* Analytics Card (Production Analysis) - often grouped with OOR */
.analytics-card { --card-color: var(--analytics-amber); --card-bg: var(--analytics-bg); --btn-hover: #d97706; --shadow-color: rgba(245, 158, 11, 0.15); --grad-end: #fbbf24; }
.analytics-card { border-left: 5px solid var(--card-color); }
.analytics-card .tool-icon { background: var(--card-bg); color: var(--card-color); }
.analytics-card .btn.primary { background: var(--card-color); color: #fff; }
.analytics-card .btn.primary:hover { background: var(--btn-hover); }
.analytics-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px var(--shadow-color); border-color: var(--card-color); }
.analytics-bar {
    position: absolute; bottom: 0; left: 0; width: 0%; height: 4px;
    background: linear-gradient(90deg, var(--card-color), var(--grad-end));
    transition: width 0.4s ease;
}
.analytics-card:hover .analytics-bar { width: 100%; }

/* Banner */
.oor-banner { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); border-color: #BFDBFE; color: #1E3A8A; }


/* --- FEP VIEW SPECIFIC --- */
.feps-layout-container { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 4rem; }
.fep-project-card {
    background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
    overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.2s ease; margin-bottom: 1rem;
}
.fep-project-card:hover { box-shadow: var(--shadow-lg); border-color: var(--edge-strong); }
.fep-project-header {
    background: var(--panel); padding: 1.5rem 2rem; border-bottom: 1px solid var(--edge);
    display: flex; justify-content: space-between; align-items: center;
}
.fep-project-title { font-size: 1.4rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 1rem; }
.fep-count-badge { background: #E2E8F0; color: var(--muted); font-size: 0.9rem; padding: 2px 8px; border-radius: 99px; font-weight: 700; }
.fep-list { list-style: none; padding: 0; margin: 0; }
.fep-item {
    padding: 1.5rem 2rem; border-bottom: 1px solid #F1F5F9; background: #fff;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; transition: all 0.2s ease;
}
.fep-item:last-child { border-bottom: none; }
.fep-item:hover { background: #F0FDFA; padding-left: 2.2rem; padding-right: 1.8rem; }
.fep-item:hover .fep-title { color: var(--accent); }
.fep-info { display: flex; align-items: center; gap: 1.5rem; }
.fep-icon {
    width: 40px; height: 40px; background: #F1F5F9; color: var(--muted);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.fep-item:hover .fep-icon { background: #E0F2FE; color: #0369A1; }
.fep-meta { display: flex; flex-direction: column; }
.fep-title { font-size: 1.3rem; font-weight: 600; color: var(--text); margin-bottom: 0.2rem; transition: color 0.2s; }
.fep-date { font-size: 1rem; color: var(--muted); }
.fep-status-badge {
    font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
    padding: 0.4rem 1rem; border-radius: 6px; background: #F1F5F9; color: var(--muted);
}
.fep-status-badge.active { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.fep-arrow {
    opacity: 0; transform: translateX(-10px); transition: all 0.2s;
    color: var(--accent); font-weight: bold; font-size: 1.4rem;
}
.fep-item:hover .fep-arrow { opacity: 1; transform: translateX(0); }

/* Fix for FEP View overlap - User Request */
#view-product-feps .content-card { height: 100%; min-height: 60vh; }

/* --- Mobile Assets Table Optimization --- */
@media (max-width: 800px) {
    #project-assets-content table,
    #project-assets-content thead,
    #project-assets-content tbody,
    #project-assets-content tr,
    #project-assets-content td {
        display: block;
    }

    /* Hide Header Row */
    #project-assets-content thead { display: none; }

    /* Card Styling for Row */
    #project-assets-content tbody tr {
        background: inherit;
        border: 1px solid var(--edge);
        /* border-radius: 12px; */
        /* margin-bottom: 1rem; */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        padding: 0;
        overflow: hidden;
    }

    #project-assets-content tbody td {
        padding: 0.8rem 1.2rem !important;
        border: none;
        border-bottom: 1px solid #f1f5f9 !important;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
    }

    #project-assets-content tbody td:last-child {
        border-bottom: none !important;
    }

    /* Add Labels via pseudo-element */
    #project-assets-content tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--muted);
        font-size: 0.85rem;
        text-transform: uppercase;
        margin-right: 1rem;
        text-align: left;
    }

    /* Special Styling for Asset Name (Header like) */
    #project-assets-content tbody td[data-label="Asset"] {
        background: #F8FAFC;
        font-size: 1.2rem;
        font-weight: 700 !important;
        color: var(--text);
        display: block;
        text-align: left;
        padding: 1rem 1.2rem !important;
        border-bottom: 1px solid var(--edge) !important;
    }

    #project-assets-content tbody td[data-label="Asset"]::before {
        display: none;
    }

    /* Action Buttons Row */
    #project-assets-content tbody td[data-label="Action"] {
        justify-content: flex-end;
        background: #fff;
        gap: 0.5rem;
    }
    
    #project-assets-content tbody td[data-label="Action"]::before {
        display: none; /* Hide 'Action' label */
    }
}

/* =========================================
   DARK MODE OVERRIDES
   ========================================= */
[data-theme="dark"] .product-card:hover {
    background:transparent;
}
[data-theme="dark"] .fep-project-card {
    background: var(--panel);
    border-color: var(--edge);
}

[data-theme="dark"] .fep-project-header {
    background: var(--edge);
    border-bottom-color: var(--edge);
}

[data-theme="dark"] .fep-project-title {
    color: var(--text);
}

[data-theme="dark"] .fep-count-badge {
    background: var(--hover-bg);
    color: var(--muted);
}

[data-theme="dark"] .fep-item {
    background: var(--panel);
    border-bottom-color: var(--edge);
}

[data-theme="dark"] .fep-item:hover {
    background: var(--hover-bg);
}

[data-theme="dark"] .fep-title {
    color: var(--text);
}

[data-theme="dark"] .fep-icon {
    background: var(--hover-bg);
    color: var(--muted);
}

[data-theme="dark"] .fep-item:hover .fep-icon {
    background: #1e3a8a; /* Dark blue highlight */
    color: #3b82f6;
}

[data-theme="dark"] .fep-status-badge {
    background: var(--bg);
    color: var(--muted);
}

[data-theme="dark"] #project-assets-content tbody td {
    background-color:var(--bg-secondary);
}

[data-theme="dark"] #project-assets-content tbody tr {
    background-color: var(--bg);
    border: 10px solid var(--bg);
    /* margin-bottom: 2rem; */
}

[data-theme="dark"] #project-assets-content table, 
[data-theme="dark"] #project-assets-content thead, 
[data-theme="dark"] #project-assets-content tbody, 
[data-theme="dark"] #project-assets-content tr, 
[data-theme="dark"] #project-assets-content td {
    background-color: var(--panel);
}
[data-theme="dark"] .phase-econ-container.landscape-active {
    background-color: var(--bg);
}