/* ---------------------------------------------------
   Kanban – Aufgaben-Board im KaytusOS-Stil
   (Leiste, Knöpfe, Dialoge und Ordnerwahl aus eunomia.css / haster.css)
--------------------------------------------------- */

.window--kanban {
  width: min(1500px, 97vw);
  height: min(900px, calc(100vh - var(--taskbar-height) - 24px));
  max-height: min(900px, calc(100vh - var(--taskbar-height) - 24px));
  background: #0c0602;
}

.window--kanban.is-max {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  height: calc(100vh - var(--taskbar-height));
  max-height: calc(100vh - var(--taskbar-height));
}

.kanban {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.kanban [hidden] {
  display: none !important;
}

.kb-ico {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ---------- Filter ---------- */

.kb-filter input {
  width: 230px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
}

.kb-filter input:focus-visible {
  border-color: var(--accent-cold);
}

.kb-filter input::placeholder {
  color: var(--ink-dim);
  opacity: .7;
}

/* ---------- Board ---------- */

.kb-board {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  overflow: auto;
}

.kb-col {
  flex: 0 0 272px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: rgba(255, 176, 102, .03);
}

.kb-col.is-dragging {
  opacity: .4;
}

.kb-col.is-drop-left {
  box-shadow: -3px 0 0 var(--accent-cold);
}

.kb-col.is-drop-right {
  box-shadow: 3px 0 0 var(--accent-cold);
}

.kb-col__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 10px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
}

.kanban.is-readonly .kb-col__head {
  cursor: default;
}

.kb-col__title {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 1px dashed transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .5px;
  line-height: 1.6;
  text-align: left;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.kanban.is-readonly .kb-col__title {
  cursor: default;
}

.kb-col__count {
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-family: var(--font-retro);
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
}

.kb-col__more {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}

.kb-col__more:hover,
.kb-col__more:focus-visible {
  color: var(--ink);
  outline: none;
}

.kb-rename {
  flex: 1;
  min-width: 0;
  padding: 2px 5px;
  border: 1px solid var(--accent-cold);
  background: #000;
  color: var(--ink);
  font-family: var(--font-retro);
  font-size: 17px;
  outline: none;
}

.kb-list {
  flex: 1;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
}

.kb-mark {
  height: 3px;
  margin: -2px 0;
  background: var(--accent-cold);
  pointer-events: none;
}

/* ---------- Karten ---------- */

.kb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 9px 12px;
  border: 1px solid var(--line-strong);
  background: #140a04;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.kb-card:hover,
.kb-card:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.kb-card.is-dragging {
  opacity: .35;
}

.kb-card__stripe {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 4px;
}

.kb-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kb-card__num {
  color: var(--ink-dim);
  font-family: var(--font-retro);
  font-size: 15px;
  line-height: 1;
}

.kb-card__desc {
  color: var(--ink-dim);
}

.kb-card__title {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

.kb-card__people {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.kb-avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid hsl(var(--hue, 30) 70% 60%);
  background: hsl(var(--hue, 30) 60% 18%);
  color: hsl(var(--hue, 30) 90% 78%);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
}

.kb-avatar--more {
  --hue: 30;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
}

/* ---------- Neues Ticket / neue Spalte ---------- */

.kb-add {
  padding: 0 8px 8px;
}

.kb-add__open,
.kb-addcol {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: 1px dashed transparent;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-retro);
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}

.kb-add__open:hover,
.kb-add__open:focus-visible,
.kb-addcol:hover,
.kb-addcol:focus-visible {
  border-color: var(--line-strong);
  color: var(--ink);
  outline: none;
}

.kb-addcol {
  flex: 0 0 180px;
  border-color: var(--line);
}

.kb-add__input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--accent-cold);
  background: #000;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  resize: none;
  outline: none;
}

.kb-add__btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ---------- Ticket-Details ---------- */

.kb-dialog {
  z-index: 10;
}

.kb-detail {
  width: min(780px, 100%);
  max-height: 100%;
  overflow-y: auto;
}

.kb-detail__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kb-detail__head .kb-card__num {
  padding-top: 6px;
  font-size: 18px;
}

.kb-detail__title {
  flex: 1;
  padding: 2px 4px;
  border: 1px dashed transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  resize: none;
  outline: none;
  overflow: hidden;
}

.kb-detail__title:not([readonly]):hover,
.kb-detail__title:focus {
  border-color: var(--line-strong);
}

.kb-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.kb-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.kb-select {
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  background: #0c0602;
  color: var(--ink);
  font-family: var(--font-retro);
  font-size: 17px;
  text-transform: none;
}

.kb-hint {
  color: var(--ink-dim);
  font-size: 12px;
}

.kb-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
}

.kb-detail h3 {
  margin: 0 0 6px;
}

.kb-detail__side h3:not(:first-child) {
  margin-top: 14px;
}

.kb-detail__desc {
  width: 100%;
  min-height: 140px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  tab-size: 4;
  resize: vertical;
  outline: none;
}

.kb-detail__desc:focus {
  border-color: var(--accent-cold);
}

.kb-people {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kb-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
}

.kb-chip > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-chip__x {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.kb-chip__x:hover {
  color: var(--accent-cold);
}

.kb-person-add {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.kb-person-in {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
}

.kb-person-in:focus {
  border-color: var(--accent-cold);
}

.kb-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

@container (max-width: 700px) {
  .kb-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-filter input {
    width: 100%;
  }

  .kb-filter {
    flex: 1;
  }
}

@media (max-width: 720px) {
  .window--kanban:not(.is-max) {
    width: 96vw;
    height: 88vh;
    max-height: 88vh;
  }
}