/* Surveys list: one row per survey, the whole row links to that survey's page.
   Shared tokens (--primary-color, --accent-color, --border-color) come from style.css. */

.surveys-intro {
    margin: 0 0 25px;
    max-width: 70ch;
    color: #555;
}

/* Overrides the plain global table look: no dark header fill, an accent rule
   under the head, and rows that lift like cards on hover. */
.surveys-table {
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
}

.surveys-table th {
    background-color: #fff;
    color: var(--primary-color);
    border: none;
    border-bottom: 2px solid var(--accent-color);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.surveys-table td {
    border: none;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

/* Anchor for the stretched link below */
.surveys-table tbody tr {
    position: relative;
    background-color: #fff;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.surveys-table tbody tr:hover {
    background-color: #f4fbf7;
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.survey-link {
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

/* Stretches the title link over the whole row so any click on the row opens
   the survey, while the accessible link itself stays a single anchor. */
.survey-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.surveys-table tbody tr:hover .survey-link {
    color: var(--accent-color);
    text-decoration: underline;
}

.survey-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

.survey-desc {
    margin: 6px 0 0;
    font-size: 14px;
    color: #666;
    max-width: 60ch;
}

.survey-go {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    font-size: 20px;
    font-weight: bold;
    color: var(--accent-color);
}

/* Transform lives on the span: transforms on table cells are unreliable. */
.survey-go span {
    display: inline-block;
    transition: transform 0.2s;
}

.surveys-table tbody tr:hover .survey-go span {
    transform: translateX(4px);
}

/* --- A SURVEY THAT IS OVER ---
   It is not opened from the list: what it came to is shown in the row instead,
   so the title is plain text and the row does not invite a click. */

.survey-name {
    font-size: 17px;
    font-weight: 600;
    color: #5b6b7a;
}

.surveys-table tbody tr.survey-row-finished {
    background-color: #fbfcfd;
}

.surveys-table tbody tr.survey-row-finished:hover {
    background-color: #fbfcfd;
    box-shadow: none;
}

/* The count, drawn by the shared vote_results template. It sits inside a table
   cell here rather than on a page of its own, so it is tightened up. */
.survey-results {
    max-width: 60ch;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.survey-results .vote-results-total {
    margin-bottom: 10px;
    font-size: 12px;
}

.survey-results .vote-result {
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 14px;
}

.survey-finished-on {
    margin: 8px 0 0;
    font-size: 13px;
    color: #667;
    white-space: nowrap;
}

/* --- WRITING AND CLOSING ONE --- */

.surveys-new {
    padding: 10px 18px;
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.surveys-new:hover,
.surveys-new:focus-visible {
    background-color: var(--accent-color);
    color: #fff;
}

.survey-finish {
    margin: 10px 0 0;
    /* Above the link stretched over the row, or the click would open the survey
       instead of pressing the button. */
    position: relative;
    z-index: 1;
}

.survey-finish-submit {
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid #98a6b3;
    border-radius: 4px;
    background-color: #fff;
    color: #5b6b7a;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.survey-finish-submit:hover,
.survey-finish-submit:focus-visible {
    border-color: #c0392b;
    background-color: #fdecea;
    color: #a93226;
}

/* --- STATUS BADGES --- */

.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-active {
    background-color: #e8f8f5;
    color: #1e8449;
    border-color: #b7e4cd;
}

.status-active::before {
    background-color: var(--accent-color);
}

.status-finished {
    background-color: #eef0f2;
    color: #5b6b7a;
    border-color: #dce1e6;
}

.status-finished::before {
    background-color: #98a6b3;
}

/* Below the table's min-width each row becomes a card instead of scrolling
   sideways; the column headers stop carrying meaning, so they are hidden. */
@media (max-width: 640px) {
    .surveys-table {
        min-width: 0;
    }

    .surveys-table thead {
        display: none;
    }

    .surveys-table,
    .surveys-table tbody,
    .surveys-table tr,
    .surveys-table td {
        display: block;
        width: auto;
    }

    .surveys-table tbody tr {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .surveys-table td {
        border: none;
        padding: 0;
    }

    .surveys-table td + td {
        margin-top: 12px;
    }

    .survey-go {
        display: none;
    }
}