/* e7a.css -- tickets. Tokens uit core.css (var(--surface) enz.), geen eigen hex.
 *
 * LINKS DE LIJST, RECHTS HET GEKOZEN TICKET (S-0000-0428). Tickets staat in het onderpaneel:
 * breed en laag. Onder elkaar -- de indeling uit de tijd van de smalle zijbalk -- hield de
 * lijst daar 36 px over, minder dan een rij. EEN CONTAINER QUERY EN GEEN MEDIA QUERY: het
 * PANEEL beslist, niet het venster; pas als het smaller is dan twee kolommen tekst, gaat het
 * detail weer onder de lijst.
 */

.tk-host { container-type: inline-size; }

.tk-panel {
  height: 100%;
  display: flex;
  flex-direction: row;
  min-height: 0;
}

.tk-list-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 0 0 min(40%, calc(var(--ui-fs) * 26));
  border-right: 1px solid var(--rule);
}

@container (max-width: 640px) {
  .tk-panel { flex-direction: column; }
  .tk-list-col { flex: 1 1 55%; border-right: 0; border-bottom: 1px solid var(--rule); }
  .tk-detail-col { flex: 1 1 45%; }
}

.tk-quickadd, .tk-search {
  margin: 6px 8px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text);
  font: var(--ui-fs) var(--font-ui);
  -webkit-user-select: text; user-select: text;
}
.tk-quickadd { margin-bottom: 2px; }
.tk-quickadd:focus-visible, .tk-search:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.tk-quickadd:disabled { opacity: 0.6; }

.tk-caption {
  padding: 0 12px 4px;
  font-size: calc(var(--ui-fs) * 11 / 13);
  color: var(--text-dim);
}

.tk-list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.tk-list .row {
  display: grid;
  grid-template-columns: 8px auto auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  cursor: default;
  border-left: 2px solid transparent;
  /* e3a.css gives every .row a fixed 22px height and contain: layout paint (single-line
     lists); a ticket row has two lines, so without this the title was clipped to a sliver. */
  height: auto;
  contain: none;
  white-space: normal;
}
.tk-list .row:hover { background: var(--hover); }
.tk-list .row.sel { background: var(--selection); border-left-color: var(--focus); }
.tk-list .empty { padding: 12px; color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); }

.tk-list .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
}
.tk-list .row.status-doing .dot { background: var(--accent-hi); }
.tk-list .row.status-done  .dot { background: var(--ok); }

.tk-list .id { color: var(--syn-ident); font-family: var(--font-code); font-size: calc(var(--ui-fs) * 12 / 13); }
.tk-list .row.sel .id { color: var(--accent-tx); }
.tk-list .prio { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); }
.tk-list .title {
  grid-column: 2 / -1;
  color: var(--text-dim);
  font-size: calc(var(--ui-fs) * 12 / 13);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-list .row.sel .title { color: var(--text); }
.tk-list .refining { color: var(--text-dim); font-style: italic; }

.tk-detail-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
}
.tk-detail .hint { color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); margin: 0; }

.tk-detail .dhead {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.tk-detail .did { font-family: var(--font-code); color: var(--syn-ident); font-size: calc(var(--ui-fs) * 12 / 13); }
.tk-detail .dprio { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); margin-left: auto; }

.tk-detail .statusbtn {
  font-size: calc(var(--ui-fs) * 11 / 13);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--rule);
}
.tk-detail .statusbtn:hover { background: var(--accent); color: var(--accent-tx); }
.tk-detail .statusbtn.status-doing { color: var(--accent-hi); }
.tk-detail .statusbtn.status-done  { color: var(--ok); }

.tk-detail .dtitle {
  font-size: calc(var(--ui-fs) * 13 / 13); font-weight: 600; color: var(--text-strong);
  margin: 0 0 8px;
}
.tk-detail .dbody {
  white-space: pre-wrap; word-break: break-word;
  font: var(--ui-fs)/1.5 var(--font-ui);
  color: var(--text);
  margin: 0 0 8px;
  -webkit-user-select: text; user-select: text;
}
.tk-detail .opendoc, .tk-detail .toagent {
  font-size: calc(var(--ui-fs) * 11 / 13);
  color: var(--accent-hi);
  padding: 4px 0;
  margin-right: 12px;
}
.tk-detail .opendoc:hover, .tk-detail .toagent:hover { text-decoration: underline; }

/* S-0000-0420: work log and comments in the detail, files as links */
.tk-detail .dsec { margin: 12px 0 4px; font-size: calc(var(--ui-fs) * 10 / 13); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.tk-detail .dlog { margin: 0 0 6px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-detail .dat { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); }
.tk-detail .tk-file { color: var(--accent, #4fa3ff); text-decoration: none; }
.tk-detail .tk-file:hover { text-decoration: underline; }

/* S-0000-0424: Give to Agent was refused -- the reason, right under the button */
.tk-refused {
  margin: 6px 0;
  padding: 4px 8px;
  border-left: 3px solid var(--danger);
  color: var(--text);
  font-size: calc(var(--ui-fs) * 12 / 13);
}

/* ---- S-0000-0638: lessen op het bord (DEC-0000-0211) ------------------------------------
 * Een kop per leerpad met de voortgang; per les een badge in plaats van de stip; onder de
 * gekozen les de laatste uitkomst en twee knoppen. Kleuren uit core.css. */
.tk-list .tk-path {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 12px 2px;
  font-size: calc(var(--ui-fs) * 11 / 13);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim);
  border-top: 1px solid var(--rule);
}
.tk-list .tk-path .pname { color: var(--text-strong); font-weight: 600; }
.tk-list .tk-path .pcount { margin-left: auto; text-transform: none; letter-spacing: 0; }
.tk-list .row.lesson { grid-template-columns: 1.2em auto auto 1fr; }
.tk-list .lbadge {
  flex: 0 0 auto; width: 1.1em; text-align: center;
  font-size: calc(var(--ui-fs) * 12 / 13); font-weight: 700;
  color: var(--text-dim);
}
.tk-list .lbadge-ok { color: var(--ok); }
.tk-list .lbadge-failed { color: var(--danger); }
.tk-list .lbadge-running { color: var(--accent-hi); }
.tk-list .tk-lessonbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 2px 12px 6px 34px;
  background: var(--selection);
  font-size: calc(var(--ui-fs) * 12 / 13);
}
.tk-list .tk-lessonbar .lwhy { color: var(--text-dim); flex: 1 1 100%; }
.tk-list .lbtn, .tk-detail .checkbtn {
  padding: 2px 8px;
  font: calc(var(--ui-fs) * 12 / 13) var(--font-ui);
  background: var(--surface2, var(--surface)); color: var(--text);
  border: 1px solid var(--rule); border-radius: 3px; cursor: pointer;
}
.tk-list .lbtn:hover, .tk-detail .checkbtn:hover { background: var(--accent); color: var(--accent-tx); }
.tk-list .lbtn:disabled, .tk-detail .checkbtn:disabled { opacity: .55; cursor: default; }
.tk-detail .dcheck { margin: 8px 0; font-size: calc(var(--ui-fs) * 12 / 13); }
.tk-detail .dcheck code { font-family: var(--font-code); }