/* ============================================================
   DETECTED ELEMENTS
============================================================ */

.detected-elements {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 10px;

    padding: 12px;

    min-height: 42px;

    align-items: center;

    background: var(--color-gray-soft);

    border: 1px solid var(--color-border);

    border-radius: 8px;
}


.element-tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    background: var(--color-teal-soft);

    border: 1px solid var(--color-teal-soft-border);

    border-radius: 6px;

    color: var(--color-teal);

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


/* ============================================================
   CRYSTAL STRUCTURE INFORMATION
============================================================ */

.structure-information {
    margin-top: 20px;
}


/* ============================================================
   STRUCTURE INFORMATION GRID
============================================================ */

.structure-info-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 14px;
    margin-bottom: 22px;
}


/* ============================================================
   STRUCTURE INFORMATION CARD
============================================================ */

.info-item {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 8px;

    min-height: 78px;

    padding: 14px 16px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 10px;

    box-shadow:
        0 2px 8px rgba(80, 100, 127, 0.06);
}


.info-label {
    font-size: 12px;

    font-weight: 600;

    color: var(--color-text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.info-value {
    font-size: 16px;

    font-weight: 700;

    color: var(--color-text);

    word-break: break-word;
}


/* ============================================================
   LATTICE PARAMETERS
============================================================ */

.lattice-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 10px;
    margin-bottom: 22px;
}


.lattice-grid > div {
    padding: 14px 16px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 10px;

    box-shadow:
        0 2px 8px rgba(80, 100, 127, 0.06);
}


.lattice-grid label {
    margin-top: 0;
    margin-bottom: 7px;
}


/* ============================================================
   CRYSTAL ANGLES
============================================================ */

.angle-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 10px;
    margin-bottom: 22px;
}


/* ============================================================
   CRYSTAL ANGLE INFORMATION CARD
============================================================ */

.angle-grid > div {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 8px;

    min-height: 78px;

    padding: 14px 16px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 10px;

    box-shadow:
        0 2px 8px rgba(80, 100, 127, 0.06);
}


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

.angle-grid label {
    margin-top: 0;
    margin-bottom: 0;

    color: var(--color-text-secondary);

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

    letter-spacing: 0.04em;
}


/* ============================================================
   READONLY ANGLE INPUT
============================================================ */

.angle-grid .unit-input {
    display: flex;

    align-items: baseline;

    gap: 5px;
}


/* ============================================================
   ANGLE VALUE
============================================================ */

.angle-grid input {
    width: auto;
    max-width: none;

    padding: 0;

    margin: 0;

    border: none;

    background: transparent;

    box-shadow: none;

    color: var(--color-text);

    font-family: inherit;

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

    outline: none;

    cursor: default;
}


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

.angle-grid .unit {
    min-width: auto;

    color: var(--color-text-secondary);

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

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

.unit-input {
    display: flex;

    align-items: center;

    gap: 8px;
}


.unit-input input {
    flex: 1;

    min-width: 0;

    max-width: none;
}


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

.unit {
    min-width: 28px;

    font-size: 13px;

    font-weight: 600;

    color: var(--color-text-secondary);

    white-space: nowrap;
}


/* ============================================================
   MAGNETIC PROPERTIES
============================================================ */

.results-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;

    margin-top: 16px;
}


/* ============================================================
   RESULT CARD
============================================================ */

.result-card {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 135px;

    padding: 20px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 12px;

    text-align: center;

    box-shadow:
        0 3px 10px rgba(80, 100, 127, 0.07);
}


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

