/* Global preference styling. */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/* Display collapsible section titles inline. */
summary > * {
    display: inline-block;
}
summary {
    cursor: pointer;
}
/* Prevent header title from wrapping on mobile. */
@media (max-width: 720px) {
    .header-main {
        font-size: 1.0rem;
    }
}
/* Fix footer links. misode.css makes them flex. */
footer a {
    display: inline;
    text-decoration: underline;
}
/* Jump box styling, some things copied from misode.css. */
.jump {
    margin-left: auto;
    position: relative;
    width: 12rem;
    display: flex;
    gap: 0.5rem;
}
.jump input {
    height: 2rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.25rem;
    width: 100%;
}
.jump button {
    padding: 0.25rem 0.8rem 0.25rem 0.8rem;
    background-color: var(--gray-200);
    border-radius: 0.25rem;
}
.jump button:disabled {
    color: var(--gray-400);
}
.jump button:enabled {
    cursor: pointer;
}
.jump button:enabled:hover {
    background-color: var(--gray-300);
}
.content {
    /* Change main content height so that small pages aren't scrollable. */
    min-height: calc(100vh - 56px);
}

/* Grid pages. */
.tile-grid-main {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tile-grid-main h2 {
    font-size: 18pt;
}
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    flex-wrap: wrap;
}
.tile-grid > * {
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;
    border: 1px solid #d0d0d0;
    border-radius: 0.5rem;
    padding: 1rem;
}
.tile-grid > *:hover {
    background-color: #f8f8f8;
    outline: 2px solid #d8d8d8;
}
.tile-grid .project-key-span {
    font-size: 18pt;
}
/* Specially target the status badge to override the misode.css default font size. */
.tile-grid-name, .tile-grid-name .status-badge {
    font-size: 13pt;
}
.tile-grid-desc {
    font-size: smaller;
    color: var(--gray-600);
}

/* Info pages. We use the "issue" class naming convention because misode.css does. */
.issue {
    /* Bump up max width a bit compared to misode.css. */
    max-width: 1400px;
}
.issue-summary {
    /* Don't overflow. */
    overflow-wrap: anywhere;
}
.issue-summary .avatar {
    /* Show more of avatar on user pages. */
    width: 3rem;
    height: 3rem;
    border-radius: 0;
    background-color: transparent;
}
.issue-details {
    /* Change details section to use a grid. This keeps values on the right side when wrapping. */
    display: grid;
    align-self: start;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 0.5rem;
}
.issue-details label a {
    /* Don't turn clickable field labels in detail section blue */
    color: inherit;
}
/* Restore the list style that reset.css removed for project descriptions. */
.issue-body ol, .issue-body ul {
    list-style: initial;
    padding-left: 40px;
}
.comment-section, .issue-link-section, .issue-attachment-section {
    /* Copy values from issue-body in misode.css to match. */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-start;
}
.attachments {
    /* Make attachments larger than misode.css. */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* Change the attachment class name to avoid the img rule in misode.css that affects profile images. */
.attachment-block {
    /* Copy most of this from misode.css. */
    color: var(--gray-950);
    background-color: var(--gray-200);
    border-radius: 0.25rem;
    text-decoration: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* Styling for the preview. */
.attachment-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 16/9;
}
.attachment-icon {
    width: 64px;
    height: 64px;
    margin: 1rem;
    image-rendering: pixelated;
}
/* Styling for the added details. */
.attachment-details {
    display: flex;
    flex-direction: column;
    margin: 0.2rem;
    gap: 0.1rem;
    text-align: center;
    overflow-wrap: anywhere;
}
/* Paginated comment sections. */
.comment-section-wrapper {
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px 20px;
}
.comment-controls {
    padding: 10px;
    border-bottom: 1px solid var(--gray-300);
    font-variant-numeric: tabular-nums;
}
.comment-controls .issue-page {
    width: 3rem;
    text-align: center;
    appearance: textfield;
}
/* Ew ew ew ew ew. */
.comment-controls .issue-page::-webkit-outer-spin-button, .comment-controls .issue-page::-webkit-inner-spin-button {
    display: none;
}
.comment-controls button:disabled {
    color: var(--gray-400);
}
.issue-tab-content .attachments {
    padding: 10px;
}

/* Info page tabs. */
.issue-tabs {
    margin: 20px auto;
    width: 100%;
}
.issue-tabs > input {
    display: none;
}
.issue-tabs > input[type="radio"] + label {
    display: inline-block;
    padding: 10px 20px;
    background: var(--gray-200);
    cursor: pointer;
    border: 1px solid var(--gray-300);
    border-bottom: none;
}
.issue-tabs > input[type="radio"] + label:hover {
    background: var(--gray-100);
}
.issue-tabs > input[type="radio"]:checked + label {
    background: var(--gray-50);
    font-weight: bold;
}
.issue-tab-content {
    display: none;
    border: 1px solid var(--gray-300);
    overflow-x: auto;
}
#issue-tab-order {
    display: none;
}
#issue-tab-order + label {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}
#issue-tab-order + label::before {
    content:  "↓ Oldest First"
}
#issue-tab-order:checked + label::before {
    content:  "↑ Newest First"
}
/* Issue tables are too wide for tabs, make one column shorter. */
.issue-tabs-content .issue-table-summary {
    width: 510px;
}

