/* ============================================================
   GLOBAL
============================================================ */

* {
    box-sizing: border-box;
}

html {
    background: #f8fafc;
}

body {
    margin: 0;
    padding: 36px 40px;

    font-family: "Segoe UI", Arial, sans-serif;

    background: #f8fafc;
    color: #26364a;

    line-height: 1.5;
}


/* ============================================================
   APP CONTAINER
============================================================ */

.app-container {
    width: 100%;
    max-width: 1650px;

    margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.app-header {
    position: relative;

    margin-bottom: 30px;
    padding: 10px 4px 20px;

    border-bottom: 1px solid #e5ebf2;
}

.app-header h1 {
    margin: 0;

    color: #000000;

    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.subtitle {
    margin: 5px 0 0;

    color: #7b8b9c;

    font-size: 15px;
    font-weight: 400;
}


/* ============================================================
   SECTION
============================================================ */

.section {
    padding: 24px 26px;

    background: #ffffff;

    border: 1px solid #e5ebf2;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(40, 70, 100, 0.055);
}


/* ============================================================
   SECTION TITLE / HEADER
============================================================ */

.section-title {
    display: flex;

    align-items: center;
    gap: 8px;

    width: calc(100% + 52px);

    margin: -24px -26px 22px;

    padding: 12px 26px;

    background: #eaf3ff;

    border-bottom: 1px solid #d5e5f5;

    border-radius: 13px 13px 0 0;

    color: #26364a;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: -0.01em;
}


/* ============================================================
   SECTION NUMBER
============================================================ */

.section-number {
    display: inline;

    min-width: auto;
    height: auto;

    padding: 0;

    background: transparent;

    border-radius: 0;

    color: inherit;

    font-size: inherit;
    font-weight: inherit;
}

/* ============================================================
   SUB TITLE
============================================================ */

.sub-title {
    margin-top: 24px;
    margin-bottom: 10px;

    color: #47627e;

    font-size: 15px;
    font-weight: 700;
}


/* ============================================================
   FORM GROUP
============================================================ */

.form-group {
    margin-bottom: 18px;
}


/* ============================================================
   BASIC INPUTS
============================================================ */

select,
input {
    width: 100%;
    max-width: 400px;

    padding: 10px 13px;

    margin-top: 5px;

    border: 1px solid #d9e2ec;
    border-radius: 7px;

    background: #ffffff;

    color: #26364a;

    font-family: inherit;
    font-size: 17px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

select:hover,
input:hover {
    border-color: #b9cce0;
}

select:focus,
input:focus {
    border-color: #6ea7e8;

    box-shadow:
        0 0 0 3px rgba(40, 120, 229, 0.09);
}

input::placeholder {
    color: #a0adba;
}


/* ============================================================
   LABEL
============================================================ */

label {
    display: block;

    margin-top: 15px;
    margin-bottom: 4px;

    color: #47627e;

    font-size: 15px;
    font-weight: 600;
}


/* ============================================================
   INPUT DESCRIPTION
============================================================ */

.input-description {
    margin-top: 7px;

    color: #8a99a9;

    font-size: 13px;
}


/* ============================================================
   UNIT
============================================================ */

.unit {
    color: #718096;
}


/* ============================================================
   BUTTON ROW
============================================================ */

.button-row {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


/* ============================================================
   BASIC BUTTON
============================================================ */

button {
    border: none;

    padding: 10px 20px;

    margin-top: 18px;

    border-radius: 7px;

    background: #2878e5;
    color: #ffffff;

    font-family: inherit;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

button:hover {
    background: #185abc;

    box-shadow:
        0 4px 10px rgba(40, 120, 229, 0.18);
}

button:active {
    transform: translateY(1px);
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

button.secondary {
    background: #eef5ff;

    color: #2878e5;

    border: 1px solid #d4e5f8;
}

button.secondary:hover {
    background: #dfeeff;

    color: #185abc;

    box-shadow: none;
}


/* ============================================================
   STATUS MESSAGE
============================================================ */

.status-message {
    margin-top: 12px;

    color: #d04a4a;

    font-size: 14px;
    font-weight: 500;
}


/* ============================================================
   FOOTER
============================================================ */

.app-footer {
    margin-top: 30px;
    padding: 18px 4px;

    border-top: 1px solid #e5ebf2;

    color: #9aa8b7;

    font-size: 13px;

    text-align: center;
}


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

@media (max-width: 900px) {

    body {
        padding: 24px;
    }

    .app-header h1 {
        font-size: 26px;
    }
}


@media (max-width: 600px) {

    body {
        padding: 16px;
    }

    .section {
        padding: 20px 18px;
    }

    .app-header h1 {
        font-size: 23px;
    }

    .section-title {
        font-size: 19px;
    }

    select,
    input {
        font-size: 16px;
    }
}

/* ============================================================
   PHASE MATCHING RESULT TABLE
============================================================ */

.phase-matching-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: auto;

}


/* Table Header */

.phase-matching-table th {

    padding: 12px 16px;

    text-align: left;

    font-weight: 600;

    white-space: nowrap;

    border-bottom: 1px solid #d0d7de;

}


/* Table Cell */

.phase-matching-table td {

    padding: 10px 16px;

    text-align: left;

    border-bottom: 1px solid #e5e7eb;

}


/* Last Row */

.phase-matching-table tbody tr:last-child td {

    border-bottom: none;

}


/* Hover */

.phase-matching-table tbody tr:hover {

    background-color: #f5f7fa;

}


/* Status */

.phase-match-status {

    display: inline-block;

    min-width: 100px;

    padding: 4px 8px;

    border-radius: 4px;

    text-align: center;

}


/* Registered */

.phase-match-status.registered {

    background-color: #e6f4ea;

}


/* Unregistered */

.phase-match-status.unregistered {

    background-color: #fdecea;

}

#factsageResultTable,
#factsageMassFractionTable {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

#factsageResultTable {
    table-layout: fixed;
}

#factsageResultTable th:nth-child(1),
#factsageResultTable td:nth-child(1) {
    width: 60px;
}

#factsageResultTable th:nth-child(2),
#factsageResultTable td:nth-child(2) {
    width: 150px;
}

#factsageResultTable th:nth-child(3),
#factsageResultTable td:nth-child(3) {
    width: 130px;
}

#factsageResultTable th:nth-child(4),
#factsageResultTable td:nth-child(4),
#factsageResultTable th:nth-child(5),
#factsageResultTable td:nth-child(5) {
    width: 220px;
}

#factsageResultTable th, 
#factsageMassFractionTable th {
    padding: 13px 15px;
    border-bottom: 1px solid #dce5ee;
    background: #f3f7fc;
    color: #47627e;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

#factsageResultTable td, 
#factsageMassFractionTable td {
    padding: 13px 15px;
    border-bottom: 1px solid #edf1f5;
    color: #334e68;
    font-size: 14px;
    vertical-align: middle;
}

#factsageResultTable tbody tr:hover, 
#factsageMassFractionTable tbody tr:hover {
    background: #f7faff;
}

/* ============================================================
   FACTSAGE RESULT TABLE LAYOUT
============================================================ */

.factsage-result-table-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 36px;

    width: 100%;
    min-width: 0;

    align-items: start;

}

.factsage-result-raw,
.factsage-result-mass-fraction {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
}

@media (max-width: 900px) {

    .factsage-result-table-layout {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .factsage-result-raw,
    .factsage-result-mass-fraction {
        margin-bottom: 28px;
    }

}


/* ============================================================
   SECTION TITLE
============================================================ */

.factsage-result-raw h4,
.factsage-result-mass-fraction h4 {

    margin: 0 0 12px 0;

    color: #1f3b5b;

    font-size: 15px;

    font-weight: 700;

}