/* ════════════════════════════════════════════════════════════════════
   ITSM Live Dashboard v2 — Stylesheet
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #0d1117;
  --surface:     #161b22;
  --surface-2:   #1c2330;
  --surface-3:   #21262d;
  --border:      #30363d;
  --border-2:    #484f58;
  --warn-border: #d29922;
  --text:        #e6edf3;
  --text-muted:  #8b949e;
  --text-dim:    #6e7681;

  --blue:    #388bfd;
  --green:   #3fb950;
  --orange:  #d29922;
  --red:     #f85149;
  --purple:  #bc8cff;
  --teal:    #39d353;
  --yellow:  #e3b341;
  --indigo:  #6e76ae;
  --cyan:    #56d4dd;

  --priority-critical: #f85149;
  --priority-highest:  #f85149;
  --priority-high:     #d29922;
  --priority-medium:   #388bfd;
  --priority-low:      #3fb950;
  --priority-lowest:   #3fb950;
  --priority-unknown:  #6e7681;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  padding: 6px 12px;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.btn:active { transform: scale(.97); }

.btn-icon { padding: 6px; border-color: transparent; background: transparent; }
.btn-icon:hover { background: var(--surface-3); border-color: var(--border); }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #1f6feb; border-color: #1f6feb; }

.btn-danger  { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover  { background: rgba(248,81,73,.1); }

.btn-sm { font-size: 11px; padding: 4px 8px; }

/* ── Header ──────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: 56px;
  display: flex; align-items: center; gap: 12px;
}
.header-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-center{ flex: 1; display: flex; justify-content: center; }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.logo { flex-shrink: 0; line-height: 0; }
.header-title { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* Project Select */
.project-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 260px;
}
.project-select:focus { outline: none; border-color: var(--blue); }

/* Status */
.conn-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim);
  transition: background .3s;
}
.status-dot.ok      { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.error   { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.status-dot.loading { background: var(--yellow); animation: pulse 1.2s infinite; }

.header-meta { display: flex; align-items: center; gap: 12px; }
.meta-item   { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Main ────────────────────────────────────────────────────────── */
.main {
  flex: 1; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}

/* ── Loading / Empty / Error ─────────────────────────────────────── */
.loading-overlay {
  position: absolute; inset: 0;
  background: rgba(13,17,23,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; z-index: 10; backdrop-filter: blur(3px);
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 80px 20px; text-align: center;
}
.empty-state h2 { font-size: 18px; color: var(--text-muted); }
.empty-state p  { font-size: 14px; color: var(--text-dim); }

.error-banner {
  background: rgba(248,81,73,.1);
  border: 1px solid rgba(248,81,73,.35);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  color: var(--red); font-size: 13px;
}

/* ── KPI Grid ────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
/* Sortierung: Live-Kacheln zuerst, dann Heute, dann Woche */
#card-open     { order: 1; }
#card-fte      { order: 2; }
#card-sla      { order: 3; }
#card-today    { order: 10; }
#card-response { order: 11; }
#card-mttr             { order: 20; }
#card-fcr              { order: 21; }
#card-week             { order: 22; }
#card-monthly-breach   { order: 30; }
#card-monthly-feedback { order: 31; }

/* Dashboard Edit-Modus */
.kpi-grid.edit-mode .kpi-card {
  outline: 2px dashed var(--border-2);
  cursor: grab;
}
.kpi-grid.edit-mode .kpi-card:active { cursor: grabbing; }
.kpi-card.drag-over { outline-color: var(--blue) !important; background: rgba(56,139,253,.08); }
.kpi-card.dragging  { opacity: .4; }

.card-edit-controls {
  position: absolute; top: 4px; left: 4px; z-index: 20;
  display: none; gap: 3px;
}
/* Edit-Modus: entfernt */
.card-edit-btn {
  width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); font-size: 11px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.card-edit-btn.card-shrink:hover, .card-edit-btn.card-grow:hover {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.card-edit-btn.card-hide:hover { background: var(--red); color: #fff; border-color: var(--red); }

.drag-placeholder { pointer-events: none; }

.edit-bar {
  display: none; align-items: center; gap: 10px;
  padding: 8px 14px; background: rgba(56,139,253,.1);
  border: 1px solid rgba(56,139,253,.3); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--blue); margin-bottom: 8px;
  position: sticky; top: 56px; z-index: 50;  /* unterhalb Header, scrollt mit */
  backdrop-filter: blur(8px);
}
.edit-bar.active { display: flex; }

.add-tile-card {
  background: var(--surface); border: 2px dashed var(--border);
  border-radius: var(--radius); display: none; align-items: center;
  justify-content: center; flex-direction: column; gap: 6px;
  cursor: pointer; min-height: 100px; color: var(--text-muted);
  font-size: 13px; transition: border-color .15s, color .15s;
}
.add-tile-card:hover { border-color: var(--blue); color: var(--blue); }
.add-tile-card .plus { font-size: 28px; font-weight: 300; }
.edit-mode .add-tile-card { display: flex; }

/* Kachel-Breite im Edit-Modus */
.kpi-card[data-width="2"] { grid-column: span 2; }
.kpi-card[data-width="3"] { grid-column: span 3; }

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; align-items: flex-start; gap: 12px;
  box-shadow: var(--shadow);
  transition: border-color .2s, transform .15s;
  position: relative; overflow: hidden;
  min-height: 0;
}
.kpi-card:hover { transform: translateY(-1px); }

/* Normale Kacheln: nur Rand ändert sich — kein Hintergrund (funktioniert auf hell + dunkel) */
.kpi-card.status--warn { border: 2px solid var(--warn-border); }
.kpi-card.status--bad  { border: 2px solid var(--red); }

/* ── Service Health Kachel ──────────────────────────────────────────────── */
#card-health {
  border-left: 5px solid var(--border);
  transition: border-color .25s, background .25s;
  flex-direction: column;
  gap: 0;
  padding: 12px 14px;
}
#card-health .kpi-label { margin-bottom: 8px; }

/* Status — linker Balken + schwacher Hintergrund */
#card-health.status--good {
  border-left-color: #3fb950;
  background: rgba(63,185,80,.12);
}
#card-health.status--warn {
  border-left-color: #d29922;
  background: rgba(210,153,34,.12);
}
#card-health.status--bad {
  border-left-color: #f85149;
  background: rgba(248,81,73,.12);
}

