/* ============================================================= */
/* DROP ZONE — Figma design                                      */
/* ============================================================= */

.drop-zone {
    display: block;
    border: 1px dashed var(--cf-color-border-strong);
    border-radius: var(--cf-radius-md);
    background-color: var(--cf-color-surface-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.drop-zone.dragover,
.drop-zone:hover {
    background-color: #efebe6;
    border-color: var(--cf-color-btn-dark);
}

.drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.drop-zone-content {
    padding: 32px 16px;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.drop-zone__icon {
    font-size: 3rem;      /* 48px */
    color: var(--cf-color-text-secondary);
    margin-bottom: 8px;
    line-height: 1;
}

.drop-zone__title {
    font-size: var(--cf-font-size-base);
    font-weight: 700;
    color: var(--cf-color-text-primary);
    margin-bottom: 2px;
}

.drop-zone__subtitle {
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-muted);
    margin-bottom: 12px;
}

/* "Choose file(s)" button inside the drop zone */
.drop-zone__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    background-color: var(--cf-color-btn-secondary);
    color: var(--cf-color-btn-secondary-text);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-base);
    font-weight: 400;
    font-family: var(--cf-font-body);
    pointer-events: none;  /* click handled by <label> wrapping file input */
    border: none;
    cursor: pointer;
}

/* Disabled state (COA: shown dimmed before any file) */
.drop-zone__button--disabled {
    background-color: #bbb9b9;
    opacity: 0.24;
}


/* ============================================================= */
/* FILE LIST TABLE                                               */
/* ============================================================= */

.file-list {
    width: 100%;
}

.file-list__header {
    display: grid;
    grid-template-columns: 1fr 100px 140px 44px;
    gap: 12px;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--cf-color-border);
    font-size: var(--cf-font-size-base);
    font-weight: 700;
    color: var(--cf-color-text-primary);
}

.file-list__row {
    display: grid;
    grid-template-columns: 1fr 100px 140px 44px;
    gap: 12px;
    padding: 4px 0;
    border-top: 1px solid var(--cf-color-border);
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-primary);
    align-items: center;
    min-height: 44px;
}

.file-list__filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-primary);
}

.file-list__size {
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-primary);
}

/* Status badge — shared base */
.file-list__status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-radius: var(--cf-radius-sm);
    min-height: 20px;
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-primary);
    background: var(--cf-color-surface-secondary);
    white-space: nowrap;
}

.file-list__status-badge i {
    font-size: 12px;
}

/* Uploaded (success) */
.file-list__status-badge--uploaded i {
    color: var(--cf-color-text-muted);
}

/* Processing (spinner) */
.file-list__status-badge--processing i {
    color: var(--cf-color-text-primary);
}

/* Error (file too large / wrong type) */
.file-list__status-badge--error {
    background: var(--cf-color-error-badge);
}

.file-list__status-badge--error i {
    color: var(--cf-color-danger-icon);
}

/* Legacy .file-list__status class (still used in some server-rendered rows) */
.file-list__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-secondary);
}

.file-list__status--complete {
    color: var(--cf-color-text-muted);
}

/* Delete button */
.file-list__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--cf-color-text-secondary);
    cursor: pointer;
    border-radius: var(--cf-radius-md);
    transition: color 0.15s ease, background-color 0.15s ease;
    font-size: 20px;
}

.file-list__delete:hover {
    color: var(--cf-color-danger-icon);
    background-color: var(--cf-color-danger-surface);
}


/* ============================================================= */
/* LEGACY SUPPORT                                                */
/* ============================================================= */

.cf-file-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cf-file-row #fileName,
.cf-file-row #fileList {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}