/* ============================================================
   UPLOADED (Datum + Notiz-Icon als ein Block)
   ============================================================ */

   .uploaded-wrap{
    display: inline-flex;
    align-items: center;       /* vertikal exakt mittig */
    gap: 6px;                  /* Abstand Datum ↔ Icon */
    white-space: nowrap;
  }
  
  
  /* ============================================================
     NOTE BUTTON
     ============================================================ */
  
  .note-button-wrap{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;        /* wichtig: Anker für Popup */
  }
  
  .note-btn{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;            /* verhindert baseline-shift */
  }
  
  .note-icon{
    width: 28px;               /* optisch passend zur Zeile */
    height: 22px;
    display: block;
    opacity: 0.45;
  }
  
  .note-btn:hover .note-icon{
    opacity: 1;
  }
  
  .note-btn.has-notes .note-icon{
    opacity: 1;
  }
  
  
  /* ============================================================
     NOTE POPUP
     ============================================================ */
  
  .note-popup{
    position: absolute;        /* wird per JS unter dem Button platziert */
    z-index: 99999;
  
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  
    padding: 10px;
    width: 260px;
  
    animation: noteFadeIn 0.12s ease-out;
  }
  
  .note-popup textarea{
    width: 100%;
    height: 80px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    outline: none;
    resize: none;
  }
  
  .note-popup textarea:focus{
    border-color: #9ca3af;
  }
  
  .note-popup .note-actions{
    margin-top: 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  
  
  /* ============================================================
     ANIMATION
     ============================================================ */
  
  @keyframes noteFadeIn{
    from{
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
    to{
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* ============================================================
     GLOBAL HELP HINTS ( ? + Popover )
     ============================================================ */

  .help-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:999px;
    border:1px solid #d1d5db;
    color:#4b5563;
    font-size:11px;
    font-weight:400;
    line-height:1;
    cursor:help;
    user-select:none;
  }

  .help-inline{
    position:relative;
    display:inline-flex;
    align-items:center;
  }

  .help-popover{
    position:absolute;
    left:0;
    top:calc(100% + 6px);
    z-index:20;
    width:min(420px, 80vw);
    padding:8px 10px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#fff;
    color:#374151;
    font-size:11px;
    line-height:1.3;
    font-weight:400;
    display:none;
  }

  .help-inline--align-right .help-popover{
    left:auto;
    right:0;
  }

  .help-inline:hover .help-popover,
  .help-inline:focus-within .help-popover{
    display:block;
  }

  .help-popover a{
    color:inherit;
    text-decoration:underline;
  }