/*
 * StarshipOS — OTS Task Strip (CC_025)
 * Fixiertes Widget als schmaler rechter Streifen.
 * position: fixed; rechts; kein Layout-Reflow.
 */

/* ── Outer Container ────────────────────────────────────────────────── */
.ots-task-strip {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 36px;
  z-index: 900;
  background: var(--panel-bg, rgba(0, 10, 20, 0.95));
  border-left: 1px solid rgba(0, 229, 255, 0.3);
  transition: width 150ms ease;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* Versteckte Checkbox fuer den Toggle */
.ots-strip-checkbox {
  display: none;
}

/* ── Tab (immer sichtbar) ────────────────────────────────────────────── */
.ots-strip-tab {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
  cursor: pointer;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  user-select: none;
}

.ots-strip-arrow {
  font-size: 0.7rem;
  transition: transform 150ms ease;
}

/* Badge */
.ots-strip-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: bold;
}

.badge-none { background: rgba(100, 100, 100, 0.3); color: #888; }
.badge-urgent { background: rgba(213, 0, 0, 0.4); color: #ff5252; animation: badge-pulse 1.5s infinite; }
.badge-info { background: rgba(255, 214, 0, 0.3); color: #ffd600; }
.badge-ok { background: rgba(0, 200, 83, 0.3); color: #00c853; }

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Erweitertes Panel ──────────────────────────────────────────────── */
.ots-strip-panel {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.ots-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
  flex-shrink: 0;
}

.ots-strip-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--accent-cyan, #00e5ff);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ots-strip-close {
  cursor: pointer;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.2rem;
}

.ots-strip-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ots-strip-empty {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem 0.5rem;
}

/* ── Checked State: Panel einblenden ───────────────────────────────── */
.ots-strip-checkbox:checked ~ .ots-strip-tab .ots-strip-arrow {
  transform: rotate(180deg);
}

.ots-strip-checkbox:checked ~ .ots-strip-panel {
  opacity: 1;
  pointer-events: all;
}

/* Breite auf 256px (36 Tab + 220 Panel) ausdehnen wenn expanded.
 * :has() wird ab Firefox 121 (Dez 2023) und Chrome 105+ unterstuetzt.
 * Fuer aeltere Browser faellt der Strip einfach schmal (36px) und
 * das Panel bleibt zugaenglich, da opacity:0 nur visuell versteckt. */
.ots-task-strip:has(.ots-strip-checkbox:checked) {
  width: 256px;
}

/* ── Task-Eintrag ────────────────────────────────────────────────────── */
.ots-task-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.8rem;
}

/* Status-spezifische Border-Farben */
.ots-task-item.status-pending { border-color: rgba(255, 255, 255, 0.2); }
.ots-task-item.status-acknowledged { border-color: rgba(25, 118, 210, 0.5); }
.ots-task-item.status-in-progress { border-color: rgba(255, 214, 0, 0.5); }
.ots-task-item.status-submitted { border-color: rgba(25, 118, 210, 0.5); }
.ots-task-item.status-verified { border-color: rgba(0, 200, 83, 0.5); opacity: 0.7; }
.ots-task-item.status-rejected { border-color: rgba(213, 0, 0, 0.6); }

/* Status-Punkt */
.ots-task-status-dot { font-size: 0.6rem; line-height: 1.4; }
.dot-pending { color: rgba(255, 255, 255, 0.4); }
.dot-acknowledged { color: #64B5F6; }
.dot-in-progress { color: #ffd600; }
.dot-submitted { color: #64B5F6; }
.dot-verified { color: #00c853; }
.dot-rejected { color: #ff5252; }

.ots-task-content { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ots-task-title { font-weight: bold; font-size: 0.78rem; word-break: break-word; line-height: 1.3; }
.ots-task-desc { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ots-task-rejected { font-size: 0.72rem; color: #ff5252; font-style: italic; }
.ots-task-waiting { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); font-style: italic; }
.ots-task-done { font-size: 0.75rem; color: #00c853; font-weight: bold; }

.ots-task-actions { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.2rem; }

/* ── Art + Ort eines Auftrags ─────────────────────────────────────────
 * Panel-Auftraege nennen ihr Panel: auf dem eigenen Panel „hier" und
 * hervorgehoben, sonst als Link dorthin. Vor-Ort-/Absprache-Auftraege
 * zeigen ihre Art — damit klar ist, dass sie nicht am Terminal passieren.
 */
.ots-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ots-task-kind { padding: 0 0.3rem; border: 1px solid currentColor; border-radius: 2px; }
.kind-panel { color: #00e5ff; }
.kind-physical { color: #ffab40; }
.kind-rp { color: #ce93d8; }
.kind-standard { color: rgba(255, 255, 255, 0.5); }
.kind-confirm { color: #ffd600; }
.ots-task-panel-here { color: #00c853; font-weight: bold; }
.ots-task-panel-link { color: #64B5F6; text-decoration: underline; }
.ots-task-confirmby { color: rgba(255, 255, 255, 0.5); }
.ots-task-item.ots-task-here { border-color: rgba(0, 229, 255, 0.7); box-shadow: inset 3px 0 0 #00e5ff; }
.ots-task-item.ots-task-confirm-request { border-color: rgba(255, 214, 0, 0.7); box-shadow: inset 3px 0 0 #ffd600; }

/* Panel-Auftrag: Ist/Soll und Haltefortschritt */
.ots-task-live { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.25rem 0.35rem; border: 1px dashed rgba(0, 229, 255, 0.35); border-radius: 3px; }
.ots-task-live.live-met { border-color: rgba(0, 200, 83, 0.6); }
.ots-live-values { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.72rem; }
.ots-live-label { color: rgba(255, 255, 255, 0.6); }
.ots-live-actual { font-weight: bold; font-variant-numeric: tabular-nums; color: #ffd600; }
.ots-task-live.live-met .ots-live-actual { color: #00c853; }
.ots-live-target { color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.ots-live-hold { height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; }
.ots-live-hold-fill { height: 100%; background: #00c853; transition: width 0.5s linear; }
.ots-live-hint { font-size: 0.66rem; color: rgba(255, 255, 255, 0.5); font-style: italic; }
.ots-live-error { color: #ffab40; }

/* Aktionsbuttons */
.btn-ots {
  font-size: 0.68rem;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
}
.btn-ots-ack { border-color: #64B5F6; color: #64B5F6; }
.btn-ots-ack:hover { background: rgba(25, 118, 210, 0.2); }
.btn-ots-progress { border-color: #ffd600; color: #ffd600; }
.btn-ots-progress:hover { background: rgba(255, 214, 0, 0.15); }
.btn-ots-submit { border-color: #00c853; color: #00c853; }
.btn-ots-submit:hover { background: rgba(0, 200, 83, 0.15); }
.btn-ots-resubmit { border-color: #ff5252; color: #ff5252; }
.btn-ots-resubmit:hover { background: rgba(213, 0, 0, 0.15); }

/* ── Ablehnen mit Begruendung (CC_191) ───────────────────────────────
 * Bewusst eingeklappt: Ablehnen ist die seltenere Antwort und soll nicht
 * gleich gross neben „Erledigt" stehen. Wer sie braucht, findet sie —
 * wer sie nicht braucht, klickt sie nicht versehentlich.
 */
.ots-task-decline > summary {
  font-size: 0.66rem;
  color: rgba(255, 82, 82, 0.75);
  cursor: pointer;
  margin-top: 0.15rem;
  list-style: none;
}
.ots-task-decline > summary::-webkit-details-marker { display: none; }
.ots-task-decline[open] > summary { color: #ff5252; }
.ots-decline-form { display: flex; gap: 0.2rem; margin-top: 0.2rem; }
.ots-decline-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 82, 82, 0.5);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
}
.ots-decline-input:focus { outline: none; border-color: #ff5252; }
.btn-ots-decline { border-color: #ff5252; color: #ff5252; }
.btn-ots-decline:hover { background: rgba(213, 0, 0, 0.15); }

/* ── Urgency-Zustand: Strip pulsiert am Rand ────────────────────────── */
.ots-strip-urgent {
  border-left-color: #ff5252;
  animation: strip-urgent 2s infinite;
}

@keyframes strip-urgent {
  0%, 100% { border-left-color: #ff5252; }
  50% { border-left-color: rgba(213, 0, 0, 0.2); }
}

/* Reiter-Beschriftung: in der Randschiene ausgeblendet, im unteren Dock
 * sichtbar (siehe assets/css/v2/responsive-v2.css, Abschnitt 3). */
.ots-strip-text {
  display: none;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}