:root {
	--primary-color: #9b9b9b;
	--secondary-color: #ebebeb;
	--text-color: #333;
	--breadcrump: #262424;
	--breadcrump-text-color: white;
	--link-color: #0056a2;
}

.status-10-fg {
	color: #fcbdbd;
}

.status-20-fg {
	color: #e3b7eb;
}

.status-60-fg {
	color: #ACE7AE;
}

.status-70-fg {
	color: #89dfdc;
}

.status-80-fg {
	color: rgb(1, 136, 69);
}

.status-90-fg {
	color: rgb(1, 136, 69);
}


.status-50-fg {
	color: #89bae4;
}

.status-40-fg {
	color: #efff3b;
}

.navbar-brand {
	background-image: url('/plugin_file.php?file=iService/iServiceLogo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 25px;
	height: 40px !important;
	width: 200px;
}

.navbar-brand>span {
	display: none;
}

.skin-3 .navbar {
	background-color: #0A0909;
}

.skin-3 .sidebar {
	background-color: var(--secondary-color);
	border-color: transparent !important;
}

#bugnotes tbody {
	display: flex;
	flex-direction: column-reverse;
}

#bugnotes tbody tr {
	display: flex;
}

#bugnotes tbody tr td:last-child {
	flex: 1;
}

#bugnotes .bbcodeplus thead tr,
#bugnotes .bbcodeplus tbody,
#bugnotes .bbcodeplus tbody tr {
	display: revert;
}

.skin-3 .nav-list>li {
	border-width: 0;
}

.skin-3 .nav-list>li>a {
	background-color: var(--secondary-color);
}

.nav-list>li::before {
	width: 0;
}

.skin-3 .nav-list li.active>a::before {
	border-color: transparent !important;
}

.skin-3 .nav-list>li.active,
.skin-3 .nav-list>li.active+li {
	border-color: transparent !important;
}

.skin-3 .nav-list>li.active.highlight>a,
.skin-3 .nav-list>li.active>a {
	background-color: var(--primary-color) !important;
	color: var(--text-color) !important;
}

.skin-3 .breadcrumbs {
	background-color: var(--breadcrump) !important;
	border-radius: 0;
	color: var(--breadcrump-text-color);
	margin: 0;
}

.skin-3 .breadcrumbs a {
	color: var(--breadcrump-text-color);
}

.widget-color-blue2 {
	border: 0;
}

.widget-color-blue2>.widget-header {
	background-color: var(--secondary-color) !important;
	color: var(--text-color) !important;
}

td.category,
th.category,
td.category label,
th.category label {
	background-color: var(--secondary-color) !important;
}

a {
	color: var(--link-color);
}

.skin-3 .nav-list>li.open,
.skin-3 .nav-list>li:hover {
	border: 0;
}

.skin-3 .nav-list>li:hover>a {
	color: var(--text-color) !important;
}

.widget-header .white {
	color: var(--text-color) !important;
}

#view-issue-page .bug-summary {
	background-color: var(--secondary-color) !important;
	font-size: 1.3em;
	font-weight: bold;
}

#view-issue-page .bug-summary.category {
	font-size: 1em;
}

/* ===================== Team Roadmap ===================== */

.iservice-roadmap-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
}

.iservice-roadmap-header h1 {
	margin: 0;
}

.iservice-collapse-header {
	cursor: pointer;
}

.iservice-backlog {
	margin-bottom: 10px;
}

/* Aside-module gear, sits after the sort select in the roadmap header. Same
   grey as the column gear in the list footers — the extra specificity beats the
   theme's link colouring inside .page-header. */
.iservice-roadmap-header .iservice-aside-settings,
.iservice-roadmap-header .iservice-aside-settings .fa {
	color: #666;
}

.iservice-roadmap-header .iservice-aside-settings:hover,
.iservice-roadmap-header .iservice-aside-settings:hover .fa {
	color: var(--link-color);
}

.iservice-triage.is-done .iservice-summary {
	text-decoration: line-through;
}

/* -- Triage list (slim, roadmap-like rows) -- */
.iservice-triage-list {
	display: flex;
	flex-direction: column;
}

.iservice-triage {
	align-items: center;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	display: flex;
	gap: 6px;
	padding: 3px 10px;
	white-space: nowrap;
}

/* Zebra striping — same idea as Mantis' .table-striped, but these rows are flex
   divs, not table rows. Declared BEFORE :hover so the hover keeps winning at
   equal specificity. */