.result-label {
    font-size: 13px;

    font-weight: 600;

    color: var(--color-text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


/* ============================================================
   RESULT VALUE
============================================================ */

.result-value {
    margin-top: 9px;

    color: var(--color-yellow);

    font-size: 28px;

    font-weight: 700;

    line-height: 1.2;
}


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

.result-unit {
    margin-top: 5px;

    color: var(--color-text-secondary);

    font-size: 13px;

    font-weight: 500;
}


/* ============================================================
   PHASE DATABASE
============================================================ */

.table-wrapper {
    width: 100%;

    margin-top: 20px;

    overflow-x: auto;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 12px;

    box-shadow:
        0 3px 10px rgba(80, 100, 127, 0.06);
}


/* ============================================================
   DATABASE TABLE
============================================================ */

#phaseDatabaseTable,
.factsage-result-comparison-table {
    width: 100%;

    min-width: 850px;

    border-collapse: collapse;
}


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

#phaseDatabaseTable thead,
.factsage-result-comparison-table thead {
    background: var(--color-gray-soft);
}


#phaseDatabaseTable th,
.factsage-result-comparison-table th {
    padding: 13px 15px;

    border-bottom: 1px solid var(--color-border);

    color: var(--color-navy);

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

    text-align: center;

    white-space: nowrap;
}


/* ============================================================
   TABLE BODY
============================================================ */

#phaseDatabaseTable td,
.factsage-result-comparison-table td {
    padding: 13px 15px;

    border-bottom: 1px solid var(--color-border);

    color: var(--color-text);

    font-size: 14px;

    vertical-align: middle;
}


/* FactSage Result 탭 표만 내용을 중앙 정렬한다 (Phase Magnetization DB의
   #phaseDatabaseTable은 대상이 아니므로 별도 규칙으로 분리) */
.factsage-result-comparison-table td {
    text-align: center;
}


#phaseDatabaseTable tbody tr:last-child td,
.factsage-result-comparison-table tbody tr:last-child td {
    border-bottom: none;
}


/* ============================================================
   TABLE ROW
============================================================ */

#phaseDatabaseTable tbody tr,
.factsage-result-comparison-table tbody tr {
    transition: background 0.15s ease;
}


#phaseDatabaseTable tbody tr:hover,
.factsage-result-comparison-table tbody tr:hover {
    background: var(--color-yellow-soft);
}


/* ============================================================
   PHASE NAME
============================================================ */

#phaseDatabaseTable td:first-child {
    color: var(--color-navy);

    font-weight: 700;
}


.factsage-result-comparison-table {
    min-width: 1050px;
}


.factsage-result-comparison-table th:first-child,
.factsage-result-comparison-table td:first-child {
    width: 52px;

    color: inherit;

    font-weight: inherit;
    text-align: center;
}


.factsage-result-comparison-table th:nth-child(2),
.factsage-result-comparison-table td:nth-child(2) {
    min-width: 260px;
}


.factsage-result-comparison-table th:nth-child(5),
.factsage-result-comparison-table td:nth-child(5) {
    min-width: 240px;
}


.factsage-result-comparison-table input[type="checkbox"] {
    width: auto;
    max-width: none;

    margin: 0;
    padding: 0;
}


.result-comparison-sort-button {
    display: inline-flex;

    align-items: center;
    gap: 5px;

    margin: 0;
    padding: 0;

    border: none;

    background: transparent;

    color: inherit;

    font: inherit;

    cursor: pointer;
}


.result-comparison-sort-button:hover {
    background: transparent;

    color: var(--color-navy);

    box-shadow: none;
}


.result-comparison-toolbar {
    display: flex;

    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 12px;
}


.result-comparison-toolbar button {
    margin-top: 0;

    padding: 7px 14px;

    font-size: 13px;
}


.result-comparison-filter-summary {
    margin-left: auto;

    color: var(--color-text-secondary);

    font-size: 13px;
}


.result-comparison-search-input {
    width: auto;
    max-width: 220px;

    margin: 0;
    padding: 7px 10px;

    border: 1px solid var(--color-border);
    border-radius: 5px;

    background: var(--color-surface);
    color: inherit;

    font-size: 13px;
}


.result-comparison-selection-summary {
    margin-bottom: 12px;

    padding: 8px 12px;

    border: 1px solid var(--color-border);
    border-radius: 6px;

    background: var(--color-gray-soft);

    color: var(--color-text-secondary);

    font-size: 13px;
    line-height: 1.5;
}


.result-comparison-filter-group {
    display: flex;

    flex-wrap: wrap;
    gap: 6px;

    margin-top: 6px;
}


.result-comparison-filter-select {
    width: auto;
    max-width: none;

    padding: 3px 6px;

    border: 1px solid var(--color-border);
    border-radius: 5px;

    background: var(--color-surface);
    color: inherit;

    font-size: 11px;
    font-weight: 500;

    cursor: pointer;
}


.result-comparison-empty-cell {
    padding: 20px 12px;

    color: var(--color-text-secondary);

    text-align: center;
}


/* ============================================================
   COMPOSITION FILTER (POPOVER)
============================================================ */

.result-comparison-composition-filter {
    position: relative;

    margin-top: 6px;
}


.result-comparison-composition-filter summary {
    list-style: none;

    padding: 3px 8px;

    border: 1px solid var(--color-border);
    border-radius: 5px;

    background: var(--color-surface);

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

    cursor: pointer;
}


.result-comparison-composition-filter summary::-webkit-details-marker {
    display: none;
}


.result-comparison-composition-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;

    display: flex;
    flex-direction: column;
    gap: 10px;

    width: max-content;
    min-width: 220px;

    padding: 12px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 8px;

    box-shadow:
        0 8px 20px rgba(80, 100, 127, 0.15);

    text-transform: none;

    font-weight: 400;
}


.result-comparison-composition-filter-active {
    display: flex;

    flex-wrap: wrap;
    gap: 6px;
}


.result-comparison-composition-filter-empty,
.result-comparison-composition-filter-hint {
    color: var(--color-text-secondary);

    font-size: 12px;
}


