/*
 * Page-specific styles: issue view, journals, wiki content and code,
 * activity, roadmap, calendar, Gantt.
 */

/***** Issue view *****/
/* .details: calendar entries are div.issue too */
div.issue.details {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 24px;
  margin-block-end: 16px;
}
div.issue div.subject h3 { font: var(--md-sys-typescale-headline-small); }
div.issue p.author { color: var(--md-sys-color-on-surface-variant); }
div.issue .attributes .attribute .label { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
div.issue hr { background: var(--md-sys-color-outline-variant); }
div.issue.overdue .due-date .value { color: var(--md-sys-color-error); }
div.issue table.list { background: var(--md-sys-color-surface); }

/* Sticky issue header while scrolling: an M3 top app bar in its scrolled state
   (surface-container, no shadow). Core hard-codes a white background. */
div#sticky-issue-header {
  padding-block: 12px;
  padding-inline: 24px;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container);
  box-shadow: none;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-title-medium);
}
div#sticky-issue-header .subject { color: var(--md-sys-color-on-surface); font-weight: 500; }

/* Progress bars inside list rows must not take the row padding and height */
table.list table.progress td, table.list table.progress td:first-child {
  block-size: 4px;
  padding: 0;
  border: 0;
}

/***** Journals: each change is an outlined card, its header a band on top *****/
.journals .journal {
  margin-block-end: 12px;
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}
.journals h4.journal-header {
  margin: 0;
  background-color: var(--md-sys-color-surface-container-high);
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  padding-block: 8px;
  padding-inline: 16px;
  font: var(--md-sys-typescale-title-small);
}
.journals h4.journal-header .update-info { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.journals div:target h4.journal-header { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.journals div.journal:has(div:target), .journals div.journal:target { border-color: var(--md-sys-color-primary); }
.journals .journal-content { margin-block-end: 0; padding-block: 4px 12px; padding-inline: 16px; }
.journals .journal-content :is(.journal-details, .wiki):last-child, .journals .journal-content .wiki > :last-child { margin-block-end: 0; }
.journals .private-notes { border-inline-start: 4px solid var(--md-sys-color-error); }
.journals .journal-details, ul.revision-info { color: var(--md-sys-color-on-surface-variant); }

/***** Reading pages: the main content sits in one filled card, like the issue details *****/
#content > div.wiki.wiki-page,
#content > div.news,
.controller-documents.action-show #content > div.wiki,
#content > [data-controller="quote-reply"] > div.message {
  margin-block-end: 16px;
  padding: 24px;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-low);
}
/* The card's padding is the gap: no paragraph margin on top of it (news and messages
   open with a floated reaction button) */
:is(#content > div.wiki.wiki-page, #content > div.news, .controller-documents.action-show #content > div.wiki,
    #content > [data-controller="quote-reply"] > div.message) {
  & > :first-child, & > .reaction + * { margin-block-start: 0; }
  & > :last-child, & > .wiki:last-child > :last-child { margin-block-end: 0; }
}
/* The wiki page's actions sit above its card, not on its edge */
#content > div.wiki.wiki-page { clear: both; }

/***** Wiki content *****/
div.wiki table { padding: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); overflow: hidden; }
div.wiki td, div.wiki th { border: 0; border-block-start: 1px solid var(--md-sys-color-outline-variant); padding-block: 8px; padding-inline: 12px; }
div.wiki tr:first-child td, div.wiki tr:first-child th { border-block-start: 0; }
div.wiki th { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); }
div.wiki a.new { color: var(--md-sys-color-error); }
/* Wiki text mostly sits in a card, so the TOC steps one tone up from it */
div.wiki ul.toc {
  background-color: var(--md-sys-color-surface-container);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 12px 16px;
}
div.wiki ul.toc li.heading { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); }

div.wiki pre {
  margin-inline: 0;
  padding: 16px;
  background-color: var(--md-sys-color-surface-container);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
}
div.wiki pre .syntaxhl, .syntaxhl { background: transparent; }
div.wiki *:not(pre) > code, div.wiki > code {
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding-block: 0.1em;
  padding-inline: 0.3em;
}