.iservice-triage:nth-of-type(2n+1) {
	background-color: #f1f4f7;
}

.iservice-triage:hover {
	background-color: var(--secondary-color);
}

.iservice-triage .iservice-summary {
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iservice-triage .iservice-id {
	flex: 0 0 auto;
	font-weight: bold;
}

.iservice-triage .iservice-handler {
	color: #888;
	flex: 0 0 auto;
}

.iservice-triage .iservice-unassigned {
	color: #d9534f;
	font-weight: bold;
}

.iservice-triage .iservice-unassigned a {
	color: inherit;
}

.iservice-triage-cb {
	flex: 0 0 auto;
	margin: 0;
}

/* Right-aligned group in a triage row: time chip, version, updated. Wrapping
   them keeps the group pinned right no matter which columns are hidden. */
.iservice-triage .iservice-triage-right {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 12px;
	margin-left: auto;
}

/* Empty time chip (no tracked value, no estimate) must not reserve gap space. */
.iservice-triage .iservice-triage-time:empty {
	display: none;
}

.iservice-updated {
	flex: 0 0 auto;
	margin-left: 15px;
}

.iservice-triage-right .iservice-updated {
	margin-left: 0;
}

.iservice-status-box {
	flex: 0 0 auto;
}

/* Read-only roadmap (a past week): every affordance that would change something
   goes away — bulk action bar, row checkboxes, per-card actions. Clicking a card
   to open the ticket still works (see bindRows). */
.iservice-roadmap-page:not(.interactive) .iservice-actionbar,
.iservice-roadmap-page:not(.interactive) .iservice-triage-cb,
.iservice-roadmap-page:not(.interactive) .iservice-card-actions {
	display: none;
}

/* -- Action bar -- */
.iservice-actionbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Column-settings gear — pushed to the far right of the action bar. */
.iservice-cols-settings {
	color: #666;
	margin-left: auto;
}

.iservice-cols-settings:hover {
	color: var(--link-color);
}

/* Column-visibility popup. */
.iservice-cols-popup {
	background: #fff;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	padding: 8px 10px;
	position: absolute;
	z-index: 9999;
}

.iservice-cols-popup .iservice-cols-title {
	border-bottom: 1px solid #eee;
	font-weight: bold;
	margin-bottom: 6px;
	padding-bottom: 4px;
}

.iservice-cols-popup .iservice-cols-row {
	cursor: pointer;
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 3px 2px;
	white-space: nowrap;
}

.iservice-cols-popup .iservice-cols-row:hover {
	background-color: var(--secondary-color);
}

/* Column visibility toggles — applied to both triage lists together. */
.iservice-cols-hide-status .iservice-col-status {
	display: none;
}

.iservice-cols-hide-prio .iservice-col-prio {
	display: none;
}

.iservice-cols-hide-id .iservice-col-id {
	display: none;
}

.iservice-cols-hide-meta .iservice-col-meta {
	display: none;
}

.iservice-cols-hide-name .iservice-col-name {
	display: none;
}

.iservice-cols-hide-time .iservice-col-time {
	display: none;
}

.iservice-cols-hide-version .iservice-col-version {
	display: none;
}

.iservice-cols-hide-updated .iservice-col-updated {
	display: none;
}

.iservice-actionbar-all {
	font-weight: bold;
	margin: 0;
}

.iservice-action-value {
	align-items: center;
	display: inline-flex;
	gap: 4px;
}

/* -- Board -- */
.iservice-total-progress {
	margin-bottom: 14px;
}

.iservice-total-progress .progress {
	height: 16px;
	margin: 4px 0 0;
}

.iservice-board {
	align-items: start;
	display: grid;
	gap: 12px;
	grid-template-columns: var(--iservice-cols-d, 1fr);
	padding: 4px 0 12px;
}

/* Tablet: max. 3 Spalten */
@media (min-width: 768px) and (max-width: 991px) {
	.iservice-board {
		grid-template-columns: var(--iservice-cols-t, repeat(3, 1fr));
	}
}

/* Handy: max. 2 Spalten */
@media (max-width: 767px) {
	.iservice-board {
		grid-template-columns: var(--iservice-cols-m, repeat(2, 1fr));
	}
}

.iservice-col {
	background-color: #fafafa;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	min-width: 0;
}

.iservice-col-head {
	background-color: var(--secondary-color);
	border-bottom: 1px solid #bfd4e6;
	border-radius: 4px 4px 0 0;
	padding: 8px 10px;
}

.iservice-col-self {
	background-color: #f1f4f7;
	border-color: #89bae4;
}

.iservice-col-self .iservice-col-head {
	background-color: #bfd4e6;
}

.iservice-col-count {
	color: #666;
	font-size: 0.85em;
	margin: 2px 0 4px;
}

.iservice-col-head .progress {
	height: 10px;
	margin: 0;
}

.iservice-col-body {
	padding: 8px;
}

/* -- Card -- */
.iservice-card {
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-left: 5px solid #b9c7d6;
	border-radius: 3px;
	cursor: pointer;
	margin-bottom: 6px;
	padding: 6px 8px;
	position: relative;
	transition: box-shadow 0.1s ease;

}

.iservice-card:hover {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.iservice-card-top {
	align-items: baseline;
	display: flex;
	gap: 4px;
	margin: 3px 0;
}

.iservice-card-top .iservice-id {
	flex: 0 0 auto;
	font-weight: bold;
}

.iservice-card-top .iservice-summary {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.iservice-card-meta {
	background-color: transparent;
	color: #777;
	font-size: 0.82em;
	margin: 0 0 10px 0;
	row-gap: 4px;
	text-align: left;
}

.iservice-card-meta .iservice-meta {
	background-color: transparent;
	padding: 0;
}

.iservice-card-meta span {
	vertical-align: unset;
}

/* Footer row below the meta line: time chip left, plugin actions right. */
.iservice-card-footer {
	align-items: center;
	color: #777;
	display: flex;
	font-size: 0.82em;
	gap: 6px;
	justify-content: space-between;
	margin-top: 4px;
}

/* Plugin actions slot (e.g. Harvest track control) — pinned to the right. */
.iservice-card-actions {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Ein graues Badge, das bei Platzmangel in die Höhe wächst (statt über die
   Karte zu laufen) — der graue Hintergrund deckt beide Zeilen ab. */
.iservice-card-meta .iservice-meta {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
}

/* Projekt und „· Kategorie“ bleiben je für sich zusammen; Umbruch nur an der
   Lücke dazwischen, sodass die Kategorie als Ganzes darunter rutscht. */
.iservice-card-meta .iservice-project,
.iservice-card-meta .iservice-category {
	background-color: #e7e7e7;
	padding: 0 4px;
	white-space: nowrap;
}

.iservice-card-meta .iservice-category {
	margin-right: 4px;
}

/* Punkt klebt an der Kategorie, kann also nicht als Waise zurückbleiben. */
.iservice-card-meta .iservice-project::after {
	content: "·";
	margin-left: 4px;
}

.iservice-card-status {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 1em;
	gap: 3px 8px;
	justify-content: space-between;
	margin: 3px 0;
}

/* Status + Icon bleiben immer zusammen auf einer Zeile … */
.iservice-card-status>span:first-child {
	white-space: nowrap;
}

/* … und das Aktualisiert-Datum rutscht bei Platzmangel darunter (ohne Einzug). */
.iservice-card-status .iservice-updated {
	margin-left: 0;
}

/* ID + Datum als eine Gruppe oben rechts. */
.iservice-card-topmeta {
	align-items: baseline;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 6px;
}

.iservice-card-top {
	font-size: 15px;
	margin: 10px 0;
}

.iservice-card-top .iservice-prio .fa-minus {
	display: none;
}

/* Mittelpunkt-Trenner gehört zum Datum → verschwindet mit ihm, wenn das Datum
   ausgeblendet ist (dann steht die ID allein). */
.iservice-card-topmeta .iservice-col-updated::before {
	content: '·';
	margin-right: 6px;
	opacity: 0.6;
}

.iservice-card.is-done {
	border-left-color: #cfcfcf;
	opacity: 0.6;
}

.iservice-card.is-done .iservice-summary {
	text-decoration: line-through;
}

.iservice-toggle-done {
	color: #666;
	cursor: pointer;
	display: block;
	font-size: 0.85em;
	padding: 4px 2px;
	user-select: none;
}

.iservice-toggle-done:hover {
	color: var(--link-color);
}

/* -- Right-click context menu -- */
.iservice-contextmenu {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	font-size: 0.9em;
	padding: 4px 0;
	position: absolute;
	width: 230px;
	z-index: 9999;
}

.iservice-contextmenu .iservice-cm-item {
	color: var(--text-color);
	cursor: pointer;
	display: block;
	padding: 6px 14px;
	white-space: nowrap;
}

.iservice-contextmenu .iservice-cm-static {
	cursor: default;
	white-space: normal;
}

.iservice-contextmenu .iservice-cm-item:hover {
	background-color: var(--secondary-color);
}

.iservice-contextmenu .iservice-cm-static:hover {
	background-color: transparent;
}

.iservice-contextmenu .iservice-cm-sep {
	border-top: 1px solid #eee;
	margin: 4px 0;
}

.iservice-contextmenu select {
	box-sizing: border-box;
	display: block;
	margin: 4px 0 0;
	width: 100%;
}

[class*="widget-color-"]>.widget-header>.widget-toolbar::before {
	border-color: #fff;
}

/* -- Weekly comments list (aside) -- */
.iservice-comment-list {
	border: 1px solid #e2e2e2;
	display: flex;
	flex-direction: column;
}

.iservice-comment {
	border-bottom: 1px solid #eee;
	padding: 6px 10px;
}

/* Zebra striping so the individual comments stay apart at a glance. The class is
   set by JS rather than :nth-of-type, because the "mir zugeordnet" filter hides
   rows and :nth-of-type would keep counting them — leaving gaps in the pattern. */
.iservice-comment.is-odd {
	background-color: #f1f4f7;
}

.iservice-comment-filter {
	border-bottom: 1px solid #eee;
	padding: 6px 10px;
}

.iservice-comment-filter label {
	cursor: pointer;
	margin: 0;
}

.iservice-comment-empty {
	padding: 10px;
}

.iservice-comment .iservice-card-top {
	margin: 0 0 2px;
}

.iservice-comment-text {
	color: #444;
	font-size: 0.9em;
	white-space: pre-wrap;
	word-break: break-word;
}

.iservice-comment-meta {
	color: #888;
	font-size: 0.8em;
	margin-top: 2px;
}

/* iService "Zeit" plugin column on view_all_bug_page: right-aligned. The data
   cell is aligned via its own wrapper; the header via the column's sort link
   (carries "iservice_zeit" in the URL) so other plugin columns stay untouched. */
.iservice-time-col {
	text-align: right;
}

th.column-plugin:has(a[href*="iservice_zeit"]) {
	text-align: right;
}

/* Time-estimation chip — Team Roadmap cards + ticket view use the same look
   (short form on-screen, long form in the tooltip). Two adjacent badges: the
   tracked value (orange) and the estimate (grey). */
.iservice-time-est {
	color: #555;
	cursor: help;
	white-space: nowrap;
}

.iservice-time-est i {
	margin-right: 2px;
}

/* Estimate: grey badge with the SAME padding as the tracked (Harvest) badge so
   both line up as a pair. The tracked-badge styling lives in the Harvest plugin. */
.iservice-est-part {
	background-color: #e7e7e7;
	border-radius: 2px;
	margin-left: 3px;
	padding: 0 4px;
}

/* The "keine Schätzung" placeholder is only shown on the ticket view; on cards
   and lists an unset estimate is hidden entirely. */
.iservice-est-part.empty {
	color: #999;
	display: none;
	font-style: italic;
}

#view-issue-page .iservice-est-part.empty {
	display: inline;
}

/* "/" separator — always in the markup, shown only when a tracked value and a
   visible estimate flank it (own element, so it never picks up a badge bg). */
.iservice-time-sep {
	color: #999;
	display: none;
	margin-left: 4px;
	margin-right: 4px;
}

.iservice-time-est:has(.iservice-tracked):has(.iservice-est-part:not(.empty)) .iservice-time-sep {
	display: inline;
}

/* On the ticket view the placeholder is visible, so keep the separator too. */
#view-issue-page .iservice-time-est:has(.iservice-tracked) .iservice-time-sep {
	display: inline;
}

/* -- Time-estimation custom-field helper -- */
.iservice-te-input {
	background-color: #fafafa;
}

.iservice-te-label {
	color: #444;
	font-size: 0.9em;
	margin-left: 8px;
	user-select: none;
}

.iservice-te-label:empty::before {
	color: #999;
	content: '(nicht gesetzt)';
	font-style: italic;
}

.iservice-te-popup {
	background: #fff;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	padding: 10px 12px;
	position: absolute;
	width: 220px;
	z-index: 9999;
}

.iservice-te-popup .iservice-te-row {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
}

.iservice-te-popup .iservice-te-row label {
	flex: 0 0 70px;
	margin: 0;
}

.iservice-te-popup .iservice-te-row input {
	flex: 1;
	width: 100%;
}

.iservice-te-popup .iservice-te-info {
	border-top: 1px solid #eee;
	color: #888;
	font-size: 0.85em;
	margin-top: 6px;
	padding-top: 6px;
	text-align: center;
}

.iservice-te-popup .iservice-te-buttons {
	margin-top: 8px;
	text-align: right;
}

/* -- Weekly check-in card + popup (own column only) -- */
.iservice-checkin-card {
	border-left-color: #6a4c93;
}

.iservice-checkin-card .iservice-prio {
	color: #6a4c93;
}

.iservice-checkin-backdrop {
	background: rgba(0, 0, 0, 0.45);
	bottom: 0;
	display: flex;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10000;
}

.iservice-checkin-modal {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	margin: auto;
	max-height: 90vh;
	max-width: 95vw;
	width: 720px;
}

.iservice-checkin-frame {
	border: 0;
	flex: 1 1 auto;
	min-height: 70vh;
	width: 100%;
}

.iservice-checkin-actions {
	border-top: 1px solid #e2e2e2;
	flex: 0 0 auto;
	padding: 8px 12px;
	text-align: right;
}

/* -- Status-change two-step guide (veil until the handler select is touched) --
   The veil sits above the form; the "assigned to" row is raised above the veil
   so it stays fully visible and clickable (nothing looks disabled/broken). */
.iservice-gate-host {
	position: relative;
}

.iservice-gate-overlay {
	background: rgba(255, 255, 255, 0.72);
	bottom: 0;
	cursor: not-allowed;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 5;
}

.iservice-gate-hint {
	background: #fff;
	border: 1px solid #f0ad4e;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	color: #8a6d3b;
	left: 50%;
	max-width: 90%;
	padding: 8px 14px;
	position: absolute;
	top: 10px;
	transform: translateX(-50%);
}

/* Raised above the veil — the one row that stays usable. */
tr.iservice-gate-open {
	position: relative;
	z-index: 6;
}

/* -- Bugnote table-insert button + popup -- */
.iservice-table-btn {
	margin-top: 4px;
}

.iservice-tbl-popup {
	background: #fff;
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	max-width: 95vw;
	padding: 10px 12px;
	position: absolute;
	z-index: 9999;
}

.iservice-tbl-controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.iservice-tbl-controls label {
	font-weight: normal;
	margin: 0;
}

.iservice-tbl-controls input[type="number"] {
	width: 56px;
}

.iservice-tbl-gridwrap {
	max-height: 320px;
	max-width: 70vw;
	overflow: auto;
}

.iservice-tbl-grid {
	border-collapse: collapse;
}

.iservice-tbl-grid td {
	padding: 2px;
}

.iservice-tbl-grid input.iservice-tbl-cell {
	box-sizing: border-box;
	min-width: 110px;
	padding: 2px 4px;
	width: 100%;
}

.iservice-tbl-buttons {
	margin-top: 8px;
	text-align: right;
}

/* -- Aside drag & drop reordering -- */
.calendar-aside .widget-box {
	margin-bottom: 10px;
}

.calendar-aside .iservice-drag-handle {
	cursor: move;
}

/* The dragged module follows the cursor live; fade + dashed outline mark it. */
.calendar-aside .iservice-dragging {
	opacity: 0.45;
	outline: 2px dashed #3b8fd6;
	outline-offset: -2px;
}

/* -- Board columns drag & drop reordering (own column stays pinned) -- */
.iservice-board .iservice-col:not(.iservice-col-self)>.iservice-col-head {
	cursor: move;
}

.iservice-board .iservice-col.iservice-dragging {
	opacity: 0.45;
	outline: 2px dashed #3b8fd6;
	outline-offset: -2px;
}

/* -- Account settings: per-item menu-placement rows (Navigationspunkte) -- */
.iservice-menu-pref {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-bottom: 4px;
}

.iservice-menu-pref label {
	flex: 0 0 140px;
	margin: 0;
	font-weight: normal;
}

.iservice-menu-pref-hint {
	margin-top: 6px;
}