/* Statuszeile: farbiges Wort */
.health-status-line {
  font-size: 15px; font-weight: 700; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.health-status-line::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
#card-health.status--good .health-status-line { color: #3fb950; }
#card-health.status--good .health-status-line::before { background: #3fb950; }
#card-health.status--warn .health-status-line { color: #d29922; }
#card-health.status--warn .health-status-line::before { background: #d29922; }
#card-health.status--bad  .health-status-line { color: #f85149; }
#card-health.status--bad  .health-status-line::before { background: #f85149; }

.kpi-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon--blue   { background: rgba(56,139,253,.15); color: var(--blue); }
.kpi-icon--green  { background: rgba(63,185,80,.15);  color: var(--green); }
.kpi-icon--orange { background: rgba(210,153,34,.15); color: var(--orange); }
.kpi-icon--red    { background: rgba(248,81,73,.15);  color: var(--red); }
.kpi-icon--purple { background: rgba(188,140,255,.15);color: var(--purple); }
.kpi-icon--teal   { background: rgba(57,211,83,.15);  color: var(--teal); }
.kpi-icon--yellow { background: rgba(227,179,65,.15); color: var(--yellow); }
.kpi-icon--indigo { background: rgba(110,118,174,.15);color: var(--indigo); }
.kpi-icon--cyan   { background: rgba(86,212,221,.15); color: var(--cyan); }

.kpi-body  { flex: 1; min-width: 0; }
.kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing:.06em; margin-bottom:4px; }
.kpi-value { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.kpi-sub   { font-size: 11px; color: var(--text-muted); }
.kpi-fte-hdi { font-size: 11px; margin-top: 5px; line-height: 1.4; }
.kpi-fte-reason { color: var(--text-muted); font-weight: 400; }

/* Health Score Kachel — steht im HTML als erstes Element im Grid */
#card-monthly-breach   { order: 30; }
#card-monthly-feedback { order: 31; }
#card-reopen           { order: 32; }

/* Health-Kachel: kein Icon, volle Breite für Text */
.kpi-card--health .kpi-body { width: 100%; }

/* Problemliste */
.kpi-health-issues {
  font-size: 11px; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 4px;
}
.health-issue-item {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
}
.health-issue-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.health-dot--warn { background: #d29922; }
.health-dot--bad  { background: #f85149; }
.health-all-ok    { font-size: 11px; color: var(--text-muted); }
.health-hint      { font-size: 10px; color: var(--text-dim); }
.health-issue-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

.badge-source {
  font-size: 10px; padding: 1px 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-dim);
}

/* ── Charts Grid ─────────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
/* Backlog-Trend immer volle Breite */
.chart-card--wide { grid-column: 1 / -1; }
/* Tickets nach Status — doppelte Breite */
#mod-status { grid-column: span 2; }

@media (max-width: 680px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
}

.chart-card, .table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
}
.chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-shrink: 0; flex-wrap: wrap; gap: 4px;
}
.chart-header h2 { font-size: 13px; font-weight: 600; }
.chart-badge {
  font-size: 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 2px 7px; color: var(--text-muted);
}
.chart-wrap           { position: relative; flex: 1; min-height: 180px; }
.chart-wrap--donut    { min-height: 200px; }

