/*
 * Aktivitaets-Feed-Icons fuer Helpdesk-Nachrichten.
 * Redmine 5.x verwendet CSS-Klassen (icon-{event_type}) mit background-image.
 * Quellen: Bootstrap Icons v1.11 (MIT License, https://icons.getbootstrap.com/)
 * SVGs verwenden viewBox="0 0 16 18" (2 Einheiten Puffer unten), damit der
 * Pfeil-Kreis am unteren Rand nicht abgeschnitten wird.
 */

/* SLA-Anzeige am Ticket (Ampel-Chips fuer Reaktions-/Loesungszeit) */
.helpdesk-sla-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0;
}
.hd-sla-title {
  font-weight: bold;
  color: #666;
  font-size: 0.9em;
}
.hd-sla-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  border: 1px solid transparent;
}
.hd-sla-met      { background: #e4f2e4; border-color: #a3cfa3; color: #1a6b1a; }
.hd-sla-running  { background: #eaf4fd; border-color: #a8c8e8; color: #2a5885; }
.hd-sla-warning  { background: #fff3cd; border-color: #e0a800; color: #7a5c00; }
.hd-sla-breached { background: #fce4e4; border-color: #e0a0a0; color: #a01818; font-weight: bold; }

/* --- "Wartet auf Bearbeitung" --- */
/* Linker Marker statt Hintergrundfarbe: Redmine faerbt Zeilenhintergruende bereits
   nach Prioritaet, und .closed/.overdue wuerden mit einer Hintergrundregel kollidieren. */
tr.issue.hd-awaiting td:first-child { box-shadow: inset 3px 0 0 #e0a800; }
.hd-awaiting-chip { background: #fff3cd; border-color: #e0a800; color: #7a5c00; }
.hd-awaiting-counter { margin: 0 0 1em; }

/* --- SLA-Statistik-Seite (CSS-Balkendiagramme, keine externen Libs) --- */
.hd-stats-filter { margin: 0 0 1em; padding: 8px; background: #f6f6f6; border: 1px solid #e0e0e0; border-radius: 3px; }
.hd-stats-filter label { margin-right: 12px; }

.hd-stats-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.2em; }
.hd-stats-tile { flex: 1 1 140px; min-width: 140px; padding: 10px 12px; background: #fafafa;
  border: 1px solid #e0e0e0; border-radius: 4px; display: flex; flex-direction: column; }
.hd-stats-tile-alert { background: #fce4e4; border-color: #e0a0a0; }
.hd-stats-num { font-size: 1.6em; font-weight: bold; color: #333; }
.hd-stats-lbl { font-size: 0.82em; color: #666; }
.hd-stats-lbl em { color: #999; font-style: normal; }

/* Chart.js-Container: feste Hoehe, responsiv in der Breite */
.hd-chart-box { position: relative; width: 100%; height: 300px; margin: 0 0 1.2em; }
.hd-chart-box-sm { height: 180px; }
.hd-chart-box canvas { max-width: 100%; }

.hd-stats-muted { color: #888; font-size: 0.85em; }
.hd-stats-empty { color: #999; }

.hd-stats-busy { display: flex; flex-wrap: wrap; gap: 24px; }
.hd-stats-busy-col { flex: 1 1 320px; min-width: 0; }

/* Ticket statistics: tables and the time-basis note */
.hd-stats-table th.num, .hd-stats-table td.num { text-align: right; white-space: nowrap; }
.hd-stats-table td.num em { font-style: normal; }
.hd-stats-note { margin: -0.6em 0 1em; }
.hd-stats-basis { margin-left: 8px; }
.hd-stats-table th.hd-sortable { cursor: pointer; user-select: none; }
.hd-stats-table th.hd-sortable:focus-visible { outline: 2px solid #4a90c7; outline-offset: -2px; }
.hd-stats-table th.hd-sort-asc::after { content: ' \25B4'; }
.hd-stats-table th.hd-sort-desc::after { content: ' \25BE'; }

/*
 * Aktivitaets-Feed-Richtungsicons: ab Redmine 6 werden sie als SVG-Sprite gerendert
 * (activity_event_type_icon -> sprite_icon aus assets/icons.svg, fill="currentColor").
 * Hier nur noch die Richtungsfarbe je Uhr setzen (gruen eingehend / rot ausgehend /
 * grau Erstkontakt). Die alten background-image-Klassen entfielen, da sie unter
 * Redmine 6+ ohne background-repeat:no-repeat kachelten.
 */
div#activity dt.icon-helpdesk-message-in   svg.icon-svg { color: #2e7d32; fill: currentColor; stroke: none; }
div#activity dt.icon-helpdesk-message-out  svg.icon-svg { color: #4a90c7; fill: currentColor; stroke: none; }
div#activity dt.icon-helpdesk-message-init svg.icon-svg { color: #777;    fill: currentColor; stroke: none; }

/* --- Note field toolbar: quoting and answer templates --------------------
 * The buttons are attached by JavaScript to the div.jstElements drawn by
 * jsToolBar; the menu hangs off <body> so no overflow can clip it and so it
 * sits outside #issue-form.
 */
/* Size, border and hover state come from Redmine's own rule for
 * .jstElements button — the buttons are meant to be indistinguishable from the
 * formatting icons. Own size or spacing rules would have no effect here anyway,
 * because the core rules are more specific; only the icon and the open state
 * come from here. */
.jstElements button.hd-tb-btn[aria-expanded="true"] { background-color: #d4e0ff; }

/* Icons as data URIs rather than an SVG sprite: depending on the Redmine
 * version plugin images live under different URLs (digested on top of that
 * under Propshaft), while a background-image in the stylesheet is reachable
 * the same way everywhere.
 * Both icons: Bootstrap Icons v1.11 (MIT), "quote" and "card-text". */
.jstb_hd_quote {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath d='M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z'/%3E%3C/svg%3E");
}
.jstb_hd_templates {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z'/%3E%3Cpath d='M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}
/* Bootstrap Icons v1.11 (MIT), "magic" - the AI answer draft. */
.jstb_hd_aidraft {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath d='M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707zM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1zM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707zM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 2a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.233a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0z'/%3E%3C/svg%3E");
}

/* Fallback bar for when no jsToolBar is drawn at all (text formatting off) */
.hd-tb-standalone { margin-bottom: 4px; }

.hd-tb-menu {
  position: absolute;
  z-index: 10000;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  min-width: 220px;
  max-width: 420px;
  padding: 2px 0;
}
.hd-tb-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
  border: none;
  padding: 5px 12px;
  font-size: 0.9em;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hd-tb-item:hover, .hd-tb-item:focus { background: #e8f0fc; outline: none; }
.hd-tb-item[disabled] { color: #999; cursor: default; background: none; }
.hd-tb-item-suffix { color: #888; font-size: 0.85em; }
.hd-tb-sep { border-top: 1px solid #ddd; margin: 3px 0; }

.hd-tb-flash {
  margin: 4px 0;
  padding: 4px 8px;
  font-size: 0.9em;
  border-radius: 3px;
  background: #eef2fa;
  color: #445;
}
.hd-tb-flash-error { background: #fdecea; color: #7f1313; border: 1px solid #e57373; }
.hd-tb-flash a { color: #169; }

/* "Loading ..." is honest for a 50 ms quote and misleading for a 20 s AI call,
 * so that one gets a spinner and its own wording. */
.hd-tb-flash-busy::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid #9ab;
  border-top-color: transparent;
  border-radius: 50%;
  animation: hd-tb-spin 0.7s linear infinite;
}
@keyframes hd-tb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hd-tb-flash-busy::before { animation: none; }
}

/* Stays visible for the rest of the page once a draft was inserted. The marker
 * deliberately sits outside the text: inside it, it is the one string that gets
 * mailed when somebody forgets to delete it. */
.hd-tb-ai-warning {
  margin: 4px 0;
  padding: 5px 8px;
  font-size: 0.9em;
  border-radius: 3px;
  background: #fff8e1;
  color: #6b5200;
  border: 1px solid #e0c56b;
}

/* "Block this file" next to Redmine's own attachment actions. Muted until
 * hovered: it deletes files off tickets, so it must not compete with Download
 * for an absent-minded click. */
a.hd-blacklist-attachment {
  font-size: 0.9em;
  color: #888;
  white-space: nowrap;
  /* Redmine's own delete link in this cell is icon-only, so without a divider the
   * trash icon reads as the label of this one. */
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid #ccc;
}
a.hd-blacklist-attachment:hover {
  color: #bb0000;
  text-decoration: underline;
}

/* Recipients pill of an inbound mail (ticket header + incoming journals):
 * "An +1 | CC +2" with a popover listing every address. The trigger is a
 * <button>; the popover opens on hover and while .hd-rcpt.open is set (click,
 * Enter/Space - see the toggle script in Hooks#view_layouts_base_html_head). */
.hd-rcpt { position: relative; display: inline-block; vertical-align: middle; }
button.hd-rcpt-pill {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85em;
  font-weight: normal;
  line-height: 1.5;
  border-radius: 3px;
  background: #dde8f6;
  color: #3a6699;
  border: 1px solid #c0d4ed;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}
button.hd-rcpt-pill:focus-visible { outline: 2px solid #3a6699; outline-offset: 1px; }
.hd-rcpt-seg { padding: 0 6px; }
.hd-rcpt-seg + .hd-rcpt-seg { border-left: 1px solid #c0d4ed; }
.hd-rcpt-caret { padding-right: 5px; margin-left: -3px; }
.hd-rcpt-pop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  padding: 6px 10px;
  background: #fff;
  color: #222;
  border: 1px solid #c8d8ec;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}
/* Bridges the 4px gap so the popover does not close on the way down. */
.hd-rcpt-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px; }
.hd-rcpt:hover .hd-rcpt-pop,
.hd-rcpt.open .hd-rcpt-pop { display: block; }
/* #666 on white: 5.7:1, WCAG AA for small text (#888 was 3.5:1). */
.hd-rcpt-pop-head { display: block; margin: 0 0 1px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: #666; }
.hd-rcpt-pop ul { margin: 0 0 6px; padding-left: 16px; }
.hd-rcpt-pop ul:last-child { margin-bottom: 0; }
.hd-rcpt-own { color: #666; font-size: 11px; }

/* --- Experimental settings: framed so nobody ticks them in passing --------
   Border and background from Redmine's flash.warning; the text is darker
   than its #A6750C, which reached only 3.8:1 here (#805900: 5.9:1, WCAG AA). */
fieldset.hd-experimental,
.hd-experimental-option {
  border: 1px solid #FDBF3B;
  border-left-width: 4px;
  background: #FFF8E6;
}
.hd-experimental-option { padding: 0.4em 0.6em; margin: 0.4em 0; border-radius: 3px; }
fieldset.hd-experimental > legend,
.hd-experimental-badge { color: #805900; font-weight: bold; }
fieldset.hd-experimental > legend::before { content: "\26A0\FE0E  "; }
p.hd-experimental-warning { color: #805900; padding-left: 0 !important; }
.hd-experimental-badge {
  display: inline-block; margin-left: 0.4em; padding: 0 0.4em; font-size: 0.85em;
  border: 1px solid #FDBF3B; border-radius: 3px; background: #FFEBC1;
}