/* zeit-controls.css — geteilte Form-Controls der Zeit-/Panel-Compounds.
   App-weit konsumiert (Kontext-Sheet, Form-Lightbox-Close, Gast-/Admin-/
   Extern-Drawer, Abrechnung), daher im Components-Layer statt in einer Section-
   CSS. Frueher in sections/mein-tag/mt-time-booking.css (dort fehl am Platz).

   .zeit-panel-close  Runder 28px-Close-Button (transparent, muted → hover).
   .zeit-select / .zeit-input  Fluent-Form-Felder mit 2px-Unterkante als Focus-Marker. */

.zeit-panel-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.zeit-panel-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }

.zeit-select, .zeit-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
}
.zeit-select:focus, .zeit-input:focus {
  outline: none;
  border-color: var(--color-border);
  border-bottom-color: var(--brand-default);
}