/* =============================================================
   KURSDATIS – App Stylesheet
   Design-Token basierend auf dem Landing-Page-Design
   ============================================================= */

:root
{
  --primary:        #387680;
  --primary-hover:  #2b5f68;
  --primary-soft:   #dbeaec;
  --primary-tint:   #eaf2f3;
  --accent:         #1f4a52;
  --dark:           #0b1220;
  --success:        #059669;

  --bg:             #ffffff;
  --surface:        #f8fafc;
  --surface-2:      #f1f5f9;

  --text:           #0f172a;
  --text-muted:     #475569;
  --text-subtle:    #64748b;

  --border:         rgba(15, 23, 42, 0.08);
  --border-strong:  rgba(15, 23, 42, 0.16);

  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;

  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:     0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --shadow-lg:  0 25px 60px -20px rgba(15, 23, 42, 0.35);

  --font-heading: "General Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ------------------------------------------------------------------ */
/* BODY                                                                 */
/* ------------------------------------------------------------------ */

body
{
  font-family: var(--font-body);
  color: var(--text);
  background-image: url("../grafiken/hintergrund.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 110%;
  background-color: var(--surface-2);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/* NAVBAR                                                               */
/* ------------------------------------------------------------------ */

.navbar
{
  --bs-primary-rgb: 255, 255, 255;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky !important;
  top: 0;
  z-index: 999;
}

.dropdown-menu
{
  position: fixed !important;
  top: 5rem !important;
  left: calc(100% - 200px) !important;
  width: 200px !important;
  z-index: 1000;
}

.nav-mobile-menu
{
  position: fixed !important;
  width: 100%;
  z-index: 1000;
  opacity: 0.95;
}

.nav-link-main-menue
{
  color: var(--text-muted) !important;
  font-size: large !important;
}

.nav-link-main-menue-medium
{
  text-align: end !important;
  color: var(--text-subtle) !important;
  font-size: small !important;
  padding: 0 0.5rem !important;
}

.nav-link-main-menue:hover
{
  color: var(--primary) !important;
  background-color: var(--primary-tint) !important;
}

.nav-link-main-menue-medium:hover
{
  color: var(--primary) !important;
}

.nav > .nav-item.active,
.nav-tabs > .nav-item.active
{
  border: 10px solid var(--primary-soft);
  background-color: var(--primary-soft) !important;
  color: var(--primary) !important;
}

/* ------------------------------------------------------------------ */
/* DASHBOARD                                                            */
/* ------------------------------------------------------------------ */

.dashboard-card
{
  flex-grow: 1;
  overflow: visible;
}

.dashboard
{
  display: flex;
  gap: 1rem;
}

/* ------------------------------------------------------------------ */
/* BUTTONS                                                              */
/* ------------------------------------------------------------------ */

.btn-primary
{
  --bs-btn-bg:                  #387680;
  --bs-btn-border-color:        #387680;
  --bs-btn-color:               #ffffff;
  --bs-btn-hover-bg:            #2b5f68;
  --bs-btn-hover-border-color:  #2b5f68;
  --bs-btn-hover-color:         #ffffff;
  --bs-btn-active-bg:           #1f4a52;
  --bs-btn-active-border-color: #1f4a52;
  --bs-btn-active-color:        #ffffff;
  --bs-primary:                 #387680;
  --bs-secondary:               #387680;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 6px 18px -6px rgba(56, 118, 128, 0.5);
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover
{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(56, 118, 128, 0.55);
}

.btn-secondary:hover
{
  background-color: #387680 !important;
  border-color: #387680 !important;
  color: #ffffff !important;
}

.bottom-border-black:hover
{
  border-color: var(--text-muted) !important;
}

.is-link:hover
{
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* GENERAL                                                              */
/* ------------------------------------------------------------------ */

.card
{
  overflow-y: auto !important;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-header
{
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* ANIMATIONEN                                                          */
/* ------------------------------------------------------------------ */

.fade-in-up
{
  animation-name: fiu;
  top: 55px;
  position: relative;
  opacity: 1;
  animation-duration: 4s;
}

@keyframes fiu
{
  0%
  {
    top: 200px;
    opacity: 0;
  }

  100%
  {
    top: 55px;
    opacity: 1;
  }
}

.fade-in-left
{
  animation-name: fil;
  left: 0px;
  position: relative;
  opacity: 1;
  animation-duration: 4s;
}

@keyframes fil
{
  0%
  {
    left: 200px;
    opacity: 0;
  }

  100%
  {
    left: 0px;
    opacity: 1;
  }
}

.fade-in-right
{
  animation-name: fir;
  right: 0px;
  position: relative;
  opacity: 1;
  animation-duration: 4s;
}

@keyframes fir
{
  0%
  {
    right: 200px;
    opacity: 0;
  }

  100%
  {
    right: 0px;
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ */
/* SCHNITTSTELLE                                                        */
/* ------------------------------------------------------------------ */

.schnittstelle
{
  padding-top: 20px;
  padding-bottom: 20px;
  align-items: center;
}

.nav-pills .nav-link
{
  text-align: left;
  border-radius: 0;
  color: var(--primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link
{
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

.formLabel
{
  width: 300px;
  white-space: normal;
  text-align: left;
}

.formHinweis
{
  margin-left: 305px;
  white-space: normal;
  text-align: left;
}

.input-group-prepend .input-group-text
{
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ------------------------------------------------------------------ */
/* MODAL                                                                */
/* ------------------------------------------------------------------ */

.modal-header
{
  padding: 0.5rem;
  align-items: center;
}

.modal-title
{
  font-size: 1rem;
  line-height: 1;
  margin: 0;
}

.modal-header .close
{
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* BLINKEN                                                              */
/* ------------------------------------------------------------------ */

@keyframes blink
{
  50%
  {
    opacity: 0;
  }
}

.blink
{
  animation: blink 1s infinite;
}

/* ------------------------------------------------------------------ */
/* MELDUNGEN                                                            */
/* ------------------------------------------------------------------ */

.alert-container
{
  position: absolute;
  margin-top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  z-index: 999;
  padding: 10px;
  background-color: var(--primary);
  color: #ffffff;
  border: 0px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
  border-radius: var(--radius-sm);
  word-wrap: break-word;
}

.websocket-container
{
  position: absolute;
  margin-top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  z-index: 999;
  padding: 10px;
  background-color: var(--primary);
  color: #ffffff;
  border: 0px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
  border-radius: var(--radius-sm);
  word-wrap: break-word;
}

.progress-kd
{
  background-color: var(--primary);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ */
/* BENACHRICHTIGUNGEN                                                   */
/* ------------------------------------------------------------------ */

.notification-icon
{
  transition: all 0.3s;
}

.pulse
{
  animation: pulse 1.5s infinite;
  color: #ff0000;
}

@keyframes pulse
{
  0%
  {
    transform: scale(1);
  }

  50%
  {
    transform: scale(1.8);
    opacity: 0.8;
  }

  100%
  {
    transform: scale(1);
  }
}

/* ------------------------------------------------------------------ */
/* TABELLEN                                                             */
/* ------------------------------------------------------------------ */

thead
{
  background-color: var(--primary);
  color: #ffffff;
}

thead th
{
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--primary-hover) !important;
}