/* month-switcher.css — MonthSwitcher-Popover (Jahres-Stepper + 4x3 Monats-Grid). */

}

/* ══════════════════════════════════════════════════════════════════════════
 * MonthSwitcher (Core-V2)
 * Popover-Panel mit Jahres-Stepper oben + 4x3 Monats-Grid. Geoeffnet aus
 * dem contextSwitcher-Slot der PageToolbar. * ══════════════════════════════════════════════════════════════════════════ */
.app-month-switcher-panel {
  padding: var(--space-2-5) var(--space-3) var(--space-3);
  min-width: 240px;
  font-family: var(--lod-font-sans);
}
.app-month-switcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--lod-gray-100);
  margin-bottom: var(--space-2);
}
.app-month-switcher-year {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--lod-darkblue);
  letter-spacing: 0.2px;
}
.app-month-switcher-year-nav {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--lod-gray-700);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-quick), color var(--duration-quick);
}
.app-month-switcher-year-nav:hover:not(:disabled) {
  background: var(--lod-gray-50);
  color: var(--lod-darkblue);
}
.app-month-switcher-year-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.app-month-switcher-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}
.app-month-switcher-cell {
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--lod-gray-700);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--duration-quick), color var(--duration-quick), border-color var(--duration-quick);
}
.app-month-switcher-cell:hover:not(:disabled) {
  background: var(--lod-gray-50);
  color: var(--lod-darkblue);
}
.app-month-switcher-cell.is-active {
  background: var(--lod-darkblue-100);
  color: var(--lod-darkblue);
  font-weight: var(--fw-semibold);
  border-color: var(--lod-darkblue-300);
}
.app-month-switcher-cell.is-disabled,
.app-month-switcher-cell:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Monats-Navi-Row in Toolbar-slots.left: [Prev] [Switcher-Trigger] [Next].
   Paket KONT-V2a — wiederverwendbar fuer alle Sections mit Monats-Kontext. */
.app-scope .app-month-nav-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.app-scope .app-month-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--lod-gray-200);
  background: #fff;
  color: var(--lod-gray-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-quick), border-color var(--duration-quick);
  flex-shrink: 0;
}
.app-scope .app-month-nav-btn:hover:not(:disabled) {
  background: var(--lod-gray-50);
  border-color: var(--lod-darkblue-300);
}
.app-scope .app-month-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.app-scope .app-month-nav-btn img { opacity: 0.6; }