/* === Drag and Drop Area === */
.drag-area {
    border-radius: 16px;
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow 120ms ease, background-color 120ms ease;
  }
  
  .drag-area.drag-highlight {
    box-shadow: inset 0 0 0 2px #b0b0b0;
    background: rgba(203, 213, 225, 0.2);
  }
  
  .drag-area.drag-highlight .empty-pill {
    opacity: 0;
    visibility: hidden;
  }
  
  /* === Toast Notifications Container === */
  #toast-root{
    position: fixed;
    left: 50%;
    top: 0;                 
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
  }
  
  /* Toast Styling and Animations === */
  .toast{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #4589ff;
    color: #fff;
    padding: 20px 30px;
    border-radius: 18px;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
    font: 500 16px/1.2 "Open Sans", system-ui, sans-serif;
    opacity: 0;
    transform: translateY(100vh) scale(.98);   
    pointer-events: none;
  }
  
  .toast img{ width:20px; height:20px; display:block; filter: brightness(0) invert(1); }
  .toast--show{ animation: toast-up .35s cubic-bezier(.2,.9,.2,1) forwards; }
  .toast--hide{ animation: toast-down .25s ease-in forwards; }
  
  @keyframes toast-up{
    from { opacity: 0; transform: translateY(100vh) scale(.98); }
    to   { opacity: 1; transform: translateY(50vh)  scale(1); } /* Mitte */
  }
  
  @keyframes toast-down{
    from { opacity: 1; transform: translateY(50vh) scale(1); }
    to   { opacity: 0; transform: translateY(100vh) scale(.98); }
  }
  
  @media (prefers-reduced-motion: reduce){
    .toast--show,.toast--hide{ animation-duration: .01ms; }
  }
  
  /* === Toast Icons === */
  .toast-icon{
    width:20px; height:20px; display:inline-block;
    background:#fff; 
    -webkit-mask: url("../assets/img/Board.svg") no-repeat center / contain;
            mask: url("../assets/img/Board.svg") no-repeat center / contain;
  }