/*Anpassungen für Light Theme*/

@media (prefers-color-scheme: light) {
  /* CSS Code wenn Light Mode aktiv */
  html {
    color: #111111 !important;
  }

  body {
    background-image: url('/Media/BackgroundImages/lightbg.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  /* Fallback animated background when no image is loaded */
  body.no-bg-image {
    background: #F7FAFC;
    background-image: none;
    transition: all 0.3s ease;
  }
  
  /* Animated background container */
  .animated-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(135deg, #F7FAFC 0%, #E2E8F0 50%, #F7FAFC 100%);
  }
  
  body.no-bg-image .animated-bg {
    display: block;
  }
  
  .animated-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
  }
  
  /* Particles */
  .particle {
    position: fixed;
    pointer-events: none;
    opacity: 0.5;
    background: rgba(59, 130, 246, 0.5);
    border-radius: 50%;
    animation: float 20s infinite;
    filter: blur(1px);
    z-index: -1;
  }
  
  body.no-bg-image .particle {
    display: block;
  }
  
  body:not(.no-bg-image) .particle {
    display: none;
  }

  .btn-secondary {
    background-color: #b4b4b4 !important;
    border-color: #d2d2d2 !important;
  }

  .bg-secondary
  {
    background-color: #b4b4b4 !important;
  }
  /* Dropzone Uploader */
  .dropzone {
    background-color: #d2d2d2 !important;
    border-radius: 10px !important;
    border: 1px solid #515151;
    padding: 0.375rem 0.75rem;
  }

  .text-dark {
    color: #a8a7a7 !important;
  }

  .text-detail {
    color: #333333 !important;
  }


  .dropdown-item:hover {
    background-color: #dedede !important;
    border-radius: 8px;
    box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.3);
  }

  /* Card Hintergrund transparenter mit Glassmorphism-Effekt */
  .card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px !important;
  
  }

  .card-header-button {
    background-color: rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .card-header-button .card-body {
    border: none !important;
  }
  
  .card-header-button .card-body:not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger) {
    color: #333333 !important;
  }
  
  .card-header-button h5:not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger) {
    color: #333333 !important;
  }
  
  .card-header-button a:not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger) {
    color: #333333 !important;
  }
  
  /* Spezifische Regeln für Farbklassen in card-header-button */
  .card-header-button .text-primary,
  .card-header-button .text-primary h5,
  .card-header-button .text-primary span {
    color: #0d6efd !important;
  }
  
  .card-header-button .text-success,
  .card-header-button .text-success h5,
  .card-header-button .text-success span {
    color: #198754 !important;
  }
  
  .card-header-button .text-info,
  .card-header-button .text-info h5,
  .card-header-button .text-info span {
    color: #0dcaf0 !important;
  }
  
  .card-header-button .text-warning,
  .card-header-button .text-warning h5,
  .card-header-button .text-warning span {
    color: #fd7e14 !important;
  }
  
  /* Globale text-warning Farbe überschreiben */
  .text-warning {
    color: #fd7e14 !important;
  }
  
  /* Bootstrap warning CSS-Variablen überschreiben */
  :root {
    --bs-warning: #fd7e14;
    --bs-warning-rgb: 253, 126, 20;
  }
  
  /* Button-Outline warning Farbe */
  .btn-outline-warning {
    --bs-btn-color: #fd7e14;
    --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fd7e14;
    --bs-btn-hover-border-color: #fd7e14;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fd7e14;
    --bs-btn-active-border-color: #fd7e14;
  }
  
  /* Button warning Farbe */
  .btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #fd7e14;
    --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffaa5c;
    --bs-btn-hover-border-color: #ff9f47;
    --bs-btn-focus-shadow-rgb: 217, 108, 17;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ff9f47;
    --bs-btn-active-border-color: #ff9338;
  }
  
  .card-header-button .text-danger,
  .card-header-button .text-danger h5,
  .card-header-button .text-danger span {
    color: #dc3545 !important;
  }
  

  .text-light {
    color: rgb(48, 48, 48);
  }


  .card-menu {
    background-color: rgba(206, 206, 206, 0.8) !important;
    border-radius: 5px !important;
  }

  .nav-tpbg {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }

  .nav-shadow:hover {
    -webkit-box-shadow: 0 4px 6px -6px #222;
    -moz-box-shadow: 0 4px 6px -6px #222;
    box-shadow: 0 4px 6px -6px #222;
  }

  .text-primary {
    color: #0366d6 !important;
  }

  .btn-dark {
    background-color: rgba(200, 200, 200, 1) !important;
    border-color: rgba(179, 179, 179, 1) !important;
    color: #ffffff !important;
  }

  /* Datetimepicker Today farbe setzen*/
  .today {
    background-image: linear-gradient(
      rgb(172, 174, 176),
      rgb(143, 146, 148)
    ) !important;
  }

   .card-todo {
      background-color: rgba(255, 255, 255) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.2s ease;
  } 
  /*.card-todo:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
    } */

  .card-modal {
    background-color: rgba(210, 210, 210, 0.4) !important;
    border-radius: 10px !important;
  }

  .card-chat-me {
    background-color: rgb(240, 240, 240) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    /* box-shadow: 1px 2px 2px 2px rgba(25, 25, 25, 0.2); */
  }

  .card-chat-other {
    background-color: rgba(255, 255, 255, 1) !important;
    border-radius: 10px !important;
    /* box-shadow: 1px 2px 2px 2px rgba(25, 25, 25, 0.2); */
  }

  .card-modal-menu {
    background-color: rgb(255, 255, 255, 1) !important;
    border-radius: 10px !important;
    /* Apple-like subtle shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
  }
  
  .card-modal-menu:hover:not(.active-card) {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12),
                0 3px 6px rgba(0, 0, 0, 0.08);
  }
  
  .card-modal-form {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
  }

  /* Dock */
  #Dock {
    position: fixed;
    bottom: 2%;
    left: 1%;
    right: 1%;
    width: 98%;
    max-width: 860px;
    margin: 0 auto;
    z-index: 99;
    font-size: 14px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9),
      rgba(232, 232, 232, 0.9)
    );
    outline: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 10px;
    border: rgba(255, 255, 255, 0.4);
    border-width: 1px;
    border-style: solid;
    box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.3);
  }

  .form-control {
    background-color: rgb(250, 250, 250) !important ;
  }
  /* Button in Dock */
  .dock-btn {
    background-color: rgba(230, 230, 230) !important;
    border-color: rgba(179, 179, 179, 1) !important;
    color: rgb(113, 113, 113) !important;
    border-radius: 10px;
    transition: transform 0.2s;
    box-shadow: 1px 1px 1px rgba(106, 105, 105, 0.5);
  }

  .alert-secondary {
    background-color: rgb(245, 245, 245);
  }
  .select2-selection {
    background-color: transparent;
    /* color: #b1b1b1 !important; */
    border: none !important;
  }
  
  /* Select2 speziell für ToDo-Modul - weiße Hintergründe */
  .todo-module .select2-container--bootstrap-5 .select2-selection {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    color: #333333 !important;
  }
  
  .todo-module .select2-dropdown {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  .todo-module .select2-results__option {
    background-color: transparent !important;
    color: #333333 !important;
  }
  
  .todo-module .select2-results__option:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
  
  .todo-module .select2-results__option[aria-selected="true"] {
    background-color: rgba(13, 110, 253, 0.1) !important;
    color: #0d6efd !important;
  }
  
  .todo-module .select2-selection__rendered {
    color: #333333 !important;
  }
  
  .todo-module .select2-search__field {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #333333 !important;
  }

  .div--fullscreen {
    background-color: rgba(255, 255, 255, 1);
  }

  .tableroundborder {
    border-collapse: separate;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10px;
    border: 1px solid;
    border-color: rgba(100, 100, 100, 0.1);
  }
  .table-striped tr td {
    border: none !important;
  }
  .table-striped tr th {
    border: none !important;
  }

  .table.table-sm.table-striped.tableroundborder tr th{
    color: #838383  !important;
    font-weight: 500 !important;
  }

  .table.table-sm.table-striped.tableroundborder tr td{
    color: #666666  !important;
    font-weight: 300 !important;
  }

  .trumbowyg-button-pane {
    background-color: rgba(210, 210, 210, 0.6) !important;
  }

  /* MyKI Chat */
  .chat-container {
    background-color: rgb(240, 240, 240) !important;
    border: 1px solid #b9b7b7;
    border-radius: 8px;
    padding: 0.5rem;

}

.chat-container ::placeholder {
    color: rgb(99, 99, 99); /* Farbe des Placeholders */
    font-style: italic; /* Optional: kursiver Stil */
    opacity: 1; /* Falls der Placeholder zu blass erscheint */
}
/* Die Textarea selbst */
.chat-textarea {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  resize: none; /* kein "Eckenziehen" */
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Allgemeiner Button-Stil (angelehnt an ChatGPT) */
.chat-btn {
  background: none;
  border: none;
  color: #282727;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
}

.chat-btn:hover {
  color: #111111;
}

/* Deaktivierter Senden-Button etwas blasser machen */
#send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ======================
   ANIMATIONEN
   ====================== */

@keyframes rotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0) translateX(0); 
  }
  25% { 
    transform: translateY(-100px) translateX(100px); 
  }
  50% { 
    transform: translateY(-200px) translateX(-100px); 
  }
  75% { 
    transform: translateY(-100px) translateX(-50px); 
  }
}

/* ======================
   MOBILE OPTIMIERUNGEN
   ====================== */

/* Weniger Partikel auf kleinen Bildschirmen für bessere Performance */
@media (max-width: 768px) {
  .animated-bg::before {
    animation-duration: 40s; /* Langsamere Animation auf mobilen Geräten */
  }
}

/* Partikel auf sehr kleinen Bildschirmen ausblenden */
@media (max-width: 480px) {
  .particle {
    display: none !important;
  }
}
}