@import "../../../../assets/scss/variables";
.emptylist{
  #empty-list{
    margin-top:50px;
  }
}
.custom-file-upload {

  position: relative;
  border: 1px dashed $text-color;
  border-radius: 6px;
  background: $form-background;

  // Hide the native input entirely — label handles clicks
  input[type=file] {
    display: none;
  }

  // Clickable drop zone
  .drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    width: 100%;
    cursor: pointer;
    padding: 16px;

    .name {
      color: $text-color;
      font-weight: bold;
      font-size: 1.2rem;
      text-align: center;
      pointer-events: none;

      p {
        color: $text-color;
        font-weight: bold;
        font-size: 1.2rem;
      }
    }
  }

  // Disabled state
  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

// ─── File list — card rows matching the design ───────────────────────────────

// Wrapper that owns the scroll guard.
// Sits between the drop-zone and the list so the list can grow freely
// up to the available modal height and then become independently scrollable.
.file-list-scroll-guard {
  // 100dvh falls back to 100vh in older browsers.
  // Subtracts all modal chrome so the list scrolls before the modal itself overflows:
  //   modal header         ≈ 60px
  //   modal top padding    ≈ 20px
  //   drop-zone            ≈ 160px
  //   gap between zones    ≈ 16px
  //   upload button row    ≈ 60px
  //   modal bottom padding ≈ 20px
  //   safety buffer        ≈ 24px
  //                        ──────
  //                        ≈ 360px → rounded to 380px for safety.
  // Tune this single number if your modal header/footer height differs.
  max-height: calc(100dvh - 700px);
  overflow-y: auto;
  overflow-x: hidden;

  // Thin, themed scrollbar (webkit)
  &::-webkit-scrollbar        { width: 4px; }
  &::-webkit-scrollbar-track  { background: transparent; }
  &::-webkit-scrollbar-thumb  {
    background: rgba(4, 0, 89, 0.25);
    border-radius: 2px;
    &:hover { background: rgba(4, 0, 89, 0.5); }
  }

  // Firefox
  scrollbar-width: thin;
  scrollbar-color: rgba(4, 0, 89, 0.25) transparent;

  // Fade-out at the bottom so the user knows there's more to scroll
  &.is-overflowing {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
  }
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0 2px 2px; // small side pad so card shadows aren't clipped
  display: flex;
  flex-direction: column;
  gap: 10px;

  // ── Row ───────────────────────────────────────────────────────────────────
  &__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px 10px 10px;
    background: $white;
    border: 1px solid #dde3f0;
    border-radius: 8px;
    transition: background 0.18s ease, border-color 0.18s ease;

    // Full card inversion on hover
    &:hover {
      background: $blue-to-gray;
      border-color: $blue-to-gray;

      // Badge flips to white background + navy text
      .file-list__badge {
        background: $white !important; // override per-ext colours
        color: $blue-to-gray;
      }

      // Filename becomes white
      .file-list__name {
        color: $white;
      }

      // Trash icon becomes white, no button background
      .file-list__remove {
        background: transparent;
        color: $white;

        svg { stroke: $white; }

        &:not(:disabled):active {
          transform: scale(0.9);
        }
      }
    }
  }

  // ── Extension badge ──────────────────────────────────────────────────────
  &__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: $blue-to-gray;
    color: $white;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.18s ease, color 0.18s ease;

    // Per-extension colour overrides — add more as needed
    &[data-ext="PDF"]  { background: $blue-to-gray; }
    &[data-ext="DOC"],
    &[data-ext="DOCX"] { background: #1a3a8f; }
    &[data-ext="XLS"],
    &[data-ext="XLSX"] { background: #0d2f6e; }
    &[data-ext="PNG"],
    &[data-ext="JPG"],
    &[data-ext="JPEG"] { background: #1155aa; }
    &[data-ext="ZIP"],
    &[data-ext="RAR"]  { background: #2a1a6e; }
  }

  // ── Filename ─────────────────────────────────────────────────────────────
  &__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: $blue-to-gray;
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
  }

  // ── Remove / trash button ────────────────────────────────────────────────
  &__remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: transparent; // no background in normal state
    border: none;
    cursor: pointer;
    color: $blue-to-gray;
    transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;

    svg {
      width: 16px;
      height: 16px;
      stroke: $blue-to-gray;
      transition: stroke 0.18s ease;
    }

    &:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
  }
}