/* app.css */

/* TEXT */
.text-primary { color: var(--bs-primary) !important; }
.text-danger { color: #FFFFFF !important; }

/* BACKGROUND */
.bg-primary {
  background: linear-gradient(135deg, #FF3A3A 0%, #E2001A 50%, #A80014 100%) !important;
  color: #FFFFFF !important;
}

.bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; }

.bg-danger {
  background: linear-gradient(135deg, #FF4A4A 0%, #C4001A 50%, #8F0012 100%) !important;
  color: #FFFFFF !important;
}

.bg-danger-subtle { background-color: var(--bs-danger-bg-subtle) !important; }

/* BORDER */
.border-primary { border-color: var(--bs-primary) !important; }
.border-danger { border-color: var(--bs-danger) !important; }

/* BUTTON PRIMARY */
.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: #E2001A;
  --bs-btn-border-color: #E2001A;

  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #C4001A;
  --bs-btn-hover-border-color: #C4001A;

  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #A80014;
  --bs-btn-active-border-color: #A80014;
}
.btn-primary:hover {
	background-color: rgba(var(--bs-primary-rgb), 0.7);
}

/* BUTTON DANGER */
.btn-danger {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: #C4001A;
  --bs-btn-border-color: #C4001A;

  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #A80014;
  --bs-btn-hover-border-color: #A80014;

  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #8F0012;
  --bs-btn-active-border-color: #8F0012;
}
.btn-danger:hover {
	background-color: rgba(var(--bs-primary-rgb), 0.7);
}

/* OUTLINE */
.btn-outline-primary {
  --bs-btn-color: #E2001A;
  --bs-btn-border-color: #E2001A;

  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #E2001A;
  --bs-btn-hover-border-color: #E2001A;
}
.btn-outline-primary:hover {
	background-color: rgba(var(--bs-primary-rgb), 0.7);
}

.btn-outline-danger {
  --bs-btn-color: #C4001A;
  --bs-btn-border-color: #C4001A;

  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #C4001A;
  --bs-btn-hover-border-color: #C4001A;
}
.btn-outline-danger:hover {
	background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* FOCUS (dezent) */
.btn:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(226, 0, 26, 0.25);
}

/* DYNAMIK (ruhig) */
.btn-primary,
.btn-danger {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-icon {
	border-radius: 0.5rem;
	transition: background-color 0.15s ease-in-out;
}

.btn-icon:hover {
	background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.btn.disabled, .btn:disabled, fieldset:disabled {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* app.css */
.bg-gradient-login {
  background: linear-gradient(135deg, var(--login-grad-1) 0%, var(--login-grad-2) 33%, var(--login-grad-3) 66%, var(--login-grad-4) 100%) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

/* =====================================================
   TOM SELECT – Dark-Theme-Overrides
   ===================================================== */

/* Wrapper soll sich wie das native input verhalten */
.form-floating .ts-wrapper {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

/* Steuerelement: Hintergrund + Textfarbe passend zum Form-Control */
.form-floating .ts-wrapper .ts-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1rem 0.75rem !important; /* leer: Label zentriert, wie natives form-floating */
  min-height: 3.5rem;
  color: var(--bs-body-color) !important;
  font-size: 1rem;
  cursor: text;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

/* Hat Wert oder ist fokussiert: Label floatet nach oben, Inhalt braucht mehr Platz */
.form-floating .ts-wrapper.has-items .ts-control,
.form-floating .ts-wrapper.focus .ts-control {
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
}

/* Ausgewählter Wert (Item) */
.form-floating .ts-wrapper .ts-control .item {
  color: var(--bs-body-color) !important;
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin: 0;
}

/* Eingabe-Cursor-Feld */
.form-floating .ts-wrapper .ts-control input {
  color: var(--bs-body-color) !important;
  background: transparent !important;
  caret-color: var(--bs-body-color);
  line-height: normal;
}

/* Single-Select: Suche sichtbar halten, ohne Umbruch */
.form-floating .ts-wrapper.single .ts-control input {
  width: auto !important;
  min-width: 1ch !important;
  flex: 0 0 auto !important;
}

.form-floating .ts-wrapper.single .ts-control .item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

/* Floating-Label: normaler Zustand (hoch-geschoben wenn Wert vorhanden oder fokussiert) */
.form-floating .ts-wrapper ~ label,
.form-floating:has(.ts-wrapper) label {
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

/* Label hochschieben wenn ts-wrapper fokussiert oder einen Wert hat */
.form-floating .ts-wrapper.focus ~ label,
.form-floating .ts-wrapper.has-items ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Dropdown */
.ts-dropdown {
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  z-index: 1060;
}

/* Dropdown-Optionen */
.ts-dropdown .option {
  color: var(--bs-body-color) !important;
  padding: 0.4rem 0.75rem;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Optgruppen-Header */
.ts-dropdown .optgroup-header {
  color: var(--bs-secondary-color) !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--bs-body-bg) !important;
}

/* Highlight-Farbe der Treffer – statt Browser-Gelb ein dezentes Rot */
.ts-dropdown .highlight {
  background: rgba(226, 0, 26, 0.25) !important;
  color: inherit !important;
  border-radius: 2px;
}