/* Syntax highlighting: core Rouge colors are fixed hex values, regrouped here onto roles */
.syntaxhl :is(.c, .ch, .cm, .cpf, .c1, .cs, .cp, .go, .w) { color: var(--md-sys-color-on-surface-variant); font-weight: normal; font-style: italic; }
.syntaxhl :is(.k, .kc, .kd, .kn, .kp, .kr, .ow) { color: var(--md-sys-color-primary); font-weight: 500; }
.syntaxhl :is(.nf, .fm, .na, .nt, .nb, .bp, .nd, .gh, .gu) { color: var(--md-sys-color-primary); font-weight: normal; }
.syntaxhl :is(.kt, .nc, .nn, .no, .m, .mb, .mf, .mh, .mi, .mo, .il) { color: var(--md-sys-color-tertiary); font-weight: normal; }
.syntaxhl :is(.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss, .gi) { color: var(--md-sys-color-success); background-color: transparent; }
.syntaxhl :is(.nv, .vc, .vg, .vi, .vm, .nl, .ni) { color: var(--md-sys-color-warning); font-weight: normal; }
.syntaxhl :is(.err, .gd, .gr, .ne, .gt) { color: var(--md-sys-color-error); background-color: transparent; }
.syntaxhl :is(.o) { color: var(--md-sys-color-on-surface); }
.syntaxhl .hll { background-color: var(--md-sys-color-secondary-container); }

/***** Activity *****/
/* One card per day (the <dl>), entries are M3 list rows. Each entry is a <dt> + <dd> pair:
   dt is a grid (type icon | headline | time, project below), dd holds the clamped
   description and the author. Follow-up events on the same item hang off a thread rail. */
div#activity h3 {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  margin-block: 24px 8px;
  padding-block: 8px;
  padding-inline: 0;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-title-medium);
}
div#activity h3:first-child { margin-block-start: 0; }
div#activity dl {
  margin-inline-start: 0;
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}

div#activity dt, div#activity dl dt:first-child {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "icon title time" "icon project time";
  column-gap: 16px;
  align-items: center;
  inline-size: auto;
  margin: 0;
  padding-block: 12px 0;
  padding-inline: 16px;
  background: none;
  border: 0;
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
}
div#activity dl dt:first-child { border-block-start: 0; }

/* Leading element: type icon in a tonal circle, author avatar as a badge on it */
div#activity dt > svg.icon-svg {
  grid-area: icon;
  box-sizing: content-box;
  padding: 11px;
  margin: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
div#activity dt.issue > svg.icon-svg { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
div#activity dt.issue-closed > svg.icon-svg { background-color: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
div#activity dt:is(.wiki-page, .document, .news, .message, .attachment) > svg.icon-svg { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
div#activity dt > .avatar {
  grid-area: icon;
  align-self: end;
  justify-self: end;
  inline-size: 18px;
  block-size: 18px;
  margin: 0 -6px -4px 0;
  font-size: 7px;
  line-height: 18px;
  box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low);
}

div#activity dt > a { grid-area: title; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: var(--md-sys-typescale-title-small); }
div#activity dt .time { grid-area: time; align-self: start; margin: 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); }
div#activity dt.me .time { border-block-end: 0; }
div#activity span.project { grid-area: project; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
div#activity span.project::after { content: none; }

div#activity dd {
  margin: 0;
  padding-block: 2px 12px;
  padding-inline: 72px 16px; /* 16 padding + 40 icon + 16 gap: under the headline */
  background: none;
  border: 0;
  border-radius: 0;
  font: var(--md-sys-typescale-body-medium);
}
div#activity dd span.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-block: 0 2px; /* a top margin would collapse through dd */
  color: var(--md-sys-color-on-surface);
  font-style: normal;
}
div#activity dd span.description:empty { display: none; }
div#activity dd .author { font: var(--md-sys-typescale-label-medium); }
/* No project line (entry from the current project): the icon still spans two rows, so pull the details up */
div#activity dt:not(:has(> .project)) + dd { margin-block-start: -20px; }

/* Thread: follow-up events hang off a rail starting under the first event's icon */
div#activity dt.grouped, div#activity dd.grouped {
  margin-inline-start: 36px;
  box-shadow: inset 2px 0 0 var(--md-sys-color-outline-variant);
}
div#activity dt.grouped {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  padding-inline-start: 18px;
  border-block-start: 0;
}
div#activity dt.grouped > svg.icon-svg { padding: 7px; }
div#activity dd.grouped { padding-inline-start: 66px; } /* 18 + 32 + 16 */