/* ── Bottom Grid ─────────────────────────────────────────────────── */

/* ── Agent Table ─────────────────────────────────────────────────── */
.agent-table-wrap { overflow-x: auto; }
.agent-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.agent-table th {
  text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing:.06em; color: var(--text-muted);
  padding: 5px 8px; border-bottom: 1px solid var(--border);
}
.agent-table td { padding: 7px 8px; border-bottom: 1px solid rgba(48,54,61,.5); }
.agent-table tr:last-child td { border-bottom: none; }
.agent-table tr:hover td { background: var(--surface-2); }
.no-data { color: var(--text-muted); font-style: italic; text-align: center; padding: 20px!important; }

.workload-bar-wrap { display: flex; align-items: center; gap: 6px; }
.workload-bar-bg   { flex: 1; height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.workload-bar-fill { height: 100%; border-radius: 3px; background: var(--blue); transition: width .4s; }
.workload-bar-fill.high     { background: var(--orange); }
.workload-bar-fill.critical { background: var(--red); }

/* ── KPI Progress ────────────────────────────────────────────────── */
.kpi-progress-list   { display: flex; flex-direction: column; gap: 12px; }
.kpi-progress-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.kpi-progress-label  { color: var(--text-muted); }
.kpi-progress-value  { font-weight: 600; }
.progress-bar-bg     { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.progress-bar-fill   { height: 100%; border-radius: 4px; transition: width .6s, background .3s; }
.progress-bar-fill.good { background: var(--green); }
.progress-bar-fill.warn { background: var(--yellow); }
.progress-bar-fill.bad  { background: var(--red); }
.kpi-progress-target { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border); padding: 10px 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-muted);
}
.footer a { color: var(--blue); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(1,4,9,.7);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  width: min(640px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: slideUp .2s ease;
}
@keyframes slideUp {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { font-size: 16px; font-weight: 600; }

.modal-body { overflow-y: auto; flex: 1; }

/* Tabs */
.modal-tabs {
  display: flex; gap: 0; padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.tab-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: 13px; padding: 10px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--blue); }

.tab-content { display: none; padding: 20px; }
.tab-content.active { display: block; }

/* Projects list in modal */
#projects-list { display: flex; flex-direction: column; gap: 10px; }

.project-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.project-item-info { flex: 1; min-width: 0; }
.project-item-name { font-weight: 600; font-size: 14px; }
.project-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.project-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

.project-key-badge {
  font-family: monospace; font-size: 11px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; color: var(--text-muted);
}

/* Settings Form */
.settings-form { display: flex; flex-direction: column; gap: 20px; }

.form-section h3 {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.form-help  { font-size: 11px; color: var(--blue); text-decoration: none; }
.form-help:hover { text-decoration: underline; }
.form-hint  { font-size: 10px; color: var(--text-dim); }

.form-row input, .form-row select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
  transition: border-color .15s;
}
.form-row input:focus, .form-row select:focus {
  outline: none; border-color: var(--blue);
}
.form-row input::placeholder { color: var(--text-dim); }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding-top: 4px;
}
.form-status { font-size: 12px; flex: 1; }
.form-status.ok    { color: var(--green); }
.form-status.error { color: var(--red); }

/* ── View Tabs (Dashboard / Monatsbericht) ───────────────────────── */
.view-tabs { display: flex; gap: 2px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 2px; }
.view-tab  {
  background: none; border: none; color: var(--text-muted);
  font-size: 12px; padding: 5px 12px; border-radius: 4px; cursor: pointer;
  transition: background .15s, color .15s;
}
.view-tab:hover { color: var(--text); }
.view-tab.active { background: var(--surface); color: var(--text); font-weight: 600; }

