/* ==========================================================================
   CleanImp Benchmark Dashboard
   ==========================================================================

   This stylesheet controls:
     - General page colors and typography
     - Filter controls
     - Algorithm selection
     - Plot and result cards
     - Results table
     - Responsive behavior for smaller screens

   The visual values are kept equivalent to the original stylesheet.
   The CSS has only been expanded and organized to make it easier to read,
   understand, and maintain.
   ========================================================================== */


/* ==========================================================================
   1. Global settings
   ========================================================================== */

/* Use border-box everywhere so padding and borders are included in dimensions. */
* {
    box-sizing: border-box;
}


/* Main dashboard typography and page colors. */
:root {
    font-family: Inter, Arial, sans-serif;
    color: #172033;
    background: #f5f7fb;
}


body {
    margin: 0;
}


/* ==========================================================================
   2. Header
   ========================================================================== */

header {
    padding: 22px 4%;
    background: #172033;
    color: #fff;
}


header h1 {
    margin: 0 0 4px;
    font-size: 1.7rem;
}


header p {
    margin: 0;
    color: #cbd5e1;
}


/* ==========================================================================
   3. Main page
   ========================================================================== */

main {
    padding: 20px 4% 35px;
}


/* ==========================================================================
   4. Filters
   ========================================================================== */

/*
 * Main filter panel.
 *
 * Seven columns are used on large screens because the dashboard can expose:
 * experiment, task, metric, classifier/forecaster, pattern, dataset and family.
 */
.filters {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 14px;

    padding: 18px;

    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
}


/* Labels and bold text inside controls. */
label,
b {
    font-size: 13px;
}


/* Dropdown controls. */
select {
    display: block;
    width: 100%;

    margin-top: 6px;
    padding: 9px;

    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
}


/* ==========================================================================
   5. Algorithm selector
   ========================================================================== */

/*
 * The algorithm selector occupies the complete width of the filter grid.
 */
.algobox {
    grid-column: 1 / -1;
}


/* Header above the algorithm checkboxes. */
.algoh {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 9px;
}


/* Container for actions such as "All" and "None". */
.algoh span {
    display: flex;
    gap: 7px;
}


/* Algorithm checkboxes are displayed horizontally and wrap when necessary. */
#algos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}


#algos label {
    font-weight: 400;
    white-space: nowrap;
}


/* Buttons used by the algorithm selector. */
button {
    padding: 6px 10px;

    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;

    cursor: pointer;
}


/* ==========================================================================
   6. Dashboard status / chart heading
   ========================================================================== */

.status {
    display: flex;
    justify-content: space-between;

    gap: 12px;
    padding: 16px 2px 10px;
}


/* Main dataset / pattern title. */
.status strong {
    font-size: 18px;
}


/*
 * Secondary information, for example:
 * "6 selected algorithms · Downstream / Forecasting · chronos · SMAPE"
 */
.status span {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}


/* ==========================================================================
   7. Plot and table cards
   ========================================================================== */

.plotcard,
.tablecard {
    padding: 8px;

    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
}


/* Plot height used by Plotly. */
#plot {
    height: 552.5px;
}


/* Results table card. */
.tablecard {
    margin-top: 16px;
    padding: 16px;
}


/* ==========================================================================
   8. Results table heading
   ========================================================================== */

.tabletitle {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
}


.tabletitle h2 {
    margin: 0;
    font-size: 1.05rem;
}


.tabletitle span {
    font-size: 13px;
    color: #64748b;
}


/* ==========================================================================
   9. Results table
   ========================================================================== */

/*
 * Allow horizontal scrolling if the result table is wider than the screen.
 */
.tablewrap {
    overflow-x: auto;
}


table {
    width: 100%;

    border-collapse: collapse;
    font-size: 13px;
}


th,
td {
    padding: 9px 12px;

    border-bottom: 1px solid #e5e7eb;

    text-align: right;
    white-space: nowrap;
}


/* Table column headers. */
th {
    background: #f8fafc;

    font-weight: 700;
    color: #334155;
}


/*
 * Keep the algorithm-name column visible while horizontally scrolling.
 */
th:first-child,
td:first-child {
    position: sticky;
    left: 0;

    text-align: left;
    background: inherit;
}


/* Highlight the row currently under the mouse pointer. */
tbody tr:hover {
    background: #f8fafc;
}


/* Visual treatment for missing / unavailable values. */
.missing {
    color: #94a3b8;
}


/* ==========================================================================
   10. Utility classes
   ========================================================================== */

/*
 * Used by JavaScript to hide controls that are irrelevant to the current view.
 *
 * Examples:
 *   - Classifier is hidden outside Downstream / Classification.
 *   - Forecaster is hidden outside Downstream / Forecasting.
 *   - Family is hidden for downstream experiments.
 */
.hidden {
    display: none !important;
}


/* ==========================================================================
   11. Responsive layout
   ========================================================================== */

/*
 * Medium screens:
 * reduce the filter panel to three columns and stack status/table headings.
 */
@media (max-width: 950px) {

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

    .status,
    .tabletitle {
        flex-direction: column;
        align-items: flex-start;
    }
}


/*
 * Small screens:
 * use two filter columns and reduce page/plot dimensions.
 */
@media (max-width: 600px) {

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

    main {
        padding: 12px;
    }

    #plot {
        height: 442px;
    }
}


/*
 * Very small screens:
 * display every filter on its own row.
 */
@media (max-width: 420px) {

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


/* ==========================================================================
   12. Pipeline, result anchor and algorithm actions
   ========================================================================== */

/* Keep the pipeline prominent and allow long selections to wrap naturally. */
.status {
    align-items: center;
}

#pipeline {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.full-results-link {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.full-results-link:hover,
.full-results-link:focus-visible {
    text-decoration: underline;
}

/* Actions appear after the checkboxes, never above them. */
.algo-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}

#full-results {
    scroll-margin-top: 20px;
}

html {
    scroll-behavior: smooth;
}

/* Lighter metadata style for the pipeline and metric. */
.status {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 14px;
}
.status .pipeline-text,
.status .pipeline-metric {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.5;
}
.status .pipeline-text { overflow-wrap: anywhere; }
.status .full-results-link { margin-left: auto; }

/* High-contrast GitHub link in the dark header. */
header p a,
header p a:visited {
    color: #ffb454;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

header p a:hover,
header p a:focus-visible {
    color: #ffd28a;
}