/* ============================================================================
   DELETE BUTTONS
   ============================================================================ */

/* Danger button in task modal footer */
.modal-action-btn.danger-btn {
    color: var(--text-tertiary);
}

.modal-action-btn.danger-btn:hover {
    background: var(--color-danger-light);
    color: var(--color-red-text);
}

/* Delete button for project/area sidebars */
.entity-delete-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.entity-delete-btn:hover {
    background: var(--color-danger-light);
    color: var(--color-red-text);
}

.entity-delete-btn svg {
    width: 16px;
    height: 16px;
}

/* Archive button for project/area sidebars */
.entity-archive-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-bottom: 8px;
}

.entity-archive-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-green-text);
}

.entity-archive-btn svg {
    width: 16px;
    height: 16px;
}

/* Archive button for note modal footer */
.note-archive-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.note-archive-btn svg {
    width: 18px;
    height: 18px;
}

.note-archive-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-green-text);
}