/* ── Report Section ──────────────────────────────────────────────── */
.report-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.report-title    { font-size: 16px; font-weight: 600; }
.report-controls { display: flex; align-items: center; gap: 8px; }

.report-loading  {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: 13px; padding: 20px;
}

.report-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.report-section-title {
  font-size: 14px; font-weight: 600; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.report-subsection {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  margin: 16px 0 8px;
}

.table-responsive { overflow-x: auto; }

.report-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.report-table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.report-table td {
  padding: 8px 10px; border-bottom: 1px solid rgba(48,54,61,.4);
  color: var(--text);
}
.report-table tr:last-child td { border-bottom: none; }
.report-table tr:hover td { background: var(--surface-2); }
.text-right { text-align: right !important; }
.csat-feedback-text {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-muted);
}

.diff-pos  { color: var(--green); font-weight: 600; }
.diff-neg  { color: var(--red);   font-weight: 600; }
.diff-zero { color: var(--text-muted); }

.breach-row td { background: rgba(248,81,73,.05); }
.breach-row:hover td { background: rgba(248,81,73,.1) !important; }
.breach-link { color: var(--blue); text-decoration: none; font-family: monospace; font-size: 12px; }
.breach-link:hover { text-decoration: underline; }

.report-kpi-row {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.report-kpi-chip {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  min-width: 140px;
  position: relative;
}
.report-kpi-chip .report-info-inline {
  position: absolute; top: 6px; right: 6px;
  display: flex; margin-left: 0; vertical-align: unset;
}
.report-kpi-chip .chip-label   { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.report-kpi-chip .chip-value   { font-size: 20px; font-weight: 700; }
.report-kpi-chip .chip-sub     { font-size: 11px; color: var(--text-muted); }
.report-kpi-chip .chip-verdict { font-size: 11px; font-weight: 600; margin-top: 4px; }

.report-info-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; line-height: 1.8;
  margin-bottom: 8px;
}

.row-current { background: rgba(56,139,253,.06) !important; font-weight: 600; }

/* ── History Section ─────────────────────────────────────────────── */
.history-section {
  display: flex; flex-direction: column; gap: 12px;
}
.history-header {
  display: flex; align-items: center; justify-content: space-between;
}
.history-header h2 { font-size: 14px; font-weight: 600; }
.history-controls  { display: flex; align-items: center; gap: 8px; }

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.trend-badge {
  font-size: 11px; padding: 2px 7px; border-radius: 20px; font-weight: 600;
}
.trend-badge.good    { background: rgba(63,185,80,.15);  color: var(--green); }
.trend-badge.bad     { background: rgba(248,81,73,.15);  color: var(--red); }
.trend-badge.neutral { background: var(--surface-2);     color: var(--text-muted); }

/* ⓘ im Report — identischer Style wie kpi-info-btn */
.report-info-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; min-width: 18px;
  background: none; border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-dim);
  font-size: 10px; font-weight: 700; line-height: 18px;
  cursor: pointer; padding: 0;
  margin-left: 6px; vertical-align: middle;
  transition: border-color .15s, color .15s;
  user-select: none; flex-shrink: 0;
}
.report-info-inline:hover { border-color: var(--blue); color: var(--blue); }

/* ── Monatsbericht-Modus: alles außer Report ausblenden ─────────────── */
body.view-report #dashboard-grid,
body.view-report .kpi-grid,
body.view-report .charts-grid,
body.view-report .history-section,
body.view-report .edit-bar,
body.view-report #loading,
body.view-report #error-banner,
body.view-report #no-projects,
body.view-report .it-overview-section,
body.view-report .footer { display: none !important; }

body.view-report #report-section { display: block !important; }

/* ── Dashboard-Modus ─────────────────────────────────────────────────── */
body.view-dashboard #report-section      { display: none !important; }
body.view-dashboard .it-overview-section { display: none !important; }
body.view-dashboard #dashboard-grid      { display: block !important; }

/* ── IT-Overview-Modus: nur Overview-Grid sichtbar ──────────────────── */
body.view-it-overview .kpi-grid,
body.view-it-overview .charts-grid,
body.view-it-overview .history-section,
body.view-it-overview .edit-bar,
body.view-it-overview #loading,
body.view-it-overview #error-banner,
body.view-it-overview #no-projects,
body.view-it-overview #report-section { display: none !important; }

