/* ============================================================
 * FORMULA-X styles
 * Inter font, Bootstrap 5 base, teal/amber design system.
 * ============================================================ */

/* ── Step color palette ──────────────────────────────────── */
:root {
    --fx-step-1: #0f766e;   /* teal    - Design        */
    --fx-step-1-light: #ccfbf1;
    --fx-step-2: #2563eb;   /* blue    - Data          */
    --fx-step-2-light: #dbeafe;
    --fx-step-3: #7c3aed;   /* violet  - Modeling      */
    --fx-step-3-light: #ede9fe;
    --fx-step-4: #d97706;   /* amber   - Optimisation  */
    --fx-step-4-light: #fef3c7;
    --fx-step-5: #059669;   /* emerald - Bayesian Opt  */
    --fx-step-5-light: #d1fae5;
    --fx-step-6: #475569;   /* slate   - Export        */
    --fx-step-6-light: #f1f5f9;
}

/* ── Hero (workshop / about page) ────────────────────────── */
.formula-x-hero {
    background: linear-gradient(135deg, #0f766e 0%, #134e4a 50%, #0d9488 100%);
    color: #fff;
    border-radius: .75rem;
}

.formula-x-hero h1,
.formula-x-hero p,
.formula-x-hero .small,
.formula-x-hero .text-muted {
    color: #fff !important;
}

/* ── Generic cards (about / workshop pages) ──────────────── */
.formula-x-card {
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow .2s ease;
    border-radius: .6rem;
}

.formula-x-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
}

.formula-angle-card {
    border: 1px solid rgba(15,118,110,.15);
    background: rgba(15,118,110,.03);
    border-radius: .5rem;
    padding: 1rem;
    height: 100%;
}

.formula-angle-card h5,
.formula-angle-card h6 {
    margin-bottom: .35rem;
}

/* ── Project detail header ───────────────────────────────── */
.formula-x-project-detail .badge {
    font-weight: 500;
}

/* ── Live-table anti-flicker ─────────────────────────────── */
/* Every time a loadXxx() replaces tbody.innerHTML, new <tr>
   nodes are created and this animation fires automatically.   */
@keyframes fx-row-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fx-live-table tbody tr {
    animation: fx-row-in 0.18s ease both;
}
/* Dim the whole table while a refresh is in-flight.
   JS adds/removes .fx-refreshing via FORMULA_X.startLoad / endLoad. */
.fx-live-table.fx-refreshing {
    opacity: 0.45;
    transition: opacity 0.12s ease;
    pointer-events: none;
}
.fx-live-table {
    transition: opacity 0.15s ease;
}

.fx-project-header {
    background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
    border: 1px solid #99f6e4;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.fx-project-header .project-domain-badge {
    background: var(--fx-step-1-light);
    color: var(--fx-step-1);
    border: 1px solid rgba(15,118,110,.2);
    font-weight: 600;
    font-size: .75rem;
    padding: .25rem .65rem;
    border-radius: 50px;
}

.fx-project-header .project-status-badge {
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 50px;
}

/* ── Workflow Stepper Navigation ─────────────────────────── */
.fx-workflow-nav {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    padding: 1rem 1.25rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fx-workflow-steps {
    display: flex;
    align-items: flex-end;
    gap: 0;
    min-width: max-content;
}

/* Each step button */
.fx-step-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: .65rem 1rem .75rem;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    color: #94a3b8;
    min-width: 88px;
    text-align: center;
    white-space: nowrap;
}

.fx-step-btn:hover {
    color: #475569;
    background: rgba(0,0,0,.03);
}

/* Colored underline */
.fx-step-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background .2s;
}

/* Step number circle */
.fx-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    line-height: 1;
}

.fx-step-icon {
    font-size: .95rem;
    transition: color .2s;
}

.fx-step-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: color .2s;
}

/* Arrow connectors between steps */
.fx-step-arrow {
    color: #cbd5e1;
    font-size: .6rem;
    padding: 0 .15rem;
    padding-bottom: .85rem;
    flex-shrink: 0;
}