/* Tab visibility. */
#issue-tab-comments:checked ~ .issue-tabs-content #issue-tab-content-comments,
#issue-tab-history:checked ~ .issue-tabs-content #issue-tab-content-history,
#issue-tab-mentions:checked ~ .issue-tabs-content #issue-tab-content-mentions,
#issue-tab-attachments:checked ~ .issue-tabs-content #issue-tab-content-attachments,
#issue-tab-activity:checked ~ .issue-tabs-content #issue-tab-content-activity {
    display: block;
}
#issue-tab-affected:checked ~ .issue-tabs-content #issue-tab-content-affected,
#issue-tab-fixed:checked ~ .issue-tabs-content #issue-tab-content-fixed {
    display: block;
}
#issue-tab-reported:checked ~ .issue-tabs-content #issue-tab-content-reported,
#issue-tab-assigned:checked ~ .issue-tabs-content #issue-tab-content-assigned {
    display: block;
}
#issue-tab-order:checked ~ * .comment-section {
    flex-direction: column-reverse;
}
#issue-tab-order:checked ~ * .attachments > * {
    order: calc(var(--order) * -1);
}

/* User sections. We use the "comment" class naming convention because misode.css does. */
.comment:has(> :target) {
    /* Copy comment-highlighted from misode.css. */
    background-color: var(--link-bg);
    outline: 2px solid var(--link);
    border-radius: 0.1rem;
}
.comment-head {
    /* Copy font-size from misode.css comment-author so it affects the whole thing. */
    font-size: 14px;
}
.comment-head .user-name-span {
    /* Fix some alignment issues involving the user image. */
    align-items: initial;
}
/* Restricted comment lock icon. */
.comment-time img {
    display: inline-block;
    width: 1em;
    height: 1em;
}
.comment-body {
    /* Mostly for history, since comments are in the special markup blocks. */
    font-size: 14px;
}
.history-label {
    font-weight: 600;
}
.history-label a {
    color: inherit;
}
.history-quote {
    /* Partly copied from misode.css adf blockquote. */
    padding: 0.5rem 1rem;
    border-left: 2px solid var(--gray-300);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.revision-change .issue {
    /* Don't horizontally center the initial issue when it's narrow. */
    margin: 0;
}
.revision-change .issue-link {
    /* Don't let issue links in history get too long. */
    max-width: 30rem;
}
/* These show up only in history. */
.broken-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    overflow-wrap: anywhere;
}
.broken-attachment img {
    width: 3em;
    height: 3em;
}
.diff-panel-side {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.diff-panel-top {
    display: flex;
    flex-direction: column;
}
.diff-panel-side > *, .diff-panel-top > * {
    /* Make both halves the same size. */
    flex: 1;
}

/* List pages. */
.list-main h1, .list-main h2 {
    /* Per misode.css, there is no global margin; the individual elements have it instead. Copy it from e.g. filters. */
    margin: 0.5rem 1rem;
}
/* Specially target the status badge to override the misode.css default font size. */
.list-main h1, .list-main h1 .status-badge {
    font-size: 18pt;
}
.list-main h2, .list-main h2 .status-badge {
    font-size: 14pt;
}

/* Comment pages. */
.user-main {
    margin: 0.5rem 1rem 0.5rem 1rem;
}
.user-main h1 {
    font-size: 18pt;
}
.user-main h2 {
    font-size: 14pt;
}
.user-main-content-wrapper {
    margin-top: 1rem;
}
.user-main-content {
    border: 1px solid var(--gray-300);
}
.user-main .comment-section-wrapper {
    max-height: 75vh;
}
.user-main #issue-tab-order + label {
    border: 1px solid var(--gray-300);
    border-bottom: none;
}