body.view-it-overview .it-overview-section { display: block !important; }

/* ── IT-Overview Grid Layout ─────────────────────────────────────────── */
.it-overview-section { display: none; padding: 24px; }

.it-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

/* Service Health — volle Breite oben */
.it-overview-grid .it-ov-health {
  grid-column: 1 / -1;
}

/* Health-Kachel im Overview — gleicher Stil wie Haupt-Health */
.it-overview-grid .kpi-card--health {
  border-left: 4px solid var(--green);
  min-height: 90px;
}
.it-overview-grid .kpi-card--health.status--good { border-left-color: var(--green);  background: rgba(var(--green-rgb, 74,222,128),.06); }
.it-overview-grid .kpi-card--health.status--warn { border-left-color: var(--yellow); background: rgba(var(--yellow-rgb,234,179, 8),.06); }
.it-overview-grid .kpi-card--health.status--bad  { border-left-color: var(--red);    background: rgba(var(--red-rgb,  239, 68,68),.06); }

@media (max-width: 600px) {
  .it-overview-grid { grid-template-columns: 1fr; }
  .it-overview-grid .it-ov-health { grid-column: 1; }
}

.report-query-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  margin: 8px 0; font-size: 12px;
}
.report-query-box .query-label { color: var(--text-muted); margin-bottom: 4px; }
.report-query-box .query-jql {
  font-family: monospace; font-size: 11px; color: var(--cyan);
  word-break: break-all; margin: 4px 0;
}
.report-query-box .query-link { color: var(--blue); text-decoration: none; font-size: 11px; }
.report-query-box .query-link:hover { text-decoration: underline; }
.report-query-box .query-note {
  color: var(--yellow); font-size: 11px; margin-top: 6px;
  padding: 4px 8px; background: rgba(227,179,65,.08);
  border-radius: 3px; border-left: 2px solid var(--yellow);
}

.history-note {
  font-size: 12px; color: var(--text-muted); text-align: center;
  padding: 8px; background: var(--surface-2); border-radius: var(--radius-sm);
}

/* ── KPI Info Tooltip ────────────────────────────────────────────── */
.kpi-info-btn {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px;
  background: none; border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-dim);
  font-size: 10px; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
  padding: 0; flex-shrink: 0;
}
.kpi-info-btn:hover { border-color: var(--blue); color: var(--blue); }

