/* Issue list: column widths, status colours and the reading order of a row.
   Loaded by view/application/issues/issue-list.phtml. */

.browseBody .issue .updated {
    width: 10em;
    float: left;
}

/* Hues follow MantisBT's own status colours, darkened to sit on this page, so
   they are recognisable from the Mantis interface. */
.status-new          { --status-colour: #ff7a7a; }
.status-feedback     { --status-colour: #d08bff; }
.status-confirmed    { --status-colour: #ffe066; }
.status-assigned     { --status-colour: #74c0fc; }
.status-resolved     { --status-colour: #8ce99a; }
.status-closed       { --status-colour: #9a9a9a; }

/* Reading order of a row. Every cell sits inside the row's link, so without
   this they all inherit the same loud yellow and nothing stands out. The
   summary is what people read and the zone names the thing; the id, the date
   and the region are reference detail and are pulled back. */
.browseBody .issue.item .summary {
    color: #fff;
}

.browseBody .issue.item .zone {
    color: #ffde00;
}

.browseBody .issue.item .status {
    color: var(--status-colour, #fff);
    font-weight: bold;
}

.browseBody .issue.item .id,
.browseBody .issue.item .updated,
.browseBody .issue.item .category {
    color: #8a8a8a;
}

/* The row's link wraps floated cells, which leaves it an inline box split
   across three fragments. Anything the browser draws around "the link", a
   focus ring above all, then comes out as several disjoint rectangles across
   part of the row. One block box that contains its floats fixes that. */
.browseBody .issue.item a {
    display: block;
    overflow: hidden;
}

/* The label in front of the sort buttons belongs to the narrow layout only;
   on a wide screen the row is column headings above columns and needs none. */
.browseBody .issue.head .sort-label {
    display: none;
}

/* Narrow screens: a row cannot stay a table. The cells are floated to fixed em
   widths that add up to about 33em, against roughly 23em of usable width on a
   phone, so they wrap onto an arbitrary number of lines - and the header row
   wraps on its own, which leaves no heading above its value. Below 40em each
   row is laid out as a card instead, and the header row becomes a bar of sort
   buttons, since it can no longer label anything. */
@media only screen and (max-width: 40em) {

    /* Every cell with a width set for the wide layout has to be named here:
       those rules carry three classes and win over a plainer selector. */
    .browseBody ul li,
    .browseBody .issue .id,
    .browseBody .issue .status,
    .browseBody .issue .category,
    .browseBody .issue .zone,
    .browseBody .issue .updated {
        float: none;
        width: auto;
        white-space: normal;
        overflow: visible;
        padding: 0 0.7em 0 0;
    }

    /* Sort bar. */
    .browseBody .issue.head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        font-size: 0.85em;
        padding: 2px 5px 10px;
    }

    .browseBody .issue.head .sort-label {
        display: inline;
        color: #8a8a8a;
        font-weight: normal;
    }

    /* The default arrow is 1.75em, which is a thumb-sized glyph next to text
       this small. */
    .browseBody .issue.head li.sort:before {
        font-size: 1.1em;
    }

    /* A row: what the issue is about first, the reference detail under it.
       The zone names the thing, so on the zone lists it leads; where there is
       no zone column the summary takes the first line by itself. */
    .browseBody .issue.item a {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        padding: 8px 5px;
    }

    .browseBody .issue.item .zone {
        order: 1;
        flex: 1 0 100%;
        font-weight: bold;
    }

    .browseBody .issue.item .summary {
        order: 2;
        flex: 1 0 100%;
        padding-bottom: 4px;
    }

    .browseBody .issue.item .status   { order: 3; }
    .browseBody .issue.item .category { order: 4; }
    .browseBody .issue.item .updated  { order: 5; }
    .browseBody .issue.item .id       { order: 6; }

    /* Six digits with no marking read as a date or a score. */
    .browseBody .issue.item .id:before {
        content: "#";
    }

    .browseBody .issue.item .status,
    .browseBody .issue.item .category,
    .browseBody .issue.item .updated,
    .browseBody .issue.item .id {
        font-size: 0.85em;
    }
}