/* Tables. We use the "issue" class naming convention because misode.css does. */
/* Select the virtual table with div so these changes don't affect real tables with the same class. */
div.issue-table {
    /* The virtual tables scroll internally, so we have to give them an explicit height. */
    height: 615px;
    width: max-content;
    /* Recreate the border from misode.css since the table isn't made of td tags. */
    border: 1px solid var(--gray-300);
}
.issue-table-header, .issue-table-row, .issue-table-virtual-row {
    /* All rows must be a constant height known to table.js. */
    height: 32px;
}
.issue-table-header {
    display: flex;
    /* Copy style from misode.css. */
    font-weight: 600;
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}
.issue-table-header > *:not(:last-child), .issue-table-row > *:not(:last-child) {
    border-right: 1px solid var(--gray-300);
}
.issue-table-body {
    height: calc(100% - 32px);
    position: relative;
    overflow-y: auto;
    background-color: var(--gray-200);
}
.issue-table-scroll {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1px;
    opacity: 0;
}
.issue-table-row {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--gray-300);
}
.issue-table-virtual-row {
    position: absolute;
    width: 100%;
}
.issue-table-row > * {
    /* Copy style from misode.css. */
    background-color: var(--gray-50);
    overflow: hidden;
}
.issue-table-row:hover > * {
    /* Copy style from misode.css. */
    background-color: var(--gray-100);
}
.issue-table-header > *, .issue-table-row > * {
    /* Copy style from misode.css. */
    padding: 0.25rem 0.5rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
/* Column sorting. */
.issue-table-header > * {
    cursor: pointer;
    user-select: none;
}
.issue-table-header > .table-sort-descending::after {
    content:  "↑";
    font-size: larger;
}
.issue-table-header > .table-sort-ascending::after {
    content:  "↓";
    font-size: larger;
}
/* Styling for specific columns. */
.issue-table-key {
    /* Increase size from misode.css to make room for icon. */
    width: 110px;
}
.issue-table-row .issue-table-key {
    /* Copy style from misode.css. */
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}
.issue-table-row .issue-table-key:hover {
    /* Copy style from misode.css. */
    color: var(--link);
    background-color: var(--gray-200);
}
.issue-table-row.issue-resolved .issue-table-key {
    /* Copy style from misode.css. */
    text-decoration: line-through;
}
.issue-table-time {
    /* Increase width slightly from misode.css. */
    width: 210px;
}
/* Change class from misode.css to avoid underlining that affects the avatar. */
.issue-table-username {
    width: 150px;
    /* Allow the link overlay to match the size of the cell. */
    position: relative;
}
/* Bring back underlining just for the text part. */
.issue-table-username:hover .user-link, .issue-table-username:focus .user-link {
  text-decoration: underline;
}
.overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.user-table-username {
    width: 200px;
}
.user-table-fullname {
    width: 400px;
    /* Allow the link overlay to match the size of the cell. */
    position: relative;
}
.user-table-role {
    width: 160px;
}
.user-table-number {
    width: 100px;
}
/* Version table columns. */
.version-table-name {
    width: 200px;
}
.version-table-desc {
    width: 400px;
}
.version-table-date {
    width: 140px;
}
.version-table-issues {
    width: 100px;
}

/* Little components. */
/* Things with inline icons. */
.project-key-span {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    /* Fix text looking weird on project versions list. */
    vertical-align: bottom;
}
.project-key-span img {
    width: 1.25em;
    height: 1.25em;
}
.issue-key-span {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.issue-key-span img {
    width: 1.25em;
    height: 1.25em;
}
.user-name-span {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    /* Fix weird shrinking in issue tables. */
    flex-shrink: 0;
}
.aui-avatar {
    /* Fix weird shrinking in attachments. */
    flex-shrink: 0;
}
.user-name-span img {
    /* Make it 24x24 when font size is 14px. */
    width: 1.71428571em;
    height: 1.71428571em;
}
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    /* Fix text looking weird on field value versions list. */
    vertical-align: bottom;
    white-space: nowrap;
}
.status-badge img {
    width: 1.2em;
    height: 1.2em;
}
.issue-progress .status-badge {
  background-color: #ffefe1;
  color: #393300;
}
.field-value-platform, .field-value-labels {
    /* Normally we don't want status badges to wrap. But there are some really long weird names in these values. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.field-value-labels {
    font-family: monospace;
}
.user-group-name {
    font-weight: 600;
}
.issue-link-key {
    /* Fix some text overlapping when linked issue summaries overflow. */
    flex-shrink: 0;
}