.kpi-tooltip-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(1,4,9,.6); backdrop-filter: blur(3px);
}
.kpi-tooltip-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  padding: 20px 22px;
  max-width: 380px; width: 90vw;
  animation: slideUp .18s ease;
}
.kpi-tooltip-box h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.kpi-tooltip-box p  { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
.kpi-tooltip-box p:last-child { margin-bottom: 0; }
.kpi-tooltip-box .formula {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 12px; font-family: monospace; color: var(--text);
  margin: 8px 0;
}
.kpi-tooltip-box .info-note {
  background: rgba(56,139,253,.08); border: 1px solid rgba(56,139,253,.2);
  border-radius: var(--radius-sm); padding: 7px 10px;
  font-size: 11.5px; color: var(--text-muted); margin: 8px 0 0;
}

/* Aktueller-Wert-Block im Info-Popup */
.info-current-block {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px; margin: 10px 0 6px;
}
.info-current-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.info-current-value { font-size: 18px; font-weight: 700; color: var(--text); }
.info-badge {
  font-size: 11px; font-weight: 600; padding: 2px 7px;
  border-radius: 10px; white-space: nowrap;
}
.info-badge-good { background: rgba(63,185,80,.15); color: #3fb950; }
.info-badge-warn { background: rgba(210,153,34,.15); color: #d29922; }
.info-badge-bad  { background: rgba(248,81,73,.15);  color: #f85149; }

/* Benchmark-Schwellenwert-Tabelle im Info-Popup */
.info-threshold-table {
  width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: 12px;
}
.info-threshold-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); }
.info-threshold-table td:first-child { color: var(--text-muted); width: 38%; }
.info-threshold-table td:nth-child(2) { font-weight: 600; color: var(--text); width: 22%; }
.info-threshold-table .thr-sub { color: var(--text-dim); font-size: 11px; }

/* Quellen-Footer im Info-Popup */
.info-source {
  font-size: 11px; color: var(--text-dim); margin: 8px 0 0;
  border-top: 1px solid var(--border); padding-top: 6px;
}

/* Benchmark-Metadaten-Tabelle in Einstellungen */
.benchmark-meta-table {
  width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px;
}
.benchmark-meta-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.benchmark-meta-table td:first-child { color: var(--text-muted); width: 40%; }
.kpi-tooltip-close {
  float: right; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1;
  margin-left: 8px;
}
.kpi-tooltip-close:hover { color: var(--text); }

/* ── KPI Card Enhancements ───────────────────────────────────────── */
.kpi-period {
  display: inline-block; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 3px; margin-bottom: 3px;
  opacity: .75;
}
.kpi-period.period-today   { background: rgba(56,139,253,.15);  color: var(--blue); }
.kpi-period.period-week    { background: rgba(188,140,255,.15); color: var(--purple); }
.kpi-period.period-month   { background: rgba(63,185,80,.15);   color: var(--green); }
.kpi-period.period-live    { background: rgba(57,211,83,.15);   color: var(--teal); }
.kpi-period.period-hist    { background: rgba(136,136,136,.12); color: var(--text-muted); }
.chart-header .kpi-period  { margin-bottom: 0; margin-left: auto; margin-right: 6px; }

.kpi-value-link {
  color: inherit; text-decoration: none; cursor: pointer;
  border-bottom: 1px dashed transparent; transition: border-color .15s;
}
.kpi-value-link:hover { border-bottom-color: currentColor; }

.sla-mini-bars { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.sla-mini-row  { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.sla-mini-label{ color: var(--text-dim); min-width: 40px; flex-shrink: 0; }
.sla-mini-bar  { flex: 1; height: 4px; background: var(--surface-2);
                 border-radius: 2px; overflow: hidden; }
.sla-mini-fill { height: 100%; border-radius: 2px; transition: width .4s; }
.sla-mini-count{ color: var(--text-muted); font-weight: 600; min-width: 20px; text-align: right; }

/* ── User Menu ───────────────────────────────────────────────────── */
.user-menu-wrap { position: relative; }

.user-menu-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: var(--radius-sm);
}

.user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 180px; z-index: 200;
  animation: fadeIn .15s ease;
}
.user-dropdown-name {
  padding: 10px 14px 2px;
  font-weight: 600; font-size: 13px;
}
.user-dropdown-role {
  padding: 0 14px 8px;
  font-size: 11px; color: var(--text-muted);
  text-transform: capitalize;
}
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.dropdown-item {
  display: block; width: 100%;
  background: none; border: none;
  text-align: left; padding: 9px 14px;
  font-size: 13px; color: var(--text);
  cursor: pointer;
}
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item--danger { color: var(--red); }

/* ── GridStack Integration ───────────────────────────────────────── */
.grid-stack { background: transparent !important; }

/* GridStack Standard-Styles überschreiben */
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
.grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
}
/* Kein blauer Rahmen/Stripe aus gridstack.min.css */
.grid-stack > .grid-stack-item:before { display: none !important; }
.grid-stack-placeholder > .placeholder-content { background: rgba(56,139,253,.1) !important; border: 2px dashed var(--blue) !important; }
.grid-stack-item-content {
  background: transparent;
  overflow: visible;
  inset: 4px !important;
}
.grid-stack-item > .ui-resizable-se {
  bottom: 4px; right: 4px;
  width: 16px; height: 16px;
  background: var(--border); border-radius: 3px;
  opacity: 0; transition: opacity .2s;
  cursor: se-resize;
}
.grid-stack-item:hover > .ui-resizable-se { opacity: .7; }


/* Resize-Handle: standardmäßig versteckt */
.grid-stack-item > .ui-resizable-handle { display: none !important; opacity: 0; }

/* GridStack blaue Outline entfernen (außer Edit-Modus) */
.grid-stack-item.ui-draggable-dragging { z-index: 100; }
.grid-stack > .grid-stack-item > .grid-stack-item-content { outline: none; }
.grid-stack-item.ui-resizable-resizing { outline: 1px dashed var(--blue); }

/* ── Sortable.js ─────────────────────────────────────────────────── */
.sortable-ghost  { opacity: .35; }
.sortable-chosen { box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; }
.sortable-drag   { opacity: .9; }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity:0; transform: translateY(3px); }
  to   { opacity:1; transform: translateY(0); }
}
.kpi-card, .chart-card, .table-card { animation: fadeIn .3s ease both; }