.result-comparison-composition-filter-chip {
    display: inline-flex;

    align-items: center;
    gap: 5px;

    padding: 4px 8px;

    background: var(--color-teal-soft);

    border: 1px solid var(--color-teal-soft-border);
    border-radius: 6px;

    color: var(--color-teal-dark);

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


.result-comparison-composition-filter-remove {
    margin-top: 0;
    padding: 0;

    border: none;

    background: transparent;
    color: inherit;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}


.result-comparison-composition-filter-remove:hover {
    background: transparent;

    color: var(--color-danger);

    box-shadow: none;
}


.result-comparison-composition-filter-add {
    display: flex;

    align-items: center;
    gap: 6px;
}


.result-comparison-composition-filter-add select {
    width: auto;
    max-width: none;

    padding: 3px 6px;

    border: 1px solid var(--color-border);
    border-radius: 5px;

    background: var(--color-surface);
    color: inherit;

    font-size: 12px;

    cursor: pointer;
}


.result-comparison-composition-filter-add button {
    margin-top: 0;

    padding: 5px 10px;

    font-size: 12px;
}


/* ============================================================
   COMPOSITION CELL (CHIPS + OVERFLOW POPOVER)
============================================================ */

.result-comparison-composition-chips {
    display: flex;

    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


.result-comparison-composition-more {
    position: relative;

    display: inline-block;
}


.result-comparison-composition-more summary {
    list-style: none;

    padding: 4px 8px;

    background: var(--color-gray-soft);

    border: 1px solid var(--color-border);
    border-radius: 6px;

    color: var(--color-text-secondary);

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

    cursor: pointer;
}


.result-comparison-composition-more summary::-webkit-details-marker {
    display: none;
}


.result-comparison-composition-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;

    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    width: max-content;
    max-width: 320px;

    padding: 10px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 8px;

    box-shadow:
        0 8px 20px rgba(80, 100, 127, 0.15);
}


.result-comparison-charts-row {
    display: flex;

    flex-wrap: wrap;
    gap: 24px;
}


.result-comparison-chart-col {
    flex: 1 1 420px;
    min-width: 0;
}


.result-comparison-x-axis {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 20px;
}


.result-comparison-x-axis-select {
    display: flex;

    align-items: center;
    gap: 10px;

    font-size: 13px;
}

.result-comparison-x-axis-select select {
    width: auto;

    padding: 5px 8px;
    margin-top: 0;

    font-size: 13px;
}

.result-comparison-x-axis-select label {
    margin: 0;

    font-size: 13px;
}


.result-comparison-elements {
    display: flex;

    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}


.result-comparison-chart-box {
    display: flex;
    flex-direction: column;

    height: 360px;
}


.result-comparison-canvas-wrapper {
    position: relative;

    flex: 1 1 auto;
    min-height: 0;
}


.result-comparison-color-legend {
    display: flex;

    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;

    flex: none;

    margin-bottom: 2px;
}


.result-comparison-color-legend-item {
    display: inline-flex;

    align-items: center;
    gap: 6px;

    padding: 5px 10px;

    background: var(--color-gray-soft);

    border: 1px solid var(--color-border);
    border-radius: 6px;

    color: var(--color-text);

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


.result-comparison-color-legend-swatch {
    width: 16px;
    height: 16px;

    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: 3px;

    background: none;

    cursor: pointer;
}

.result-comparison-color-legend-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
}

.result-comparison-color-legend-swatch::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

.result-comparison-color-legend-swatch::-moz-color-swatch {
    border: none;
    border-radius: 2px;
}


.phase-legend {
    display: flex;

    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 12px;
}


.phase-legend-item {
    display: inline-flex;

    align-items: center;
    gap: 6px;

    padding: 5px 10px;

    background: var(--color-gray-soft);

    border: 1px solid var(--color-border);
    border-radius: 6px;

    color: var(--color-text);

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

    cursor: pointer;
}


.phase-legend-swatch {
    display: inline-block;

    width: 10px;
    height: 10px;

    border-radius: 2px;

    flex: none;
}


.phase-legend-tooltip {
    position: absolute;

    transform: translate(-50%, calc(-100% - 6px));

    padding: 0;

    background: transparent;

    color: var(--color-text);

    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;

    pointer-events: none;
    z-index: 10;
}


/* ============================================================
   ELEMENT TAGS INSIDE TABLE
============================================================ */

#phaseDatabaseTable .element-tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin: 2px;

    padding: 4px 8px;

    background: var(--color-teal-soft);

    border: 1px solid var(--color-teal-soft-border);

    border-radius: 5px;

    color: var(--color-teal);

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


/* ============================================================
   ACTION BUTTONS
============================================================ */

#phaseDatabaseTable button {
    margin: 0;

    padding: 6px 11px;

    border-radius: 6px;

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


/* ============================================================
   EMPTY DATABASE
============================================================ */

.empty-database {
    padding: 40px !important;

    color: var(--color-text-secondary) !important;

    font-size: 14px !important;

    text-align: center;
}


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

@media (max-width: 600px) {

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

    .lattice-grid,
    .angle-grid {
        grid-template-columns: 1fr;
    }
}