/***** My page: each block is a card like .box; drop zones show only while dragging *****/
.mypage-box {
  padding: 16px;
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: none;
}
.mypage-box .autoscroll { margin-block-end: 0; }
.block-receiver { border-color: transparent; border-radius: var(--md-sys-shape-corner-medium); }
.dragging .block-receiver { border-color: var(--md-sys-color-outline-variant); }

/***** Search results *****/
/* The type checkboxes' legend is only a "check all" icon: it leads their row */
#search-form fieldset.box > legend { inline-size: auto; padding: 0; margin-inline-end: 8px; }
#search-form fieldset.box > legend ~ * { clear: none; }
/* A checkbox stays with its label when the row wraps */
#search-form label { display: inline-block; white-space: nowrap; }
/* Results start at the content edge; the title wraps under its project, not beside it */
#search-results { margin-inline-start: 0; }
#search-results dt { display: block; }
div#activity dt .time, #search-results dt .time { color: var(--md-sys-color-on-surface-variant); }
#search-results dd span.description { color: var(--md-sys-color-on-surface-variant); }

/***** Projects board: each root project is a filled card *****/
#projects-index ul.projects li.root {
  padding: 16px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-low);
  box-shadow: none;
}
#projects-index li.root ul.projects { border-inline-start: 1px solid var(--md-sys-color-outline-variant); }

/***** Documents: one filled card per category, documents are list rows inside *****/
#document-list .document-group {
  margin-block-end: 16px;
  padding-block: 8px;
  padding-inline: 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-low);
}
#document-list .document-group h3 {
  margin: 0;
  padding-block: 8px;
  padding-inline: 0;
  background-color: transparent;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-title-medium);
}
#document-list .document-item { padding-block: 12px; }
#document-list .document-item + .document-item { border-block-start: 1px solid var(--md-sys-color-outline-variant); }
#document-list .document-group h3 + .document-item { padding-block-start: 4px; }

/***** News list: each article is a filled card *****/
#news-list article.news-article {
  margin-block-end: 12px;
  padding: 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-low);
}
/* Hanging indent: a wrapped title and the comment count line up past the avatar */
#news-list article.news-article header h3 {
  margin-block: 0 4px;
  padding-inline-start: 32px;
  text-indent: -32px;
  font: var(--md-sys-typescale-title-medium);
}
#news-list article.news-article header h3 .avatar { margin-inline-end: 4px; vertical-align: middle; text-indent: 0; } /* + the space after it = 8px */
/* Author and text line up with the title, past the 24px avatar and its gap */
#news-list article.news-article header p.author,
#news-list article.news-article .wiki { margin-inline-start: 32px; }
#news-list article.news-article header p.author { margin-block: 0 8px; color: var(--md-sys-color-on-surface-variant); }
#news-list article.news-article .wiki > :last-child { margin-block-end: 0; }

