/* mein-fokus.css — Mein-Tag "Mein Fokus" V2 Quelle: extrahiert aus mein-tag.css ("Mein Fokus V2"-Block). Inhalt 1:1.

 Konsumenten: web/js/sections/mein-tag.js — rendert die rechte/mittlere
 Spalte "Mein Fokus" mit Header (Titel + Counter + +-Btn + Drei-Punkte),
 Liste (#fokus-list), Footer-Link, Add-Picker-Popover.

 Hinweis: Karten-Inhalt der Fokus-Liste (.fk*) bleibt in focus-cards.css.
 Drag/Sort/Scroll-Shell von #fokus-list selbst liegt in legacy-shared.css
 (gemeinsam mit #aufgaben-list — beides ist SortableJS-Drag-Container).
 ========================================================================== */

/* Wrapper innerhalb .fokus-spalte — fuellt die Spalte komplett aus. */
.mt-fokus-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Header — basiert auf .mt-section-header, ergaenzt nur Counter + Aktionen.
 Kein zusaetzliches Horizontal-Padding: die Spalte (.mt-section) liefert
 bereits 16px aussen herum. Sonst sitzt der Mein-Fokus-Titel weiter rechts
 als der Zeit/Kalender-Titel — */
.mt-fokus-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.mt-fokus-header .mt-section-title { flex: 0 0 auto; margin-right: var(--space-1); }
/* Lightning-Bolt im Header gelb tintieren .
 Filter aus admin.css .kat-card--yellow uebernommen — bewaehrtes Yellow. */
.mt-fokus-bolt img {
  filter: invert(37%) sepia(97%) saturate(1204%) hue-rotate(17deg) brightness(92%) contrast(101%);
}

.mt-fokus-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-counter);
  background: var(--brand-soft, var(--color-brand-soft));
  color: var(--brand-default);
  font-size: var(--fs-badge, 12px);
  font-weight: var(--fw-semibold);
  flex: 0 0 auto;
}

/* Day-Selector-Label im Fokus-Header: zeigt den gewaehlten Tag, damit klar ist,
   dass die Auto-Fokus-Karten die Buchungen DIESES Tages sind (nicht heute). */
.mt-fokus-day {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1-5);
  height: 20px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  color: var(--brand-default);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  flex: 0 0 auto;
}
.mt-fokus-day.hidden { display: none; }

.mt-fokus-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
/* .app-scope-Praefix: der globale Button-Reset (.app-scope button { border/
   background/padding: 0 }, Spezifitaet 0,1,1) plaettet sonst border+background
   dieser Ein-Klassen-Regeln — der :hover-border-color rendert dann nie. */
.app-scope .mt-fokus-add-btn,
.app-scope .mt-fokus-opts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  transition: background-color var(--duration-quick), border-color var(--duration-quick);
}
.app-scope .mt-fokus-add-btn:hover,
.app-scope .mt-fokus-opts-btn:hover {
  background: var(--color-bg-subtle, var(--color-surface-soft));
  border-color: var(--color-border-light);
}
.mt-fokus-add-btn:focus-visible,
.mt-fokus-opts-btn:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}

/* Liste — kein Horizontal-Padding (.mt-section liefert es), nur Bottom-Spacing.
 Padding angeglichen an Tages-Spalte. */
.mt-fokus-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--space-2);
}

/* Footer-Link — fuehrt zum Aufgaben-Tab mit Fokus-Filter.
   .app-scope-Praefix: sonst schlaegt .app-scope a { color: inherit } (0,1,1)
   die Ein-Klassen-Regel (0,1,0) und die Brand-Farbe kaeme nie an. */
.app-scope .mt-fokus-footer-link {
  display: block;
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
  text-align: center;
  color: var(--brand-default);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface);
  flex-shrink: 0;
  cursor: pointer;
}
.mt-fokus-footer-link:hover { text-decoration: underline; }
.mt-fokus-footer-link.hidden { display: none; }

/* Add-Picker-Popover (kein LoD.PopoverMenu, weil Suche+Liste).
   width: min(...) statt fixe 280px — gibt natuerlichen Viewport-Schutz auf
   schmalen Bildschirmen (audit:responsive Regel 2/3). */
/* Add-Picker-Panel: Chrome (Position, Hintergrund, Rand, Radius, Schatten, z-index,
   Entrance-Animation) kommt aus .app-popover (window.Popover-SSOT). Hier nur noch
   das Add-Picker-Layout — flex-column, damit die Suche fix oben steht und die Liste
   darunter scrollt. padding:0 setzt einen etwaigen .app-popover-Default zurueck. */
.mt-fokus-add-popover.app-popover {
  width: min(280px, calc(100vw - 24px));
  max-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.mt-fokus-add-search {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.mt-fokus-add-input {
  width: 100%;
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--color-bg);
}
.mt-fokus-add-input:focus {
  outline: 2px solid var(--brand-default);
  outline-offset: -1px;
  border-color: var(--brand-default);
}
.mt-fokus-add-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-1) 0;
}
.mt-fokus-add-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  width: 100%;
  padding: var(--space-1-5) var(--space-2);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
}
.mt-fokus-add-item:last-child { border-bottom: none; }
.mt-fokus-add-item:hover { background: var(--color-bg-subtle, var(--color-surface-soft)); }
.mt-fokus-add-item-titel {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.mt-fokus-add-item-pfad {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}
.mt-fokus-add-empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Notebook 1000-1399: kompakterer Header-Margin, Spalte ist schmaler. */
@media (max-width: 1399px) {
  .mt-fokus-header { margin-bottom: var(--space-3); }
}

/* Tablet 600-999: groessere Touch-Targets (>=36px Pflicht), Counter kompakter.
   .app-scope-Präfix Pflicht: die Basis-Regeln oben sind 0,2,0 — ohne Präfix
   verliert der Override im Cascade. Einzeln (keine Komma-Gruppe): der
   Audit-Parser matcht Tablet-Overrides selektorgenau. */
@media (max-width: 999px) {
  .app-scope .mt-fokus-add-btn { width: 36px; height: 36px; }
  .app-scope .mt-fokus-opts-btn { width: 36px; height: 36px; }
  .mt-fokus-counter { min-width: 20px; height: 20px; font-size: var(--fs-badge); }
}

/* Mobile <600: Padding minimal — .mt-section liefert die aussenherum, kein
   extra Horizontal-Padding noetig. */
@media (max-width: 599px) {
  .mt-fokus-footer-link { font-size: var(--font-size-base); }
}