/* ── Active state per step ───────────────────────────────── */
.fx-step-btn[data-step="1"].active,
.fx-step-btn[data-step="1"]:focus-visible { color: var(--fx-step-1); }
.fx-step-btn[data-step="1"].active .fx-step-num { background: var(--fx-step-1); color: #fff; }
.fx-step-btn[data-step="1"].active::after { background: var(--fx-step-1); }
.fx-step-btn[data-step="1"].active { background: rgba(15,118,110,.06); }

.fx-step-btn[data-step="2"].active,
.fx-step-btn[data-step="2"]:focus-visible { color: var(--fx-step-2); }
.fx-step-btn[data-step="2"].active .fx-step-num { background: var(--fx-step-2); color: #fff; }
.fx-step-btn[data-step="2"].active::after { background: var(--fx-step-2); }
.fx-step-btn[data-step="2"].active { background: rgba(37,99,235,.06); }

.fx-step-btn[data-step="3"].active,
.fx-step-btn[data-step="3"]:focus-visible { color: var(--fx-step-3); }
.fx-step-btn[data-step="3"].active .fx-step-num { background: var(--fx-step-3); color: #fff; }
.fx-step-btn[data-step="3"].active::after { background: var(--fx-step-3); }
.fx-step-btn[data-step="3"].active { background: rgba(124,58,237,.06); }

.fx-step-btn[data-step="4"].active,
.fx-step-btn[data-step="4"]:focus-visible { color: var(--fx-step-4); }
.fx-step-btn[data-step="4"].active .fx-step-num { background: var(--fx-step-4); color: #fff; }
.fx-step-btn[data-step="4"].active::after { background: var(--fx-step-4); }
.fx-step-btn[data-step="4"].active { background: rgba(217,119,6,.06); }

.fx-step-btn[data-step="5"].active,
.fx-step-btn[data-step="5"]:focus-visible { color: var(--fx-step-5); }
.fx-step-btn[data-step="5"].active .fx-step-num { background: var(--fx-step-5); color: #fff; }
.fx-step-btn[data-step="5"].active::after { background: var(--fx-step-5); }
.fx-step-btn[data-step="5"].active { background: rgba(5,150,105,.06); }

.fx-step-btn[data-step="6"].active,
.fx-step-btn[data-step="6"]:focus-visible { color: var(--fx-step-6); }
.fx-step-btn[data-step="6"].active .fx-step-num { background: var(--fx-step-6); color: #fff; }
.fx-step-btn[data-step="6"].active::after { background: var(--fx-step-6); }
.fx-step-btn[data-step="6"].active { background: rgba(71,85,105,.06); }

/* Hover num color hint */
.fx-step-btn[data-step="1"]:hover .fx-step-num { background: var(--fx-step-1-light); color: var(--fx-step-1); }
.fx-step-btn[data-step="2"]:hover .fx-step-num { background: var(--fx-step-2-light); color: var(--fx-step-2); }
.fx-step-btn[data-step="3"]:hover .fx-step-num { background: var(--fx-step-3-light); color: var(--fx-step-3); }
.fx-step-btn[data-step="4"]:hover .fx-step-num { background: var(--fx-step-4-light); color: var(--fx-step-4); }
.fx-step-btn[data-step="5"]:hover .fx-step-num { background: var(--fx-step-5-light); color: var(--fx-step-5); }
.fx-step-btn[data-step="6"]:hover .fx-step-num { background: var(--fx-step-6-light); color: var(--fx-step-6); }

/* ── Tab content panel ───────────────────────────────────── */
.formula-x-tab-content {
    background: #fff;
    min-height: 300px;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
    transition: border-top-color .25s ease;
}

/* Active step paints the top border + a subtle inner glow.
   JS toggles data-active-step on .formula-x-tab-content. */
.formula-x-tab-content[data-active-step="1"] { border-top-color: var(--fx-step-1); }
.formula-x-tab-content[data-active-step="2"] { border-top-color: var(--fx-step-2); }
.formula-x-tab-content[data-active-step="3"] { border-top-color: var(--fx-step-3); }
.formula-x-tab-content[data-active-step="4"] { border-top-color: var(--fx-step-4); }
.formula-x-tab-content[data-active-step="5"] { border-top-color: var(--fx-step-5); }
.formula-x-tab-content[data-active-step="6"] { border-top-color: var(--fx-step-6); }

/* Top border changes with active step (set via JS data-active-step) */
.formula-x-tab-content[data-active-step="1"] { border-top-color: var(--fx-step-1); }
.formula-x-tab-content[data-active-step="2"] { border-top-color: var(--fx-step-2); }
.formula-x-tab-content[data-active-step="3"] { border-top-color: var(--fx-step-3); }
.formula-x-tab-content[data-active-step="4"] { border-top-color: var(--fx-step-4); }
.formula-x-tab-content[data-active-step="5"] { border-top-color: var(--fx-step-5); }
.formula-x-tab-content[data-active-step="6"] { border-top-color: var(--fx-step-6); }

/* ── Per-step card header accents ────────────────────────── */
/* Single accent point: icon + title color only.
   No extra borders or gradients on card headers - the tab
   content top border and fx-step-info already identify the step. */

#tab-design   .card-header h6, #tab-design   .card-header .card-title { color: var(--fx-step-1); }
#tab-design   .card-header > i, #tab-design   .card-header h6 > i { color: var(--fx-step-1); }

#tab-data     .card-header h6, #tab-data     .card-header .card-title { color: var(--fx-step-2); }
#tab-data     .card-header > i, #tab-data     .card-header h6 > i { color: var(--fx-step-2); }

#tab-modeling .card-header h6, #tab-modeling .card-header .card-title { color: var(--fx-step-3); }
#tab-modeling .card-header > i, #tab-modeling .card-header h6 > i { color: var(--fx-step-3); }

#tab-optimization .card-header h6, #tab-optimization .card-header .card-title { color: var(--fx-step-4); }
#tab-optimization .card-header > i, #tab-optimization .card-header h6 > i { color: var(--fx-step-4); }

#tab-bo   .card-header h6, #tab-bo   .card-header .card-title { color: var(--fx-step-5); }
#tab-bo   .card-header > i, #tab-bo   .card-header h6 > i { color: var(--fx-step-5); }

#tab-export   .card-header h6, #tab-export   .card-header .card-title { color: var(--fx-step-6); }
#tab-export   .card-header > i, #tab-export   .card-header h6 > i { color: var(--fx-step-6); }

/* ── FORMULA-X primary buttons (teal throughout) ─────────── */
/* Scoped to the project detail wrapper so other pages aren't affected. */
.formula-x-project-detail .btn-primary,
.formula-x-project-detail .btn.btn-primary {
    background: var(--fx-step-1);
    border-color: var(--fx-step-1);
}
.formula-x-project-detail .btn-primary:hover,
.formula-x-project-detail .btn.btn-primary:hover {
    filter: brightness(0.88);
    border-color: var(--fx-step-1);
}
.formula-x-project-detail .btn-outline-primary {
    color: var(--fx-step-1);
    border-color: var(--fx-step-1);
}
.formula-x-project-detail .btn-outline-primary:hover {
    background: var(--fx-step-1);
    color: #fff;
}
/* Modals are outside .formula-x-project-detail so scope them here */
.modal .btn-primary {
    background: var(--fx-step-1);
    border-color: var(--fx-step-1);
}
.modal .btn-primary:hover {
    filter: brightness(0.88);
    border-color: var(--fx-step-1);
}

/* ── Step info banner ────────────────────────────────────── */
.fx-step-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border-left: 3px solid;
    border-top: none;
    border-right: none;
    border-bottom: none;
    background: #f8fafc;
    color: #475569;
}

.fx-step-info[data-step="1"] { border-left-color: var(--fx-step-1); }
.fx-step-info[data-step="1"] strong { color: var(--fx-step-1); }
.fx-step-info[data-step="1"] i { color: var(--fx-step-1); }

.fx-step-info[data-step="2"] { border-left-color: var(--fx-step-2); }
.fx-step-info[data-step="2"] strong { color: var(--fx-step-2); }
.fx-step-info[data-step="2"] i { color: var(--fx-step-2); }

.fx-step-info[data-step="3"] { border-left-color: var(--fx-step-3); }
.fx-step-info[data-step="3"] strong { color: var(--fx-step-3); }
.fx-step-info[data-step="3"] i { color: var(--fx-step-3); }

.fx-step-info[data-step="4"] { border-left-color: var(--fx-step-4); }
.fx-step-info[data-step="4"] strong { color: var(--fx-step-4); }
.fx-step-info[data-step="4"] i { color: var(--fx-step-4); }

.fx-step-info[data-step="5"] { border-left-color: var(--fx-step-5); }
.fx-step-info[data-step="5"] strong { color: var(--fx-step-5); }
.fx-step-info[data-step="5"] i { color: var(--fx-step-5); }

.fx-step-info[data-step="6"] { border-left-color: var(--fx-step-6); }
.fx-step-info[data-step="6"] strong { color: var(--fx-step-6); }
.fx-step-info[data-step="6"] i { color: var(--fx-step-6); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .fx-step-btn { min-width: 70px; padding: .5rem .6rem .65rem; }
    .fx-step-label { display: none; }
    .fx-step-icon { font-size: 1.05rem; }
    .fx-step-num { width: 22px; height: 22px; font-size: .65rem; }
    .fx-step-arrow { padding-bottom: .7rem; }
    .fx-workflow-nav { padding: .75rem .75rem 0; }
}

@media (max-width: 480px) {
    .fx-step-icon { display: none; }
    .fx-step-num { width: 28px; height: 28px; font-size: .72rem; }
}

/* ============================================================
 * Comparison matrix (about page)
 * ============================================================ */

.formula-cmp-wrapper {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .5rem;
    background: #fff;
}

.formula-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.formula-cmp-table th,
.formula-cmp-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    vertical-align: middle;
    text-align: center;
    line-height: 1.35;
}

.formula-cmp-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    color: #fff;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #0a6560;
    z-index: 2;
}

.formula-cmp-table th.formula-cmp-cap {
    text-align: left;
    width: 32%;
}

.formula-cmp-table tbody th[scope="row"] {
    text-align: left;
    font-weight: 500;
    background: rgba(15,118,110,.03);
}

.formula-cmp-table tbody tr:nth-child(odd) td {
    background: rgba(0,0,0,.02);
}

.formula-cmp-table tr.formula-cmp-section td {
    background: #f1f3f5;
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .05em;
    text-align: left;
    padding: .45rem .75rem;
}

.formula-cmp-table tbody td:nth-child(2) {
    background: rgba(15,118,110,.08) !important;
    border-left: 2px solid var(--fx-step-1);
    border-right: 2px solid var(--fx-step-1);
}
.formula-cmp-table thead th:nth-child(2) {
    border-left: 2px solid var(--fx-step-1);
    border-right: 2px solid var(--fx-step-1);
}

.formula-cmp-table td.ok    { color: #1b8e62; font-weight: 600; }
.formula-cmp-table td.no    { color: #c0392b; }
.formula-cmp-table td.part  { color: #b8860b; font-style: italic; }
.formula-cmp-table td.manual{ color: #6c757d; font-style: italic; }

.formula-cmp-partial {
    color: #b8860b;
    font-style: italic;
    border-bottom: 1px dashed #b8860b;
}

.formula-cmp-manual {
    color: #6c757d;
    font-style: italic;
}

.formula-cmp-callout {
    border-left: 4px solid;
    padding: .9rem 1rem;
    border-radius: .35rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    height: 100%;
}

.formula-cmp-callout h6 {
    margin-bottom: .5rem;
}