/***** Workflow: allowed transitions use the selected state *****/
table.transitions td.enabled { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
table.fields_permissions td.readonly { background-color: var(--md-sys-color-surface-container-highest); }
table.fields_permissions td.required { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/***** Attachments, diffs, imports, headings *****/
div.thumbnail {
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
}
div.thumbnail img { margin: 0; }
pre.text-diff {
  padding: 16px;
  border-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
h2 .avatar, h3 .avatar { margin-inline-end: 8px; }
/* "Replies (2)": the icon heading is a flex row, which drops the space before the count */
h3.comments .icon-label { margin-inline-end: 0.25em; }
#wiki_page_parent_id { min-inline-size: 240px; }
select#columns, select#criterias { margin-inline: 8px 16px; }
input#months { inline-size: 72px; }
/* Tabs start below the floated page actions, so their divider spans the page */
#content > .tabs { clear: both; }

/***** Roadmap *****/
div#roadmap .version-article {
  padding: 16px;
  margin-block-end: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
div#roadmap header:target { background-color: var(--md-sys-color-secondary-container); }
div#version-summary { background-color: transparent; }

/* Overview and issue table share one left edge (core indents the overview by 1.5rem) */
div#roadmap article.version-article .version-overview,
div#roadmap article.version-article .wiki,
div#roadmap article.version-article form { padding-inline-start: 0; }
div#roadmap .related-issues td.assigned_to { padding-inline: 12px 4px; }
div#roadmap .related-issues caption { padding-block-end: 8px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-small); }

/* Progress bar spans the width of the issue table below it; the percentage sits at its end */
.version-overview table.progress { inline-size: calc(100% - 56px); margin-block: 6px; }
.version-overview p.percent { font: var(--md-sys-typescale-label-large); line-height: 20px; text-align: end; }
.version-overview p.progress-info { margin-block: 4px 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
/* Version page: the issue table is 70% wide next to the summary */
body.controller-versions.action-show .version-overview table.progress { inline-size: calc(70% - 56px); }
body.controller-versions.action-show .version-overview p.percent { inline-size: 70%; }

/***** Calendar *****/
ul.cal {
  overflow: hidden;
  border-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: none;
}
.cal .calbody { box-shadow: none; }
.cal .calhead, .cal .week-number { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
.cal .calbody { border-color: var(--md-sys-color-outline-variant); }
.cal .calbody.this-month { background-color: var(--md-sys-color-surface); }
.cal .calbody.other-month, .cal .calbody.nwday:not(.other-month) { background-color: var(--md-sys-color-surface-container-low); }
.cal .calbody.today .day-value { color: var(--md-sys-color-on-primary); }

/* Month bar: ‹ [month] [year] › then Apply / Clear / Save. The arrows and the selects live
   in separate containers, so those dissolve into one flex row. */
body.controller-calendars #query_form_with_buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 16px; } /* p.buttons had it */
body.controller-calendars #query_form_content { flex: 1 1 100%; }
body.controller-calendars :is(#query_form_with_buttons > .pagination, #query_form_with_buttons > .pagination ul, #query_form_with_buttons > p.buttons) { display: contents; }
body.controller-calendars p.buttons label { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
body.controller-calendars .pagination li { margin: 0; }
body.controller-calendars .pagination li.next { order: 1; }
body.controller-calendars p.buttons a { order: 2; }
/* Previous / next month: icon buttons; the month name stays as the accessible text */
body.controller-calendars .pagination li a {
  display: block;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 0;
  color: var(--md-sys-color-on-surface-variant);
}
body.controller-calendars .pagination li a:hover { background-image: var(--nm-state-hover); }
body.controller-calendars .pagination li a::before {
  content: '';
  display: block;
  block-size: 100%;
  background-color: currentColor;
  mask: url(../images/chevron-left-idnt.svg) center / 24px no-repeat;
}
body.controller-calendars .pagination li.next a::before,
html[dir="rtl"] body.controller-calendars .pagination li.previous a::before { transform: scaleX(-1); }
html[dir="rtl"] body.controller-calendars .pagination li.next a::before { transform: none; }

/***** Gantt (gantt.css loads after the theme, hence the `html` prefix) *****/
/*
 * Geometry is set inline by Redmine: rows every 20px, each with a 16px text line whose top is
 * `header height + 8 + 20n` in the subjects column and `7 + 20n` inside #gantt_draw_area.
 * Bars are centered on that 16px line; row bands run from 2px above to 2px below it.
 */
:root {
  --nm-gantt-band: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
  --nm-gantt-rows: repeating-linear-gradient(to bottom, var(--nm-gantt-band) 0 20px, transparent 20px 40px);
  --nm-gantt-track: color-mix(in srgb, var(--md-sys-color-primary) 25%, var(--md-sys-color-surface-container-highest));
  --nm-gantt-subjects-offset: 2px; /* (header height + 6) mod 20; the header has one 18px row per zoom level */
}
:root:has(#zoom[value="1"]) { --nm-gantt-subjects-offset: 4px; }
:root:has(#zoom[value="3"]) { --nm-gantt-subjects-offset: 0px; }
:root:has(#zoom[value="4"]) { --nm-gantt-subjects-offset: 18px; }

/* Redmine's geometry is fixed at 20px rows; `zoom` scales rows, bars, text and positions together.
   The relation/progress SVG is drawn by JS from on-screen (already zoomed) positions, so it must
   not be zoomed a second time. */
:root { --nm-gantt-zoom: 1.3; }
html table.gantt-table { zoom: var(--nm-gantt-zoom); }
html #gantt_draw_area svg { zoom: calc(1 / var(--nm-gantt-zoom)); overflow: visible; }

html #gantt_draw_area { background: var(--nm-gantt-rows) 0 5px; }
html .gantt_subjects_container { background: var(--nm-gantt-rows) 0 var(--nm-gantt-subjects-offset); }

/* Header: months / weeks / days */
html .gantt_hdr { border-color: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); line-height: 18px; }
html .gantt_hdr[style*="background"] { background: var(--md-sys-color-surface-container) !important; }
html .gantt_hdr.nwday { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); color: var(--md-sys-color-on-surface-variant); }
html .gantt_hdr a { color: var(--md-sys-color-on-surface-variant); }

/* Subjects */
html .gantt_subjects, html .gantt_selected_column_content.gantt_hdr { font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-body-small-tracking); }
html .gantt_subjects div { line-height: 16px; }
html .gantt_subjects div.issue-subject:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent); }
html .gantt_subjects div.project-name, html .gantt_subjects div.version-name { font-weight: 500; }

/* Issue bars: 10px pills centered on the text line (core: 8px at the top of it) */
html .task_todo, html .task_done, html .task_late {
  block-size: 10px;
  margin-block-start: 3px;
  box-sizing: border-box;
  border-radius: var(--md-sys-shape-corner-full);
  background-image: none;
}
html .task_todo { background-color: var(--nm-gantt-track); border-color: var(--nm-gantt-track); }
html .task_done { background-color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
html .task_late { background-color: var(--md-sys-color-error); border-color: var(--md-sys-color-error); }

/* Parent issues: thin bar with triangles at both ends */
html .task_todo.parent, html .task_done.parent, html .task_late.parent { block-size: 4px; margin-block-start: 6px; border-radius: 0; }
html .task_todo.parent { background-color: var(--md-sys-color-on-surface-variant); border-color: var(--md-sys-color-on-surface-variant); }
html .task.parent.marker.starting, html .task.parent.marker.ending {
  background: var(--md-sys-color-on-surface-variant);
  clip-path: polygon(0 7px, 8px 7px, 4px 14px);
}

/* Project and version milestones: 2px line with a diamond marker */
html .project.task_todo, html .project.task_done, html .project.task_late,
html .version.task_todo, html .version.task_done, html .version.task_late {
  block-size: 2px;
  margin-block-start: 7px;
  border: 0;
  border-radius: 0;
}
html :is(.project, .version):is(.task_todo, .task_done, .task_late) { background-image: none; }
html :is(.project, .version).task_todo { background-color: var(--md-sys-color-outline); }
html :is(.project, .version).task_done { background-color: var(--md-sys-color-primary); }
html :is(.project, .version).task_late { background-color: var(--md-sys-color-error); }
html .version.marker, html .project.marker {
  block-size: 10px;
  margin-block-start: 3px;
  background: var(--md-sys-color-tertiary);
  clip-path: polygon(4px 0, 8px 5px, 4px 10px, 0 5px);
}
html .project.marker { background: var(--md-sys-color-primary); }

/* Labels next to bars ("New 80%") */
html .task { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-small); line-height: 16px; }
html .task.label.project, html .task.label.version { color: var(--md-sys-color-on-surface); font-weight: 500; }
html .version-behind-schedule a, html .issue-behind-schedule a { color: var(--md-sys-color-warning); }
html .version-overdue a, html .issue-overdue a, html .project-overdue a { color: var(--md-sys-color-error); }

/* Today line (inline style); the progress line takes its color from it */
html #today_line { border-inline-start: 2px solid var(--md-sys-color-error) !important; }

/* Relation arrows are drawn with fixed colors per relation type */
html #gantt_draw_area path[stroke="#228be6"] { stroke: var(--md-sys-color-primary); }
html #gantt_draw_area path[fill="#228be6"] { fill: var(--md-sys-color-primary); }
html #gantt_draw_area path[stroke="#fa5252"] { stroke: var(--md-sys-color-error); }
html #gantt_draw_area path[fill="#fa5252"] { fill: var(--md-sys-color-error); }

/***** Issue context menu (context_menu.css loads after the theme) *****/
html #context-menu { font: var(--md-sys-typescale-label-large); }
html #context-menu ul {
  background: var(--md-sys-color-surface-container);
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-level2);
  padding-block: 8px;
}
html #context-menu li { border: 0; border-radius: 0; }
html #context-menu li:hover { border: 0; border-radius: 0; background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent); }
html #context-menu a { color: var(--md-sys-color-on-surface); padding-block: 8px; }
html #context-menu a:hover { color: var(--md-sys-color-on-surface); text-decoration: none; }
html #context-menu a.disabled, html #context-menu a.disabled:hover { color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent); }
html #context-menu a.disabled svg.icon-svg { color: inherit; }

.cal .calbody div.issue {
  margin-block: 4px;
  padding-block: 4px;
  padding-inline: 8px;
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-small);
  font: var(--md-sys-typescale-body-small);
}