/* Kleine Ergänzungen zu Bootstrap */
body { background-color: #f4f6f8; }
.task-card { border-left: 6px solid #adb5bd; }
.task-card.status-green  { border-left-color: #198754; }
.task-card.status-yellow { border-left-color: #ffc107; }
.task-card.status-red    { border-left-color: #dc3545; }
.task-card.status-neutral{ border-left-color: #adb5bd; }
.area-badge { font-size: .75rem; }
.fairshare-bar { height: 1.5rem; }
.cursor-pointer { cursor: pointer; }

/* Bereichs-Kacheln auf dem Dashboard (Tody-artige Raum-Übersicht) */
.room-card {
  border: none;
  border-top: 5px solid #adb5bd;
  position: relative;
  overflow: hidden;
  transition: transform .1s ease, box-shadow .1s ease;
}
.room-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }

/* Bereichs-Icon großflächig als dezentes Hintergrundmotiv der Kachel */
.room-card .room-icon-bg {
  position: absolute;
  right: -.4rem;
  bottom: -.6rem;
  font-size: 5rem;
  opacity: .16;
  line-height: 1;
  pointer-events: none;
}
.room-card-colored .room-icon-bg { opacity: .28; color: #fff; }

.room-card .card-body { position: relative; z-index: 1; }

/* Runder Status-Punkt (rot/gelb/grün/neutral) oben rechts – unabhängig von Icon/Farbe des Bereichs */
.room-card .room-status-dot {
  position: absolute;
  top: .5rem; right: .5rem;
  z-index: 2;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  background-color: #adb5bd;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.room-card.status-green  { border-top-color: #198754; }
.room-card.status-green  .room-status-dot { background-color: #198754; }
.room-card.status-yellow { border-top-color: #ffc107; }
.room-card.status-yellow .room-status-dot { background-color: #ffc107; }
.room-card.status-red    { border-top-color: #dc3545; }
.room-card.status-red    .room-status-dot { background-color: #dc3545; }
.room-card.status-neutral{ border-top-color: #adb5bd; }
.room-card.status-neutral .room-status-dot { background-color: #adb5bd; }

/* Bereichs-Formular: Farb-Swatch-Grid (feste Palette statt freiem Colorpicker) */
.area-color-swatch {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}
.area-color-swatch.active {
  border-color: #212529;
  box-shadow: 0 0 0 2px #fff inset;
}
.area-color-swatch.area-color-none {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: #adb5bd;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.area-color-swatch.area-color-none.active { border-color: #212529; }

/* Farb-Punkt in der Bereichs-Tabelle */
.color-dot {
  display: inline-block;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  vertical-align: middle;
}

/* Bereichs-Formular: Icon-Dropdown mit sichtbaren Icons statt reinem Text */
.area-icon-menu { max-height: 320px; overflow-y: auto; min-width: 220px; }
.area-icon-option.active { background-color: var(--bs-tertiary-bg, #f1f3f5); font-weight: 600; }

/* Aufgaben-Listenzeilen mit Status-Gauge (Tody-Stil: ein Balken füllt sich stufenlos
   grün->gelb->rot; die Farbe kommt inline aus der PHP-Berechnung in taskDueness()). */
.task-row { border-left: 5px solid #adb5bd; padding-top: .65rem; padding-bottom: .65rem; }
.min-w-0 { min-width: 0; }

/* Der Balken selbst: Füllstand wandert von links nach rechts, die Fälligkeits-
   Markierung sitzt fest bei 65% mit zwei Toleranz-Strichen bei 55% und 75%.
   Die Striche werden über "left" + negativen "margin-left" zentriert (statt
   transform), damit alle drei bei exakt gleichem Abstand zueinander stehen. */
.dueness-gauge {
  position: relative;
  width: 4.5rem;
  height: 1rem;
  border-radius: 999px;
  background: #ced4da;
  overflow: hidden;
  flex-shrink: 0;
}
.dueness-gauge-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  transition: width .2s ease;
}
.dueness-gauge-tick {
  position: absolute;
  top: 1px; bottom: 1px;
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
}
.dueness-gauge-tick.main {
  width: 3px;
  margin-left: -1.5px;
  background: #ffffff;
}
.dueness-short-label {
  font-size: .78rem;
  font-weight: 600;
  color: #495057;
  min-width: 4.2rem;
}

/* Zustands-Regler beim Anlegen einer Aufgabe */
.state-slider-track {
  height: .5rem;
  border-radius: .5rem;
  background: linear-gradient(to right, #198754 0%, #198754 40%, #ffc107 70%, #dc3545 100%);
}